Forum Moderators: not2easy
i made an sketch of my layout here: <snip>
in the biggest box i have a bride photograph that should start at the bottom of the box and get out of it until get OVER the top of site
you know? the bride photograph have to overlap the top (logo) of site.
how can i code this css?
i tried to separate the head of the body (cutting the bride image) but it got messy
sorry about my poor english
thanks
PS: this is the real box with the real bride photograph < removed >
[edited by: tedster at 11:44 pm (utc) on Nov. 5, 2009]
[edited by: swa66 at 12:26 am (utc) on Nov. 6, 2009]
[edit reason] Link removal, see ToS and forum charter [/edit]
My recommendation is to markup the HTML and CSS as best that you can - build the framework. If there are problems, post the relevant code and we will look at the options.
Be sure to declare a DTD and validate the markup. That will avoid, eliminate, or rule out many problems.
Be sure to include image dimensions where needed as it is often not possible to address an issue directly and fully without this information.
now i have another doubt:
this is a simple code:
as you can see, its a simple 2 column code. between the 2 column and the footer i wanna make more 3 column.
how can i simply do that?
thanks
<html>
<head>
<style type="text/css">
body{ text-align:center;}
#tudo {
width:790px;
text-align:left;
margin:0 auto;}
#topo {
height:80px;
background-color:#df7ddf;
}
#right {
width:597px;
background-color:#9cf;
float:right;
}
#left {
width:190px;
background-color:#ffbe7d;
float:left;
}
#rodape {
clear:both;
height:60px;
background-color:#b5daa2;
}
</style>
</head>
<body>
<div id="tudo">
<div id="topo">topo</div>
<div id="right">principal</div>
<div id="left">navegação</div>
HERE:
COLUMN 1 ¦¦ COLUMN 2 ¦¦ COLUMN 3
<div id="rodape">RODAPE</div>
</div>
</body>
</html>
how can i simply do that?
Simply work long and hard for a long time.
Would rather have seen you markup a sample that needed fixing than drop a 'do it for me request'. You'll learn more by making mistakes that you need to work on fixing, even with help.
Nevertheless, I've hacked up a 'simple' sample that meets the specifications. You'll have to work with it to get it to actually work for your needs. It's solid, though the markup not 'ideal'. Play with it.
<!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" xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
body{ text-align:center;}
#tudo {
width: 790px;
text-align: left;
margin: 0 auto;
}
#topo {
height: 80px;
background-color: #df7ddf;
}
#right {
width: 597px;
background-color: #9cf;
float: right;
}
#left {
width: 190px;
background-color: #ffbe7d;
float: left;
}
#rodape {
/*****clear: both;*/
height: 60px;
background-color: #b5daa2;
}
#three-col div {
border: .1em solid red;
height: 15em;
}
</style>
</head>
<body>
<div id="tudo">
<div id="topo">topo</div>
<div id="right">principal</div>
<div id="left">navegação</div>
<div id="three-col" style="clear: both;">
<div style="float: left; width: 33%;">
Column 1
</div>
<div style="float: right; width: 33%;">
Column 3
</div>
<div>
Column 2
</div>
</div>
<div id="rodape">RODAPE</div>
</div>
<!--##########
as you can see, its a simple 2 column code. between the 2 column and the footer i wanna make more 3 column.
how can i simply do that?
-->
</body>
</html>
