PDA

View Full Version : Some coding help please?


F32
08-03-2007, 09:03 PM
Hey, someone recently coded my layout and it's not working properly:

http://www.xeoro.net/_skyhabv51/

the 3rd box on the left keeps going down.

also you have to put a set amount of content in the main box otherwise there will be a gap at the end.

+rep to any help :)
Mentor
08-03-2007, 10:08 PM
Just put the main content aria div below the rest of the left aligned ones, You have the first two before it, the next oens after, so there automaticaly clearing the bottom of the content aria div which for the lower ones is above em :)
F32
08-03-2007, 10:11 PM
Ok, I'll do that tomorrow but I still think there's the problem of the gap but I'll update tomorrow.

Thanks.
Mentor
08-03-2007, 10:16 PM
In firefox theres a gap between the second and 3rd box, which is to large and doesnt fit? i though that was what the problem is. I then described the solution.

Aka, it now

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>

<link rel="stylesheet" type="text/css" href="style.css" />

</head>

<body>

<div align="center">

<div id="conttop"></div>


<div id="container">

<div id="boxcont">



<div id="banner"></div>



<div id="rstatstop"></div>

<div id="rstats">

The really cool radio stats <strong>would</strong> go here.

</div>

<div id="rstatsbot"></div>

<div id="navtop"></div>

<div id="ctop"></div>

<div class="leftboxes">

The really cool nav <strong>would</strong> go here.

</div>

<div id="maincontent">

<p>Lorem ipsum dolor sit amet, consectetur adipisicing in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum asd asd as d as da das sd asd asd d as asd asd das asd asd a sd asd asd asd asd asd asd asd asd asd asd dsasddas sda asd das sda asd asd asd asd asd asd sda asd asd asd asd asdsd a sda asd sda asd sda asd asd asd asd das asd asd asd asd asd asd asd asd asd asdasd .</p>
<br /><br />


</div>

<div class="leftbottom"></div>

<div id="lupdates"></div>

<div class="leftboxes">

The really cool updates <strong>would</strong> go here.

</div>

<div class="leftbottom"></div>

<div id="contentbot"></div>


<div id="rplayer"></div>

<div class="leftboxes">

The really cool radio player <strong>would</strong> go here.

</div>

<div class="leftbottom"></div>

<div id="sstats"></div>

<div class="leftboxes">

The really cool site stats <strong>would</strong> go here.

</div>


<div class="leftbottom"></div>

</div>



</div>

<div id="contbot"></div>

</div>

</body>
</html>


It theoerticaly fixed, aka i moved a few div layers around



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>

<link rel="stylesheet" type="text/css" href="style.css" />

</head>

<body>

<div align="center">

<div id="conttop"></div>


<div id="container">

<div id="boxcont">



<div id="banner"></div>



<div id="rstatstop"></div>

<div id="rstats">

The really cool radio stats <strong>would</strong> go here.

</div>

<div id="rstatsbot"></div>

<div id="navtop"></div>

<div id="ctop"></div>

<div class="leftboxes">

The really cool nav <strong>would</strong> go here.

</div>



<div class="leftbottom"></div>

<div id="lupdates"></div>

<div class="leftboxes">

The really cool updates <strong>would</strong> go here.

</div>

<div class="leftbottom"></div>

<div id="contentbot"></div>


<div id="rplayer"></div>

<div class="leftboxes">

The really cool radio player <strong>would</strong> go here.

</div>

<div class="leftbottom"></div>

<div id="sstats"></div>

<div class="leftboxes">

The really cool site stats <strong>would</strong> go here.

</div>


<div class="leftbottom"></div> <div id="maincontent">

<p>Lorem ipsum dolor sit amet, consectetur adipisicing in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum asd asd as d as da das sd asd asd d as asd asd das asd asd a sd asd asd asd asd asd asd asd asd asd asd dsasddas sda asd das sda asd asd asd asd asd asd sda asd asd asd asd asdsd a sda asd sda asd sda asd asd asd asd das asd asd asd asd asd asd asd asd asd asdasd .</p>
<br /><br />


</div>

</div>



</div>

<div id="contbot"></div>

</div>

</body>
</html>


