nicht angemeldet
Hallo Ihr,
endlich den Tabellen und Frames entsagt, möchte ich in HTML mit Css eine Seite schaffen, die in den gängigen Bildschirmauflösungen so proportional wie möglich aussieht. Mein Ideal: www.arcor.de.
Das Beispielscript habe ich mit der Firefox-Ansicht erstllt.. Der IE stellt es (natürlich) schon anders dar.
Meine Schwierigkeiten liegen in dem "springen" der Elemente bei div. Auflösungen. In diesem Fall das vertikale.
(Tipps gegen horizontales Springen werden auch gerne angenommen)
Beispiel: Die Abstände der Elemente sehen bei der Bildschirmeinstellung von 1024 x 768 wie gewünscht aus. Auf 1280 x 1024 habe ich einen unerwünscht großen Abstand, und bei 800 x 600 manch Mal schreckliche Überschneidungen.
In diesem Fall ist mein Problem die wechselnde Darstellung zwischen der Überschrift und der blauen Grafik.
Obwohl ich m. E. bei den anderen Feldern nichts anderes gemacht habe, behalten diese ihre Proportionen bei.
Was muss ich machen, damit damit das blaue Feld bei jeder gängingen Auflösung im gleichen Abstand z. B. an der Unterkante der Schrift ausgerichtet ist?
Ärgerlich ist auch der horizontale Versatz der unteren Felder im Internet Explorer. Habs mit padding (right und left...)
und margin:0; erfolglos probiert.
Wäre toll, wenn ihr mir helfen könntet.
Am besten, ihr erklärts für Dummies, dann verstehe ich es auch.
Cyberholli
Falls es jemand nachvollziehen möchte, hier kommt der Quelltext:
(wie ihr seht, habe ich (noch) weder spacing noch margins darin)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html>
<head>
<title>Abstandsänderung bei div Auflösungen</title>
<style type="text/css">
<!--
/* hier zur Übersichtlichkeit als eingebetteter style*/
#head
{
position:absolute;
/*border:solid 1px maroon;*/
background-color:#CDCDCD;
top:0%;
width:100%;
left:0%;
height:19%;
text-align:center;
}
#headtext
{
position:absolute;
border:solid 1px maroon;
top:2%;
width:auto;
left:27%;
height:auto;
text-align:center;
vertical-align:top;
}
#links
{
position:absolute;
background-color:#ffcc00;
top:19%;
width:18%;
left:0%;
height:81%;
text-align:center;
}
#show
{
position:absolute;
background-color:#ffcc99;
top:19%;
width:82%;
left:18%;
height:81%;
}
#grafikhead
{
position:absolute;
background-color:#0000ee;
top:50%;
width:46%;
height:50%;
left:27%
}
#grafikshow
{
position:absolute;
background-color:#558855;
top:19%;
width:30%;
height:40%;
left:27%
}
-->
</style>
</head>
<body>
<div id="head">
<h1>Irgendein horizontal mittiger Text</h1> <!--ALTERNATIV = headtext -->
<!--<div id="headtext"> <h1 style="line-height:100%;">Irgendein horizontal mittiger Text</h1>
</div>-->
<div id="grafikhead"> Grafik
</div>
</div>
<div id="links">div. Navibuttons...
</div>
<div id="show">
</div>
<div id="grafikshow"> ein an der obigen Grafik angepasstes Bild
</div>
<!-- Alternativ Versuch einer Tabelle im Head.
<table width="46%" align="center" border = 1>
<tr>
<td width="70" height="67"> </td>
<td><h1>Beliebige Überschrift</h1></td>
<td width="70" height="67"> </td>
</tr>
<td colspan=3 align="center">Hier wäre eine Grafik</td>
</tr>
</table> -->
</body>
</html>