Web Dev Questions That Don't Need Their Own Thread v4

[Miljaker]

[IMG]http://i52.tinypic.com/33oqhq9.png[/IMG]

Welcome to the Web Development's section very own [B]QTDNTOT thread.

[/B]To keep things running smoothly (until our inevitable demise), please try to abide by these very simple rules:

▬ Don't be a jerk.
▬ Keep your hands inside the thread at all times.[B]
▬ [B]Don't be a jerk.

[/B]Previous versions:
[/B]
▬ [URL="http://facepunch.com/showthread.php?t=1152061"]Version 3[/URL]
▬ [URL="http://www.facepunch.com/showthread.php?t=938504"]Version 2[/URL]
▬ [URL="http://www.google.com/"]Version 1 - MIA[/URL]

[Stonecycle]

How feasible would it be to freelance fulltime?

[KmartSqrl]

[QUOTE=Stonecycle;39737012]How feasible would it be to freelance fulltime?[/QUOTE]

There's tons of people that freelance full time, the feasibility comes from your skills and business acumen more than anything.

[xianlee]

How can I center a roll over sprite image?

[Miljaker]

Anyone have any experience with browser wrappers? Are things like WebKit .NET any good?

[aeeh]

looking for a drag&drop tutorial for datauploads. Someone have something like that?

[xianlee]

Is it possible to make a website background scale with the browser or resolution? Finding it hard to find something on google

[asantos3]

[QUOTE=xianlee;39747919]Is it possible to make a website background scale with the browser or resolution? Finding it hard to find something on google[/QUOTE]

Try searching for "responsive background".

[xianlee]

[QUOTE=asantos3;39748184]Try searching for "responsive background".[/QUOTE]

Thanks.

Is it possible for a sprite to sit behind a div and still animate?

I add z-index:-1; and it doesnt change when you rollover and the link no longer exists?

[Kwaq]

iirc the body or html is at z-index 0 by default so it may be going behind everything; why not make the div z-index 10?

[xianlee]

[QUOTE=Kwaq;39750673]iirc the body or html is at z-index 0 by default so it may be going behind everything; why not make the div z-index 10?[/QUOTE]

Ill have to try it, I've removed it for now and just done a normal text link, I did try setting the div to 1 and the sprite stayed on top, would a higher value work then?

[lorde banana]

Does IE10 allow you to put the browser in IE8 emulation mode?

[SteveS]

[QUOTE=Banana Lord.;39760708]Does IE10 allow you to put the browser in IE8 emulation mode?[/QUOTE]

Yes, and 7.

[lorde banana]

[QUOTE=SteveUK;39760850]Yes, and 7.[/QUOTE]

perfect, thank you!

[Fireboyd78]

What's the best way to make a dropdown script detect the presence of submenus inside <li> tags? I'm trying not to use any scripts you can grab off of the internet, since I'd like to learn how to do it on my own. I've got a fiddle set up that sort of shows how far I got.

[url]http://jsfiddle.net/Fireboyd78/sUHkW/10/[/url]

It's a real mess, but basically, only the "Forum" dropdown works. Hovering over "Downloads" works, but it doesn't clear the "timer" properly since the ID is different...be sure to open a console, it outputs stuff to it.

Any tips on how I can do this more efficiently would be great. I'm sure my code is ridiculously bloated and there's an easier way to this, but I'm trying to challenge myself by not using other people's code. Is that good or bad?

[mobrockers2]

[QUOTE=CarLuver69;39764159]What's the best way to make a dropdown script detect the presence of submenus inside <li> tags? I'm trying not to use any scripts you can grab off of the internet, since I'd like to learn how to do it on my own. I've got a fiddle set up that sort of shows how far I got.

[URL]http://jsfiddle.net/Fireboyd78/sUHkW/10/[/URL]

It's a real mess, but basically, only the "Forum" dropdown works. Hovering over "Downloads" works, but it doesn't clear the "timer" properly since the ID is different...be sure to open a console, it outputs stuff to it.

Any tips on how I can do this more efficiently would be great. I'm sure my code is ridiculously bloated and there's an easier way to this, but I'm trying to challenge myself by not using other people's code. Is that good or bad?[/QUOTE]

I would play with your dropdowns any day long mann

[video]http://dl.dropbox.com/u/5483751/Videos/funky_dropdown.webm[/video]

[editline]1st March 2013[/editline]

Hm, I thought webm worked..

[Epiclulz762]

So I was sick last night and hallucinating lines of code from my current project, my brain felt like a compiler; has anyone else ever turned into a computer?

[a7y]

[QUOTE=Epiclulz762;39765906]So I was sick last night and hallucinating lines of code from my current project, my brain felt like a compiler; has anyone else ever turned into a computer?[/QUOTE]

