XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Kniffliges Layout mit float (http://xhtmlforum.de/showthread.php?t=39137)

Roadrunnerle 13.03.2006 19:49

Kniffliges Layout mit float
 
Liste der Anhänge anzeigen (Anzahl: 2)
Hallo Zusammen,

ich möchte den gbanner und fuss zusammenlassen aber den Abstand von fuss zu info entfernen, so dass der gbanner neben info ist und zentriert unter dem Inhalt steht. Gibt es da eine Möglichkeit? Siehe Bilder ist_zustand.jpg und soll_zustand.jpg

Gruss Roadrunnerle


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" xml:lang="de" lang="de">
<head>
<title>new</title>



<style type="text/css">

#container
{
        background-color:#CCCC33;
        color:#000000;
        height:1%;
}

#navigation
{
        background-color:#99FF00;
        color:#000000;
        float:left;
        width:10em;
        height:300px;
}

#infobox
{
        background-color:#99FF00;
        color:#000000;
        float:right;
        width:165px;
        height:600px;
}

#inhalt
{
        background-color:#00FFFF;
        color:#000000;
        margin-left:11em;
        margin-right:170px;
        height:1%;
}

.box
{
        background-color:#9966FF;
        color:#000000;
        width:14em;
        float:left;       
}

#gbanner
{
        background-color:#FF00FF;
        color:#000000;
        margin:auto;
        width:470px;       
        clear:both;
}

#fusszeile
{
        background-color:#0000FF;
        color:#FFFFFF;
}


</style>
</head>

<body>
<div id="container">

        <div id="navigation">

menü1
menü1
menü1
menü1
menü1
menü1
menü1</p></div>
        <div id="infobox">info</div>
       
        <div id="inhalt"><h3>Hier kommt eine Überschrift</h3>
               

 und möglicherweise auch Inhalte.</p>
                <div class="box">

box
box
box
box
box
box</p></div>
                <div class="box">

box
box
box
box
box
box</p></div>
                <div class="box">

box
box
box
box
box
box</p></div>
                <div class="box">

box
box
box
box
box
box</p></div>
                <div class="box">

box
box
box
box
box
box</p></div>               
        </div>
               
        <div id="gbanner">gbanner</div>
        <div id="fusszeile">fuss</div>

</div>
</body>
</html>


Roadrunnerle 13.03.2006 19:55

Nachtrag: Das Menü ist in der Endversion variabel und kann nach unten länger werden.

Roadrunnerle 14.03.2006 09:30

Keine Antwort soll wohl heißen, das es net geht? Na gut.

mazzo 14.03.2006 09:36

Du bist ungeduldig...

Solange #gbanner nicht floatet wird es nicht neben #info angezeigt werden, sondern darunter. Blockelemente verhalten sich so.

Im Prinzip hast Du auch "nur" ein 3-Spalten-Layout. Schau mal in meine Sig, wie man das einfach umsetzen kann.

Roadrunnerle 14.03.2006 09:55

@mazzo

Danke für deine Antwort und sorry für meine Ungeduld. Ich schau mir mal deine Sig an.
Mein Problem war immer, dass wenn ich #gbanner floate, dass der dann nach oben abhaut und nicht an der Fusszeile dran kleben bleibt. Vielleicht finde ich etwas in deiner Sig.


Gruß Roadrunnerle.

mazzo 14.03.2006 10:08

Du denkst falschrum ;)

Je nachdem wo Du floatest wird das Element dort aus dem Fluss genommen und links oder rechts "gefloatet". Der Rest verläuft dann drumherum. Ein clear hebt das wieder auf. Somit wird die hohe Spalte aus info über den schmalen footer hinausragen, wenn dieser floatet.

Evtl. benötigst Du eine Kombination mit "Faux columns" (guck mal damit in die Suche oder in die FAQ des XHTML-wiki, oben verlinkt) damit die Spalte "mitwächst" und das Layout geschlossen wirkt.

Roadrunnerle 14.03.2006 11:26

Liste der Anhänge anzeigen (Anzahl: 2)
@mazzo

folgendes habe ich mal gemacht:
- mit dem clearfix erreiche ich, dass der die .box 'en im #inhalt bleiben
- mit #klammer + clearfix, dass der gbanner nicht daneben rutscht
- fusszeile ganz raus aus dem #container
- gbanner rein in den #inhalt

"Faux columns" habe ich so verstanden, dass das nur eine Täuschung ist, die floats aber ihre Höhe behalten und nicht ausgedehnt werden.

Firefox: immer noch Abstand zwischen info und fuss
IE: sieht schon ganz gut aus

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" xml:lang="de" lang="de">
<head>
<title>new</title>



<style type="text/css">

#container
{
        color:#000000;
        height:1%;
}

#navigation
{
        background-color:#99FF00;
        color:#000000;
        float:left;
        width:10em;
}

#infobox
{
        background-color:#99FF00;
        color:#000000;
        float:right;
        width:165px;
        height:600px;
}

#inhalt
{
        background-color:#00FFFF;
        color:#000000;
        margin-left:11em;
        margin-right:170px;
        height:1%;
}

.box
{
        background-color:#9966FF;
        color:#000000;
        width:13em;
        float:left;       
}

#gbanner
{
        background-color:#FF00FF;
        color:#000000;
        margin:auto;
        width:450px;       
}

#fusszeile
{
        background-color:#0000FF;
        color:#FFFFFF;
}

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix {display: inline-table;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

</style>
</head>

<body>
<div id="container">

        <div id="navigation">

menü1
menü1
menü1
menü1
menü1
menü1
menü1</p></div>
        <div id="infobox">info</div>
       
        <div id="inhalt" class="clearfix" ><h3>Hier kommt eine Überschrift</h3>
               

 und möglicherweise auch Inhalte.</p>
                <div id="klammer" class="clearfix">       
                        <div class="box">

box
box
box
box
box
box</p></div>
                        <div class="box">

box
box
box
box
box
box</p></div>
                        <div class="box">

box
box
box
box
box
box</p></div>
                        <div class="box">

box
box
box
box
box
box</p></div>
                        <div class="box">

box
box
box
box
box
box</p></div>               
                        </div>
                <div id="gbanner">gbanner</div>
        </div>
</div>

<div id="fusszeile">fuss</div>

</body>
</html>



Alle Zeitangaben in WEZ +2. Es ist jetzt 18:46 Uhr.

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

© Dirk H. 2003 - 2019