CSS div Problem

Unregistriert

Wie muss ich ein DIV in CSS gestalten, sodass der Text links vom DIV Anfang anfängt und nicht ganz links von der Seite. Leider ein wenig schwer zu beschreiben für mich, bin totaler Anfänger was CSS angeht..

Hier ein Beispiel:
[url=http://www.xup.in/dl,17412378/test.png/][Blockierte Grafik: http://www0.xup.in/tn/2013_03/17412378.png][/url]

Das rote ist der Hintergrund der Website und das Schwarze ist ein Bild, auf diesem Bild soll meine Website sein und das rote soll einfach nur als Rand dienen...

Mein CSS:

body {
background: #000;
}

#site {
background: #000 url('images/site.png') no-repeat center top;
height: 1923px;
}

Bandit

Ungetestet:
CSS

Code

body {
  background-color: #ff0000;
}
* html #main {
height: 100%;
} 
#main {
   position: relative;
   width : 900px;
   margin : 0 auto;
   background: #000 url('images/site.png') no-repeat center top;
   min-height: 100%;
}
#content {
   width : 100%;
   padding: 30px;
}

Alles anzeigen

HTML

<!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="en">
<head>
 <link rel="stylesheet" type="text/css" href="css/style.css" />
 <title>Test</title>
 </head>
 <body>
   <div id='main'>
    <div id='content'>
      Dein Inhalt
    </div>
   </div>
</body>
</html>

Alles anzeigen

explanator

Ich erlaube mir mal ein paar klitzekleine Verbesserungen vorzunehmen zum Vorschlag von Bandit.

CSS

Code

* {
     margin-top: 0;
}
html, body {
     height: 100%;
}  
body {
    background-color: red; 
    margin: 0;
    padding: 0 5px;
}
#content {
   top:0;
   height: 100%;
   padding: 0;
   color:white;
   width : 500px;
   margin : 0 auto;
   background: #000 url('images/site.png') no-repeat center top;

}

Alles anzeigen

HTML

<!DOCTYPE HTML>
<html lang="de">  
    <head>  
        <meta charset="utf-8">  
        <title>Beispielseite</title>  
    </head>  
    <body>      
        <div id='content'>      
            <p>Dein Inhalt</p>       
        </div>  
    </body>
</html>

Alles anzeigen

Unregistriert

Vielen Dank! Hat mir sehr geholfen.

CSS div Problem

Tags

Benutzer online in diesem Thema