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: 69402
Mitglieder online: 0
Gäste online: 5
mehr...

Anzeige

Thread: CSS Problem(e)

Tags: CSS
Seite 1 von 212

20.05.2006 11:36 Uhr

 

Status: offline
Moin Moin! :)

Ich bastel grad am Design meiner neuen Homepage und habe 2 Probleme mit CSS.  :sad: 
Ausnahmsweise stellt der Firefox mal was nicht richtig da, dafür der IE. Bei dem anderen Problem ist es - wie gewohnt - umgekehrt.  :wink: 

1. Der FF mag scheinbar den CSS Befehl "margin-top" nicht. Der wird einfach nicht beachtet... (Roter Kreis). Im IE sieht es allerdings so aus wie es sein soll.
user-pic

2. Unter der Footer Grafik wird noch ein Stück der Background Grafik angezeigt. Im FF dagegen ist alles in Ordnung. (Roter Kreis)
user-pic

Der Code:
style.css
+ PHP:
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
 
body {
margin-top:25px;
padding:0;
background-image:url(images/background.gif);
background-color:#123454;
background-repeat: repeat-x;
}
#header {
background-image:url(images/header.jpg);
background-repeat:no-repeat;
height:152px;
}
#main {
width:700px;
background-image:url(images/body_background.jpg);
text-align:left;
}
#content {
margin-left:7px;
}
#footer {
background-image:url(images/footer.jpg);
background-repeat:no-repeat;
height:13px;
}
#logo {
margin-top:15px;
margin-left:10px;
height:30px;
width:100px;
border:1px solid black;
}
index.html
+ PHP:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
<!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" />
<title>de | Online Community</title>
<link href="style.css" type="text/css" rel="stylesheet" />
</head>
 
<body>
<div align="center">
<div id="main">
      <div id="header">
            <div id="logo">bla</div>
      </div>
      <div id="content">
      bla
      </div>
      <div id="footer"></div>
</div>
</div>
</body>
</html>
greetz und danke im Vorraus. :)
1 mal bearbeitet
20.05.2006 18:16 Uhr

 

Status: offline
Zitat:
1. Der FF mag scheinbar den CSS Befehl \"margin-top\" nicht.

Der Firefox sollte margin-top auf jedenfall beherschen.

Zitat:
2. Unter der Footer Grafik wird noch ein Stück der Background Grafik angezeigt.

So wie es aussieht, ist das noch ein Überbleibsel vom \"header\". Beim FF sieht die Schrift etwas größer aus als im IE. Vermutlich wird deshalb dann der \"footer\" im IE nicht so groß dargestellt wie im FF.

Sollte dir das nicht weiterhelfen, schick mir mal einen Link zu den Images. Dann schau ich es mir genauer an.
___________________________
http://www.gtkdb.de
20.05.2006 18:37 Uhr

 

Status: offline
naja, dein erster Tipp bringt mich nicht so unbedingt weiter. *g*
20.05.2006 20:23 Uhr

 

Status: offline
Es ist dir bestimmt schon aufgefallen, aber der FF interpretiert in deinem Script den margin-top net auf den oberen Teil der Headers sondern auf den ganz oberen Rand der Seite. Das kannst du (falls du es noch nicht bemerkt hast) auch ganz einfach sehen, indem du für margin-top einmal 100px angibst. Dann rutscht alles weiter runter.
20.05.2006 20:30 Uhr

 

Status: offline
hm...wo du es so schreibst fällt es mir auch auf *g*
aber wie soll ich die divs jetzt anordnen?
wenn ich das Logo div in das header div setze wird das header div nach unten gezogen.
wenn ich das ganze davor platziere wird alles nach unten gezogen und ein undefinierbares bilderdurcheinander entsteht...
20.05.2006 20:38 Uhr

 

