zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Listen-Punkte liegen außerhalb des DIV Containers ?

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 01.07.2007, 14:06
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 11.10.2006
Beiträge: 37
mp3fritz befindet sich auf einem aufstrebenden Ast
Standard Listen-Punkte liegen außerhalb des DIV Containers ?

Hi,
ich hoffe mal es kann mir jemand helfen.

Ich bastle gerade an einer Seite und möchte eine Navigation als Liste in eine Div-Container "left_navi" anzeigen.

Dummerweise liegen beim Firefox und beim Opera die Listenpunkte außerhalb des Containers. Beim IE 5.5, 6 und 7 hingegen liegen die Listenpunkte wie gewünscht im Container.

Um das besser zu sehen hab ich dem Container mal einen Border mit 1px gegeben!!

Beispiel ist hier:ZUMKELLERS CHÄMI 79837 HÄUSERN

Hier mal mein Code:
PHP-Code:
<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>ZUMKELLERS CHÄMI  79837 HÄUSERN</title>
    <!-- Link Information -->
    <link rev="designed" title="Holger Gekle - Sunny Island Webdesign" href="http://www.sunny-island-webdesign.de">
    <link rel="designed by" title="Holger Gekle - Sunny Island Webdesign" href="http://www.sunny-island-webdesign.de">
    <!-- Meta Information -->
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <meta name="Author" content="AUTHOR/Holger Gekle - Sunny Island Webdesign">
    <meta http-equiv="Reply-to" content="info@sunny-island-webdesign.de">
    <meta http-equiv="Created" content="29.06.2007">
    <meta http-equiv ="content-language" content="de">
    <meta http-equiv ="content-language" content="en">
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <link rel="STYLESHEET" type="text/css" href="style.css">
</head>


<body>
<!-- ###DOKUMENT### begin -->

<!-- START INHALT -->
<div id="inhaltsbox">

<div id="logo_zumkellers">
<img src="pics/logo_zumkellers.jpg" alt="Zumkelelrs Ch&auml;mi" border="0" />
</div>

<div id="logo_adler">
<img src="pics/logo_adler.gif" width="166" height="153" alt="" border="0" />
</div>
 
 <div id="top_navi_bg">
   <div id="top_navi">
      <?php include"top_navi.php" ?>
   </div>
 </div>
 
 <div id="left_navi">
      <?php include"left_navi.php" ?>
 </div>
 
<div id="flash">
<img src="pics/flash1_pic.jpg" width="736" height="293" alt="" border="0" />
</div> 

<div id="flash_2">
<img src="pics/flash2_pic.jpg" width="263" height="179" alt="" border="0" />
</div> 

<div id="content">
<br /><br />
hier kommt der ganze Inhalt rein
</div>

<div id="footer">
ZUMKELLERS CHÄMI  79837 HÄUSERN  FON +49 (0) 7672 417-333  FAX +49 (0) 7672 417-150  info@zumkellers-bistro.de
</div>
 
<!-- STOP INHALT --> 
</div>


<!-- ###DOKUMENT### end -->
</body>
</html>
Und hier noch der CSS-Code:
Code:
body, html {
	border: 0;
	margin: 0;
	position: relative;
	width: 100%;
	height: 100%;
	background: #ffffff;
	color:#4C4C4C;
    }

#inhaltsbox {
    position: relative; 
	padding: 0; 
	width: 900px; 
	height:600px; 
	border: 1px solid #998451;
	top:50%;
	left:50%;
	margin: -300px 0 0 -450px;
	}

#logo_zumkellers {
    position:absolute; 
	top:0px; 
	left:0px; 
	height:162px; 
	width:162px;
	}
	
#logo_adler {
    position:absolute; 
	top:376px; 
	left:703px; 
	height:166px; 
	width:153px;
	z-index: 2;
	}

#top_navi_bg {
    position:absolute; 
	top:0px; 
	left:164px; 
	height:62px; 
	width:736px; 
	background-image: url(pics/top_navi_bg.gif);
	margin:0;
	}

#top_navi {
    margin:0;
	padding:0;
    position:absolute; 
	top:0px; 
	left:136px; 
	height:62px; 
	width:596px;
	}

	
