Tycoon Talk
Become a Big fish!
The number 1 forum for online business!
Post topics, ask questions, share your knowledge.
Tycoon Talk is part of Freelancer.com - find skilled workers online at a fraction of the cost.

CSS Forum


You are currently viewing our CSS Forum as a guest. Please register to participate.
Login



Reply
Old 04-28-2005, 07:35 PM layou problems - css
StudioWorks's Avatar
Super Spam Talker

Posts: 893
Location: i'm not gonna tell ya...
Trades: 0
Hey all..

I really need some help on this one. I'm having some troubles creating this flexible layout. I have attached a image. It's a 745 width, centered layout.

I dont have problems positioning the header and the menu but i get suck in positioning the left area , div 1 , div 2 , div 3 and the footer.

I tryed and i tryed but i just gave up.. if someone could help me it would be great! ( see the image attached )
Attached Images
File Type: gif layout.gif (5.0 KB, 9 views)
__________________

Please login or register to view this content. Registration is FREE
|
Please login or register to view this content. Registration is FREE

Please login or register to view this content. Registration is FREE

Please login or register to view this content. Registration is FREE

Please login or register to view this content. Registration is FREE

Please login or register to view this content. Registration is FREE

Please login or register to view this content. Registration is FREE


Please login or register to view this content. Registration is FREE

Please login or register to view this content. Registration is FREE
StudioWorks is offline
Reply With Quote
View Public Profile Visit StudioWorks's homepage!
 
 
Register now for full access!
Old 04-28-2005, 08:45 PM
praveen's Avatar
Life is a Dream

Posts: 3,591
Name: Praveen
Location: Chennai, India
Trades: 0
better version is below
__________________

Please login or register to view this content. Registration is FREE
-
Please login or register to view this content. Registration is FREE
-
Please login or register to view this content. Registration is FREE
-
Please login or register to view this content. Registration is FREE

Last edited by praveen; 04-29-2005 at 11:37 AM..
praveen is offline
Reply With Quote
View Public Profile
 
Old 04-29-2005, 09:07 AM
chrishirst's Avatar
Missing! presumed drunk.

Posts: 41,517
Name: Chris Hirst
Location: Blackpool. UK
Trades: 0
Code:
/* CSS styles */
body {
	text-align:center;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #666666;
	font-size:1em;
}
h1,h2 {
	color:#0033CC;
}
h1 {
	font-size:1.8em;
}
h2 {
	font-size:1.4em;
}
#main {
	position:relative;
	width:745px;
	text-align:left;
	margin:0px auto;
}
#header {
	position:relative;
	text-align:center;
	width:100%;
	height:120px;
	border:1px solid orange;
}
#header img {
	position:relative;
	border:0px;
}
#menu {
	position:relative;
	width:100%;
	height:50px;
	margin:5px auto;
	border:1px solid blue;
}
#left_side {
	position:relative;
	width:15%;
	float:left;
	padding:5px 2px;
	border:1px solid black;
}
#content {
	position:relative;
	width:80%;
	float:left;
	padding:5px 2px;
	margin:0px 0px 15px 5px;
	border:1px dashed blue;
}
#footer {
	position:relative;
	width:95%;
	text-align:center;
	font-size:0.8em;
	margin:0px auto;
	border:1px dotted red;
}
#design {
	position:relative;
	width:75%;
	margin:0px auto 20px auto;
}
#design img {
	border:0px;
}
.top_block {
	position:relative;
	overflow:auto;
	width:40%;
	height:150px;
	float:left;
	padding:5px 2px;
	margin:10px 0px 10px 5px;
	border:1px dashed blue;
}
.clearing {
	clear:both;
}
.para {
	position:relative;
	text-indent:15px;
	font-size:1em;
	padding:5px;
}
(X)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>CSS Based Templates </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<meta name="keywords" content=""/>
<meta name="description" content=""/>
<link type="text/css" rel="stylesheet" href="include/style.css" />
</head>

<body>
<div id="main">
<div id="header">
</div><!-- header -->
<div id="menu"></div><!-- menu -->
<div id="left_side">Left Side
<br />
<br />
<br />
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.
 </div><div class="top_block"></div><!-- top_block -->
<div class="top_block">
<h2>Testing</h2></div><!-- top_block -->
<div id="content">

<p class="para">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr,  sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,  sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,  sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
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. 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><!-- content -->

<div class="clearing"></div><!-- clearing -->

<div id="footer">
</div><!-- footer -->

</div>
<!-- main -->

</body>
</html>
__________________
Chris. ->> Links are advertising NOT optimising!! <<-
A foolish consistency is the hobgoblin of little minds
Thought for today:- I SEO the only industry where all the cowboys are Indians?
chrishirst is offline
Reply With Quote
View Public Profile Visit chrishirst's homepage!
 
Reply     « Reply to layou problems - css
 

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off





   
RSS Feed  Feeds: RSS   JS   XML
RSS Feed  Feeds for this forum: RSS   JS   XML



Page generated in 0.27851 seconds with 13 queries