• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

4 p-Elemente als Rahmen

Deever

Deever

New member
Hey Amigos, wie geht's?

Ich möchte in einem div-Container vier p-Elemente an jeweils eine Seite einfügen, quasi als Rahmen:
Code: 
<div class="bereich">
  <p class="bereichoben"/>
  <p class="bereichlinks"/>
  <p class="bereichinhalt">foobar</p>
  <p class="bereichrechts"/>
  <p class="bereichunten"/>
</div>
Die Möglichkeit über die "border"-Eigenschaften der "bereich"-Klasse steht mir nicht zur Verfügung, es muß sich bei dem Rahmen um separate Elemente handeln.
Ich habe natürlich schon alles probiert, mit allen Werten für "position" in allen Elementen und mit *float", habe es jedoch nicht hingekriegt. Kann mir jemand erklären, wie das zu erreichen wäre?

Gruß,
/dev
 
ich würd über position dran gehen:

Code: 
<div class="bereich">
  <p class="bereichoben"> </p>
  <p class="bereichlinks"> </p>
  <p class="bereichinhalt">foobar</p>
  <p class="bereichrechts"> </p>
  <p class="bereichunten"> </p>
</div>

Code: 
.bereich {
  position:relativ;
}

.bereich p {
  position:absolute;
}

.bereich .bereichoben {
  top:0;
}

.bereich .bereichlinks {
  left:0;
}

// usw.
 
Also bei mir schaut das jetzt so aus:
Code: 
.bereich { position:relative; }
.bereichoben, .bereichlinks, .bereichrechts, .bereichunten {
	position:absolute;margin:0px;background-color:#4040ff; }
.bereichoben { top:0px;height:200px; }
.bereichlinks { left:0px;width:20px; }
.bereichrechts { right:0px;width:20px; }
.bereichunten { bottom:0px;height:20px; }
Trotzdem wird mir keines der p-Elemente angezeigt. Warum? Und wie kann man das beheben?

Vielen Dank für deine Antwort!
Gruß,
/dev
 
Hast Du mal testweise ein Schriftzeichen jeweils in die p's geschrieben?
 
Zuletzt bearbeitet:
Bitteschön:
Code: 
<?xml version="1.0" encoding="iso-8859-1"?>
<!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" xml:lang="de">
<head>
<title>Dokumenttitel</title>
<style type="text/css">
/*<![CDATA[*/
html, body, div, span, p, h1, h2, h3, ul, li, a, acronym, cite, table, tr, td, form, label, input, img {
	font-family: 'Lucida Grande', Verdana, Geneva, Lucida, Arial, Helvetica, sans-serif;
	font-size:12px;
	line-height:16px;
	color:#000;
	margin:0px;
	padding:0px;
	border:0px;
}
#aussenrum {
	width:500px;
	height:500px;
}
#oben {
	width:500px;
	height:30px;
	background:#c8c8c8;
}
#links {
	width:30px;
	height:440px;
	background:#c8c8c8;
	float:left;
}
#rechts {
	width:30px;
	height:440px;
	background:#c8c8c8;
	float:right;
}
#unten {
	width:500px;
	height:30px;
	background:#c8c8c8;
}
/*]]>*/
</style>
</head>
<body>
<div id="aussenrum">
<p id="oben">x</p>
<p id="links">x</p>
<p id="rechts">x</p>
<br style="clear:both;" />
<p id="unten">x</p>
</div>
</body>
</html>

Ich weiss jetzt allerdings nicht, ob das so auch im IE läuft...
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben