SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    May 2010
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Image Position and Inline Elements

    Hey, first post on these forums so be kind

    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

    Code:
    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?

    Code:
    		
    <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:

    Code:
    #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.

  2. #2
    SitePoint Member
    Join Date
    May 2010
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. :/

  3. #3
    Resident curmudgeon bronze trophy gary.turner's Avatar
    Join Date
    Jan 2009
    Location
    Dallas
    Posts
    990
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    Anyone can build a usable website. It takes a graphic
    designer to make it slow, confusing, and painful to use.

    Simple minded html & css demos and tutorials

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,344
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi Welcome to Sitepoint

    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.

    Code:
    <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.

    Code:
    <!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

  5. #5
    Resident curmudgeon bronze trophy gary.turner's Avatar
    Join Date
    Jan 2009
    Location
    Dallas
    Posts
    990
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    To clarify:
    Quote Originally Posted by Paul O'B
    Code:
    display:-moz-inline-box;/* invalid vendor extension for ff2 - 
    Actually, it is valid, it just doesn't validate.

    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:
    Code:
    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
    Anyone can build a usable website. It takes a graphic
    designer to make it slow, confusing, and painful to use.

    Simple minded html & css demos and tutorials

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,344
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Actually, it is valid, it just doesn't validate.
    Yes - I phrased that rather badly didn't I

  7. #7
    Resident curmudgeon bronze trophy gary.turner's Avatar
    Join Date
    Jan 2009
    Location
    Dallas
    Posts
    990
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Yes - I phrased that rather badly didn't I
    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
    Anyone can build a usable website. It takes a graphic
    designer to make it slow, confusing, and painful to use.

    Simple minded html & css demos and tutorials

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,344
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •