3 Div's nebeneinander?

**Bub** · 10-07-2005 17:56

Ich versuche in meine Hompage eine navigationsleiste einzubinden. Hierzu habe ich grafiken für den Hintergrund angefertigt. Zwei Rand Grafiken zur Abrundung einmal links und rechts und eine Grafik für den Hintergrunfd der Links.
Nun habe ich mir überlegt, dass ich die navigationsleiste mit Div's machen möchte. Hierzu habe ich mir schon ein außen Div erstellt in das die 3 besagten Div's reinsollen.
Nur wenn ich jezt in dem außen Div drei kleine Div's erstellen will, erstellt er diese zwar aber setzt sie untereinander. Wie kann ich diese nebeneinander setzen.
Hier der Quelltext:

<div class="navigationFrame">
<div class="navigationLeft">
(Abrundung Links)
</div>

<div class="navigation">
</div>

<div class="navigationRight">
(Abrundung Rechts)
</div>

</div>

Danke für eure Hilfe.

Mfg Bub. Over and Out!

pit-r · 10-07-2005 17:58

Hi!

Da sollte float:left im CSS ein guter Freund werden.

Gruß - Pit

**Bub** · 10-07-2005 18:35

An welcher Stelle soll ich float: left einbinde in jedem Div oder im außen div?

Übrigends danke für die schnelle Antwort.

Mfg Bub. Over and Out!

pit-r · 10-07-2005 18:43

Das gehört in die Kinderchen:

<div class="navigationFrame">
<div class="navigationLeft" style="float:left;">
(Abrundung Links)
</div>
<div class="navigation" style="float:left;">Mitte
</div>
<div class="navigationRight">
(Abrundung Rechts)
</div>
</div>

Gruß - Pit

**Bub** · 10-07-2005 21:22

Danke funktioniert jezt alles super nur habe ich ein Problem ich möchte die breite der Navigationsleiste gerne raltiv machen, so dass sich die Breite nach der jeweiligen Auflösung regelt. Nur jezt bekomme ich das problem, dass ich links und rechs jeweils die Abrundungsgrafik von 5px habe. Der mittlere Teil soll sich dynamisch anpassen nur wenn ich ihm jezt sage das er es nach prozent beziehen soll überblendet er leider meine hinterste Grafik.
Gibt es eine Möglichkeit der Div zu sagen wieviel Platz er zu dem außen Div halten muss?

Mfg Bub. Over and Out!

**Harry Hunt** · 10-07-2005 21:27

Versuch's mal so (die Reihenfolge der DIVs ist jetzt links, rechts, mitte!):

HTML-Code:

<div>
  <div style="width: 5px; float: left">
    (Abrundung Links)
  </div>
  <div class="width: 5px; float: right;">
    (Abrundung Rechts)
  </div>
  <div class="navigation" style="margin: 0px 5px 0px 5px">Mitte
  </div>
</div>

**Bub** · 11-07-2005 13:42

Also ich habe das jezt alles nach euren Anweisung gemacht und habe aber trtzdem noch Probleme.
Hier ein Screenshot davon:

Der mitlere Div soll sich ja an die gesamte Fenster Größe anpassen, was er aber im Moment nicht macht. Statdessen passt er sich nur der Länge des Textes an. Ich habe schon einmal versucht im CSS die "width: 100%;" einzustellen, was dazu geführt hat, das die hintere Abrundungsgrafik wieder von der mitleren überbelendet wird.
Ich glaube es ist besser wenn ich die Codes einfüge:

HTML-Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" href="css/blue.css" type="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>:: Homepage von ********* ::</title>
</head>
<body>
	<div class="pageTitel">
	:: Homepage von ********* ::
	</div>
	<!--end div.pageTitel-->
	<div class="navigationFrame">
		<div class="navigationLeft">
		</div>
		<!--end div.navigationLeft-->
		<div class="navigationRight">
		</div>
		<!--end div.navigationRight-->
		<div class="navigation">
		Test
		</div>
		<!--end div.navigation-->
	</div>
	<!--end div.navigationFrame-->
</body>
</html>

Und hier noch die CSS Datei:

Code:

body{
	font-family: Tahoma,sans-serif;
	color: #333333;
	line-height: 1.166;	
	margin: 0px;
	padding: 0px;
	background: #cccccc url("../styles/blue/bg_all.gif") fixed;
}

div.pageTitel{
	position: absolute;
	left: 4%;
	top: 25px;
	border: 0;
	font-family: Tahoma, Arial, sans-serif;
	font-size: 24px;
	color: #CCCCCC;
	width: 92%;
}

div.navigationFrame{
	position: absolute;
	left: 4%;
	right: 4%;
	top: 75px;
	height: 32px;
	width: 92%;
}

div.navigation{
	float: left;
	position: absolute;
	left: 5px;
        right: 5px;
	height: 32px;
	margin: 0px 5px 0px 5px;
	background-image: url(../styles/blue/bg_titel.gif);
}

div.navigationLeft{
	height: 32px;
	width: 5px;
	background-image: url(../styles/blue/bg_titel_left.gif);
	float: left;
}

div.navigationRight{
	float: right;
	height: 32px;
	width: 5px;
	background-image: url(../styles/blue/bg_titel_right.gif);
}

Ich hoffe ich geh euch nicht alzu sehr auf die Nerven mit meinen kleine Kinderproblemen.
Ist leider erst mein erstes Mal, dass ich mit Div's arbeite, da mich Frames und so weiter ankotzen.

Mfg Bub. Over and Out!

**Harry Hunt** · 11-07-2005 14:21

Mach überall das "position: absolute" raus. Daus brauchst du nicht. Und bei div.navigation musst du noch das 'float:left' löschen. Dann solte es tun.

**Bub** · 12-07-2005 13:40

Da funktioniert alles super. Aber nur im Firefox. Ich hänge mal zwei Bilder an. Eines wo es im Firefox zu sehen ist und das andere, ich traue es mich gar nicht auszusprechen, im Internet Explorer.
Aber was mich verwirrt ist, dass meine Dreamweaver Demo mir sagt, dass es in beiden eigentlich gleich aussehen müsste. Und Dreamweaver richtet sich da direkt nach der W3C.
Firefox:

Internet Explorer:

Dank eurer Hilfe sieht die Seite echt schon super aus. Noch einmal danke euch allen.

Mfg Bub. Over and Out!

**Harry Hunt** · 12-07-2005 15:31

Änder mal deinen DOCTYPE von
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

in

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/transitional.dtd">

Der Dreamweaver richtet sich übrigens auch nicht genauer nach der W3C als die Browser. Wenn ich's richtig im Kopf hab, verwendet der zum Darstellen der WYSIWYG-Ansicht die Opera-Engine.

**Bub** · 12-07-2005 15:44

Ne geht als noch nicht. Was kann das nur sein?

Mfg Bub. Over and Out!

**bine** · 13-07-2005 00:00

versuch es mal mit

Code:

*	{
	margin:0;
	padding:0;
}

am Anfang deiner CSS

und background-repeat:no-repeat;

Ich würde übrigens nen XHTML 1.0 Doctype nehmen.

**Bub** · 30-07-2005 01:16

Da ich nun alles mir erdenkliche probiert habe um meine Seite auch im Internet Explorer funktionoert, habe ich mich dazu entschlossen, die Page nun von Divs auf Tabellen umzustellen, da sie in so gut wie in jedem Browser gleich angezeigt werden.
So und da ich mit Tabellen ich noch nie so wirklich gut zurecht gekommen bin, kann es passieren, dass ich hier wirklicj die einfachsten Fragen stelle.

So um so wenig wie möglich verändern zu müssen suche ich befehle mit denen ich die Tabellen absolut proitionieren kann.

Das wärs erst einaml fürs erste.

Mfg Bub. Over and Out!

**Liz** · 30-07-2005 09:16

Wenn ich mal so sagen darf - mir helfen die tips - vielen Dank dafür

LiebGrüß
Liz

**Bub** · 30-07-2005 20:09

Jo mir haben sie auch geholfen nur leider funktioniert das nicht so wie ich es mir vorgestellt habe.
Ich kann mich nur anschliessen und auch danke sagen aber leider brauche ich ja noch mal.

Mfg Bub. Over and Out!

Thema: 3 Div's nebeneinander?

LinkBack

Themen-Optionen

Anzeige

3 Div's nebeneinander?

Empfehlenswerte Literatur von unserem Partner Terrashop

AW: 3 Div's nebeneinander?

AW: 3 Div's nebeneinander?

AW: 3 Div's nebeneinander?

AW: 3 Div's nebeneinander?

AW: 3 Div's nebeneinander?

Noch mehr Fragen

AW: Noch mehr Fragen

AW: Noch mehr Fragen

AW: Noch mehr Fragen

AW: Noch mehr Fragen

AW: 3 Div's nebeneinander?

Und noch einmal

AW: 3 Div's nebeneinander?

AW: 3 Div's nebeneinander?

Ähnliche Themen

Alle DIV's mit der gleichen class in js gleichzeitig ansprechen (verschieben etc.) !?

Divs passen sich dem Brauser an, haben aber doch ne feste mindestbreite

'top' eines divs rausbekommen

divs nebeneinander alle 100% Höhe

Inline-Links in scrollbaren DIVs?? (Opera/Mac-IE-Problem)

Lesezeichen

Lesezeichen

Berechtigungen