Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    May 2006
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS newbie struggles - layout

    Hello.

    I am having difficulties getting some list text that is floated right to display inline with some other listed text that is not floated. Not displaying right in Firefox.
    http://www.upperhouse.us/springst/index.html

    html:
    Code:
    <body>
    <div id="content">
      <ul>
        <li><a href="#">about</a></li>
        <li><a href="#">personalize it</a></li>
        <li><a href="#">special orders</a></li>
    	<li><span class="strapline"><a href="#">checkout</a></span></li>
    	<li><span class="strapline"><a href="#">shopping Cart</a></span></li>
      </ul>
    </div>
    <div id="inner">
    <br>
    </div>
    </body>
    CSS:
    Code:
    body, div, img, form, table, tbody, tfoot, thead, tr, td, h1, h2, h3, h4, h5, h6, p{
    	margin: 0px;
    	padding: 0px;
    	border:0px none;
    	background-color: #f48026;
    	text-align: left;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 13px;
    	text-decoration: none;
    }
    #content {
    	width: 907px;
    	margin-left: auto;
    	margin-right: auto;
    	color: #FFFFFF;
    	text-align: left;
    	text-decoration: none;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 13px;
    	padding: 0px;
    	border:0px none;
    	background-color: #f48026;
    }
    #content .strapline {
    	font-family: Arial, Helvetica, sans-serif;
    	color: #FFFFFF;
    	float: right;
    }
    #content .strapline ul{
    	list-style: none;
    	margin: 0;
    	padding: 0;
    }
    #content .strapline li{
    	display: inline;
    }
    #content ul {
    	list-style: none;
    	margin: 0;
    	padding: 0;
    }
    #content li {
    	display: inline;
    }
    #content a:link, #content a:visited { 
    	padding: 3px 10px 2px 10px; 
    	color: #FFFFFF;
    	background-color: #f48026;
    	text-decoration: none;
    }
    #content a:hover {
    	color: #981b1e;
    	background-color: #FFFFFF;
    }
    #content {
    	width: 907px;
    	margin-left: auto;
    	margin-right: auto;
    	color: #FFFFFF;
    	text-align: left;
    	text-decoration: none;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 13px;
    }
    #inner {
    	width: 907px;
    	margin-left: auto;
    	margin-right: auto;
    	color: #636466;
    	text-align: left;
    	text-decoration: none;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 13px;
    	background-color: #efeacd;
    	margin-top: 2px;
    }
    Any nudge in the right direction is very much appreciated!

    Thanks!

  • #2
    New Coder
    Join Date
    Jul 2006
    Location
    London
    Posts
    36
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Floats and clear

    You will find the code below works, although you will have to fiddle with the sizes.

    I have floated all related texts and removed the span putting the class on the <li> tag instead.

    Code:
    body, div, img, form, table, tbody, tfoot, thead, tr, td, h1, h2, h3, h4, h5, h6, p{
    	margin: 0px;
    	padding: 0px;
    	border:0px none;
    	background-color: #f48026;
    	text-align: left;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 13px;
    	text-decoration: none;
    }
    #content {
    	width: 907px;
    	margin-left: auto;
    	margin-right: auto;
    	color: #FFFFFF;
    	text-align: left;
    	text-decoration: none;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 13px;
    	padding: 0px;
    	border:0px none;
    	background-color: #f48026;
    }
    #content ul {
    	list-style: none;
    	margin: 0;
    	padding: 0;
    }
    #content li {
    	display: inline;
    	float: left;
    }
    #content .strapline {
    	font-family: Arial, Helvetica, sans-serif;
    	color: #FFFFFF;
    	float: right;
    }
    #content .strapline ul{
    	list-style: none;
    	margin: 0;
    	padding: 0;
    }
    #content .strapline li{
    	display: inline;
    	float: inherit;
    }
    
    #content a:link, #content a:visited { 
    	padding: 3px 10px 2px 10px; 
    	color: #FFFFFF;
    	background-color: #f48026;
    	text-decoration: none;
    }
    #content a:hover {
    	color: #981b1e;
    	background-color: #FFFFFF;
    }
    #content {
    	width: 907px;
    	margin-left: auto;
    	margin-right: auto;
    	color: #FFFFFF;
    	text-align: left;
    	text-decoration: none;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 13px;
    }
    #inner {
    clear: left;
    	width: 907px;
    	margin-left: auto;
    	margin-right: auto;
    	color: #636466;
    	text-align: left;
    	text-decoration: none;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 13px;
    	background-color: #efeacd;
    	margin-top: 2px;
    }
    Code:
    <html>
    <head>
    	<title></title>
    </head>
    
    <body>
    <div id="content">
      <ul>
        <li><a href="#">about</a></li>
        <li><a href="#">personalize it</a></li>
        <li><a href="#">special orders</a></li>
    	<li class="strapline"><a href="#">checkout</a></li>
    	<li class="strapline"><a href="#">shopping Cart</a></li>
      </ul>
    </div>
    <div id="inner">
    <br>
    </div></body>
    </html>
    Hope this helps.

  • #3
    New to the CF scene
    Join Date
    May 2006
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by mylegoh View Post
    Hope this helps.
    Yes that does. Thank you very much!


  •  

    Posting Permissions

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