1 Replies - 667 Views - Last Post: 11 April 2010 - 12:10 PM

#1 1cookie  Icon User is offline

  • D.I.C Regular

Reputation: -5
  • View blog
  • Posts: 338
  • Joined: 19-October 06

tempalte for a front page

Posted 10 April 2010 - 11:14 AM

hi

I'm trying to make a front page template like (see screenshot). Ive trawled the net but can't seem to find anything that is similar. I really struggle with layout technologies. The template should make use of nested <div> tags and CSS. Ive been at it all day, but am really struggling with it!

The best i can cobble together is:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<style type="text/css">

#container
{
width: 90%;
margin: 10px auto;
background-color: #fff;
color: #333;
border: 1px solid gray;
line-height: 130%;
}

#top
{
padding: .5em;
margin-top:20px;
height:100px;
background-color: #fff;
border-bottom: 1px solid gray;
border-right:1px solid gray;
}


#leftnav
{
float: left;
width: 28%;
margin: 10px;
padding: 1em;
}
#rightnav
{
float: right;
width: 28%;
margin: 0;
padding: 1em;
}

#content
{
width:33%;
margin-left: 400px;
border-left: 1px solid gray;
margin-right: 50px;
border-right: 1px solid gray;
padding: 1em;
max-width: 36em;
}

#footer
{
clear: both;
margin: 0;
padding: .5em;
color: #333;
background-color: #ddd;
border-top: 1px solid gray;
}

#leftnav p, #rightnav p { margin: 0 0 1em 0; }
#content h2 { margin: 0 0 .5em 0; }
#left {float:left; width:40%;padding:1em;border-right:1px solid;border-color:red;}
#right {float:right; width:50%;padding:1em;}
#logo {margin:0; padding:0;background-color:#ddd;}
#links {float:left; width:100%;background-color:#eee;padding:0;}
#links ul {clear:left;width:100%;margin: 0 auto;list-style:none;padding:1em;}
#links ul li {display:inline;list-style:none;margin:0;padding:0;}
#links ul li a {display:inline-block;float:left;margin:0 0 0 1px;padding:3px 10px;text-align:center;background:#eee;color:#000;text-decoration:none;position:relative;left:15px;line-height:1.3em;}
</style>

<div id="container">

<div id="logo"><h4>Header</h4>
<div id="links">
links

</div>


</div>

<div id="top">
	<div id="left"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.</p></div>
	<div id="right">Right side here, or carousel NODE.</div>
</div>


<div id="leftnav">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.
</p>
</div>
<div id="rightnav">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.
</p>
</div>
<div id="content">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
</div>
<div id="footer">
Footer
</div>
</div>
</body>
</html>












but it all goes legs up when i try and add stuff like nav links to it! Can anyone help out with a link to a site or something?

Attached image(s)

  • Attached Image

This post has been edited by 1cookie: 10 April 2010 - 11:30 AM


Is This A Good Question/Topic? 0
  • +

Replies To: tempalte for a front page

#2 1cookie  Icon User is offline

  • D.I.C Regular

Reputation: -5
  • View blog
  • Posts: 338
  • Joined: 19-October 06

Re: tempalte for a front page

Posted 11 April 2010 - 12:10 PM

View Post1cookie, on 10 April 2010 - 10:14 AM, said:

but it all goes legs up when i try and add stuff like nav links to it! Can anyone help out with a link to a site or something?


Well, if any ones interested, this code almost replicates it:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<style type="text/css">
/* General styles */
	body {
		padding:0;
		border:0;			/* This removes the border around the viewport in old versions of IE */
		margin:0;
		background:#fff;
		font-size:90%;
	}

	/* column container */
	.colmask {
		position:relative;	/* This fixes the IE7 overflow hidden bug */
		clear:both;
		width:90%;			/* width of 90% of page */
		overflow:hidden;		/* This chops off any overhanging divs */
		border:1px solid green;
		margin:0 auto;

	}
	
/* common column settings */
	.colmid,
	.colleft {
		float:left;
		width:100%;			/* width of page */
		position:relative;
	}

	.col1,
	.col2,
	.col3 {
		float:left;
		position:relative;
		padding:0 0 1em 0;	/* no left and right padding on columns, we just make them narrower instead 
						only padding top and bottom is included here, make it whatever value you need */
		overflow:hidden;
	}

	/* 3 Column settings */
	
	.threecol {
		background:#eee;		/* right column background colour */
	}
	.threecol .colmid {
		right:33%;			/* width of the right column */
	}

	.threecol .colleft {
		right:33%;			/* width of the middle column */
	}

	.threecol .col1 {
		width:29%;			/* width of center column content (column width minus padding on either side) */
		left:102%;			/* 100% plus left padding of center column */
	}

.threecol .col2 {
		width:29%;			/* Width of left column content (column width minus padding on either side) */
		left:39%;			/* width of (right column) plus (center column left and right padding) plus (left column left padding) */
	}

