zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden menü will nicht da hin wo es hin soll...

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 24.01.2008, 21:57
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 24.01.2008
Beiträge: 3
Freetoast ist zur Zeit noch ein unbeschriebenes Blatt
Standard menü will nicht da hin wo es hin soll...

Hallo Community,

in html halbwegs sattelfest hab ich probiert mit nem Kumpel, der css beherrscht, eine Seite zu basteln. Dummerweise wird besagter Herr aus beruflichen Gründen gut einen Monat ausfallen, und ich hänge in der Luft. In meiner Verzweiflung wende ich mich also an Euch.

Problem Nr. 1:
Hier seht ihr das Layout ohne Menü, alles in Butter soweit (jedenfalls im Firefox).

Hier seht ihr die ganze Pracht mit Menü, welches nicht da auftaucht wo ich es gerne hätte, nämlich zwischen der ornamentalen grafik links und dem logo rechts am unteren rand des headers. Vielmehr zerreisst mir das menu das gesamte Layout.

Frage: Wie kriege ich das Menü da hin wo ich es haben will? Was hab ich falsch gemacht?

Problem Nr. 2:
Die beiden grauen Spalten sollten nach Möglichkeit gleich lang sein, unabhängig vom Inhalt. Mit anderen Worten, die Spalte mit dem "längsten" Inhalt soll die Spaltenlänge beider Spalten definieren sodass diese immer auf gleicher Höhe enden, egal ob in der rechten oder der linken Spalte mehr (längerer) Text steht.

Frage: Wie geht das?

Problem Nr. 3:
Warum weigert sich der IE die Schrift im Footer mittig (in der Höhe mittig also) anzuzeigen?

Frage: Wie kann ich dem IE diese Flausen austreiben?

Hier nun der css-code, das html könnt ihr ja in eurem Browser anschauen:

Code:
		#wrapper {
			width: 1024px;
			\width: 1044px;
			w\idth: 1024px;
			margin: 10px;
			margin-left: auto;
			margin-right: auto;
		}
		
		#left {
			float: left;
			width: 122px;
			height: 300px;
			background: url(../img/img_left.gif) no-repeat right top;
		}

		#right {
			float: right;
			width: 122px;
			height: 300px;
			background: url(../img/img_right.gif) no-repeat left top;
		}

		#container {
			margin-left: 122px;
			margin-right: 122px	;
		}
		
		#top {
			height: 40px;
			background: url(../img/img_top_right.gif) no-repeat right bottom;
		}				
		
		#banner {
			width: 780px;
			height: 135px;
			margin-bottom: 10px;
			background: url(../img/img_header_left.gif) no-repeat left bottom;
			background-color: #932923;
		}
		
		#logo {
			background: url(../img/img_header_right.gif) no-repeat right bottom;
			width: 780px;
			height: 135px;
			margin: 0px;
			padding: 0px;
			}

		#content {
			padding: 30px;
			padding-left: 160px;
			margin-right: 225px;
			background: url(../img/img_bg_content.gif) no-repeat left top;
			background-color: #e5e1de;
		}

		#sidebar-a {
			float: right;
			width: 185px;
			margin: 0;
			padding: 15px;
			padding-top: 45px;
			background-color: #e5e1de;
			display: block;
		}
		

		#footer {
			padding: 1px;
			padding-left: 10px;
			background-color: #932923;
			margin-top: 10px;
		/*	width: 780px; */
			height: 40px;
		}
		
		
		
		
		.clearfix:after {
  	  		content: "."; 
    		display: block; 
    		height: 0; 
    		clear: both; 
    		visibility: hidden;
		}
		
		.textfield {
			background-color: #fff;
			padding-left: 15px;
			padding-bottom:10px;
		}
		
		.newsitem {
			margin-bottom: 20px;
		}
		
		.textfield p {
			margin-left: 20px;
		}
		
		
		
		
		
	
		#sidebar-a h2, #sidebar-a h3 {
			margin: 0.3em 0;
		}
	
		#sidebar-a h3, #sidebar-a p {
			margin-left: 25px;
		}	
		
		#sidebar-a p {
			margin-top: 0.8em;
		}

		
		
		
		
		
		h1 {
			font-family: Helvetica, Verdana, Arial, sans-serif;
			color: #932923;
			letter-spacing: -1px;
			text-align: left;
			font-weight: normal;
			font-size: 1.4em;			
		}
		
		h2 {
			font-family: Helvetica, Verdana, Arial, sans-serif;
			color: #932923;
			letter-spacing: -1px;
			text-align: left;
			font-weight: normal;
			font-size: 1em;	
		}
		
		h3 {
			font-family: Helvetica, Verdana, Arial, sans-serif;
			color: #4b4b4b;
			letter-spacing: -1px;
			text-align: left;
			font-weight: bold;
			font-size: 0.6em;	
		}

		h4 {	
			font-family: Helvetica, Verdana, Arial, sans-serif;
			color: #000;
			letter-spacing: 0px;
			text-align: left;
			font-weight: bold;
			font-size: 0.6em;
		}
		
		p {
			line-height: 1.8em;
			text-align: left;
			font-size: 0.6em;
			color: #4b4b4b;
			font-family: Verdana, "Lucida Grande", Arial, sans-serif;			
		}

		ul#menu { 
			width: 100%; 	
			height: 43px; 
			background: #932923 top left repeat-x; 
			font-size: 0.8em; 
			font-family: "Lucida Grande", Verdana, sans-serif; 
			font-weight: bold; 
			list-style-type: none; 
			margin: 0; 
			padding: 0; 
		}

		ul#menu li { 
			display: block; 
			float: left; 
			margin: 0 0 0 5px; 
		}

		ul#menu li a { 
			height: 43px; 
			color: #777; 
			text-decoration: none; 
			display: block; 
			float: left; 
			line-height: 200%; 
			padding: 8px 15px 0; 
		}
		
		ul#menu li a:hover { 
			color: #333; 
		}

		ul#menu li a.current{ 
			color: #FFF; 
			background: #FFF top left repeat-x;
			padding: 5px 15px 0; 
		}

Sorry, ich bin absoluter css-noob (merkt man sicher) und versuche es so zu lernen wie ich html gelernt hab, nämlich praktisch. Eure Antworten weiß ich deshalb sehr zu schätzen.

Danke für eure Hilfe schon im voraus,

Rolf
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 25.01.2008, 07:56
Benutzerbild von hubspe
Eisen 7 ole....
XHTMLforum-Kenner
 
Registriert seit: 22.06.2007
Ort: Passau
Beiträge: 7.086
hubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblick
Standard

Hi Rolf,

zu 1: Nimm doch mal bei ul#menü die height:43px; weg, dann schauts schon gleich anders aus.
ul#menü li a - height:43px; weg und ein bißchen mit padding spielen, dann kannst du das Menü nach unten verschieben.

zu 2: Faux Columns Technik. Funktioniert aber nur wenn alle Container bündig sind.

zu 3: div#footer height:40px; wegnehmen dann ist es vertikal in der Mitte.
Höhe des footers kannst du über line-height für h4 steuern.

Getestet nur im FF.

Gruß
Klaus
__________________
Ein mehrfacher Gruß aus dem Südosten
Klaus
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 25.01.2008, 14:08
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 24.01.2008
Beiträge: 3
Freetoast ist zur Zeit noch ein unbeschriebenes Blatt
Standard

Super, hat geholfen, wenigstens das mit der Menüausrichtung und dem Footer.

Allerdings kann ich die Faux-columns-Methode nicht anwenden, da ich im #content schon eine Hintergrundgrafik verwende. Oder hab ich da was falsch verstanden bzw. denke ich nicht weit genug?

Danke,

Rolf
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Darstellungsproblem flohpapa CSS 3 16.12.2009 09:55
Vertikale Navigation: IE6 - Whitespace-Bug? b.erry CSS 6 12.02.2009 17:46
Umbruch in einem LI bei horizontalem Menü M4rco CSS 12 13.10.2006 12:26
Navigation - Menü T.S. CSS 6 18.02.2006 19:49


Alle Zeitangaben in WEZ +2. Es ist jetzt 23:45 Uhr.