ComputerBase Menü
Aktuelles

CSS Content-Box positionieren

X

Xethon

Lieutenant
Registriert
Feb. 2005
Beiträge
533
Hi,

bei meinem neuen Design habe ich folgendes vor:


Hier erstmal wie es bisher aussieht
Xethon-Design

Ich will eine Box mit runden Ecken als Content und diese soll mittig in dem hellgrauen Bereich und immer mit 20px Abstand zur Navi und zum Footer sitzen.
Habe mir schon 4 Grafiken (Ecken für LO, RO, LU und RU) gebastelt doch weiß nicht wie ich die Box aufbaue und so platziere wie ich es eben beschrieben habe. Meine Versuche haben bis jetzt noch keine zeigbaren Ergebnisse geliefert :(

Hoffe ihr könnt mir dabei ein wenig helfen. Danke :)

Edit: Habe nun mithilfe dieses Tutorials (http://www.ohne-css.gehts-gar.net/0028.php) ne Box eingebaut, doch sie wird nicht angezeigt, nur der Text der darin steht. Könnt ihr mir sagen warum nicht?
 
Hier der Code:

Code: 
CSS:

/* Design by Xethon for cms2day */

* { padding: 0; margin: 0; }

body {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 13px;
}

p {
 padding: 10px;
}

/* WRAPPER */
#wrapper { 
 margin: 0 auto;
 width: 100%;
}

/* HEADER */
#header {
 color: #333;
 width: 100%;
 float: left;
 height: 180px;
 background: url('images/header.jpg') repeat-x;
}

/* NAVI */
#navigation {
 float: left;
 width: 100%;
 height: 40px;
 color: #333;
 background: url('images/menu.jpg') repeat-x;
}

/* CONTENT */
#content { 
 float: left;
 color: #333;
 background: #C3C3C3;
 height: 350px;
 width: 100%;
 display: inline;
 
.top {
background: url(images/top.jpg);
width: 780px;
height: 16px;
}

.box {
width: 760px;
background: #3D3D3D;
padding: 0 10px;
} 

.bottom {
background: url(images/bottom.jpg);
width: 780px;
height: 16px;
} 

/* FOOTER */
#footer { 
 width: 100%;
 height: 50px;
 clear: both;
 color: #333;
 background: url('images/footer.jpg') repeat-x;
}

Code: 
HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Xethon-Design</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
	<div id="wrapper">
         
         <div id="header">
		       <p></p>		 
			   </div>
		 
         <div id="navigation">
		       <p></p>		 
			   </div>
		 
     <div id="content">
		        
	   <div class="top"></div>
     
     <div class="box">
     <h3 style="margin-top: 0;">Box mit abgerundeten Ecken</h3>
     <p>
        Mit Hilfe zweier Hintergrundgrafiken kann man auch bei einem CSS-basierten Layout Boxen mit abgerundeten Ecken darstellen.
     </p>
     <p style="margin-bottom: 0;">
        Erforderlich ist eine top- und bottom-Grafik mit den abgerundeten Ecken sowie eine identische Hintergrundfarbe für die Box.
     </p>
     </div>
     
     <div class="bottom"></div>       		 
		 
     </div>
		 
     <div id="footer">     
			   <p></p>		
		 </div>   
  
  </div>
   
</body>
</html>
 
Es sind doch immer diese blöden Fehler, die so gravierende Auswirkungen haben :freak:

Dankeschön dafür, jetzt wird die Box angezeigt.

Zu meinem 2. Problem, wie kann ich es einrichten, dass die Box immer 20px Abstand zur Navi und zum Footer hat?
 
Hast du es schon mit "margin" probiert?

Beispiel:

Code: 
.box {
...
margin: 20px 0; (für oben/unten 20px und rechts/links 0px)
}
 
Habe ich gemacht. bei der class .top und .bottom habe ich ein margin oben bzw. unten von 20px eingefügt. Oben klappts unten jedoch nicht. Wenn ich jetzt Inhalt in die Box einfüge müsste sie ja eigentlich bei 20px Abstand vor dem Footer stoppen. Jedoch bleibt der Footer wo er ist und ich Box wächst darüber. Schaut es euch mal an.

http://lezius.alfahosting.org/neu/

Wie löse ich das?
 
Puh, ich habe mir die Freiheit genommen, deinen Quelltext etwas einfacher zu gestalten. Hier mein Ergebnis:

HTML:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8;charset=windows-1252" />
<title>Xethon-Design</title>
<link rel="stylesheet" type="text/css" href="Xethon-Design_files/style000.css" />
</head>

<body>

<div id="wrapper">
         
<div id="header">
<p></p>		 
</div>
		 
<div id="navigation">
<p></p>		 
</div>
		 
<div id="content">
		  
<div class="box">
<div class="box2">

     Lorem ipsum dolor sit Mett ...

</div> 
</div>
     
</div>
		 
<div id="footer">     
<p></p>		
</div>   
  
</div>
   
</body>
</html>

CSS (komplett):
Code: 
/* Design by Xethon und Kausalat ;-) for cms2day */

* { padding: 0; margin: 0; }

html, body {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 12px;
 color: #C3C3C3;
}

p {
 padding: 10px;
}

/* WRAPPER */
#wrapper { 
 margin: 0 auto;
 width: 100%;
}

/* HEADER */
#header {
 width: 100%;
 height: 180px;
 background: url(header.jpg) repeat-x;
}

/* NAVI */
#navigation {
 width: 100%;
 height: 40px;
 background: url(menu.jpg) repeat-x;
}

#navigation li {
 display: inline; 
 list-style-type: none;
}

/* CONTENT */
#content { 
 background: #C3C3C3;       
 padding: 20px 0;
}

.box {
width: 780px;
background: #3D3D3D url(top.jpg) top left no-repeat;
margin: auto;
} 

.box2 {    
width: 750px;
background: url(bottom.jpg) bottom left no-repeat;    
padding: 15px;
} 

/* FOOTER */
#footer { 
 width: 100%;
 height: 50px;
 clear: both;
 background: url(footer.jpg) repeat-x;
}
 
Zuletzt bearbeitet:
Ich danke dir. So wollte ich es haben. Echt super :)
Gestalte ich meinen Quelltext denn echt so kompliziert?
 
Sagen wir mal, einige CSS-Angaben waren nicht unbedingt nötig, wie z. B. die beinahe durchgängigen "float"-Angaben für die div-Container. Da du aber ein gutes Grundgerüst aufgebaut hast und klar formuliert hast, was du dir als Endergebnis wünschst, war es für mich relativ leicht, dir entgegenzukommen. ;)
 
Ok,alles klar.
Nur ein Problem besteht noch. Wenn wenig Content auf der Seite ist, dann habe ich unter dem Footer einen weißen Bereich bis zum Seitenende. Kann man den Footer immer am Ende der Seite platzieren und die Content-Box dabei trotzdem mit dem 20px Abstand "folgen lassen" egal wieviel Content da ist?
Hoffe ich habe es verständlich formuliert.
 
Prinzipiell lässt sich das wie folgend realisieren, allerdings müsstest du auf die gerundeten Ecken im unteren Bereich der Box sowie die 20 px Abstand verzichten, wenn der Inhalt mal etwas länger ausfällt.

CSS-Änderung:
Code: 
/* FOOTER */
#footer { 
 width: 100%;
 height: 50px;
position: fixed;
bottom: 0;     
border-top: 20px solid #C3C3C3;
 background: url(footer.jpg) repeat-x;
}

Dieser Umstand ließe sich voraussichtlich auch mit runden Ecken und Abstand mit Javascript realisieren -- leider verfüge aber ich über nicht ausreichend gute JS-Kenntnisse, um dir weiterzuhelfen. Jetzt ist die Zeit für alle Javascript-Könner, sich hier zu beteiligen! ;)
 
Zuletzt bearbeitet:
Gut, dann warte ich mal die Beiträge anderer Mitglieder ab und bedanke mich erstmal recht herzlich bei dir, dass du mir bis hierher geholfen hast :).
 
Der Code aus meinem 2. Post ist nicht mehr aktuell. So wie in Post #8 sieht mein Code jetzt aus. Da sind auch keine height:350px mehr.
 
Versuch mal bei den einzelnen Boxen (#wrapper, #header, ...) jeweils in der CSS-Angabe ein "position:relative;" (und ggf. mit "display:block") anzugeben.

Nicht so bekannt ist, das div-Elemente, wie auch die meisten Elemente in der Voreinstellung statisch und nicht relativ sind. Das bedeutet, es ist "position:static" als Normalwert vorgegeben ist. Static bedeutet wiederum das ein Element sich im Textfluss positioniert und nicht exakt relativ zum vorherigen (relativen) Element. Dadurch _können_ schon teilweise durch ein Leerzeichen komische Ergebnisse entstehen, ich nehme an wie in deinem Fall.

Ggf. ist in diesem Zusammenhang noch die "display"-Angabe interessant. "display:block" zwingt das Element die komplette Breite des Eltern-Elements abzüglich der padding und margin Werte zu nutzen. (Bitte zusammen mit "position:relative;" benutzen)

Wenn dir der IE6 total egal ist, wäre folgendes interessant:
Code: 
.fullbox {position:absolute; top:20px; left:20px; right:20px; bottom:20px;}

.footerbox {position:absolute; left:0px; right:0px; bottom:0px; height:20px;}

Diese "fullbox" würde sich am (nicht floatenden) Elternelement orientieren und die volle Höhe und Breite abzüglich den 20px an den Seiten benutzen - egal wie viel Inhalt darin ist!

Die "footerbox" wiederum würde vom Ende des Elternelements positioniert nach oben 20px hoch sein.
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben

Willkommen auf ComputerBase!

Mit Werbung weiterlesen

Besuche ComputerBase wie gewohnt mit Werbung und Tracking. Die Zustimmung ist jederzeit widerrufbar.

Details im Privacy Center und in der Liste unserer Partner. Ein Widerruf ist möglich in der Datenschutzerklärung.

… oder ComputerBase Pro bestellen

Nutze ComputerBase ohne Werbebanner, Video-Ads und Werbetracking schon für 4 €/Monat oder 36 €/Jahr.

Mehr zu ComputerBase Pro

Bereits Pro-Nutzer? Hier anmelden.

Tracking: Wir und unsere 187 Partner verarbeiten personenbezogene Daten, indem wir mit auf Ihrem Gerät gespeicherten Informationen (z. B. eindeutige Kennungen in Cookies) ein Nutzungsprofil erstellen, um z. B. Anzeigen zu personalisieren. Verarbeitungszwecke: Genaue Standortdaten und Abfrage von Geräteeigenschaften zur Identifikation, Informationen auf einem Gerät speichern und/oder abrufen, Personalisierte Anzeigen und Inhalte, Anzeigen- und Inhaltsmessungen, Erkenntnisse über Zielgruppen und Produktentwicklungen.

Impressum Kontakt Datenschutz