XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Probleme mit Floats (http://xhtmlforum.de/showthread.php?t=67961)

julthetool 13.08.2012 01:59

Probleme mit Floats
 
Liste der Anhänge anzeigen (Anzahl: 1)
Liebe Forumsgemeinde,

Ich habe ein Problem mit floats und google ist erschöpft. Anbei eine Grafik worauf ich hinaus will.

Vielleicht ist auch die Verteilung der Container so gar nicht richtig ( oder notwendig) jedenfalls ist die geplante seite full-width.

Zur weiteren Beschreibung: Das Logo steht ganz links, die beiden Menüs links und rechts und darunter ein Strich (der eben nicht über die ganz Länge geht sondern die Breite des Logos ausnimmt und das ist die Schwierigkeit)

Fällt euch dazu was ein?

Vielen Dank für eure Hilfe im Vorraus.

Liebe Grüße

gabischatz 13.08.2012 02:28

Du kannst es mal so versuchen,:D ich aber habs nicht getestet.
Die Stylesheets werden normal ausgelagert.
HTML-Code:

<div style="width: 800px; height: 800px; border: solid 1px #FF0000; padding: 1px; margin: 5px auto;">
        <div style="float: left; width: 200px; height: 200px; ">
                <img src="adresse.jpg" style="border: double; width: 200px; height: 200px;" alt="Logo" />
        </div>
        <div style="float: right; width: 590px; height: 200px; border-bottom: solid 2px; ">
                <div style="float: left; width: 290px; height: 190px; padding: 5px; padding-top:150px ;">
                        <ul style="display: inline;">
                                <li style="display: inline; text-decoration: none;">Link1</li>
                                <li style="display: inline; text-decoration: none;">Link2</li>
                                <li style="display: inline; text-decoration: none;">Link3</li>
                        </ul>
                </div>
                <div style="float: right; width: 280px; height: 190px; padding: 5px; padding-top:150px ;">
                        <ul style="display: inline;">
                                <li style="display: inline; text-decoration: none;">Link4</li>
                                <li style="display: inline; text-decoration: none;">Link5</li>
                                <li style="display: inline; text-decoration: none;">Link6</li>
                        </ul>

                </div>
        </div>
</div>

MfG

Hook 13.08.2012 07:50

Hi,
der Ansatz von Gabischatz ist schon ganz gut, leider fehlt noch ein clearendes Element, die horizontale Linie geht über die gesamte Breite des div und ein paar div sind zuviel. Hier mal ein möglicher Aufbau:
HTML-Code:

<img style="display:block;float: left; width: XXXpx; height: YYYpx; src="adresse.jpg"  alt="Logo" />

<div style="height:YYYpx">
        <ul style="float: left;margin-top: XYZpx;display: inline;">
                <li style="display: inline; text-decoration: none;">Link1</li>
                <li style="display: inline; text-decoration: none;">Link2</li>
                <li style="display: inline; text-decoration: none;">Link3</li>
        </ul>
               
        <ul style="float: right;margin-top: XYZpx;display: inline;">
                <li style="display: inline; text-decoration: none;">Link4</li>
                <li style="display: inline; text-decoration: none;">Link5</li>
                <li style="display: inline; text-decoration: none;">Link6</li>
        </ul>
        <div style="clear:both;"></div>
        <hr style="width:90%;" />

</div>

Hook

gabischatz 13.08.2012 11:14

Hi Hook,
den Ansatz ist auch nicht schlecht, es kommt nur darauf an wie es hinterher aussehen soll, wobei das Irrelevant ist da jeder Benutzer sich seine Ansicht selber einrichten kann.
Es ging mir nur darum ihm zu zeigen wie man so etwas aufbaut.
Ob man einige DIVs weglassen kann, hängt von den Hintergrund-Grafiken ab
oder ob ich es zentriert haben möchte oder oder oder.
HR setze ich ein, um bei aus geschalteten Stylesheet Informationsbereiche von einander zu trennen. Deshalb steht bei mir in der CSS-Datei
HTML-Code:

hr {
        display: none;
        clear: both;
}

Also ich hätte ihm auch ein fertiges Template reinstellen können, aber bringt es ihm was? Lernen muss er schon allein.
MfG

K.Roland 13.08.2012 11:30

Zitat:

Zitat von Hook (Beitrag 519536)
Hier mal ein möglicher Aufbau:

Wenn Du schon Code zeigst, Dan bitte so:

HTML-Code:

<!doctype html>
<html lang="de">
    <head>
        <meta charset="UTF-8" />
        <title>Beispiel</title>

<style type="text/css">

...............................................

</style>

</head>
<body>

............................................

</body>
</html>

____________
Gruß,
Roland

julthetool 13.08.2012 11:59

sensationell wie schnell in diesem Forum wer antwortet - Danke!

Als Schwierigkeit kommt hinzu (und das ist ja genau das Problem) das Logo hat natürlich eine gewisse Breite (sagen wir jetzt 150px), der Rest (also das im gelben Kästchen) geht immer über die restliche Breite des Fensters...

Ideen?

julthetool 13.08.2012 12:56

Jetzt hat es tatsächlich geklappt.

Das float des gelben Kästchens weg und noch ein paar Margins und jetzt gehts. Vielen Dank!!!!

Hook 13.08.2012 13:08

Zitat:

Zitat von gabischatz (Beitrag 519540)
Hi Hook,
den Ansatz ist auch nicht schlecht,

Danke ;)


Zitat:

Zitat von gabischatz (Beitrag 519540)
Ob man einige DIVs weglassen kann, hängt von den Hintergrund-Grafiken ab oder ob ich es zentriert haben möchte oder oder oder.

Das würde ich genau umgedreht formulieren. Warum sollte der TO so viel "Ballast" mitschleppen, wenn er ihn gar nicht braucht. Selbstverständlich kann es notwendig werden, weitere Boxen anzulegen, allerdings nicht bei dem gezeigten Bild.

Zitat:

Zitat von gabischatz (Beitrag 519540)
HR setze ich ein, um bei aus geschalteten Stylesheet Informationsbereiche von einander zu trennen. Deshalb steht bei mir in der CSS-Datei
HTML-Code:

hr {
        display: none;
        clear: both;
}


Das ist ja auch sinnvoll, hindert aber nicht darann eine hr auch (semantisch korrekt) innerhalb der Seite anzeigen zu lassen, dann muss eben eine extra Klasse eingeführt werden.
Zitat:

Zitat von gabischatz (Beitrag 519540)
aber bringt es ihm was? Lernen muss er schon allein.

Volle Zustimmung. Deswegen ja auch nur der prinzipielle Aufbau. Der To hat jetzt schon mal zwei Ansätze, auf denen er weiter Aufbauen kann.

@K.Roland
Warum sollte ich das gesamte Grundgerüst mit angeben. Ich kenne weder die gewünschte DTD noch weiß ich welcher Zeichensatz genommen werden soll.

Für mich ging es hier nur um einen Codeschnippsel, der den rudimentären Aufbau darstellt, ohne jeden überflüssigen Kram. Und inline-Styles sind zwar nicht schön, aber auch nicht falsch.

Hook


Alle Zeitangaben in WEZ +2. Es ist jetzt 00:25 Uhr.

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

© Dirk H. 2003 - 2023