[GastForen Web allgemein HTML und CSS / Stylesheets Im Firefox sehr gut, im Opera ok und im IE s....e: Problem Positionierung?!

  • Suche
  • Hilfe
  • Lesezeichen
  • Benutzerliste
Themen
Beiträge
Moderatoren
Letzter Beitrag

Im Firefox sehr gut, im Opera ok und im IE s....e: Problem Positionierung?!

flyfisherman
Beiträge gesamt: 42

2. Jun 2006, 00:33
Beitrag # 1 von 7
Bewertung:
(1347 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo miteinander

Ich habe folgendes Problem: meine mit xhtml und css erstellte Seite ist im Firefox gut, im Opera erste Probleme und im IE 6.0 nur Probleme, zb Menuleiste oben im IE fehlt gelbes Band und schwarze Linie stimmmt nicht mehr, die beiden Bilder sind im IE verschwunden und verdecken den Text, es muss etwas mit meinen Positionierungen zu tun haben, es sollte so aussehen wie im Firefox.

Nachstehend der code:

Code
 
<?xml version="1.0" encoding="UTF-8"?>
<!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>Blumen Design - Nicht Allt&auml;gliches f&uuml;r den Alltag.</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="robots" content="index" />
<meta name="robots" content="follows" />
<meta name="language" content="deutsch" />
<meta name="Keywords" content="Blumen Design, Paula Jost, Fleurop, Allflora, Binningen, Basel, Basel und Umgebung, Bottmingen, Therwil, Biel-Benken, Oberwil, Allschwil, Sch&ouml;nenbuch, Leimental, Blumen, Schnittblumen, Pflanzen, Floristik, Blumenstrauss, Rosen, Rosenstrauss, Str&auml;usse, Gesteck, Hauslieferdienst, Zustelldienst, Lieferung, Lieferdienst, Events, Hochzeit, Liebeserkl&auml;rung, Brautstrauss, Hochzeitsauto, Kirchendekoration, Festtafel, Haarschmuck, Dekoration, Dekorationsobjekt, Tischdekoration, Trauerkranz, Trauerkarte, Trauerspenden, Trauer, Gratulation, Geburtstag, Feier, Weihnachten, Ostern, Valentinstag, Muttertag, Advent, Geschenk, Geschenkideen, Accessoires, Jubil&auml;um, Firmenkunden, Sympathietr&auml;ger, Arrangements, Visitenkarte, Abonnement, B&uuml;robegr&uuml;nung, Sujets, Blatt, Bl&uuml;te, nat&uuml;rlich, Gestaltungsmittel, saisonal, &Ouml;ffnungszeiten, Bouquet" />
<meta name="description" content="Blumen Design ist eine kreative Blumenwerkstatt, die es versteht natürliche Werkstoffe mit tollen Accessoires zu tollen Sträussen, Bouquets oder Arrangements zu vermählen. Freude und fachliche Kompetenz zeichnet das gesamte Team aus." />
<meta name="distribution" content="global" />
<meta name="robots" content="all" />
<meta name="revisit-after" content="10 days" />
<link rel="stylesheet" type="text/css" href="bd.css" />

<script language='javascript' src='http://127.0.0.1:1032/js.cgi?pca&r=27529' type="[XHTML 1.0 transitional]"></script>
</head>

<body>

<!-- Container oder Boxdefinition -->
<div id="container">

<!-- Titelzeile mit Logo -->
<div id="title"> <a href="index2.html"><img src="Logo_Banner_klein2.gif" alt="Logo Blumen Design" border="0" /></a></div>

<!-- Men&uuml;leiste -->
<div id="menu"> <a class="menu" href="#">Portrait</a>&nbsp;&nbsp;|&nbsp;&nbsp;
<a class="menu" href="#">Inspirationen</a>&nbsp;&nbsp;|&nbsp;&nbsp;
<a class="menu" href="#">Neue Werke</a>&nbsp;&nbsp;|&nbsp;&nbsp;
<a class="menu" href="#">Angebot</a>&nbsp;&nbsp;|&nbsp;&nbsp;
<a class="menu" href="#">Referenzen</a>&nbsp;&nbsp;|&nbsp;&nbsp;
<a class="menu" href="#">Kontakt</a>&nbsp;&nbsp;|&nbsp;&nbsp;
<a class="menu" href="#">Links</a> </div>

<!-- Inhalt -->
<div id="content">

<!-- Es folgt ein script zur Ausgabe des aktuellen Datums-->
<p class="datum">

<script language="JavaScript1.2" type="text/javascript">
function Datum() {
var now = new Date();
var TageLang = new Array ("Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag");
var MonateLang = new Array ("Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember");
var date = now.getDate();
function VierZeichen(number) {
return (number < 1000) ? number + 1900 : number;
}
heute = TageLang[now.getDay()]+ ", " + date + ". " + MonateLang[now.getMonth()] + " " +(VierZeichen(now.getYear())) ;
document.write("" +heute);
}
Datum();
</script>
</p>

<p>&nbsp; </p>
<h1>Blumen und mehr... </h1>
<p>&nbsp; </p>

<p class="kurztext">Hier erleben Sie in kurzer Zeit die ganze Pracht der Natur...</p>

<p class="kurztext">Unsere Homepage wird in den n&auml;chsten Wochen laufend ausgebaut. Einzelne Links funktioneren noch nicht, doch kommen Sie in den n&auml;chsten Wochen zur&uuml;ck und entdecken Sie Neues... </p>

<div id="media"><img src="HauptbildHome.jpg" width="250" height="190" alt="Rosen" /></div>

<div id="media2"><img src="Tulpenstrauss.jpg" width="250" height="190" alt="Tulpenstrauss" /> </div>

</div>


<!-- Subcontent rechts für Box und Submenu -->
<div id="subcontent">

<div class="box"><strong>Herzlich willkommen bei Blumen Design!</strong> <br />
<br />Wir sind ein junges und aktives Team, das sich jeden Tag darauf freut, f&uuml;r Sie t&auml;tig zu werden... <br />In unserem neuen Internet-Auftritt finden Sie einen kurzen Abriss unseres Schaffens, ein Besuch bei uns im Laden ist aber noch spannender! Bis bald...</div>

<h2>Untermenu</h2>

<ul class="untermenublock">

<li><a href="#">Menu option 1</a></li>
<li><a href="#">Menu option 2</a>
<ul>
<li><a href="#">Submenu 1</a></li>
<li><a href="#">Submenu 2</a></li>
</ul></li>

<li><a href="#">Menu option 3</a></li>
<li><a href="#">Menu option 4</a></li>
</ul>

<p>&nbsp; </p>

</div>

<!-- Footer -->
<div id="footer">
<p align="center">Copyright &copy; 2006 Blumen Design</p>
<div align="right"><span class="impressum "><a href="impressum.html">Impressum </a>&nbsp;&nbsp;|&nbsp;&nbsp; <a href="www.flyfisherman.ch">created by </a> </span></div>
</div>
</div>

<script language='javascript' type="[XHTML 1.0 transitional]">postamble();</script>

</body>
</html>


/* CSS Document für Blumen Design Relaunch Mai 2006 */

/* Body und Tag Infos */
body { background-color: #CCCC99;
color: #996600;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
/* Hack für Zentrierung wegen Int Explorer */
text-align: center;
}

h1 { font-size:18px;
color:#996600;
margin:0px; }

h2 { font-size:14px;
color:#996600; }

h3 { font-size:12px;
color:#996600; }

p { margin-top:0px;
color: #996600;
font-size: 10px; }

a:link, a:visited, a:active, a:hover
{
text-decoration:none;
font-weight:bold;
color:#996600;
font-size:9px;
}
a:active, a:hover
{
color:#FF3333;
font-size: 9px;
}

/* Container oder Boxdefinition */
#container {
background-color: #FFFFCC;
width: 760px;
margin:0px auto;
padding: 0px 0;
text-align: left;
}

/* Die Hyperlinks im Menü */
a.menu:link, a.menu:visited
{
color:#996600;
text-decoration:none;
}
a.menu:active, a.menu:hover
{
color:#FF3333;
}

/* Die Titelzeile mit Logo */
#title {
height:80px;
padding:5px;
text-align:center;
background-color:#996600;
}

/* Das Menü */
#menu {
border-top:1px solid #000000;
color:#996600;
background-color:#FFCC33;
text-align:center;
padding:10px 0px;
}

/* Der Inhalt im Content */
#content {
border-top:1px solid #000000;
background-color:#FFFFCC;
width: 500px;
float: left;
padding:5px 30px 10px 10px;
color:#000000;
position: absolute;
}

p.datum {
color: #996600;
font-size: 10px;
}

p.kurztext {
padding: 0 0 0 25px;
}

/* Media-Bereich für Fotos */
#media {
filter: alpha(opacity=60);
opacity: 0.6;
position: absolute;
top: 200px;
left: 36px;
background-color: #FFFFCC;
width: 250px;
height: 190px;
float: left;
border: 1px solid #996600;
}

#media2 {
position: absolute;
bottom: -325px;
right: 50px;
background-color: #FFFFCC;
width: 250px;
height: 190px;
float: left;
border: 1px solid #996600;
}


/* Subcontent für Box und Untermenu */
#subcontent {
float: right;
width: 200px;
border-top:1px solid #000000;
background-color: #FFFFCC;
padding: 40px 10px 10px 10px;
line-height:1.4em;
}

.box {
margin: 20px 10px 20px 10px;
padding: 10px;
border: 1px solid #996600;
background-color: #FFFFCC;
color: #996600;
line-height: 1.5em;
}

#subcontent h2{
padding: 10px;
display:block;
margin:0 0 15px 0;
font-size:1.6em;
font-weight:normal;
text-align:left;
letter-spacing:-1px;
color:#996600;
background-color:inherit;
}

#subcontent p{margin:0 0 16px 0; font-size:0.9em;}

