HTML/CSS Problem mit floating und 100%

P4trik · 04.04.2011, 16:51

Hallo,
ich versuche derzeit ein HTML-Design zu gestalten und stoße dabei (wie öfter) an meine Grenzen. Im Anhang dazu habe ich schnell eine Skizze erstellt um sich ein Bild davon zu machen. Auf der Linken Seite (Skizze roter Kasten) soll sich ein Logo mit fester Breite befinden und rechts daneben eine bzw zwei Navigationen die durchgängig zum rechten Bildschirmrand laufen. Wenn ich die Navigationen nun auf "width:100%" setze (natürlich float:left) stellen diese sich unter das Logo.

Vielleicht könnt ihr mir ja behilflich sein

Mit freundlichen Grüßen

MikO · 04.04.2011, 17:11

wenn du dem rechten, gefloateten container eine breite von 100% gibst, füllt er den body-bereich vollständig aus, weshalb für die linke box keinen platz mehr ist, so entsteht der umbruch.
die simpelste lösung wäre, wenn du dem rechten container eine breite von nur sagen wir 65% gibst (du musst es halt durch probieren austüfteln).

mit CSS3 kommt dann etwas in folgender richtung:

Code:

width: calc(100% - 260px);

ist aber leider nur in den allerneusten browsern implementiert und ich würde nicht darauf setzen

P4trik · 04.04.2011, 17:16

Zitat:

Zitat von MikO

die simpelste lösung wäre, wenn du dem rechten container eine breite von nur sagen wir 65% gibst (du musst es halt durch probieren austüfteln).

Aber verändert sich dann nicht, je nach Fenstergröße, die bereite dynamisch ?

tr0y · 04.04.2011, 17:18

Code:

DIV[ float:left; width: x px ] DIV[ margin-left: x px ]

Ich würde aber dreimal darüber nachdenken bevor ich etwas by-pixel "anklebe"

Damit die Logik-struktur da nicht als CSS interpretiert wird:

Code:

.yourLeftDiv {
   float:left; width:200px;
}

.yourRightDiv {
   margin-left:200px;
}

MikO · 04.04.2011, 17:26

Zitat:

Zitat von P4trik

Aber verändert sich dann nicht, je nach Fenstergröße, die bereite dynamisch ?

die linke box bleibt immer gleich breit und die rechte box variiert. allerdings sind die sprünge in den bilschirmauflösungen nicht so gravierend dass das viel ausmachen dürfte.

wenn dir das nicht gefällt, würde ich vorschlagen, du umgibst alles mit einer box, die du auf sagen wir 1000px festsetzt, zentrierst und arbeitest dann im inneren dieser box mit festen pixelgrößen.

P4trik · 04.04.2011, 17:27

Zitat:

Zitat von tr0y

Code:

DIV[ float:left; width: x px ] DIV[ margin-left: x+1 px ]

Ich würde aber dreimal darüber nachdenken bevor ich etwas by-pixel "anklebe"

Damit die Logik-struktur da nicht als CSS interpretiert wird:

Code:

.yourLeftDiv {
   float:left; width:200px;
}

.yourRightDiv {
   margin-left:201px;
}

Hi,
Habe es getestet, ist ne geile Idee nur leider verschiebt sich nun das gesamte DIV nach rechts.. Gibt es keine andere Lösung hier für ?

Andere Websites machen das doch sicherlich auch ?!

Gruß Patrik

mermshaus · 04.04.2011, 17:29

Vergebe kein width: 100%;. Das ist so oder so überflüssig bei einem Blocklevel-Element, das nicht gefloatet wird.

Theoretisch reicht es schon so:

HTML-Code:

<!DOCTYPE html>

<html lang="en">

    <head>
        <meta charset="utf-8" />
        <title>New</title>
        <style type="text/css">

            .logo {
                float: left;
                width: 260px;
                height: 50px;
                background: green;
            }

            .nav-main {
                background: red;
            }

            .nav-sub {
                background: blue;
            }

        </style>
    </head>

    <body>
        <div class="header">
            <div class="logo">
                .logo
            </div>
            <div class="nav-main">
                .nav-main
            </div>
            <div class="nav-sub">
                .nav-sub
            </div>
        </div>

    </body>

</html>

Dabei würde allerdings das zweite Navigationselement unter das Logo rutschen, falls das erste Navigationselement höher ist als das Logo. Äh, und das erste Navigationselement würde das Logo-Element umfließen, ja.

Also nur eine Alternative, wenn das Logo definitiv höher ist.

tr0ys Lösung ist da robuster.

Das +1 px wird übrigens nicht benötigt, margin-left: 260px; sollte es auch tun.

ChrisB · 04.04.2011, 17:32

Zitat:

Zitat von P4trik

ich versuche derzeit ein HTML-Design zu gestalten und stoße dabei (wie öfter) an meine Grenzen.

Dann erweitere mal dein Grundlagenwissen: http://aktuell.de.selfhtml.org/weblog/css-spaltenlayout

P4trik · 04.04.2011, 17:35

Zitat:

Zitat von mermshaus

Vergebe kein width: 100%;. Das ist so oder so überflüssig bei einem Blocklevel-Element, das nicht gefloatet wird.

Theoretisch reicht es schon so:

HTML-Code:

<!DOCTYPE html>

<html lang="en">

    <head>
        <meta charset="utf-8" />
        <title>New</title>
        <style type="text/css">

            .logo {
                float: left;
                width: 260px;
                height: 50px;
                background: green;
            }

            .nav-main {
                background: red;
            }

            .nav-sub {
                background: blue;
            }

        </style>
    </head>

    <body>
        <div class="header">
            <div class="logo">
                .logo
            </div>
            <div class="nav-main">
                .nav-main
            </div>
            <div class="nav-sub">
                .nav-sub
            </div>
        </div>

    </body>

</html>

Dabei würde allerdings das zweite Navigationselement unter das Logo rutschen, falls das erste Navigationselement höher ist als das Logo. Äh, und das erste Navigationselement würde das Logo-Element umfließen, ja.

Also nur eine Alternative, wenn das Logo definitiv höher ist.

tr0ys Lösung ist da robuster.

Das +1 px wird übrigens nicht benötigt, margin-left: 260px; sollte es auch tun.

Wie geil, es funktioniert ! Danke

Verstehe zwar nicht was bei dir anders ist, da die <DIV> Elemente automatisch auf 100% stehen, aber es funktioniert..

Ist es nun auch noch möglich den Umbruch der Navigationen zu verhindern ?

Mein Nachmittag ist gerettet

tr0y · 04.04.2011, 17:38

*kopfkratz* Verstehst du das überhaupt ? ^^

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Problem mit Ajax - Session Problem	halskrause	PHP Tipps 2009	10	12.01.2010 02:27
[Erledigt] Problem mit Mehrsprachigkeit	Sniper_Kotaro	PHP Tipps 2009	2	16.12.2009 11:47
Problem beim Download Management	mistermint	PHP Tipps 2009	8	24.10.2009 11:34
Umlaut Problem	nokieone	PHP Tipps 2009	7	16.10.2009 19:30
Problem mit Basedir in PhP	cmuch05	Datenbanken	9	08.01.2009 14:17
[Erledigt] Problem: PHP Selbe Datei mehr als 1 Mal	soulan	PHP Tipps 2008	13	28.11.2008 22:51
Problem Upload mehrere Dateien und schreiben in DB	Lapje	PHP Tipps 2008	1	22.10.2008 13:12
utf8 Problem (Daten aus DB auslesen)	go1denboy	PHP Tipps 2008	1	23.09.2008 12:19
Problem mit swfobjects	R4v3r	JavaScript, Ajax und mehr	8	21.09.2008 14:17
Timestamp problem	phrain	PHP Tipps 2008	2	04.04.2008 09:41
datensätze defekt oder problem mit dem einlesen?	Ministry	Datenbanken	4	06.07.2006 18:42
problem!!!		PHP Tipps 2006	6	08.02.2006 11:06
Smarty und PHP-Skript Problem		PHP Tipps 2004-2	2	03.12.2004 22:27
Problem mit alter JavaScript-Funktion	woods	PHP Tipps 2004	1	13.08.2004 13:34

