cybton.com
Über uns | Jobs | Werbung | Sitemap | AGB | Impressum | Hilfe ?
 Kostenlos anmelden)
wichtigWir suchen PHP-Entwickler/innen (Freelancer oder Vollzeit)
Forum
Aktuellste Beiträge
Forenregeln

Community
BB-Codes
Tags
Chat
Suche (Web)
Wer ist online?
Top-User

Basar


Statistik
Mitglieder gesamt: 69397
Mitglieder online: 0
Gäste online: 4
mehr...

Anzeige
Forum » Forum: Website & Webprogrammierung » Thread: [gelöst] Problem mit CSS (Div Elemente)

Thread: [gelöst] Problem mit CSS (Div Elemente)

Tags: CSS , DIV , Abstand

23.07.2008 13:22 Uhr

 

Status: offline
Hallo,

ich habe mehrere Div Boxen Geschachtelt:
PHP:
1
2
3
4
5
6
7
8
9
 
_Div1______________________________________
|                                          | 
|  _Div2_   _Div3_______________________   |
|  |     |  |                          |   |
|  |     |  |                          |   |
|  ______  _____________________________   |
|                                          | 
___________________________________________
Wenn ich jetzt Div3 vergrößere (nach unten) wächst Div1 mit.
Wenn ich aber Div 2 vergrößere wächst es einfach über den Rand hinaus!

zusehen Hier
+ 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
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
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
body
{
  margin-top        : 2px;
  margin-bottom     : 2px;
  background-color  : #F0F0F0;
  color             : #996666;
  font-size         : 62.5%;
  font-family       : Verdana;
}
/*div 
{
  border  :1px solid green;
  margin  : 5px;
}*/
 
div.box
{
  width             : 992px;
  background-color  : #C6C6C6;
  text-align        : left;
  padding           : 4px;
  margin            : auto;
  font-size         : 1.2em;
}
div.header
{
  color             : #000000;
}
 
div.navi
{
  height            : 40px;
  padding-left      : 141px;
  font-size         : 1.3em;
  font-family       : Georgia;
}
 
 
div.sidebar
{
  margin-right      : 10px;
  width             : 250px;
  padding-left      : 0px;
  padding-right     : 0px;
  float             : left;
  overflow          : hidden;
  background-color  : red;
}
 
div.boxhead
{
  background-image  : url(../bilder/head.png);
  background-color  : #CCCCCC;
  color             : #000000;
  height            : 25px;
  padding-left      : 0px;
  padding-right     : 0px;
  font-size         : 1.1em;
}
 
div.boxcontent
{
  background-color  : #CCCCCC;
  margin-bottom     : 5px;
  padding-left      : 13px;
  padding-right     : 4px;
  padding-bottom    : 2px;
  text-align        : left;
  line-height       : 1.6em;
}
 
div.page
{
  padding-left      : 0px;
  padding-right     : 0px;
  text-align        : left;
  overflow          : hidden;
  width             : 732px;
}
 
div.content-top
{
  background-image  : url(../bilder/head.png);
  background-color  : #CCCCCC;
  color             : #000000;
  height            : 25px;
  text-align        : left;
  padding-left      : 0px;
  padding-right     : 0px;
  font-size         : 1.1em;
}
 
div.content
{
  background-color  : #CCCCCC;
  text-align        : left;
  overflow          : hidden;
  min-height        : 375px;
  padding-left      : 13px;
  padding-right     : 4px;
  padding-bottom    : 2px;
  line-height       : 1.6em;
}
 
div.footer
{
  background-color  : #CCCCCC;
  height            : 25px;
  margin-top     : 10px;
  padding-top       : 4px;
  padding-left      : 13px;
  padding-right     : 4px;
  padding-bottom    : 4px;
  width             : 975px;
}
 
ul.news
{
  margin-top        : 0px;
  padding-left      : 15px;
}
 
a
{
  color             : #996666;
  text-decoration   : none;
}
 
a:hover
{
  text-decoration   : underline;
}
 
a:visited
{
  color             : #996666;
}
 
a.menu
{
  display           : inline;
  margin-bottom     : 5px;
  text-align        : center;
  width             : 109px;
  text-decoration   : none;
  font-weight       : bold;
  float             : left
}
 
a.menu:link
{
  color             : #000000;
  background-color  : #CCCCCC;
}
 
a.menu:visited
{
  color             : #000000;
  background-color  : #CCCCCC;
}
 
a.menu:hover
{
  background-color  : #E9E9E9;
}
 
a.menu:active
{
  background-color  : #CCCCCC;
}
+ 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
<?xml version="1.0"?>
<!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" lang="en">
  <head>
    <title>
      Start
    </title>
    <link rel="stylesheet" type="text/css" href="technik/style.css.php" />
  </head>
  <body>
    <div class="box">
      <div class="header">
 
        <h1>Joman92</h1>
      </div>
      <div class="navi">
        <div class="menu"><a class="menu" href="start.htm">
<img src="bilder/nav_li.png" border="0" align="left" alt="li" />
<img src="bilder/nav_re.png" border="0" align="right" alt="re" />
Home
</a><img src="bilder/clear.png" border="0" alt="cl" style="width:  10px;" align="left" /><a class="menu" href="blog.htm">
<img src="bilder/nav_li.png" border="0" align="left" alt="li" />
<img src="bilder/nav_re.png" border="0" align="right" alt="re" />
Blog
</a><img src="bilder/clear.png" border="0" alt="cl" style="width:  10px;" align="left" /><a class="menu" href="blog.htm">
 
<img src="bilder/nav_li.png" border="0" align="left" alt="li" />
<img src="bilder/nav_re.png" border="0" align="right" alt="re" />
&Uuml;ber mich
</a><img src="bilder/clear.png" border="0" alt="cl" style="width:  10px;" align="left" /><a class="menu" href="galerie.htm">
<img src="bilder/nav_li.png" border="0" align="left" alt="li" />
<img src="bilder/nav_re.png" border="0" align="right" alt="re" />
Galerie
</a><img src="bilder/clear.png" border="0" alt="cl" style="width:  10px;" align="left" /><a class="menu" href="blog.htm">
<img src="bilder/nav_li.png" border="0" align="left" alt="li" />
<img src="bilder/nav_re.png" border="0" align="right" alt="re" />
Downloads
</a><img src="bilder/clear.png" border="0" alt="cl" style="width:  10px;" align="left" /><a class="menu" href="blog.htm">
<img src="bilder/nav_li.png" border="0" align="left" alt="li" />
<img src="bilder/nav_re.png" border="0" align="right" alt="re" />
Kontakt
</a><img src="bilder/clear.png" border="0" alt="cl" style="width:  10px;" align="left" /></div>
      </div>
 
      <div class="sidebar">
        <div class="boxhead">
  <img src="bilder/lo_head.png" align="left" alt="lo" />
  <img src="bilder/ro_head.png" align="right" alt="ro" />
  Info
</div>
<div class="boxcontent">
  Browser: <b>Mozilla/5.0 (Windows; U; Windows NT 5.1; de; rv:1.9.0.1) Gecko/2008070208 Firefox/3.0.1</b><br />IP: <b>192.168.2.34</b>
 
</div><div class="boxhead">
  <img src="bilder/lo_head.png" align="left" alt="lo" />
  <img src="bilder/ro_head.png" align="right" alt="ro" />
  nexem.info
</div>
<div class="boxcontent">
  <ul class="news"><li><a href="http://nexem.info/internet/flash-inhalte-in-suchmaschinen--2535/" target="_blank">Flash-Inhalte in Suchmaschinen</a></li><li><a href="http://nexem.info/hard+software/sicherheitsupdate-fuer-joomla-15--2544/" target="_blank">Sicherheitsupdate für Joomla! 1.5</a></li><li><a href="http://nexem.info/hard+software/sicherheitsluecke-in-pidgin-gefunden--2547/" target="_blank">Sicherheitslücke in Pidgin gefunden</a></li><li><a href="http://nexem.info/spiele/erste-spielbare-demoversion-des-blender-games-apricot--2543/" target="_blank">Erste spielbare Demoversion des Blender-Games Apricot</a></li><li><a href="http://nexem.info/internet/ein-blog-fuer-das-phpbb-team--2549/" target="_blank">Ein Blog für das phpBB-Team</a></li></ul>
</div>
 
      </div>
      <div class="page">
        <div class="content-top">
          <img src="bilder/lo_head.png" align="left" alt="lo" />
          <img src="bilder/ro_head.png" align="right" alt="ro" />
          Start
          </div>
        <div class="content">
          
  Hallo und Willkommen auf meiner kleinen privaten Homepage. Sch&ouml;n, dass ihr hier her gefunden habt.<br /><b>Die Seite ist noch in Aufbau!</b>
 
  
        </div>
      </div>
      <div class="footer">
        
    <a href="http://validator.w3.org/check?uri=referer">
    <img style="border:0;width:71px;height:25px"
        src="bilder/valid-xhtml10-blue.png"
        alt="Valid XHTML 1.0 Transitional" height="31" width="88" />
    </a>
 
    <a href="http://jigsaw.w3.org/css-validator/">
    <img style="border:0;width:71px;height:25px"
        src="bilder/vcss-blue.png"
        alt="CSS ist valide!" />
 
    </a>
 
      
      </div>
    </div>
  </body>
</html>
9 mal bearbeitet
___________________________
MFG Jan
"funzt nicht" ist keine gültige Fehlerbeschreibung!*haarerauf*
http://www.sysprofile.de/id30821
23.07.2008 13:54 Uhr

 

Status: offline
Zitat:
Wenn ich jetzt Div3 vergrößere (nach unten) wächst Div1 mit.

Woher weißt du das?
Auf deiner Testseite seh ich das nicht.

Welche Funktion hat eigentlich das div page?
Vielleicht muss der sidebar-Bereich auch da mit rein.
1 mal bearbeitet
___________________________
Live your life everyday.
http://www.hotelmagnat.de Betatester für Onlinebrowsergame gesucht.
http://www.earthfight.de Rundenbasiertes Browsergame.
23.07.2008 13:59 Uhr

 

Status: offline
Zitat:

Woher weißt du das?
Auf deiner Testseite seh ich das nicht.

Weil ich das schon ausprobiert habe  :wink:  (Wenn du Firebug installiert hast, kannst du es ja auch mal ausprobieren)

Zitat:
Welche Funktion hat eigentlich das div page?

Es hält content-top und content zusammen, damit es neben sidebar bleibt.
___________________________
MFG Jan
"funzt nicht" ist keine gültige Fehlerbeschreibung!*haarerauf*
http://www.sysprofile.de/id30821
23.07.2008 14:00 Uhr

 

Status: offline
Zitat:
Woher weißt du das?
Auf deiner Testseite seh ich das nicht.
Vorher sah man es mal, inzwischen allerdings wirklich nicht mehr.

Das Problem besteht darin, dass float-Elemente ihre Eltern nicht mehr mitwachsen lassen.
Du könntest mal versuchen, dem Footer (ich glaube er ist in deinem großen div) noch
CSS:
1
clear:left;
mitzugeben, damit er runterrutscht und die große div-Box mitdrängt.

Edit

In einem Test mit Firebug hat das eben funktioniert  :glad: 
1 mal bearbeitet
23.07.2008 14:15 Uhr

 

Status: offline
Danke, hat geklappt!
___________________________
MFG Jan
"funzt nicht" ist keine gültige Fehlerbeschreibung!*haarerauf*
http://www.sysprofile.de/id30821
23.07.2008 20:41 Uhr

 

Status: offline
Das Problem ist zwar schon gelöst, dennoch würde ich gerne wissen:
Wie man das mit firebug macht!?
Ich hätte das jetzt sontan mit meinem WebDeveloper Addon gemacht....
Und nein, ich weiß eigentlich nicht so ganz genau was FireBug ist, ich hab es nur mal kurz installiert gehabt...
23.07.2008 20:55 Uhr

 

Status: offline
Hast du Firebug installiert?
Wenn ja, ist rechts unten in der Statusleiste ein kleiner Käfer.
Da drückst du drauf  :wink: 
Dann öffnet sich unten ein Fenster.
Lenks ist der HTML Code, den du als Baumstruktur siehst und rechts sind die CSS Eigenschaften für den markierten TAG. Per Rerchtsklick kannst du TAGS und Eigenschaften löschen, oder neue hinzufügen. Bearbeiten kannst du sie, indem du einfach auf die Eigenschaft daraufklickst.
Alle Änderungen werden in Echtzeit auf das Browserfenster übertragen und bleiben bis zum neuladen der Seite.

Noch Fragen?
___________________________
MFG Jan
"funzt nicht" ist keine gültige Fehlerbeschreibung!*haarerauf*
http://www.sysprofile.de/id30821
23.07.2008 21:42 Uhr

 

Status: offline
Zitat:
Per Rerchtsklick kannst du TAGS und Eigenschaften löschen, oder neue hinzufügen. Bearbeiten kannst du sie, indem du einfach auf die Eigenschaft daraufklickst.
Cool ist auch, man wählt ein Tag aus, klickt oben auf den Button "Edit" und muss sich dann nur mit dem HTML-Code ab dem gewählten Knoten abmühen. Kannst praktisch grad links die Navigation auswählen und einfach neue Punkte einfügen, bis es von der Länge her reicht  :glad: 
1 mal bearbeitet
Ähnliche Threads Forum Ähnlichkeitsgrad
 [problem gelöst!]problem bei div-positionierung mit css + problem mit overflow Website & Webprogrammierung 2
 CSS Menü (mit <ul>) wird nicht richtig im Internet Explorer angezeigt Website & Webprogrammierung 2
 CSS Zentrieren von Div Box im Internet Explorer Website & Webprogrammierung 2
 EILT: Tabelle mit <DIV>'s mit sich an den Inhalt anpassenden Breiten Website & Webprogrammierung 2
 [erledigt] Falsche Anzeigen in Firefox und IE Website & Webprogrammierung 2
 CSS - Div in die rechte obere Ecke Website & Webprogrammierung 2
 float:left (CSS) + margin left ?? Webdesign 2
nach obennach oben

Copyright © 2014 cybton-network

Google
Partner: #Musik - Dein Internetradio - nexem. - .wir machen news
ANEXIA - PHP Entwicklung - Web-Entwicklung - Fritz!Box Anrufmonitor für Mac OS - Rolladen, Markisen und Jalousien in Stuttgart - Rolladen in Stuttgart - SMSjobs