mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Di 14.10.2008 09:35 Benutzername: Passwort: Auto-Login

Thema: [css] vertikales ausrichten in div bereichen vom 11.03.2008

Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> [css] vertikales ausrichten in div bereichen
Seite: Zurück  1, 2, 3  Weiter
Autor Nachricht
heiko_rs

Dabei seit: 06.02.2008
Ort: Berlin
Alter: -
Geschlecht: Männlich
Verfasst Mi 12.03.2008 13:25
Titel

Antworten mit Zitat Zum Seitenanfang

#box1 möchte "Layout": http://onhavinglayout.fwpf-webdesign.de/

Außerdem stört sich der IE an Deinem clear per br. Ich würde aber eh nicht mit einem inhaltslosen Element clearen - allenfalls per hr, da diese auch semantisch einen Sinn ergibt (aber sie ist aufgrund nicht wirklich ermittelbarer erhöhter Außenabstände im IE nicht immer ideal).

Alternativen: Lasse ein folgendes Element clearen (es kommen ja sicher noch mehr dazu), oder cleare ohne Zusatz-Markup: http://jassesnee.de/easyclear/index.html
  View user's profile Private Nachricht senden
stry
Threadersteller

Dabei seit: 24.02.2006
Ort: Minden
Alter: 21
Geschlecht: Männlich
Verfasst Mi 12.03.2008 15:47
Titel

Antworten mit Zitat Zum Seitenanfang

vielen dank für deine hilfe bisher, aber das mit dem clear läuft leider immer noch nicht so wie es soll.

das float soll ja nach dem div mit der suchfunktion aufgehoben werden, aber an der stelle erzeugt es nicht den gewünschten effekt. habe dann vor dem rahmen eine weiteres div objekt mit einer clear eigenschaft gestellt, dann war zwar das float korrekt aufgehoben, aber ich bekam einen abstand von etwa 2px zwischen meinem kopf und rahmen.

html
css

das ist meine erste seite, wo ich versuche wirklich sauber zu coden, vorher habe ich dem bereich links immer float left gegeben und dem rechten teil ein float right. hinterher mit einem br -> clear both alles aufgehoben.

ist der restliche quelltext soweit 'sauber', oder würde man nicht so viele divs verschachteln?

ich habe außerdem versucht, so wenig größen angaben wie möglich zu verwenden, um die seite leicht editierbar zu gestalten
  View user's profile Private Nachricht senden
heiko_rs

Dabei seit: 06.02.2008
Ort: Berlin
Alter: -
Geschlecht: Männlich
Verfasst Mi 12.03.2008 16:12
Titel

Antworten mit Zitat Zum Seitenanfang

Sieht doch schon ganz gut aus. Aber Du solltest unbedingt validieren: http://validator.w3.org/

Außerdem: #rahmen sollte noch clearen, und damit #seitenkopf die Floats einschließt, kannst Du es z.B. ebenfalls floaten lassen (statt der height-Deklaration). Allerdings hat Netscape 7 (sowie einige Operas der Version 7) diesbzgl. einen Bug und "vergisst" dann das pos. rel., aber letztlich brauchst Du innerhalb von #seitenkopf eh kein Float. In jedem Falle braucht das Logo noch display: block; (entfernt die Grafik-Unterlänge).

Und zuguterletzt: Du verwendest zuviele divs. Umgib nie einzelne Elemente mit einem div (das gilt auch für die Navi-ul).
  View user's profile Private Nachricht senden
stry
Threadersteller

Dabei seit: 24.02.2006
Ort: Minden
Alter: 21
Geschlecht: Männlich
Verfasst Mi 12.03.2008 16:18
Titel

Antworten mit Zitat Zum Seitenanfang

wenn ich im #rahmen nen clear nutze, bekomme ich auch diese lücke da rein
siehe hier

ups schon klar, vergessen das display: block anzuwenden.

vielen dank!


Zuletzt bearbeitet von stry am Mi 12.03.2008 16:21, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
heiko_rs

Dabei seit: 06.02.2008
Ort: Berlin
Alter: -
Geschlecht: Männlich
Verfasst Mi 12.03.2008 16:55
Titel

Antworten mit Zitat Zum Seitenanfang