(probably wrong as i didnt check and you div hyerachie is messed up, so i may have dumped it in the wrong place)
F32
09-03-2007, 04:37 PM
Seems to have sorted one problem out but created another:

http://www.xeoro.net/_skyhabv51fix/
YouFail
09-03-2007, 04:47 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>

<link rel="stylesheet" type="text/css" href="style.css" />

</head>

<body>

<div align="center">

<div id="conttop"></div>


<div id="container">

<div id="boxcont">



<div id="banner"></div>



<div id="rstatstop"></div>

<div id="rstats">

The really cool radio stats <strong>would</strong> go here.

</div>

<div id="rstatsbot"></div>

<div id="navtop"></div>

<div id="ctop"></div>

<div class="leftboxes">

The really cool nav <strong>would</strong> go here.

</div>



<div class="leftbottom"></div>

<div id="lupdates"></div>

<div class="leftboxes">

The really cool updates <strong>would</strong> go here.

</div>

<div class="leftbottom"></div>

<div id="rplayer"></div>

<div class="leftboxes">

The really cool radio player <strong>would</strong> go here.

</div>

<div class="leftbottom"></div>

<div id="sstats"></div>

<div class="leftboxes">

The really cool site stats <strong>would</strong> go here.

</div>


<div class="leftbottom"></div> <div id="maincontent">

<p>Lorem ipsum dolor sit amet, consectetur adipisicing in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum asd asd as d as da das sd asd asd d as asd asd das asd asd a sd asd asd asd asd asd asd asd asd asd asd dsasddas sda asd das sda asd asd asd asd asd asd sda asd asd asd asd asdsd a sda asd sda asd sda asd asd asd asd das asd asd asd asd asd asd asd asd asd asdasd .</p>
<br /><br />


</div>

<div id="contentbot"></div>

</div>
F32
09-03-2007, 04:50 PM
Now, bottom of container missing and big gap:

http://www.xeoro.net/_skyhabv51fix/
Mentor
09-03-2007, 10:37 PM
Seems to have sorted one problem out but created another:

http://www.xeoro.net/_skyhabv51fix/

Lol, oops i forgot to move the top down with it :p I think it put it in the right place, Make sure the two divs aint set to clear anything though, or it will sit below the side ones all together, also make sure the left bar elements are all floated correctly



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>

<link rel="stylesheet" type="text/css" href="style.css" />

</head>

<body>

<div align="center">

<div id="conttop"></div>


<div id="container">

<div id="boxcont">



<div id="banner"></div>



<div id="rstatstop"></div>

<div id="rstats">

The really cool radio stats <strong>would</strong> go here.

</div>

<div id="rstatsbot"></div>

<div id="navtop"></div>



<div class="leftboxes">

The really cool nav <strong>would</strong> go here.

</div>



<div class="leftbottom"></div>

<div id="lupdates"></div>

<div class="leftboxes">

The really cool updates <strong>would</strong> go here.

</div>

<div class="leftbottom"></div>

<div id="contentbot"></div>


<div id="rplayer"></div>

<div class="leftboxes">

The really cool radio player <strong>would</strong> go here.

</div>

<div class="leftbottom"></div>

<div id="sstats"></div>

<div class="leftboxes">

The really cool site stats <strong>would</strong> go here.

</div>


<div class="leftbottom"></div> <div id="ctop"></div> <div id="maincontent">

<p>Lorem ipsum dolor sit amet, consectetur adipisicing in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum asd asd as d as da das sd asd asd d as asd asd das asd asd a sd asd asd asd asd asd asd asd asd asd asd dsasddas sda asd das sda asd asd asd asd asd asd sda asd asd asd asd asdsd a sda asd sda asd sda asd asd asd asd das asd asd asd asd asd asd asd asd asd asdasd .</p>
<br /><br />


</div>

</div>



</div>

<div id="contbot"></div>

</div>

</body>
</html>
F32
09-03-2007, 10:52 PM
Kind of there :P

http://www.xeoro.net/_skyhabv51fix/
F32
09-03-2007, 11:49 PM
Problems all sorted now.

Thanks Carl, +Rep.

Want to hide these adverts? Register an account for free!