Markup (HTML, XML, etc.) und CSS - Forum

Derzeit sind Sie als Gast in unserem Forum aktiv. Für das Schreiben registrieren Sie sich bitte. Unser Forum ist eine Austauschplattform für Webworker zum Kommunizieren, Helfen, Informieren und Hilfe finden. Auf der rechten Seiten finden Sie eine Forenübersicht über alle Bereiche des Webmaster-Forums. Unterhalb finden Sie alle aktuellen Themen.

In diesem Forum sollen begleitend zu unserem CSS Portal und HTML-Bereich konkrete Fragen zu HTML und CSS diskutiert werden. Bitte immer die Suchfunktion nutzen bevor du eine Frage stellst.


morPHeuZ
Beiträge: 43

PN schreiben
Profil ansehen
User ist offline

CSS-Eigenschaften werden nicht übernommen

Link zur Antwort auf "CSS-Eigenschaften werden nicht übernommen" von morPHeuZ morPHeuZ, am Sunday den 18.04.2010 um 22:40:30

Hi zusammen,

ich bastle zurzeit an einer Seite rum und komme irgendwie nicht mit den div-Elementen klar. Irgendwie werden die Eigenschaften, die ich in der CSS-Datei definiert habe nicht übernommen werden.

Es geht insbesondere um das header-div (Breite und Farbe wird nicht übernommen) und die div-Elemente im wrapper-Element.

Ich hab in Paint schnell mal versucht darzustellen wie es zurzeit aussieht bzw. wie es aussehen soll.

So sieht es zurzeit aus....

So soll es aussehen...

Was mach ich falsch?

 
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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
body {
    background-color:#AEAEAE;
    color:#376092;
    font-family:Verdana, Arial, Helvetica, sans-serif;}
.main{
    margin: 30px auto;
    width: 1000px;}
header {
    background-color:#376092;
    color:#FFFFFF;
    width:1000px;
    height:201px;}
.menu {
    background-color:#FFFFFF;
    float:left;}
.wrapper {
    width:100%;}
.menu ul {
    background-color:#FFFFFF;}
.menu li {
    list-style-type: none;
    background-color:#DDD9C3;
    padding-bottom:5px;
    color:#376092;
    width:100px;}
.top_menu {
    background-color:#376092;
    height: 24px;
    font-size:11px;
    text-align:right;
    line-height:250%;
    width:auto;}
.top_menu li {
    display: inline;
    list-style-type: none;
    color:#FFFFFF;
    padding-left:8px;
    padding-right:8px;}
.text_main {
    background-color:#FFFFFF;
    display:inline;
    clear:right;}
.pad1{
height:10px;}
 
HTML
 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
<body>

<div class="main">

<div class="top_menu"><ul><li>Home</li> 
<li>Suchen</li> <li>Login</li> 
<li>Sitemap</li> 
<li>Kontakt</li></ul></div>

<div class="pad1"></div>

<div class="header"><img src="img/bild1.png" 
alt="Logo" /><img align="right" src="img/blid2.png" 
alt="header" /></div>

<div class="wrapper">

<div class="menu"><ul><li>Home</li> 
<li>Suchen</li> <li>Login</li> 
<li>Sitemap</li> 
<li>Kontakt</li></ul></div>

<div class="text_main">df</div>

</div>

</div>

Insgesamt 1 mal bearbeitet, zuletzt am 20.04.2010 um 12:21:15
Link zur Antwort auf "CSS-Eigenschaften werden nicht übernommen" von Sebastian Bechtel Sebastian Bechtel, am Monday den 19.04.2010 um 16:51:57

Das liegt wohl daran, dass du im css den Punkt vergessen hast, der definiert, dass es eine Klasse und kein Element ist.

Im übrigen, warum verwendest du keine IDs?


Markus B.
Beiträge: 474

PN schreiben
Profil ansehen
Homepage besuchen
User ist offline
Link zur Antwort auf "CSS-Eigenschaften werden nicht übernommen" von Markus B. Markus B., am Monday den 19.04.2010 um 21:52:29

Du soltest deine CSS Datein im Head auch schon einbinden

<!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="ISO-8859-1" />
<link rel="stylesheet" href="style/style.css" type="text/css" />
<title>xEi</title>
</head>


morPHeuZ
Beiträge: 43

PN schreiben
Profil ansehen
User ist offline
Link zur Antwort auf "CSS-Eigenschaften werden nicht übernommen" von morPHeuZ morPHeuZ, am Tuesday den 20.04.2010 um 16:42:24
Zitat von: Sebastian Bechtel

Das liegt wohl daran, dass du im css den Punkt vergessen hast, der definiert, dass es eine Klasse und kein Element ist.

Im übrigen, warum verwendest du keine IDs?

Boah, wie dämlich! ;)

