Container passt sich in der Höhe nicht an andere Ebenen an - Seite 2

Crizzo · #11 (**permalink**) 09.07.2007, 21:41

z.B.: #logoblock und #headimage kann man zusammen legen

Es bringt nicht, dort lauter kleine Grafiken zu machen. Erstell eine neue Box und gibt ihr die ganzen Bilder aus #headimage und #logoblock als eine Grafik als Hintergrund.
Zusäztlich brauchst du kein #Randli und #randre. Du hast eine statische Seite, so kannst du das alles per background-image in die #navbar, #contentre usw. einbinden.

Vermeide leere Elemente.

ArcVieh · #12 (**permalink**) 09.07.2007, 21:59

li floaten lassen, auf ul list-style:none anwenden, auf a eine Breite und Höhe anwenden (die Breite auch auf li anwenden).

nicoendter · #13 (**permalink**) 09.07.2007, 22:29

Zitat:

Zitat von ArcVieh

li floaten lassen, auf ul list-style:none anwenden, auf a eine Breite und Höhe anwenden (die Breite auch auf li anwenden).

Ahso mal sehen ob es funktioniert. Hast du dabei auch bedacht das jeder Navigationspunkt eine andere Bilddatei hat.

@BlackHawk

das mit der Zusammenlegung von #Logoblock und #Headimage ist ein bisschen schwierig da sich das Bild bei #Headimage auf jeder Seite ändert.

Crizzo · #14 (**permalink**) 09.07.2007, 22:33

aber die brauchst keine acht oder wie viele Bilder das sind...

nicoendter · #15 (**permalink**) 09.07.2007, 22:44

Das habe ich so gemacht bzw. unsere Designerin da so die ladezeit verkürzt werden.
Aber die Kritik nehm ich entgegen.

größeres Problem ist aber immernoch das mit der Navigation. Auch nach ArcVieh's Anweisung klappt es nicht so wie es soll.

Mein StyleSheet:

Code:

li {
	float:left;
	background-color: #FFFFFF;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #545a79;
	width: 24px;
	heiht: 800px;
}
ul {
	float:left;
	list-style:none;
}
a {
	width: 24px;
	heiht: 800px;
	background-color:#FFFFFF;
	display:block;
}
a:hover {
	display:block;
	width: 24px;
	heiht: 800px;
	background-color:#99cc33;
}

ArcVieh · #16 (**permalink**) 09.07.2007, 22:54

Es heißt height.
Die Ladezeiten werden durch mehrere Dateien nicht verkürzt. Es sei denn man spart sich bei größeren grafiken viele 'gleich aussehnde' Flächen. Im Schnitt kann die Ladezeit dadurch sogar maximirt werden.
Der Vorteil ist nur, das man schneller was zu sehen bekommt. Das ist aber auch mit Interlaced für Grafiken umsetzbar (Dadurch wird eine Datei aber auch größer).

eur_logo.gif sollte man als <img/> einbinden.

Code:

<img src="eur_logo.gif" alt="Logo von So und So" />

Dabei gehört es zum guten Stil, der Grafik auch die Größe zuzweisen, per CSS oder direkt eben. (Damit die Seite beim laden nicht 'springt'.)

Den großen Banner in so viele kleine Grafiken zu zerschlagen, ist blödsinn! Bitte als eine Grafik nehmen und dafür als Element h1 verwenden (Gilder-/Levin Image Replacement Lesen!).

EDIT: Habe das mit deinen Grafiken in den Links beachtet, ja. Wenn Du das umgesetzt hast was ich gesagt habe, zeig es bitte einmal online, also wenn es nicht funktionieren sollte.

nicoendter · #17 (**permalink**) 09.07.2007, 23:05

Ach mensch blöde Tippfehler

aber jetzt sieht es so aus....

HIER

Ausserdem umrahmt er die img jetzt in blau. Warum?
Ausserdem habe ich für jeden Navigationspunkt 2 verschiedene img bei a und hover. Wie soll ich das machen.

Tut mir Leid das ich so lange Eure Zeit beanspruche...

EDIT: Er positioniert das auch falsch... Seht Ihr?
Und auf einer Höhe sollen die einzelnen Anführungspfeile der img auch sein.

ArcVieh · #18 (**permalink**) 09.07.2007, 23:16

Auf ul sollte noch margin 0 und padding 0 angewandt werden.

Code:

#Navbar {
	float:left;
	width:150px;
	z-index:2;
	background-color:#FFFFFF;
}
li {
	float:left;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #545a79;
	width: 24px;
	height: 800px;
}
ul {
	float:left;
	list-style:none;
}
a {
	width: 24px;
	height: 800px;
	background-color:#FFFFFF;
	display:block;
}
a:hover {
	display:block;
	width: 24px;
	height: 800px;
	background-color:#99cc33;
}

So würde ich das nicht machen. Sondern wendern so.

Code:

#navbar ul {}
#navbar ul li { }
#navbar ul li a { }
#navbar ul li a:hover { }

Ist das nötig das sich der Text beim hovern verändert? Dann musst Du das img per CSS auf den Hyperlink anwenden und dazu müsstest Du für jeden einzelnen Link eine Klasse bzw. ID anfertigen.

Ach ja:

Code:

#navbar ul li a img { border:0; }

nicoendter · #19 (**permalink**) 09.07.2007, 23:35

super es funktioniert. Nur sind die Bilder nich alle auf einer Höhe (Anführungspfeile).

Zitat:

Zitat von ArcVieh

Ist das nötig das sich der Text beim hovern verändert? Dann musst Du das img per CSS auf den Hyperlink anwenden und dazu müsstest Du für jeden einzelnen Link eine Klasse bzw. ID anfertigen.

Ja das wäre schon super. Ist einfach schöner fürs Auge

Wie muss ich das machen mit den einzelnen Hover img?
Vll. ein Beispiel?

ArcVieh · #20 (**permalink**) 09.07.2007, 23:39

Code:

#navbar ul li a#hotspot { background-image: ... }
#navbar ul li a#grafixx { background-image: ... }
#navbar ul li a#jobs { background-image: ... }

#navbar ul li a#hotspot:hover { background-image: ... }
#navbar ul li a#grafixx:hover { background-image: ... }
#navbar ul li a#jobs:hover { background-image: ... }

Ist leider umständlich. Um die Pfeile auf einer Höhe zu bekommen, müsstest Du die Grafiken direkt bearbeiten. So das zum Beipiel jede Grafik 50 Pixel hoch ist usw.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Mehrere kleine Container links neben einem grpßem Container	backlash86	CSS	3	24.02.2010 14:58
div container verschachteln	blau	CSS	2	05.12.2006 19:44
100% Höhe in einem Variablen Container (ie)	MrLight	CSS	0	04.12.2006 16:04
Container nimmt nicht die Höhe seines Inhalts an	Lestat	CSS	10	04.08.2005 13:47
Mitwachsende DIV Container	Myjestic	CSS	9	27.07.2005 17:37