Ausrichtung Problem?

Status
Nicht offen für weitere Antworten.

No-Body

Gesperrt
Hallo liebe Tutorialer

Könnte mir in die Finger beißen, da denkt man man könnte so langsam CSS und dann kommt wieder so ein Ding um die Ecke,als will Gott das ich kein CSS lernen soll ,hab auch schon alle in ICQ gefragt und jetzt auch alle TUT´s im Netz durchgelesen:confused:

Habe 8 Div Boxen mit Dreamwaver erstehlt und noch eine um die 8Boxen gezogen die die mitte im Brower macht das siht so bei mir aus:

CSS:
PHP:
body {

background-color:#66FF00;
}
#main {
position:relative;
width: 1000px;
margin: 20px auto;
 }

#div1 {position:absolute;
background-color:#FF0000;
width:1000px;
height:180px;
top:0px;
left:0px;
z-index:3;
}

#div2 {position:absolute;
background-color:#FF0000;
width:180px;
height:250px;
top:200px;
left:0px;
z-index:3;
}

#div3 {position:absolute;
background-color:#FF0000;
width:180px;
height:250px;
top:470px;
left:0px;
z-index:3;
}

#div4 {position:absolute;
background-color:#FF0000;
width:600px;
height:100px;
top:200px;
left:200px;
z-index:3;
}

#div5 {position:absolute;
background-color:#FF0000;
width:600px;
height:200px;
top:320px;
left:200px;
z-index:3;
}

#div6 {position:absolute;
background-color:#FF0000;
width:600px;
height:300px;
top:540px;
left:200px;
z-index:3;
}

#div7 {position:absolute;
background-color:#FF0000;
width:180px;
height:250px;
top:200px;
left:820px;
z-index:3;
}

#div8 {position:absolute;
background-color:#FF0000;
width:180px;
height:250px;
top:470px;
left:820px;
z-index:3;
}

HTML:
PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="/test/test.css" type="text/css" />
<title>Unbenanntes Dokument</title>
</head>

<body><div id="main">
<div id="div1"><h1>div1</h1></div>
<div id="div2"><h1>div2</h1></div>
<div id="div3"><h1>div3</h1></div>
<div id="div4"><h1>div4</h1></div>
<div id="div5"><h1>div5</h1></div>
<div id="div6"><h1>div6</h1></div>
<div id="div7"><h1>div7</h1></div>
<div id="div8"><h1>div8</h1></div>
</div>
</body>
</html>

Funktioniert auch so wie ich es will,hier mal ein BILD davon :
6.jpg

Nur wie ihr seht richtet sich das ganze nach festen maßen ,das soll sich ändern
da ich zb. in Box4 den Inhalt aus der Datenbank mit einer Schleife apfrage und wenn
das Maß
#div4 {position:absolute;
background-color:#FF0000;
width:600px;
height:100px;
top:200px;
left:200px;
z-index:3;
}
height:100px; übertrifft wird alles falsch veschoben(macht sinn:) )
Ich habe mir das jetzt so gedacht das sich der apstand nicht von allen Boxen berechnet
sondern nur von zb. Box4 zu Box5 in der höhe 10px egal wie groß Box4 ihn der Höhe wird
das sich Box5 mit rutscht und der apstand dann immer noch 10px apstand haben das soll so mit allen Boxen sein untereinander?

Was mus ich ändern bitte gut erklären bin kein Profi :confused:

Gruß No-Body;-]
 
Hi,

um es kurz zu machen: für ein "dynamisches" Layout sind absolute Positionsangaben und feste Höhenangaben absolut ungeeignet.

Stattdessen solltest du ein dreispaltiges Layout mit Hilfe der float-Eigenschaft erstellen, damit die Elemente der mittleren Spalte bei zunehmenden Inhalt in der Höhe zunehmen und die nachfolgenden Boxen nach unten verschoben werden.
 
Danke Maik

Jetzt weiß ich schon mal ein bischen mehr,kennst du ne Seite wo so ein Beispiel erklärt wird


Gruß No-Body:confused:
 
Hey Hey Maik Danke

Das wäre genau das richtige wen es auf Deutsch wäre ?
Hast du noch was auf Deutsch?

Gruß No-Body:)
 
Sry mus noch mal kurz was in die Runde schmeisen,hab meine frage auch im anderen forum gestehlt und das als antwort bekommen

dann solltest du es mit margin probieren.
PHP-Code:
#div4 {position:absolute;
background-color:#FF0000;
width:600px;
height:100px;
top:200px;
left:200px;
margin:10px;
z-index:3;
}
__________________
**andy-ty**
Wer schon nicht überzeugen kann soll wenigstens für Verwirrung sorgen.
Mit Zitat antworten Beitrag zum Zitieren auswählen Direkt antworten
andy-ty
Öffentliches Profil ansehen
Eine Private Nachricht an andy-ty schicken
Besuchen Sie die Homepage von andy-ty!
Suche alle Beiträge von andy-ty
andy-ty Ihrer Buddy-Liste hinzufügen
#3 Beitrag melden
Ungelesen Heute, 16:29
No-Body No-Body ist gerade online
Neuer Benutzer

Registriert seit: 04.05.2008
Beiträge: 2
Frage AW: CSS/Ausrichten/Problem
Danke andy-ty

Das will ich aber nicht habe die frage grad auch noch im anderen Forum gestehlt und jetzt das bekommen

Zitat:
Stattdessen solltest du ein dreispaltiges Layout mit Hilfe der float-Eigenschaft erstellen, damit die Elemente der mittleren Spalte bei zunehmenden Inhalt in der Höhe zunehmen und die nachfolgenden Boxen nach unten verschoben werden.
Wie realisier ich sowas

Gruß No-Body

Muste von unten nach oben lesen ,geht das was er sagt ?

Gruß No-Body:confused:

PS: kann ja garnicht gehen hab den trottel gleich mal gefargt wo er CSS gelernt hat lol
erstmal wäre es padding weil es ja inerhalb einer div box is und dan wäre die top maße ja uninteresant
lerne mal das tut von dir Maik

Gruß No-Body
 
Zuletzt bearbeitet:
geht das was er sagt ?
:)

Der IE interpretiert zwar die height-Eigenschaft als "Mindesthöhe" und lässt die Box "mitwachsen", wenn der Elementinhalt die definierte Höhe überschreitet, aber die nachfolgende Box #div5 verharrt in ihrer festgelegten Position und wird nicht nach unten verschoben.

Die übrigen Browser vergrößern die Box nicht, sodass der Text die Box am unteren Elementrand "überlappt", und die darunterliegende Box wird ebenfalls nicht nach unten verschoben.

Kannst es ja einfach mal in deinem vorgestellten Modell in den unterschiedlichen Browsern überprüfen.
 
Hi Maik

Kannst du mir als CSS Profi mal ein kleines beispielim zusamen hang von meinen Bild
machen ,das wäre echt koreckt ,habe die tuts schon durch aber keinen anhaltspunkt


Gruß No-Body:)
 
Wenn du dich bis morgen gedulden kannst, denn für heute mach ich Feierabend :)
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück