Problem mit Hintergundgrafik

sissi

Hallo Leute,

Hoffe das mir jemand hier helfen kann.

Folgendes:
meine Css sieht so aus

Zitat

body { background: url(images/nbg.gif) repeat-y center; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; padding: 0px; margin: 0px; color:#6b6451;}
html { padding: 0; margin: 0;}
a:link { text-decoration: none; color : #84844c; border: 0px; -moz-outline-style: none;}
a:active { text-decoration: underline; color : #84844c; border: 0px; -moz-outline-style: none;}
a:visited { text-decoration: none; color : #84844c; border: 0px; -moz-outline-style: none;}
a:hover { text-decoration: underline; color : #84844c; border: 0px; -moz-outline-style: none;}
a:focus { outline: none;-moz-outline-style: none;}
h1, h2, h3, h4 { font-family: "Trebuchet MS";}
img { padding: 0px; margin: 0px; border: none; text-align: center;}
hr { border-left:0px solid #b3bb92; border-right:0px solid #b3bb92; border-top:1px dotted #b3bb92; border-bottom:0px solid #b3bb92; height : 1px; }
form { padding: 0px; margin: 0px;}
input { font-family: 'Verdana'; color: #84844c; font-size: 11px;}
textarea { font-family: 'Verdana'; color: #84844c; font-size: 11px;}
select { font-family: 'Verdana'; color: #84844c; font-size: 11px;}
/* BGContainer +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.BGC { width: 984px; margin: auto auto;}
/* Header +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/**/ * html .Header { height: 800px;} /* */
.Header { background: url(images/nheader_bg0.gif) no-repeat left top; min-width: 1042px; position: relative; clear: left; padding: 0px; min-height:776px; }
.Header h1 { position: relative; width: 400px; float: left; font-size: 28px; line-height: 28px; letter-spacing: -1px; padding: 10px 5px 0px 100px; margin: 0px 20px 0 0; font-weight: bold;}
.Header h1 a { color:#84844c; text-decoration: none; }
.Header h1 a:visited { color:#84844c; text-decoration: none; }
.Header h1 a:hover { color:#84844c; text-decoration: none; }
.Header .Desc { position: relative; float: left; clear: left; width: 400px; color:#b3bb92; font-size: 14px; line-height: 14px; font-weight: bold; letter-spacing: -1px; font-family: 'Arial'; padding: 10px 5px 0px 85px; margin: 0px 20px 0px 20px;}
/* Menu +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ rechts oben - gibt es nicht mehr */
.Menu { float: right; position: relative; width: 490px; margin: 145px 0 0 0; }
/* Container +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ hintergrund eingabefeld kommentar*/
.CON { background: url(images/body_bg2.gif) repeat-y top left; width: 975px; float: left; position: relative; padding: 0px}

Alles anzeigen

wenn ich es so lasse wird im Safari und Firefoxbrowser alles richtig angezeigt
im IE6 ist die Blumengirlande rechts abgeschnitten.

http://www.creative-art-design.com/

nun wenn ich im .BGC { width: 984px; margin: auto auto;
die richtige Grösse nämlich 1042 eingebe sehe ich im IE auch die ganze Girlande aber das ganze Bild rutscht nach links.

kann man da nicht irgendwo die Position des Containers festlegen?

Vielen Dank!
sissi

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

sissi

neues problem

also das mit der Hintergundgrafik hab ich jetzt hinbekommen.

Nun steht aber der Text im IE6 zuweit links.
weiss vielleicht jemand wie ich das richtigstellen kann?

Ich glaub es sollte irgendwo in diesem CSS teil stehen!

Code

/* Side Central Single +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ nix */


/**/ * html .SCS { width: 650px; margin: -680px 30px 0px 20px;} /**/


.SCS { width: 670px; float: left; margin: -630px 0px 0 30px; position: relative;}
.SCS h1 { color: #6b6451; font-size: 20px; font-weight: normal; background: url(images/PostHead.gif) repeat-x bottom; padding-bottom: 10px; letter-spacing: -1px; }
.SCS h2 { color: #6b6451;font-size: 18px; font-weight: normal; }
.SCS h3 { font-size: 14px; font-weight: bold; }


.SCS p { font-size: 12px; line-height: 17px;}
.SCS p strong {}
.SCS img {}
.SCS ul { padding: 10px 0px; margin: 0px; }
.SCS li { padding: 2px 0px 2px 15px; list-style-type: none; background: url(images/PostContentLiIco.png) no-repeat left top; font-size: 11px; line-height: 15px; color:#6b6451; }
.SCS blockquote { padding: 2px 10px; background: #84844c; margin: 0px; color:#84844c; }
.SCS blockquote p { font-size: 11px; padding: 5px 0px; margin: 5px 0px; line-height: 15px;}
.SCS blockquote li { padding: 2px 0px 2px 15px; list-style-type: none; background: url(images/PostContentBlockLiIco.png) no-repeat left top; font-size: 11px; line-height: 15px; color:#84844c; }
.SCS blockquote a { color:#84844c; }
.SCS blockquote a:visited { color:#84844c; }
.SCS blockquote a:hover { color:#84844c; }
.SCS a { text-decoration: underline;}
/* Side Central +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ Hallo Welt Position */


/**/ * html .SC { width: 550px; margin: -470px 30px 0px 60px;} /**/


.SC { width: 570px; float: left; margin: -470px 0 0 155px; position: relative; }
.SC h2 { font-weight: normal;}
.pagetitle { font-size: 20px; font-weight: normal; letter-spacing: -1px; border-bottom: solid 1px #685d43; padding-bottom: 15px;}
/* Post +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */


.Post {	padding: 0px; position: relative; clear: left;}
.PostHead { position: relative; clear: left; background: url(images/PostHead.gif) repeat-x bottom; padding-bottom: 10px;}
.PostHead h1 { font-size: 20px; line-height: 20px; letter-spacing: -1px; font-weight: normal; padding: 0px 0px 1px 0px; margin: 0px; color:#685d43; }
.PostHead h1 a { color: #6b6451; text-decoration: none;}
.PostHead h1 a:visited { color: #6b6451c; text-decoration: none;}
.PostHead h1 a:hover { color:#6b6451; text-decoration: none;}

Alles anzeigen

Danke!
Sissi

koslowski

Moin,

ich verstehe nicht so genau was du meinst.
Bei mir sieht es im IE6 und FF gleich aus.

Was mit jedoch auffiel:
Schriftgröße in body ist mit Pixel definiert. Das führt dazu, das die Schrift sich im IE6/7 unter Standardeinstellungen nicht vergrößern läßt.
Die Schriftgrößenangabe in body sollte deshalb immer in Prozent sein. ;)

Outline:none; ist gesetzt. Der Outlinerahmen dient vor allem dazu, das den "Durchtabbern" einer Seite, damit eine Orientierung geboten wird, wo sie sich gerade beim Durchtabben befinden.
Es gibt durchaus einige Menschen mit motorischen Einschränkungen, die mit einer Maus nicht klarkommen.

Die Reihenfolge der Pseudoklassen:
:link
:visited
:focus, :hover
:active

Das ist die richtige Reihenfolge. ;)

Gruß
koslowski

sissi

Danke!

ja sieht schon im IE6 und anderen Browsern gleich aus - bin die halbe Nacht daran gesessen und den Texttable (der im IE zu weit links war) hab ich auch schon hingekriegt!

Das mit der Schriftgrösse werde ich mir auch noch anschauen!
Danke
Sissi

Tarantil

Mich würde interessieren wie du das mit der Hintergundgrafik gelöst hast, weil ich das gleiche Problem habe

sissi

Bin leider erst gerade von der Arbeit nach Hause gekommen!
Also ich hab das Hintergrundbild neu gemacht und zwar 1024 px und nicht so groß wie mein Erstes.

Dann konnte ich hier

.BGC { width: [COLOR="Red"]1024px[/COLOR]; margin: auto auto;}

/* Header ++++++++++++++++++++++++++++++++++++++++++++++++++ +++++++++++++++++++++++++++++++++++++++++++++++++ */

/**/ * html .Header { height: 800px;} /* */
.Header { background: url(images/nheader_bg0.gif) no-repeat left top; min-width: [COLOR="Red"]1042px[/COLOR]; position: relative; clear: left; padding: 0px; min-height:776px; }

im BGContainer und Headergrafikbreite die selbe Grösse eingeben also 1024px

und das war´s zumindest bei mir

hoffe es hilft dir weiter

lg
sissi

Netbarry

Du solltest grundsätzlich in solchen Fällen eine getrennte CSS-Datei für iE6 anlegen. Das macht die Sache deutlich einfacher und stabiler und Du kannst gezielt eingreifen.
Das nur mal so als Tip :)

Ach ja und 1024 ist doch ein bissl groß oder ? Da musst Du ja in jedem "normalen Browser der auf 1024 läuft) links rechts scrollen.

Bissl weniger machen ![COLOR=Red]
[/COLOR]

sissi

Hallo Netbarry,

nur ist es so das ich mich überhaupt nicht mit CSS auskenne -
habe mir ein Theme runtergeladen und es total verändert

und murkse jetzt mehr oder weniger gut darin herum :)

Ich glaub das diese CSS sowieso so geschrieben ist, denn
wenn ich hier in der ersten Zeile etwas verändere,
wirkt sich das nur auf den IE aus und nicht auf Safari und Fox.

/**/ * html .SC { width: 590px; margin: -470px 30px 0px 80px;} /**/

.SC { width: 590px; float: left; margin: -470px 0 0 155px; position: relative; }

und solche Stellen gibt es einige in der Datei.

lg
sissi

Netbarry

die "normale " style.css ist erstmal für ALLE Brwoser gültig, solange Du kein extra css für zum Beispiel den ie6 einfügst, was ich Dir wie gesagt raten würde.

koslowski

Hi,

Zitat von Netbarry

die "normale " style.css ist erstmal für ALLE Brwoser gültig, solange Du kein extra css für zum Beispiel den ie6 einfügst, was ich Dir wie gesagt raten würde.

am besten wäre eine ie.css für alle IE-Versionen. Innerhalb dieser Datei ist es problemlos möglich die untersch. IE-Versionen gesondert anzusprechen.
Wie das geht wird hier erklärt. ;)

Diese ie.css kannst du dann in der header.php unterhalb der anderen Stylesheets so einbinden:

PHP

<!--[if lte IE 8]><link rel="stylesheet" type="text/css" media="screen" href="<?php bloginfo('template_directory'); ?>/ie.css" /><![endif]-->

Gruß
koslowski

Netbarry

genau so geht das !
:)

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Problem mit Hintergundgrafik

Jetzt mitmachen!