Ergebnis 1 bis 7 von 7

Thema: div nebeneinander und 2 mal UL untereinander wobei 1 UL nebeinander

  1. #1
    HTML Newbie
    Registriert seit
    29.01.2012
    Beiträge
    4
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard div nebeneinander und 2 mal UL untereinander wobei 1 UL nebeinander

    Hallo,
    könnte mir bitte jemand sagen wie man 1x Bild Links und 2 UL Listen rechts wobei 1x UL Nebeneinander und die andere UL direkt dadrunter Dargestellt werden kann ???

    Beispiel
    Code:
    <div id="header">
        <a href="xxxx"><img src="bild.png/></a>
            
    <ul id="liste1">
            <li><a href="xxxx">Linkname1</a></li>
            <li><a href="xxxx">Linkname2</a></li>
            <li><a href="xxxx">Linkname3</a></li>
            </ul>
    
    <ul id="liste2">
            <li>text</li>
            </ul>
        </div>
    Bild.png > soll ganz links
    liste1 > soll ganz rechts nebeneinander
    liste2 > soll ganz rechts unter liste1 mit einem Strich als abgrenzung


    in tabelle ist es kein Problem aber wie geht sowas mit Div, UL und LI ???
    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
    Jedi Ritter Avatar von Dodo
    Registriert seit
    26.04.2008
    Ort
    Wien
    Alter
    27
    Beiträge
    3.774
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings
    Blog-Einträge
    1

    Standard AW: div nebeneinander und 2 mal UL untereinander wobei 1 UL nebeinander

    Du gibst dem Bild die CSS-Angabe "float:left;"
    Je nachdem, wie breit dein Bild ist, gibst du per CSS den Listen eine Breite, sodass sie sich neben dem Bild innerhalb des Divs ausgehen.
    Die Listen bekommen "float:right"
    Damit sollte sich das gewünschte Ergebnis zeigen.
    Something big is coming. And there will be pirates and ninjas and unicorns...

  3. #3
    HTML Newbie
    Themenstarter

    Registriert seit
    29.01.2012
    Beiträge
    4
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: div nebeneinander und 2 mal UL untereinander wobei 1 UL nebeinander

    Hallo,
    soweit teilweise habe ich es hinbekommen, wobei aber die Texte nicht unter den Links stehen sondern links daneben.

    Ich habe mal ein Screenshot gemacht.
    Links soll das Bild hin (Grösse steht da) und der rest soll komplett auf der rechten Seite wobei das mit dem Blauenhintergrund unter die Links soll.
    Code:
    #ck_header  { 
    background-color:#feffd5;
        }
        
    #ck_header img  { 
    float:left;
        }
    
    #liste1  { background-color:#d7d7d7;
    float:right;
        }    
        
    #liste1 li{ list-style-type:none;
    float:left;
        }    
    
    #liste2  { background-color:#006699; color:#ffffff;
    
    float:right;
        }    
        
    #liste2 li{ list-style-type:none;
    float:left;
        }
    Code:
    <div id="ck_header">
        <a href="{$index}"><img src="{$tpl_path}img/1logo.png"  /></a>
        
        <ul id="liste1">
        <li><a href="xxxx">Linkname1</a></li>
        <li><a href="xxxx">Linkname2</a></li>
        <li><a href="xxxx">Linkname3</a></li>
        </ul>
        
        <ul id="liste2">
        <li>text1</li>
        <li>text2</li>
        <li>text3</li>
        </ul>
        
      
    </div>
    Angehängte Grafiken Angehängte Grafiken

  4. #4
    Jedi Ritter Avatar von Dodo
    Registriert seit
    26.04.2008
    Ort
    Wien
    Alter
    27
    Beiträge
    3.774
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings
    Blog-Einträge
    1

    Standard AW: div nebeneinander und 2 mal UL untereinander wobei 1 UL nebeinander

    Mist... Wer floatet, muss auch clearen. Per float erstellt man einen Textfluss, der wieder aufgehoben gehört. Am einfachsten geht das mit diesem Code:
    Code:
    #liste1:after, #liste2:after {
        clear:                both;
        content:            " ";
        display:            block;
    }
    Something big is coming. And there will be pirates and ninjas and unicorns...

  5. #5
    HTML Newbie
    Themenstarter

    Registriert seit
    29.01.2012
    Beiträge
    4
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: div nebeneinander und 2 mal UL untereinander wobei 1 UL nebeinander

    Hallo,
    damit klappt es , aber wie bringt mn das jetzt noch den IE7 bei. Das der IE 7 auch ein umbruch macht ?

    Firefix 9 und IE 9 sieht das so aus
    Link1 Link2 Link3
    Text

    IE 7 sieht das so aus
    Link1 Link2 Link3Text

  6. #6
    Jedi Ritter Avatar von Dodo
    Registriert seit
    26.04.2008
    Ort
    Wien
    Alter
    27
    Beiträge
    3.774
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings
    Blog-Einträge
    1

    Standard AW: div nebeneinander und 2 mal UL untereinander wobei 1 UL nebeinander

    Für IE 7 kannst du noch deiner liste2 ein clear:both geben.
    Something big is coming. And there will be pirates and ninjas and unicorns...

  7. #7
    HTML Newbie
    Themenstarter

    Registriert seit
    29.01.2012
    Beiträge
    4
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: div nebeneinander und 2 mal UL untereinander wobei 1 UL nebeinander

    dank dir, jetzt pass es alles.

Ähnliche Themen

  1. 3 divs untereinander
    Von keycee im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 27.09.2011, 22:07
  2. Vier DIVs nebeneinander? (nicht untereinander)
    Von Neku im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 08.03.2010, 13:02
  3. Posts statt untereinander-> nebeneinander anzeigen lassen wie?
    Von musti1989 im Forum HTML & CSS Forum
    Antworten: 10
    Letzter Beitrag: 14.05.2009, 20:08
  4. Divs untereinander statt nebeneinander
    Von MasterOfDsaster im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 10.04.2009, 14:40
  5. Grafiken nebeneinander und untereinander anbringen
    Von grafik_problem im Forum HTML & CSS Forum
    Antworten: 6
    Letzter Beitrag: 04.10.2005, 18:34

Stichworte

Berechtigungen

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