SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Jan 2013
    Location
    Scotland
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Website Layouts, please help

    Hi

    After discovering that my present website has so many errors that I was advised to start again! I have done the basics, but need some advice. Some advise that you should work to imaginary columns and rows of 960px x 960px. My layout is a bit of a hash at the moment, but I thought I would at least get something down and find out if I am going in the right direction. I am not a programmer and want to keep things simple. Could someone please have a look at my code and let me know if it is ok? One problem I have is I can't seem to get my hit counter to line up on the left underneath my main navigation bar. The footer goes banana's if I change any of it? Any advice would be greatly appreciated.

    Many thanks,
    Puzzle1

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Where is your site? Did you mean to post a link?
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Member
    Join Date
    Jan 2013
    Location
    Scotland
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    No I didn't mean to post to a link. The layout I have so far is not live and I wasn't sure whether I should post the code that I have put together so far. I've not included the code for the navigation menu as I know it's perfect and in a separate CSS file. So here goes:

    HTML:
    Code:
     <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html lang="en">
    <head>
    <title>Welcome To The Scottish Great Dane Club</title>
    <meta http-equiv="content-Type" content="text/html; charset=utf-8">
    <meta name="description" content="Scottish Great Dane Club Aims">
    <meta name="keywords" content="Scottish; Great; Dane; Club; Scotland; Danes;">
    <link rel="stylesheet" href="pos.css">
    <link rel="stylesheet" href="nav.css">
    </head>
    
    <div class="header"><img src="Final2.jpg"></div>
    
    
    <div class="midborder"></div>
    
    
    <ul class="nav">
    	<li><a href="http://scottishgreatdaneclub.co.uk/index.html">Home</a></li>
    	<li><a href="#">The Club</a>
    	  	<ul>
    		  <li><a href="http://www.scottishgreatdaneclub.co.uk/history.html">History</a>
    		  <li><a href="http://scottishgreatdaneclub.co.uk/rules.html">Rules & Regs</a></li>
    		  <li><a href="http://scottishgreatdaneclub.co.uk/committee.html">Committee</a></li>
    		  <li><a href="http://scottishgreatdaneclub.co.uk/membership.html">Membership</a></li>
    		</ul>
    	  </li>
    	<li><a href="#">Show Info</a>
    	  	<ul>
    		  <li><a href="http://scottishgreatdaneclub.co.uk/chshow.html">Ch Show 2013</a></li>
    		  <li><a href="http://scottishgreatdaneclub.co.uk/opshow.html">Open Show 2012</a></li>
    		  <li><a href="http://scottishgreatdaneclub.co.uk/showdates2013.html">Show Dates</a></li>
    		  <li><a href="http://printmatters.info/printmatters3/dogshow/index.html">Schedules</a></li>
    		  <li><a href="#">Show Archives</a></li>	
    		</ul>
    	  </li>
    	<li><a href="#">Judging</a>
    		<ul>
     		  <li><a href="http://scottishgreatdaneclub.co.uk/history.html">Criteria</a></li>
    		  <li><a href="http://www.scottishgreatdaneclub.co.uk/downloads/sgdcjudging.pdf" target="_blank">SGDC App Form</a></li>
    		  <li><a href="http://www.scottishgreatdaneclub.co.uk/downloads/bcjudging.pdf" target="_blank">BC App Form</a></li>
    		</ul>
    	  </li>
    	<li><a href="http://scottishgreatdaneclub.co.uk/awards.html">Club Awards</a>
    		<ul>
    			<li><a href="http://scottishgreatdaneclub.co.uk/awards2012.html">2012</a></li>
    			<li><a href="http://scottishgreatdaneclub.co.uk/awards2011.html">2011</a></li>
    			<li><a href="http://scottishgreatdaneclub.co.uk/awards2010.html">2010</a></li>
    			<li><a href="http://scottishgreatdaneclub.co.uk/awards2009.html">2009</a></li>
    		</ul>
    	  </li>
    	<li><a href="http://scottishgreatdaneclub.co.uk/rescue.html">Rescue</a></li>
    	<li><a href="http://scottishgreatdaneclub.co.uk/health.html">Health</a></li>
    	<li><a href="http://scottishgreatdaneclub.co.uk/contacts.html">Contacts</a></li>
    	<li><a href="http://scottishgreatdaneclub.co.uk/links.html">Links</a></li>
    	<li><a href="http://scottishgreatdaneclub.blogspot.co.uk/">Blog</a></li>
    </ul>
    </div>
    
    <div class="content">
    <h1>Welcome to Our Website</h1>
    <h3>The Scottish Great Dane Club Aims:</h3>
    
    <p>To enhance the profile of Great Danes in Scotland and the UK</p>
    
    <P>To advocate and encourage responsible dog ownership and promote excellence in breeding and exhibiting.</p>
    
    <p>To maintain the breed standard and uphold the values of the Scottish Great Dane Club and the Kennel Club</p>
    </div>
    
    <div class="newsbox">
    <p>This is where club announcements will go along with any club news!</p>
    
    <div class="counter"><p>visitor number:<br><img src="http://homepages.plus.net/cgi-bin/counter?username_ss" /></p></div>
    
    <div class=linksbox>
    <p>Downloads</p>
    <ul>
    <li><a href="#">Schedules</a></li>
    <li><a href="#">Mandate</a></li>
    <li><a href="#">Rules & Regs</a></li>
    <li><a href="#">Judging</a></li>
    </ul>
    </div>
    
    <div class="footer">&copy; Scottish Great Dane Club. Design by S Owens</div>
    
    </body>
    </html>
    CSS:
    Code:
    .header {
    	position:absolute;
    	top:0;
    	left:250px;
    	padding:0;
    	margin:0;
    }
    
    
    .midborder {
    	background-image:url("tartan.jpg");
    	background-repeat:repeat-x;
    	margin:0;
    	width:1200px;
    	height:5%;
    	position:absolute;
    	left:30px;
    	top:200px;
    }
    
    .nav {
    	
    	position:absolute;
    	top:275px;
    	left:30px;
    }
    
    .content {
     	border-style:outset;
    	border-width:2px;
    	border-color:#00008B;
    	margin:0;
    	width:500px;
    	height:500px;
    	padding:15px;
    	position:absolute;
    	top:275px;
    	left:320px;
    	background-color:#D1E0FF;
    }
    
    .newsbox {
     	border-style:dashed;
    	border-width:1px;
    	border-color:#00008B;
    	margin:0;
    	width:250px;
    	height:300px;
    	padding:0;
    	position:absolute;
    	top:275px;
    	right:115px;
    }
    
    .linksbox {
     	border-style:groove;
    	border-width:2px;
    	border-color:#00008B;
    	margin:0;
    	width:250px;
    	height:150px;
    	padding:0px;
    	position:absolute;
    	top:350px;
    	right:0px;	
    }
    
    .linksbox li {
    	list-style-type:none;
    	text-decoration:none;
    }
    
    .counter {
     	border-style:inset;
    	border-width:2px;
    	border-color:#cccccc;
    	background-color:#cccccc;
    	margin:0;
    	width:150px;
    	height:75px;
    	padding:25px;
    	position:absolute;
    	top:350px;
    	left:30px;
    	font-family:Georgia;
    	font-size:12px;	
    }
    
    .footer {
    	clear:both;
    	width:1200px;
    	height:25px;
    	bottom:-250px;
    	position:absolute;
    	right:0px;
    	background-color:#00008B;
    	text-align:center;
    	color:#FFFFFF;
    }
    Many thanks,

    Puzzle1
    Last edited by Paul O'B; Feb 10, 2013 at 04:59. Reason: Please use code tags when posting code

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You can't really use absolute positioning for columns if you want a footer or indeed any other content under a column because absolute elements are removed from the flow and are like little islands of content that don't care about anything else.

    You would need to use floats for the columns and then you can clear them so that a footer or any other content can sit underneath if required. You should also avoid fixed heights on content containers as that is never good idea as content has no limit most of the time and indeed will overflow should users resize their text.

    Here's a basic three column layout for you to study:

    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>Page Title</title>
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
    <!-- Meta -->
    <meta name="description" content="#">
    <meta name="keywords" content="#">
    <!-- CSS -->
    <link href="main.css" rel="stylesheet" media="all" type="text/css">
    <link href="print.css" rel="stylesheet" media="print" type="text/css">
    <style type="text/css">
    html, body, table {
    	margin: 0;
    	padding: 0;
    	font-size: 100%;
    }
    object, iframe, h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ol, ul, fieldset, form, legend, table, caption, th, td {
    	margin: 0;
    	padding: 0;
    }
    ol, ul { list-style: none; }
    /* end reset styles */
    a img, img { border:none }/* remove borders from linked images*/
    a:link { }/* set as appropriate*/
    a:visited { }
    a:hover { }
    a:focus { }
    a:active { }
    input, textarea, select {
    	font-family:Arial; /*set font-family for IE*/
    	vertical-align:middle;
    }
    h1, h2, h3, h4, h5, h6, p { margin:0 0 1em }
    /* start main structure */
    body {
    	background:#fff;
    	color:#000;
    	padding:20px 0;
    }
    #outer {
    	max-width:1020px;
    	min-width:600px;
    	margin:0 auto;
    	border:1px solid #000;
    }
    * html #outer { width:960px }/* ie6*/
    #header {
    	background:blue;
    	border-top:1px solid #333;
    	border-bottom:1px solid #333;
    	width:100%;/* ie6 haslayout*/
    }
    #nav {
    	list-style:none;
    	text-align:center;
    	padding:10px 0;
    	background:red;
    }
    #nav li {
    	display:inline;
    	margin:0 10px;
    }
    /* left column*/
    #sidebar {
    	float:left;
    	width:250px;
    	min-height:100px;
    	background:#fcf;
    }
    /* middle column*/
    #main { margin:0 250px;padding:0 5px }
    #main-inner {
    	width:100%;
    	float:left;/* avoids clear issues in center column */
    	background:#ffc;
    }
    /* right column */
    #secondary {
    	float:right;
    	width:250px;
    	background:#fcf;
    }
    #footer {
    	clear:both;/* clear:floats*/
    	width:100%;
    	text-align:center;
    	background:blue;
    	border-top:1px solid #333;
    	border-bottom:1px solid #333;
    }
    </style>
    </head>
    <body id="home">
    <div id="outer">
    		<div id="header">
    				<h1>Header</h1>
    				<ul id="nav">
    						<li><a href="#">nav</a></li>
    						<li><a href="#">nav</a></li>
    						<li><a href="#">nav</a></li>
    				</ul>
    		</div>
    		<div id="sidebar">
    				<p>left column</p>
    		</div>
    		<div id="secondary">
    				<p>right column</p>
    		</div>
    		<div id="main">
    				<div id="main-inner">
    						<h2>Main Content</h2>
    						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque mauris pellentesque justo congue in faucibus justo faucibus. Nunc odio sapien, vehicula eget interdum quis, euismod dignissim magna. Morbi condimentum massa sit amet nisl fringilla quis laoreet sapien porttitor. Aenean adipiscing rutrum accumsan. Cras ipsum ligula, pretium sit amet fermentum et, viverra quis quam. Suspendisse sed lacus augue, a sagittis metus. Nunc pulvinar, purus a semper consequat, enim orci viverra dui, at iaculis quam odio sit amet eros. Aliquam eleifend ipsum et libero sollicitudin dictum eu et ipsum. Phasellus venenatis semper felis, vitae pretium enim fermentum lacinia. Nulla a erat tortor, et fermentum nisi. Suspendisse potenti. Ut pellentesque lorem ut metus convallis viverra. Nam sagittis, mauris sit amet tempor viverra, orci odio condimentum mi, eu semper metus odio vel augue. Nunc diam quam, cursus quis mollis a, rutrum euismod nisl. </p>
    						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque mauris pellentesque justo congue in faucibus justo faucibus. Nunc odio sapien, vehicula eget interdum quis, euismod dignissim magna. Morbi condimentum massa sit amet nisl fringilla quis laoreet sapien porttitor. Aenean adipiscing rutrum accumsan. Cras ipsum ligula, pretium sit amet fermentum et, viverra quis quam. Suspendisse sed lacus augue, a sagittis metus. Nunc pulvinar, purus a semper consequat, enim orci viverra dui, at iaculis quam odio sit amet eros. Aliquam eleifend ipsum et libero sollicitudin dictum eu et ipsum. Phasellus venenatis semper felis, vitae pretium enim fermentum lacinia. Nulla a erat tortor, et fermentum nisi. Suspendisse potenti. Ut pellentesque lorem ut metus convallis viverra. Nam sagittis, mauris sit amet tempor viverra, orci odio condimentum mi, eu semper metus odio vel augue. Nunc diam quam, cursus quis mollis a, rutrum euismod nisl. </p>
    				</div>
    		</div>
    		<div id="footer">
    				<p class="copyright">&copy; 2010</p>
    		</div>
    </div>
    <!-- end outer -->
    </body>
    </html>
    The left and right columns are floated and the middle column is not floated but has margins to clear the floats at the side and thus fills the center fluid portion without the need for explicit widths. The main-inner 100% float is to contain any clear element you use in the middle section from clearing the side columns in error.

    Floats must come first so the left and right columns must be first in the html. If this was a fixed width then you could float all three columns with appropriate widths in html order.

    Hope that gives you some idea how to go about this.

  5. #5
    SitePoint Member
    Join Date
    Jan 2013
    Location
    Scotland
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi, thank you so much for you help. Back to the drawing board for me. I really appreciate you taking the time to reply. Many thanks. Puzzle1. :-)


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
  •