nicht angemeldet
Wie mit CSS zwei divs nebeneinander positionieren=
Hallo,
Ich will bei einer WebSite oben eine header row haben, und in dieser dann links das Logo und recht eine Sprachwahl haben.
Wie mach ich das?
<div class="headerRow">
<div class="logo">
<img src="/images/uml2php.png" alt="uml2php" />
</div>
<div class="languageSelector">
language selector here
</div>
</div>
/* header */
.headerRow { background-color:#e8e8e8; text-align:left }
.logo { text-align: left; width:245px; }
.languageSelector { text-align: right; margin-right:10px }
Nur wird bei mir der language Selector immer unter dem Logo angezeigt, ich hab schon wirklich alles versucht um die beiden nebeneinander zu bekommen.
Danke!
-
Ich hab noch vergessen zu sagen, dass das Logo links und der language Selector rechts sein soll.
-
Hi
Also wenn ich das recht verstehe möchtest du einfach ganz am oberen Rand deiner Homepage eine Zeile wo ganz am linken Rand des Fensters ein Logo ist und auf der rechten seite dein Language-Selector (Drop-Down-Menue?) und dazwischen freien Platz für nix oder irgendwelchen Inhalt.
Die einfachste lösung wäre doch eine Tabelle mit 3 spalten?
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="200" align="left" valign="top"><img src="" width="200" height="200"></td>
<td> </td>
<td width="300" align="right" valign="top">"Language-Selector"</td>
</tr>
</table>Falls du (aus welchem Grund auch immer) keine Tabelle verwenden kannst, ich such gleich mal ne Lösung mit Ebenen.
Greez Crowner
-
Hallo Crowner
Die einfachste lösung wäre doch eine Tabelle mit 3 spalten?
Warum sollte er eine Tabelle verwenden, wenn es sich keine tabellarischen Daten handelt?
Auf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!-
Hallo Crowner
Die einfachste lösung wäre doch eine Tabelle mit 3 spalten?
Warum sollte er eine Tabelle verwenden, wenn es sich keine tabellarischen Daten handelt?
Weil sie Inhalte in tabellarischer Form anzeigen möchte. Und wenn ich mir ansehe wieviel Code ich für die CSS-Lösung brauche und wieviel für die Tabellenlösung muss die CSS-Lösung stark angezweifelt werden. Leider, weil CSS eigentlich das richtige dafür wäre, aber es ist eben noch nicht so weit.
Auf Wiederlesen
Detleflg
thomas-
Hallo thomas
Weil sie Inhalte in tabellarischer Form anzeigen möchte.
Nein, lediglich nebeneinander, einmal links und einmal rechts ausgerichtet.
Und was hat das momentan gewünschte Aussehen mit der Struktur des Inhalts zu tun?Und wenn ich mir ansehe wieviel Code ich für die CSS-Lösung brauche und wieviel für die Tabellenlösung muss die CSS-Lösung stark angezweifelt werden.
Ist es wirklich _so_ viel mehr?
Außerdem stellt sich dabei die Frage: Auf wie vielen Seiten wird ein Header mit einem ähnlichen oder identischen Aussehen benötigt?
Die Tabelle müsste in jeder Seite stecken, das CSS nur einmal im zentralen Stylesheet.Leider, weil CSS eigentlich das richtige dafür wäre, aber es ist eben noch nicht so weit.
Es gibt zwar Sachen, die sich mit CSS nur sehr schwer und aufwändig umsetzen lassen, dieser Header gehört mit Sicherheit nicht dazu. Der größte Teil der Probleme liegt nicht an CSS selbst, sondern vor allen Dingen an unserem "Lieblingsbrowser".
Auf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!
-
-
-
-
Wie gesagt hier die erste Lösung, wie es mit Ebenen funktioniert (wichtig ist das: "position:absolute" dadurch wird die Ebene auf dem Pixel genau ausgerichtet. Und hier der Quelltext:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Zwei Ebenen nebeneinander</title>
<style type="text/css">
<!--
#logo {
position:absolute;
left:0px;
top:0px;
width:100px;
height:100px;
z-index:2;
}
#lang-select {
position:absolute;
right:0px;
top:0px;
width:200px;
height:100px;
z-index:3;
}
-->
</style></head><body>
<div id="logo"><img src="" alt="" width="100" height="100" /></div>
<div id="lang-select">
<div align="right">
<p> </p>
<p align="center">Language-Selector</p>
</div>
</div>
</body>
</html>-
Hallo Crowner
Wie gesagt hier die erste Lösung, wie es mit Ebenen funktioniert (wichtig ist das: "position:absolute" dadurch wird die Ebene auf dem Pixel genau ausgerichtet.
Warum meinst du, position:absolute wäre wichtig, um mehrere Elemente nebeneinander anzuzeigen?
Absolute Positionierung ist nur in ganz bestimmten (eher Sonder-) Fällen sinnvoll.Auf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!-
Hallo,
Vielen dank erst mal, ihr habt mein Problem verstanden ;-)
Also wenn ich die lösung mit position:absolute mache, wird der Hintergrund der HeaderRow nicht mehr angezeigt.@Detlef: Was muss ich denn statt position:absolute benutzen?
Danke!
-
-
-
Hallo wbdesigner
Ich will bei einer WebSite oben eine header row haben, und in dieser dann links das Logo und recht eine Sprachwahl haben.
Wie mach ich das?
<div class="headerRow">
<div class="logo">
<img src="/images/uml2php.png" alt="uml2php" />Wozu packst du das Bild in ein extra Div-Element?
</div>
<div class="languageSelector">
language selector hereBraucht dieser ein extra Div-Element?
</div>
</div>/* header */
.headerRow { background-color:#e8e8e8; text-align:left }Also den Text (und Inlineelemente links ausrichten. (dein Logo steckt aber in einem Blockelement, OK, es wird ja sowieso links begonnen)
.logo { text-align: left; width:245px; }
Wozu dient hier das text-align: left;?
.languageSelector { text-align: right; margin-right:10px }
OK, den Inlineinhalt rechts ausrichten.
Ich finde hier allerdings nichts, was dafür sorgen könnte, dass die Blockelemente neben statt untereinander angeordnet werden.Nur wird bei mir der language Selector immer unter dem Logo angezeigt, ich hab schon wirklich alles versucht um die beiden nebeneinander zu bekommen.
Eine einfache Version ohne unnötige Div-Elemente könnte folgendermaßen aussehen.
CSS:
/* header */ #headerRow { /* ID statt Klasse, Header gibt es üblicherweise nur einen */ background-color:#e8e8e8; text-align: right; /* Ausrichtung der Sparachauswahl */ padding-right:10px; /* Abstand der Sprachauswahl vom rechten Rand */ overflow:auto; /* damit sich der Container der Höhe des gefloatete Logos anpasst */ } * html #headerRow { /* nur für IE, damit es auch dort funktioniert */ overflow: visible; height: 1%; } #headerRow img { /* wenn es nur ein Bild im Header gibt, ist keine extra Klasse oder ID nötig */ float: left; /* wird links gefloatet, dadurch kann der weitere Inhalt daneben floaten */ width:245px; }XHTML:
<div id="headerRow"> <img src="/images/uml2php.png" alt="uml2php" /> language selector here </div>Auf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin! -
Hallo,
Warum geht es mit float:left / float:right nicht?
Müste doch eigentlich reichen...Grüße,
Willi--
Mein SelfCode: ie:{ fl:| br:> va:) ls:? fo:| rl:? n4:? ss:| de:> js:| ch:? sh:( mo:? zu:}