passe pixelbredde i css
HejsaJeg er igang med at øve mig lidt på css og div tags. Jeg har lavet følgende kode:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title> | Div Tag Test |</title>
<link rel="stylesheet" type="text/css" href="divs.css">
</head>
<body>
<!--<h1>Test</h1> -->
<div id="mainbox">
<p id="text">Banner</p>
</div>
<div id="leftbox">
<p id="text">Left</p>
</div>
<div id="centerbox">
<p id="text">Center</p>
</div>
<div id="rightbox">
<p id="text">Right</p>
</div>
</body>
</html>
____________
body {
text-align: center;
}
#text {
font: bold 30px Arial;
color: red;
}
#mainbox {
display: block;
width: 600px;
margin-left: 100px;
margin-right: 100px;
margin-top: 60px;
margin-bottom: 60px;
padding: 15px;
text-align: center;
border: 1px solid blue;
background-image: url("img/neki.jpg");
-webkit-border-radius: 25px;
-webkit-box-shadow: rgb(110,110,110) 8px 8px 8px;
}
#leftbox {
display: block;
width: 200px;
margin-left: 100px;
padding: 15px;
text-align: center;
border: 1px solid blue;
background: orange;
float: left;
}
#centerbox {
display: block;
width: 200px;
margin-left: 100px;
padding: 15px;
text-align: center;
border: 1px solid blue;
background: orange;
float: left;
}
#rightbox {
display: block;
width: 200px;
margin-left: 100px;
padding: 15px;
text-align: center;
border: 1px solid blue;
background: orange;
float: left;
}
Dette ser sådan ud:
http://postimg.org/image/pr2z0fhaf/
Jeg kunne rigtig godt tænke mig at banneret tilpassede sig de nederste boxe. Jeg har defineret en pixelbredde på banner, og de tre kasser, men også margin mellem de tre kasser. Kan man ikke gøre sådan at banneret selv fyldte ud til de yderste kanter på de små kasser, så man var fri for at sidde og tælle pixels?
mvh Mads
