nicht angemeldet
Verschiedene Abstände bei div. Auflösungen
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>
-
hi,
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.
du positionierst ziemlich viel absolut.
unterlasse das, und arbeite stattdessen mit float und co.absolute positionierung sollte man nur dann anwenden, wenn man sie komplett verstanden hat, und auch ihre nachteile kennt.
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
Hallo wahsage,
danke für die Antwort.
Werds mir zu Herzen nehmen und mich eingehend mit der Positionierung befassen.
Gruß Cyberholli
-
-
Hallo.
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.Der war gut!
Die Seite ist doch vor allem eins: Überladen.
Außerdem sieht sie sehr stark nach "optimiert für 1024x768 Pixel"
aus, denn bei meiner 1600x1200 Auflösung ist alles etwas klein, vor
allem die Schrift. Hier sollte man als erstes anfangen, die vom
Browser eingestellte Größe zu nutzen. Bei Breitenangaben kann man
auch auf absolute (Pixel) Angaben verzichten, indem man als Einheit
em und ex verwendet.Ach so:
Die Aussage, dass nur 0.1% aller WWW-Nutzer solch hohe Auflösungen
fahren ist ein Nullargument.Gruß
L00NIX-
Hallo loonix,
Arcor war auch nur eine Beispiel für gleichbleibende Proportionen, unabhängig von der Gestaltung.
Von dem "optimiert für 1240 x 768" will ich ja gerade wegkommen.
Gruß
Cyberholli-
Hallo.
Arcor war auch nur eine Beispiel für gleichbleibende Proportionen,
unabhängig von der Gestaltung.Von dem "optimiert für 1240 x 768" will ich ja gerade wegkommen.
Dann war das in deinem ersten Absatz missverständlich.
Gruß
L00NIX
-
-