Web Analytics Made Easy -
StatCounter CSS newbie struggles - layout - CodingForum

Announcement

Collapse
No announcement yet.

CSS newbie struggles - layout

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new 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
    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.

    Comment


    • #3
      Originally posted by mylegoh View Post
      Hope this helps.
      Yes that does. Thank you very much!

      Comment

      Working...
      X