zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Box mit runden Ecken positionieren

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 23.04.2010, 19:56
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.02.2006
Beiträge: 80
Xethon befindet sich auf einem aufstrebenden Ast
Standard Box mit runden Ecken positionieren

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?

Geändert von Xethon (23.04.2010 um 21:16 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 25.04.2010, 13:25
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.02.2006
Beiträge: 80
Xethon befindet sich auf einem aufstrebenden Ast
Standard

Funzt alles soweit, nur habe ich jetzt ein Problem. So siehts jetzt aus:

http://img338.imageshack.us/img338/2147/seitej.jpg

Der hellgraue Bereich fließt einfach nicht bis zum Footer mit. Wie kann ich das ändern?

Hier der Code dazu:

Code:
CSS:

/* Design by Xethon for cms2day */

* { padding: 0; margin: 0; }

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

p {
 padding: 10px;
}

h1 {
 font-size: 14px;
 font-weight: bold;
 border-bottom: 1px dotted #C3C3C3;
}

a {
text-decoration: none;
color: #E2E2E2;
font-weight: bold;
}

/* WRAPPER */
#wrapper { 
 margin: 0 auto -50px;
 width: 100%;
 min-height: 100%;
 height: auto !important;
 height: 100%;

}

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

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

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

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

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

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

/* FOOTER */
#footer { 
 width: 100%;
 height: 50px;
 clear: both;
 background: url('../images/footer.jpg') repeat-x;
 text-align: center;
 
 .footer, .push {
 height: 50px;
}
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>
<?php page_header(); ?>
</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">                  

     <?php page_content(); ?>

</div> 
</div>
     
</div>

<div class="push"></div>

</div>
		 
<div id="footer">     
  <?php page_footer(); ?>	
</div>   
   
</body>
</html>
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 25.04.2010, 17:29
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 12.07.2009
Beiträge: 969
rs-web befindet sich auf einem aufstrebenden Ast
Standard

Hi,
probiier doch, dass du dem content ein min-height gibst.
LG rs-web
Mit Zitat antworten
  #4 (permalink)  
Alt 25.04.2010, 17:51
Benutzerbild von Thielo
Web Ninja
XHTMLforum-Kenner
 
Registriert seit: 17.09.2009
Ort: Stuttgart oder so
Beiträge: 3.372
Thielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein Lichtblick
Standard

Gib dem body die Hintergrundfarbe des hellgrau.
__________________
Hier ein immer gültiges Statement: Überarbeite deine Code, lerne die Grundlagen, widersprich mir nicht, wehre dich nicht, ich habe Recht, wir sind Lolgion, wir sind viele.. potato...
All meine Angaben sind ohne Gewähr, es könnte also trotz meiner Unfehlbarkeit dazu kommen dass ich falsch liege

www.richard-thiel.de | Müssen Websiten überall gleich ausschauen?
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Box mit runden Ecken, Bild richtig Positionieren Phantasielos CSS 9 27.04.2010 10:51
Markupeinsparung - Box mit runden Ecken und Schlagschatten znay (X)HTML 3 02.11.2007 19:06
Box mit runden Ecken via CSS krassus CSS 0 30.11.2005 00:54
#boxes a:hover.info: 2.posting mit css !!! marioN CSS 5 25.01.2004 18:04
#box a:hover .info: css-layout: ie6.0/win, moz.1ie5.0/mac, marioN CSS 2 19.01.2004 18:17


Alle Zeitangaben in WEZ +2. Es ist jetzt 13:29 Uhr.