Ergebnis 1 bis 10 von 10

Thema: Problem mit dem einrücken bei <ur>

  1. #1
    Azubi(ne)
    Registriert seit
    16.04.2008
    Ort
    Bonn
    Alter
    28
    Beiträge
    72
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Problem mit dem einrücken bei <ur>

    Hey leute ich habe ein Problem mit dem <ul> Befehl

    Bei Opera werden die Punkte eingerückt wie es normal sein sollte aber bei Firefox, Safari und so wird die liste nicht angezeigt. Ich hoffe ihr könnt mir helfen...

    Quellcode
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http&#58;//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http&#58;//www.w3.org/1999/xhtml">
    <head>
    
    <title>Jutta Kl&ouml;ckner Preview   singen</title>
    
    <link rel="stylesheet" type="text/css" href="style/style.css" />
    
    </head>
    
    
    
    <body>
    
    		<div id="rosabox">
            <ul id="Navigation">
            		[*]zur Person
                    <li class="abstand">
            		[*]<span>die Stimme</span>
                    <li class="abstand"> [*]mein Angebot
                    <li class="abstand"> [*]Termine
                    <li class="abstand"> [*]Galerie
                    <li class="abstand"> [*]Kontakt
                    <li class="abstand"> [/list]
            
            
            
            
            
            
    		<div id="whitebox"> 
            <div id="submenu" >	
            
            <ul id="subnavigation">
            		[*]<span>singen</span>
                    [/list]
            </div>
            
            <div id="textbox">
          
    
     Singen
         	
    
    		
    
     
         
    	<ul>[*] Singen ist Lebensfreude[*] Singen ist wohltuend und gesund[*] Singen &ouml;ffnet das Herz[*] Singen entfaltet unser Potenzial
    	[/list]
    
    
        
    
    Singen ist eine der sch&ouml;nsten Arten, sich anderen Menschen mitzuteilen.
    
     Nicht durch Worte, nicht durch Gesten, sondern durch die Magie und die energetische Kraft der Musik
    
     und des Gesangs!
    
    
    
    Als S&auml;ngerin fasziniert mich diese Kraft immer wieder auf&acute;s Neue. Gesang stellt einen 
    
    Kontakt zu unserem eigenen Inneren, unserer Seele her, direkt und unverbl&uuml;mt. Egal auf
    
     welchem „Niveau“ wir singen, kann unser Herz ber&uuml;hrt sein.
    
    
    
    Immer wieder begegnen mir Menschen, die Lust haben zu singen, aber glauben, nicht
    
     singen zu k&ouml;nnen. Manche haben den unbefangenen Umgang mit der eigenen Singstim-
    
    me schon lange verloren.
    
    
    
    Es ist schade, wenn Singpotenzial brach liegt, obwohl die Lust zu singen
    
    vorhanden ist. Grunds&auml;tzlich kann jede/r singen, der seine Stimme auch zum Sprechen 
    
    nutzt! Wer die Lust zum Singen also versp&uuml;rt sollte sich durch nichts und niemanden 
    
    davon abbringen lassen es auch zu tun. Sie werden sehen&#58; Sie k&ouml;nnen es!
    </p>
    	</div>
        </div>
    </div>
    <div id="blackbox"></div>
    
    
    
    
    
    
    </body>
    </html>
    Css

    Code:
    @charset "UTF-8";
    
    *&#123;
    
    font-family&#58;Arial, Helvetica, sans-serif;
    font-size&#58;10px;
    color&#58;#431c0b;
    
    &#125;
    
    #rosabox&#123;
    	background-color&#58; #cd0067;
    	margin&#58; auto;
    	top&#58; 50px;
    	height&#58; 650px;
    	width&#58; 900px;
    &#125;
    
    
    #whitebox&#123;
    	background-color&#58;#FFFFFF;
    	height&#58; 427px;
    	width&#58; 663px;
    	top&#58; 82px;
    	left&#58; 118px;
    	position&#58;relative;
    &#125;
    
    #textbox&#123;
    	height&#58; 427px;
    	width&#58; 507px;
    	position&#58;relative;
    	left&#58;156px;
    	
    	border&#58;1px solid black;
    &#125;
    
    
    
    #submenu&#123;
    	float&#58;left;
    	background-color&#58;#f4d1e3;
    	height&#58; 427px;
    	width&#58; 156px;
    	position&#58;relative;
    	&#125;
    
    
    
    #blackbox&#123;
    	background-color&#58;#431c0b;
    	margin&#58; auto;
    	height&#58; 30px;
    	width&#58; 900px;
    
    &#125;
    
    ul#Navigation &#123;
    	font-size&#58; 12px;
    	font-family&#58;Arial, Helvetica, sans-serif;
    	width&#58; 663px;
    	height&#58; 25px;
    	top&#58; 87px;
    	left&#58; 135px;
    	position&#58; relative;
    	margin&#58; 0;
    	padding&#58; 0;
    	text-align&#58;left;
    	border&#58;0px solid black;
    &#125;
    
    .abstand &#123;
    
    	float&#58; left;
    	width&#58; 35px;
    
    &#125;
    
    ul#Navigation li&#123;
    	
    	
    	float&#58;left;
    	list-style&#58; none;
    	display&#58; inline;
    	padding&#58; 0;
    	
    &#125;
    
    ul#Navigation a, ul#Navigation span&#123;
    	color&#58;#FFFFFF;
    	text-decoration&#58;none;
    
    &#125;
    
    ul#Navigation a&#58;hover, ul#Navigation span&#123;
    	color&#58;#431c0b;
    &#125;
    
    
    
    .bild&#123;
    	background-image&#58;url&#40;../bilder/jutta.png&#41;;
    
    
    &#125;
    
    ul#subnavigation &#123;
    	color&#58; #cd0067;
    	list-style&#58;none;
    	font-size&#58; 12px;
    	font-family&#58;Arial, Helvetica, sans-serif;
    	width&#58; 135px;
    	height&#58; 427px;
    	top&#58; 20px;
    	left&#58; 17px;
    	position&#58; relative;
    	line-height&#58;15px;
    	margin&#58; 0;
    	padding&#58; 0;
    	text-align&#58;left;
    	border&#58;0px solid black;
    &#125;
    
    ul#subnavigation a, ul#subnavigation span&#123;
    	color&#58;#cd0067;
    	text-decoration&#58;none;
    
    &#125;
    
    ul#subnavigation a&#58;hover, ul#subnavigation span&#123;
    	color&#58; #431c0b;
    &#125;
    
    p&#123;
    
    	color&#58;#431c0b;
    	font-size&#58;10px;
    	font-family&#58;Arial, Helvetica, sans-serif;
    	padding&#58;10px;
    	left&#58;50px;
    	line-height&#58;15px;
    	
    
    
    &#125;
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!
    ehm....*piep*?

  2. #2
    Azubi(ne)
    Themenstarter

    Registriert seit
    16.04.2008
    Ort
    Bonn
    Alter
    28
    Beiträge
    72
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    vielleicht habe ich mich nicht klar ausgedrückt^^. Deswegen mache ich es jetzt mit Bilder.

    Also so soll es aussehen. Das foto wurde in Opera gemacht, wo es auch wunderbar funktioniert.

    http://img115.imageshack.us/img115/4...ussehenff0.png

    aber leider funktioniert es auch nur da. Denn so sieht aber die selbe Datei im firefox aus:


    http://img382.imageshack.us/img382/1...ehtsauswf8.png

    grüße
    ehm....*piep*?

  3. #3
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Nur im IE 7 getestet:

    Code:
    #textbox&#123; 
       height&#58; 427px; 
       width&#58; 505px; 
       border&#58;1px solid black; 
    &#125;

  4. #4
    Azubi(ne)
    Themenstarter

    Registriert seit
    16.04.2008
    Ort
    Bonn
    Alter
    28
    Beiträge
    72
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    also bei mir funktioniert das nicht. Also ich habe jetzt auf mein mac keine Ie drauf aber bei safari und Firefox haut er den text unter das rosa submenü und es steht immer noch nicht eingerückt.

    Aber danke für deine Idee hat sonst noch wer eine Idee?

    wäre euch echt sehr verbunden
    ehm....*piep*?

  5. #5
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Grundsätzlich halte ich solche Konstruktionen mit relativer und absoluter Positionierung nicht für sinnvoll, da man zum einen immer sehr pixelgenau arbeiten muss und zum anderen immer Abhängigkeiten mit den übergeordneten Elementen bestehen.
    Aus meiner Sicht wäre es einfacher und besser, wenn du dafür lediglich mit float und margin-Angaben arbeitest.

    Nimm z.B. einen Haupt-Div, den du in Relation zum Body zentrierst und packe alles da hinein.

    Sieh dich mal in meiner CSS-Fundgrube etwas um zu den Themen "vertikale Zentrierung" und "Layoutbeispiele".

  6. #6
    der/die Göttliche Avatar von jojo87
    Registriert seit
    23.03.2007
    Ort
    Leipzig
    Alter
    30
    Beiträge
    3.131
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Hallo Rausch.

    Dein Problem sind, wie Sejuma schon sagte, die vielen Positionierungen.
    Wenn du mit im Browser mal nachmisst, stellst du fest, dass der

    Block denselben Abstand (156px) zum linken Rand der Textbox hat,wie die Textbox einen Abstand zum linken Rand der Whitebox. Deiner Code-Logik nach, musst du also den p-Block explizit neu ansprechen und die Vererbung überschreiben.

    Besser wäre aber, dich an Sejumas Rat zu halten und auf float/margin zu setzen. Du bekommst definitv eine bessere Übersicht über deinen Code.

    Gruß,
    Jojo

  7. #7
    Azubi(ne)
    Themenstarter

    Registriert seit
    16.04.2008
    Ort
    Bonn
    Alter
    28
    Beiträge
    72
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    also Pixel genau ist kein Problem da ich mit einer genauen Vorlage arbeite.
    Muss dazu sagen das ich ein ziemlicher Anfänger in Css bin und naja mich erst zurecht finden muss. Mh aber was hat jetzt die Positionierung mit der Ausrichtung des Textes zutun ? weil der geht nach wie vor nicht
    ehm....*piep*?

  8. #8
    der/die Göttliche Avatar von jojo87
    Registriert seit
    23.03.2007
    Ort
    Leipzig
    Alter
    30
    Beiträge
    3.131
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Mh aber was hat jetzt die Positionierung mit der Ausrichtung des Textes zutun
    Weil der Text jetzt einen 156px Abstand zum gefloatetem #submenu einhalten muss
    Die einfachste lösung: gib der Text-Box auch ein float: left (dann natürlich das position und left weglassen!) und verringere die Breite auf 505px, damit du mit Border dann wieder reale 507px statt 509px hast, von wegen Pixelgenauigkeit

    Gruß,
    Jojo

  9. #9
    Azubi(ne)
    Themenstarter

    Registriert seit
    16.04.2008
    Ort
    Bonn
    Alter
    28
    Beiträge
    72
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    die border fliegt ja eh raus xD. Die habe ich nur zur Übersicht angemacht für mich jetzt ^^. Ich versuche das jetzt mal hoffe das es geht. Wenn nicht werde ich die Seite mit margin und float aufbauen. Muss ich ja auch lernen xD

    aber danke für eure Hilfe
    ehm....*piep*?

  10. #10
    Azubi(ne)
    Themenstarter

    Registriert seit
    16.04.2008
    Ort
    Bonn
    Alter
    28
    Beiträge
    72
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    sry für doppelpost

    aber es geht ich danke dir =D bzw euch beiden!
    ehm....*piep*?

Ähnliche Themen

  1. css text einrücken
    Von supersass1 im Forum HTML & CSS Forum
    Antworten: 18
    Letzter Beitrag: 09.11.2005, 08:33

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •