tutorials.de Buch-Aktion 05/2012
ERLEDIGT
JA
ANTWORTEN
10
ZUGRIFFE
1729
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
DIESES THEMA IST
GESCHLOSSEN
  1. 30.06.07 17:04 #1
    Merbi Tutorials.de Gastzugang
    Hallo allerseits,

    auf meiner Homepage habe ich einige Links gesetzt die meist unter einander aufgelistet sind.

    Wenn man mit der Maus über den 3. oder 4. Link geht verändert sich die Darstellung des Layouts sehr merkwürdig.

    Dies kommt nicht im Firefox vor.

    Gibt es da eine Lösung wie man so ein Problem umgehen kann oder gibt es noch andere Forumbesucher die solche Probleme haben?

    MFG Daniel
     
  2. 30.06.07 17:09 #2
    Maik Tutorials.de Gastzugang
    Hi,

    ohne einen Einblick in den HTML- und CSS-Code lässt sich da momentan nicht viel zu sagen bzw. der entscheidende Tipp geben.
     
  3. 30.06.07 18:52 #3
    Merbi Tutorials.de Gastzugang
    Codeschnipsel index.php:


    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
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152

    <script type="text/javascript">
        <!--
            setbold='[b]';
            setitalic='[i]';
            setunderline='[u]';
            seturl='[url]';
            
            function addSmiley(smiley){
                document.getElementById('text').value = document.getElementById('text').value+" " + smiley;
            }
            function setBold(){
                if(setbold=='[b]'){
                    setbold = '[/b]';
                    document.insert.entry.value=document.insert.entry.value+'[b]';
                    document.insert.setbold.value="[/b]";
                    document.insert.setbold.style.fontWeight="bold";
                }
                else if(setbold=='[/url][/u][/i][/b][i][u][url]'){
                    setbold = '[b]';
                    document.insert.entry.value=document.insert.entry.value+'[/b]';
                    document.insert.setbold.value='[b]';
                    document.insert.setbold.style.fontWeight='';
                }
            }
            function setItalic(){
                if(setitalic=='[i]'){
                    setitalic = '[/i]';
                    document.insert.entry.value=document.insert.entry.value+'[i]';
                    document.insert.setitalic.value="[/i]";
                    document.insert.setitalic.style.fontWeight="bold";
                }
                else if(setitalic=='[/url][/u][/i][u][url]'){
                    setitalic = '[i]';
                    document.insert.entry.value=document.insert.entry.value+'[/i]';
                    document.insert.setitalic.value='[i]';
                    document.insert.setitalic.style.fontWeight='';
                }
            }
            function setUnderline(){
                if(setunderline=='[u]'){
                    setunderline = '[/u]';
                    document.insert.entry.value=document.insert.entry.value+'[u]';
                    document.insert.setunderline.value="[/u]";
                    document.insert.setunderline.style.fontWeight="bold";
                }
                else if(setunderline=='[/url][/u][url]'){
                    setunderline = '[u]';
                    document.insert.entry.value=document.insert.entry.value+'[/u]';
                    document.insert.setunderline.value='[u]';
                    document.insert.setunderline.style.fontWeight='';
                }
            }
            function setUrl(){
                if(seturl=='[url]'){
                    seturl = '[/url]';
                    document.insert.entry.value=document.insert.entry.value+'[url]';
                    document.insert.seturl.value="[/url]";
                    document.insert.seturl.style.fontWeight="bold";
                }
                else if(seturl=='[/url]'){
                    seturl = '[url]';
                    document.insert.entry.value=document.insert.entry.value+'[/url]';
                    document.insert.seturl.value='[url]';
                    document.insert.seturl.style.fontWeight='';
                }
            }
        -->
        </script>
        
        <style type="text/css"> 
            @import url(template/stylesheet.css) all;
        </style>
        <!--[if IE]>
            <style type="text/css">@import url(template/stylesheet_ie.css);</style>
        <![endif]-->    
 
</head>
 
<body>
 
 
<div class="main">
 
    
    <div class="header">
    
        <img border="0" alt="Der Header" src="template/images/header.jpg" />    
 
    </div>
    
    
    <div class="nav">
             <div class="menue">
            
 
        <li></li>
 
        <li><a href="index.php?id=home.php" title="Startseite">home</a></li>
 
        <li><a href="index.php?id=about.php" title="Über mich">about</a></li>
 
        <li><a href="index.php?id=gallery.php" title="Nen paar Bilder">gallery</a></li>
 
        <li><a href="index.php?id=video.php" title="Nen paar Videos">video</a></li>
 
        <li><a href="index.php?id=guestbook.php" title="Gästebuch">guestbook</a></li>
 
        <li><a href="index.php?id=projects.php" title="Projekte">projects</a></li>
 
        <li><a href="index.php?id=stuff.php" title="Material">stuff</a></li>
 
        <li><a href="index.php?id=contact.php" title="Schreib mir ne Mail">contact</a></li>
 
        </div>
    
        </div>
 
    <div class="content">
 
        <h1>
            &raquo; stuff </h1>
            
            <div>
            
        &raquo; <a href="index.php?id=news.php">newsarchiv</a> <br>
        &raquo; <a href="index.php?id=links.php">links</a> <br>
[B]     &raquo; <a href="index.php?id=impressum.php">impressum</a>[/B]
 
    </div>  
 
    </div>
  
        <br>
 
    </div>
 
    <div class="footer">
        <div class="statistic">
 
        statistic: 
 
        
<!-- hmtl output -->
 
     Online:1   |Heute:7    |Gestern:15 |Gesamt:1109    
        </div>
    
 
    </div>
 
</body>
</html>

    Code stylesheet_ie.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
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150

     
body{
    background-color : #666666;
    font-size : 8pt;
    font-family : Lucida Sans Unicode, Verdana, Arial;
    color : #FFFFFF;
    margin : 0;
}
 
.header {
    margin-left: 100px;
    width : 658px;
    height : 137px;
}
 
a {
    color: #666666;
    }
    
a:hover {
    color: #666666;
    background-color: #FFFFFF;
    }
    
img { border: 0px;
background:#FFFFFF 
}
 
/* --- Navigation --- */
 
 
.menue li {
    margin-top : 0;
    margin-bottom : 0;
    margin-right : 0;
    margin-left : 4px;
    list-style-type : none;
    text-align : left;
    width : 160px;
    max-width : 160px;
    min-width : 160px;
    border-bottom: 1px solid #666666;
}
 
.menue a {
    font: bold 11px Arial, Helvetica, sans-serif;
    color: #666666;
    line-height:16px;
    letter-spacing:0.1em;
    text-decoration: none;
    display:block;
    padding:8px 6px 10px 20px;
    background-color: #FFFFFF;
    }
    
.menue a:hover {
    color:#FFFFFF;
    background-color: #666666;
    }
 
    
/* --- content stuff --- */
 
.main {
    background-color: #FFFFFF;
    color: #666666;
    height: 100%;
    margin-right: 50px;
    margin-left: 50px;
    margin-top: 50px;
}
 
.nav {
    position: relative;
    width: 164px;
    float:left;
}
 
.content {
    margin-left: 200px; 
}
 
.footer {
    height: 50px;
    background-color: #666666;
}
 
.underline {
    text-decoration: underline;
}
 
.insert {
    width: 238px;
}
 
.extras {
    position: absolute;
    top: 280px;
    margin-left: 400px;
}
 
.entry  {
    border-bottom: 1px solid #666666;
    width: 400px;
}
 
 
.forwarding {
    background-color : #666666;
    color: #FFFFFF;
    position : absolute;
    left : 50%;
    top : 50%;
    height : 100%px;
    width : 100%px;
    margin-left : -200px;
    margin-top : -75px;
    text-align : center;
}
 
.forwarding a:hover {
    color:#FFFFFF;
    background-color: #666666;
}
 
.forwarding a {
    color:#FFFFFF;
    background-color: #666666;
}
 
.statistic {
    background-color : #666666;
    color: #FFFFFF;
    position : absolute;
    right : 50%;
    height : 100%px;
    width : 100%px;
    text-align : center;
}
 
.about {
    position: absolute;
    top: 240px;
    margin-left: 250px;
}
.about_2 {
    position: absolute;
    top: 540px;
    margin-left: 250px;
}


    Der dick markierte Link ist der jenige der bei diesem Beispiel das Aussehen verändert.
    Bei allen anderen Seiten mit Links sind auhc nur die unteren Links fehlerhaft.

    MFG Daniel
     
  4. 30.06.07 19:11 #4
    Maik Tutorials.de Gastzugang
    Versuch es mal hiermit:

    Code :
    1
2
3
4

    .content {
        margin-left: 200px;
        [b]height: 1%;[/b]
}
     
  5. 30.06.07 19:28 #5
    Merbi Tutorials.de Gastzugang
    1000000000000 Dank

    Ich muss ja nicht verstehen warum das jetzt geht :P

    Essss gehht egal warum muss ich garnid wissen

    MFG Daniel

    P.S. Falls du nochmal gucken könntest weil im Menü ist ein weißer Streifen über dem grauen border-bottom streifen vlt. findest du den Fehler auch auf anhieb.
     
  6. 30.06.07 19:36 #6
    Maik Tutorials.de Gastzugang
    Guckst du hier: http://www.positioniseverything.net/...uillotine.html

    Im Zuge dessen solltest du auch die in diesem Artikel empfohlene Regel zum "clearen" der Floatumgebung in der stylesheet.css aufnehmen, damit die Main-Box in den modernen Browsern (Firefox, Mozilla, Opera, usw.) in voller Höhe angezeigt wird, und die Inhalte sie nicht unten überlappen:

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

    .main:after {
    content: ".";  
    display: block; 
    height: 0; 
    clear: both; 
    visibility:hidden;
}
 
/*  \*/
* html .main {
    height: 1%;
}
/*  */

    Zitat Zitat von KingOfRap Beitrag anzeigen
    P.S. Falls du nochmal gucken könntest weil im Menü ist ein weißer Streifen über dem grauen border-bottom streifen vlt. findest du den Fehler auch auf anhieb.
    Nimm mal die float:left-Eigenschaft in der Regel auf:

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

    .menue li {
        margin-top : 0;
        margin-bottom : 0;
        margin-right : 0;
        margin-left : 4px;
        list-style-type : none;
        text-align : left;
        width : 160px;
        max-width : 160px;
        min-width : 160px;
        border-bottom: 1px solid #666666;
        [b]float:left;[/b]
}
    und notiere die Listenpunkte li in dem dazugehörenden ul-Listenelement:

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

    <ul>
                <li><a href="index.php?id=home.php" title="Startseite">home</a></li>
                <li><a href="index.php?id=about.php" title="Über mich">about</a></li>
                <li><a href="index.php?id=gallery.php" title="Nen paar Bilder">gallery</a></li>
                <li><a href="index.php?id=video.php" title="Nen paar Videos">video</a></li>
                <li><a href="index.php?id=guestbook.php" title="Gästebuch">guestbook</a></li>
                <li><a href="index.php?id=projects.php" title="Projekte">projects</a></li>
                <li><a href="index.php?id=stuff.php" title="Material">stuff</a></li>
                <li><a href="index.php?id=contact.php" title="Schreib mir ne Mail">contact</a></li>
