• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

CSS width:**% Problem

milchkuh

milchkuh

New member
Hallo
Ich habe ein CSS Script geschrieben, welches sechs div container erzeugt. Die äusseren beiden nehmen 20% von der Breite ein. und die restlichen vier noch 15% von der Breite. Leider funzt das ned... aber das sollte es doch!!!

HTML: 
<!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>
<style type="text/css">
.box-side1 {
background-color:#00CCFF;
text-decoration:none;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
border: 0.5px solid;
margin-top:150px;
width:*;
height:15px;
float:left;
}
.box-links {
background-color:#00CCFF;
text-decoration:none;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
border: 0.5px solid;
margin-top:150px;
margin-left:0px;
width:15%;
height:15px;
float:left;
}
.box-side2 {
background-color:#00CCFF;
text-decoration:none;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
border: 0.5px solid;
margin-top:150px;
width:*;
height:15px;
float:right;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unbenanntes Dokument</title>
</head>

<body>
<div class="box-side1">1</div>
<div class="box-links">2</div>
<div class="box-links">3</div>
<div class="box-links">4</div>
<div class="box-links">5</div>
<div class="box-side2">6</div>
</body>
</html>


</head>

<body>
<div class="box-side1">1</div>
<div class="box-links">2</div>
<div class="box-links">3</div>
<div class="box-links">4</div>
<div class="box-links">5</div>
<div class="box-side2">6</div>
</body>
</html>
 
Warum float:right bei .box-side2 ?
Was sollen die * bewirken ?

.box-side2 {
background-color:#00CCFF;
text-decoration:none;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
border: 0.5px solid;
margin-top:150px;
width:*;
height:15px;
float:left;
}
 
Code: 
width:*;
Dann solltest Du aber auch die 20% reinschreiben.

Edit:
Ausserdem erzeugst Du mit dem Asterisk einen Einlesefehler bei Validations-Tools.
 
Zuletzt bearbeitet:
Ist klar...es werden eben auch die Rahmen mitgerechnet.
Es ist dann ergo 100% + 12 Pixel breit.
 
Probier's mal so:
Code: 
<?xml version="1.0" encoding="iso-8859-1"?>
<!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" xml:lang="de">
<head>
<title>Dokumenttitel</title>
<style type="text/css">
/*<![CDATA[*/
#rahmen{margin:0px auto;width:98%;}
.box-side1 {
background-color:#00CCFF;
text-decoration:none;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
border: 0.5px solid;
margin-top:150px;
width:19.5%;
height:15px;
float:left;
}
.box-links {
background-color:#00CCFF;
text-decoration:none;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
border: 0.5px solid;
margin-top:150px;
margin-left:0px;
width:15%;
height:15px;
float:left;
}
.box-side2 {
background-color:#00CCFF;
text-decoration:none;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
border: 0.5px solid;
margin-top:150px;
width:19.5%;
height:15px;
float:left;
}

/*]]>*/
</style>
</head>
<body>
<div id="rahmen">
<div class="box-side1">1</div>
<div class="box-links">2</div>
<div class="box-links">3</div>
<div class="box-links">4</div>
<div class="box-links">5</div>
<div class="box-side2">6</div>
</div>
</body>
</html>
Ist zwar suboptimal, aber vielleicht kannst Du was damit anfangen.
Am Besten wäre es ohne Rahmen.
Und dran denken: Halbe Pixel gibt es nicht...
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben