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?
TYeah, start with the content.Ok... this is my start
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;
}
and my page
<!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=http://www.webdeveloper.com/forum/archive/index.php/"includes/style.css" />
</head>
<body scroll=no>
<div id="sideL"></div>
<div id="sideR"></div>
<div id="flash"></div>
</body>
</html>
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 centerYou are starting from the wrong direction.
Read this:
<!-- m --><a class="postlink" href="http://forums.webdeveloper.com/showthread.php?s=&threadid=30383">http://forums.webdeveloper.com/showthre ... adid=30383</a><!-- m --><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.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.how can i do that in css???html,body {
overflow : hidden;
width : XXpx;
height : XXpx
}thank...
sometime i just don't take the time to really think before post
I have attached an example of what my mate done with his CSS to simulate a table.
I done a similar example at <!-- m --><a class="postlink" href="http://homepage.ntlworld.com/dancedevils">http://homepage.ntlworld.com/dancedevils</a><!-- m -->
but simulating tables with CSS the way I did is not recommended.
Edited:
Further readings include <!-- m --><a class="postlink" href="http://www.r7designer.com/news/css/000093.php">http://www.r7designer.com/news/css/000093.php</a><!-- m --> 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.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 ?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.
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?
TYeah, start with the content.Ok... this is my start
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;
}
and my page
<!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=http://www.webdeveloper.com/forum/archive/index.php/"includes/style.css" />
</head>
<body scroll=no>
<div id="sideL"></div>
<div id="sideR"></div>
<div id="flash"></div>
</body>
</html>
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 centerYou are starting from the wrong direction.
Read this:
<!-- m --><a class="postlink" href="http://forums.webdeveloper.com/showthread.php?s=&threadid=30383">http://forums.webdeveloper.com/showthre ... adid=30383</a><!-- m --><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.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.how can i do that in css???html,body {
overflow : hidden;
width : XXpx;
height : XXpx
}thank...
sometime i just don't take the time to really think before post
I have attached an example of what my mate done with his CSS to simulate a table.I done a similar example at <!-- m --><a class="postlink" href="http://homepage.ntlworld.com/dancedevils">http://homepage.ntlworld.com/dancedevils</a><!-- m -->
but simulating tables with CSS the way I did is not recommended.
Edited:
Further readings include <!-- m --><a class="postlink" href="http://www.r7designer.com/news/css/000093.php">http://www.r7designer.com/news/css/000093.php</a><!-- m --> 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.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 ?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.