nicht angemeldet
Zwei float-Elemente sowie ein Bild in der Mitte. Ich oder IE!
HILFE:
1. Gott sei dank gibt es SelfHTML und euch ;)
Habe folgendes vor:
Das ist so das ungefähre Layout am Anfang. (das Bild und der Text sind nur Platzhalter. ;))
Auf den folgenden Seiten soll sich der Contentbereich nach unten verlängern (kann ruhig fix sein...) und kleine thumbnailbilder enthalten, die dann das große Bild in der Mitte laden. Dazu hat mir ein Freund auch schon ein Skript geschrieben.
Mein Problem:
Bitte mit Internet Explorer öffnen
nutze IE 6 und Firefox 3.
Firefox stellt es korrekt dar. IE. nicht.
habe vor ca vier Tagen+Nächten angefangen mich mit HTML und CSS intensiev zu beschäftigen!
Habe so ziemlich jede css Seite die ich finden konnte bei euch durchforstet.
Template von hier gezogen und mich inspirieren lassen:
Intensievstation
Und natürlich im Netz gestöbert.
Bin jetzt um 4:42 Uhr am Ende und muss es fertig bekommen.
Da kommt ihr in's Spiel:
Hier einmal die CSS Datei:
/* ---------- CSS für Ideas unlimited ---------- by: xxx
Farben: creme:#faf4e6 rot:#e2483c hellblau:#758a9d mittelblau:#507798------*/
/* ---------- Hintergrund tile... ---------- */
body {
background-image:url(files/tile_bg01.jpg);
font-size: 15px;
font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
color:#564b47;
padding:0;
margin:0;
}
a {color: #e2483c;}
a:visited {color:#507798;}
a:hover {color: #e2483c;}
a:active { color:#758a9d;}
/* ---------- header ist nicht mit im Container drin... ---------- */
#header {
position: relative; top:150px;
width: 960px;
height:100px;
margin: 0 auto;
border: 2px solid #545252;
background-image:Url(files/title_hd.jpg);
background-color: #faf4e6;
background-repeat: no-repeat;
background-position: center;
}
/* ---------- der Container gibt dem layout seinen Rahmen ---------- */
#container {
position: relative; top:150px;
padding: 0px;
margin: 0 auto;
width: 960px;
max-height:320px;
background-color: #c0c0c0;
border: solid #545252;
border-width:0px 2px 0px 2px;
}
/* ---------- Inhalt ---------- */
#content {
margin: 0 auto;
padding: 0px;
width: 460px;
height:320px;
text-align: center;
background-color: #faf4e6;
}
/* ---------- navigavtions ---------- */
#left {
float:left;
padding: 0px;
height:320px;
width: 250px;
text-align: center;
position: left;
background-color: #e2483c;
border-right:2px solid #545252;
}
#right {
float:Right;
padding: 0px;
height:320px;
width: 250px;
text-align: center;
background-color: #e2483c;
border-left:2px solid #545252;
}
/* ---------- footer ------------ */
#footer {
clear:both;
width: 960px;
margin: 0px auto;
padding: 5px 0px 5px;
text-align: center;
color:#758a9d;
background-color: #faf4e6;
border: solid #545252;
border-width: 2px 0px 2px;
}
/* --- Versuch am footer ---
div#footer p{
padding: 5px 0px 5px;
}
*/
Und Hier die HTML Datei:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head >
<title>
Welcome to: Ideas unlimited!
</title>
<link type="text/css" href="style.css" rel="stylesheet" media="screen" />
</head>
<body>
<div id="header">
</div>
<div id="container">
<div id="left">
Text links
</div>
<div id="right">
Text rechts
</div>
<div id="content">
Text plus Fotos usw...
</div>
<div id="footer">
<P><a href="xxx">E-Mail schreiben</a></p>
<p>Ideas Unlimited - xxx</p>
<p>xxx</p>
</div>
</div>
</html>
"xxx" habe so manches entfernt aus Gründen des Datenschutzes und der fiesen Suchmaschienbots...
Könnt ihr mir hier helfen?
MFG:
Avion
PS: auf eine gute Zeit ;)
Achtung: Es ist ein rein privates Projekt, nicht kommerziell. Nur um falsche Hintergedanken auszuschließen...
-
NACHTRAG:
Wollt nur kurz noch etwas dran hängen. Ich habe versucht elemente zu layern mit "z-Index:" und habe auch versucht die elemente an unterschiedlichen stellen in der HTML Datei anzulegen. Dazu habe ich mit position: relavtive: usw. und Margin: auto; experementiert. Leider Erfolglos. daher der Lange Post und die Hoffnung auf ne findige idee oder einen Denkfehler den ich übersehen habe.
MFG, Avion
-
Leider klappt es irgendwie nicht.
Wollte mit dem Container das ganze layout zentrieren.
Wenn ich den aber zb. auf absolut setze dann zerstört er alles ;)
Vieleicht habt Ihr ja eine Idee wie ich es anders anlegen kann.
MFG Avion
-
-
Der Contentbereich bricht genau bei 456px. im IE um obwohl es ja sonnst passt...
Hier mal ein Bild:
Fehler als Link
Ich komme nicht weiter. Einfach ratlos...
Ich habe auch schon einen Thread im CSS Teil des Forums...
http://forum.de.selfhtml.org/?t=181019&m=1196706&readmode=nested
Dort sind die CSS und HTML Datein Drin und eine Erklärung was ich vorhabe.
Wäre wirklich klasse, wenn m ir da einer vor Weihnachten noch helfen kann.
-
Hi,
Ich habe auch schon einen Thread im CSS Teil des Forums...
http://forum.de.selfhtml.org/?t=181019&m=1196706&readmode=nested
zum Glück nicht, denn sonst wäre dies ein unerwünschtes Doppelposting - Du hast lediglich den Themenbereich unpassend geändert; es ist und bleibt ein CSS-Problem.
Was mir auffällt: Du verwendest die Eigenschaft position, obwohl dies gar nicht erforderlich ist und unerwünschte Nebenwirkungen hat - sowohl beim Wert relative als auch bei absolute.
Dieses Wunschbild kannst Du eigentlich vergessen, wenn Du darunter noch Thumbnails darstellen willst, weil das in kein gängiges Browserfenster mehr passen würde.
Verzichte also auf die vertikale Zentrierung und auf Angaben zu position und nutze float und clear.freundliche Grüße
Ingo-
Hallo Ingo,
schon einmal ein Danke für die Hilfe.
habe es jetzt wie folgt geändert...
Das Problem hatte ich aber eben schon, der Content berech sollte 460px breit sein, damit er genau hinein passt. Wie kann ich ihn denn ohne position oder Margin: auto centrieren?Denn Immer wenn ich den contentbereich passend machen will bricht er um...
hier das Beispiel:Edit:
habe den header und den footer in den Container verlegt.
Die beiden Seiten auf float gestellt.
Versucht den Content zu zentrieren.HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html> <head > <title> Welcome to: Ideas unlimited! </title> <link type="text/css" href="style.css" rel="stylesheet" media="screen" /> </head> <body> <div id="container"> <div id="header"> </div> <div id="left"> Text links </div> <div id="right"> Text rechts </div> <div id="content"> Text plus Fotos usw... </div> <div id="footer"> <P><a href="mailto:bettinavonfinck@gmx.de?CC=bettinavonfinck@ideasunlimited.de&subject=Ideas%20Unlimited:%20">E-Mail schreiben</a></p> <p>Ideas Unlimited - Bettina Freifrau von Finck</p> <p>Große Weinmeisterstraße 21a - 14469 Potsdam</p> </div> </div> </html>CSS:
/* ---------- CSS für Ideas unlimited ---------- by: Kasimir Frh. v. Finck Farben: creme:#faf4e6 rot:#e2483c hellblau:#758a9d mittelblau:#507798------*/ /* ---------- Hintergrund tile... ---------- */ body { background-image:url(files/tile_bg01.jpg); font-size: 15px; font-family: Verdana, Arial, SunSans-Regular, Sans-Serif; color:#564b47; padding:0; margin:0; } a {color: #e2483c;} a:visited {color:#507798;} a:hover {color: #e2483c;} a:active { color:#758a9d;} /* ---------- header ist nicht mit im Container drin... ---------- */ #header { width: 960px; height:100px; margin: 0 auto; border-bottom: 2px solid #545252; background-image:Url(files/title_hd.jpg); background-color: #faf4e6; background-repeat: no-repeat; background-position: center; } /* ---------- der Container gibt dem layout seinen Rahmen ---------- */ #container { margin: 10%; auto; padding: 0px; width: 960px; max-height:320px; background-color: #c0c0c0; border: 2px solid #545252; } /* ---------- Inhalt ---------- */ #content { margin: 0px; padding: 0px; width: 460px; height:320px; text-align: center; background-color: #faf4e6; } /* ---------- navigavtions ---------- */ #left { float:left; padding: 0px; height:320px; width: 250px; text-align: center; background-color: #e2483c; border-right:2px solid #545252; } #right { float:Right; padding: 0px; height:320px; width: 250px; text-align: center; background-color: #e2483c; border-left:2px solid #545252; } /* ---------- footer ------------ */ #footer { width: 960px; margin: 0px; text-align: center; color:#758a9d; background-color: #faf4e6; border-top:2px solid #545252; } /* --- Versuch am footer --- div#footer p{ padding: 5px 0px 5px; }-
Hi,
Wie kann ich ihn denn ohne position oder Margin: auto centrieren?
schlecht. Aber wieso ohne margin? margin:auto zentriert doch wunderbar, zumindest horzontal.
Denn Immer wenn ich den contentbereich passend machen will bricht er um...
weil Du Dich nicht an das Box-Mdell hälst.
#container {
margin: 10%; auto;
padding: 0px;
width: 960px;
max-height:320px;
background-color: #c0c0c0;
border: 2px solid #545252;
}das sind dann 964px Breite (Dein Header hat nur 960px)... sicher, dass die Höhe für den Inhalt ausreicht? Bedenke auch evtl. Schriftgradänderungen.
padding:0 ist übrigens bei DIVs unnötig, da diese Elemente keine semantische Bedeutung und daher auch keine Voreinstellung (außer display:block) im Browser-CSS haben.#content {
margin: 0px;
padding: 0px;
width: 460px;460px
#left {
float:left;
padding: 0px;
height:320px;
width: 250px;
text-align: center;
background-color: #e2483c;
border-right:2px solid #545252;- 254px = 714px
#right {
float:Right;
padding: 0px;
height:320px;
width: 250px;
text-align: center;
background-color: #e2483c;
border-left:2px solid #545252;- 254px = 968px. Dein Container ist aber nur 964px breit.
freundliche Grüße
Ingo
-
-
-