I thought I was only the only one. When I'm half asleep it's not uncommon for me to be thinking in pure psudeo-code.

[marcopixel]

How can i resize and center this area on smaller resolutions? Its sliding around the page if the other resolution is smaller/higher than 1920x1080.

[B]Normal: [/B]
[T]http://i.imgur.com/U6OLypc.png[/T]
[B]Zoomed in:[/B]
[T]http://marcopixel.comule.com/img/second.png[/T]

[B]Demo: [/B][URL="http://marcopixel.comule.com/work"]http://marcopixel.comule.com/work[/URL]

Would be cool if someone can help me :)

[xmariusx]

[QUOTE=MarcoPixel;39766671]How can i resize and center this area on smaller resolutions? Its sliding around the page if the other resolution is smaller/higher than 1920x1080.

[B]Normal: [/B]
[T]http://i.imgur.com/U6OLypc.png[/T]
[B]Zoomed in:[/B]
[T]http://marcopixel.comule.com/img/second.png[/T]

[B]Demo: [/B][URL="http://marcopixel.comule.com/work"]http://marcopixel.comule.com/work[/URL]

Would be cool if someone can help me :)[/QUOTE]

You can do

.titlecontainer {
    width: 50%;
    margin: 0 25%;
}

It will look a tiny bit different though

[Fireboyd78]

[QUOTE=MarcoPixel;39766671]How can i resize and center this area on smaller resolutions? Its sliding around the page if the other resolution is smaller/higher than 1920x1080.

[B]Normal: [/B]
[T]http://i.imgur.com/U6OLypc.png[/T]
[B]Zoomed in:[/B]
[T]http://marcopixel.comule.com/img/second.png[/T]

[B]Demo: [/B][URL="http://marcopixel.comule.com/work"]http://marcopixel.comule.com/work[/URL]

Would be cool if someone can help me :)[/QUOTE]

It's because you're using a margin-left property to center it. You have a "titlecontainer" class, but it's a fixed-width. Here's what you need to do:

<div class="titlecontainer">
<h1>... content ... </h1>
</div>

For the CSS:

.titlecontainer {
width: 100%;
margin: 0;
}

.titlecontainer h1 {
color: white; 
width: 940px;
margin: 0 auto;
}

Now your text will always be perfectly centered. I've learned that percentage margins don't work when you need to center content. If you have a "container" it should be exactly that - a container and nothing more. You should never put text inside of a <div> tag without enclosing that text in either a heading tag (<h1>) or span (<span>). Just my 2 cents. Hope it helps.

[Lost Darkness]

Seem to be having an issue with this page I'm working on:

[url]http://ievosoath.cbox.ws/[/url]

Bottom right corner is cutting off when I need access to the links. This is the code (which is butchered due to me trying to fix it.):

html,body{
 text-align: justify;
 font-size: 9pt;
 font-family: tahoma;
 padding-left: 50px;
 padding-right: 40px;
 background: #fefefe;
 opacity: 0.85;
 -moz-border-radius:0px 0px 20px 20px;
 border-radius: 0px 0px 20px 20px;
 padding-top: 60px;
 margin-top: -42px;}

