| Autor |
Nachricht |
buchstabensuppe
Threadersteller
Dabei seit: 14.09.2004
Ort: Wuppertal
Alter: 40
Geschlecht: 
|
Verfasst Do 15.02.2007 16:56
Titel Padding/Margin Problem zwischen FF und IE7 (html/css) |
  |
|
Hallo zusammen,
im Moment gewöhne ich mir das Bauen von Webseiten mit Tabellen ab
und stehe vor einem Problem bei dem ich nicht weiterkomme...
Folgende Seite bitte im FF und IE7 öffnen:
http://www.lab0rland.de/upload/test/default.html
Im IE7 ist alles wie es sein sollte, der FF hingegen zentriert die Navigation
nicht und klatscht sie an die linke Seite. Wie kann ich das verhindern?
Hier der DIV Aufbau:
| Code: | <div id="fullscreen">
<div id="content">
<div id="content_left">
<div id="profil_img"><img src="gfx/profil_test.jpg"></div>
<div id="clear"></div>
<div id="nav">
<div id="navpunkt"><div id="navtext">nav1</div></div>
<div id="navpunkt"><div id="navtext">nav2</div></div>
<div id="navpunkt"><div id="navtext">nav3</div></div>
<div id="navpunkt"><div id="navtext">nav4</div></div>
<div id="navpunkt"><div id="navtext">nav5</div></div>
<div id="navpunkt"><div id="navtext">nav6</div></div>
</div>
</div>
<div id="content_right">
content<br>
bla<br>
<br>
<br>
</div>
</div>
</div> |
Einen Blick in die CSS Datei habt ihr hier:
http://www.lab0rland.de/upload/test/css/standard.css
Vielen Dank an alle die sich bemühen...
PS: Bevor ihr wegen schlechter Programmierung die Augen verdreht
bitte Tipps geben wies besser geht, danke 
Zuletzt bearbeitet von buchstabensuppe am Do 15.02.2007 17:00, insgesamt 1-mal bearbeitet
|
|
| |
  |
 |
m
Moderator
Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht:
|
Verfasst Do 15.02.2007 17:13
Titel
|
|
|
| Zitat: | PS: Bevor ihr wegen schlechter Programmierung die Augen verdreht
bitte Tipps geben wies besser geht, danke *zwinker* |
| Zitat: | <div id="nav">
<div id="navpunkt"><div id="navtext">nav1</div></div>
<div id="navpunkt"><div id="navtext">nav2</div></div>
<div id="navpunkt"><div id="navtext">nav3</div></div>
<div id="navpunkt"><div id="navtext">nav4</div></div>
<div id="navpunkt"><div id="navtext">nav5</div></div>
<div id="navpunkt"><div id="navtext">nav6</div></div>
</div> |
wird zu
| Code: | <ul>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
</ul> |
-> und die ungeordnete Liste dann einfach anständig positionieren.
Zuletzt bearbeitet von m am Do 15.02.2007 17:14, insgesamt 1-mal bearbeitet
|
|
| |
 |
|
|
Anzeige
|
|
|
buchstabensuppe
Threadersteller
Dabei seit: 14.09.2004
Ort: Wuppertal
Alter: 40
Geschlecht:
|
Verfasst Do 15.02.2007 17:22
Titel
|
|
|
|
Die navpunkt DIVs sollen später noch einen Mouseover unabhängig von der Schrift bekommen deswegen diese Verschachtelung.
|
|
| |
|
|
m
Moderator
Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht:
|
Verfasst Do 15.02.2007 17:32
Titel
|
|
|
| buchstabensuppe hat geschrieben: | | Die navpunkt DIVs sollen später noch einen Mouseover unabhängig von der Schrift bekommen deswegen diese Verschachtelung. |
Ja und? Du weist den Hyperlink Elementen die display:block; Eigenschaft zu und somit
kannst du einen Hover Effekt flächefüllend für die Li - Elemente erreichen. Und einem
Li kannst du ebenso wie einem DIV einen hover Effekt in Browsern neuer Generation
geben. Also das macht überhaupt keinen Unterschied.
|
|
| |
|
|
buchstabensuppe
Threadersteller
Dabei seit: 14.09.2004
Ort: Wuppertal
Alter: 40
Geschlecht:
|
Verfasst Fr 16.02.2007 12:07
Titel
|
|
|
Jau, hast Recht.
Habe mich mal damit beschäftigt und die Navigation entsprechent umgebaut.
http://www.lab0rland.de/upload/test/default.html
Im FF alles in Ordnung, nur der IE7 hat zwischen den <li> immer noch
einen Whitespace. Weiss jemand wie ich den beseitigt bekomme?
|
|
| |
|
|
sahnemuh
Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 42
Geschlecht:
|
Verfasst Fr 16.02.2007 12:36
Titel
|
|
|
Ich hab da mal ein wenig ausgedünnt 
Du verwendest zu viele Behelfscontainer.. versuch mehr mit Vererbung zu arbeiten.
Den left und right container könnte man sich prinzipiell auch sparen.. so macht es das basteln für dich aber einfacher:
| 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>
<title>Blah</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
* {
margin: 0;
padding: 0;
border: none;
font-family: arial, verdana, helvetica, sans-serif;
font-size: 12px;
}
body {
background-image: url(gfx/bg.gif);
width: 100%;
height: 100.1%;
text-align: center;
}
#wrapper {
width: 805px;
margin: 50px auto;
text-align: left;
}
#navbar {
width: 200px;
background: #fff;
text-align: center;
float: left;
}
ul#nav {
width: 200px;
text-align: left;
width: 190px;
list-style-type: none;
margin-left: 3px;
}
ul#nav li {
height: 25px;
line-height: 25px;
margin: 0 0 5px 0;
width: 190px;
}
ul#nav li a {
display: block;
background-color: #cccccc;
color: #000000;
cursor: pointer;
width: 190px;
text-decoration: none;
}
ul#nav li a:hover {
background-color: #f6f6f6;
}
#content {
float: left;
margin-left: 5px;
background-color: #fff;
width: 600px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="navbar">
<img class="profil_img" src="gfx/profil_test.jpg" width="200" height="300" alt="bild" />
<ul id="nav">
<li><a href="#">nav1</a></li>
<li><a href="#">nav1</a></li>
<li><a href="#">nav1</a></li>
</ul>
</div>
<div id="content">
<p> content bla</p>
</div>
</div>
</body></html> |
Zuletzt bearbeitet von sahnemuh am Fr 16.02.2007 12:41, insgesamt 2-mal bearbeitet
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
problem mit padding/margin
CSS padding/margin-top-Problem
CSS Problem wg. padding, margin und width
seltsam... margin, padding?
Probleme mit padding/margin auf Win
html Gerüst für WP vorbereiten + Margin-Problem =(
|
|
Willkommen auf dem Portal für Mediengestalter
