PDA

View Full Version : Question


texaselement
12-27-2008, 10:13 PM
i am building a web site in dreamweaver cs3 and was wondering how i would go about making a layout similar to the one attached

domedia
12-28-2008, 01:45 PM
It's just an image. Do you have an actual mockup with text and images?

edbr
12-29-2008, 12:33 AM
always i would say with css the image you show is a fairly simple background with inserted images i would guess,

texaselement
12-29-2008, 06:06 AM
read the next post

texaselement
12-29-2008, 06:09 AM
ok i guess i should explain a little...the content of each page will go in the center of the bordered area and the links to other pages will go in the maroon boxes the problem i have is setting up border and the boxes in order to do this and there is no example of it that i know of cause it was just an idea i came up with and may have gotten in over my head in doing so

edbr
12-29-2008, 07:10 AM
not exact but all css try this for a starter to get you thinking
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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">
<!--
body {
background:#000;
margin-top:15px;
}
.content {
width:600px;
border:#C30 solid 2px;
margin-left:80px;
color:#F00;
padding:30px;
}
.link{
display:block;
clear:both;
background-color:#F00;
width:30px;
height:30px;
float:right;
margin-bottom:15px;}
.toplink{
display:block;
background-color:#F00;
width:30px;
height:30px;
float:left;
margin-right:15px;}

.nav{
width:95px;
position: absolute;
left: 9px;
top: 56px;


}
.topnav{
width:600;
height:30px;
margin-left:65px;
position: absolute;
left: 9px;
top: 8px;
}
-->
</style>
</head>

<body>
<div class="topnav">
<div class="toplink">link</div>
<div class="toplink">link</div>
<div class="toplink">link</div>
</div>
<div class="nav">
<div class="link">home</div>


<div class="link">home</div>

<div class="link">home</div>

</div>

<div class="content"> text text text text text <br />
text text text text text


text text text text text <br />
text text text text text
text text text text text <br />
text text text text text

text text text text text <br />
text text text text text
text text text text text <br />
text text text text text </div>
</body>
</html>

texaselement
01-03-2009, 05:37 AM
not exact but all css try this for a starter to get you thinking
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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">
<!--
body {
background:#000;
margin-top:15px;
}
.content {
width:600px;
border:#C30 solid 2px;
margin-left:80px;
color:#F00;
padding:30px;
}
.link{
display:block;
clear:both;
background-color:#F00;
width:30px;
height:30px;
float:right;
margin-bottom:15px;}
.toplink{
display:block;
background-color:#F00;
width:30px;
height:30px;
float:left;
margin-right:15px;}

.nav{
width:95px;
position: absolute;
left: 9px;
top: 56px;


}
.topnav{
width:600;
height:30px;
margin-left:65px;
position: absolute;
left: 9px;
top: 8px;
}
-->
</style>
</head>

<body>
<div class="topnav">
<div class="toplink">link</div>
<div class="toplink">link</div>
<div class="toplink">link</div>
</div>
<div class="nav">
<div class="link">home</div>


<div class="link">home</div>

<div class="link">home</div>

</div>

<div class="content"> text text text text text <br />
text text text text text


text text text text text <br />
text text text text text
text text text text text <br />
text text text text text

text text text text text <br />
text text text text text
text text text text text <br />
text text text text text </div>
</body>
</html>


thanks thats really close and closer than i could have got