TABLE, TR, TD {
 font-size: 10px;
 font-family: tahoma;
 color:#5b5754;
 text-decoration:none;
 font-family:Arial, sans-serif;
font-size: 9px;
 border-left: 4px solid #FFFFFF;
 border-right: 4px solid #FFFFFF;
 border-top: 2px solid #FFFFFF;
 border-bottom: 2px solid #FFFFFF;
 background: #fcfbfb;
 padding-left: 60px
 padding-right: 60px;

-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
border-radius: 30px;
webkit-border-radius: 30px;
moz-border-radius: 30px;
}
}
.mnbdy{
 position:relative;
 margin:0px 0 0.5em;
        padding:15px;
 color:#333;
 background: url(http://i51.tinypic.com/28guwox.jpg);
  /* css3 */ -webkit-border-radius:10px;
 -moz-border-radius:10px;
 border-radius:10px;
background-color:transparent;
overflow:auto;
padding:2px;
margin:0px;
}
.fmbdy{
background-color:transparent;
padding:2px;
margin:0px;
}
a:link, a:visited, a:active {
color:#4c4743;
 text-decoration: none;
 text-transform:lowercase;
 text-decoration:none;
 -webkit-transition: all 0.3s linear;
 -moz-transition: all 0.3s linear;
 -o-transition: all 0.3s linear;
 border-radius:100px;
 webkit-border-radius:100px;
 moz-border-radius:100px;
 }
a:hover {
 color:#000000;
 text-decoration: none;
 text-decoration:none;
 opacity:.2;
 border-radius:100px;
 webkit-border-radius:100px;
 moz-border-radius:100px ;
 }
.hbtbl{
table-layout:fixed;
word-wrap:break-word;
overflow:hidden;
 padding-left: 20px
 padding-right: 20px;
}
.stxt{
background-color:transparent;
color:#000000;
}
.stxt2{
background-color:transparent;
color:#000000;
}
.dtxt{
color:#000000;
font-size:7pt;
text-align:right;
}
.dtxt2{
color:#000000;
font-size:7pt;
text-align:right;
}
.pn_std{
}
.pn_reg{
}
.pn_mod{
}
.pn_adm{color:#625C5E; font:normal 11px arial black; padding-top:20px; text-shadow:1px 1px 1px #000; border-bottom:0px solid
}
.cfrm{
margin-bottom:0px;
}.frmtb{
padding:5px;
font-family:Arial, sans-serif;
font-size:8pt;
background-color:#fff;
border:#000000 0px solid;
color:#000000;
margin: 1px 2px 1px 2px;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
border-radius: 10px;
webkit-border-radius: 10px;
moz-border-radius: 10px;
}
.frmbtn{
font-family:Arial, sans-serif;
font-size:8pt;
background-color:#fff;
border:#000000 1px solid;
color:#000000;
font-weight:bold;
padding-left:3px;
padding-right:3px;
vertical-align:top;
margin: 2px 2px 2px 2px;
}.lnk{
color:#003779;
}
.pic{
width:60px;
height:60px;
margin-left:-2px;
margin-right:0px;
padding-right:2px;
float:left;
border-radius: 30px;
webkit-border-radius: 30px;
moz-border-radius: 30px;
}

Problem is no matter what I change - padding/width/etc it'll show it smaller for a split second before it "loads" and bounces out of screen.

If anyone has any suggestions I would greatly appreciate it.

[marcopixel]

[QUOTE=CarLuver69;39768695]It's because you're using a margin-left property to center it. You have a "titlecontainer" class, but it's a fixed-width. Here's what you need to do:

<div class="titlecontainer">
<h1>... content ... </h1>
</div>

For the CSS:

.titlecontainer {
width: 100%;
margin: 0;
}

.titlecontainer h1 {
color: white; 
width: 940px;
margin: 0 auto;
}

Now your text will always be perfectly centered. I've learned that percentage margins don't work when you need to center content. If you have a "container" it should be exactly that - a container and nothing more. You should never put text inside of a <div> tag without enclosing that text in either a heading tag (<h1>) or span (<span>). Just my 2 cents. Hope it helps.[/QUOTE]

Many thanks :) Now its working propertly :)

[xmariusx]

[QUOTE=CarLuver69;39768695]Disagree x1[/QUOTE]
How can you disagree when it works? I was trying to edit as little as possible.

[editline]2nd March 2013[/editline]

[QUOTE=Lost Darkness;39769369]Seem to be having an issue with this page I'm working on:

[url]http://ievosoath.cbox.ws/[/url]

Bottom right corner is cutting off when I need access to the links. This is the code (which is butchered due to me trying to fix it.):

html,body{
 text-align: justify;
 font-size: 9pt;
 font-family: tahoma;
 padding-left: 50px;
 padding-right: 40px;
 background: #fefefe;
 opacity: 0.85;
 -moz-border-radius:0px 0px 20px 20px;
 border-radius: 0px 0px 20px 20px;
 padding-top: 60px;
 margin-top: -42px;}

