3 Div's nebeneinander?

Bub · 10. Juli 2005

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. Juli 2005

Hi!

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

Gruß - Pit

Bub · 10. Juli 2005

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. Juli 2005

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. Juli 2005

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. Juli 2005

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

HTML:

<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. Juli 2005

Noch mehr Fragen

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:

<!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. Juli 2005

AW: Noch mehr Fragen

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. Juli 2005

AW: Noch mehr Fragen

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. Juli 2005

AW: Noch mehr Fragen

Ä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. Juli 2005

AW: Noch mehr Fragen

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

Mfg Bub. Over and Out!

bine · 13. Juli 2005

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. Juli 2005

Und noch einmal

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. Juli 2005

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

LiebGrüß
Liz

Bub · 30. Juli 2005

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!

Liz · 30. Juli 2005

Heh , hallo Bub!

du bist doch schon so weit gekommen - mit den Divs.

Ich bin strikt gegen Tabellenlayout.
Der Internet-Explorer ist mit soviel Fehlern behaftet, dass man einfach viele Sachen einbauen muss - Hacks - und so weiter.

Nicht aufgeben.
Du hast hier doch schon viele Hinweise bekommen - also wirf nicht gleich das Handtuch und mach weiter

LG Liz

Bub · 30. Juli 2005

Ich berwerfe das Projekt ja auch nicht. Ich behalte es schön auf meiner Platte und versuche es einfach nur mal ob es mit Tabellen auf mehr Vrowsern sein ursprüngliches Bild zeigt als mit divs.
Weil ich kenne auch jemanden der arbeitet in einer Webdesign Firma und mit dem habe ich mich auch schon unterhalten und auch er war von meinem bisherigen Layout sehr beeindruckt, aber er hat mir von Divs abgraten und hat gesagt, dass tabellen in allen Browsern immer gleich angezeigt werden und deshalb nicht solche Probleme auftreten werden. Gerdae aus diesem Grund will ich, um für Projekte in der Zukunft zu lernen wissen welche Methode ich von Anfang an beutzen muss um später keine Probleme zu bekommen.
Die Seite die ich Entworfen habe oder eher gesagt, das Layout war nur als Übung gedacht. Dann habe ich mich jedoch entschlossen dieses Design auf der HP von meinem Patenonkel anzuwenden die ich auch demnächst in Anspruch nehmen will.
Meine wirkliche Homepage soll zwar in etwa so aussehen aber alle Grafiken werden von mit noch einmal überarbeitet in eine andere Frabe geändert.

Doch trotzdem bin ich euch allen hier sehr dankbar für eure Unterstützung und Tips da sonst wie schon so viele Projekte von mir auch dieses ihr Ende im M$ Papierkorb gefunden hätte.
Danke !!! :amazed: :amazed:

Mfg Bub. Over and Out!

dkdenz · 30. Juli 2005

Jetzt mal so einfach orientierunghalber:
es spricht wirklich nix gegen ein Tabellenlayout,
wenn es sich, wie in Deinem Beispiel um drei Spalten handelt.
Aaaaaber:
sobald Tabellen ineinander verschachtelt werden,
kann es sein, das manche Browser einfach an ihre Grenzen geraten,
was das schnelle Aufbauen des Layouts anbelangt.
Zudem bekommen Nur_Text_browser (wie z.B. Lynx) Probleme damit.
Was früher gut und toll war, muss nicht heute genauso sein.
Die Browser werden schneller und genauer,
aber genau da liegt das Problem:
der Seitenaufbau mit Tabellen dauert länger, als würdest Du divs benutzen.
Grund hierbei ist z.B. das ein Tabellenkonstrukt erstmal von <table> bis </table> durchgeackert werden muss, wobei bei divs das viel schneller geht.
Zudem sind Tabellen eigentlich nur für Inhalte da, die für einen tabellarischen Aufbau auch geeignet sind...
Beispiel:
Bundesliga,
Fettanteile einer Quiche,
Kontrollergebnisse bei einer Gewichtskontrolle...

Bub · 31. Juli 2005

Ok ich muss sagen ihr besonders dkdenz habt mich überzeugt. Ich werde bei den Div's bleiben.
Nur kann mir einer helfen warum das mit dem Layout nicht im Internet Explorer funzt. Ich kann euch auch gerne mein ganzes Layout auch als Archiev ins Internet stellen und ihr könnt euch dran austoben weil ich bin mit meinem Latein am Ende.

Meldet euch falls ihr das Archiev haben wollt. Dann schick ich es euch via Mail oder stelle es auf meinen Mini Webspace.

Mfg Bub. Over and Out!

Edit: So ein *.rar Archiev befindet sich auf meinem Mini Webspace. Hier könnt ihr es runterladen.

dkdenz · 31. Juli 2005

Hi Bub,
stelle das Ding auf Deinen Webspace.
Wir kriegen das schon irgendwie hin...versprochen!

3 Div's nebeneinander?

New member

pit-r

Guest

New member

pit-r

Guest

New member

New member

New member

New member

New member

New member

New member

Lounge-Member

New member

Lounge-Member

New member

Lounge-Member

New member

New member

New member

New member