04.04.2011, 16:51
P4trik Benutzer Registriert seit: 21.08.2008 Beiträge: 40	HTML/CSS Problem mit floating und 100% Hallo, ich versuche derzeit ein HTML-Design zu gestalten und stoße dabei (wie öfter) an meine Grenzen. Im Anhang dazu habe ich schnell eine Skizze erstellt um sich ein Bild davon zu machen. Auf der Linken Seite (Skizze roter Kasten) soll sich ein Logo mit fester Breite befinden und rechts daneben eine bzw zwei Navigationen die durchgängig zum rechten Bildschirmrand laufen. Wenn ich die Navigationen nun auf "width:100%" setze (natürlich float:left) stellen diese sich unter das Logo. Vielleicht könnt ihr mir ja behilflich sein Mit freundlichen Grüßen Miniaturansicht angehängter Grafiken


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

04.04.2011, 17:11
MikO Benutzer Registriert seit: 04.04.2011 Beiträge: 46 PHP-Kenntnisse: Fortgeschritten	wenn du dem rechten, gefloateten container eine breite von 100% gibst, füllt er den body-bereich vollständig aus, weshalb für die linke box keinen platz mehr ist, so entsteht der umbruch. die simpelste lösung wäre, wenn du dem rechten container eine breite von nur sagen wir 65% gibst (du musst es halt durch probieren austüfteln). mit CSS3 kommt dann etwas in folgender richtung: Code: width: calc(100% - 260px); ist aber leider nur in den allerneusten browsern implementiert und ich würde nicht darauf setzen

04.04.2011, 17:18
tr0y Erfahrener Benutzer Registriert seit: 26.07.2010 Beiträge: 4.865 PHP-Kenntnisse: Fortgeschritten	Code: DIV[ float:left; width: x px ] DIV[ margin-left: x px ] Ich würde aber dreimal darüber nachdenken bevor ich etwas by-pixel "anklebe" Damit die Logik-struktur da nicht als CSS interpretiert wird: Code: .yourLeftDiv { float:left; width:200px; } .yourRightDiv { margin-left:200px; } __________________ Lasse mir ohne Anwendung von Gewalt Dinge schenken, Amazon weiß darüber bald mehr. Geändert von tr0y (04.04.2011 um 17:26 Uhr).

04.04.2011, 17:29
mermshaus Erfahrener Benutzer Registriert seit: 14.06.2009 Beiträge: 1.725 PHP-Kenntnisse: Fortgeschritten	Vergebe kein width: 100%;. Das ist so oder so überflüssig bei einem Blocklevel-Element, das nicht gefloatet wird. Theoretisch reicht es schon so: HTML-Code: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>New</title> <style type="text/css"> .logo { float: left; width: 260px; height: 50px; background: green; } .nav-main { background: red; } .nav-sub { background: blue; } </style> </head> <body> <div class="header"> <div class="logo"> .logo </div> <div class="nav-main"> .nav-main </div> <div class="nav-sub"> .nav-sub </div> </div> </body> </html> Dabei würde allerdings das zweite Navigationselement unter das Logo rutschen, falls das erste Navigationselement höher ist als das Logo. Äh, und das erste Navigationselement würde das Logo-Element umfließen, ja. Also nur eine Alternative, wenn das Logo definitiv höher ist. tr0ys Lösung ist da robuster. Das +1 px wird übrigens nicht benötigt, margin-left: 260px; sollte es auch tun. __________________ Blog \| Buch \| Kaloa

04.04.2011, 17:38
tr0y Erfahrener Benutzer Registriert seit: 26.07.2010 Beiträge: 4.865 PHP-Kenntnisse: Fortgeschritten	kopfkratz Verstehst du das überhaupt ? ^^ __________________ Lasse mir ohne Anwendung von Gewalt Dinge schenken, Amazon weiß darüber bald mehr.