Warum sollte ich IDs verwenden? Was spricht dafür?

Achja und wie kann ich ein div-Element rechts über die komplette Höhe des .main-Elements anordnen? Bei allem was ich versucht habe ist das div dann entweder im .main-Element oder darüber/darunter...


Markus B.
Beiträge: 474

PN schreiben
Profil ansehen
Homepage besuchen
User ist offline
Link zur Antwort auf "CSS-Eigenschaften werden nicht übernommen" von Markus B. Markus B., am Tuesday den 20.04.2010 um 19:43:43

Hast es mal mit position: absolute probiert?

So und zu deinen Id´s die machen schon sin, denn für Classen must du immer jede Klasse neu definieren in deiner CSS Datei, hast du id´d vergeben kann das viel praktischer sein, den dann würde es z.B. so aussehen.

 
HTML
1
2
3
#div li, div1 p {
 dein css code
}

So kann CSS Unterumständen auch schneller arbeiten und dein Code bleib übersichtlicher.

// Danke Basti das du es noch mal etwas besser beschrieben hast als ich :D

Gruß xEi

Insgesamt 1 mal bearbeitet, zuletzt am 20.04.2010 um 20:07:47
Link zur Antwort auf "CSS-Eigenschaften werden nicht übernommen" von Sebastian Bechtel Sebastian Bechtel, am Tuesday den 20.04.2010 um 20:04:45
Zitat von: morPHeuZ
Zitat von: Sebastian Bechtel

Das liegt wohl daran, dass du im css den Punkt vergessen hast, der definiert, dass es eine Klasse und kein Element ist.

Im übrigen, warum verwendest du keine IDs?

Warum sollte ich IDs verwenden? Was spricht dafür?

Abgesehen davon, dass man fast immer davon ausgehen kann, dass die Entwickler der Sprache einen guten Grund hatten, diese Separation einzuführen, bringt es dir einfach Ordnung rein.

Wenn du eine ID hast, kannst du direkt sehen, dass es eine Bedeutung für das Layout und nicht das Template hat. Außerdem kannst du damit Namenskonflikte vermeiden, falls ein Layout und ein Template Element die selbe Bedeutung hat und somit den selben Bezeichner haben müsste, zum Beispiel könnte die globale Navigation dann die ID menu haben und Navigationen im Content bei z.B. langen Seiten eine Klasse menu.

Edit

Außerdem kannst du mit IDs einen soliden Wireframe bauen, falls du irgendwann mal Selenium Tests machen möchtest.


morPHeuZ
Beiträge: 43

PN schreiben
Profil ansehen
User ist offline
Link zur Antwort auf "CSS-Eigenschaften werden nicht übernommen" von morPHeuZ morPHeuZ, am Tuesday den 20.04.2010 um 20:41:04

Ah okay, danke für den Hinweis...werde ich wohl so nach und nach in meinen Stylesheets einbauen...

Aber zurzeit habe ich noch ein anderes Problem für das ich einfach keine saubere Lösung finde und das hier in dem Topic vielleicht auch gelöst werden kann. Ich möchte an die rechte Seite des Inhaltsfeldes ein div-Element einbinden mit einer "Schattengrafik" einbinden...

Der von mir eingezeichnete grüne Rand an der rechten Seite soll ein div-Element mit einer Hintergrundgrafik sein. Wie geht das?

 
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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
body {
    background-color:#AEAEAE;
    color:#376092;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:14px;
}
.main{
    margin: 30px auto;
    width: 1000px;
}
.header {
    background-color:#376092;
    color:#FFFFFF;
    width:1000px;
    height:201px;
    margin-top:10px;
}
.menu {
    background-color:#DDD9C3;
    float:left;
    margin-top:10px;
    border:thick;
    height:250px;
    width:200px;
    text-align:right;
    }
.menu li {
    list-style-type: none;
    color:#376092;
    border-bottom-width:thin;
    border-bottom-style:solid;
    border-bottom-color:#FFFFFF;
    height:22px;
    line-height: 22px;
    padding-right:5px;
}
.menu ul{
    margin: 0; 
    padding: 0;
}

.top_menu {
    background-color:#376092;
    height: 24px;
    font-size:11px;
    text-align:right;
    line-height:250%;
    width:auto;
}

.top_menu li {
    display: inline;
    list-style-type: none;
    color:#FFFFFF;
    padding-left:14px;
    padding-right:14px;
}
.wrapper {
    width:100%;
    background-color:#FFFFFF;
    height:500px;
}

.text_main {
    background-color:#FFFFFF;
    display:inline;
    float:left;
    width:550px;
    padding-left:15px;
}
.text_main h1 {
    font-size:16px;
    font-weight:normal;
    padding-top:5px;
    padding-bottom:5px;
    border-bottom-style:solid;
    border-bottom-color:#376092;
}
.text_right{
    background-color:red;
    text-align:right;
    float:right;
    width:200px;
    padding-left:8px;
    padding-right:8px;
    margin-top:10px;
}
.text_right h1{
    background-color:#376092;
    font-size:12px;
    font-weight:normal;
    color:#FFFFFF;
    text-align:left;
    padding:5px;
}

 
HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<body>
<div class="main">
<div class="top_menu"><ul><li><a href="+">Home</a></li> <li>Suchen</li> <li>Login</li> <li>Sitemap</li> <li>Kontakt</li></ul></div>

<div class="header"><img style="margin-top:30px;" src="img/bild1.png" alt="Logo" /><img align="right" src="img/bild2.png" alt="header" /></div>
<div class="wrapper">
<div class="menu"><ul><li><a href="test">Link</a></li> <li>Link</li> <li>Link</li> <li>Link</li> <li>Link</li></ul></div>
<div class="text_main"><p><h1>Ueberschrift</h1>ganz viel text<br />noch mehr text</p></div>
<div class="text_right"><h1>Veranstalter</h1>text<h1>Aktuelles</h1>text</div>
</div>
</body>

Markus B.
Beiträge: 474

PN schreiben
Profil ansehen
Homepage besuchen
User ist offline
Link zur Antwort auf "CSS-Eigenschaften werden nicht übernommen" von Markus B. Markus B., am Tuesday den 20.04.2010 um 20:52:30

.gruen das bg element  
HTML
  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
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<!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>
<style type="text/css">
body {
    background-color:#AEAEAE;
    color:#376092;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:14px;
}
.main{
    margin: 30px auto;
    width: 1000px;
}
.header {
    background-color:#376092;
    color:#FFFFFF;
    width:1000px;
    height:201px;
    margin-top:10px;
}
.menu {
    background-color:#DDD9C3;
    float:left;
    margin-top:10px;
    border:thick;
    height:250px;
    width:200px;
    text-align:right;
    }