TABLE, TR, TD {
 font-size: 10px;
 font-family: tahoma;
 color:#5b5754;
 text-decoration:none;
 font-family:Arial, sans-serif;
font-size: 9px;
 border-left: 4px solid #FFFFFF;
 border-right: 4px solid #FFFFFF;
 border-top: 2px solid #FFFFFF;
 border-bottom: 2px solid #FFFFFF;
 background: #fcfbfb;
 padding-left: 60px
 padding-right: 60px;

-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
border-radius: 30px;
webkit-border-radius: 30px;
moz-border-radius: 30px;
}
}
.mnbdy{
 position:relative;
 margin:0px 0 0.5em;
        padding:15px;
 color:#333;
 background: url(http://i51.tinypic.com/28guwox.jpg);
  /* css3 */ -webkit-border-radius:10px;
 -moz-border-radius:10px;
 border-radius:10px;
background-color:transparent;
overflow:auto;
padding:2px;
margin:0px;
}
.fmbdy{
background-color:transparent;
padding:2px;
margin:0px;
}
a:link, a:visited, a:active {
color:#4c4743;
 text-decoration: none;
 text-transform:lowercase;
 text-decoration:none;
 -webkit-transition: all 0.3s linear;
 -moz-transition: all 0.3s linear;
 -o-transition: all 0.3s linear;
 border-radius:100px;
 webkit-border-radius:100px;
 moz-border-radius:100px;
 }
a:hover {
 color:#000000;
 text-decoration: none;
 text-decoration:none;
 opacity:.2;
 border-radius:100px;
 webkit-border-radius:100px;
 moz-border-radius:100px ;
 }
.hbtbl{
table-layout:fixed;
word-wrap:break-word;
overflow:hidden;
 padding-left: 20px
 padding-right: 20px;
}
.stxt{
background-color:transparent;
color:#000000;
}
.stxt2{
background-color:transparent;
color:#000000;
}
.dtxt{
color:#000000;
font-size:7pt;
text-align:right;
}
.dtxt2{
color:#000000;
font-size:7pt;
text-align:right;
}
.pn_std{
}
.pn_reg{
}
.pn_mod{
}
.pn_adm{color:#625C5E; font:normal 11px arial black; padding-top:20px; text-shadow:1px 1px 1px #000; border-bottom:0px solid
}
.cfrm{
margin-bottom:0px;
}.frmtb{
padding:5px;
font-family:Arial, sans-serif;
font-size:8pt;
background-color:#fff;
border:#000000 0px solid;
color:#000000;
margin: 1px 2px 1px 2px;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
border-radius: 10px;
webkit-border-radius: 10px;
moz-border-radius: 10px;
}
.frmbtn{
font-family:Arial, sans-serif;
font-size:8pt;
background-color:#fff;
border:#000000 1px solid;
color:#000000;
font-weight:bold;
padding-left:3px;
padding-right:3px;
vertical-align:top;
margin: 2px 2px 2px 2px;
}.lnk{
color:#003779;
}
.pic{
width:60px;
height:60px;
margin-left:-2px;
margin-right:0px;
padding-right:2px;
float:left;
border-radius: 30px;
webkit-border-radius: 30px;
moz-border-radius: 30px;
}

Problem is no matter what I change - padding/width/etc it'll show it smaller for a split second before it "loads" and bounces out of screen.

If anyone has any suggestions I would greatly appreciate it.[/QUOTE]

You can wrap the links and float them right

[xianlee]

[QUOTE=Epiclulz762;39765906]So I was sick last night and hallucinating lines of code from my current project, my brain felt like a compiler; has anyone else ever turned into a computer?[/QUOTE]

Same and I don't even know much code off by heart haha.

Im glad Ive started to learn again, I really want to make my own website to put my graphics design work on but I don't have the money for a domain & web host. I'm still tempted to make a website for myself.

Need more hours in a day, I want to game and code so much but there is not enough time :(

[commander204]

[QUOTE=xianlee;39777875]Same and I don't even know much code off by heart haha.

Im glad Ive started to learn again, I really want to make my own website to put my graphics design work on but I don't have the money for a domain & web host. I'm still tempted to make a website for myself.

Need more hours in a day, I want to game and code so much but there is not enough time :([/QUOTE]

A domain and a webhost is going to set you back by ~20 dollars a year. I'm pretty sure that is a good investment if you plan on advertising your service that way.

[xianlee]

[QUOTE=commander204;39777940]A domain and a webhost is going to set you back by ~20 dollars a year. I'm pretty sure that is a good investment if you plan on advertising your service that way.[/QUOTE]

Ah didn't know, once I build up a bit more money I'll look into it. What would you use as a domain though? Like your full name or something? Or something like 'caz designs' or is using a nickname a bad idea?

[commander204]

[QUOTE=xianlee;39778061]Ah didn't know, once I build up a bit more money I'll look into it. What would you use as a domain though? Like your full name or something? Or something like 'caz designs' or is using a nickname a bad idea?[/QUOTE]

You pick the domain name by what you want to be known by. If Caz Designs is your company's name then yeah, go by that.

[Fireboyd78]

[QUOTE=xmariusx;39770826]How can you disagree when it works? I was trying to edit as little as possible.[/QUOTE]

I don't think it's a good idea to use margins with a percentage. Besides, trying to make fixes with as few changes as possible don't usually end up going very well. Not only that, but the "titlecontainer" wasn't even serving its purpose as a container - it had "MarcoPixel" directly inside of the <div> tag. The very least you should do when putting stuff inside of a container, is to put your title text inside of a heading tag (<h1>). That's the easiest and most efficient way.

That's why I disagree.

[Fizzadar]

[QUOTE=CarLuver69;39778977]I don't think it's a good idea to use margins with a percentage. Besides, trying to make fixes with as few changes as possible don't usually end up going very well. Not only that, but the "titlecontainer" wasn't even serving its purpose as a container - it had "MarcoPixel" directly inside of the <div> tag. The very least you should do when putting stuff inside of a container, is to put your title text inside of a heading tag (<h1>). That's the easiest and most efficient way.

That's why I disagree.[/QUOTE]

There's absolutely nothing wrong with using %'s as margins.

What if you want 3 flexible columns with horizontal borders between - you [i]need[/i] % margins, padding & width.