zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Höhe des "Center" Bereichs nicht an "menu" ausrichten, aber wie?

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 30.08.2007, 19:40
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 15.06.2007
Beiträge: 6
surffix befindet sich auf einem aufstrebenden Ast
Frage Höhe des "Center" Bereichs nicht an "menu" ausrichten, aber wie?

Hallo zusammen,

die Höhe des DIV Bereich Center wird immer gemessen an dem Inhalt des Bereichs "Menu". Werde also mehrere Menüpunkte in die Seite eingefügt, rutscht der Bereich Center weiter nach unten. Wie kann man das verhindern?

ANbei der Code:

die css Datei:
Code:
body { 
	margin:15px 0; 
	color:#685E43;  
	line-height: 1.4em; 
	background : url(bg.gif);
	font-family: Arial, Helvetica, sans-serif;
}

.logo {
	margin: -66px 0 0px 39px; 
}

.toph { 
	background: #3D3E42 url(top.jpg) no-repeat center; 
	height: 67px; 
}

.content { 
	margin: 0 auto; 
	width: 665px; 
	background: #3D3E42 url(bg-mid.jpg) repeat-y center;
}

.menu {
	width: 149px;
	color:#A90209;
	margin: 20px 0 0px 43px;
}

.center { 
	width: 396px; 
	min-height: 400px;
	font-size: 95%; 
	margin: -354px 0 4px 225px !important;
	background: #eee7d2;
}

.footer { 
	background: #3D3E42 url(bot.jpg) no-repeat center;
	height: 70px;
}

.footer_text {
	color:#FFFFFF;
	font-size:90%;
	text-align:center;
	padding: 26px; 
}


/* 	Links	*/
A:link {
	COLOR: #9e1b34
}

A:visited {
	COLOR: #9e1b34
}

A:hover {
	BACKGROUND: rgb(221,211,213); COLOR: #9e1b34; TEXT-DECORATION: none
}

A:active {
	COLOR: #a79d9f; TEXT-DECORATION: none
}



/*	Menu	*/
.hideMe {
	DISPLAY: none
}

A.section {
	font-size: 13px; 
	PADDING-RIGHT: 2px; 
	BORDER-TOP: #eee7d2 1px solid; 
	DISPLAY: block; 
	PADDING-LEFT: 6px; 
	PADDING-BOTTOM: 4px; 
	PADDING-TOP: 4px; 
	FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; 
	TEXT-DECORATION: none; 
}

A.section:link {
	BACKGROUND: #DDD5BE; 
	COLOR: #A90209;
}

A.section:visited {
	COLOR: #A90209;
}

A.section:active {
	COLOR: #A90209;
}

A.section:hover {
	BACKGROUND: #eee7d2; 
	COLOR: #A90209;
}
Danke für eure Hilfe...
greets
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 30.08.2007, 19:50
Benutzerbild von ArcVieh
//
XHTMLforum-Kenner
 
Registriert seit: 19.12.2006
Ort: Gütersloh
Beiträge: 1.844
ArcVieh sorgt für eine eindrucksvolle AtmosphäreArcVieh sorgt für eine eindrucksvolle Atmosphäre
Standard

Sollen wir uns den HTML Code erraten?
CSS ist ohne HTML schlichtweg wertlos!

Deine Problembeschreibung läßt auch zu Wünschen übrig - was genau möchtest Du?
__________________
CSS-FAQ beantwortet die meisten Fragen | Retro coding gegen Divitis | Code validieren & posten für Hilfe
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 01.09.2007, 20:14
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 15.06.2007
Beiträge: 6
surffix befindet sich auf einem aufstrebenden Ast
Frage Ergänzung

Hallo,

hier der HTML Code:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML><HEAD><TITLE>Titel</TITLE>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1" 
iso-8859-1?>
<STYLE type=text/css media=all>@import url( images/style.css );
</STYLE>
<LINK title="RSS 2.0" href="rss/" type=application/rss+xml rel=alternate>
<META content="MSHTML 6.00.2900.2180" name=GENERATOR></HEAD>
<BODY>
<DIV class=content>
<DIV class=toph></DIV>
<DIV class=logo><A href="#"><IMG height=165 
alt="Beschreibung" 
src="logo.jpg" width=158 border=0></A> 
</DIV>
<DIV class=menu><A class=section 
href="#1">Startseite</A><SPAN 
class=hideMe><BR></SPAN><A class=section 
href="#3">Kontakt</A><SPAN class=hideMe><BR></SPAN><A 
class=section href="#4">Impressum</A><SPAN 
class=hideMe><BR></SPAN></DIV>
<DIV class=center>
<H1>Lorem ipsum dolor</H1>
<P>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi 
enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis 
nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in 
hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu 
feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit 
praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh 
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad 
minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut 
aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in 
vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla 
facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent 
luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber 
tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod 
mazim placerat facer possim assum.</P>
</DIV>
<DIV class=footer>
<DIV class=footer_text>Copyright 2007 | <A 
href="#">Login</A> | <A 
href="impressum.php">Impressum</A> 
</DIV></DIV></DIV></BODY></HTML>
Ergänzung zur Fehlerbeschreibung:
Wenn in dem DIV "Menu" weitere Menüpunkte hinzugefügt werden, verruscht die Höhe des Bereichs: "Center". Wie kann die Ausrichtung unabhängig von Menu statt finden!?

Danke...
Mit Zitat antworten
  #4 (permalink)  
Alt 02.09.2007, 06:18
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Du versuchst, float durch negativen margin-top zu ersetzen - das kann nicht klappen. Lasse #menu und #center jeweils links floaten (zum Clearen siehe FAQ Punkt 2).
Mit Zitat antworten
  #5 (permalink)  
Alt 05.09.2007, 11:10
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 15.06.2007
Beiträge: 6
surffix befindet sich auf einem aufstrebenden Ast
Standard

Hallo,

danke, habe mir deine Vorschläge und Artikel mal zu Herzen genommen. Demnach die CSS Datei umgestellt. Nun taucht das Problem auf, dass der "Firefox" alles ordentlich darstellt, aber beim IE und bei Opera so einiges falsch angezeigt wird.

Aus diesem Grund hatte ich versucht die Befehle float zu vermeiden.
Anbei die CSS Datei:

Code:
.content { 
	margin: 0 auto; 
	width: 665px; 
	background: #3D3E42 url(../images/bg-mid.jpg) repeat-y center;
}

.menu {
	clear: both;
	width: 149px;
	color:#A90209;
	float:left;
	margin: 20px 0 0px 43px; 
}

.center { 
	float:rigth;
	width: 396px;
	max-width: 396px; 
	min-height: 350px;
	font-size: 95%; 
	margin: 0 0 0 225px !important; 
	background: #eee7d2;

}

.footer { 
	clear:both;
	background: #3D3E42 url(../images/bot.jpg) no-repeat center;
	height: 70px;
}
Sind die Befehle vielleicht irgendwie falsch angeordnet oder stimmt die Reihenfolge nicht?
Danke,
Mit Zitat antworten
  #6 (permalink)  
Alt 05.09.2007, 12:15
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Ein Tippfehler, validiere den Schnipsel mal.
Mit Zitat antworten
  #7 (permalink)  
Alt 05.09.2007, 13:12
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 15.06.2007
Beiträge: 6
surffix befindet sich auf einem aufstrebenden Ast
Standard Antwort

Hallo,

auf die idee hätte ich auch selbst kommen können.
Nach der Entfernung des Tippfehlers, wurden keine Fehler gefunden.

Das Design wird dennoch in IE und Opera falsch dargestellt.
Mit Zitat antworten
  #8 (permalink)  
Alt 05.09.2007, 13:44
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Validiere auch mal das Markup und lade dann alles hoch, poste den Link und schreibe dazu, um welche IE- und Opera-Version es geht, und was falsch dargestellt.
Mit Zitat antworten
  #9 (permalink)  
Alt 21.09.2007, 22:41
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 15.06.2007
Beiträge: 6
surffix befindet sich auf einem aufstrebenden Ast
Standard hallo

Hallo,

so habe nun endlich nochmal was Muße gefunden mich an das Design zu setzen. Habe nun mal ne Version Online gestellt...

Lorem ipsum dolor

Der Fehler wird in fast alle IE Versionen angezeigt. Firefox hat gar keine Probleme. Bei Opera sind es nur Kleinigkeiten. (Jeweils die aktuellen Versionen)
Das Validieren führt zu keinen Fehlern...

Danke für weitere Informationen!
greets
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 23.09.2007, 17:59
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Als erstes: IE Doubled Float-Margin Bug - CSS fixes and workarounds

Und bitte validieren!

Weiterhin: Das Menü gehört in eine Liste (siehe mein FAQ-Beitrag), und das Logo braucht kein umgebendes div - allenfalls eine h1 (die würde ich persönlich hier einsetzen).

Geändert von heiko_rs (23.09.2007 um 18:01 Uhr)
Mit Zitat antworten
Sponsored Links
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
<div>-Bereich mit Höhe des gesamten BrowserFensters BullPit CSS 3 13.02.2005 11:49
Höhe des DIVs automatisch auf volle Höhe scheichxodox Knowledge Base 5 21.12.2004 11:31
100% Höhe des Bodys do CSS 7 25.11.2004 22:53
3 spalten layout - immer auf gleiche höhe "auffüllen&qu dimension CSS 2 22.09.2004 13:02
3 div-Container sollen autom. die Höhe des längsten haben DanEl CSS 4 13.06.2004 22:39


Alle Zeitangaben in WEZ +2. Es ist jetzt 09:03 Uhr.