#left_navi {
    margin:0;
	padding-left: 0px;
    position:absolute; 
	top:250px; 
	left:10px;
	width:162px;
	border: 1px solid;
	}
	
#flash {
    position: absolute;
	top:62px;
	left:164px;
    }	
	
#flash_2 {
    position: absolute;
	top:354px;
	left:0;
    }
	
	
#content {
    position: absolute;
	top:355px;
	left:263px;
	width:636px;
	height:179px;
	background-color: #ebe6dc;
    }	

	
#footer {
    position:absolute;
	top:533px;
	left:0;
	font-size: 11px; 
	color: #EBE6DC; 
	text-align: right; 
	width: 880px;
	height:16px;
	border-top: 1px solid #998451;
	background-color: #39050c;
	padding:40px 20px 10px 0;
	}


/* Styles fuer Top-Navigation */
#top_navi ul{
    padding:0px;
	margin:0;
	list-style: none;
	width: 596px;
	}
	
#top_navi ul li{
   float: left;
   margin:23px 30px 0 0;
   padding:0;
   }
	
#top_navi a {
    font: bold 10px Verdana, Arial, Helvetica, Verdana, sans-serif;
	text-decoration: none; 
	color: #4c4c4c;
	}
	
#top_navi a:hover {
    color: #39050c;
	}
/* Styles fuer Top-Navigation */


/* Styles fuer Left-Navigation */
#left_navi ul{
    display: inline;
    padding:0;
	margin:0;
	width: 152px;
	}

#left_navi ul li{
	line-height: 1.2em;
	list-style: circle;
	}
	
#left_navi a {
    font: normal 9px Verdana, Arial, Helvetica, Verdana, sans-serif;
	text-decoration: none; 
	color: #4c4c4c;
	}
/* Styles fuer Left-Navigation */
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 01.07.2007, 14:44
#
XHTMLforum-Kenner
 
Registriert seit: 30.06.2005
Ort: Hamburg
Beiträge: 2.092
IChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer Mensch
Standard

Mit list-style als einer Kurzform setzt du auch list-style-position auf den Initialwert 'outside'. Firefox, Opera, Safari sind sich einig, dass du genau das willst.

Zitat:
Dummerweise liegen beim Firefox und beim Opera die Listenpunkte außerhalb des Containers.
Nicht nur das. Ganz dumm ist, dass ganze Teile der Liste aus dem Container fliegen, wenn man den Text um +1 vergrößert.

Dazu kommt auch noch, dass die halbe Seite im Nichts oberhalb des Fensters im Safari und Webkit landet, und auch kein Scrollbar zur Hilfe eilt.

Du gestaltest mit deinen ganzen Positionierungen für einen Flyer. Position:absolute ist für ganze Abschnitte der Seite wenig geeignet, weil man damit die Elemente aus dem Seitenfluss nimmt. Stell dir vor, du hättest kein position:absolute zur Verfügung. Wie würdest du dann gestalten?
__________________
Ingo Chao

Buch: Fortgeschrittene CSS-Techniken
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 01.07.2007, 16:09
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 11.10.2006
Beiträge: 37
mp3fritz befindet sich auf einem aufstrebenden Ast
Standard Hallo Ingo

zuerst mal danke für deine konstruktive Kritik!

Das mit der list-style-position: inside hab ich jetzt gemacht und es passt soweit auch. Das mit der Schriftgröße +1 hatte ich bisher gar nicht bedacht.

Leider hab ich das Problem, daß ich bis morgen eine Seite zur Abnahme vom Kunden vorlegen muss und deshalb ist auch noch nicht alles so wie es endgültig werden soll.
Das Problem mit der nach oben verschobenen Seite im Safari hab ich auch schon bemerkt, aber wie kriege ich es hin, daß die Seite in jedem Browser vertikal zentriert wird?Das war die einzige Lösung was mir bisher dazu einfiel.

Aber was spricht gegen die absolute Positionierung in diesem Fall?
Die Seite soll immer nur 900x600 Pixel groß sein und auch nicht scrollen!

cu
Holger
Mit Zitat antworten
  #4 (permalink)  
Alt 01.07.2007, 16:45
#
XHTMLforum-Kenner
 
Registriert seit: 30.06.2005
Ort: Hamburg
Beiträge: 2.092
IChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer Mensch
Standard