/**************** Stile für Untermenublock ****************/

.untermenublock{margin:0 0 20px 8px; font-size:0.9em;}
.untermenublock li{list-style:none; display:block; padding:2px; margin-bottom:2px;}
.untermenublock li a{font-weight:bold; text-decoration:none;}
.untermenublock li a:hover{text-decoration:none;}
.untermenublock li ul{margin:3px 0 3px 15px; font-size:1em; font-weight:normal;}
.untermenublock li ul li{margin-bottom:0;}
.untermenublock li ul a{font-weight:normal;}


/* Footer */
#footer {
clear: both;
background-color: #ffcc33;
width: 760px;
border-top: 1px solid #000000;
color: #996600;
font-size: 70%;
}

#footer p {
margin: 0em 0em 0.5em 0.5em;
padding: 2px;
}

#footer impressum {
float: right;
font-size: 9px;
text-decoration: none;
margin-top: 0em;
}

Wer kann mir helfen?
Danke und Gruss
flyfisherman
flyfisherman
<url>http://www.flyfisherman.ch</url>
X

Im Firefox sehr gut, im Opera ok und im IE s....e: Problem Positionierung?!

SabineP
Beiträge gesamt: 7586

2. Jun 2006, 09:36
Beitrag # 2 von 7
Beitrag ID: #232570
Bewertung:
(1335 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo flyfisherman,

bei den beiden Bildern fehlt der z-index:

http://de.selfhtml.org/...onierung.htm#z_index

Hier gibts gleich noch ein Beispiel zur Positionierung von Fotos:

http://de.selfhtml.org/.../anzeige/z_index.htm

Scripte vom Typ [XHTML 1.0 transitional] gibt es übrigens nicht:

<script language='javascript' type="[XHTML 1.0 transitional]">postamble();</script>

richtig wäre:

<script type="text/javascript">postamble();</script>

Gruß Sabine


als Antwort auf: [#232535]

Im Firefox sehr gut, im Opera ok und im IE s....e: Problem Positionierung?!

flyfisherman
Beiträge gesamt: 42

2. Jun 2006, 20:45
Beitrag # 3 von 7
Beitrag ID: #232750
Bewertung:
(1322 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo Sabine

Besten Dank für den Tip, habe z-index: 1 und z-index: 2 ausprobiert; praktisch keine Veränderung?

Was könnte das sein?

Besten Dank für Eure Hilfe.
Gruss
flyfisherman
<url>http://www.flyfisherman.ch</url>


als Antwort auf: [#232570]

Im Firefox sehr gut, im Opera ok und im IE s....e: Problem Positionierung?!

SabineP
Beiträge gesamt: 7586

2. Jun 2006, 21:17
Beitrag # 4 von 7
Beitrag ID: #232759
Bewertung:
(1318 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo flyfisherman,

ich hatte gehofft, daß Du Dir den Link mit den Beispielen ansiehst, den ich oben schon einmal gepostet hatte:
http://de.selfhtml.org/.../anzeige/z_index.htm

Positioniere die Bilder mit top und left,
also ausgehend von der oberen linken Ecke und schon klappt es in IE und Firefox.

#media2 {
position: absolute;
top: 250px;
left:250px;
background-color: #FFFFCC;
width: 250px;
height: 190px;
border: 1px solid #996600;
z-index:2;
}
Gruß Sabine


als Antwort auf: [#232750]

Im Firefox sehr gut, im Opera ok und im IE s....e: Problem Positionierung?!

flyfisherman
Beiträge gesamt: 42

2. Jun 2006, 22:09
Beitrag # 5 von 7
Beitrag ID: #232768
Bewertung:
(1316 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo Sabine

Besten Dank, nun stimmt es im Opera 8.5, im FF 1.5 sowieso, aber im IE 6 habe ich keine Bilder, der Text ist ebenso verschwunden und in der Menuleiste fehlt der gelbe Balken und das Menu ist nicht zentriert..

Sorry, wenn ich Dich belästige damit, aber es ist immer der IE, der einem fast zum Wahnsinn bringt. Was mache ich falsch?

Gruss
flyfisherman
<url>http://www.flyfisherman.ch</url>


als Antwort auf: [#232759]

Im Firefox sehr gut, im Opera ok und im IE s....e: Problem Positionierung?!

SabineP
Beiträge gesamt: 7586

2. Jun 2006, 22:38
Beitrag # 6 von 7
Beitrag ID: #232774
Bewertung:
(1313 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
>> aber im IE 6 habe ich keine Bilder, der Text ist ebenso verschwunden

Das ist ja eigenartig. Gibt es eine URL dazu?
Ich kann nur mit IE4 testen, der zeigt die Position der Bilder richtig an und der Text ist auch da,
IE6 habe ich nicht.

Gruß Sabine


als Antwort auf: [#232768]

Im Firefox sehr gut, im Opera ok und im IE s....e: Problem Positionierung?!

flyfisherman
Beiträge gesamt: 42

2. Jun 2006, 22:50
Beitrag # 7 von 7
Beitrag ID: #232777
Bewertung:
(1311 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo Sabine

Nein keine url, weil es ein Relaunch der Site ist und noch das alte Layout mit Tabellen im Netz ist. Ich schaue mir die verschiedenen Resultate jeweils aus der Dreamweaver 8 Vorschau aus in den versch. Browsern an. Könnte hier das Problem liegen?
Gruss
flyfisherman
<url>http://www.flyfisherman.ch</url>


als Antwort auf: [#232774]
X

Veranstaltungskalender

Hier können Sie Ihre Anlässe eintragen, welche einen Zusammenhang mit den Angeboten von HilfDirSelbst.ch wie z.B. Adobe InDesign, Photoshop, Illustrator, PDF, Pitstop, Affinity, Marketing, SEO, Büro- und Rechtsthemen etc. haben. Die Einträge werden moderiert freigeschaltet. Dies wird werktags üblicherweise innert 24 Stunden erfolgen.

pdf-icon Hier eine kleine Anleitung hinsichtlich Bedeutung der auszufüllenden Formularfelder.

Veranstaltungen
05.02.2021 - 05.11.2021

Digicomp Academy AG, Limmatstrasse 50, 8005 Zürich
Freitag, 05. Feb. 2021, 13.00 Uhr - Freitag, 05. Nov. 2021, 17.00 Uhr

Lehrgang

Bilden Sie sich zum zertifizierten Publishing-Multimedia-Profi aus. Neben Fotografie und Video befassen Sie sich mit der Medienproduktion, digitalen Publikationen und dem Webdesign für Desktop- und mobile Endgeräte.

Preis: CHF 10'500.-
Dauer: 30 Tage (ca. 210 Lektionen) – Unterricht findet jeweils am Freitag von 13 - 19 Uhr und Samstag von 09 - 17 Uhr statt

Ja

Organisator: Digicomp Academy AG

Kontaktinformation: Kundenberater-Team, E-Mailkundenberatung AT digicomp DOT ch

digicomp.ch/d/9PM

Veranstaltungen
05.03.2021 - 30.04.2021

Digicomp Academy AG, Zürich oder virtuell
Freitag, 05. März 2021, 13.00 Uhr - Freitag, 30. Apr. 2021, 17.00 Uhr

Lehrgang

Im berufsbegleitenden Web Publisher Lehrgang vertiefen Sie Ihr Wissen rund um das Thema Screendesign und die Umsetzung von Websites. Wir befähigen Sie dazu selbständig und professionell Ihren Webauftritt zu planen und in die Realität umzusetzen.

Preis: CHF 3'250.–
Dauer: 8.5 Tage - Unterricht findet jeweils am Freitag von 13 - 19 Uhr und Samstag von 09 - 17 Uhr statt.

Ja

Organisator: Digicomp Academy AG

Kontaktinformation: Kundenberater-Team, E-Mailkundenberatung AT digicomp DOT ch

digicomp.ch/d/9PWEB