SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    Non-Member
    Join Date
    May 2013
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    menu horizontal how i make <div> same width as <ul>, warp the content exactly

    in case i have <div><ul><li>... menu horizontal how i make <div> same width as <ul>, warp the content exactly so as when div margin:0 auto; , the menu goes in the center exactly...?

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

    The question needs a little clarification but it seems like you want a centred widthless horizontal menu?

    The easiest way to do that would be by using display:inline-block and then text-align:center on a parent would center them all.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    .nav { text-align:center; }
    .nav ul {
    	margin:0;
    	padding:0;
    	list-style:none;
    	background:red;
    	color:#fff;
    }
    .nav ul,
    .nav li, 
    .nav a {
    	display:inline-block;
    	vertical-align:top;
    *display:inline;/* for ie6 and 7 support of inline-block - remove if not required */
    	zoom:1.0;	/* for ie6 and 7 support - remove if not required */
    }
    .nav a{
    	color:#fff;
    	text-decoration:none;
    	padding:5px 10px;
    	margin:0 10px;	
    }
    .nav a:hover{background:orange}
    </style>
    </head>
    
    <body>
    <div class="nav">
    		<ul>
    				<li><a href="#">Link</a></li>
    				<li><a href="#">Link</a></li>
    				<li><a href="#">Link</a></li>
    				<li><a href="#">Link</a></li>
    		</ul>
    </div>
    </body>
    </html>

  3. #3
    SitePoint Zealot
    Join Date
    May 2013
    Posts
    199
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    is a horizontal menu mine, why you do not used float:left in your code above?

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by lse123 View Post
    why you do not used float:left in your code above?
    Because you wanted a centred menu which can't be done easily with "widthless" floats.

    Display:inline-block allows inline and block elements to take on width and height properties as if they were block elements but still allow then to stay in the same line much as a floated element would but without actually floating.

    It all depends on the desired outcome as to which is the best method to use.

  5. #5
    SitePoint Zealot
    Join Date
    May 2013
    Posts
    199
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    float:left; // so remove this

    and use your methods correct?

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

    Yes my example does not need a float anywhere in the mix. Just copy my html in post#2 and play around with it to see if it suits your purposes.

    Without seeing your exact structure and the effect you want I can only make a best guess at what you need. If you have a link or html and css of what you have got then we may be able to give more specific advice.

  7. #7
    Non-Member
    Join Date
    May 2013
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    solved but only in Live view shows ... is any way seem layout good and in design view ... i use dw cs6(dreamweaver)...?

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by lse123polis View Post
    solved but only in Live view shows ... is any way seem layout good and in design view ... i use dw cs6(dreamweaver)...?
    Here's a tip for you

    "Don't use Design View in Dreamweaver!"

    It's about as useful as a chocolate fire-guard and seldom displays any but the simplest of CSS correctly. On the other hand the code editor in DW is very good and you should work solely in code view and then view your work in a number of browsers every few steps of the way (never just check in one browser).

    I load the page in about 4 browsers and then when I update the code I just click refresh in each browser to see the result instantly. Don't use f12 in DW either as that creates a temporary file to view and can't be trusted either.


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
  •