tutorials.de Buch-Aktion 05/2012
ERLEDIGT
JA
ANTWORTEN
10
ZUGRIFFE
1535
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
DIESES THEMA IST
GESCHLOSSEN
  1. 20.03.07 21:55 #1
    Eiszwerg Eiszwerg ist offline
    Registriert seit
    Oct 2002
    Ort
    Eckernförde, S.-H.
    Beiträge
    623
    Hallo Community,

    HTML-Code:
    <div>
<div style="width:40%;float:left;">
<?php
include ("about.html");
?>
</div>
<div style="width:40%;float:right;">
<?php
include ("edv.html");
?>
</div>
</div>
    Der Code funktioniert im IE, aber nicht im FF. Wie kann ich das bewerkstelligen?
    Ich danke für jede Anregung!

    Gruß
    Jan
     
  2. 20.03.07 21:59 #2
    Maik Tutorials.de Gastzugang
    Hi,

    kannst du bitte auch erläutern, was bei dir im Firefox nicht funktioniert?

    Wenn ich den Code-Schnipsel in ein Testdokument einfüge, werden die beiden Spalten erwartungsgemäß nebeneinander angeordnet.
     
  3. 20.03.07 22:05 #3
    Eiszwerg Eiszwerg ist offline
    Registriert seit
    Oct 2002
    Ort
    Eckernförde, S.-H.
    Beiträge
    623
    Im FireFox liegen die beiden DIVs untereinander und nicht wie erwartet nebeneinander...

    Hmmm... hatte verschwiegen/vergessen, dass das DIV drumherum so aussah:
    HTML-Code:
    .text
{
    /*float               : left; */
    padding             : 10px;   
    background-image    : url(../gfx/middle_blue_10.jpg);
    background-repeat   : repeat-y;
   /*background-color    : #000000;*/

}
    Nun habe ich das floating ausgeschaltet, hab das DIV aber nicht mehr da...
    Ich dreh noch frei hier
    Geändert von Eiszwerg (20.03.07 um 22:15 Uhr)
     
  4. 20.03.07 22:15 #4
    Maik Tutorials.de Gastzugang
    Dann ist der Grund hierfür an einer anderen Stelle im Dokument zu suchen, denn wie schon erwähnt, funktioniert der gezeigte Quellcode bei mir einwandfrei:
    Miniaturansicht angehängter Grafiken Miniaturansicht angehängter Grafiken 2 DIVs nebeneinander innerhalb eines Haupt-DIVs-demo_eiszwerg.jpg  
     
  5. 20.03.07 22:18 #5
    Eiszwerg Eiszwerg ist offline
    Registriert seit
    Oct 2002
    Ort
    Eckernförde, S.-H.
    Beiträge
    623
    Bin auf der Suche...
    Danke soweit...
     
  6. 20.03.07 22:24 #6
    Maik Tutorials.de Gastzugang
    Vielleicht musst du dem DIV .text, in dem die beiden DIVs eingebettet sind, eine relative Breite mit auf den Weg geben?

    Code :
    1
2
3
4
5
6
7
8
9

    .text
{
    float               : left;
    padding             : 10px;
    background-image    : url(../gfx/middle_blue_10.jpg);
    background-repeat   : repeat-y;
    background-color    : #000000;
    [b]width:100%;[/b]
}
     
  7. 20.03.07 22:28 #7
    Eiszwerg Eiszwerg ist offline
    Registriert seit
    Oct 2002
    Ort
    Eckernförde, S.-H.
    Beiträge
    623
    Die Höhe fehlte...
    Danke nochmal
     
  8. 20.03.07 22:30 #8
    Maik Tutorials.de Gastzugang
    Zitat Zitat von Eiszwerg Beitrag anzeigen
    Die Höhe fehlte...
    Achja ...?! Das wäre mir neu, dass eine nicht-gesetzte bzw. fehlende Höhenangabe für das Verrutschen der Spalten verantwortlich ist.
     
  9. 21.03.07 13:15 #9
    Eiszwerg Eiszwerg ist offline
    Registriert seit
    Oct 2002
    Ort
    Eckernförde, S.-H.
    Beiträge
    623
    Hello again,

    ich muss das Thema leider nochmal aufgreifen, weil es offenbar doch nicht an der Höhe lag.
    Hier mal der komplette Code:

    style3.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
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

    body
{
    background-color    : #0099CC;
    font-family         : arial;
    font-size           : 14px;
    color               : #000000;  
    margin              : 20px;
    padding             : 0;
}
 
.wrap
{
    padding             : 0px; 
    margin              : 0px;
    width               : 800px;
}
 
.head
{
    width               : 800px;
    height              : 150px;
    float               : left;
    margin              : 0;
    background-image    : url(../gfx/header_blue_150.jpg);
}
 
.navi_top
{
    width               : 100%;
    height              : 230px;
    float               : left;
    padding-top         : 0;
    margin              : 0;        
    background-image    : url(../gfx/fill_blue_230.jpg);
    /*background-color    : #000000;*/
    border-bottom       : solid 1px black;    
}
 
.navi_main
{
    width               : 100%;
    float               : left;
    padding             : 5px;
    margin              : 0;        
    /*background-image    : url(../gfx/middle_blue_10.jpg);
    background-repeat   : repeat-y;*/
    background-color    : #0099CC;
    text-align          : center;
    font-weight         : bold;
}
 
.navi_sub
{
    width               : 100%;    
    height              : 20px;
    padding-top         : 5px;
    float               : left;    
    background-image    : url(../gfx/middle_blue_10.jpg);
    background-repeat   : repeat-y;
   /*background-color    : #000000;*/
    text-align          : center;
    font-weight         : normal;
    border-top           : solid 1px black;
}
 
.text
{
    /*float               : left; */
    width               : 100%;
    height              : 100%;
    padding             : 10px;   
    background-image    : url(../gfx/middle_blue_10.jpg);
    background-repeat   : repeat-y;
   /*background-color    : #000000;*/
 
}
 
.details
{
    /*width               : 100%;
    float               : left;*/
    margin-bottom       : 10px;
    padding             : 5px;
    background-color    : #88aadd;
    border              : solid 1px black;
    /*background-image    : url(../gfx/bg2.gif);*/
}
 
.banner
{
    width               : 100%;
    float               : left; 
    padding             : 10px;   
    background-image    : url(../gfx/middle_blue_10.jpg);
    background-repeat   : repeat-y;
    text-align          : center; 
   /*background-color    : #000000;*/
}
 
.bottom
{
    width               : 100%;
    height              : 85px;
    float               : left;
    padding             : 0px;
    text-align          : center; 
    background-image    : url(../gfx/bottom_blue_85.jpg);
    /*background-color    : #000000;*/       
}
 
.fett
{
    font-weight         : bold;
    font-size           : 1.4em;
}
 
a:link, a:visited
{
    text-decoration     : none;
    color               : #000000;
}
 
a:hover
{
    text-decoration     : underline;
}

    und hier die index2.html
    HTML-Code:
    <body>
    <div class="wrap">
    <div class="head">
    </div>
    <div class="navi_top">
    </div>
    <div class="navi_main">
        verschiedene Links
    </div>
    <div class="navi_sub">
       verschiedene Links  
    </div>
    <div class="text">
        <div style="width:45%; float:left;">
            <div class="details">
               Hier steht Text Hier steht Text Hier steht Text Hier steht Text
               Hier steht Text Hier steht Text Hier steht Text Hier steht Text
               Hier steht Text Hier steht Text Hier steht Text Hier steht Text
               Hier steht Text Hier steht Text Hier steht Text Hier steht Text
               Hier steht Text Hier steht Text Hier steht Text Hier steht Text
               Hier steht Text Hier steht Text Hier steht Text Hier steht Text
               Hier steht Text Hier steht Text Hier steht Text Hier steht Text
               Hier steht Text Hier steht Text Hier steht Text Hier steht Text
               Hier steht Text Hier steht Text Hier steht Text Hier steht Text
               Hier steht Text Hier steht Text Hier steht Text Hier steht Text
               Hier steht Text Hier steht Text Hier steht Text Hier steht Text
               Hier steht Text Hier steht Text Hier steht Text Hier steht Text
               Hier steht Text Hier steht Text Hier steht Text Hier steht Text
               Hier steht Text Hier steht Text Hier steht Text Hier steht Text
               Hier steht Text Hier steht Text Hier steht Text Hier steht Text
               Hier steht Text Hier steht Text Hier steht Text Hier steht Text
               Hier steht Text Hier steht Text Hier steht Text Hier steht Text
               Hier steht Text Hier steht Text Hier steht Text Hier steht Text
               Hier steht Text Hier steht Text Hier steht Text Hier steht Text
               Hier steht Text Hier steht Text Hier steht Text Hier steht Text
               Hier steht Text Hier steht Text Hier steht Text Hier steht Text
               Hier steht Text Hier steht Text Hier steht Text Hier steht Text
               Hier steht Text Hier steht Text Hier steht Text Hier steht Text
               Hier steht Text Hier steht Text Hier steht Text Hier steht Text
            </div>
        </div>
        <div style="width:45%; float:right;">
            <div class="details">
                Hier steht Text Hier steht Text Hier steht Text Hier steht Text
               Hier steht Text Hier steht Text Hier steht Text Hier steht Text
               Hier steht Text Hier steht Text Hier steht Text Hier steht Text
               Hier steht Text Hier steht Text Hier steht Text Hier steht Text
               Hier steht Text Hier steht Text Hier steht Text Hier steht Text
               Hier steht Text Hier steht Text Hier steht Text Hier steht Text
               Hier steht Text Hier steht Text Hier steht Text Hier steht Text
               Hier steht Text Hier steht Text Hier steht Text Hier steht Text
               Hier steht Text Hier steht Text Hier steht Text Hier steht Text
               Hier steht Text Hier steht Text Hier steht Text Hier steht Text
               Hier steht Text Hier steht Text Hier steht Text Hier steht Text
               Hier steht Text Hier steht Text Hier steht Text Hier steht Text
                Hier steht Text Hier steht Text Hier steht Text Hier steht Text
               Hier steht Text Hier steht Text Hier steht Text Hier steht Text
               Hier steht Text Hier steht Text Hier steht Text Hier steht Text
               Hier steht Text Hier steht Text Hier steht Text Hier steht Text
               Hier steht Text Hier steht Text Hier steht Text Hier steht Text
               Hier steht Text Hier steht Text Hier steht Text Hier steht Text
               Hier steht Text Hier steht Text Hier steht Text Hier steht Text
               Hier steht Text Hier steht Text Hier steht Text Hier steht Text
               Hier steht Text Hier steht Text Hier steht Text Hier steht Text
               Hier steht Text Hier steht Text Hier steht Text Hier steht Text
               Hier steht Text Hier steht Text Hier steht Text Hier steht Text
               Hier steht Text Hier steht Text Hier steht Text Hier steht Text
            </div>
        </div>
    </div>
    <div class="banner">
    </div>
    <div class="bottom">
    <span style="padding:5px;">copyright by #beuth - 2006-2007</span>
    </div>
  </div>  
  </body>
    Mein Problem ist hierbei, dass im IE alles okay ist. Jedoch im FF hört irgendwann der weiße Hintergrund (class="text") auf. Ich kapier bloß einfach nicht warum.

    Wer schafft es, mir das näher zu bringen?

    Ich danke!
     
  10. 21.03.07 13:24 #10
    Maik Tutorials.de Gastzugang
    Hi,

    füg mal nach den beiden floatenden Spalten ein clear-DIV ein, um wieder den normalen Textfluss im Dokument herzustellen:

    Code :
    1
2
3

    div.clear {
clear:both;
}

    Code :
    1
2
3
4
5
6
7
8
9
10
11
12
13

    <div class="text">
        <div style="width:45%; float:left;">
            <div class="details">
               ...
            </div>
        </div>
        <div style="width:45%; float:right;">
            <div class="details">
                ...
            </div>
        </div>
        [b]<div class="clear"></div>[/b]
</div>
     
  11. 21.03.07 13:33 #11
    Eiszwerg Eiszwerg ist offline
    Registriert seit
    Oct 2002
    Ort
    Eckernförde, S.-H.
    Beiträge
    623
    Das "clearing" bringt leider nicht den gewünschten Effekt.
    Jedoch habe ich durch Probieren folgende Lösung erarbeitet:
    Code :
    1
2
3
4
5
6
7
8
9
10

    .text
{
    float               : left;
    width               : 97% !important;   /* Für moderne Browser */
    width               : 100%;
    padding             : 12px;   
    background-image    : url(../gfx/middle_blue_10.jpg);
    background-repeat   : repeat-y;
   /*background-color    : #000000;*/
}
    Durch das floating geht das DIV nun bis unten durch und die Breite hab ich dann ausprobiert..
    Nicht schön, aber zweckmäßig.

    Für eine elegantere Lösung bin ich nach wie vor dankbar, werde das Thema nun aber endgültig als "Erledigt" markieren.

    Danke Dir für Deine Geduld @ Maik
     
« Runde Ecken erweitert? | CSS - Problem mit Höhenangabe »

Ähnliche Themen

  1. Mitwachsende Divs innerhalb eines Containers
    Von infdb im Forum CSS
    Antworten: 6
    Letzter Beitrag: 16.07.10, 00:26
  2. Bild innerhalb eines DIVs aktualisieren
    Von d-braun im Forum Javascript & Ajax
    Antworten: 3
    Letzter Beitrag: 30.01.08, 14:01
  3. Umbruch innerhalb eines divs
    Von aphaean im Forum HTML & XHTML
    Antworten: 3
    Letzter Beitrag: 03.04.06, 11:12
  4. Ausrichtung innerhalb eines divs
    Von Moan im Forum CSS
    Antworten: 2
    Letzter Beitrag: 29.12.05, 13:06
  5. Z-Index Koordinaten innerhalb eines DIVs ?
    Von Sebastian Schmidt im Forum HTML & XHTML
    Antworten: 11
    Letzter Beitrag: 05.07.05, 20:55