mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Fr 29.03.2024 12:57 Benutzername: Passwort: Auto-Login

Thema: CSS / Newbie / DIVs nebeneinander positionieren? vom 31.01.2008


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> CSS / Newbie / DIVs nebeneinander positionieren?
Seite: 1, 2, 3  Weiter
Autor Nachricht
NeoPhoenix
Threadersteller

Dabei seit: 07.06.2006
Ort: Cologne
Alter: 39
Geschlecht: Männlich
Verfasst Do 31.01.2008 22:15
Titel

CSS / Newbie / DIVs nebeneinander positionieren?

Antworten mit Zitat Zum Seitenanfang

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 *Schnief*.

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. Lächel


Zuletzt bearbeitet von NeoPhoenix am Do 31.01.2008 22:17, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
Smooth-Graphics

Dabei seit: 22.05.2006
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Do 31.01.2008 23:09
Titel

Antworten mit Zitat Zum Seitenanfang

Beschäftige dich mal mit Float und Clear. Ansonsten mit Positionierung. www.css4you.de
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Anzeige
Anzeige
Zim

Dabei seit: 05.12.2006
Ort: Earth Rocks
Alter: -
Geschlecht: Männlich
Verfasst Do 31.01.2008 23:10
Titel

Antworten mit Zitat Zum Seitenanfang

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

  View user's profile Private Nachricht senden
NeoPhoenix
Threadersteller

Dabei seit: 07.06.2006
Ort: Cologne
Alter: 39
Geschlecht: Männlich
Verfasst Do 31.01.2008 23:15
Titel

Antworten mit Zitat Zum Seitenanfang

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. *Schnief* 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?
  View user's profile Private Nachricht senden
Smooth-Graphics

Dabei seit: 22.05.2006
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Do 31.01.2008 23:30
Titel

Antworten mit Zitat Zum Seitenanfang

http://www.mediengestalter.info/forum/4/css-div-layer-problem-mehrere-divs-nebeneinander-und-unte-67698-1.html
http://www.mediengestalter.info/forum/4/css-divs-nebeneinander-zentrieren-56302-1.html
http://www.mediengestalter.info/forum/4/css-newbie-divs-nebeneinander-positionieren-100431-1.html
http://www.mediengestalter.info/forum/4/css-3-spalten-layout-problem-80020-1.html
http://www.mediengestalter.info/forum/4/css-problem-mit-3-spalten-layout-85388-1.html

mal zufällig aus den verwandten Themen und deren Verwandten gegriffen.-...
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Snifferdog

Dabei seit: 08.03.2007
Ort: Düsseldorf
Alter: 35
Geschlecht: Männlich
Verfasst Do 31.01.2008 23:36
Titel

Antworten mit Zitat Zum Seitenanfang

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 *zwinker*

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
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
NeoPhoenix
Threadersteller

Dabei seit: 07.06.2006
Ort: Cologne
Alter: 39
Geschlecht: Männlich
Verfasst Do 31.01.2008 23:46
Titel

Antworten mit Zitat Zum Seitenanfang

Hey das klappt!

Danke danke danke! * Applaus, Applaus * * Ich bin unwürdig *


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 Do 31.01.2008 23:58, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
kaputt

Dabei seit: 08.05.2003
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Fr 01.02.2008 01:09
Titel

Antworten mit Zitat Zum Seitenanfang

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.
  View user's profile Private Nachricht senden
 
Ähnliche Themen div nebeneinander positionieren
[CSS] 4 DIVS nebeneinander
3 divs nebeneinander
[css] divs nebeneinander zentrieren
divs positionieren
3 Divs nebeneinander im Container auf einer Höhe?
Neues Thema eröffnen   Neue Antwort erstellen Seite: 1, 2, 3  Weiter
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.