...

View Full Version : making switch from tables to css



hwoodfilm
12-24-2009, 03:58 PM
Ok. So i dont want to make all my pages of my new site using my template that uses tables to format. i want to make the switch to css for page layout.

i want it to look like: www.nylafilms.com/nylabeta3 without using table command.

i am very novice at this so bear with me.

the layout is relatively simple. but id like to maintain the width of the banner image, nav bar, left column and right column. left and right columns will have an unspecified length as it depends on particular contents of each particular page. and id like to maintain the layout as a whole to stay centered on browser window, no matter what user sizes it as. thats it. any help is greatly appreciated.

my main issue with making the site as it is now, was that it would maintain proper layout in all browsers. hopefully css makes that easier.

thanks.

David

sparkbox
12-24-2009, 04:35 PM
<style type="text/css">
<!--
#apDiv1 {
margin:auto
width:200px;
height:115px;
z-index:1;
left: 0px;
top: 9px;
color: #FFF;
}
#menu {
margin:auto
width:777px;
height:48px;
z-index:1;
left: 97px;
top: 266px;
background-color: #000000;
}
body,td,th {
color: #FFF;
}
body {
background-color: #000;
}
#content {
position:absolute;
width:594px;
height:115px;
z-index:1;
top: 317px;
left: 358px;
}
#menunav {
margin:auto
width:317px;
height:115px;
z-index:2;
left: 637px;
top: 362px;
}
#apDiv2 {
position:absolute;
width:172px;
height:115px;
z-index:2;
left: 479px;
top: 1px;
}
-->
</style>
<div id="apDiv1">
<div align="center"><img src="http://www.nylafilms.com/nylabanner02.jpg" width="777" height="250">
<div id="menu">NAVIGATION GOES HERE</div>
</div>
</div>
<div id="content">CONTENT GOES HERE
<div id="apDiv2">
<div align="right">NAVIGATION HERE</div>
</div>
</div>


try messing around with that i made a start but thats the basics of what you will be working with, its very easy to edit in dreamweaver but just takes a bit getting used to
i had the same problem at the start getting away from tables but the results are fantastic when you kno what your doing

hwoodfilm
12-24-2009, 04:57 PM
thank you. very detailed. i appreciate it.

David

sparkbox
12-24-2009, 05:01 PM
no problem hope it helps you, only been using Div's and stuff like that recently but its so hard not to just hit insert>table haha

hwoodfilm
12-29-2009, 04:04 PM
so i made the changes given above. the format is still very wacky. not sure if i misinterpreted some of the code, or left out stuff, etc.

but again, the main thing i want to maintain is the centering of all the content no matter how wide the users browser window is made.

here is my first attempt at the new css-only code:
www.nylafilms.com/nylabetaCSS

thanks.
David

effpeetee
12-29-2009, 04:41 PM
Plenty of help here (http://exitfegs.co.uk/Sources.html).

and here. (http://www.mardiros.net/liquid-css-layouts.html)

Frank

VIPStephan
12-29-2009, 05:29 PM
What you have is basically a two column layout. Refer to http://bonrouge.com/2c-hf-content1st.php and learn how this is achieved.

You can center a block element by assigning a width and setting left and right margins to auto. So in the example I linked to there is a container element that holds all sections and this container is getting the width and margins.

Basic structure/approach:



-container
--header
--content
---main content
---sub content (e. g. sidebar)
--(footer)



container gets width (this is setting the page width)
main content is floated left and gets a width
sub content is floated right and gets a width (note that these two widths must add up to be equal or lower than the container width)
footer (if applicable) clears the floats (clear: both) so it stays below the two content sections.

Excavator
12-29-2009, 05:57 PM
Hello hwoodfilm,
Several things you will want to change there.

First and foremost - You will need a DocType, see the link in my sig about DocTypes.

There is no need for absolute positioning. DW steers new coders toward using ap and those apdiv1 div names and it's too bad because there are much better ways to do it.

The nylabanner02.jpg that we're leeching from nylafilms.com is resized in the markup to 777x250. It's actual size is 1320x325. It does not make sense to force the enduser to spend the extra bandwidth loading an image he never sees.
When you get your own image, you should size it to fit your site.

Here is a start that is valid CSS, valid code and works in all browsers (although to be truthful, it's only been tested in FF3.5, IE8 and IE7)
I've commented on some of the CSS to explain what it's doing -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
font: 100% "Comic Sans MS";
background: #000;
}
* { /*CSS reset to zero out browser defaults*/
margin: 0;
padding: 0;
border: 0;
outline: 0;
}
#container {
width: 777px;
margin: 0px auto; /*centers the site*/
background: #999;
overflow: auto; /*to clear the floats*/
font-size: 0.8em;
background: #000;
}
#menu {
height:48px;
background: #ccc; /*for testing only*/
}
#content {
width:545px;
height:300px; /*for testing only - remove this when you put actual content in this div*/
float: left;
background: #fc6; /*for testing only*/
}
#column {
height: 300px; /*for testing only - remove this when you put actual content in this div*/
margin: 0 0 0 545px;
background: #f60; /*for testing only*/
}
</style>
</head>
<body>
<div id="container">
<img src="http://www.nylafilms.com/nylabanner02.jpg" alt="logo" width="777" height="250" />
<div id="menu">NAVIGATION GOES HERE</div>
<div id="content">
LEFT CONTENT GOES HERE
<!--end content--></div>
<div id="column">
RIGHT COLUMN HERE
<!--end column--></div>
<!--end container--></div>
</body>
</html>

hwoodfilm
12-30-2009, 01:43 AM
thank you. brilliant.

David



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum