XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   CSS Problem - zweiter Container wird unter dem ersten dargestellt. (http://xhtmlforum.de/showthread.php?t=55389)

noScale 17.01.2009 07:56

CSS Problem - zweiter Container wird unter dem ersten dargestellt.
 
Guten Morgen,

ich bin relativ neu hier im Forum, komme aus der ActionScriptler Ecke und beschäftige mich neuerdings mit Javascript (was ja nahe liegt) und Ajax. Nun führt ja (leider) kein Weg mehr an XHTML und CSS vorbei, somit muss ich ja auch mal damit anfangen.

Jetzt ist folgendes:
Ich möchte meine Html Seite vertikal mit zwei Hintergrundfarben teilen. Ich habe mich für zwei divs entschieden und wollte diese mit der clear Eigenschaft ausrichten. Funktioniert seltsamerweise auch im Firefox und Opera. Nur im Ie wird es weiter unten dargestellt:
HTML-Code:

html, body {
  height:100%;
  margin: 0;
  padding: 0;
}
#links {
        float: left;
        width: 50%;
        background: #CCCCCC;
        height: 100%;
}
#rechts {
        float: right;
        width: 50%;
        background: #990000;
        height: 100%
}

Ich habe mich für die divs entschieden, da ich jeweils in beiden Containern später ein div horizontal und vertikal zentrieren will. Wieso funzt das denn nicht. Bin auch bei der Suche nicht fündig geworden.

Vielen Dank.
noScale

hubspe 17.01.2009 08:17

Moin,

Zitat:

Zitat von noScale (Beitrag 418492)
Wieso funzt das denn nicht. Bin auch bei der Suche nicht fündig geworden.

Gib uns entweder einen Link zum Problem oder den kompletten, lauffähigen XHTML/CSS-Code.
Nur damit wir nicht aneinander vorbeireden.

Zitat:

Zitat von noScale (Beitrag 418492)
Nun führt ja (leider) kein Weg mehr an XHTML und CSS vorbei, somit muss ich ja auch mal damit anfangen.

Jep, du wirst wohl nicht umhin kommen, dir das eine oder andere Buch zuzulegen. Little Boxes 1 + 2 sind für den Anfang das Richtige. ;)

noScale 17.01.2009 08:34

Zitat:

Zitat von hubspe (Beitrag 418493)
Moin,
Gib uns entweder einen Link zum Problem oder den kompletten, lauffähigen XHTML/CSS-Code.
Nur damit wir nicht aneinander vorbeireden.

HTML-Code:

<!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=iso-8859-1" />
<title>Layout-&Uuml;bung</title>
<link type="text/css" href="layout.css" rel="stylesheet" media="screen" />
</head>

<body>
        <div id="links">
                <div id="linkerContainer">
                        <a href="ergebnis_links.html"><img src="links.jpg" width="200" height="100" border="0" alt="Linker Container" /></a>
                </div>
        </div>
       
        <div id="rechts">
                <div id="rechterContainer">
                        <a href="ergebnis_rechts.html"><img src="rechts.jpg" width="200" height="100" border="0" alt="Rechter Container" /></a>
                </div>
        </div>
       

</body>
</html>

Css halt wie oben - ich hoffe es ist verständlich was ich will.

Zitat:

Zitat von hubspe (Beitrag 418493)
Jep, du wirst wohl nicht umhin kommen, dir das eine oder andere Buch zuzulegen. Little Boxes 1 + 2 sind für den Anfang das Richtige. ;)

Hab mir HTML/XHTML und Cascading Stylesheets von O´Reilly besorgt. Werde die erstma durcharbeiten... Gibt viel zu tun ;)

Danke für die Mühe

hubspe 17.01.2009 10:26

Moin,

der IE benötigt immer a weng mehr Platz.
Wenn alles auf Kante genäht ist, drückt er die rechte Box nach unten, obwohl es von den Breiten eigentlich passen müßte.

Du könntest entweder die Boxen schmaler machen (ca. je 48%), oder du läßt nur die linke Spalte floaten und die rechte bekommt kein width und einen linken margin (margin-left:50%).

Evtl. noch den Double-Margin-Bug für den IE6 berücksichtigen, obwohl es bei mir auch so ging. ;)

noScale 17.01.2009 10:29

Ah, alles klar. Ich dachte im CSS stimmt was nicht.
Vielen Dank.


Alle Zeitangaben in WEZ +2. Es ist jetzt 02:40 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023