zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Probleme mit <div>-Elementen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 09.09.2007, 16:54
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 07.09.2007
Beiträge: 17
Christian24 befindet sich auf einem aufstrebenden Ast
Standard Probleme mit <div>-Elementen

Hallo,

ich möchte ein Layout mit div-Elemente entwerfen. Jetzt habe ich aber das Problem, dass die Nav-Box nur an der gewünschten Stelle angezeigt wird, wenn ich im umschließenden div-Container ein Zeichen (hier den ".") ausgebe. Andernfalls wird das Menu neben der kopf-Box angeordnet. Warum? Ich bin davon ausgegangen, dass ein geschachteltes Element auch nur innerhalb des umschließenden Elements angezeigt werden kann?!

Code:
<body id="site">
<div id="kopfzeile">
<div id="topmenu">
			<ul id="top-nav">
			<li><a href="">Home</a></li>
			<li><a href="">News</a></li>
			<li><a href="">Links</a></li>
			<li><a href="">IMPRESSUM</a></li>
			</ul>			
</div>
</div>

<div id=mitte>
	<div id=links>.
		<ul id="nav">
			<li><a href="">Home</a></li>
			<li><a href="">News</a></li>
			<li><a href="">Links</a></li>
			<li><a href="">IMPRESSUM</a></li>
		</ul>	
	</div>
</div>

<div id=fuss>
</div>
</body>


Code:
#site {
background-color: black;
}

#kopfzeile {
/*border: 1px solid #0000ff;*/
height: 159px;
float: left;
width: 810px;
margin-top: 0px;
background-image:url(images/titel.jpg);
background-repeat:no-repeat;
}

#mitte {
/*border: 1px solid #0000ff;*/
border-color: white;
float: none;
width: 810px;
background-image:url(images/mitte.jpg);
}

#links {
border: 1px solid #0000ff;*/
height: 200px;
width: 180px;
}

#nav {
border: 1px solid #00ff00;
float: links;
background-color: green;
margin-top: 5px;
}

#nav li{
list-style: none;
border: 1px solid #ffff00;
float: rechts;
background-color: green;
list-style: none;
margin-top: 5px;
}


#fuss {
/*border: 1px solid #0000ff;*/
border-color: white;
height: 108px;
float: none;
width: 810px;
background-image:url(images/fuss.jpg);
}

#topmenu {
/*border: 1px solid #0000ff;*/
height: 20px;
float: none;
width: 350px;
margin-top: 105px;
margin-left: 20px;
}

/*entfernt die Punkte der Aufzählung*/
 ul#top-nav
{
list-style: none;
padding: 0;
margin: 0;
float: left;
white-space: nowrap;
}

/*ordnet das Menu in Reihe an*/
ul#top-nav li{
display: inline;
padding: 0;
float: left;
margin: 0;
font-size: 10px;
height: 20px;
line-height: 20px;
white-space: nowrap;
margin-right: 1px;
}

/*formatiert den Text*/
ul#top-nav li a{
/*border: solid;*/
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
height: 20px;
display: block;
padding-left: 5px;
padding-right: 5px;
text-decoration: none;
color: #FFFFFF;
margin-left: 1px;
white-space: nowrap;
background-image:url(images/rechts.gif);
background-position:bottom right;
background-repeat:no-repeat;*/
}
Danke für eure Hilfe.

Gruß,
Christian
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 09.09.2007, 18:34
Benutzerbild von Crizzo
der mit dem Editor kämpft
XHTMLforum-Kenner
 
Registriert seit: 17.10.2006
Ort: Ost-Hessen
Beiträge: 4.828
Crizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer Mensch
Standard

Gib uns mal den kompletten Code als Online Beispiel und mach vielleicht mal einen Screenshot vom Problem.

PS: Wieso machst du diese vielen Divs?
__________________
Ohne Quelltext gibts selten Hilfe. Also: Onlinebeispiel hochladen und Link bereitstellen!
Foren-FAQ
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 09.09.2007, 18:59
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 07.09.2007
Beiträge: 17
Christian24 befindet sich auf einem aufstrebenden Ast
Standard

Hi,

Zitat:
Zitat von BlackHawk Beitrag anzeigen
Gib uns mal den kompletten Code als Online Beispiel und mach vielleicht mal einen Screenshot vom Problem.
Ok, online zu finden hier!

Screenshot ohne den ".": ohne "."

Zitat:
PS: Wieso machst du diese vielen Divs?
Vermutlich weil ich es nicht besser weiß. Ich komme aus der Tabellen-Ecke und versuche seit 2 Tagen mein erstes Design mit css und ohne Tab. Was kann ich optimieren? Mein Idee war grundsätzlich im Mittelteil jeweils einen Container für Menu, Login,News und Content zu plazieren. Da Menu und Login z.B. untereinander stehen sollen, hielt ich es für sinnvoll, eine Container drumherum als links zu definieren ... Es geht einfacher und schöner?
Mit Zitat antworten
  #4 (permalink)  
Alt 09.09.2007, 19:05
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Validier bitte dein Stylesheet. "rechts" ist kein gültiger Wert für Float.

Wenn du möchtest, das ein Element ein vorheriges Float nicht umfließt, dann brauchst du clear (nicht float:none). Warum floatest du #kopfzeile?

Arbeite bitte die Artikel unter FAQ Punkt 2 durch. Dort bekommst du die Grundlagen zum Umgang mit Float und Clear.
Mit Zitat antworten
  #5 (permalink)  
Alt 09.09.2007, 19:07
Benutzerbild von Crizzo
der mit dem Editor kämpft
XHTMLforum-Kenner
 
Registriert seit: 17.10.2006
Ort: Ost-Hessen
Beiträge: 4.828
Crizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer Mensch
Standard

Grundsätzlich sollte man keine einzelnen Elemente mit einem semantisch unaussage kräftigen Element umschließen. D.h. wieso machst du zwei Div-Elemente um die <ul id="navi">? Dort ist doch schon ein Element, dieses kannst du bequem positionieren und formatieren.

Lies mal hier: Cascading Style Sheets { Vollreferenz zu CSS 1 und CSS 2.1 : FLOAT }

Edit: fricca war auch wieder flott.
__________________
Ohne Quelltext gibts selten Hilfe. Also: Onlinebeispiel hochladen und Link bereitstellen!
Foren-FAQ

Geändert von Crizzo (09.09.2007 um 19:11 Uhr)
Mit Zitat antworten
  #6 (permalink)  
Alt 09.09.2007, 19:23
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 07.09.2007
Beiträge: 17
Christian24 befindet sich auf einem aufstrebenden Ast
Standard

Hi,

Zitat:
Zitat von fricca Beitrag anzeigen
Validier bitte dein Stylesheet. "rechts" ist kein gültiger Wert für Float.
Danke für den Tipp. Sollte jetzt stimmen.

Zitat:
Wenn du möchtest, das ein Element ein vorheriges Float nicht umfließt, dann brauchst du clear (nicht float:none). Warum floatest du #kopfzeile?
Ehrlich gesagt habe ich das ganze floaten oder nicht floaten noch nicht so ganz gerafft. Aber ich arbeite dran. Wenn ich bei #kopfzeile das floating entferne, verschiebt sich das ganze Design um mehrere Zeilen nach unten. Warum?

Zitat:
Arbeite bitte die Artikel unter FAQ Punkt 2 durch. Dort bekommst du die Grundlagen zum Umgang mit Float und Clear.
Wo finde ich die FAQ?

Gruß,
Christian
Mit Zitat antworten
  #7 (permalink)  
Alt 09.09.2007, 19:25
Benutzerbild von Crizzo
der mit dem Editor kämpft
XHTMLforum-Kenner
 
Registriert seit: 17.10.2006
Ort: Ost-Hessen
Beiträge: 4.828
Crizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer Mensch
Standard

FAQ: http://xhtmlforum.de/40267-faq-haeuf...d-haeufig.html
Wenn du das float-Prinzip verstanden hast, sollte sich die eine Frage erübrigen.
__________________
Ohne Quelltext gibts selten Hilfe. Also: Onlinebeispiel hochladen und Link bereitstellen!
Foren-FAQ
Mit Zitat antworten
  #8 (permalink)  
Alt 09.09.2007, 19:26
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von Christian24 Beitrag anzeigen
Ehrlich gesagt habe ich das ganze floaten oder nicht floaten noch nicht so ganz gerafft. Aber ich arbeite dran. Wenn ich bei #kopfzeile das floating entferne, verschiebt sich das ganze Design um mehrere Zeilen nach unten. Warum?
Suchfunktion: "Collapsing Margins".
Nimm Padding für das umgebende Element statt Margin. Mindestens eines deiner Divs im Kopfbereich ist überflüssig.

Zitat:
Wo finde ich die FAQ?
Oberster Thread im CSS-Forum.
Mit Zitat antworten
  #9 (permalink)  
Alt 09.09.2007, 19:28
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 07.09.2007
Beiträge: 17
Christian24 befindet sich auf einem aufstrebenden Ast
Standard

Hi,

Zitat:
Zitat von BlackHawk Beitrag anzeigen
Grundsätzlich sollte man keine einzelnen Elemente mit einem semantisch unaussage kräftigen Element umschließen. D.h. wieso machst du zwei Div-Elemente um die <ul id="navi">? Dort ist doch schon ein Element, dieses kannst du bequem positionieren und formatieren.
Das div-Element "mitte" beinhaltet das Hintergrundbild. Wenn ich das 2. div-Element "links" entferne, bleibt nur noch das Menu stehen und ich sehe keine Hintergrundbilder für mitte und fuss mehr!?

Ok, werde ich mir grad mal reinlesen.

Gruß,
Christian
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 09.09.2007, 19:35
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von Christian24 Beitrag anzeigen
Das div-Element "mitte" beinhaltet das Hintergrundbild. Wenn ich das 2. div-Element "links" entferne, bleibt nur noch das Menu stehen und ich sehe keine Hintergrundbilder für mitte und fuss mehr!?
Bitte arbeite die genannten Artikel in den FAQ durch! Deine Fragen werden dort beantwortet. Stichwort: Containing Floats.
Nimm dir Zeit für Float und Clear. Das Thema ist nicht banal.
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
Background-Grafik neben navi-li Elementen - IE Probleme BobbyKreuzberg CSS 3 14.09.2010 12:22
Probleme mit padding und <li> Elementen... goldenboy CSS 3 29.09.2009 19:13
IE: Probleme mit ul-Menü Ares CSS 4 18.10.2006 12:42
<div> ohne Inhalt macht Probleme XHTML 1.1 SURE612 (X)HTML 12 06.11.2005 13:21
<div> Probleme die 2. noplan CSS 8 28.10.2005 18:57


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