Ausrichtung

Status
Nicht offen für weitere Antworten.
D

Dark Ranger

Erfahrenes Mitglied
Hi

Ich habe ein paar div's verschachtelt und versuche sie auszurichten, aber irgendwie funktioniert das nicht.
http://img505.imageshack.us/img505/2360/stylecssku3.jpg
So wie es auf dem Bild zu sehen ist hätte ich es gerne ausgerichtet, das div mit der id "next" kann wegen mir auch über die komplette breite des inner div's gehen.

Ich habe schon viel mit float und position usw. rumhantiert, aber ich komme zu keinem Ergebnis, ständig sprengt irgendwas den Rahmen oder geht über das outer div hinaus usw.

Kann mir vielleihct wer helfen?
 
Ohh habe ich ganz vergessen:
HTML:
HTML: 
<div id="outer">
	<div id="inner">
		<div id="name">
			Test
		</div>
		<div id="beschreibung">
			Alles nur ein Test
		</div>
		<div id="next">
			Ein Link
		</div>
		<div id="zusatz">
			Weitere Infos
                        Und noch mehr Infos
                </div>
	</div>
</div>

Und Css:
Code: 
#outer
{
	width: 70%;
	margin: 0px auto;
}
#outer #inner
{
	border: 1px solid black;
	margin: 10px auto;
	min-height: 115px;
}
#outer #inner #name
{
	float: left;
	font-size: 15px;
	/*border: 1px solid green;*/
}
#outer #inner #beschreibung
{
	font-size: 11px;
	/*border: 1px solid red;*/
}
#outer #inner #next
{
	/*border: 1px solid blue;*/
}
#outer #inner #zusatz
{
        float: right;
}

Zerreist mir nur alles ^^ Bin halt ein totaler Css GIMP
 
Mein Vorschlag:

Code: 
<div id="outer">
        <div id="inner" class="clearfix">
                <div id="name">
                        Name
                </div>
                <div id="zusatz">
                        Weitere Infos
                        Und noch mehr Infos
                </div>
                <div id="centerCol">
                     <div id="beschreibung">
                        Alles nur ein Test
                     </div>
                     <div id="next">
                        Ein Link
                     </div>
                </div>
        </div>
</div>
Code: 
#outer #inner #name
{
        float: left;
        font-size: 15px;
        /*border: 1px solid green;*/
        width:150px;
}

#outer #inner #zusatz
{
        float: right;
        width:150px;
}

#outer #inner #centerCol {
        margin:0 150px;
}

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

.clearfix {
          display: inline-block;
}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
Wenn du, wie in der Vorschaugrafik zu sehen, die "Zeile" #inner mehrfach verwenden möchtest, müssen alle ID-Bezeichner der betroffenen Boxen in Klassen umgewandelt werden, da eine ID im HTML-Dokument eindeutig sein muss, also darin nicht mehrfach vergeben werden darf.

Im class-Attribut lassen sich auch mehrere Klassen-Namen mit einem Leerzeichen getrennt aufrufen:

Code: 
<div id="outer">
        <div class="inner clearfix">
                <div class="name">
                        Name
                </div>
                <div class="zusatz">
                        Weitere Infos
                        Und noch mehr Infos
                </div>
                <div class="centerCol">
                     <div class="beschreibung">
                        Alles nur ein Test
                     </div>
                     <div class="next">
                        Ein Link
                     </div>
                </div>
        </div>
        <div class="inner clearfix">
                <div class="name">
                        Name
                </div>
                <div class="zusatz">
                        Weitere Infos
                        Und noch mehr Infos
                </div>
                <div class="centerCol">
                     <div class="beschreibung">
                        Alles nur ein Test
                     </div>
                     <div class="next">
                        Ein Link
                     </div>
                </div>
        </div>
</div>
Code: 
#outer
{
        width: 70%;
        margin: 0px auto;
}

#outer .inner
{
        border: 1px solid black;
        margin: 10px auto;
        min-height: 115px;
}

#outer .inner .name
{
        float: left;
        font-size: 15px;
        /*border: 1px solid green;*/
        width:150px;
}

#outer .inner .beschreibung
{
        font-size: 11px;
        /*border: 1px solid red;*/
}

#outer .inner .next
{
        /*border: 1px solid blue;*/
}

#outer .inner .zusatz
{
        float: right;
        width:150px;
}

#outer .inner .centerCol {
        margin:0 150px;
}

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

.clearfix {
          display: inline-block;
}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
 
Mhhh ok danke erstmal, beim IE funktioniert das ganze soweit, aber im Firefox wird einfach alles untereinander angezeigt, muss ich da noch etwas ändern oder anpassen?
 
Bei mir funktioniert es im Firefox, wie auch im IE und den übrigen gängigen Browsern:

ff.jpg
 
Jaaa jetzt funktionert es, die seite war wohl noch gecached!

Habe aber noch ein Problem, dass ich ausserhalb noch eine Box habe
Code: 
#right
{
	float: right;
	width: 200px;
	margin: 0px;
	padding: 0px;
	background-color: #ddeeff;
	border: 1px solid #24304b;
	height: 100%;
}
Und diese Box zerstört natürlich die erste anzeige vom inner, da diese in die länge gezogen wird. Dafür muss ich noch eine Lösung finden
 
Meinst du etwa so?

Code: 
<body>

<div id="right">right</div>
<div id="outer">...</div>

</body>
Dann versuch es mal hiermit:

Code: 
#outer
{
        margin: 0 220px;
}
 
Mhh ich habe mich mal wieder nicht gut genug ausgedrückt.

Das Problem liegt nicht darin, dass outer verschoben ist, sondern dass vom ersten inner die untere linie ganz weit unten ist und zwar soweit wie right hoch ist. Weiß nicht ob es da eine Lösung gibt
 
Vielleicht hilft dir da eine absolute Positionierung weiter:

Code: 
#right
{
        /*float: right;*/
        position:absolute;
        right:0;
        top:0;
        width: 200px;
        margin: 0px;
        padding: 0px;
        background-color: #ddeeff;
        border: 1px solid #24304b;
        height: 100%;
}
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück