[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:
(1380 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
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:
(1368 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:
(1355 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


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:
(1351 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;
}


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:
(1349 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


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:
(1346 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:
(1344 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


als Antwort auf: [#232774]
X

Aktuell

PDF / Print
Wolken_300

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
01.12.2022

Online
Donnerstag, 01. Dez. 2022, 10.00 - 10.45 Uhr

Webinar

Die drei ColorLogic-Programme ZePrA, CoPrA und ColorAnt sind in neuen Versionen mit vielen neuen Funktionen im Jahr 2022 veröffentlich worden oder werden in Kürze veröffentlicht (ColorAnt 9). In unserem ca. 45 minütigen kostenlosen Webinar zeigen wir Ihnen einige dieser neuen Funktionen mit dem Schwerpunkt auf Automatisierung und Produktivitätssteigerungen.

Ja

Organisator: Impressed GmbH

Kontaktinformation: Silvia Noack, E-Mailsnoack AT impressed DOT de

https://www.impressed.de/schulung.php?c=sDetail&sid=311

ColorLogic Update-Webinar ZePrA 10, CoPrA 9 und ColorAnt 9
Veranstaltungen
02.02.2023

Prozesse optimieren und effizient gestalten

Zürich
Donnerstag, 02. Feb. 2023, 08.00 - 10.00 Uhr

Digitalisierung, Webauftritt

Digitalisierung mitgestalten - Worauf kommt es an? Wie wichtig ist die Webseite? Webseite mit Word Press? Interne Prozesse optimieren

Ja

Organisator: B. Isik - SNF Academy

Kontaktinformation: Birol Isik, E-Mailinfo AT bkcc DOT ch

https://digitalisierung-heute.ch/digitalisierung-informationstag-schweiz/