tutorials.de Buch-Aktion 05/2012
ERLEDIGT
JA
ANTWORTEN
11
ZUGRIFFE
223
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
AUF DIESES THEMA
ANTWORTEN
  1. 24.04.10 18:13 #1
    owned139 owned139 ist offline Mitglied Bronze
    Registriert seit
    Jun 2009
    Beiträge
    26
    Hallo liebe Community,
    ich habe das Prroblem, dass Oper 10.51 und Iron 4 einen Rand nach den DIV`s hinterlässt, obwohl sie zusammen eine Breite von 100% haben. Beim Firefox 3.6 sowie beim IE6-8 ist dies nicht der Fall.
    Wie kann ich diesen Fehler beheben bzw. woran liegt es überhaupt?

    Screen: Klick mich

    HTML Code:
    HTML-Code:
    <!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>Unbenanntes Dokument</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>

	<div id="header"></div>
    <div id="wrap">
    	<div id="col1"></div>
        <div id="col2">
        	<div class="forum_title_info_forum">Forum</div>
        </div>
        <div id="col3">
        	<div class="forum_title_info">Last Post</div>
        </div>
        <div id="col4">
        	<div class="forum_title_info">Threads</div>
        </div>
        <div id="col5">
        	<div class="forum_title_info">Posts</div>
        </div>
        <div class="clear"></div>
        <div class="cat_name"></div>
        <div class="cat_icon_wrap">
        	<div class="cat_wrap_border"></div>
        </div>
        <div class="cat_title_wrap">
        	<div class="cat_wrap_border"></div>
        </div>
        <div class="cat_lp_wrap">
        	<div class="cat_wrap_border"></div>
        </div>
        <div class="cat_threads_wrap">
        	<div class="cat_wrap_border"></div>
        </div>
        <div class="cat_posts_wrap">
        	<div class="cat_wrap_border"></div>
        </div>
        <div class="clear"></div>

        <div class="cat_icon_wrap">
        	<div class="cat_wrap_border"></div>
        </div>
        <div class="cat_title_wrap">
        	<div class="cat_wrap_border"></div>
        </div>
        <div class="cat_lp_wrap">
        	<div class="cat_wrap_border"></div>
        </div>
        <div class="cat_threads_wrap">
        	<div class="cat_wrap_border"></div>
        </div>
        <div class="cat_posts_wrap">
        	<div class="cat_wrap_border"></div>
        </div>
        <div class="clear"></div>
    </div>

</body>
</html>
    CSS-Code:
    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
127
128
129
130
131
132
133

    html, body{
    margin:0px;
    padding:0px;
    background-color:#1b1b1b;
    font-family:Verdana, Geneva, sans-serif;
}
#header{
    width:100%;
    height:100px;
    background-color:#CCC;
    margin-bottom:50px;
}
#wrap{
    min-width:900px;
    margin-left:20px;
    margin-right:20px;
    padding:1px;
    border:1px solid #363636;
    overflow:hidden;
}
#col1{
    width:5%;
    min-width:40px;
    height:22px;
    background-image:url(img/forum_cat_title_bg.jpg);
    float:left;
}
#col2{
    width:60%;
    height:22px;
    background-image:url(img/forum_cat_title_bg.jpg);
    margin-left:-1px;
    border-left:1px solid #1b1b1b;
    float:left;
}
#col3{
    width:18%;
    height:22px;
    background-image:url(img/forum_cat_title_bg.jpg);
    margin-left:-1px;
    border-left:1px solid #1b1b1b;
    float:left;
}
#col4{
    width:9%;
    height:22px;
    background-image:url(img/forum_cat_title_bg.jpg);
    margin-left:-1px;
    border-left:1px solid #1b1b1b;
    float:left;
}
#col5{
    width:8%;
    height:22px;
    background-image:url(img/forum_cat_title_bg.jpg);
    margin-left:-1px;
    border-left:1px solid #1b1b1b;
    float:left;
}
.forum_title_info_forum{
    font-weight:bold;
    color:#FFF;
    font-size:12px;
    padding-left:10px;
    margin-top:3px;
}
.forum_title_info{
    text-align:center;
    font-weight:bold;
    color:#FFF;
    font-size:12px;
    margin-top:3px;
}
.cat_name{
    margin-top:1px;
    margin-left:0px;
    margin-right:0px;
    width:auto;
    height:27px;
    background-image:url(img/forum_cat_name_bg.jpg);
}
.cat_icon_wrap{
    min-width:40px;
    width:5%;
    height:54px;
    margin-top:1px;
    background-color:#282828;
    float:left;
}
.cat_title_wrap{
    width:60%;
    height:54px;
    background-color:#2c2c2c;
    border-left:1px solid #1b1b1b;
    margin-top:1px;
    margin-left:-1px;
    float:left;
}
.cat_lp_wrap{
    width:18%;
    height:54px;
    background-color:#282828;
    border-left:1px solid #1b1b1b;
    margin-top:1px;
    margin-left:-1px;
    float:left;
}
.cat_threads_wrap{
    width:9%;
    height:54px;
    background-color:#2c2c2c;
    border-left:1px solid #1b1b1b;
    margin-top:1px;
    margin-left:-1px;
    float:left;
}
.cat_posts_wrap{
    width:8%;
    height:54px;
    background-color:#282828;
    border-left:1px solid #1b1b1b;
    margin-top:1px;
    margin-left:-1px;
    float:left;
}
.clear{
    clear:both;
}
.cat_wrap_border{
    border-left:1px solid #363636;
    border-top:1px solid #363636;
    height:53px;
}

    Ich habe das Design nochmal mit Tabellen, sollte ich dies besser benutzen?
     
    Zitieren Zitieren
  2. 24.04.10 18:29 #2
    Maik Tutorials.de Gastzugang
    Hi,

    entweder ist dir irgendwo ein Rechenfehler unterlaufen,oder es ist das Box-Modell, nach dem sich Opera, aber auch Safari und Google Chrome orientieren.

    Wenn #wrap im Viewport die Mindestbreite einnimmt, verschwindet in ihnen die Lücke zum rechten Boxenrand.

    mfg Maik
     
    Zitieren Zitieren
  3. 24.04.10 18:32 #3
    owned139 owned139 ist offline Mitglied Bronze
    Registriert seit
    Jun 2009
    Beiträge
    26
    Also das erste kanns nicht sein.
    Spalte 1 ist 5% breit.
    Spalte 2 ist 60% breit.
    Spalte 3 ist 18% breit
    Spalte 4 ist 9% breit und Spalte 5 ist 8% breit.
    Das macht 100%
    Die letzten 4 Spalten haben noch nen margin-left von -1 da sie jeweils links nen Border von 1 px haben.

    Zitat Zitat von Maik Beitrag anzeigen
    Hi,
    Wenn #wrap im Viewport die Mindestbreite einnimmt, verschwindet in ihnen die Lücke zum rechten Boxenrand.
    mfg Maik
    Ja ist mir auch schon aufgefallen...allerdings soll das Ding flexibel sein.
    Geändert von owned139 (24.04.10 um 18:34 Uhr) Grund: was vergessen
     
    Zitieren Zitieren
  4. 24.04.10 18:48 #4
    Maik Tutorials.de Gastzugang
    Jo, die Methode ist aber schon "grenzwertig", um das Box-Modell auszuhebeln

    Vielleicht solltest du es anstelle der prozentualen Breitenangaben mal mit absoluten versuchen, und lediglich für den Spaltenblock #col2 eine relative Breite einrichten, die auf die Skalierung von #wrap reagiert.

    mfg Maik
     
    Zitieren Zitieren
  5. 24.04.10 18:51 #5
    owned139 owned139 ist offline Mitglied Bronze
    Registriert seit
    Jun 2009
    Beiträge
    26
    Hatte ich schon versucht...das gab im IE dann komisch ergebnisse
    Da ich nicht genau weiß wie ich das realisieren soll wäre es nett, wenn du es mir ein wenig erläutern könntest
     
    Zitieren Zitieren
  6. 24.04.10 18:55 #6
    Maik Tutorials.de Gastzugang
    Da mußt du dich ein wenig gedulden, denn jetzt ist es Zeit für das Abendmahl

    mfg Maik
     
    Zitieren Zitieren
  7. 24.04.10 19:24 #7
    owned139 owned139 ist offline Mitglied Bronze
    Registriert seit
    Jun 2009
    Beiträge
    26
    Ok guten hunger und vielen dank für deine hilfe
     
    Zitieren Zitieren
  8. 24.04.10 20:59 #8
    Maik Tutorials.de Gastzugang
    So, da bin ich wieder und hab auch gleich den überarbeiteten Code im Gepäck

    Also, der zweite Spaltenblock von links (#col2 und .cat_title_wrap) wird im HTML-Code an die letzte Stelle gerückt, und anstelle der width und float-Regel mit einer margin-Regel aus dem normalen Textfluß genommen, damit er seine benachbarten Blöcke umfließt. Das Maß für den linken und rechten Außenabstand ergibt sich aus der Breitensumme der benachbarten Blöcke. Die drei rechten äußeren Spalten erhalten hier nun im Gegenzug eine float:right-Regel.

    Somit besitzt in diesem Konzept der zweite Spaltenblock eine relative Breite, die sich an der Breite des umschliessenden Blocks #wrap orientiert.

    HTML-Code:
    <body>

    <div id="header"></div>
    <div id="wrap">
        <div id="col1"></div>
        <div id="col3">
                <div class="forum_title_info">Last Post</div>
        </div>
        <div id="col4">
                <div class="forum_title_info">Threads</div>
        </div>
        <div id="col5">
                <div class="forum_title_info">Posts</div>
        </div>
        <div id="col2">
                <div class="forum_title_info_forum">Forum</div>
        </div>
        <div class="clear"></div>
        <div class="cat_name"></div>
        <div class="cat_icon_wrap">
                <div class="cat_wrap_border"></div>
        </div>
        <div class="cat_lp_wrap">
                <div class="cat_wrap_border"></div>
        </div>
        <div class="cat_threads_wrap">
                <div class="cat_wrap_border"></div>
        </div>
        <div class="cat_posts_wrap">
                <div class="cat_wrap_border"></div>
        </div>
        <div class="cat_title_wrap">
                <div class="cat_wrap_border"></div>
        </div>
        <div class="clear"></div>

        <div class="cat_icon_wrap">
                <div class="cat_wrap_border"></div>
        </div>

        <div class="cat_lp_wrap">
                <div class="cat_wrap_border"></div>
        </div>
        <div class="cat_threads_wrap">
                <div class="cat_wrap_border"></div>
        </div>
        <div class="cat_posts_wrap">
                <div class="cat_wrap_border"></div>
        </div>
        <div class="cat_title_wrap">
                <div class="cat_wrap_border"></div>
        </div>
        <div class="clear"></div>
</div>

</body>
    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
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

    #col1{
        width:45px;
        /*min-width:40px;*/
        height:22px;
        background-image:url(img/forum_cat_title_bg.jpg);
        float:left;
}
#col2{
        /*width:60%;*/
        height:22px;
        background-image:url(img/forum_cat_title_bg.jpg);
        /*margin-left:-1px;*/
        border-left:1px solid #1b1b1b;
        /*float:left;*/
       margin:0 315px 0 45px;
}
#col3{
        width:161px;
        height:22px;
        background-image:url(img/forum_cat_title_bg.jpg);
        /*margin-left:-1px;*/
        border-left:1px solid #1b1b1b;
        float:right;
}
#col4{
        width:80px;
        height:22px;
        background-image:url(img/forum_cat_title_bg.jpg);
        /*margin-left:-1px;*/
        border-left:1px solid #1b1b1b;
        float:right;
}
#col5{
        width:71px;
        height:22px;
        background-image:url(img/forum_cat_title_bg.jpg);
        /*margin-left:-1px;*/
        border-left:1px solid #1b1b1b;
        float:right;
}
...
.cat_icon_wrap{
        /*min-width:40px;*/
        width:45px;
        height:54px;
        margin-top:1px;
        background-color:#282828;
        float:left;
}
.cat_title_wrap{
        /*width:60%;*/
        height:54px;
        background-color:#2c2c2c;
        border-left:1px solid #1b1b1b;
        margin-top:1px;
        /*margin-left:-1px;*/
        /*float:left;*/
       margin:0 315px 0 45px;
}
.cat_lp_wrap{
        width:161px;
        height:54px;
        background-color:#282828;
        border-left:1px solid #1b1b1b;
        margin-top:1px;
        /*margin-left:-1px;*/
        float:right;
}
.cat_threads_wrap{
        width:80px;
        height:54px;
        background-color:#2c2c2c;
        border-left:1px solid #1b1b1b;
        margin-top:1px;
        /*margin-left:-1px;*/
        float:right;
}
.cat_posts_wrap{
        width:71px;
        height:54px;
        background-color:#282828;
        border-left:1px solid #1b1b1b;
        margin-top:1px;
        /*margin-left:-1px;*/
        float:right;
}

    Wie du siehst, habe ich desweiteren im Stylesheet deine margin-left:-1px-Regeln auskommentiert, und stattdessen die Rahmenstärke von den width-Eigenschaften subtrahiert.

    Falls du dich fragen solltest, wie ich auf die einzelnen px-Werte gekommen bin, hier ein kleines Rechenexempel für den ersten Block:

    Code :
    1

    5% * 900px / 100% = 45px

    Zwei Schnappschüsse aus Opera und Safari füge ich auch noch bei

    DIV`s mit float und 100% breiter hinterlassen Rand-opera.jpg DIV`s mit float und 100% breiter hinterlassen Rand-safari.jpg

    Viel Spaß beim Weiterbasteln

    mfg Maik
     
    Zitieren Zitieren
  9. 24.04.10 21:07 #9
    owned139 owned139 ist offline Mitglied Bronze
    Registriert seit
    Jun 2009
    Beiträge
    26
    Klappt supi...hatte es ganz am Anfang genau so...allerdings hab ich dann das randproblem beim IE...undzwar auf beiden seiten :/
    Miniaturansicht angehängter Grafiken Miniaturansicht angehängter Grafiken DIV`s mit float und 100% breiter hinterlassen Rand-unbenannt-2.jpg  
     
    Zitieren Zitieren
  10. 24.04.10 21:17 #10
    Maik Tutorials.de Gastzugang
    Da fördert der IE6 seinen berühmt berüchtigten 3px-Gap-Bug zu Tage.

    Und weil dies in der Vergangenheit desöfteren ein Thema hier im CSS-Forum war, hab ich ihm vor zwei Jahren einen Beitrag im Webmaster FAQ-Forum gewidmet, um nicht immer wieder auf's Neue den Sachverhalt erläutern und den Korrektur-Code posten zu müssen:

    mfg Maik
     
    Zitieren Zitieren
  11. 24.04.10 21:47 #11
    owned139 owned139 ist offline Mitglied Bronze
    Registriert seit
    Jun 2009
    Beiträge
    26
    funtzt perfekt vielen dank für deine mühe
     
    Zitieren Zitieren
  12. 24.04.10 22:02 #12
    Maik Tutorials.de Gastzugang
    Hast du von mir etwas anderes erwartet

    Keine Ursache, dafür bin ich doch da

    mfg Maik
     
    Zitieren Zitieren
« Problem mit Höhenausrichtung bei 2 nebeneinander liegenden Divs | background-attachment:fixed in X-Richtung »

Ähnliche Themen

  1. Position des Content bei float nicht am Rand
    Von Patigol im Forum CSS
    Antworten: 2
    Letzter Beitrag: 27.12.10, 12:22
  2. Farbe bei Berührung von Objekten hinterlassen
    Von focus_supreme im Forum Cinema 4D
    Antworten: 5
    Letzter Beitrag: 10.01.08, 15:18
  3. CrystalReport breiter linker Rand
    Von Horscht1 im Forum .NET Windows Forms
    Antworten: 3
    Letzter Beitrag: 21.09.06, 13:29
  4. grußworte hinterlassen
    Von FJK im Forum HTML & XHTML
    Antworten: 9
    Letzter Beitrag: 20.06.05, 11:16
  5. CSS float: none, wie bekomme ich den Rand weg?
    Von drburns im Forum CSS
    Antworten: 2
    Letzter Beitrag: 29.11.04, 13:56

Stichworte