tutorials.de Buch-Aktion 05/2012
ERLEDIGT
NEIN
ANTWORTEN
3
ZUGRIFFE
586
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
AUF DIESES THEMA
ANTWORTEN
  1. 08.06.11 17:50 #1
    Razer3k Razer3k ist offline Mitglied Bronze
    Registriert seit
    Jul 2008
    Beiträge
    29
    Hallo zusammen,
    ich versuche gerade mittels HTML und CSS eine Webseite zu erstellen.

    Für das Layout wollte ich gerne das Box-Modell nutzen.

    Mein bisheriger Code sieht wie folgt aus, das Problem ist das die graue Box unter der roten Box ist obwohl sie daneben sein soll.

    CSS:
    Code :
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

    @charset "UTF-8";
/* CSS Document */
 
 
#center{    
            margin:1em auto;
            width:601px;
            height:480px;
    }
 
#header {
            position:relative;
            left:0x;
            top:0px;
            width:600px;
            height:40px;
            background-color: #ff0;
        }
        
#menu {
            position:relative;
            left:0px;
            top:0px;
            width:225px;
            height:200px;
            background-color: #f00;
        }
        
#content {
            position:inherit;
            left:0px;
            top:0px;
            width:375px;
            height:200px;
            background-color: #999;
        }
        
#footer {
            position:relative;
            left:0px;
            top:0px;
            width:600px;
            height:40px;
            background-color: #ffff00;
        }


    HTML:
    Code :
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

    <!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">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>08.06.2011</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <div id="center">
            <div id="header">header</div>
            <div id="menu">menu</div>
            <div id="content">content</div>
            <div id="footer">footer</div>
        </div>
    </body>
</html>
     
    Zitieren Zitieren
  2. 10.06.11 15:50 #2
    Razer3k Razer3k ist offline Mitglied Bronze
    Registriert seit
    Jul 2008
    Beiträge
    29
    Kann mir niemand helfen?
     
    Zitieren Zitieren
  3. 10.06.11 21:53 #3
    Avatar von hela
    hela hela ist gerade online Mitglied Smaragd
    tutorials.de Premium-User
    Registriert seit
    Oct 2004
    Beiträge
    1.123
    Zitat Zitat von Razer3k Beitrag anzeigen
    ... , das Problem ist das die graue Box unter der roten Box ist obwohl sie daneben sein soll.
    Hallo,

    das ist das normale Verhalten der Blockelemente entsprechend ihrer Anordnung im HTML. Diese Anordnung wird durch die relative Positionierung in deinem CSS nicht gestört.

    Wenn du "menu"- und "content"-Block nebeneinander anordnen willst, dann könntest du beispielsweise den "content"-Block im "center"-Block rechts unterhalb des "header" absolut positionieren. Damit das funktioniert, müsste der "center"-Block relativ positioniert werden, alle anderen Elemente könnten im normalen Fluss bleiben:
    Code css:
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

    #center {
  position: relative;
  margin: 1em auto;
  width: 601px;
  height: 480px;
}
#header {
  width: 600px;
  height: 40px;
  background-color: #ff0;
}
#menu {
  width: 225px;
  height: 200px;
  background-color: #f00;
}
#content {
  position: absolute;
  right: 0;
  top: 40px;
  width: 375px;
  height: 200px;
  background-color: #999;
}
#footer {
  width: 600px;
  height: 40px;
  background-color: #ff0;
}
     
    Zitieren Zitieren
  4. 15.06.11 19:34 #4
    Razer3k Razer3k ist offline Mitglied Bronze
    Registriert seit
    Jul 2008
    Beiträge
    29
    Danke, so klappt es 1a
     
    Zitieren Zitieren
« stylesheets des Elternelement unwirksam machen | Mehrere Divs zentrieren »

Ähnliche Themen

  1. Erstes 3d-Modell
    Von CarstenK im Forum Autodesk Maya (ehemals Alias)
    Antworten: 5
    Letzter Beitrag: 15.11.10, 21:08
  2. ER-Modell
    Von bsytkorbi im Forum Relationale Datenbanksysteme
    Antworten: 4
    Letzter Beitrag: 03.09.10, 13:04
  3. ER-Modell
    Von bennycy im Forum Relationale Datenbanksysteme
    Antworten: 7
    Letzter Beitrag: 16.11.08, 20:18
  4. Modell ist zu grau, HL2 Modell, bitte um Hilfe!
    Von daminator im Forum 3D Studio Max
    Antworten: 6
    Letzter Beitrag: 17.05.05, 09:27
  5. ER-Modell Frage!
    Von DaJazz im Forum Relationale Datenbanksysteme
    Antworten: 4
    Letzter Beitrag: 22.11.04, 12:59