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 9 of 9
  1. #1
    New to the CF scene
    Join Date
    Dec 2005
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Beginner - CSS Problem

    Firstly I'd like to say "Hi!", because this is my first post.

    Now I've only yesterday learnt HTML & CSS (properly), and I was spurred on by a number of fantastic webdesigns I saw. With studying HTML and CSS I learnt that you shouldn't use tables to position - but CSS. So I set off.

    Until...I hit a problem. The CSS "width" command, in IE width actually talks about the real width, while in FF width means the available width. I wanted to make all my links in the navigation bar the same width but because of this browser problem I couldn't.

    I tried to use the "display:block;", which made my "widths" the same however it placed each different navigation button on a new line, and I wanted them all on the same line under the site's title. Any ideas?

  • #2
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Quote Originally Posted by Quantum
    I tried to use the "display:block;", which made my "widths" the same however it placed each different navigation button on a new line, and I wanted them all on the same line under the site's title. Any ideas?
    Hey there, welcome to the forums.

    So, width works like this: In a block-level element, the width takes up the available space (the width of the containing block). In an inline element, the width is just the width of the content, no matter what you tell it.

    Since block-level elements also start on a new line, one way to get around this is using floats, or you could try using the inline display but adjusting padding to get some width (won't keep everything the same width, though, unless the link is the same text). Copy and paste the below code somewhere and you'll get a few examples.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    	"http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    	<meta http-equiv="content-type" content="text/html; charset=utf-8">
    	<title>width example</title>
    	<style type="text/css">
    		ul#block li	{
    			list-style: none;
    			float: left;
    			margin-right: 5px;
    			text-align: center;
    			width: 125px;
    			border: solid 1px #000;
    		}
    
    		ul#inline li	{
    			list-style: none;
    			margin-right: 5px;
    			display: inline;
    			text-align: center;
    			padding: 0 2em;
    			border: solid 1px #000;
    		}
    		
    	</style>
    </head>
    <body>
    	<h1>menu examples</h1>
    	<h2>floats</h2>
    	<ul id="block">
    		<li>link one</li>
    		<li>link two</li>
    		<li>link three</li>
    		<li>link four</li>
    		<li>link five</li>
    	</ul>
    
    	<div style="clear: both;">
    		<!-- clear this mess -->
    	</div>
    
    	<h2>display:inline</h2>
    	<ul id="inline">
    		<li>link one</li>
    		<li>link two</li>
    		<li>link three</li>
    		<li>link four</li>
    		<li>link five</li>
    	</ul>
    </body>
    </html>
    Hope this helps...

  • #3
    New to the CF scene
    Join Date
    Dec 2005
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank for that, you don't know how much that helps me.

    In the last two days that I've been learning CSS and HTML, I've come to the conclusion that they are actually quite easy but the hard bit is making the pages work in ALL the browsers, and so I've got another problem.

    I've crerating a two column template, and I want the two columns to both be contained by a border - producing what I called a "container". The coding I have implemented works in IE but not FF, and Opera - so it's obviously something I've missed out.

    The HTML qualifies as XHTML Strict with no errors, and the CSS also qualifies. I'll post the coding in the next two post.

  • #4
    New to the CF scene
    Join Date
    Dec 2005
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sorry for the wait, HTML:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html>
    <head>
    <title>Simply Dots</title>
    <link rel="stylesheet" type="text/css" href="web.css" />
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
    <meta name="description" content="_your description goes here_" />
    <meta name="keywords" content="_your,keywords,goes,here_" />
    </head>
    <body>
    <div class="container">
    <div id="main">
    <h2><span class="title">Welcome to Simply Dots</span></h2>
    <p><span class="tagline">22nd December 2005</span></p>
    <h3><span class="mainptit">Lipsum</span></h3>
    <p>Blah</p>
    
    <p>Blah</p>
    
    <p>Blah</p>
    
    <h3><span class="mainptit">And some more</span></h3>
    <p>Blah</p>
    
    
    <p>Blah</p>
    </div>
    
    <div id="sidebar">
    <div id="importbox">
    <h3><span class="sideptit">Important! - Please Read</span></h3>
    <p>Blah</p>
    </div>
    
    <div id="newsbox">
    <h3><span class="sideptit">News.</span></h3>
    <p>Blah</p>
    </div>
    </div>
    </div>
    </body>
    </html>

  • #5
    New to the CF scene
    Join Date
    Dec 2005
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    And the CSS:

    Code:
    body {
    		 font-family:Arial, Helvetica;
    		 font-size:0.75em;
    		 background: white url(back.jpg) repeat;
    		 margin:50px;
    }
    
    .container {
    					 width:800px;
    					 border-style:solid;
    					 border-color:#222;
    					 margin:0 auto;
    					 background:#fff;
    }
    					 
    .title {
    			 font-size:28px;
    			 color:#008080;
    			 width:560px;
    			 text-align:center;
    			 text-decoration: underline overline;
    }
    
    .tagline {
    				 color:#005800;
    				 font-weight:bold;
    }
    
    /*mainbox and content*/
    
    #main {
    			width:520px;
    			padding:10px;
    			float:left;
    }
    
    .mainptit {
    					font-size:18px;
    					color:#008080;
    }
    
    /*sidebar and content in the side bar*/
    
    #sidebar {
    				 width:240px;
    				 float:left;
    				 margin:100px 0 0 0;
    }
    
    #importbox {
    					 border-style:dashed;
    					 border-width:2px;
    					 border-color:#222;
    					 background:#f63b4b;
    					 padding:0 10px 0 10px;
    					 Overflow:auto;
    }
    
    #sideptit {
    					font-size:14px;
    }
    
    #newsbox {
    				 margin:50px 0 0 0;
    				 border-style:dashed;
    				 border-width:2px;
    				 border-color:#222;
    				 background:#ffcc33;
    				 padding:0 10px 0 10px;
    				 Overflow:auto;
    }

  • #6
    New to the CF scene
    Join Date
    Dec 2005
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I'm pretty sure it's a CSS problem when I'm decribing the .container class.

    Thanks for any help.

  • #7
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,801
    Thanks
    8
    Thanked 131 Times in 129 Posts
    Since all your content inside the container is floated you will need an element that is not floated to pull the container down.

    Code:
    <div id="newsbox">
    <h3><span class="sideptit">News.</span></h3>
    <p>Blah</p>
    </div>
    </div>
    <div style="clear:both;"></div>
    </div>
    </body>
    </html>
    Use a block element so you don't have to tell the browser to display: block it. since it is already a block element it will make itsself fit the availible space.

    Make it clear:both so that it sits below all the floated elements written above it in the HTML.
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #8
    New to the CF scene
    Join Date
    Dec 2005
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks,

    That makes so much sense, I think as I gradually learn more and more I'll get better at solving these problems on my own.

    Yours,

    Quantum

  • #9
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    BTW, please take some time to read the Posting Guidelines.


  •  

    Posting Permissions

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