22 replies [Last post]
deanmarine
Offline
Regular
Last seen: 11 years 50 weeks ago
Joined: 2006-05-04
Posts: 50
Points: 2

why does my border and image seem to be above my links

#topnav
{
background: url(../images/top-nav-background.jpg) repeat-y ;
border-bottom: 1px solid black;
}

#topnav li
{

display: inline;
list-style-type: none;
padding-right: 30px;
float: left;
margin-left: 15px;
}

what i dont usderstand is the
border-bottom: 1px solid black;
of the topnav is above the menu in the topnav li, surely it should be underneath it, why is this!

larmyia
Offline
Elder
London
Last seen: 13 years 11 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

something weird is happening

deanmarine, we really need your html to be able to advise. can you give us a live link or at the very least your html and css code...?

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 47 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

something weird is happening

Floats!!!!

And that's all I'm saying on the matter Sad

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

deanmarine
Offline
Regular
Last seen: 11 years 50 weeks ago
Joined: 2006-05-04
Posts: 50
Points: 2

something weird is happening

sorry here is my html code aswell

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link href="css/layout.css" rel="stylesheet" type="text/css">

<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
 <div id="container">
  <div id="top"> 
    <h1>&nbsp;</h1>
  </div>
  
  <div id="topnav">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">News</a></li>
      <li><a href="#">Info</a></li>
      <li><a href="#">Pics for sale</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
	
</div>

<div id="clearnav">
</div>
   
  
  
  <div id="leftnav"> 
    <p align="left"><a href="http://www.google.co.uk"><font size="2" face="Arial, Helvetica, sans-serif">About 
      me </font></a></p>
    <p align="left"><font size="2" face="Arial, Helvetica, sans-serif">drgredhg</font></p>
    <p align="left"><font size="2" face="Arial, Helvetica, sans-serif">g</font></p>
    <p align="left"><font size="2" face="Arial, Helvetica, sans-serif">dg</font></p>
    <p align="left">&nbsp;</p>
  </div>
<div id="rightnav">
    <p> <font size="2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed 
      diam nonummy nibh euismod tincidunt ut. </font></p>
</div>
  <div id="content"> 
    <h2 align="center">Who are we? What do we do? What are Our aims?</h2>
    Who Are We and <font size="2" face="Arial, Helvetica, sans-serif">What do We Do?<br>
    *We are in the beginnings to becoming a world wide charity organisation, raising 
    money and awareness to support existing charities and non-profit organisations 
    to support aims of conserving the earth, its animals and its people.<br>
    *Raising money to send volunteers to assist in projects for example looking 
    after orphaned animals in South Africa, helping out in Elephant orphanages 
    in Sri Lanka, and helping out in refugee camps, and helping the orphans of 
    aids and the bush-meat trade.<br>
    *Raising money to develop ConserveOurEarth and become a leading non-profit 
    organisation in conserving our Earth.</font><br>
   
  </div>
   
  <div id="thumbnail"> <img src="images/lion.jpg" alt="" width="60" height="60"><br>
Caption
</div>
  <div id="thumbnail"> <img src="images/eagle.jpg" alt="" width="60" height="60"><br>
Caption
</div>
  <div id="thumbnail"> <img src="images/chimp.jpg" alt="" width="60" height="60"><br>
Caption
</div>
  <div id="thumbnail"> <img src="images/panda.jpg" alt="" width="60" height="60"><br>
Caption
</div>
<div id="thumbnail"> <img src="images/lion.jpg" alt="" width="60" height="60"><br>
Caption
</div>
  <div id="thumbnail"> <img src="images/eagle.jpg" alt="" width="60" height="60"><br>
Caption
</div>
  <div id="thumbnail"> <img src="images/chimp.jpg" alt="" width="60" height="60"><br>
Caption
</div>
  <div id="thumbnail"> <img src="images/panda.jpg" alt="" width="60" height="60"><br>
Caption
</div>
<div id="thumbnail"> <img src="images/lion.jpg" alt="" width="60" height="60"><br>
Caption
</div>

  
  <div id="footer"><font size="2"> Footer </font></div>
</div>



</body>
</html>

i take it this is the part you will be interested in

<div id="topnav">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">News</a></li>
      <li><a href="#">Info</a></li>
      <li><a href="#">Pics for sale</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
	
</div>

<div id="clearnav">
</div>

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 47 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

something weird is happening

So I do have to say more on the matter, curses!

Dean, take a look back at your other thread, we covered the likely reasons in that.

http://www.csscreator.com/css-forum/ftopic18926-15.html

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

larmyia
Offline
Elder
London
Last seen: 13 years 11 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

something weird is happening

Hugo wrote:
So I do have to say more on the matter, curses!

:roll:

you can't keep a good man down.... :?

deanmarine
Offline
Regular
Last seen: 11 years 50 weeks ago
Joined: 2006-05-04
Posts: 50
Points: 2

something weird is happening

whats d oyuo mean floats is it cause i am floating the li and that takes it out of the normal flow and then moves it and puts it back in!

im a bit confused.

deanmarine
Offline
Regular
Last seen: 11 years 50 weeks ago
Joined: 2006-05-04
Posts: 50
Points: 2

something weird is happening

is it that clearing float containers thing!

larmyia
Offline
Elder
London
Last seen: 13 years 11 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

something weird is happening

if you take the float: left; out of the #topnav li it seems to fix it

:?

deanmarine
Offline
Regular
Last seen: 11 years 50 weeks ago
Joined: 2006-05-04
Posts: 50
Points: 2

something weird is happening

hmm now im really confused as i forgot why i was floating it in the first place

argghhhhhhhhhhhhhhh

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 47 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

something weird is happening

Dean iirc you floated the li as you wanted a: to be able to have the list/anchor items on a single line not stacked and b: wanted to be able to effect width and height of said items.

When floating you remove from the flow this means it still there but that the parent div or following div does not see it as having substance or margins it's as though it was not there so a float within a div of no height will not expand that parent whereas if not floated and the element had height then the parent would grow with that element.

With a float you must add clearing to the parent to trick it into seeing the float and growing to enclose it, you original topnav with bottom border appeared to be above the float as it was the topnav had no height, the floats just hung down bellow it. Apply overflow:hidden or display:table display:inline-block(for IE) or a div at the bottom of the parent and after the floats and given clear:both or use the clearfix technique to apply CSS clearing, and the top nav would have expanded, actually apply clearing to the ul.

I did cover this in the other thread though, it's imperative do read as much as you can find on float behavior to fully grasp this property and it's an important one.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

larmyia
Offline
Elder
London
Last seen: 13 years 11 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

something weird is happening

as an aside...I'm still understanding floats...especially in complex situations. I mean of course I understand the basics, but as far as I'm concerned it can be difficult.

deanmarine
Offline
Regular
Last seen: 11 years 50 weeks ago
Joined: 2006-05-04
Posts: 50
Points: 2

something weird is happening

ok where should i put my clearing div within this html

<div id="top"> 
    
  </div>
  
  <div id="topnav">
 
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">News</a></li>
      <li><a href="#">Info</a></li>
      <li><a href="#">Pics for sale</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
	
</div>

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 47 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

something weird is happening

Dean I've given you some of the options for methods of clearing and you are left with limited choices in where to place that chosen method of clearing, where have you tried?

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

deanmarine
Offline
Regular
Last seen: 11 years 50 weeks ago
Joined: 2006-05-04
Posts: 50
Points: 2

something weird is happening

i have tried in all those places and it gives the wrong results ill show you where i have put it obvciopusly i only tried one at a time!

<div id="top">

<div id="clearnav">
</div>

<div id="topnav">

<ul>
<li><a href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Info</a></li>
<li><a href="#">Pics for sale</a></li>
<li><a href="#">Contact</a></li>

<div id="clearnav">
</ul>

<div id="clearnav">
</div>
Wink

deanmarine
Offline
Regular
Last seen: 11 years 50 weeks ago
Joined: 2006-05-04
Posts: 50
Points: 2

something weird is happening

oh and thats my css part for the clear

#clearnav
{
clear: both;
}

fberriman
fberriman's picture
Offline
Enthusiast
Reading, England, UK
Last seen: 14 years 40 weeks ago
Reading, England, UK
Joined: 2006-06-02
Posts: 146
Points: 0

something weird is happening

#clearnav{
clear:both;
height: 1px;
}

Anyway, that isn't the best way to do it. Read; http://www.positioniseverything.net/easyclearing.html = Clearing a float container without source markup.

-- Frances

deanmarine
Offline
Regular
Last seen: 11 years 50 weeks ago
Joined: 2006-05-04
Posts: 50
Points: 2

something weird is happening

hi and thanks for all you guys help, why do you need assign a height to the clearnav Laughing out loud

fberriman
fberriman's picture
Offline
Enthusiast
Reading, England, UK
Last seen: 14 years 40 weeks ago
Reading, England, UK
Joined: 2006-06-02
Posts: 146
Points: 0

something weird is happening

It's to invoke the hasLayout property.

http://www.satzansatz.de/cssd/onhavinglayout.html

-- Frances

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 47 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

something weird is happening

As fberriman says though this is not the preferred choice for clearing floated elements and I have been trying to steer you towards the link that fberriman posted which incidently refers to a technique devised by the owner/administrator of this forum Tony and a link to the description of the technique may be found on the index page of the forum.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

fberriman
fberriman's picture
Offline
Enthusiast
Reading, England, UK
Last seen: 14 years 40 weeks ago
Reading, England, UK
Joined: 2006-06-02
Posts: 146
Points: 0

something weird is happening

Hugo wrote:
As fberriman says though this is not the preferred choice for clearing floated elements and I have been trying to steer you towards the link that fberriman posted which incidently refers to a technique devised by the owner/administrator of this forum Tony and a link to the description of the technique may be found on the index page of the forum.

Hugo.

Man, it's weird to keep being called that - please, just use Frances. Smile

My only concern with the above linked-to technique is that you may find it a little advanced if you're not really understanding floats yet. I'd play around a bit and see what happens with floats in different circumstances.

-- Frances

deanmarine
Offline
Regular
Last seen: 11 years 50 weeks ago
Joined: 2006-05-04
Posts: 50
Points: 2

something weird is happening

thanks mate, im gonna do some more reading now cheers guys

Laughing out loud

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 47 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

something weird is happening

Frances wrote:
My only concern with the above linked-to technique is that you may find it a little advanced


True but then again I have mentioned overflow:hidden, display:table, display:inline-block, I'm exhausted Smile

The clearfix technique does require some understanding I guess, but also is perhaps the safest of the methods?

Let us know how you get on Dean, you may like to just try applying overflow:hidden to the ul to get things working, but read up on the floats issue.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me