Markup (HTML, XML, etc.) und CSS - Forum

Derzeit sind Sie als Gast in unserem Forum aktiv. Für das Schreiben registrieren Sie sich bitte. Unser Forum ist eine Austauschplattform für Webworker zum Kommunizieren, Helfen, Informieren und Hilfe finden. Auf der rechten Seiten finden Sie eine Forenübersicht über alle Bereiche des Webmaster-Forums. Unterhalb finden Sie alle aktuellen Themen.

In diesem Forum sollen begleitend zu unserem CSS Portal und HTML-Bereich konkrete Fragen zu HTML und CSS diskutiert werden. Bitte immer die Suchfunktion nutzen bevor du eine Frage stellst.

Antworten Neues Thema

Tobias Müller
Beiträge: 7

PN schreiben
Profil ansehen
User ist offline

Anfänger Frage zum anordnen von DIVs (floaten)

Link zur Antwort auf "Anfänger Frage zum anordnen von DIVs (floaten)" von Tobias Müller Tobias Müller, am Sonntag den 07.02.2010 um 13:04:00

Guten Morgen zusammen,

habe mich gerade daran gesetzt ein kleines Layout für mein Blog zuentwickeln. Es ist zwar nicht das erste, aber zuvor habe ich wohl die Sache mit dem Anordnen von DIV-Blöcken nicht so richtig verstanden.

Aktuell möchte ich links und rechts eine Spalte haben. Die habe ich links und rechts genannt und mit float left bzw. float right angeordnet und vorher als display block definiert.

Zwischen diesen beiden "Spalten" soll das einmal ein Menü sein (div menue), darunter ein DIV in dem der Titel der Seite ist (DIV oben). Dann soll der Hauptteil der Seite kommen, den ich mitte genannt habe. Zum Abschluss soll dann noch ein div kommen, welches ich mit clear both unter allen Bereichen angeordnet habe.

Die Inhalt meiner Seite werden durch ein Blog-System erstellt. Jenes hat auch eine GallerieFunktion die ich für meine Bilder nutze. Dort kann man über einen Shortcode angeben, wie viele Bilder nebeneinander angezeigt werden sollen. Am Ende dieser "Zeile" ist dann wieder eine clear both Anweisung.

Bis lang hatte ich den Fehler, dass die Bilder dann erst am Ende der Spalten angezeigt werden, was man unter anderem in meinem aktiven Blog sehen kann. Bei dem Layout für meine "Jugendgruppe" gab es dieses Problem auch, was dadurch gelöst wurde, dass ich auch den mittleren Bereich gefloatet habe, was man hier sehen kann.

Wie gehe ich nun richtig vor, wenn ich zwei Spalten außen haben möchte, zwischen ihnen zwei Bereiche (Menü und Titel), dann den "Hauptinhalt" der dann aber auch aus dem Bereich herrausgeht (also auch unter den Spalten zu lesen ist) und unter allem dann wieder ein Bereich für die abschließenden Angaben.

Mein Versuch schaut so aus:

 
HTML
 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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
* {
    margin:0;
    padding:0;
}

body {
    margin:0; 
    padding:0;
    background-color:#FFFFFF;
    color:#000000;
    font-family: Calibri, "Sans Serif", "Century Gothic";
    overflow:auto;
}

#oben {
    display:block;
    margin:0em 21% 1em 21%;
    height:3em;
    border:1px solid darkblue;
}

#menue {
    display:block;
    margin:0em 21% 1em 21%;
    height:3em;
    border:1px solid darkgreen;
}

#links {
    display:block;
    float:left;
    width:20%;
    /*margin:0em 2.5% 0em 0em;*/
    margin:0em;
    padding:0.25em;
    background-color:#FFFFFF;
    border:1px solid darkred;
}

#rechts {
    display:block;
    float:right;
    /*margin:0em 0em 0em 2.5%;*/
    margin:0em;
    padding:0.25em;
    width:20%;
    background-color:#FFFFFF;
    border:1px solid darkred;
}

#mitte {
    display:block;
    margin:0;
    padding:0;
    border: 1px solid darkorange;
}

#unten {
    clear: both;
    margin:1em 0em 0em 0em;
    padding:0.25em;;
    text-align:center;
    border:1px solid darkblue;
}

.box { border:none; margin:0.25em 0em 0.25em 0em; }

.inhalt1 {margin:0em; padding:0.5em;}

/* Rundungen */
.ol { background:url(Bilder/rundungen/01/ol.png) top left no-repeat; }
.or { background:url(Bilder/rundungen/01/or.png) top right no-repeat; }
.ul { background:url(Bilder/rundungen/01/ul.png) bottom left no-repeat; }
.ur { background:url(Bilder/rundungen/01/ur.png) bottom right no-repeat; }
.om { background:url(Bilder/rundungen/01/om.png) top center repeat-x }
.um { background:url(Bilder/rundungen/01/um.png) bottom center repeat-x }
.ml { background:url(Bilder/rundungen/01/ml.png) top left repeat-y }
.mr { background:url(Bilder/rundungen/01/mr.png) top right repeat-y }

Der HTML-Aufbau schaut so aus:

 
HTML
 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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Noch ein Layout</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="rechts">
    <div class="box">
        <div class="om"><div class="um"><div class="ml"><div class="mr"><div class="ol"><div class="or"><div class="ul"><div class="ur">
            <div class="inhalt1"><strong>Rechts</strong>
                <p>Ein Absatz...</p>
                <p>Ein Absatz...</p>
                <p>Ein Absatz...</p>
                <p>Ein Absatz...</p>
                <p>Ein Absatz...</p>
                <p>Ein Absatz...</p>
            </div>
        </div></div></div></div></div></div></div></div>
    </div>
</div>
<div id="links">
    <div class="box">
        <div class="om"><div class="um"><div class="ml"><div class="mr"><div class="ol"><div class="or"><div class="ul"><div class="ur">
            <div class="inhalt1"><strong>erste Box</strong>
                <p>Ein Absatz...</p>
            </div>
        </div></div></div></div></div></div></div></div>
    </div>
    <div class="box">
        <div class="om"><div class="um"><div class="ml"><div class="mr"><div class="ol"><div class="or"><div class="ul"><div class="ur">
            <div class="inhalt1"><strong>zweite Box</strong>
                <p>Ein Absatz...</p>
            </div>
        </div></div></div></div></div></div></div></div>
    </div>
    <div class="box">
        <div class="om"><div class="um"><div class="ml"><div class="mr"><div class="ol"><div class="or"><div class="ul"><div class="ur">
            <div class="inhalt1"><strong>dritte Box</strong>
                <p>Ein Absatz...</p>
            </div>
        </div></div></div></div></div></div></div></div>
    </div>
    <div class="box">
        <div class="om"><div class="um"><div class="ml"><div class="mr"><div class="ol"><div class="or"><div class="ul"><div class="ur">
            <div class="inhalt1"><strong>vierte Box</strong>
                <p>Ein Absatz...</p>
            </div>
        </div></div></div></div></div></div></div></div>
    </div>
    <div class="box">
        <div class="om"><div class="um"><div class="ml"><div class="mr"><div class="ol"><div class="or"><div class="ul"><div class="ur">
            <div class="inhalt1"><strong>f&uuml;nfte Box</strong>
                <p>Ein Absatz...</p>
            </div>
        </div></div></div></div></div></div></div></div>
    </div>
    <div class="box">
        <div class="om"><div class="um"><div class="ml"><div class="mr"><div class="ol"><div class="or"><div class="ul"><div class="ur">
            <div class="inhalt1"><strong>sechste Box</strong>
                <p>Ein Absatz...</p>
            </div>
        </div></div></div></div></div></div></div></div>
    </div>
</div>
<div id="menue">
    <div class="om"><div class="um"><div class="ml"><div class="mr"><div class="ol"><div class="or"><div class="ul"><div class="ur">
        <div class="inhalt1">Menue</div>
    </div></div></div></div></div></div></div></div>
</div>
<div id="oben">
    <h1>Titel der Webseite</h1>
    <p>kurze Beschreibung der Seite</p></div>
<div id="mitte">Mitte<p>mehrere Abs&auml;tze...</p></div>
<div id="unten">
    <div class="om"><div class="um"><div class="ml"><div class="mr"><div class="ol"><div class="or"><div class="ul"><div class="ur">
        <div class="inhalt1">Unten</div>
    </div></div></div></div></div></div></div></div>
</div>
</body>
</html>

Um das ganze zu begutachten habe ich es natürlich auch hochgeladen. Problem ist aktuell, dass die beiden oberen Bereiche (Menü und oben) nicht wirklich zwischen den zwei Spalten sind. Zwar wird der Inhalt jener zwischen den Spalten angezeigt, aber eben nicht die Außenränder.

Nun kann man mit margin ja die Außenabstände angeben, welches ich auch getan habe um dieses Problem zu lösen. Den Abstand habe ich Breite der Spalte + 1% gegeben.

Testen kann ich das ganze nur mit dem Firefox, Opera, google Chrome und dem aktuellen Internet Explorer. Angezeigt wird dort alles richtig und auch die Validatoren des W3C geben (mit Ausnahme der Test-Rahmen-Farbe) keine Fehler aus.

Leider habe ich wieder das Problem, dass bei einem clear im mittleren DIV jener sich auch auf die Spalten bezieht. Wie kann ich dieses Problem beheben?

Hoffe das ihr mir helfen könnt! Vielen Dank
Muckel

Zitieren Melden!

Moritz Kern
Beiträge: 927

PN schreiben
Profil ansehen
Homepage besuchen
User ist offline
Link zur Antwort auf "Anfänger Frage zum anordnen von DIVs (floaten)" von Moritz Kern Moritz Kern, am Montag den 08.02.2010 um 10:53:43

Hab grad nicht wirklich zeit mich mehr damit zu beschäftigen, aber evtl findest du in der wmp designgala ein layout das deinem ähnelt und dir somit weiterholft ;)

Zitieren Melden!

Fabian "q-rios" Krause-Willenberg
Beiträge: 663

PN schreiben
Profil ansehen
Homepage besuchen
User ist offline
Link zur Antwort auf "Anfänger Frage zum anordnen von DIVs (floaten)" von Fabian "q-rios" Krause-Willenberg Fabian "q-rios" Krause-Willenberg, am Montag den 08.02.2010 um 11:04:41

Allerdings will ich da schon ewig einen Wrapper div reinmachen, weil wenn du jetzt im Content clearst, wirst ein Problem bekommen.

Zitieren Melden!

Tobias Müller
Beiträge: 7

PN schreiben
Profil ansehen
User ist offline
Link zur Antwort auf "Anfänger Frage zum anordnen von DIVs (floaten)" von Tobias Müller Tobias Müller, am Montag den 08.02.2010 um 12:38:41

Hallo zusammen,

mein eigenes kram funktioniert im Grunde ja auch, wie man auf der Testseite sehen kann. Ich habe lediglich das Problem mit dem clearing. Wenn der Hauptinhalt irgendwann mehr wird als die Spalte(n) soll jener auch unter den Spalten stehen, das ist so schon gewollt. Nur eben nicht mit der clear Anweisung, da ich dann einen Versatz bekomme, den ich nicht haben möchte.

Und wie ich dieses Problem löse, so dass es für alle gängigen Browser funktioniert, weiß ich leider nicht. Denn wenn ich ein DIV nochmal um diesen Inhalt mache, dann bleibt der Content zwischen den beiden Spalten, was ich aber eigentlich nicht möchte.

Hoffe daher, dass ihr mir helfen könnt.
Liebe Grüße
Muckel

Zitieren Melden!

Moritz Kern
Beiträge: 927

PN schreiben
Profil ansehen
Homepage besuchen
User ist offline
Link zur Antwort auf "Anfänger Frage zum anordnen von DIVs (floaten)" von Moritz Kern Moritz Kern, am Montag den 08.02.2010 um 12:59:31

Bin mir immernoch nicht ganz sicher was du genau magst.

Wenn ich dich aber richtig verstehe dann willst du dass der text im div #mitte die divs #links und #rechts umfließt.

dann nimm mal das <br style="clear:both"/> raus - dann schauts so aus:

ist das das was du willst? wie soll denn das Ergebnis aussehen?

Zitieren Melden!

Fabian "q-rios" Krause-Willenberg
Beiträge: 663

PN schreiben
Profil ansehen
Homepage besuchen
User ist offline
Link zur Antwort auf "Anfänger Frage zum anordnen von DIVs (floaten)" von Fabian "q-rios" Krause-Willenberg Fabian "q-rios" Krause-Willenberg, am Montag den 08.02.2010 um 13:26:51

Ich hab leider gerade auch keine Zeit mir das genau anzuschauen aber heute Abend will ich mal den Wrapper endlich reinmachen. Dann hast du kein Problem mit irgendwelchen Spalten innerhalb des Contents.

Zitieren Melden!

Tobias Müller
Beiträge: 7

PN schreiben
Profil ansehen
User ist offline
Link zur Antwort auf "Anfänger Frage zum anordnen von DIVs (floaten)" von Tobias Müller Tobias Müller, am Montag den 08.02.2010 um 14:32:55

Hallo zusammen,

ja - ich möchte, dass die beiden äußeren Spalten umflossen werden. Aber eben auch dann, wenn ein Zeilenumbruch mit clear Anweisung enthalten ist.

Grund: als System hinter meiner Webseite setzte ich das Wordpress-Blog ein. Mit jenem kann man auch eine Gallerie über einen Shortcod:

 
HTML
1
[gallery columns="3"

einfügen. Bei diesem Shortcode kann man eben auch bestimmen, wie viele Bilder neben einander angezeigt werden sollen. Am Ende dieser "Zeile" ist dann immer ein Zeilenumbruch mit dem clear both.

Somit habe ich dann das Problem, dass die neue Zeile der Bilder nach unten verrutscht, wie man zum Beispiel hier sehen kann. Als kleines Workaround habe ich diesen Shortcode einfach mit einem DIV umgeben:

 
HTML
1
2
3
<div style="margin: 0.05em; padding: 0.05em; display: inline-block; width: 95%;">
[gallery columns="4"]
</div>

Doch dieses "Workaround" kann ich schlecht anderen Autoren an die Hand geben. Denn aktuell erstelle ich das Layout für meine Jugendgruppe und dort sollen die einzelnen Gruppenleiter selbst ihre Inhalte pflegen (was sie ja auch tun). Doch da das keine Menschen sind die sich mit Programmierung oder ähnlichem beschäftigen, möchte ich ihnen das nicht unbedingt zumuten.

Daher bin ich auf der Suche wie man dieses Problem lösen kann.

Liebe Grüße und vielen Dank für eure bemühungen!
Muckel

Zitieren Melden!

Moritz Kern
Beiträge: 927

PN schreiben
Profil ansehen
Homepage besuchen
User ist offline
Link zur Antwort auf "Anfänger Frage zum anordnen von DIVs (floaten)" von Moritz Kern Moritz Kern, am Montag den 08.02.2010 um 15:00:42

die !important Regel kannst du in dem Fall glaub ich nicht anwenden, weil sich das clear ja auf das float bezieht....

du könntest aber mit javascript das clear:both zum clear:none machen....

Zitieren Melden!

Tobias Müller
Beiträge: 7

PN schreiben
Profil ansehen
User ist offline
Link zur Antwort auf "Anfänger Frage zum anordnen von DIVs (floaten)" von Tobias Müller Tobias Müller, am Montag den 08.02.2010 um 15:12:40

Hallo,

!import bringt mir ja in diesem Fall nichts, da die clear Angabe direkt im erzeugten html Code steht. Denn jenes wird ja von dem Wordpress erzeugt.

Wie würde denn das mit JavaScript ausschauen? Bleibt der Quellcode dann noch valid?

Vielen Dank
Muckel

Zitieren Melden!

Fabian "q-rios" Krause-Willenberg
Beiträge: 663

PN schreiben
Profil ansehen
Homepage besuchen
User ist offline
Link zur Antwort auf "Anfänger Frage zum anordnen von DIVs (floaten)" von Fabian "q-rios" Krause-Willenberg Fabian "q-rios" Krause-Willenberg, am Montag den 08.02.2010 um 15:36:42

Der Validator versteht JS nicht.

 
JavaScript
1
document.getElementById('id_des_elements').style.clear = 'none';
Zitieren Melden!

Moritz Kern
Beiträge: 927

PN schreiben
Profil ansehen
Homepage besuchen
User ist offline
Link zur Antwort auf "Anfänger Frage zum anordnen von DIVs (floaten)" von Moritz Kern Moritz Kern, am Montag den 08.02.2010 um 16:20:23

oder, weil dein Element keine ID hat:

 
JavaScript
1
document.getElementsByTagName('br').style.clear = 'none';

dann hat aber kein <br/> mehr ein clear...

Zitieren Melden!
Antworten Neues Thema