Huhu,
ich habe ein kleines Problem was mir erst viel zu spät aufgefallen ist.
Ich erstelle gerade für mein Schulprojekt ein Homepage Design (Im tabellendesign ist es fertig). Jetzt habe ich das als Div design nachgebaut (dachte auch es währ fertig) aber dann hab ich als ich inhalt eingefüght habe gemerkt, dass sich der Rand (sind Spans) nicht mit vergrößert.
Beim Tabellendesign geht doch die äußere Tabelle mit der Inneren mit. Also von der höhe.
Ich möchte das sich meine Seite je nach inhalt an die gewünschte größe anpasst.
Code der Seite:
Code der CSS
Grüße Joshua Dietl
ich habe ein kleines Problem was mir erst viel zu spät aufgefallen ist.
Ich erstelle gerade für mein Schulprojekt ein Homepage Design (Im tabellendesign ist es fertig). Jetzt habe ich das als Div design nachgebaut (dachte auch es währ fertig) aber dann hab ich als ich inhalt eingefüght habe gemerkt, dass sich der Rand (sind Spans) nicht mit vergrößert.
Beim Tabellendesign geht doch die äußere Tabelle mit der Inneren mit. Also von der höhe.
Ich möchte das sich meine Seite je nach inhalt an die gewünschte größe anpasst.
Code der Seite:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>titel</title>
<link rel="stylesheet" href="style2.css" type="text/css" media="screen">
</head>
<body>
<div id="logo"><img src="images/logo.png" alt="" border="0"></div>
<div id="swirls"><img src="images/swirls.png" alt="" border="0"></div>
<div id="container">
<div id="quicknavi" style="width:766px; text-align:center; margin-left:auto; margin-right:auto;">
<span class="r_o_links"> </span>
<span class="r_o_mitte">
<br>test
<span class="button">Forum</span>
<span class="button">Legion</span>
<span class="button">Aktuelles</span>
<span class="button">Galerie</span>
<span class="button">Downloads</span>
</span>
<span class="r_o_rechts"> </span>
</div>
<div style="width:766px; text-align:center; margin-left:auto; margin-right:auto;">
<span class="r_m_links"> </span>
<span class="r_m_hg">testuser<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>hehe<br><br><br><br>ja</span>
<span class="r_m_rechts"> </span>
</div>
<div style="width:766px; text-align:center; margin-left:auto; margin-right:auto;">
<span class="r_u_links"> </span>
<span class="r_u_mitte"> </span>
<span class="r_u_rechts"> </span>
</div>
</div>
</body>
</html>Code der CSS
Code:
/* Rahmen der Seite und Hintergrund Oben */
* /*Setzt die Angaben bei den verschiedenen Browsern auf 0 damit man ein einheitliches Design erstellen kann */ {
padding: 0;
margin: 0;
}
#container {
position:relative;
z-index:90;
width:780px;
margin:0 auto;
}
body /* Hier wird der Seitenhintergrund und die Schrift definiert */ {
color: #000000;
font-size: 12px;
background-color: #5b7e94;
/* background-attachment:fixed;*/
background-image:url(images/bg_hp.jpg);
background-position:center top;
font-family:Arial, Helvetica, sans-serif;
padding:0px;
margin: 0px;
margin-top: 0px;
margin-bottom: 0px;height:100%;
}
#body {
margin-left: auto;
margin-right: auto;
}
/* Navigation oben */
#quicknavi {
padding-top:155px;
}
#logo /* Mein Aion Logo */ {
position:absolute;
top: 0px;
left: 50%;
height: 269px;
width: 874px;
margin-left: -437px;
}
.button /* Standard*/ {
padding-top:5px;
background-image:url(images/button_normal.png);
background-repeat: no-repeat;
width: 121px;
height: 26px;
text-align:center;
list-style: none;
float:left;
margin-right:20px;
}
.button:hover /* Bei Mouseover */ {
background-image:url(images/button_hover.png);
background-repeat: no-repeat;
width: 121px;
height: 26px;
margin-right:20px;
}
.r_u_links {
float:left;
width: 13px;
height: 71px;
background-image: url(images/ramen/ramen_unten_links.png);
background-repeat: no-repeat;
}
.r_u_mitte {
float:left;
width: 741px;
height: 71px;
text-align: center;
background-image: url(images/ramen/ramen_unten_mitte.png);
background-repeat: repeat-x;
color:#666666;
}
.r_u_rechts {
float:left;
width: 12px;
height: 71px;
background-image: url(images/ramen/ramen_unten_rechts.png);
background-repeat: no-repeat;
}
.r_o_links {
float:left;
width: 13px;
height: 72px;
background-image: url(images/ramen/ramen_oben_links.png);
background-repeat: no-repeat;
}
.r_o_mitte {
float:left;
text-align:center;
width: 741px;
height: 72px;
background-image: url(images/ramen/ramen_oben_mitte.png);
background-repeat: repeat-x;
}
.r_o_rechts {
text-align:center;
float:left;
width: 12px;
height: 72px;
background-image: url(images/ramen/ramen_oben_rechts.png);
background-repeat: no-repeat;
}
.r_m_links {
float:left;
width: 13px;
height:inherit;
background-image: url(images/ramen/ramen_mitte_links.png);
background-repeat: repeat-y;
padding:0px;
margin: 0px;
}
.r_m_hg {
float:left;
width: 741px;
background-image: url(images/ramen/ramen_hg.png);
background-repeat:repeat;
}
.r_m_rechts {
float:left;
width: 12px;
background-repeat: repeat-y;
background:url(images/ramen/ramen_mitte_rechts.png);
padding:0px;
margin: 0px;
margin-top: 0px;
margin-bottom: 0px;
margin-left: auto;
margin-right: auto
min-height:100%;
max-height:100%;
}
#swirls /* Aus(ss)ere Verzierung */ {
position:absolute;
top: 250px;
left: 50%;
height: 234px;
width: 1089px;
margin-left: -575px;
}Grüße Joshua Dietl
