/    Sign up×
Community /Pin to ProfileBookmark

I can’t figure out this layout

Copy linkTweet thisAlerts:
Mar 18.2004

Hi!

I want to create a layout using div but i don’t know where to start.

What i want is to split vertically the screen with two div side by size (50% each) with two different background color. After, i want to center a div in the middle of the screen.

Anybody can help me to start?

T

to post a comment
CSS

11 Comments(s) ↴

Copy linkTweet thisAlerts:
@VladdyMar 18.2004 — Yeah, start with the content.
Copy linkTweet thisAlerts:
@turbauthorMar 18.2004 — Ok... this is my start

[code=php]
body {
margin: 0px;
height: 100%;
}

#sideL {
float: left;
width: 50%; height: 100%;
background-color: #EEEEEE;
}

#sideR {
float: left;
width: 50%; height: 100%;
background-color: #282B32;
}

#flash {
position: absolute;
left: 50%;
width: 800px; height: 350px;
margin-top: 100px;
margin-left: -400px;
border: 1px dashed #333;
background-color: #eee;
}
[/code]

and my page
[code=php]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>turbulencemedia.com ::: 2004</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" media="screen" href="includes/style.css" />
</head>
<body scroll=no>
<div id="sideL"></div>
<div id="sideR"></div>
<div id="flash"></div>
</body>
</html>
[/code]

Now some problem:

In Firefox, i saw the center div but not the left and right div

In IE6, i saw the right and left div, but not the center
Copy linkTweet thisAlerts:
@VladdyMar 18.2004 — You are starting from the wrong direction.

Read this:

http://forums.webdeveloper.com/showthread.php?s=&threadid=30383
Copy linkTweet thisAlerts:
@BonnerMar 18.2004 — <body>

<div id="header" title="Page Meta Decription">

<h1><span>Page Title</span></h1>

<h2><span>Page Meta Decription</span></h2>

</div>

#header span {

display : none;

}

#header h1 {

padding : 0;

margin : 0;

border : none;

width : 100%;

height : 50px;

background : #ccc url(image.gif) no-repeat center center scroll;

}

====================

The above will simply display an image in replace of the headings and when you hover over the image you will get the page description.

Make sure that what goes in the <title> tags also goes in the <h1> tags. What goes in the description meta tags should also be in the <h2> tags. This way you help search engines understand what your page is about more.
Copy linkTweet thisAlerts:
@BonnerMar 18.2004 — Sorry I posted the last message before I saw the last 2 before mine appear.

Why do you have the scroll="no" attribute in your body tag? You can do that with CSS.
Copy linkTweet thisAlerts:
@turbauthorMar 18.2004 — how can i do that in css???
Copy linkTweet thisAlerts:
@BonnerMar 18.2004 — html,body {

overflow : hidden;

width : XXpx;

height : XXpx

}
Copy linkTweet thisAlerts:
@turbauthorMar 18.2004 — thank...

sometime i just don't take the time to really think before post ?
Copy linkTweet thisAlerts:
@BonnerMar 18.2004 — I have attached an example of what my mate done with his CSS to simulate a table.

I done a similar example at http://homepage.ntlworld.com/dancedevils

but simulating tables with CSS the way I did is not recommended.

Edited:

Further readings include http://www.r7designer.com/news/css/000093.php but there are many ways of creating this effect of multi-columned CSS effect. To master CSS you need to be able to put a picture in your head of how the CSS is supposed to display the content.

I am able to do that and I have only been programming since last year, I can also picture how each browser will display they page. (Each browser as in IE5, IE6, IE 5 Mac, Moz FB, Moz FF, Opera 6 - 7.) What I am therefore trying to say is that it does not take a lot to learn CSS if you put your head to it. It is designed to be very simple.

[upl-file uuid=dffaf9f5-7651-49f5-9f6d-89455a6f4660 size=846B]tables.zip[/upl-file]
Copy linkTweet thisAlerts:
@SamMar 18.2004 — why would you make css div's to emulate a table? there's the table tag for that. As long as it contains tabular data, why bother ?
Copy linkTweet thisAlerts:
@BonnerMar 18.2004 — Haven't I just said this is not recommended practise?

Also, we are not talking tabular data, we are talking more about multiple column layouts using CSS.

Something tables done very well and still do.
×

Success!

Help @turb spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.16,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...