Ausrichtung von Divs
Der folgende Beitrag wurde am 30. 05. 2010, 17:31 Uhr von apsel veröffentlicht.
Om nah hoo pez nyeetz, Marico!
> ich möchte 5 Divs nebeneinander ausrichten, ...
Bist du sicher, dass es divs sein müssen?
Matthias
-- 
Der folgende Beitrag wurde am 29. 05. 2010, 18:45 Uhr von Marico veröffentlicht.
Hallo,
ich möchte 5 Divs nebeneinander ausrichten, dabei soll das 4. allerdings eine variable Breite haben.
Nachdem das mit float (zumindest mir) nicht möglich war habe ich ein weiteres Div um die 4 verbleibenden gelegt und versuche nun verzweifelt das Letzte an den rechten Rand des übergeordneten Divs zu platzieren ...
Ums etwas Bildlicher darzustellen:
1. Versuch
|Div1||Div2||Div3||Div4 (mit variabler Breite)||Div5|
2. Versuch
|Div1 (übergeordnet)|Div2||Div3||Div4||Div5 (am rechten Rand des übergeordneten)||
Der Code des 2. Versuchs:
css:
body {
background: url(/images/x_repeat.png) top repeat-x;
}
#container {
width: 85%;
min-width: 800px;
margin: auto;
}
#head_top {
background: url(/images/head_top_repeat.png) repeat-x;
width: 100%;
min-width: 780px;
height: 30px;
}
#head_top_left {
background: url(/images/head_top_left.png);
width: 6px;
height: 30px;
float: left;
}
#head_top_saga {
background: url(/images/head_top_logo.png);
width: 144px;
height: 30px;
margin-left: 6px;
float: left;
}
#head_top_middle {
background: url(/images/head_top_middle.png);
width: 2px;
height: 30px;
margin-left: 144px;
float: left;
}
#head_top_right {
background: url(/images/head_top_right.png);
width: 6px;
height: 30px;
float: right;
}
html:
<body>
<div id="container">
<div id="head_top">
<div id="head_top_left" />
<div id="head_top_logo" />
<div id="head_top_middle" />
<div id="head_top_right" />
</div>
</div>
</body>
Ich hoffe mein Problem war verständlich und jemand kann mir helfen.
Der folgende Beitrag wurde am 29. 05. 2010, 19:29 Uhr von fastix® veröffentlicht.
Moin!
Eine von vielen(!) möglichen Lösungen:
Du musst es nicht als Tabelle auszeichnen, kannst es aber als Tabelle anzeigen lassen.
> Der Code des 2. Versuchs:
>
> css:
> body {
> background: url(/images/x_repeat.png) top repeat-x;
> }
>
> #container {
> width: 85%;
> min-width: 800px;
> margin: auto;
display:table;
> }
>
> #head_top {
> background: url(/images/head_top_repeat.png) repeat-x;
> width: 100%;
> min-width: 780px;
> height: 30px;
display:table-row;
> }
>
> #head_top_left {
> background: url(/images/head_top_left.png);
> width: 6px;
> height: 30px;
> //float: left;
display:table-cell;
> }
>
> #head_top_saga {
> background: url(/images/head_top_logo.png);
> width: 144px;
> height: 30px;
> //float: left;
display:table-cell;
> }
>
> #head_top_middle {
> background: url(/images/head_top_middle.png);
> width: 2px;
> height: 30px;
> //float: left;
display:table-cell;
> }
>
> #head_top_right {
> background: url(/images/head_top_right.png);
> width: 6px;
> height: 30px;
> // float: right; // was soll das umfließen?
display:table-cell;
> }
>
> html:
> <body>
> <div id="container">
> <div id="head_top">
> <div id="head_top_left" />
> <div id="head_top_logo" />
> <div id="head_top_middle" />
> <div id="head_top_right" />
> </div>
> </div>
> </body>
> Ich hoffe mein Problem war verständlich und jemand kann mir helfen.
Ich hoffe, es hat geholfen.
MFFG (Mit freundlich- friedfertigem Grinsen)
fastix
--
Des fastix kleines CMS
Der folgende Beitrag wurde am 30. 05. 2010, 12:03 Uhr von Marico veröffentlicht.
Hallo fastix,
funktioniert in der Form leider nicht aber danke für die Hilfe
lG Marico
Der folgende Beitrag wurde am 30. 05. 2010, 17:31 Uhr von apsel veröffentlicht.
Om nah hoo pez nyeetz, Marico!
> ich möchte 5 Divs nebeneinander ausrichten, ...
Bist du sicher, dass es divs sein müssen?
Matthias
--
Der folgende Beitrag wurde am 30. 05. 2010, 18:44 Uhr von Marico veröffentlicht.
Okay ich hab hier eine Möglichkeit die funktioniert:
CSS:
#head_top {
width: 90%;
min-width: 780px;
height: 30px;
margin: auto;
}
#head_top_left {
background: url(/images/head_top_left.png);
width: 6px;
height: 30px;
float: left;
}
#head_top_logo {
background: url(/images/head_top_logo.png);
width: 143px;
height: 30px;
float: left;
}
#head_top_middle {
background: url(/images/head_top_middle.png);
width: 2px;
height: 30px;
float: left;
}
#head_top_repeat {
background: url(/images/head_top_repeat.png) top repeat-x;
height: 30px;
margin-left: 151px;
margin-right: 6px;
}
#head_top_right {
background: url(/images/head_top_right.png);
width: 6px;
height: 30px;
float: right;
}
HTML:
<div id="head_top">
<div id="head_top_left"></div>
<div id="head_top_saga"></div>
<div id="head_top_middle"></div>
<div id="head_top_right"></div>
<div id="head_top_repeat"></div>
</div>
Der folgende Beitrag wurde am 30. 05. 2010, 18:46 Uhr von Marico veröffentlicht.
kleiner Nachtrag ...
das "saga" muss hier und natürlich auch im ersten Beitrag durch "logo" ersetzt werden sonst macht die Sache keinen Sinn
© 1998-2013 SELFHTMLImpressumSoftware: Classic Forum 3.4