SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Cool can't figure out navigation bar w/ rounded edges

    Hello,
    So, I'm really not very good at coding and trying to get better at this. So I apologize in advance for a dumb question I can't figure out. I'm trying to make a rounded bar for a few pages. I'm not sure what I should put in between the images in my html code for the content of the bar. I used the <ul> tag and it filled it out how I wanted, but the rightround.jpg is on the next line. Also, would I position the entire bar using .location in my .css? I want to have it a little more to the right of the page and an inch or so from the top and not quite sure if this would be the correct way to go about it. Thanks.[/I]
    Code HTML4Strict:
    <div class="location">
    <img src="leftround.jpg" id='leftroundedimage'/>
    <ul>
    <img src='rightround.jpg' id='rightroundedimage'/>
    </div>
     
    </body>
    </html>

    Code CSS:
    .leftroundedimage {
    float:left;
    }
     
    .rightroundedimage {
    float:right;
    }
     
    .location {
    	background-color:#72b9d5;
    	height:35px;
    	width:637px
     
    }

  2. #2
    SitePoint Addict AllanP's Avatar
    Join Date
    Sep 2010
    Location
    Australia
    Posts
    286
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can you post a link to a page that we can look at?

  3. #3
    SitePoint Evangelist TommiChi's Avatar
    Join Date
    Oct 2008
    Posts
    440
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    First of all your ul is not properly closed, second it also needs to be floated left, and third why are you using a ul if you are not going to put any list items in it? You're better off using a div

  4. #4
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I noticed I didn't close that tag right after I posted this. Yeah, l wasn't sure what tag to use for that. I've got this now, but same results with the right image. How would I float my div that's in between the images? With a new css rule or in my html? It's still going over to other line, possibly because of that then? I'm wasn't sure what to put in between images. Sorry, like I said I am fairly new to this. Thanks again.
    Code HTML4Strict:
    <!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=UTF-8" />
     <link type="text/css" rel="stylesheet" href="practice2.css" media="screen" />
    <title>Pratice</title>
    </head>
     
    <body>
    <div class="location">
    <img src="leftroundedth.jpg" id='leftroundedimage'/>
    <div></div>
    <img src="rightroundedth.jpg" id='rightroundedimage'/>
    </div>
     
    </body>
    </html>
    Code CSS:
    /* CSS Document */
     
     
     
    .leftroundedimage {
    float:left;
    }
     
    .rightroundedimage {
    float:right;
    }
     
    .location {
    	background-color:#72b9d5;
    	height:35px;
    	width:637px;
    	margin-top: 90px;
    	margin-right: 10px;
    	margin-bottom: 10px;
    	margin-left: 10px;
    }

  5. #5
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Your markup is bad. The use of img tag for presentation is wrong.

    You need to look for the sliding doors technique. There are many examples. Here's one from deathshadow60. Here's another one from him.


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
  •