✔ Layoutproblem auf kleinen Bildschirmen?

D

delbor

Grünschnabel
Hi zusammen

In Sachen JavaScript/CSS/HTML bin ich eigentlich völlig Neueinsteiger - 'eigentlich' deshalb, weil ich einige Programmiererfahrung in Objectpascal habe.
Nun habe ich angefangen, HTML-Vorlagen zu erstellen, die anschliessend in Typo3 eingebunden werden sollen.
Für diese Vorlagen habe ich per CSS 2 Layouts erstellt mit jeweils einem Header (für die 'Home'-Seite mit grösserer Höhe) und drei Spalten. In der Mittleren habe ich zu testzwecken einige Images eingefügt - diese Seite(n) werden Teil einer Galerie sein.

Alle Spalten sind absolute positioniert, wobei die Breitenmasse jeweils in Prozenten definiert sind, damit die Verhältnisse auch auf kleineren Bildschirmen erhalten bleiben.
Die Masse der eingefügten Images orientieren sich an den Pixelgrössen der enthaltenen jpegs. (150x101), auch in Pixeln. Margin-left hingegen ist jeweils ein Prozentwert.
Um das Verhalten bei kleinerem Browser-Fenster zu testen, ist meien einzige Möglichkeit, dieses zu verkleinern.
Das nicht wirklich reale Resultat ist: die Images bewegen sich auf den linken Fensterrand zu, bis sie sich schliesslich bei genügend kleinem Browserfenster überlappen.

Ich geh mal davon aus, dass es heutzutage wieder vermehrt Bildschirme mit einer Auflösung von 800x600px gibt - auf kleineren Notesbooks. Auf Netbooks dürfte das nochmal anders aussehen.
Ich bin offen für jede Idee, wie sich diese Problem lösen lässt und bedanke mich dafür schon mal.

Gruss
Delbor
 
Du hättest dir den Roman sparen können, in dem du einfach den Code postest, anstatt ihn mit Worten zu beschreiben ;-)
 
Hi CPoly

OK:

HTML: 
<html>
  <head>
	<title>Auf romantischer Spur</title>
    <link rel="stylesheet" type="text/css" href="RomantischeSpur1.css" />
  </head>

  <body>
	<div id="header">&nbsp;,&nbsp;
		<div id="menue">&nbsp;,&nbsp;
			<ul>
			<li><a href="./DelborHome.htm" class="topmenue">Home</a>
			<li><a href="./Winterzauber.htm" class="topmenue">Winterzauber</a>
			<li><a href="./Ländliche Impressionen.htm" class="topmenue">Ländliche Impressionen</a></li>
			<li><a href="./Burgen und Schlösser.htm" class="topmenue">Burgen und Schlösser</a></li>
			<li><a href="./AufromantischerSpur1.htm" class="topmenue">Auf romantischerSpur1</a></li>
			 </ul>
			 <br>    
		</div>       
	</div>

	<div id="Leftcol">

	</div>

	<div id="Rightcol">
	</div>


	<div id="content">
		<div id="img1">&nbsp;<img alt="DelborPunktCH" src="./Images/jpeg150/DSC_5751.jpg" /></div>
		<div id="img2">&nbsp;<img alt="DelborPunktCH" src="./Images/jpeg150/DSC_5752.jpg" /></div>
		<div id="img3">&nbsp;<img alt="DelborPunktCH" src="./Images/jpeg150/DSC_5753.jpg" /></div>
		<div id="img4">&nbsp;<img alt="DelborPunktCH" src="./Images/jpeg150/DSC_5754.jpg" /></div>
		<div id="img5">&nbsp;<img alt="DelborPunktCH" src="./Images/jpeg150/DSC_5755.jpg" /></div>
	</div>

	<div id="Footer">
	</div>
	   <!--	-->


  </body>
</html>

Und in der CSS-Datei, der Länge wegen nur stellvertretend die CSS-Definition für 2 Bilder:
Code: 
#img1 {
    position:absolute;
    margin-left: 10%;
    margin-right:0%;
    margin-top: 30px;
    margin-bottom:15px;
    padding-top: 0px;
    padding-left:0px;
    padding-right:0px;
    <!--border-style:none;
    border-width:1px;
    border-color: red;-->
    with: 18%;
    height:150px;
    align: center;
    float: left;
    }

#img2 {
    position:absolute;
    margin-left: 30%;
    margin-right:0px;
    margin-top: 30px;
    margin-bottom:15px;
    padding-top: 23px;
    padding-left:0px;
    padding-right:0px;
    border-style:none;
    border-width:1px;
    border-color: red;
    with: 18%;
    height:150px;         
    align: center;
    float: left;
    }

In der Zwischenzeit bin ich auch noch auf sogenannnte ?Definitionslisten' gestossen. Die Dinger könnten mein Problem wohl recht elegant lösen: Wird ein Fenster verkleinert, verschiebt sich das letzte Bild einer Reihe bei Platzmangel in die nächste Zeile - etwa so, wie grosse Symbole im Explorer. Leider gibt's das erst ab CSS3...

Gruss
Delbor
 
Hy CPoly

Möglicherweise sind die Definitionen der Spalten auch noch von Interesse:


Code: 
#Leftcol {
    float: left;
    position:absolute;
    margin-top:0px;
    margin-left: 0 auto;
	padding: 2px;
    border-left:none;
    border-right:none;
    border-bottom:none;
    border-top: solid 1px blue;

    width : 15%;
    height: 1200px;
	background-color: $00FAA80C;
}
#content {
    float: left;
    position:absolute;

    height:1200px;
    margin-top:0px;
    margin-left: 15%;
    padding: 0px;
    width: 70%;

    border-style:solid;
    border-width:1px;
    border-color: red;

    border-left:none;
    border-right:none;
    border-bottom:none;
    border-top: solid 1px blue;         <!--#000000FE;#0000FF80 $00FFFCC1 Yellow-->

	min-height:600px;
	background-color: Silver;
    overflow: auto;
}
#Rightcol {
    position:absolute;
	margin-left:85%;
    margin-top:0px;
	padding: 2px;

    border-style:solid;
    border-width:1px;
    border-color: red;

    border-left:none;
    border-right:none;
    border-bottom:none;
    border-top: solid 1px blue;

    background-color: $00FAA80C;
    width : 15%;
    height: 1200px;
    clear:left;
}

Gruss
Delbor
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück