SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Hybrid View

  1. #1
    SitePoint Addict
    Join Date
    Jun 2007
    Location
    Sydney, Australia
    Posts
    253
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Equalizing Coloumns - How to?

    EDIT: HELP NO LONGER REQUIRED HERE.

    Hi there.

    Just something im making for school: http://neb.enterdesign.com.au/html-tags.htm

    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    
    	<title>Neb's Web Development</title>
    	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    	
    	<link rel="stylesheet" type="text/css" href="styles.css">
    	
    	<!--[if IE 5]>
    	<link rel="stylesheet" type="text/css" href="ie5.css">
    	<![endif]-->
    	
    	<!--[if IE 6]>
    	<link rel="stylesheet" type="text/css" href="ie6.css">
    	<![endif]-->
    
    </head>
    <body>
    
    <div id="wrapper">
    
    	<div id="container">
    	
    		<div id="header">
    			<h1>Neb's Web Development</h1>
    		</div>
    	
    		<div id="content">
    			<h2>HTML - Basic Tags</h2>
    			<p>As I said, an HTML page is made of of HTML tags. A simple HTML page may look like this:
    			
    			<code>
    			&lt;html&gt;<br>
    			&lt;head&gt;<br>
    			&lt;title&gt;My first Webpage&lt;/title&gt;<br>
    			&lt;/head&gt;<br>
    			&lt;body&gt;<br>
    			&lt;h1&gt;This is a heading&lt;/h1&gt;<br>
    			&lt;h2&gt;This is a subheading&lt;/h2&gt;<br>
    			&lt;p&gt;This is a paragraph&lt;/p&gt;<br>
    			&lt;p&gt;&lt;b&gt;This is some bold text within a paragraph&lt;/b&gt;&lt;/p&gt;<br>
    			&lt;/body&gt;<br>
    			&lt;/html&gt;<br>
    			</code>
    			
    			<p>Each HTML document begins and ends with &lt;html&gt; and &lt;/html&gt;. Each page is then also separated into two parts. The head and the body.
    			The head contains information about the webpage, that will not be displayed in the actual browser window, such as the page title. 
    			The body, on the other hand, is everything that will be displayed in the browser window.</p>
    			
    			<p>Feel free to paste the code above into a text editor and save the file with an extention of either .htm or .html. Both will work and it does not really matter which you choose.
    			Experiment with the page and see what you can do with it. When you understand it, please go on to the next section of this tutorial.</p>
    			
    			<a href="html.htm"><img src="images/previous.gif" id="previous" alt="previous"></a>
    			<a href="html-links.htm"><img src="images/next.gif" id="next" alt="next"></a>
    		</div>
    	
    	</div> <!-- close container -->
    
    	<div id="nav">
    		<ul>
    		
    			<li><a href="index.htm" class="navhead">Home</a></li>
    			
    			<li class="break"><a href="html.htm" class="navhead">HTML:</a>
    				<ul>
    					<li><a href="html-tags.htm">Basic Tags</a></li>
    					<li><a href="html-links.htm">Links</a></li>
    					<li><a href="html-images.htm">Images</a></li>
    					<li><a href="html-lists.htm">Lists</a></li>
    					<li><a href="html-tables.htm">Tables</a></li>
    					<li><a href="html-forms.htm">Forms</a></li>
    					<li><a href="html-formatting.htm">Formatting</a></li>
    					<li><a href="html-font.htm">Font</a></li>
    					<li><a href="html-background.htm">Background</a></li>
    				</ul>
    			</li>
    			
    			<li class="break"><a href="css.htm" class="navhead">CSS:</a>
    				<ul>
    					<li><a href="css-selectors.htm">Selectors</a></li>
    					<li><a href="css-text.htm">Text</a></li>
    					<li><a href="css-links.htm">Links</a></li>
    					<li><a href="css-lists.htm">Lists</a></li>
    					<li><a href="css-background.htm">Background</a></li>
    					<li><a href="css-dimensions.htm">Dimensions</a></li>
    					<li><a href="css-borders.htm">Borders</a></li>
    					<li><a href="css-margin-padding.htm">Margin &amp; Padding</a></li>
    					<li><a href="css-floats.htm">Floats</a></li>
    					<li><a href="css-positioning.htm">Positioning</a></li>
    					<li><a href="css-layouts.htm">Layouts</a></li>
    				</ul>
    			</li>
    			
    		</ul>
    	</div>
    
    	<div id="footer">
    		<p>&copy; (name) 2007</p>
    	</div>
    
    </div> <!-- close wrapper -->
    
    </body>
    </html>
    Code:
    *
    {
    margin: 0;
    padding: 0;
    }
    
    body
    {
    background-color: #A7B8BF;
    font: 100.01&#37;/1.17 Arial, Helvetica, sans-serif;
    }
    
    #wrapper
    {
    width: 46.5em;
    margin: .6em auto;
    background-color: #EEEEFF;
    }
    
    #container
    {
    width: 37em;
    float: right;
    }
    
    #header
    {
    text-align: center;
    background: #EEEEFF url(images/tr.gif) no-repeat top right;
    }
    #header h1
    {
    font-size: 2.5em;
    padding: .3em;
    }
    
    #content
    {
    }
    #content code
    {
    display: block;
    margin: .8em;
    padding: .3em;
    font-family: monospace;
    border: #888888 1px inset;
    background-color: #FFFFFF;
    }
    #content h2
    {
    text-align: center;
    text-decoration: underline;
    padding: .6em;
    }
    #content p, #content img
    {
    margin: .8em;
    }
    #content img#next
    {
    border: 0;
    float: right;
    }
    #content img#previous
    {
    border: 0;
    float: left;
    }
    
    #nav
    {
    float: left;
    width: 9em;
    line-height: 1.27;
    background: #FFFFFF url(images/tl.gif) no-repeat top left;
    }
    #nav ul
    {
    list-style-type: none;
    background: url(images/bl.gif) no-repeat left bottom;
    padding: .6em 0;
    }
    #nav ul ul 
    {
    background: none;
    padding: 0;
    }
    #nav ul ul a
    {
    padding-left: 1.85em;
    }
    #nav a
    {
    display: block;
    }
    #nav a:link
    {
    text-decoration: none;
    color: #000000;
    }
    #nav a:visited
    {
    text-decoration: none;
    color: #000000;
    }
    #nav a:hover
    {
    text-decoration: underline;
    }
    #nav a:active
    {
    }
    #nav .navhead
    {
    padding-left: .6em;
    font-weight: bold;
    }
    #nav .break
    {
    margin-top: .6em;
    }
    
    #footer
    {
    clear: both;
    background-color: #a7b8bf;
    }
    #footer p
    {
    padding: .5em;
    text-align: center;
    }
    the issues:

    1. I need to make the coloumns equal. its fine at: http://neb.enterdesign.com.au/index.htm or wherever #container isnt longer than #nav, because the #wrapper has a background colour.

    and other issues are:
    2. in firefox it displays it how i want, however in IE7 and opera the text in <code> is too large. (in previous versions of IE its even larger)

    3. How do i put the bottom right rounded corner on? I think ill be able to do it if i have equal coloumns?

    4. Last thing, not that important but since i made this thread i though i might mention it. In IE 5.0 (5.5 is fine) the line-height seems to be larger in #nav, ie the space between each link is larger.

    Thanks for any help!
    Last edited by AutisticCuckoo; Feb 13, 2008 at 08:39.

  2. #2
    SitePoint Wizard bronze trophy Tailslide's Avatar
    Join Date
    Feb 2006
    Location
    Bedford, UK
    Posts
    1,687
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    As far as the equal column issue goes, you want to use the Faux Column technique - there's an explanation in the stickies: http://www.sitepoint.com/forums/showthread.php?t=143801
    Little Blue Plane Web Design
    Blood, Sweat & Rust - A Land Rover restoration project


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
  •