Ich reite deswegen auf die Textvergrößerung so rum, weil ich selbst für deine linke Navigation schon +1 benötige, damit ich sie lesen kann.

Und ich kann gelassen annehmen, dass die Kunden deines Klienten, die sich dort ein Essen leisten können, eher dem Designerlesebrillenalter zugehören als die meisten Webdesigner.

Zur absoluten Positionierung: Ich verwende sie eher spärlich, wenn ein Element entgegen dem Seitenfluss irgendwohin platziert werden soll, wie zum Beispiel meine Navigation, die im HTML ganz unten kommt, weil sie nicht so wichtig ist, aber auf der Seite links oben landen soll, weil ich das so will. Also position:fixed/absolute.

Der Hauptnachteil bei position:absolute ist doch, dass andere Boxen sich nicht auf die positionierten einstellen können. Wenn du auf deiner Seite nun nur noch zwei, drei Zeilen Platz hast für Text, wird es doch recht eng. Aber was, wenn später mehr rein soll? Die Schrift kannst du nicht beliebig verkleinern, ist ja kein CD-Booklet für Partymucke, wo der Text, äh, vorhersehbar ist.

Aus dem Dilemma sehen einige dann den Ausweg darin, overflow:auto-Bereiche einzufügen, scrollbaren Inhalt innerhalb des scrollbaren Browsers -- nur das ist der Moment, wo ich eine Seite spätestens verlasse, weil ich mit den ganzen Balken mich nicht anfreunden kann.

Das Ganze mag bis morgen nicht mehr sinnvoll umzusetzen sein, aber vielleicht beim nächsten Projekt ...
__________________
Ingo Chao

Buch: Fortgeschrittene CSS-Techniken
Mit Zitat antworten
  #5 (permalink)  
Alt 01.07.2007, 17:06
#
XHTMLforum-Kenner
 
Registriert seit: 30.06.2005
Ort: Hamburg
Beiträge: 2.092
IChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer Mensch
Standard

Ich weiß auch nicht, was der Safari hier für ein Problem hat mit der relativen positionierung top:50%, aber er ignoriert diesen Offset.

Mit #inhaltsbox {position: absolute; ...} geht es.

Also doch, siehste, hab ich ja gleich gesagt, position:absolute ist die Lösung
__________________
Ingo Chao

Buch: Fortgeschrittene CSS-Techniken
Mit Zitat antworten
  #6 (permalink)  
Alt 01.07.2007, 19:21
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 11.10.2006
Beiträge: 37
mp3fritz befindet sich auf einem aufstrebenden Ast
Standard :o)

Hallo Ingo,

sorry, war grad Abendessen und deshalb Funkstille

Ja, super, also wäre das Safari Problem auch gelöst!!

Das mit der viel zu kleinen Schrift bei der linken Navi sehe ich auch so, leider ist das Design nicht von mir und ich muss umsetzten was ich von dem Designer bekomme. Ich werde das aber morgen auch mal ansprechen.
Ich habe den DIV jetzt aber in der Höhe auf auto gesetzt und das vertical-align auf bottom, jetzt müsste es von der Höhe her jedenfalls immer passen, nur mit der Breite ist halt nicht mehr drin!!!

Jetzt sollte ich nur noch bis morgen früh das große Bild als Flash machen, da sich hier drei verschiedene Bilder austauschen sollen und das dann zu jeder Rubrik (..un dich hasse Flash)

Also jetzt schon mal vielen vielen Dank für dein Hilfe, wünsch Dir noch einen erholsamen Sonntagabend

Cu
Holger
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
Schriftfarbe in den Eintragungsfeldern von jforms Steveislucky CSS 2 16.03.2010 10:59
CSS Text nebeinander? carstiee09 CSS 13 13.11.2009 19:18
Grafikposition mit scrollbarem DIV koppeln -- aber außerhalb des DIV? Eberh@rd CSS 15 03.11.2009 22:05
Weite bzw. Höhe eines Div Containers ohne px Angabe klecksfuss Javascript & Ajax 3 29.07.2007 12:11
div Container nimmt automatisch die Höhe des Eltern-div an fidelio CSS 3 12.04.2006 15:34


Alle Zeitangaben in WEZ +2. Es ist jetzt 02:18 Uhr.