SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Zealot ameerulislam's Avatar
    Join Date
    Jul 2011
    Posts
    145
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Css nav text problem



    To convert the above nav to css from psd, I have written the following code

    Code:
    #container #header #top #top_nav {
    	height: 99px;
    	width: 750px;
    	float: right;
    	text-transform: uppercase;
    	font-size: 16px;
    	font-style: normal;
    	font-weight: normal;
    	color: #e1e6e9;
    }
    #container #header #top #top_nav ul {
    	list-style-type: none;
    }
    #container #header #top #top_nav ul li {
    	display: inline;
    }
    This is what I got..


    I'm not sure how to do the lower part "start here" "who I am"

    they are in lower case and how can I do 2 types of <ul><li> in one div or should I make 2 divs?

    And what about the borders between them, how do I create them?

    Thanks!

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,177
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    You need to post your HTML too.

  3. #3
    SitePoint Member
    Join Date
    Dec 2006
    Location
    Canada
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You should not need the text-transform the text in the HTML should be done in upper case. There is no border because you have not specified one, and there is no mouse over effect because you have not specified a hover rule. From the look of it I would say the structure in the HTML is not correct, but we need to see the HTML to know what the problem is.

  4. #4
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,801
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    This is pretty standard.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    	<head>
    		<title></title>
    		<style type="text/css">
    		.nav {margin:0; padding:0} /* part of your reset*/
    		.nav {float:right; background: pink; list-style:none;}
    		.nav li{ float:left;}
    		.nav li+li{border-left:1px dashed  #FF0}
    		.nav li a{  padding:.6em; color:#fff; text-decoration: none; display: block;}
    		.nav li a span{ display:block; padding-bottom: .125em; text-transform: uppercase; }
    		.nav li a:hover{background: orange}
    		</style>
    	</head>
    	<body>
    <ul class="nav">
    	<li><a href="#"><span>Home</span> start here</a></li>
    	<li><a href="#"><span>About</span> who I am</a></li>
    	<li><a href="#"><span>Sevices</span> What I can do</a></li>
    	<li><a href="#"><span>Blog</span> Design Articles</a></li>
    </ul>	</body>
    </html>
    hope that helps.

  5. #5
    SitePoint Zealot ameerulislam's Avatar
    Join Date
    Jul 2011
    Posts
    145
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Code:
    #container #header #top #top_nav {
    	height: 99px;
    	width: 750px;
    	float: right;
    	text-transform: uppercase;
    	font-size: 16px;
    	font-style: normal;
    	font-weight: normal;
    	color: #e1e6e9;
    }
    #container #header #top #top_nav ul {
    	list-style-type: none;
    }
    #container #header #top #top_nav ul li {
    	display: inline;
    }

    sorry guys, this is the html

    HTML Code:
       <div id="top_nav">
              <ul>
                <li>Home </li>
                <li>About </li>
                <li>Services </li>
                <li>Portfolio </li>
                <li>Blog </li>
                <li>Contact</li>
                
              </ul>
              <ul>
              <li>start here</li>
              <li>who I am</li>
              <li>what I can do</li>
              <li>previous works</li>
              <li>previous works</li>
              <li>design articles</li>
              <li>get in touch</li>
              </ul>
            </div>
        </div>
        <!--end of top Div-->

  6. #6
    SitePoint Member
    Join Date
    Jan 2007
    Location
    Yeppoon, QLD, Australia
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    dresden_phoenix has the solution just above your post.

    The subtitles (start here, who I am, etc) shouldn't be in a separate list. Instead, each subtitle should be in the same li as the main link.

  7. #7
    SitePoint Zealot ameerulislam's Avatar
    Join Date
    Jul 2011
    Posts
    145
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    ok tx, let me try to figure out dresden_phoenix 's code, I'm in this that's why I couldn't understand his code that much.

    Quote Originally Posted by jylan View Post
    dresden_phoenix has the solution just above your post.

    The subtitles (start here, who I am, etc) shouldn't be in a separate list. Instead, each subtitle should be in the same li as the main link.

  8. #8
    SitePoint Zealot ameerulislam's Avatar
    Join Date
    Jul 2011
    Posts
    145
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Home and the subtitle start here are coming in online. I did set the box display as inline before. So how to solve it keeping it inline? or I can't keep it inline anymore? This is why I made separate list earlier.


  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,177
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by ameerulislam View Post
    Home and the subtitle start here are coming in online. I did set the box display as inline before. So how to solve it keeping it inline? or I can't keep it inline anymore?
    Keep us up to date with the code you are using. Do you have a live link to this? If not, at least post the code you are currently using.

  10. #10
    SitePoint Zealot ameerulislam's Avatar
    Join Date
    Jul 2011
    Posts
    145
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Keep us up to date with the code you are using. Do you have a live link to this? If not, at least post the code you are currently using.
    that one actually was dresden_phoenix's code.

  11. #11
    SitePoint Zealot ameerulislam's Avatar
    Join Date
    Jul 2011
    Posts
    145
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ameerulislam View Post
    that one actually was dresden_phoenix's code.
    Why can't I upload images here? Its a pain to upload in a third party image hosting site then linking to that from here.

  12. #12
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,177
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by ameerulislam View Post
    that one actually was dresden_phoenix's code.
    If you put his code into a .html file, this is what you should see:

    D_P.png

    Have you changed the code at all? What browser are you using?

  13. #13
    SitePoint Zealot ameerulislam's Avatar
    Join Date
    Jul 2011
    Posts
    145
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    If you put his code into a .html file, this is what you should see:

    D_P.png

    Have you changed the code at all? What browser are you using?
    I guess it must have overlapped with some other codes in my document. May be if I had tried in a separate document it would the above result would have appeared. I think I should try it separately.


    Thanks

    p.s. using chrome

  14. #14
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,177
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by ameerulislam View Post
    I guess it must have overlapped with some other codes in my document.
    Yes, that's likely. Start with just this and add bits in gradually, to see what puts it off ... or use right click > Inspect Element to see what rules are overriding the ones D_P gave you.

    I'm using Chrome too.


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
  •