Zu Deiner PN: Wenn #seitenkopf floatet und #rahmen cleart, stehen sie unverändert ohne jegliche Überlappung untereinander, nur innerhalb von #seitenkopf muss halt nicht mehr gecleart werden. Diese Methode wende ich persönlich so oft wie möglich an (vorausgesetzt das betreffende Element darf eine width-Deklaration bekommen). Siehe auch http://orderedlist.com/articles/clearing-floats-the-fne-method
  View user's profile Private Nachricht senden
stry
Threadersteller

Dabei seit: 24.02.2006
Ort: Minden
Alter: 21
Geschlecht: Männlich
Verfasst Do 13.03.2008 12:51
Titel

Antworten mit Zitat Zum Seitenanfang

die sache mit dem float ist mir immer noch nicht so ganz geläufig.

jpg
html

html-code:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
   <title>Test</title>
   <link rel="stylesheet" type="text/css" href="beispiel2.css">
</head>
<body>
   <div id='container'>
      <div id='rahmen'>
         <div id='seite'>seite</div>
         <div id='inhalt'>
            <div id='box1'>box1</div>
            <div id='box2'>box2</div>
            <div id='box3'>box3</div>
            <div id='box4'>box4</div>
         </div>
      </div>
      <div id='footer'></div>
   </div>
</body>
</html>


css-code:
Code:
*
{
   padding: 0;
   margin: 0;
}

#container
{
   width: 800px;
}

#rahmen
{
   width: 798px;
   border: 1px solid #cc0001;
}

#seite
{
   width: 200px;
   height: 400px;
   float: left;
   background-color: #cccccc;
}

#inhalt
{
   float: left;
   width: 578px;
   margin: 0px 0px 0px 220px;
}

#box1
{
   width: 250px;
   height: 250px;
   float: left;
   background-color: #aaaaaa;
}

#box2
{   
   width: 250px;
   height: 250px;
   margin: 0px 0px 0px 328px;
   background-color: #888888;
}

#box3
{
   width: 250px;
   height: 250px;
   clear: both;
   float: left;
   margin: 20px 0px 0px 0px;
   background-color: #666666;
}

#box4
{
   width: 250px;
   height: 250px;
   margin: 20px 0px 0px 328px;
   background-color: #444444;
}

#footer
{
   clear: both;
}


habe auch #inhalt nun ein float gegeben, leider immer noch nicht optimal.
  View user's profile Private Nachricht senden
heiko_rs

Dabei seit: 06.02.2008
Ort: Berlin
Alter: -
Geschlecht: Männlich
Verfasst Do 13.03.2008 13:00
Titel

Antworten mit Zitat Zum Seitenanfang

Sein margin-left muss noch angepasst werden *zwinker*
  View user's profile Private Nachricht senden
stry
Threadersteller

Dabei seit: 24.02.2006
Ort: Minden
Alter: 21
Geschlecht: Männlich
Verfasst Do 13.03.2008 13:06
Titel

Antworten mit Zitat Zum Seitenanfang

dann passts im ff, aber der ie macht da nicht mit...

wenn ich ein div hab der float left hat und den div, der rechts den ersten div umfließen soll 20px abstand von dem haben soll, dann muss ich doch margin-left 20+width vom ersten div nehmen, oder?

manchmal klappt es dann, manchmal nicht *Schnief*

edit: außerdem muss dann nach dem #inhalt vor ende des #rahmen noch ein clear stattfinden, sonst ist der rahmen nicht um alles drum. und da kommt ja kein element mehr zwischen, dem ich ein clear geben kann


Zuletzt bearbeitet von stry am Do 13.03.2008 13:08, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
 
Ähnliche Themen [CSS] DIV ausrichten
[CSS] <p> im <div> unten ausrichten
CSS: drei <div>-tags ausrichten
Problem mit div-Bereichen
3 Spaltige sLayout mit div-Bereichen...
Vertikales CSS Menü
Neues Thema eröffnen   Neue Antwort erstellen Seite: Zurück  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 deine Beiträge in diesem Forum nicht bearbeiten.
Du kannst deine Beiträge in diesem Forum nicht löschen.
Du kannst an Umfragen in diesem Forum nicht mitmachen.