.threecol .col3 {
		width:29%;			/* Width of right column content (column width minus padding on either side) */
		left:78%;			/* Please make note of the brackets here:
						(100% - left column width) plus (center column left and right padding) plus (left column left and right padding) plus (right column left padding) */
	}

	#menu-nav ul {			/* menu navigation links */
		clear:left;
		width:90%;
		margin: 0 auto;
		list-style:none;
		padding-top:10px;
	}
	#menu-nav ul li {
		display:inline;
		list-style:none;
		margin:0;
		padding:0;

	}
	#menu-nav ul li a {
		display:block;
		float:left;
		margin:0 0 0 1px;
		padding:3px 10px;
		text-align:center;
		background:#eee;
		color:#000;
		text-decoration:none;
		position:relative;
		left:15px;
		line-height:1.3em;
	}
	
	.header{width:90%; position:relative; margin: 0 auto;padding:50px;}
	
	
	
	
	
	/* two column secton */
	
	
	/* General styles */
	body {
		margin:0 auto;
		padding:0;
		border:0;			/* This removes the border around the viewport in old versions of IE */
		width:90%;
		background:#fff;
		min-width:600px;    	/* Minimum width of layout - remove line if not required */
						/* The min-width property does not work in old versions of Internet Explorer */
		font-size:90%;
	}
	a {
		color:#369;
	}
	a:hover {
		color:#fff;
		background:#369;
		text-decoration:none;
	}
	h1, h2, h3 {
		margin:.8em 0 .2em 0;
		padding:0;
	}
	p {
		margin:.4em 0 .8em 0;
		padding:0;
	}
	img {
		margin:10px 0 5px;
	}
	/* Header styles */
	#header {
		clear:both;
		float:left;
		width:100%;
	}
	#header {
		border-bottom:1px solid #000;
	}
	#header p,
	#header h1,
	#header h2 {
		padding:.4em 15px 0 15px;
		margin:0;
	}
	#header ul {
		clear:left;
		float:left;
		width:100%;
		list-style:none;
		margin:10px 0 0 0;
		padding:0;
	}
	#header ul li {
		display:inline;
		list-style:none;
		margin:0;
		padding:0;
	}
	#header ul li a {
		display:block;
		float:left;
		margin:0 0 0 1px;
		padding:3px 10px;
		text-align:center;
		background:#eee;
		color:#000;
		text-decoration:none;
		position:relative;
		left:15px;
		line-height:1.3em;
	}
	#header ul li a:hover {
		background:#369;
		color:#fff;
	}
	#header ul li a.active,
	#header ul li a.active:hover {
		color:#fff;
		background:#000;
		font-weight:bold;
	}
	#header ul li a span {
		display:block;
	}
	
	
	/* 'widths' sub menu */
	#layoutdims {
		clear:both;
		background:#eee;
		border-top:4px solid #000;
		margin:0;
		padding:6px 15px !important;
		text-align:right;
	}
	/* column container */
	.colmask {
		clear:both;
		float:left;
		width:100%;			/* width of whole page */
		overflow:hidden;		/* This chops off any overhanging divs */
	}
	/* common column settings */
	.colright,
	.colmid,
	.colleft {
		float:left;
		width:100%;
		position:relative;
	}
	.col1,
	.col2,
	.col3 {
		float:left;
		position:relative;
		padding:0 0 1em 0;
		overflow:hidden;
	}
	/* 2 Column (double page) settings */
	.doublepage {
		background:#eee;		/* right column background colour */
	}
	.doublepage .colleft {
		right:50%;			/* right column width */
		background:#fff;		/* left column background colour */
	}
	.doublepage .col1 {
		width:46%;			/* left column content width (column width minus left and right padding) */
		left:52%;			/* right column width plus left column left padding */
	}
	.doublepage .col2 {
		width:46%;			/* right column content width (column width minus left and right padding) */
		left:56%;			/* (right column width) plus (left column left and right padding) plus (right column left padding) */
	}

	
	
	
	
	
	
	
	
	</style>
</head>
<body>








<div class="header"><h2>Travel</h2></div>

















<div id="menu-nav">
	<ul>
		<li><a href="#" id="current"><span>Voyager avec France</span></a></li>
		<li><a href="#"><span>Destination</span></a></li>
		<li><a href="#"><span>Processus de reservation</span></a></li>
		<li><a href="#"><span>Fidelite recompensee</span></a></li>

		<li><a href="#"><span>Menu de A a Z</span></a></li>

		<li><a href="#"><span>Environment</span></a></li>
		<li><a href="#" class="active"><span>Boute a outils</span></a></li>
	</ul>


</div>

<div class="colmask doublepage">
	<div class="colleft">
		<div class="col1">

			<!-- Column 1 start -->
			<h2>Col 1</h2>
				
		</div>
		<div class="col2">
			<!-- Column 2 start -->
<p><h5>Column two here</h5></p>
			<!-- Column 2 end -->

		</div>

	</div>
</div>



<div class="colmask threecol">
	<div class="colmid">
		<div class="colleft">
			<div class="col1"><h4>Center column content here.</h4><p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</p></div>
			<div class="col2"><h4>Left column content here.</h4><p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qu</p></div>

			<div class="col3"><h4>Right column content here.</h4><p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qu<p></div>
		</div>
	</div>
</div>


</body>

</html>





I based the code on this guys site. It's advanced CSS. I really struggle with window geometry, give me: alpha * (log(theta)) any day!!


best....
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1