Autor |
Nachricht |
NeoPhoenix
Threadersteller
Dabei seit: 07.06.2006
Ort: Cologne
Alter: 39
Geschlecht:
|
Verfasst Do 31.01.2008 23:15
Titel CSS / Newbie / DIVs nebeneinander positionieren? |
|
|
Hallo Leute,
ich habe ein kleines großes Problem. Wir haben vor einiger Zeit in der Berufsschule mit CSS angefangen (ich komme aus dem Printbereich und hatte vorher noch kein bisschen Kontakt mit CSS) und im Moment bastel ich mir meine eigene HP - zumindest versuche ich es.
Ein Layout habe ich auch schon angelegt (http://img218.imageshack.us/img218/2955/layoutsk0.png). Heute habe ich mit der Umsetzung angefangen und ich komm einfach nicht weiter .
Und zwar ist es ein ganz blödes und mit Sicherheit einfaches Problem: Ich bekomme meine DIV-Felder nicht nebeneinander gestellt sondern immer nur untereinander.
Zu sehen hier: http://www.kniepe.de
Die aktuelle CSS-Datei die dazu gehört gibt's hier: http://www.fanatics-network.de/mk/css/struktur.css.
Der Seitenquelltext der index.html ist direkt auf der Seite zu finden.
Ich denke es liegt daran, dass die DIVs am Ende immer noch einen Umbruch haben, kann man den nicht einfach irgendwie ausschalten?
Ich hoffe ihr könnt mir helfen.
Zuletzt bearbeitet von NeoPhoenix am Do 31.01.2008 23:17, insgesamt 1-mal bearbeitet
|
|
|
|
|
Smooth-Graphics
Dabei seit: 22.05.2006
Ort: -
Alter: -
Geschlecht:
|
Verfasst Fr 01.02.2008 00:09
Titel
|
|
|
Beschäftige dich mal mit Float und Clear. Ansonsten mit Positionierung. www.css4you.de
|
|
|
|
|
Anzeige
|
|
|
Zim
Dabei seit: 05.12.2006
Ort: Earth Rocks
Alter: -
Geschlecht:
|
Verfasst Fr 01.02.2008 00:10
Titel
|
|
|
Ich habe mir nun nicht deine Links angeschaut aber sowas geht mit
Code: |
…
float:left; // oder right
…
|
das nächste Element was aus diesem Fluss heraussoll erhält
Code: |
…
clear:left; // oder right oder both
…
|
|
|
|
|
|
NeoPhoenix
Threadersteller
Dabei seit: 07.06.2006
Ort: Cologne
Alter: 39
Geschlecht:
|
Verfasst Fr 01.02.2008 00:15
Titel
|
|
|
Habe ich schon probiert.
Ich habe die linke Seite mit float left auch links an den zweiten Kasten bekommen, allerdings den dritten mit float right nicht an die rechte Seite des zweiten Kasten.
NAtürlich könnte ich auch alles absolut positionieren, aber dann ist die Seite nicht mehr so schön flexibel. Ich will es lieber so lösen.
Vielleicht habe ich auch beim floaten was falsch gemacht?
Habe die Seite jetzt noch mal auf den Float-STand von vor zwei Stunden gebracht damit ihr euch das mal ansehen könnt. Auf die Idee bin ich wie gesagt auch schon gekommen aber die rechte Seite floatet halt nicht ^^. Vielleicht wisst ihr ja diesbezüglich noch eine Lösung?
|
|
|
|
|
Smooth-Graphics
Dabei seit: 22.05.2006
Ort: -
Alter: -
Geschlecht:
|
|
|
|
|
Snifferdog
Dabei seit: 08.03.2007
Ort: Düsseldorf
Alter: 35
Geschlecht:
|
Verfasst Fr 01.02.2008 00:36
Titel
|
|
|
Hey...
pass auf .. ich habs folgender Maßen geändert und dann läuft das Ganze.
Das Problem lag nicht nur am floaten, sondern auch an der Größer der Divs.
Das "mother div" war zu klein und deswegen passte das Randdiv gar nicht erst...
aber wie gesagt, es war nicht der einzige Fehler ....
positon: relative fehlte ... was dann auch den margin den du für das mittlere Div gesetzt hattest unnötig macht...
und dann klappt das alles auch
naja so funktionierts jedenfalls:
Code: |
#mother {
margin: 34px auto;
width: 930px;
height: 720px;
}
#mother_left {
position: relative;
float: left;
width: 32px;
height: 700px;
background-image: url(../img/mother_left.png);
background-repeat: no-repeat;
}
#mother_main {
position: relative;
float: left;
width: 856px;
height: 720px;
background-image: url(../img/mother_main.png);
background-repeat: repeat;
}
#mother_right {
position: relative;
float: left;
width: 32px;
height: 720px;
background-image: url(../img/mother_right.png);
background-repeat: no-repeat;
}
|
Mein Tipp: Wenn du nicht genau weißt woran es liegt fügst du zu dem Div das du untersuchen willst
einfach mal einen prägnanten Border hinzu .. also z.b.
Code: |
border: 1px blue solid;
|
Dann hast du die Maße besser im Blick
|
|
|
|
|
NeoPhoenix
Threadersteller
Dabei seit: 07.06.2006
Ort: Cologne
Alter: 39
Geschlecht:
|
Verfasst Fr 01.02.2008 00:46
Titel
|
|
|
Hey das klappt!
Danke danke danke!
Ich hab natürlich total vergessen, dass Margins ja noch auf die Width dazu addiert werden! An was man nicht alles nicht denkt.
Aber zwei Sachen versteh ich trotzdem nicht:
1. Was genau macht das position: relative? Ich dachte zu solchen positionierungs-Befehlen muss auch immer noch ne Angabe wie Top, Right etc.
2. Warum floatet das mother_right-DIV auch left? Müsste das nicht links im Mother-DIV floaten?
edit: Ich merke gerade, dass ich das ganze sowieso anders aufbauen muss weil das mit dem Header ja auch sonst nicht klappt. Naja aber wenigstens weiß ich jetzt was ich falsch gemacht habe und werd' es hoffentlich beim nächsten mal besser machen. Danke.
Ich melde mich dann die Tage noch mal.
Zuletzt bearbeitet von NeoPhoenix am Fr 01.02.2008 00:58, insgesamt 1-mal bearbeitet
|
|
|
|
|
kaputt
Dabei seit: 08.05.2003
Ort: -
Alter: -
Geschlecht:
|
Verfasst Fr 01.02.2008 02:09
Titel
|
|
|
Kleiner Tipp: Den Div-Container um das Header-Bild kannst du dir sparen. Gib einfach dem Bild die Eigenschaften im CSS mit, die du jetzt dem Div gibst.
|
|
|
|
|
|
|
|
Ähnliche Themen |
div nebeneinander positionieren
[CSS] 4 DIVS nebeneinander
3 divs nebeneinander
[css] divs nebeneinander zentrieren
divs positionieren
mehrere divs nebeneinander ohne umbruch
|
|