HTML & CSSur HTML, XHTML & CSS
3 svar · 310 visningar · startad av Type
Hej
Jag har problem.
ett vanligt sådant så jag borde hitta hjälp bland andra trådar men det går absolut inte. Jag har en sida med två div-ar. En som är float:left o en float:right. De ska vara 100% höjd på (de har bakgrundsfäger) och ska bestämmas av en yttre div som jag sätter en höjd på, tex 350px. Det funkar helt okej så länge jag har padding:0 och margin:0.
Nu är det så att jag vill ha en padding på kanske 5px men då funkar det inge vidare. hur ska jag göra?
stilmall.css:
body{
padding:0;
margin:0;
background:#e0e0e0 url("images/body.jpg") repeat-x top left;
font-family:Trebuchet MS,Helvetica,Arial,Verdana,sans-serif;
font-size:14px;
}
div#outer{
background:transparent url("images/containerBG.gif") repeat-y top left;
top:50px;
position:relative;
width:620px;
height:600px;
margin:auto;
}
div#menu{
width:620px;
background:transparent url("images/menu_bottom.gif") no-repeat bottom left;
height:42px;
padding:0;
margin:0;
}
div#head{
background:transparent url("images/head_back.gif") no-repeat top left;
width:620px;
height:41px;
font-family:Trebuchet MS,Helvetica,Arial,Verdana,sans-serif;
font-size:15px;
font-weight:bold;
text-transform:uppercase;
color:#F30;
padding-top:11px;
padding-left:25px;
position:relative;
top:10px;
}
div#inner{
width:618px;
height:280px;
background-color:#FFF;
border-left:1px solid #ADADAD;
border-right:1px solid #ADADAD;
border-bottom:1px solid #ADADAD;
border-top:0;
padding:0;
margin:0;
}
div.clear-it {
clear: both;
height: 0px;
}
div#content {
float:left;
width:365px;
background-color:#FFF;
height:100%;
padding:0;
margin:0;
background:#F00;
}
div#right {
width:250px;
float:right;
margin:0;
padding:0;
position:relative;
height:100%;
border-left:1px #ADADAD solid;
background-color:#F0F2F4;
height:100%;
}
div#bottom{
background-color:#A3BAC8;
height:25px;
border:1px #ADADAD solid;
text-align:center;
padding:10px;
color:#FFF;
clear:both;
font-size:12px;
}
ul#menu{
margin:0;
padding:0;
float:center;
list-style-type:none;
width:auto;
position:relative;
display:block;
height:36px;
text-transform:uppercase;
font-size:12px;
font-weight:bold;
background:transparent url("images/menu_off.gif") repeat-x top left;
font-family:Trebuchet MS,Helvetica,Arial,Verdana,sans-serif;
/*border-bottom:4px solid #336666;*/
border-top:1px solid #C0E2D4;
border-left:1px solid #ADADAD;
border-right:1px solid #ADADAD;
}
ul#menu li{
display:block;
float:left;
margin:0;
pading:0;
}
.clear-it{
height:0;
clear:both;
}
ul#menu li a{
display:block;
float:left;
color:#874B46;
text-decoration:none;
padding:12px 20px 0 20px;
height:24px;
background:transparent url("images/divider.gif") no-repeat top right;
}
ul#menu li a:hover{
background:transparent url("images/menu_hover.gif") no-repeat top right;
}
ul#menu li a.current,ul#menu li a.current:hover{
color:#fff;background:transparent url("images/menu_on.gif") no-repeat top right;
}
index:
<!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=iso-8859-1" />
<title>Titel</title>
<link rel="stylesheet" href="stilmall.css" type="text/css" />
</head>
<?
$p = $_GET['p'];
if($_GET['p'] == "")
$p = "start";
switch($p) {
case "omoss":
$head = "Om oss";
break;
case "utbildning":
$head = "Utbildning";
break;
case "coaching":
$head = "Coaching";
break;
case "kontaktaoss":
$head = "Kontakta oss";
break;
default:
$head = "Start";
break;
}
?>
<body>
<div id="outer">
<img src="images/menu_top.gif"/><div id="menu">
<? include("menu.inc"); ?>
</div>
<div id="head">
<?=$head?>
</div>
<div id="inner">
<div id="content">
<?
include($p.".inc");
?>
</div>
<div id="right">
Här kan man ha bild eller kontaktformulär eller någon text
</div>
<div class="clear-it"> </div>
</div>
<div id="bottom">
bottom
</div>
</div>
</body>
</html>
Vill du ha padding på dom inre eller den yttre?
Förresten, jag rekommenderar att inkludera filer med ändelsen php istället för inc eftersom man kan ladda hem och läsa inc-filer (om man klurar ut vad dom heter), men inte php-filer eftersom alla anrop till en php-fil renderas av webservern...
headbug skrev:
Vill du ha padding på dom inre eller den yttre?
Dom inre. Jag vill att det ska bli ett litet mellanrum mellan kanterna på diven o texten.
tack för tipset ang inc. det har jag aldrig tänkt på...
Nu har jag löst det genom att ha en bakgrundsbild i inner som simulerar bakgrundsfärgen för de båda div-arna. Det är inte snyggt o inte smart men det fungerar. o det är huvudsaken just nu. om någon kommer på vad som är fel får ni gärna säga till..
