|
 |
  |
| Autor |
Nachricht |
Benjamin1983
Neuer [User]
Anmeldung: 21.01.08
Beiträge: 1
|
 Verfasst am: 21.01.2008, 14:27 Titel: Div Anordnung |
 |
|
Hi,
ich bin neu hier und hoffe, dass mir jemand helfen kann.
Ich habe lange Zeit keine Hompage mehr gestaltet und bin, wie ich zu meinem Entsetzen gemerkt habe, total raus.
Ich versuche die ganze Zeit folgendes design zu machen
bekomme es aber einfach nicht hin.
folgenden code habe ich bisher
| Code: | <body>
<div id="bg">
<div id="main">
<div id="album">
</div>
<div id="links">
<div id="linkstext">
</div>
</div>
<div id="rechts">
<div id="rechtstext">
</div>
</div>
</div>
</div>
</body> |
und als css
| Code: | body {
background-color:#000000;
}
#bg {
background-image:url(../pics/bg.jpg);
width:930px;
height:715px;
margin: 0 auto;
background-repeat:no-repeat;
}
#main {
background-color:#FF0000;
width:930px;
height:250px;
top:350px;
}
#album {
background-color:#0033FF;
width:250px;
height:250px;
margin-left:20px;
}
#links {
background-color:#009900;
width:50px;
height:250px;
} |
er ordnet die divs jedoch immer untereinander statt nebeneinander an und ich bekomme es nicht hin, dass er es in einer reihe macht.
Habs schon mit float probiert doch keinen Erfolg gehabt.
Wahrscheinlich ist diese Frage echt peinlich, weil sie zu den totalen Grundlagen zählt. ich bitte trotzdem um Hilfe, da ich einfach mal wieder in die Materie rein kommen muss.
Gruß benjamin
|
|
| Nach oben |
|
 |
chris1988
Bekannter [User]
Anmeldung: 12.12.05
Beiträge: 1644
|
| Verfasst am: 21.01.2008, 15:33 Titel: |
|
|
Float ist schon ganz richtig 
| Code: | #links {
background-color:#009900;
width:50px;
height:250px;
float: left;
} |
Mit diesem float wird #links innerhalb des Elementes, in dem es eingefügt wird, links ausgerichtet.
Also z.B.:
| Code: |
<div id="oben">Dieser Text steht über #links!</div>
<div id="mitte">
<div id="links">Dieser Teil steht links!</div>
<div id="haupt">Dieser Text steht rechts daneben.... </div>
</div>
|
Analog funktioniert das mit float: right.
Es gibt allerdings noch zwei Dinge, die du beachten solltest:
1) Wenn du z.B. schreibst:
| Code: |
<div>
Dies ist Text x, usw. usf.
<div id="y" style="float: right;">Dies ist Text y</div>
</div>
|
Dann solltest du beachten, dass in diesem Fall die Reihenfolge eine Rolle spielt: Text y steht nicht neben Text x, sondern unterhalb (aber trotzdem rechts)!
Um dies zu ändern, muss das div#y vor Text x stehen!
2) Wenn die Höhe des Textes aus dem mittleren Bereich die höhe der gefloateten Divs übersteigt, werden letztere vom Text "umflossen" (Sprich: Der Text steht ab dieser Höhe unterhalb dieser Divs).
Da dies nicht immer unbedingt erwünscht ist, kannst du dem mittleren Teil einfach einen Außenabstand in die entsprechende Richtung verpassen, der die Breite des gefloateten Elementes in dieser Richtung übersteigt, oder der ihr zumindest gleicht.
Hoffe, geholfen zu haben. In Zukunft wäre es übrigens praktisch, wenn du in die Grafik noch die Namen der Elemente im Quellcode einfügst (oder zumindest irgendwo im Beitrag benennst). Alternativ die aktuelle Version des Quelltexts irgendwo hochladen, damit man sich's ansehen kann.
(So ergibt sich sonst z.B. die Frage: "Was ist #album?")
Schönen Gruß,
chris
_________________
Mancher ertrinkt lieber,
als daß er um Hilfe ruft.
(Wilhelm Busch)
|
|
| Nach oben |
|
|
|
|
  |
|
Alle Zeiten sind GMT + 1 Stunde
|
| Seite 1 von 1 |
|  |
