Richtiger Umgang mit Divs:

Toad · 26 November 2011

Hallo ich lerne grade HTML/CSS und habe bei meinem Code folgende zwei Probleme:

1. Wie bekomme ich den Text in mein inneres Div
2. Wie bekomme ich mein zentriertes div, so hin, dass es dynamisch nach unten mitwächst.

Ich hoffe mir kann da jemand helfen:

Code

Code:

<html id="html" xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
        <title>time4event Veranstaltungstechnik</title>
        
        <style type="text/css">
        
        html,body { 
            height:100%; 
            background-color:#fbf8e1;
            margin:0; 
            padding:0; 
            text-align:center; }
        div#center {
            background-color:#faf3c7; 
            height:100%; 
            width:850px; 
            border-left: 1px solid #ccc;
            border-right: 1px solid #ccc;
            margin: 0 auto 0 auto;}
        #inneres_div1{
            background-image: url("box.jpg");
            background-repeat: no-repeat;
            height: 500px;
            margin-top: 50px;
        }
        #nav {
            width: 100%;
            float: left;
            margin: 0 0 3em 0;
            padding: 0;
            list-style: none;
            background-image: url("nav.jpg");
            border-bottom: 1px solid #ccc; 
            border-top: 1px solid #ccc; }
        #nav li {
            float: left; }
        #nav li a {
            display: block;
            padding: 8px 15px;
            text-decoration: none;
            color: #000000;
            border-right: 1px solid #ccc; }
        #nav li a:hover {
            color: #000000;
            background-color: #fed96c; }
    }
        </style>
    </head>
    <body>
    <div id="center">
    <div id="logo">
    <img src="t4e.jpg">
    </div>
    <ul id="nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">Service</a></li>
    <li><a href="#">Auftrag</a></li>
    <li><a href="#">Referenzen</a></li>
    <li><a href="#">Kontakt</a></li>
    <li><a href="#">Gallery</a></li>
    <li><a href="#">Impressum</a></li>
</ul>
    <div id="inneres_div1">TEST123</div>
    </div>


    </body>
    
</html>

Wustersoss · 26 November 2011

Hallo,

Erst einmal vorweg gesagt, du hast bei dem Code den du uns hier zeigst kein Doctype angegeben.
Verwende für den Header:

HTML:

<!DOCTYPE HTML>
<html lang="de">
    <head>
        <meta charset=UTF-8>
        <title>time4event Veranstaltungstechnik</title>
        
        <style type="text/css">

Damit sparst du dir auch die abschliessenden Schrägstriche.

1. Wie bekomme ich den Text in mein inneres Div

Die Frage verstehe ich nicht. In dem du den Text dort reinschreibst, Du verwendest dafür die Elemente die HTML vorsieht. Zum Beispiel H1-H6 für Überschriften. P für Absätze mit Text. UL für Listen ohne Prefix. OL für Listen mit Prefix. IMG für Bilder usw.

Lesetipp:HTML5 Tutorials, Formulare, Elemente, CSS3

2. Wie bekomme ich mein zentriertes div, so hin, dass es dynamisch nach unten mitwächst.

Du meinst wohl dein inneres Div, weil dein zentriertes Div hat ja schon eine Höhe von 100%, jedoch dein inneres Div nur 500px. Lass die Höhenangaben weg und es wächst mit dem Inhalt.

Richtiger Umgang mit Divs:

Toad

Neues Mitglied

Wustersoss

Guest

Neueste Beiträge