Image Position and Inline Elements

Hey, first post on these forums so be kind :rolleyes:

I have two poblems, first off I have a couple of images that I have positioned using a float. However I think because they are declared as float containers they’re not expanding thier parent container. Have a look:

http://86.17.194.115/halfmoon_oop/index.php?page=7

img.imageRight {
	float: right;
	width: 200px;
	margin-left: 20px;
	margin-right: 10px;
	margin-bottom: 20px;
	display:block;
}

This is my home server so it may not be up all the time. How would I set these containers to take up a set amount of space so that the parent container see’s them and expands?

Also, you can see my links at the top are squashed and going onto two lines, now I want them to wrap within thier containers so I can put some styling on them. How would I go about this?

		
<div id="links">
<div id='navLink'><a href='index.php?page=4'>Home</a></div> 
<div id='navLink'><a href='index.php?page=5'>Wholefoods & Health </a></div> 
<div id='navLink'><a href='index.php?page=6'>Food Supplements & R</a></div> 
<div id='navLink'><a href='index.php?page=7'>Sports Nutrition</a></div> 
<div id='navLink'><a href='index.php?page=8'>Organic Produce</a></div> 
<div id='navLink'><a href='index.php?page=9'>Organic Vegebag Sche</a></div> 
<div id='navLink'><a href='index.php?page=10'>Special Offers</a></div> 
<div id='navLink'><a href='index.php?page=11'>Bodycare</a></div> 
<div id='navLink'><a href='index.php?page=12'>Latest News</a></div> 
</div>

CSS for the links:

#links {
	padding: 10px 0 0 0px;
	width: 930px;
	margin: 0 0 0 0px;
	border-bottom: 4px solid green;
	
}

#navLink {
	text-align: center;
	display: inline;
	border-bottom: 4px solid green;
}

#navLink a {
	color: black;
	font-size: small;
}

#navLink a:visited {
	font-size: small;
	text-decoration: none;
}

#navLink a:hover {
	font-size: small;
	border-bottom: 4px solid gold;
}

#navLink a:active {
	font-size: small;
}

You can see that i’ve tried to set a max width that it shouldn’t exceed, but I don’t understand why the text isn’t going onto the next line when it reaches the end of the container.

Thanks in advance!!!
Jack.

Ok i’ve fixed the image problem by adding clear: both to my footer. However i’ms till struggling with the inline elements on one line. :confused:

Clearing from below will will do part of what you need, but a better (usually) approach is to cause the float elements’ container to enclose its float child elements.

For the links, there are two issues: That’s a list of links that should be marked up as an unordered list rather than non-semantic div elements. Second, inline elements cannot have dimension properties. You can give dimensions to inline-block elements, though. See Inline-block gallery for an explanation and demonstration.

Another approach to the menu might be to center the text vertically in each item of the menu.

cheers,

gary

Hi Welcome to Sitepoint :slight_smile:

As Gary said you should style your menu in a list and remove all those extra classes as they can all be reached by targeting from the parent ID.


<ul id="nav">
    <li><a href='index.php?page=4'>Home</a></li>
    <li><a href='index.php?page=5'>Wholefoods & Health </a></li>
    <li><a href='index.php?page=6'>Food Supplements & Remidies</a></li>
    <li id='navLinkCurrent'><a href='index.php?page=7'>Sports Nutrition</a></li>
    <li><a href='index.php?page=8'>Organic Produce</a></li>
    <li><a href='index.php?page=9'>Organic Vegebag Scheme</a></li>
    <li><a href='index.php?page=10'>Special Offers</a></li>
    <li><a href='index.php?page=11'>Bodycare</a></li>
    <li><a href='index.php?page=13'>Latest News</a></li>
</ul>


If you want the text in each link to break to two lines then you will need to set a width for each item so that it doesn’t just push the next one away.

e.g.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
ul#nav{
    width:950px;
    margin:0 auto;
    list-style:none;
    border-bottom: 4px solid green;
    padding: 10px 0 0 0;
}
ul#nav li{display:inline}
ul#nav li a{
    display:-moz-inline-box;/* invalid vendor extension for ff2 - remove if you don't support ff2*/
    display:inline-block;
    vertical-align:bottom;
    margin:2px 1px;
    border-bottom: 4px solid green;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    color: black;
    font-size: small;
    padding:0;
    width:100px; 
}

ul#nav #navLinkCurrent a {border-bottom: 4px solid gold}
ul#nav #navLinkCurrent a {
    text-decoration: none;
    font-weight: bold;
    color: black;
    font-size: small;
}
ul#nav li a:hover {
    border-bottom: 4px solid gold;
}



</style>
</head>
<body>
<ul id="nav">
    <li><a href='index.php?page=4'>Home</a></li>
    <li><a href='index.php?page=5'>Wholefoods & Health </a></li>
    <li><a href='index.php?page=6'>Food Supplements & Remidies</a></li>
    <li id='navLinkCurrent'><a href='index.php?page=7'>Sports Nutrition</a></li>
    <li><a href='index.php?page=8'>Organic Produce</a></li>
    <li><a href='index.php?page=9'>Organic Vegebag Scheme</a></li>
    <li><a href='index.php?page=10'>Special Offers</a></li>
    <li><a href='index.php?page=11'>Bodycare</a></li>
    <li><a href='index.php?page=13'>Latest News</a></li>
</ul>
</body>
</html>


(inline-block is explained in Gary’s link above ))

If you want automatic widths then you could use display:table-cell but Ie7 and under don’t understand it.

Hope that helps :slight_smile:

To clarify:

Actually, it is valid, it just doesn’t validate.:rolleyes:

W3C makes provisions for vendors to introduce test or extended proprietary properties provided the non-standard property or value is prefixed by a vendor identifier; -moz- for Mozilla, -ms- or -mso- for Microsoft, -o- for Opera, and -webkit- for Apple. It is common for vendors to test property rendering for not yet adopted standards, pending acceptance; -moz-border-radius being an example from css3. Another example, using moz, webkit and opera’s test properties:

pre {
     width: 33em;
     border: solid red;

    -moz-transform: translate(100px) rotate(40deg);
    -moz-transform-origin: 60% 100%;

    -webkit-transform: translate(100px) rotate(40deg);
    -webkit-transform-origin: 60% 100%;

    -o-transform:translate(100px) rotate(40deg); 
    -o-transform-origin:60% 100%;
}

(Taken from Mozilla Development Center.)

cheers,

gary

Actually, it is valid, it just doesn’t validate.:rolleyes:

Yes - I phrased that rather badly didn’t I :slight_smile:

No worse than anyone else. We all tend to gloss over the technicalities when it’s mostly harmless. IE’s filter stuff is a good example of invalid css that would be valid if MSFT would have added the -ms- prefix. But we still use it, all the while confusing the noobs with “normal” syntax that doesn’t work for non-IE browsers.

cheers,

gary

Yes I think I worded it more carefully when I wrote the section for the reference. I must pay more attention to detail when replying - a bad habit of mine :slight_smile: