Zur Navigation

CSS: Elemente nebeneinander positionieren

1 Christian

Salve

Also.. nachdem Ihr mir gezeigt habt wie es funkt, scheint es wirklich zu gehen. Noch ein bisserl Unterstützung von den vielen Seiten, auf denen viele Referenzen aufgeführt sind.... Es geht vorwärts. Trotzdem habe ich hier wieder einmal ein Problem: Ich möchte im WD ein menu einrichten. Dieses erhält eine separate CSS, da mir die Unterscheidung der verschiedenen Links a) zu schwer ist und b) ich nicht zu fest ins bestehende PHP-Script eingreifen möchte. Da bin ich noch weniger zu Hause als bei CSS.

Wie kann ich dafür sorgen, dass das Menu auf der rechten Seite ist und sich somit etwas vom Rest abhebt? Klar, "<p align..." wäre eine Lösung. Ich möchte es aber mit einer class über das CSS erreichen.

Gruss und Danke für den Tip
Christian

---- nix Signatur

01.02.2007 13:48

2 Christian

hat sich erledigt, ich glaube ich habe es gefunden.... :
div {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	background-color: #FFFFFF;
	border: 2px solid #000099;
	position: relative;
	width: 90%;
	float: left;
	padding-left: 10px;
	padding-top: 5px;
	padding-bottom: 5px;

---- nix Signatur

01.02.2007 13:58

3 Jörg Kruse

Hallo Christian,

grundsätzlich gibt es zwei Möglichkeiten, zwei Elemente nebeneinander zu positionieren

Gehen wir dabei von so einemn Grundaufbau aus:

<body>
<div id="header"></div>
<div id="menu"></div>
<div id="content"></div>
<div id="footer"></div>
</body>

1. mit float

#menu {
width:150px;
float:left;
}

#footer {
clear:left;
}

Dies funktiniert so, wenn das Menu im HTML-Quelltext vor das Content-Div steht. Andernfalls kann man auch das Content-Div analog mit einem float:right versehen - es benötigt dann allerdings eine feste Breite

2. mit position:absolute

#header {
height:150px;
}

#menu {
position:absolute;
top:150px; /* Hoehe des Headers */
left:0;
width:150px;
}

#content {
margin-left:150; /* Breite des Menüs */
}

Edit, da war ich schon am Schreiben :):
hat sich erledigt, ich glaube ich habe es gefunden.... :

Aver vielleicht kann jemand anders auch noch mit meiner Kurz-Übersicht etwas anfangen

01.02.2007 14:07 | geändert: 01.02.2007 14:11

4 Christian

vielleicht kann jemand anders auch noch mit meiner Kurz-Übersicht etwas anfangen
Jepp.... oder mit meiner ;)

Danke auf jeden Fall für Deine rasche Hilfe!

Gruss
Christian

---- nix Signatur

01.02.2007 14:13

5 Christian

Ich habe nochmal ein problem mit links und rechts... gut dass ich politisch eher in der Mitte bin ;)

div {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	position: relative;
	float: left;
	padding-left: 8px;
	padding-top: 2px;
	padding-bottom: 2px;
	border-top: 10px solid #CC0033;
	border-right: 10px none #CC0033;
	border-bottom: 10px none #CC0033;
	border-left: 10px none #CC0033;
	background-color: #FFFFFF;
	width: 100%;
	height: 150px;
	background-image: url(headerlogo.png);
	background-repeat: no-repeat;
	background-position: right left;
}
Ist etwas gross geworden.... 
background-position: right left;
Ich denke, hier steckt der Wurm drin: Ich möchte die Grafik ganz am Rand oben rechts. Links ist die Navigation. Im Moment ist die Grafik ganz oben links. Lösche ich die Anweisung *left* ist die Grafik zwar rechts, aber nicht mehr ganz oben.
Also wie nun? Irgendwie scheints mit left nicht so ganz korrekt zu sein für oben....

thx für Tipps
Christian

---- nix Signatur

01.02.2007 18:33

6 Jörg Kruse

Ich möchte die Grafik ganz am Rand oben rechts.

Der Wert für oben ist top:

background-position:right top;

01.02.2007 18:39

7 Christian

pffft.. ich Depp habe left top ausprobiert und war überrascht, das es nicht geklappt hat.

Danke!
Christian

---- nix Signatur

01.02.2007 18:43

8 Christian

Ich nochmal....

Ich habe im div inhalt ein weiteres Div eingefügt. Das funkt auch soweit. Mittels float right klebt es auch auf der richtige Seite. Nur habe ich das Problem, dass sich das div footer über das viv werbung schiebt und dieses in der Mitte teilt.
Evtl. noch wichtig: Das div werbung hat die Höhe von 600px, inhalt keine Angabe und footer auch keine Angabe.

Wie muss ich das machen, dass footer zu Füssen von werbung klebt? im css4you habe ich nichts gefunden oder falsch gesucht....
#footer {
	position: relative;
	height: 40px;
	margin: 8px 15px 0px 15px;
	padding-top: 4px;
	border-top: 2px solid #EADDC5;
	background-color: #FFFFFF;
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 15px;
	padding-left: 10px;
}

#werbung {
	position: relative;
	height: 600px;
	weight: 120px;
	float: right;
	background-color: #FFFFFF;
	
}

Gruss
Christian

---- nix Signatur

05.02.2007 15:03

9 Jörg Kruse

Hallo Christian,

vielleicht hilft dem Footer ein clear:right; - ansonsten wäre es hilfreich eine Beispielseite oder den Gesamtcode zu sehen

05.02.2007 15:29

10 Christian

Das hat geholfen, Jürg!

Thx und einen schönen Abend...
Christian

---- nix Signatur

05.02.2007 16:03