Help with float/positioning

Phaser · 4 Sep 2006 at 20:19

Hi all.

I'm currently working on my website http://www.yorkshirejunkies.co.uk/

I rushed the website when I did it, and theres a lot of nasty code in there.

I've been meaning to rewrite it for a long time and add a few new bits whilst I was there such as a CMS and so on.

However I don't seem to be getting very far.

http://dzire-live.com/yj

The text dosen't seem to start straight away in the content area? The navigation is floated left, and the content area is floated right, all padding/widths are fine so I don't know whats causing this?

If someone could have a quick look it'd be great.

Cheers OCUK. :cool:

weescott · 4 Sep 2006 at 21:27

I had the same problem a while ago, it's down to div widths IIRC.

Augmented · 4 Sep 2006 at 21:30

Change:

Code:

#main {
float:right;
width:600px;
clear:none;
}

to:

Code:

#main {
margin-left: 160px;
width:600px;
clear:none;
}

Should work. Untested.

Float one block left or right, and give the other box the relevant right or left margin the same width as the floated box.

Phaser · 4 Sep 2006 at 21:50

Seemed to do the trick on Firefox mate, however on IE it's still the same. :confused:

Phaser · 5 Sep 2006 at 09:28

Anyone?

Also seem to be getting trouble with the topnav - no idea why as it's copied exactly the same from the CSS. On IE it's fine, however on FF it appears to be a lot further down?

Code:

<div id="topnav">
<ul>
	<li><a href="index.php" title="Home">Home</a></li>
	<li><a href="shop.php" title="Shop">Shop</a></li>
	<li><a href="shop.php" title="Gallery">Gallery</a></li>
	<li><a href="shop.php" title="Forum">Forum</a></li>
</ul>  	
</div>

Code:

#topnav{
    border-top:1px solid #666666;
	border-bottom:1px solid #666666;
	height: 25px;
	width: 760px;
	background-color:#000000;
	text-align:center;
	}
#topnav ul {
	float:left;
	width:600px;
	vertical-align: text-top;
	list-style-type: none;
	}
#topnav ul li
{
	padding-left:25px;
	list-style-type:none;
	float:left;
	margin:0px;
	color: red;
	line-height:20px;
	font-weight: bold;
}
#topnav ul li a
{
	color:#c51e21;
	text-decoration:none;
}
#topnav ul li a:hover
{
	color: #fff;
	text-decoration:underline;
}

http://dzire-live.com/yj/

Cheers.

toString · 5 Sep 2006 at 10:11

The joys of web, you just have to fiddle around changing bits until it does work.
And then when you've finshed, you try it on an Apple Mac, and start all over again! :cool:

Phaser · 5 Sep 2006 at 20:33

Could someone have another look please? I've been messing about it for hours now and I can't seem to get it perfect!

The topnav stuff can wait, but I really need to sort the content dropping down in IE, until thats sorted I can't make the rest of my pages.

http://dzire-live.com/yj/
http://dzire-live.com/yj/screen.css

Appreciate any help - thanks.

toString · 5 Sep 2006 at 21:40

I usually find putting width: 99%; on the container of the thing that's dropping down works.
Sometimes.

Mirage · 6 Sep 2006 at 07:16

Easiest thing to do is:
Remove the content and make a template first. Put only "Nav" where u want your nav <div>, "content" where u want content etc.
In your css add

Code:

div {
       border: 1px solid #ffffff;
}

So that you can see where your divs are ending.
And go from there, its a lot easier to do t that way imo.
Your Nav div will need a float left, your content doesnt have to go in a div but if you do require it then its probably best to give with a float left also, and the boxes float right.