09.12.2004, 22:07
|
|||
|
|||
Problem mit unterschiedlichen Browsern
Hallo!
Ich habe mich in den letzten Tagen versucht dem Thema CSS und Tabellenlosen Layout zu nähern. Nun habe ich ein Layout entwickelt was in Mozilla, Opera und Firefox richtig angezeigt wird nur der Internet-Explorer macht wie immer Probleme wie kann ich das ändern? 1.) Warum ist der margin-right im IE sozusagen doppelt? 2.) Wie bekomme ich den Scrollbalken vom IE ganz rechts am Rand weg, in allen anderen Browsern ist der nicht da? Wäre super wenn sich jemand meinem Problem annehmen würde! Besten Dank schon mal im voraus! Hier der Code: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="robots" content="noindex,nofollow" />
<title>Cascading Style Sheets { Zentrieren eines Block-Level-Elements : Beispiel 3b }</title>
<style type="text/css">
body {
background-color: #999999;
height: 100%;
padding: 0px;
margin: 0px;
overflow: hidden;
}
#pixel {
width: 1px;
height: 1px;
position: absolute;
top: 50%;
left: 50%;
overflow: visible;
}
#main {
background-color:#FFFFFF;
padding: 0px;
margin: 0px;
border: 1px solid #000000;
position: absolute;
top: -204px;
left: -315px;
width: 627px;
height: 405px;
}
#left {
background-color: #000099;
float:left;
width:160px;
height:315px;
border-right:1px solid #000000;
padding-top:90px;
padding-left:10px;
}
#header {
background-color:#FF0000;
height:70px;
padding-top:5px;
padding-bottom:5px;
margin-left:16px;
margin-right:16px;
width:424px;
border-bottom:2px solid #000000;
float:right;
}
#content {
overflow:auto;
background-color: #FFFF00;
height:323px;
margin-left:16px;
width:440px;
float:right;
}
</style>
</head>
<body>
<div id="pixel">
<div id="main">
<div id="left"></div>
<div id="header">
[img]links.gif[/img]
[img]logo.gif[/img]
</div>
<div id="content">
t</p>
t</p>
t</p>
t</p>
t</p>
t</p>
t</p>
t</p>
t</p>
t</p>
t</p>
t</p>
t</p>
t</p>
t</p>
t</p>
t</p>
t</p>
t</p>
t</p>
t</p>
t</p>
t</p>
t</p>
t</p>
t</p>
t</p>
t</p>
t</p>
t</p>
t</p>
t</p>
t</p>
</div>
</div>
</div>
</body>
</html>
|
| Sponsored Links |
|
10.12.2004, 13:08
|
|||
|
|||
|
1. man sollte nach möglichkeit keine pixel layouts benutzen oder zumindest alternative Stylesheets anbieten.
2. Der IE macht immer Problem  ... wo sie dieses mal genau liegen kann ich leider nicht sagen3. Man sollte Elemente im code nicht nach dem benennen, wie es später aussieht, z.B. #left oder soetwas, sondern man sollte allgemeine bezeichnungen verwenden (überleg mal du hast ein alternatvies stylesheet wo das nicht links ist - ergibt keinen sinn mehr) -- hab schnell geschrieben sorry... 4. eine gegenfrage, wofür ist links.gif ? 5. der alternate text von logo.gif ist nicht sonderlich aufschlussreich, du solltest vielleicht "Meine Seite [Logo]" oder soetwas schreiben. 6.Was soll div#pixel ? 7. Bei den images verwendest du das style attribut (das zunkünftig als depr. gilt) - weiße denen besser klassen oder IDs zu. Nix ist bös gemeint, nur um das vornerein klarzustellen.
|
| Sponsored Links |
|
10.12.2004, 16:37
|
|||
|
|||
|
Bin für jede Tipps dankbar, bin ja absoluter Anfänger!
1.) Ja da bin ich auch noch am überlegen, ob ich prozente mache oder es absolut mache, ich möchte halt nicht das sich der Text in die nächste Zeile verschiebt, der soll so bleiben wie ich ihn angeordnet habe, daher die absolute Positionierung, hat natürlich den Nachteil das bei höheren Auflösungen viel Rand entsteht bei der mittigen Zentrierung. Wenn jemand noch kreative Alternativvorschläge hat, dann her damit! 2.)Das Problem habe ich inzwischen gelöst lag am box-modell bug des ies 3.)Da hast du recht, habe eine Vorlage umbaut und das habe ich noch nicht geändert, besser wäre menue anstatt left 4.)links.gif ist sozusagen das zweite Logo, eins links und eins rechts, könnte man auch noch anderes bezeichnen! 5.)Werde ich beherzigen. 6.)Die Variante mit einem Pixel um eine Seite komplett zu zentrieren habe ich von http://www.thestyleworks.de/tut-art/centerblock.shtml 7.)Das wusste ich nicht, also ein Div mit background? Bin für jeden Hinweis/Vorschlag dankbar!
|
|
11.12.2004, 13:51
|
|||
|
|||
|
die gegenfrage zu 7) habe ich nicht ganz verstanden... Du weißt schon, dass du jedem Element, auch <img/> eine klasse/ID geben kannst, oder? wie du es löst ist deine sache. Also da es ja deine Logos sind, würde ich ihnen spezielle IDs geben.
|
|
14.12.2004, 10:09
|
|||
|
|||
|
Big Player,
Das kann so nix werden, denn in dem von dir genannten Link geht es um Splash-Screens, nicht um Layouts. Deshalb ist dort auch alles pixelgenau angegeben. Wenn man versucht, da ein Layout 'reinzupressen, kann da nicht viel gutes bei rauskommen. Versuch mal das hier: http://www.thestyleworks.de/tut-art/layout_div.shtml (sorry, Eigenwerbung, aber der Link bringt dich mit Sicherheit weiter).
|
|
14.12.2004, 11:59
|
|||
|
|||
|
Danke für die Tipps, das Ergebniss mit den negativen Margins stellt mich auch nicht glücklich und man muss wohl sagen, dass ist für ein Gesamtlayout nicht geeignet, eher für kleinere Elemente um sie in der Mitte zu platzieren.
Stellt sich mir die Frage, was kann ich anstelle machen was dem ähnlich kommt, eine möglichkeit wäre nur horizontal zu zentrieren, die Breite des content in px anzugeben (irgendwas mit 776 so das man bei 800*600 nicht horizontal scrollen muss) und die höhe in % mit einem Randabstand oben und unten von 10%. Würde das gehen? Gibt es bessere Vorschläge?
|
 |
|
|
Ähnliche Themen
|
||||
| Thema | Autor | Forum | Antworten | Letzter Beitrag |
| PNG in IE Problem mit der Mauserkennung (klickbar oder nicht) | Angélique | CSS | 13 | 16.03.2010 18:20 |
| Problem: CSS falsch aufgebaut? Verschiedene Darstellungen in verschiedenen Browsern | Aragon | CSS | 6 | 07.03.2010 19:52 |
| Problem mit 3 Spaltigem Layout | stipo | CSS | 0 | 27.05.2006 20:58 |
| Problem mit verschiedenen Browsern | lucius | CSS | 1 | 20.07.2004 15:53 |
| Probleme mit float in Gecko Browsern | imported_lycka | CSS | 2 | 25.03.2004 16:32 |
Linear-Darstellung
