PDA

View Full Version : How do you make css layout with this?

madoka
12-27-2009, 04:42 PM
I want to change this table layout (http://madoka.webs.com/index.html.html) to css but I do not know how.

I want to manipulate the code below but I don't know how I would add the bottom content. I'm a newbie so I don't know what to do with the margin/alignment either.
<html>
<head>
<title>Three Column CSS Layout with Header</title>
<style type="text/css">

body
{ margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
}

#header {
margin: 20px;
padding: 10px;
height: 100px;
}
#left {
position: absolute;
left: 15px;
top: 160px;
width: 200px;
}
#center {
top: 0;
margin-left: 230px;
margin-right: 230px;
}
#right {
position: absolute;
right: 15px;
top: 160px;
width: 200px;
}
</style>
</head>

<body>

<div id="header">

Your header will go here. You can place images, text links, etc. in this div. To change the properties of this div you can change the #header selector in the style sheet that is located on this page between the head tags.

</div>

<div id="left">

Your left menu will go here. You can place images, text links, etc. in this div. To change the properties of this div you can change the #left selector in the style sheet that is located on this page between the head tags.

</div>


<div id="center">
All of your content goes in this div. This section is fluid so that if the window is collapsed, your div will collapse also and fit the screen perfectly. To change the properties of this div you can change the #center selector in the style sheet that is located on this page between the head tags.
</div>

<div id="right">

Your right menu will go here. You can place images, text links, etc. in this div. To change the properties of this div you can change the #right selector in the style sheet that is located on this page between the head tags.

</div>

</body>
</html>


Any help would be appreciated.
madoka
12-27-2009, 06:30 PM
Never mind. I got it.

Now I just don't know how to do the background image on the left? How do you do that?

Here is the external css file..I do not know what I am doing wrong with the code highlighted in red to get the background to work.
/* generated by csscreator.com */
html, body{
margin:0;
padding:0;
}

#pagewidth{ }

#header{
position:relative;
height:200px;
background-color:#456cdb;
width:100%;
}

#topb {
position: relative;
}

#topb img {
position: absolute;
bottom: 0;
width:100%;
height:11px;
}

#leftcol{
width:25%;
float:left;
position:relative;
background-image: url('left.png');
background-repeat: repeat-y;
}

#twocols{
width:75%;
float:right;
position:relative;
}

#rightcol{
width:80%;
float:right;
position:relative;
background-color:#ffffff;
}

#maincol{background-color: #ffffff;
float: left;
display:inline;
position: relative;
width:20%;
}

#bottomb {
position: relative;
}

#bottomb img {
position: absolute;
top: 0;
width: 100%;
height: 11px;
}

#footer{
height:200px;
background-color:#456cdb;
clear:both;
}



/* *** Float containers fix:


http://www.csscreator.com/attributes/containedfloa

t.php *** */
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix{display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix{height: 1%;}
.clearfix{display: block;}
/* End hide from IE-mac */



/*printer styles*/
@media print{
/*hide the left column when printing*/
#leftcol{display:none;}

/*hide the right column when printing*/
#rightcol{display:none;}
#twocols, #maincol{width:100%; float:none;}
}



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML

4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CssCreator-->HTML 4.01 Strict

Template</title>
<meta http-equiv="content-type"

content="text/html;charset=utf-8" />

<meta name="generator"

content="www.csscreator.com" />

<link rel="stylesheet" href="734978.css"

type="text/css" />
</head>
<body>
<div id="pagewidth" >
<div id="header" > HEAD </div>
<div id="topb"><img src=topb.jpg></div>
<div id="wrapper"

class="clearfix" >
<div id="twocols" class="clearfix">
<div id="maincol" >
CONTENT HERE
<br><br>
</div>
<div id="rightcol" >

<p>Subtitle
<p>
ddddddddddddddddddddddddddddd
ddddddddddddddddddddddddddddd
ddddddddddddddddddddddddddddddd
ddddddddddddddddddddddddddddddd
ddddddddddddddddddddddddddddddd
ddddddddddddddddddddddddddddddd
ddddddddddddddddddddddddddddddd
ddddddddddddddddddddddddddddddd
ddddddddddddddddddddddddddddddd
ddddddddddddddddddddddddddddddd
ddddddddddddddddddddddddddddddd
ddddddddddddddddddddddddddddddd
ddddddddddddddddddddddddddddddd
ddddddddddddddddddddddddddddddd
ddddddddddddddddddddddddddddddddddd
ddddddddddddddddddddddddddddddddddd
ddddddddddddddddddddddddddddddddddd
ddddddddddddddddddddddddddddddddddd
ddddddddddddddddddddddddddddddddddd
ddddddddddddddddddddddddddddddddddd </div>
</div>
<div id="leftcol"><img

src=logo.jpg align=left></div>
</div>
<div id="footer" ><img src=bottom.jpg

align=right>
<div id="bottomb"><img src=bottomb.jpg></div>
</div>
</div>
</body>
</html>
Chris
12-27-2009, 07:54 PM
In your footer, the image "bottom.jpg" is set to align right. This should be aligned left.
asdfghjkl9
02-22-2010, 03:52 PM
If you mean vertical-text on an input button then I don't think you can do that.

You could use the button element but it won't post the form unless you script it.
<button>a<br />t<br />e<br />s<br />t</button>
I guess you could use a background image on an input button to get that effect.