Ergebnis 1 bis 8 von 8

Thema: CSS Positionierung

  1. #1
    daniel8888
    Gast

    Standard CSS Positionierung

    Hallo,

    habe eine Frage zu ner Posiitonierungssache mit Divs.

    Habe meine Divs so aufgebaut:
    Code:
    <div id="page">
       <div id="header">head</div>
       <div id="topmenu">topMenu</div>
       <div id="menu">
             <div id="menuStart">Menu1</div>
             <div id="menuDown">Menu2</div>
       </div>
       <div id="content">
               Contentinhalt
       </div>
    </div>
    Nun ist also das Menü links neben dem Inhaltsbereich. Mit float:left geht das auch, aber wenn der INhalt länger als da Menü wird, fängt der Text unter dem Menü wieder vorne an . Getestet hab ich das im FireFox und IE6.

    Wenn ich dem #menu eine feste Höhe gebe, z. B. 500px, dann fließt der Text die 500px lang an der Seite, danach wieder unter dem Menü.

    Mein CSS sieht so aus:
    Code:
    body &#123;
      font-family&#58; Arial, Verdana, Helvetica, sans-serif;
      color&#58; #555;
      background-color&#58; #FFF;
      font-weight&#58; normal;
      font-size&#58; 12px;
    &#125;
    
    h1, h2, h3 &#123;
      font-family&#58; Arial, Verdana, Helvetica, sans-serif;
      color&#58; #555;
      background-color&#58; #FFF;
      font-weight&#58; bold;
      font-size&#58; 13px;
    &#125;
    #page &#123;
    	width&#58; 720px;
    	background&#58; #FFFFFF;
    	margin-top&#58; 0;
    	margin-right&#58; auto;
    	margin-bottom&#58; 0;
    	margin-left&#58; auto;
    &#125;
    #head &#123;
        width&#58; 720px;
    &#125;
    
    #topMenu &#123;
        text-align&#58; right;
        padding-right&#58; 30px;
    &#125;
    #topMenu a &#123;
        font-size&#58; 11px;
        color&#58; #555;
        text-decoration&#58; none;
        font-weight&#58; bold;
    &#125;
    #topMenu a&#58;hover &#123;
        font-size&#58; 11px;
        color&#58; #000;
        font-weight&#58; bold;
        text-decoration&#58; none;
    &#125;
    #contentBereich &#123;
    
    &#125;
    #content &#123;
        padding-left&#58; 10px;
        padding-top&#58; 22px;
    &#125;
    #menu &#123;
        float&#58; left;
        width&#58; 166px;
        /*height&#58; 500px;*/
        margin-right&#58; 20px;
    &#125;
    #menuDown, #menuStart &#123;
        padding&#58; 0px;
        margin&#58; 0px;
    &#125;
    #menu ul li &#123;
        padding-bottom&#58; 8px;
        margin-left&#58; -15px;
    &#125;
    #menu ul &#123;
        margin-top&#58; 0px;
        margin-bottom&#58; 0px;
    	list-style&#58; none;
    &#125;
    #menu a &#123;
        font-size&#58; 13px;
        color&#58; #555;
        text-decoration&#58; none;
        font-weight&#58; bold;
    &#125;
    #menu a&#58;hover &#123;
        font-size&#58; 13px;
        color&#58; #18B5D1;
        font-weight&#58; bold;
        text-decoration&#58; none;
    &#125;
    
    /* Klassenzuweiseungen */
    
    .menuTopEntry &#123;
        font-size&#58; 13px;
        font-weight&#58; bold;
        color&#58; #18B5D1;
    &#125;
    
    .menuBack &#123;
        background-image&#58;url&#40;'images/menu_middle.jpg'&#41;;
    &#125;
    a.menuA1 &#123;
        font-size&#58; 13px;
        color&#58; #18B5D1;
        font-weight&#58; bold;
        text-decoration&#58; none;
    &#125;
    a.menuA2 &#123;
        font-size&#58; 11px;
        color&#58; #000;
        font-weight&#58; bold;
        text-decoration&#58; none;
    
    &#125;
    Kann mir da jemand weiterhelfen?

    Vielen Dan für Hilfe im Voraus!

    Gruß Daniel
    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 !!!!!

  2. #2
    Azubi(ne)
    Registriert seit
    24.06.2007
    Ort
    127.0.0.1
    Beiträge
    78
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Und wie wärs wenn du dem #content eine feste Breite gibst?

    Code:
    #content &#123; 
        padding-left&#58; 10px; 
        padding-top&#58; 22px;
        width&#58; ....px;

  3. #3
    daniel8888
    Gast

    Standard

    danke für die antwort.
    hab dem content schon eine feste breite gegeben. Dann wird der content zwar mit der Breite definiert, aber trotzdem läuft der Text nicht am Menü vorbei, sondern fängt unten drunter wieder ganz links an

  4. #4
    Azubi(ne)
    Registriert seit
    24.06.2007
    Ort
    127.0.0.1
    Beiträge
    78
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Wenn ich eine feste Breite im #content definiere, dann wird der Inhalt ( ja, auch nach einem Zeilenumbruch ) sauber mit einem Abstand dargestellt.

  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

    Gib dem #content noch ein
    Code:
     margin-left&#58; 186px;

  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

    Zitat Zitat von sejuma
    Gib dem #content noch ein
    Code:
     margin-left&#58; 186px;
    oder ebenfalls ein float:left;

  7. #7
    daniel8888
    Gast

    Standard

    Hi,

    also mit float:left hab ich es im #content auch bereits probiert, aber der text soll ja nicht am content vorbei fließen sondern am #menu.

    hab das mit dem margin-left getestet, im IE7 siehts ganz gut aus. Muss gleich noch im IE6 und FF testen.

    Danke für die Antwort

  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

    Schau:
    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>
    		<style type="text/css" media="all"><!--
    body &#123;
      font-family&#58; Arial, Verdana, Helvetica, sans-serif;
      color&#58; #555;
      background-color&#58; #FFF;
      font-weight&#58; normal;
      font-size&#58; 12px;
    &#125;
    
    h1, h2, h3 &#123;
      font-family&#58; Arial, Verdana, Helvetica, sans-serif;
      color&#58; #555;
      background-color&#58; #FFF;
      font-weight&#58; bold;
      font-size&#58; 13px;
    &#125;
    #page &#123;
       width&#58; 720px;
       background&#58; #ccc;
       margin-top&#58; 0;
       margin-right&#58; auto;
       margin-bottom&#58; 0;
       margin-left&#58; auto;
    &#125;
    #head &#123;
        width&#58; 720px;
    &#125;
    
    #topMenu &#123;
    
        text-align&#58; right;
        padding-right&#58; 30px;
    &#125;
    #topMenu a &#123;
        font-size&#58; 11px;
        color&#58; #555;
        text-decoration&#58; none;
        font-weight&#58; bold;
    &#125;
    #topMenu a&#58;hover &#123;
        font-size&#58; 11px;
        color&#58; #000;
        font-weight&#58; bold;
        text-decoration&#58; none;
    &#125;
    #contentBereich &#123;
    
    &#125;
    #content &#123;
    float&#58; left;
    background&#58; red;
        padding-left&#58; 10px;
        padding-top&#58; 22px;
    &#125;
    #menu &#123;
    background&#58; blue;
        float&#58; left;
        width&#58; 166px;
        /*height&#58; 500px;*/
        margin-right&#58; 20px;
    &#125;
    #menuDown, #menuStart &#123;
        padding&#58; 0px;
        margin&#58; 0px;
    &#125;
    #menu ul li &#123;
        padding-bottom&#58; 8px;
        margin-left&#58; -15px;
    &#125;
    #menu ul &#123;
        margin-top&#58; 0px;
        margin-bottom&#58; 0px;
       list-style&#58; none;
    &#125;
    #menu a &#123;
        font-size&#58; 13px;
        color&#58; #555;
        text-decoration&#58; none;
        font-weight&#58; bold;
    &#125;
    #menu a&#58;hover &#123;
        font-size&#58; 13px;
        color&#58; #18B5D1;
        font-weight&#58; bold;
        text-decoration&#58; none;
    &#125;
    
    /* Klassenzuweiseungen */
    
    .menuTopEntry &#123;
        font-size&#58; 13px;
        font-weight&#58; bold;
        color&#58; #18B5D1;
    &#125;
    
    .menuBack &#123;
        background-image&#58;url&#40;'images/menu_middle.jpg'&#41;;
    &#125;
    a.menuA1 &#123;
        font-size&#58; 13px;
        color&#58; #18B5D1;
        font-weight&#58; bold;
        text-decoration&#58; none;
    &#125;
    a.menuA2 &#123;
        font-size&#58; 11px;
        color&#58; #000;
        font-weight&#58; bold;
        text-decoration&#58; none;
    
    &#125; 
    --></style>
    	</head>
    <body>
    <div id="page">
       <div id="header">head</div>
       <div id="topmenu">topMenu</div>
       <div id="menu">
             <div id="menuStart">Menu1</div>
             <div id="menuDown">Menu2</div>
       </div>
       <div id="content">
               Contentinhalt
    	sdgsdfsdfhsdfgh
    
    sdfavdvdfvg
    
    scjyx<vxkvc-vcxn<-cxn
    
       </div>
    </div> 
    </body>
    </html>
    Klappt wunderbar im ff und ie6. mein ie7 will grad nicht, konntes also nicht damit testen.

Ähnliche Themen

  1. Probleme mit Positionierung
    Von amigo889 im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 16.06.2008, 17:59
  2. CSS Positionierung
    Von JackD im Forum HTML & CSS Forum
    Antworten: 7
    Letzter Beitrag: 27.03.2008, 14:13
  3. Positionierung
    Von happychillkroete im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 24.09.2006, 18:56
  4. Problem mit positionierung
    Von wurmax im Forum HTML & CSS Forum
    Antworten: 10
    Letzter Beitrag: 08.09.2006, 20:36
  5. css positionierung
    Von im Forum HTML & CSS Forum
    Antworten: 0
    Letzter Beitrag: 11.01.2005, 20:24

Stichworte

Berechtigungen

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