</ul>
     
  7. 30.06.07 19:54 #7
    Merbi Tutorials.de Gastzugang
    Nochmal vielen Dank

    Obwohl ich jetzt nicht verstehe wo das Problem liegt naja kopiere (falls ich das richtig verstanden habe) den code:

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

     
.main:after {
    content: ".";  
    display: block; 
    height: 0; 
    clear: both; 
    visibility:hidden;
}
 
/*  \*/
* html .main {
    height: 1%;
}
/*  */

    einfach in mein css.


    MFG Daniel


    Habe das einegegeben aber jetzt ist das erst über einander geschoben und selbst wenn ich es rückgängig mache ändert sich das aussehen!
    Geändert von Merbi (30.06.07 um 20:02 Uhr)
     
  8. 30.06.07 20:05 #8
    Maik Tutorials.de Gastzugang
    Ich weiß ja nicht, ob das so von dir erwünscht ist, oder auf deinem System anders dargestellt wird, aber bei mir wird die Seite unter Win2000 in allen mir zur Verfügung stehenden Browsern (außer IE6) zunächst mal wie im angehängten Firefox-Screenshot dargestellt.

    Mit der empfohlenen Technik wird die Main-Box in ihrer vollen Höhe angezeigt.
    Miniaturansicht angehängter Grafiken Miniaturansicht angehängter Grafiken IE verändert Homepage aussehen-ff.jpg  
     
  9. 30.06.07 20:09 #9
    Merbi Tutorials.de Gastzugang
    Also im IE und fox lief es bei mir bis gerade, jetzt mit deinen Änderungen nicht mehr.

    MFG Daniel
    Geändert von Merbi (30.06.07 um 20:26 Uhr)
     
  10. 30.06.07 20:12 #10
    Maik Tutorials.de Gastzugang
    Zitat Zitat von KingOfRap Beitrag anzeigen
    Habe das einegegeben aber jetzt ist das erst über einander geschoben und selbst wenn ich es rückgängig mache ändert sich das aussehen!
    Falls du damit die eingerückte Navigation meinst, nachdem du das fehlende ul-Element hinzugefügt hast, dann setz mal seine Polsterungseigenschaften zurück:

    Code :
    1
2
3
4

    .menue ul {
margin: 0;
padding: 0;
}

    Zitat Zitat von KingOfRap Beitrag anzeigen
    Also bei mir läufts im Fox und im IE einwandfrei und passt sich immer an
    Wie ich bereits erwähnte, zeigt auch bei mir der IE6 die Main-Box in der vollen Höhe an, aber in den nicht-IE-Browsern (Firefox 2.0.0.4, Mozilla 1.7.12, Netscape 7.0, Opera 9.10 und SeaMonkey 1.0.5) wird bei mir die Box abgeschnitten.
     
  11. 30.06.07 20:32 #11
    Merbi Tutorials.de Gastzugang
    Wie ich es auch vermutet hatte lag es noch am ul.

    1000 Dank müsste jetzt in allen gängigen Browsern einwandfrei laufen.

    Dank dir sind meine letzten Fehler auf der HP verschwunden.

    MFG Daniel
    Geändert von Merbi (30.06.07 um 21:02 Uhr)
     
« Anzeige Diverenzen FF vs. IE | CSS vereinfacher »

Ähnliche Themen

  1. Mauszeiger Aussehen verändert sich nicht über Links (AS3)
    Von jobroyer im Forum Flash Plattform
    Antworten: 10
    Letzter Beitrag: 08.05.10, 17:24
  2. Erscheinen des Scrollbalken verändert im fox aussehen
    Von Merbi im Forum CSS
    Antworten: 18
    Letzter Beitrag: 03.07.07, 22:42
  3. Ausgewählte Schift verändert Aussehen.
    Von m stone im Forum Flash Plattform
    Antworten: 1
    Letzter Beitrag: 26.05.05, 19:18
  4. Beim verändert wird Kennwort mit verändert
    Von thomson im Forum Visual Basic 6.0
    Antworten: 1
    Letzter Beitrag: 30.06.04, 14:49