Status: offline
mmhh Die Technik is zwar jetzt scheiße aber sie hilft vllt jemandem anderen weiter das Problem zu finden. Wenn man ne Tabelle vor den Logo <div> baut klappt es:

Also meine Erkenntnis ist: Es muss ein Content vor das Logo. Könntest zB nen gleichfarbigen text nehmen wie den Hintergrund. Oder du baust irgendwas unsichtbares ein. (Ich verusch mal weiter die richtige Lösung zu finden)
+ PHP:
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
<body>
 
<div align=\"center\">
 
 
<div id=\"main\">
      <table>
            <tr><td></td></tr>
      </table>
                  <div id=\"logo\">
                        LOGO
                  </div>
 
    <div id=\"content\">
 
    bla
 
    </div>
 
    <div id=\"footer\"></div>
 
</div>
 
</div>
 
</body>
OK. Meine 2. Idee ist einfach in der CSS was zu schreiben àla:
PHP:
1
2
3
4
5
6
7
#blocker
 
{
 
height: 10px;
 
}
Das kannst du dann in der html vor das Logo bauen. so:
+ PHP:
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 align=\"center\">
 
 
<div id=\"main\">
      <div id=\"blocker\">
      </div>
                  <div id=\"logo\">
                        LOGO
                  </div>
 
    <div id=\"content\">
 
    bla
 
    </div>
 
    <div id=\"footer\"></div>
 
</div>
 
</div>
 
</body>
 
</html>
20.05.2006 20:45 Uhr

 

Status: offline
das bringts beides nicht so wirklich...
Tabellen möchte ich auf gar keinen Fall verwenden und ein \"Überbrückungs Div\" ist auch nicht das wahre.
20.05.2006 21:13 Uhr

 

Status: offline
Jetzt hab ich ne neue Technik gefunden.

Du schreibst dein Logo als float: left; und beendest das float in content wieder mit clear: left;

Sieht dann so aus:
+ PHP:
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
#content {
 
margin-left:7px;
 
background-color:gray;
 
clear: left;
 
}
 
#logo {
 
margin-top:15px;
 
margin-left:10px;
 
height:30px;
 
width:100px;
 
border:1px solid black;
 
background-color:purple;
 
float: left;
 
}
Mhh... Irgendwie au net toll. Der IE zieht das Logo dann immer weiter nach rechts als der FF
20.05.2006 21:16 Uhr

 

Status: offline
super, funktioniert fast perfekt.
leider sind sich IE und FF in der verschiebung noch nicht ganz einig.
der IE zeigt das ganze weiter rechts an als der FF.
20.05.2006 21:30 Uhr

 

Status: offline
Jetzt wird die Lösung unschön aber ich kann mir vorstellen, dass du mal weitermachen willst. Vorerst kannst mal diesen Teil schreiben. Der IE liest den Teil vor dem der * ist noch, der FF nicht. Du trägst einfach in den Teil des IE Den halben Wert ein, dann funktioniert es. Die Lösung ist jetzt zwar total behindert, aber funktioniert wenigstens mal. Vllt findet sich ja noch eine, die eher offiziell ist. (Ich kenn mich nämlich mit CSS net sehr gut aus)
+ PHP:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
#logo {
 
margin-top:10px;
 
margin-left: 10px;
 
* margin-left: 5px;
 
height:30px;
 
width:100px;
 
border:1px solid black;
 
background-color:purple;
 
float: left;
 
}
Seite 1 von 212
Ähnliche Threads Forum Ähnlichkeitsgrad
 float - IE und Firefox Website & Webprogrammierung 1
 CSS Menü Website & Webprogrammierung 1
 [gelöst] externe css "zerschießt" Design Website & Webprogrammierung 1
 Neues eBook: CSS eBooks 1
 Navigation mit CSS / aktiver Link Website & Webprogrammierung 1
 CSS Navi mit ul und li einrücken Website & Webprogrammierung 1
 myPortfolio coden...?! Website & Webprogrammierung 1
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