Demo

Probiere ClanSphere aus und teste daran herum. Demo


Antworten: 4
Seite [1]
Hellhound


Wannabe poster





Beiträge: 32
 # Thema - 22.02.2008 um 10:36 Uhr
Hallo,
ich würde gerne unter dem Header drei div Boxen nebeneinander anordnen. Ich habe dazu diesen: http://www.clansphere.net/index/board/thread/where/2498 Beitrag gefunden. Leider bin ich was die Materie betrifft noch in der Einarbeitungsphase und möchte bitten ob mir das jemand etwas genauer erklären könnte.

Was ich bisher gemacht habe:

Ich habe meine drei Boxen angelegt:

index.htm +-
<div id="head">{func:title}</div>
<div id="latest_posts">{board:navlist}</div>
<div id="latest_wars">{wars:navlist}</div>
<div id="latest_news">{news:navlist}</div>
<div id="nav-left" style="clear:both">


Und dann versucht in der .css das Ganze anzuordnen. Mit der ersten Box habe ich nichts weiter gemacht, sie fügt sich unter dem Header schön linksbündig ein. Die anderen beiden Boxen habe ich versucht mit position: absolute an die gewünschte Stelle zu bekommen. Es funktioniert, ist aber irgendwie keine saubere Lösung und macht vor allem beim minimieren und horizontal scrollen Probleme.

.css +-
#latest_posts {
width: 387px;
height: 100px;
padding: 2px 2px 2px 165px;
background-image: url(img/posts.gif);
background-repeat: no-repeat;
background-color: #c4c4c4;
font: lighter 9px Arial, Helvetica, sans-serif;
color: #000000;
text-align: left;
top: 120px;
left: 0px;
}
#latest_news {
position: absolute;
width: 291px;
height: 100px;
background-image: url(img/news.gif);
background-repeat: no-repeat;
background-color: #c4c4c4;
padding: 2px 2px 2px 100px;
font: lighter 9px Arial, Helvetica, sans-serif;
color: #000000;
text-decoration:underline;
text-align: left;
top: 120px;
left: 750px
}
#latest_wars {
position: absolute;
width: 250px;
height: 100px;
padding: 2px 2px 2px 3px;
background-image: url(img/wars.gif);
background-repeat: no-repeat;
background-coloc:#c4c4c4;
font: lighter 9px Arial, Helvetica, sans-serif;
color: #000000;
text-align: left;
top: 120px;
left: 497px;
}
Inaktiv
ven0m


Going for pro




Herkunft: Essen
Beiträge: 406
 # Antwort: 1 - 22.02.2008 um 11:42 Uhr
trag mal bei allen drei boxen float:left oder float:right ein, sollte eigentlich helfen wenn ich mich jetzt nicht total vertuhe

btw.
wenn du weitere fragen oder so hast, kann ich dir nur http://www.css4you.de/ empfehlen.


MfG
ven0m


------------------
Gruß
ven0m

Inaktiv
|
ichraffsnicht ClanSphere Team

Supporter
Supporter



Herkunft: Erdeborn bei Lutherstadt Eisleben
Beiträge: 3191
 # Antwort: 2 - 22.02.2008 um 11:48 Uhr
du kannst das ganze auch mit inline-elementen lösen zb: <span>


------------------



Zuletzt editiert von X-R4Y ClanSphere Team am 22.02.2008 um 11:49 Uhr (1x Editiert)
Inaktiv
|
Fr33z3m4n ClanSphere Team


Medal of Honor




Herkunft: Hamm
Beiträge: 11094
 # Antwort: 3 - 22.02.2008 um 13:45 Uhr
würde bei direkten angeordneten Div Boxen auf Position verzichten.

Wie ven0m schon sagte, nutze hier die Float attribute


------------------
mfg
Patrick "Fr33z3m4n" Jaskulski

Antoine de Saint-Exupéry: Wenn Du ein Schiff bauen willst, so trommle nicht Männer zusammen, um Holz zu beschaffen, Aufgaben zu verteilen, sondern lehre die Männer die Sehnsucht nach dem endlosen weiten Meer.

Inaktiv
|
ichraffsnicht ClanSphere Team

Supporter
Supporter



Herkunft: Erdeborn bei Lutherstadt Eisleben
Beiträge: 3191
 # Antwort: 4 - 22.02.2008 um 14:46 Uhr
kannst auch inline-block verwenden.


------------------
Inaktiv
|
Antworten: 4
Seite [1]


Sie müssen sich registrieren, um zu antworten.