divs anordnen

[droom]

Hi folks,

Ich habe ein Menü, das folgendermassen aussieht:
<div id="2cols">
   <div id="left">Page 1</div>
   <div id="left">Page 2</div>
   <div id="left">Page 3</div>
   <div id="left">Page 4</div>
   <div id="right">Page 5</div>
   <div id="right">Page 6</div>
</div>

"Der Code darf nicht geändert werden."
Ich muss über css es schaffen die 4 ersten Menuitems links zu plazieren und die 2 anderen rechts. Hat jemand eine Idee wie es in css geht?

Was ich haben will
----------------
Page 1   Page 5
Page 2   Page 6
Page 3
Page 4
----------------

vielen Dank.

[suit]

Ich habe ein Menü, das folgendermassen aussieht:
<div id="2cols">
   <div id="left">Page 1</div>
   <div id="left">Page 2</div>
   <div id="left">Page 3</div>
   <div id="left">Page 4</div>
   <div id="right">Page 5</div>
   <div id="right">Page 6</div>
</div>

"Der Code darf nicht geändert werden."

dann hast du ein problem, weil der code invalide ist - du hast eine id 4x und eine andere 2x vergeben

tut mir leid

[droom]

Und was wäre, wenn der Code sondern so aussehen würde:

<div id="2cols">
    <div class="left">Page 1</div>
    <div class="left">Page 2</div>
    <div class="left">Page 3</div>
    <div class="left">Page 4</div>
    <div class="right">Page 5</div>
    <div class="right">Page 6</div>
</div>

also class anstatt id

[Engin]

Ave droom!

Und was wäre, wenn der Code sondern so aussehen würde:
<div id="2cols">
    <div class="left">Page 1</div>
    <div class="left">Page 2</div>
    <div class="left">Page 3</div>
    <div class="left">Page 4</div>
    <div class="right">Page 5</div>
    <div class="right">Page 6</div>
</div>
also class anstatt id

Die einzige Alternative würde ich sagen.

Aber mal andersrum, was spricht dagegen, die Links in 2 Divs zu packen und die Links links sein zu lassen?

 <div id="2cols">  
  
    <div class="left">Page 1</div>  
 <ul>  
   <li>seite</li>  
   <li>seite2</li>  
   <li>seite3</li>  
   <li>seite4</li>  
  </ul>  
 </div>  
  
     <div class="right">Page 5</div>  
 <ul>  
   <li>seite</li>  
   <li>seite1</li>  
 </ul>  
 </div>  
  
</div>

Grüße aus H im R an droom,
  Primus Enginus*

[droom]

Ja mit nur 2 divs hätte ich das problem ja nicht.
Wie gesagt ES MUSS mit den divs so bleiben. Ich kann nur an den css was ändern.
vg

[Antipitch]

Hi droom,

kannst/willst/darfst du Höhen und Breiten vergeben?

Gruß
Antipitch

[droom]

Ja alles was mit css geht.
Die Reihenfolge muss aber wie oben erhalten bleiben.
Ob class oder id ist egal. Das kann geändert werden.

[suit]

Ja alles was mit css geht.

das war nicht die frage - mit css ist fast alles möglich, nur das html dahinter muss vernünftig sein

Die Reihenfolge muss aber wie oben erhalten bleiben.

kannst/willst/darfst du das nicht ändern - warum?

Ob class oder id ist egal. Das kann geändert werden.

was kann noch geändert werden?

[droom]

Warum ist das HTML noch falsch?

<div id="twocols">
    <div class="left">Page 1</div>
    <div class="left">Page 2</div>
    <div class="left">Page 3</div>
    <div class="left">Page 4</div>
    <div class="right">Page 5</div>
    <div class="right">Page 6</div>
</div>

Die Reihenfolge kann nicht geändert. Es wird generiert. Ich kann nur Attribute ändern bzw. einfügen und css anpassen.

[suit]

Warum ist das HTML noch falsch?

jetzt is es richtig - aber eben sehr unglücklich = divsuppe

Die Reihenfolge kann nicht geändert. Es wird generiert. Ich kann nur Attribute ändern bzw. einfügen und css anpassen.

kannst du nur left/right setzten oder kannst du auch sowas machen:

<div id="twocols">
     <div class="item1">Page 1</div>
     <div class="item2">Page 2</div>
     <div class="item3">Page 3</div>
     <div class="item4">Page 4</div>
     <div class="item5">Page 5</div>
     <div class="item6">Page 6</div>
 </div>

[droom]

Das könnte ich auch ja.

[Antipitch]

div {
width:200px;
}
div div{
width:100px;
height:20px;
}
.right {
float:right;
margin-left:100px;
position:relative;
top:-80px;
}

Gruß
Antipitch

PS: Natürlich immer noch nicht valide wegen id="2cols"

[droom]

Wie sieht das html wozu du dieses anwendest? Bei mir läuft nicht.
Ach so und die Breite des divs darf ich nicht festsetzen.

[Engin]

Ave droom!

Wie sieht das html wozu du dieses anwendest? Bei mir läuft nicht.
Ach so und die Breite des divs darf ich nicht festsetzen.

Langsam wird es Kurios. Was meinst du mit divs darf keine breite bekommen, was soll das denn werden?

----------------
Page 1   Page 5
Page 2   Page 6
Page 3
Page 4
----------------

Wie willst du das dann anstellen? Dieses Div würde sich über die gesamte breite der Seite erstrecken.

Grüße aus H im R an droom,
  Primus Enginus*

[droom]

Ave droom!

Wie sieht das html wozu du dieses anwendest? Bei mir läuft nicht.
Ach so und die Breite des divs darf ich nicht festsetzen.

Langsam wird es Kurios. Was meinst du mit divs darf keine breite bekommen, was soll das denn werden?

---

Page 1   Page 5
Page 2   Page 6
Page 3
Page 4

Wie willst du das dann anstellen? Dieses Div würde sich über die gesamte breite der Seite erstrecken.

Ich meinte die Breite des divs für page 1 zb. (div class="left">Page 1<7div>)
Weil mein Menü auch so aussehen kann
----------------
Page 1        Page 5
Page 2long    Page 6
Page 3
Page 4
----------------

[suit]

Weil mein Menü auch so aussehen kann

Page 1        Page 5
Page 2long    Page 6
Page 3
Page 4

dann hast du in der tat ein problem, weil die anderen divs nichts von der breite der andere wissen - darum ist zwingend ein gruppierendes element nötig (wie von engin vorgeschlagen)

oder du nimmst eine breite, in die alles hineinpasst - aber das ist auch eine blöde idee

[droom]

okay und wenn ich die Breite festlegen kann?
ich habe immer noch keine richtige Antwort bekommen.

[suit]

okay und wenn ich die Breite festlegen kann?
ich habe immer noch keine richtige Antwort bekommen.

wenn du die breite festlegen kannst, hast du deine antwort bereits bekommen

[droom]

Meinste das hier?
div {
width:200px;
}
div div{
width:100px;
height:20px;
}
.right {
float:right;
margin-left:100px;
position:relative;
top:-80px;
}
hmm warum gehts bei mir net. Oder läuft es für n bestimmten Code?

[Antipitch]

droom,

hmm warum gehts bei mir net. Oder läuft es für n bestimmten Code?

Was für'n code? Außerdem heißt das Projekt SELFhtml. Hast du überhaupt versucht, die css Angaben (die nur eine von mehreren Lösungsmöglichkeiten darstellen) nachzuvollziehen?

Aber weil Wochenende ist (läuft im IE6 u. 7, FF):

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>drooms Hobby-Menü</title>
<style type="text/css">
div {
width:200px;
}
div div {
width:100px;
height:20px;
}
.right {
float:right;
margin-left:100px;
position:relative;
top:-80px;
}
</style>
</head>
<body>
<div id="2cols">
   <div class="left">Page 1</div>
   <div class="left">Page 2 long</div>
   <div class="left">Page 3</div>
   <div class="left">Page 4</div>
   <div class="right">Page 5</div>
   <div class="right">Page 6 long</div>
</div>
</body>
</html>

Gruß
Antipitch

[Antipitch]

Ist das ne Aufgabe in deiner HTML AG?

Dürfen die inneren divs ne Breite haben?

[suit]

Und was wäre, wenn der Code sondern so aussehen würde:

<div id="2cols">
    <div class="left">Page 1</div>
    <div class="left">Page 2</div>
    <div class="left">Page 3</div>
    <div class="left">Page 4</div>
    <div class="right">Page 5</div>
    <div class="right">Page 6</div>
</div>

also class anstatt id

wenn du die reihenfolge ändern kannst, es es kein problem - dennoch würde ich dir eine liste entfernen, diese divseuche muss ja nicht sein

2cols ist übrigens auch falsch, eine id darf nicht mit einer ziffer beginnen

<ul>
  <li>page1</li>
  <li>page5</li>
  <li>page2</li>
  <li>page6</li>
  <li>page3</li>
  <li>page4</li>
</ul>

somit ist es ein leichtes das ganze rechts/links zu teilen

oder andere bereits vorgeschlagene variante

"code nicht ändern" ist immer eine schlechte voraussetzung, wenn unglücklich gewählten code hat

[Vinzenz Mai]

Oh je,

Ich habe ein Menü, das folgendermassen aussieht:
<div id="2cols">
   <div id="left">Page 1</div>
   <div id="left">Page 2</div>

eine id dient dazu, etwas zu  _id_entifizieren.
Wie oft darf also eine _id_entische id im gleich Dokument verwendet werden?
Richtig: ein einziges Mal.
Kaum zu glauben, aber so kann man es auch überall lesen, zum Beispiel in SELFHTML.

<div id="left">Page 3</div>
   <div id="left">Page 4</div>
   <div id="right">Page 5</div>
   <div id="right">Page 6</div>
</div>

"Der Code darf nicht geändert werden."

Das ist eine schlechte Idee und eine noch viel schlechtere für Dein Vorhaben.

Freundliche Grüße

Vinzenz