tutorials.de Buch-Aktion 05/2012
ERLEDIGT
JA
ANTWORTEN
7
ZUGRIFFE
941
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
AUF DIESES THEMA
ANTWORTEN
  1. 25.04.09 12:16 #1
    Avatar von ZodiacXP
    ZodiacXP ZodiacXP ist offline
    Registriert seit
    Mar 2004
    Beiträge
    1.854
    Blog-Einträge
    2
    Das "normale" 3-Spalten-Layout (http://www.tutorials.de/forum/css-tu...i-spalten.html) mit
    HTML-Code:
    <div id="leftCol">leftCol</div>
     <div id="rightCol">rightCol</div>
     <div id="centerCol">centerCol</div>
    Möchte ich umändern in (was in diesem Beitrag auch verwendet wird für das folgende CSS)
    HTML-Code:
    <div id="leftCol">leftCol</div>
     <div id="centerCol">centerCol</div>
     <div id="rightCol">rightCol</div>
    Oder sogar (was optimal wäre)
    HTML-Code:
         <div id="centerCol">centerCol</div>
     <div id="leftCol">leftCol</div>
     <div id="rightCol">rightCol</div>
    Dazu habe ich es zum folgenden geändert:
    Code css:
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

    div#leftCol {
    float: left; 
    width: 20%;
}
 
div#rightCol {
    margin: 0 0 0 80%;
    width: 20%;
}
 
div#centerCol {
    float:left;
    position: relative;
    min-height: 100%;
    height: auto !important;
    height: 100%;
    background-color: #fff;
    margin: 0 20%;
    width: 60%;
    border-left: 0.17em solid #adf;
    border-right: 0.17em solid #adf;
}

    Problem ist, dass der rechte div rechts unter centerCol gepackt wird.
    Wie zwinge ich es nach oben auf die Seite?

    EDIT: OMG ich Nuss! Das margin beim centerCol war noch auf beiden Seiten.
    Hier kann man keine unbeantwortete Themen löschen
    Geändert von ZodiacXP (25.04.09 um 12:21 Uhr)
     
    Gebe keine Hilfe per PN, Mail, Instant Messenger etc.
    und keine Copy&Paste-Lösungen - ein bisschen selbst nachdenken sollte drin sein. Konstruktivismus 4tw!

    MfG, Zod

    __________________
    rpd Framework: Rapid Web-Engineering in PHP (Manual | Google Code)
    Zitieren Zitieren
  2. 25.04.09 12:19 #2
    Maik Tutorials.de Gastzugang
    Moin,

    indem die width:20%-Deklaration für #rightCol entfernt wird - die Breite für diesen Spaltenblock ergibt sich automatisch durch seinen linken Außenabstand.

    Desweiteren solltest du die Rahmendeklaration der mittleren Spalte besser an ein Nachfolgeelement übergeben, da diese gemäß dem CSS-Boxmodell zur width:60%-Deklaration hinzuaddiert wird, und folglich die Boxenbreite >60% beträgt.

    mfg Maik
     
    Zitieren Zitieren
  3. 25.04.09 12:23 #3
    Avatar von ZodiacXP
    ZodiacXP ZodiacXP ist offline
    Registriert seit
    Mar 2004
    Beiträge
    1.854
    Blog-Einträge
    2
    Hab beim Posten gesehen das margin für centerBox links und rechts war. Sorry.
    Stimmt allerdings, das width bei dem rechten nehm' ich auch raus. Dangö
     
    Gebe keine Hilfe per PN, Mail, Instant Messenger etc.
    und keine Copy&Paste-Lösungen - ein bisschen selbst nachdenken sollte drin sein. Konstruktivismus 4tw!

    MfG, Zod

    __________________
    rpd Framework: Rapid Web-Engineering in PHP (Manual | Google Code)
    Zitieren Zitieren
  4. 25.04.09 12:33 #4
    Maik Tutorials.de Gastzugang
    ist "ein wenig" perfekter, weil browserübergreifend kompatibel in der Darstellung, was man von deinem CSS-Code nicht behaupten kann

    mfg Maik
     
    Zitieren Zitieren
  5. 25.04.09 14:34 #5
    Avatar von ZodiacXP
    ZodiacXP ZodiacXP ist offline
    Registriert seit
    Mar 2004
    Beiträge
    1.854
    Blog-Einträge
    2
    Habe es nochmal überarbeitet und nun sollte es besser sein:
    HTML-Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" type="text/css" href="start.css">
<title>Title</title>
</head>
<body>
	
	<div id="wrapper" class="clearfix">
		<div id="centerCol">
			centerCol
			<div id="footer">footer</div>
		</div>
	</div>
	<div id="leftCol">leftCol</div>
	<div id="rightCol">rightCol</div>
	

</body>
</html>
    Code css:
    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
59

    * {
    margin: 0;
    padding: 0;
}
 
html, body {
    height: 100%;
}
 
div#wrapper {
    float: left;
    position: relative;
    margin: 0 auto;
    width: 100%;
    min-height: 100%;
    height: auto !important;
    height: 100%;
}
 
div#leftCol {
    float:left;
    width:20%;
    margin-left:-100%;
}
 
div#rightCol {
    float:left;
    width:20%;
    margin-left:-20%;
}
 
div#centerCol {
    margin: 0 20%;
}
 
div#footer {
    clear: both;
    position: absolute;
    bottom: 0;
    width: 60%;
    height: 20px;
    background: #fff;
}
 
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    font-size: 0;
    clear: both;
    visibility: hidden;
}
 
.clearfix {display: inline-block;}
 
/* MacIE \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* end */

    Wenn noch was stört bitte bescheid sagen.
    Ansonsten war's das ^ ^ Danke!
     
    Gebe keine Hilfe per PN, Mail, Instant Messenger etc.
    und keine Copy&Paste-Lösungen - ein bisschen selbst nachdenken sollte drin sein. Konstruktivismus 4tw!

    MfG, Zod

    __________________
    rpd Framework: Rapid Web-Engineering in PHP (Manual | Google Code)
    Zitieren Zitieren
  6. 25.04.09 14:41 #6
    Maik Tutorials.de Gastzugang
    Zitat Zitat von ZodiacXP Beitrag anzeigen
    Habe es nochmal überarbeitet und nun sollte es besser sein:
    In der Schule würdest du jetzt eine "6" wegen Abschreibens kassieren

    mfg Maik
     
    Zitieren Zitieren
  7. 25.04.09 15:12 #7
    Avatar von ZodiacXP
    ZodiacXP ZodiacXP ist offline
    Registriert seit
    Mar 2004
    Beiträge
    1.854
    Blog-Einträge
    2
    Niemals Bei mir is sowas Transferaufgabe und gibt 1 :P War vorhin auch halbwegs abgeschrieben.
    Mit überarbeitet meinte ich, dass
    http://www.tutorials.de/forum/css-tu...100-hoehe.html
    (von vorhin) und
    http://blog.html.it/layoutgala/LayoutGala01.html
    zusammengeführt wurde, nur mal sauberer als im letzten CSS-Code.

    Hab ich das vorhin richtig verstanden?
    Den Rahmen an Nachfolgeelement übergeben:
    HTML-Code:
    		<div id="centerCol">
			<div style="border: 2px solid #ace;">centerCol</div>
			<div id="footer">footer</div>
		</div>
    Da hab ich ein Problem mit, dass der Rahmen nicht bis nach unten reicht und komm auch mit keinem height, min-height etc. hinterher
     
    Gebe keine Hilfe per PN, Mail, Instant Messenger etc.
    und keine Copy&Paste-Lösungen - ein bisschen selbst nachdenken sollte drin sein. Konstruktivismus 4tw!

    MfG, Zod

    __________________
    rpd Framework: Rapid Web-Engineering in PHP (Manual | Google Code)
    Zitieren Zitieren
  8. 25.04.09 15:24 #8
    Maik Tutorials.de Gastzugang
    Jaja, red dir deine Leistung nur schön

    Zum Rahmen: Das Höhenproblem hast du aber ebenfalls, wenn du den Rahmen direkt für #centerCol deklarierst, denn nur die Mutterbox #wrapper besitzt im Viewport eine "tatsächliche" Höhe von 100% - die Höhe der Spaltenblöcke ergibt sich wiederum aber erst durch ihren Inhalt.

    mfg Maik
     
    Zitieren Zitieren
« css: height 90% | position:relative oder float »

Ähnliche Themen

  1. "HashSet" in eine definierte Reihenfolge bringen
    Von karl_soost im Forum Algorithmen & Datenstrukturen mit Java
    Antworten: 4
    Letzter Beitrag: 14.05.09, 12:11
  2. "Normales" Datumsformat aus Date-Objekt
    Von body-mg im Forum Java
    Antworten: 3
    Letzter Beitrag: 03.12.08, 13:40
  3. Bilder vom cgi-bin in ein "normales" Verzeichnis verschieben
    Von Perl-Neuling im Forum CGI, Perl, Python, Ruby, Power Shell
    Antworten: 1
    Letzter Beitrag: 09.10.08, 10:18
  4. Layer Reihenfolge unabhängig von "Z-Index"
    Von LuvShining im Forum CSS
    Antworten: 3
    Letzter Beitrag: 11.10.06, 12:52
  5. Apple vs "normales Laptop"
    Von renard im Forum Hardware
    Antworten: 19
    Letzter Beitrag: 22.09.05, 22:46