.menu li {
    list-style-type: none;
    color:#376092;
    border-bottom-width:thin;
    border-bottom-style:solid;
    border-bottom-color:#FFFFFF;
    height:22px;
    line-height: 22px;
    padding-right:5px;
}
.menu ul{
    margin: 0; 
    padding: 0;
}

.top_menu {
    background-color:#376092;
    height: 24px;
    font-size:11px;
    text-align:right;
    line-height:250%;
    width:auto;
}

.top_menu li {
    display: inline;
    list-style-type: none;
    color:#FFFFFF;
    padding-left:14px;
    padding-right:14px;
}
.wrapper {
    width:100%;
    background-color:#FFFFFF;
    height:500px;
}

.text_main {
    background-color:#FFFFFF;
    display:inline;
    float:left;
    width:550px;
    padding-left:15px;
}
.text_main h1 {
    font-size:16px;
    font-weight:normal;
    padding-top:5px;
    padding-bottom:5px;
    border-bottom-style:solid;
    border-bottom-color:#376092;
}
.text_right{
    background-color:red;
    text-align:right;
    float:right;
    width:200px;
    padding-left:8px;
    padding-right:8px;
    margin-top:10px;
}
.text_right h1{
    background-color:#376092;
    font-size:12px;
    font-weight:normal;
    color:#FFFFFF;
    text-align:left;
    padding:5px;
}
.gruen {
    position: absolute;
    left: 1393px;
    top: 20px;
    height: 100%;
    width: 10px;
    background-color: #000;
    background-image: url(/deinpic.png);
    background-repeat: repeat-y;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
</head>

<body>
<div class="main">
<div class="gruen">
</div>
<div class="top_menu"><ul><li><a href="+">Home</a></li> <li>Suchen</li> <li>Login</li> <li>Sitemap</li> <li>Kontakt</li></ul></div>

<div class="header"><img style="margin-top:30px;" src="img/bild1.png" alt="Logo" /><img align="right" src="img/bild2.png" alt="header" /></div>
<div class="wrapper">
<div class="menu"><ul><li><a href="test">Link</a></li> <li>Link</li> <li>Link</li> <li>Link</li> <li>Link</li></ul></div>
<div class="text_main"><p><h1>Ueberschrift</h1>ganz viel text<br />noch mehr text</p></div>
<div class="text_right"><h1>Veranstalter</h1>text<h1>Aktuelles</h1>text</div>
</div>
</body>

</html>

morPHeuZ
Beiträge: 43

PN schreiben
Profil ansehen
User ist offline
Link zur Antwort auf "CSS-Eigenschaften werden nicht übernommen" von morPHeuZ morPHeuZ, am Tuesday den 20.04.2010 um 21:11:50

Danke für den Lösungsansatz!

Aber ist die Positionierung über absolute Werte wirklich eine saubere Lösung? Außerdem ist der Rand so ja durchgängig, also auch über das graue Stück zwischen der oberen Navigation und dem restlichen Inhalt...

Desweiteren ist die Position des gesamten mitleren Teils (also des Seiteninhalts) ja nicht absolut, d.h. wenn die Fenstergröße sich ändert ist es nicht mehr an der richtigen Position...

Link zur Antwort auf "CSS-Eigenschaften werden nicht übernommen" von Patrick Freitag Patrick Freitag, am Wednesday den 21.04.2010 um 10:10:57

Wenn schon absolut positionieren, dann mit "right: 0;", so kannst du dir sicher sein das es immer an der rechten Seite sein wird.

Du könntest den Containern aber auch einfach nur das Bild als Hintergrundgrafik zuweisen und dementsprechend positionieren.


morPHeuZ
Beiträge: 43

PN schreiben
Profil ansehen
User ist offline
Link zur Antwort auf "CSS-Eigenschaften werden nicht übernommen" von morPHeuZ morPHeuZ, am Wednesday den 21.04.2010 um 18:16:00

Wie würde es denn ohne absolute Positionierung gehen?