CSS: DIV-Positionierung

**TBT** · 20.10.2004, 20:05

für jedes der grauen Vierecke ein div, und dann ist "float" dein Freund

**Abraxax** · 20.10.2004, 20:06

margin und float helfen dir dabei. ;-)

such mal hier. irgendwo hatte ich zu einem ähnlichen problem bereits eine lösung gepostet gehabt. habe jetzt keine lust, dass noch einmal zu machen.

**php_rookie** · 20.10.2004, 20:27

danke für eure hilfe euch beiden, ich werd mal nach den genannten stichwörtern suchen!

**php_rookie** · 21.10.2004, 15:35

oh mann, ich komm da einfach nicht weiter. kann mir bitte jemand dabei helfen?

im moment hab ich das hier und es schaut einfach furchtbar aus:

Code:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Testseite</title>
<style type="text/css">
<!--
.posting {
	position:relative;
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-top-style: solid;
	border-bottom-style: solid;
	width: 660px;
}
.signature {
	width: 100px;
	height: 100%;
	background-color:#CCCCCC;	
	float: left;
}
.nickname {
	font-weight: bold;
}
.subject {
	width: 450px;
	height: 20px;
	background-color:#DDDDDD;
	float: left;
}
.answer {
	text-align:center;
	width: 100px;
	height: 20px;
	background-color:#CCCCCC;
	float: right;
}
.text {
	float: left;
	padding: 3px;
}
-->
</style>
</head>

<body>
<div class="posting">
  <div class="signature"><span class="nickname">Nickname</span></div> 
  <div class="subject">Re: Betreffzeile</div>
  <div class="answer">antworten</div>    
  <div class="text">Hier steht der Postingtext.</div>   
</div>
</body>
</html>

wie muss ich die einzelnen blöcke ineinander verschachteln, sodass das gesamte aussieht wie im screenshot oben?

**wahsaga** · 21.10.2004, 15:44

Original geschrieben von php_rookie
im moment hab ich das hier und es schaut einfach furchtbar aus

ja, und ob es das tut.

das ist keine semantisch sinnvoll aufgebaute HTML-seite, sondern einfach nur "tag soup".

so gut wie jedes beleibige element lässt sich per CSS formatieren - also wieso zum henker klatschst du alles ohne sinn und verstand in divs?

**php_rookie** · 21.10.2004, 16:00

also wieso zum henker klatschst du alles [...] in divs?

weil mir das oben empfohlen wurde:

für jedes der grauen Vierecke ein div, und dann ist "float" dein Freund

wie kann ich es besser machen?

**Patrick_PQ** · 21.10.2004, 16:11

schau mal bei CSS4you vorbei - Link ist hier im Forum festgetackert. Da findest du eine ausführliche Erklärung unter der Rubrik Workshops, Boxmodel

**php_rookie** · 21.10.2004, 16:20

danke, das hilft mir aber nur bedingt weiter :-(

mir gehts mehr um die positionierung der blöcke als die abstände mit padding und margin. die bau ich ein, wenn das grundgerüst erst mal steht.

**Milian** · 21.10.2004, 17:14

Code:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Testseite</title>
<style type="text/css">
<!--
.posting {
	position:relative;
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-top-style: solid;
	border-bottom-style: solid;
	width: 700px;
}
.signature {
	width: 100px;
	height: 100%;
	background-color:#CCCCCC;	
	float: left;
	text-align:center;
}
.nickname {
	font-weight: bold;
}
.subject {
	height: 20px;
	width:400px;
	background-color:#DDDDDD;
	float: left;
}
.answer {
	width:100px;
	text-align:center;
	height: 20px;
	background-color:#CCCCCC;
	float:left;
}
.edit {
	width:100px;
	text-align:center;
	height: 20px;
	background-color:#CCCCCC;
	float: left;
}
.text {
	text-align:left;
	padding:3px;
	float:none;
}
.textblock {
	width:600px;
	float:left;
	text-align:left;
	}
-->
</style>
</head>
<div class="posting">
	<div class="signature">
		<span class="nickname">Nickname</span>
		<img border="1" width="60" height="60" style="vertical-align:middle;"><br>
		(12312)
	</div>
  <div class="textblock">
		<div class="subject">Subject</div><div class="edit">Editieren</div><div class="answer">Antworten</div><br />
		<div  class="text">Hier steht der Postingtext.</div>
  </div>
</div>
</body>
</html>

Hat mich selbst interessiert, deshalb hab ichs ma gemacht

**php_rookie** · 21.10.2004, 19:40

super, danke! ist schon mal ein guter anfang.

leider schaut es nur im ie6 so aus, wie man erwartet. in ff 0.93, opera 5.12 und netscape 6.2 wirkt es verzerrt. opera kapiert die 100% höhenangabe nicht, bei firefox fehlt die untere zeile und netscape stellt das padding nicht richtig dar :-(

**wahsaga** · 21.10.2004, 20:34

Original geschrieben von php_rookie
opera kapiert die 100% höhenangabe nicht

nein, vermutlich hast du höhenangaben noch nicht verstanden, und meinst das, was der IE draus macht, wäre richtig ...

**php_rookie** · 21.10.2004, 22:38

und meinst das, was der IE draus macht, wäre richtig ...

darauf antworte ich jetzt schlichtweg einfach nicht..... *grml* opera ist nicht das gelbe vom ei, das hat sich mehrfach bewiesen. wenn sich ein browser an die w3c-standards hält, dann mozilla bzw. firefox.

**asp2php** · 21.10.2004, 22:48

eine gewagte Behauptung ... IMHO hält sich keiner von den Browser richtig dran

**Patrick_PQ** · 22.10.2004, 08:52

@php_rookie: auf CSS4YOU steht alles was du brauchst - unter Workshops, Boxmodel werden auch divs entsprechend ausgerichtet und positioniert. Vielleicht nicht genau so wie du es brauchst, aber das Prinziep wird erklärt.

Zu den einzelnen Eigenschaften wird angegeben welcher Browser was unterstützt und meistens sogar Lösungen ... also mit etwas Aufwand kannst du deine Seite sicher noch optimieren.

CSS: DIV-Positionierung