✔ Anpassung Bildschirmgröße

Status
Nicht offen für weitere Antworten.
H

HeinerPyt

Erfahrenes Mitglied
Hallo,

wie bekomme ich es hin, das eine Seite mit CSS abhängig von der verwendeten Bildschirmgröße bzw. -auflösung komplett dargestellt wird. Habe moment eine dreispaltiges Layout mit folgenden Angaben

HTML: 
<div id ="spalte1" style="position: absolute; width: 200px; height: 400; top: 200px; left: 10px; padding 70px 10px 10px 10px">
<div id ="spalte2" style="position: absolute; width: 650px; height: 400; top: 200px; left: 300px; padding 70px 10px 10px 10px; overflow:auto;background-color:#F8DF9C">
<div id ="spalte3" style="position: absolute; width: 200px; height: 400; top: 200px; left: 1040px; padding 70px 10px 10px 10px">

Natürlich sind die >/Div> Tags und was sonst noch dazu gehört auch da. Aber auf einem Laptopwird nur ein teil des layoutds dargestellt. Auf meinem 19-zöller ist alles zu sehen :)

mfg
Heiner
 
Hi,

durch die absolute Positionierung der einzelnen Elemente und die fixe Breitenangabe für die mittlere Spalte lässt sich das Layout nicht an die Bildschirmgröße anpassen.

Versuch es stattdessen mal mit einer "Fließumgebung":

Code: 
#spalte1 {
float: left;
width: 180px;
height: 320px;
padding: 70px 10px 10px 10px;
}

#spalte2 {
height: 320px;
padding: 70px 10px 10px 10px;
overflow: auto;
background-color:#F8DF9C;
}

#spalte3 {
float: right;
width: 180px;
height: 320px;
padding: 70px 10px 10px 10px;
}
Code: 
<body>
    <div id="spalte1">spalte 1</div>
    <div id="spalte3">spalte 3</div>
    <div id="spalte2">spalte 2</div>
</body>
 
Hallo!
Um die Seite mittels CSS immer komplett anzuzeigen gibt es meines Wissens nur die Möglichkeit die Größenangaben relativ anzugeben.
mfg flo
 
Hi,

Code: 
#spalte1 {
float: left;
width: 180px;
height: 320px;
padding: 70px 10px 10px 10px;
}

#spalte2 {
height: 320px;
padding: 70px 10px 10px 10px;
overflow: auto;
background-color:#F8DF9C;
}

#spalte3 {
float: right;
width: 180px;
height: 320px;
padding: 70px 10px 10px 10px;
}
Code: 
<body>
    <div id="spalte1">spalte 1</div>
    <div id="spalte3">spalte 3</div>
    <div id="spalte2">spalte 2</div>
</body>
Zum Vergrößern anklicken....

das sihet ja schon mal nicht schlecht aus. Wenn ich aber nun sagen wir in Spalte1 an einer bestimmten Stelle ein Bild plazieren will, wie geb ich das dann an?
Momentan sind alle Bilder oben am Bildschirm zusammen geschben.

mfg
Heiner
 
Beispielsweise so:

Code: 
#spalte1 {
float: left;
width: 180px;
height: 320px;
padding: 70px 10px 10px 10px;
position: relative;
}

#spalte1 img#position_1 {
position: absolute;
left: 20px;
top: 100px;
}
Code: 
<div id="spalte1">spalte 1<img id="position_1" src="..."></div>
<div id="spalte3">spalte 3</div>
<div id="spalte2">spalte 2</div>
 
Hallo,

das funktioniert bis jetzt alles sehr gut. Dafür erst mal danke. jetzt boch zwei Fragen:

1. wie kann ich die Spalten von oben her entsprechend positionieren? Also auch so das sich das ganze an die bildschirmgöße anpasst (float top?) Wenn ja einfach noch mit in die Klammern schreiben?

2. Bilder positionieren ist okay. Wie siht es mit text aus. Welches tag verwende ich da.?

Schönen Sonntag

Heiner
 
Hi,

sollen sich die drei Spalten vom oberen bis unteren Bildschirmrand erstrecken, oder soll das Layout unabhängig von der Bildschirm- / Fenstergröße in der Vertikalen zentriert werden?

Zum Auszeichnen von Text gibt es, je nach Semantik, unterschiedliche HTML-Tags. Eine Übersicht findest du bei SELFHTML: Elemente zur Textstrukturierung
 
Hi,

die Spalten sollen an einer bestimmten Position von oben beginnen und sich eine bestimmte größe nach unten erstrecken. Aber nicht von ganz oben is ganz unten, da oben über die ganze Bildschirmbreite noch eine einzelen Spalte leigt, genauso wie unten. Also layout wie folgt.

Kopfspalte (ganze Breite bestimmte Höhe)
3 Spaltiges layout (jede Spalte bestimmte breite und Höhe)
Fußspalte (ganze Breite bestimmte Höhe)


mfg
Heiner
 
Stellst du dir das dann so vor?

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="author" content="michaelsinterface">
<title></title>

<style type="text/css">
<!--
html, body {
margin: 0;
padding: 0;
}

#wrapper {
position: absolute;
top: 100px;
left: 0;
width: 100%;
height: 500px;
}

#header, #footer {
height: 50px;
background: #cacaca;
}

#spalte1 {
float: left;
width: 180px;
height: 320px;
margin-right: 0 !important;
margin-right: -3px;
padding: 70px 10px 10px 10px;
}

#spalte2 {
height: 320px;
overflow:auto;
margin: 0 0 !important;
margin 0 -3px;
padding: 70px 10px 10px 10px;
background-color:#F8DF9C;
}

#spalte3 {
float: right;
width: 180px;
height: 320px;
margin-left: 0 !important;
margin-left: -3px;
padding: 70px 10px 10px 10px;
}
-->
</style>

</head>
<body>

<div id="wrapper">
     <div id="header">header</div>
     <div id="spalte1">spalte 1</div>
     <div id="spalte3">spalte 3</div>
     <div id="spalte2">spalte 2</div>
     <div id="footer">footer</div>
</div>

</body>
</html>
 
Hi,

genauso soll es aussehen. Nun muß ich nur noch die Spalten in der richtigen Höhe auf den Bildschirm bekommen, oder machen die das automatsich ausgerichtet ncah dem header?


mfg
heiner
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück