tutorials.de Buch-Aktion 05/2012
ERLEDIGT
JA
ANTWORTEN
3
ZUGRIFFE
287
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
AUF DIESES THEMA
ANTWORTEN
  1. 09.12.11 22:46 #1
    delbor delbor ist offline Rookie
    Registriert seit
    Jun 2007
    Beiträge
    7
    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
     
    Zitieren Zitieren
  2. 10.12.11 10:34 #2
    CPoly CPoly ist offline Mitglied Weizenbier
    tutorials.de Premium-User
    Registriert seit
    Sep 2009
    Beiträge
    2.445
    Du hättest dir den Roman sparen können, in dem du einfach den Code postest, anstatt ihn mit Worten zu beschreiben
     
    Zitieren Zitieren
  3. 10.12.11 16:54 #3
    delbor delbor ist offline Rookie
    Registriert seit
    Jun 2007
    Beiträge
    7
    Hi CPoly

    OK:

    HTML-Code:
    <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 :
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

    #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
     
    Zitieren Zitieren
  4. 10.12.11 17:23 #4
    delbor delbor ist offline Rookie
    Registriert seit
    Jun 2007
    Beiträge
    7
    Hy CPoly

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


    Code :
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

    #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
     
    Zitieren Zitieren
« 2 Jquery versionen | letzte "äussere" DIV clonen »

Ähnliche Themen

  1. Div mittig ohne Abschnitt bei kleinen Bildschirmen?
    Von Catscrash im Forum CSS
    Antworten: 2
    Letzter Beitrag: 28.03.10, 20:47
  2. Led's an Bildschirmen und Router usw.
    Von yahuu33 im Forum Cinema 4D
    Antworten: 3
    Letzter Beitrag: 27.03.09, 10:18
  3. Desktop auf 2 Bildschirmen
    Von Kurt Cobain im Forum Microsoft Windows
    Antworten: 7
    Letzter Beitrag: 26.10.05, 00:31
  4. Bildschirmkoordinaten mit 2 Bildschirmen
    Von jokey2 im Forum VisualStudio & MFC
    Antworten: 2
    Letzter Beitrag: 13.04.05, 10:21
  5. Grafikkarten für 3D Anwendungen mit 2 Bildschirmen
    Von Razorhawk im Forum 3D Studio Max
    Antworten: 8
    Letzter Beitrag: 06.01.05, 13:53