|
|||
Div nicht genau passend
Hallo,
ich bin neu hier und habe ein ziemlich schwer zu veranschaulichendes HTML-Problem. Ich werde mal einen Screenshot und mein CSS dazu posten. HTML-Code:
/* Body */ body { font: 100% Arial, Verdana, Helvetica, sans-serif; font-size: 13px; line-height: 1.5; background: url(../a_bilder/bg_hotel.jpg) #CAA800; background-repeat: no-repeat; background-attachment: fixed; background-position: top center; margin: inherit; /* Es empfiehlt sich, margin (Rand) und padding (Auffüllung) des Body-Elements auf 0 einzustellen, um unterschiedlichen Browser-Standardeinstellungen Rechnung zu tragen. */ text-align: center; /* Hierdurch wird der Container in IE 5*-Browsern zentriert. Dem Text wird dann im #container-Selektor die Standardausrichtung left (links) zugewiesen. */ margin: 0px auto; padding: 0px; } #container { width: 915px; /* Mit einer Breite, die 20 Pixel unter der vollen Breite von 800 Pixel liegt, können Sie dem Browser-Chrome Rechnung tragen und gleichzeitig eine horizontale Bildlaufleiste vermeiden. */ background: #FAF2D3; margin: 0 auto; /* Durch automatische Ränder (in Verbindung mit einer Breite) wird die Seite zentriert. */ border: none; text-align: left; /* Hierdurch wird die Einstellung text-align: center im Body-Element aufgehoben. */ min-height: 1000px; } /* Head */ #head { position: relative; height: 500px; width: 915px; } #logo a{ position: absolute; background: url(../a_bilder/logo.jpg) no-repeat; height: 97px; width: 274px; left: 40px; top: 50px; text-decoration: none; } /* Navigation */ #navi { font-size: 14px; position: absolute; top: 115px; left: 550px; width: 0px; } #pic { position: absolute; top: 200px; width: 915px; height: 272px; } .nav a { color: #666; text-decoration: none; } .nav a:hover { color: #C2B316; text-decoration: none; } .navA a{ color: #C2B316; text-decoration: none; } .I { color: #C2B316; padding-left: 7px; padding-right: 7px; } #navo { position: absolute; background: url(../a_bilder/navi.jpg); width: 915px; height: 39px; top: 472px; text-decoration: none; } .kat a{ font-size: 20px; color: white; text-decoration: none; } /* Content */ #content { background: ; width: 915px; min-height: 1000px; } h1 { color: #d03202; font-size: 20px; font-weight: normal; } h2 { color: #d03202; font-size: 13px; font-weight: bold; margin-bottom: -2px; } #maincontent { margin: 0 0; float: right; padding: 20px 0 0 89px; width: 550px; } #sidebar { padding: 20px 50px 0 0; float: left; width: 228px; } Firefox Sorry für die Größe der Bilder aber ich denke so ist es am Besten zu erkennen. In Chrome ist auf der linken Seite das Bild nicht ganz am Content passend und bei Firefox auf der rechten Seite. In IE wird es richtig angezeigt. Sagt Bescheid falls ich irgendetwas falsch gemacht habe und danke schoneinmal. |
Sponsored Links |
|
|||
sorry, hier noch das html
HTML-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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Borkum - Hotel Bloemfontein</title> <link href="a_styles/styles.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="container"> <div id="head"> <div id="logo"></div> <div id="pic"><img src="a_bilder/bild1.jpg" /></div> </div> <div id="content"> <div id="sidebar"> </div> <div id="maincontent"> </div> </div> </div> </body> </html> |
|
|||
Solche 1px-Verschiebungen passieren, wenn man background-Zentrierung und Margin-Zentrierung mischt.
Du kannst noch 1000 Zeilen Code posten: Wir sehen deine Hintergrundbilder trotzdem nicht. Poste immer einen Link (du hast doch Webspace!), siehe auch die Hinweise für Fragende.
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
|
|||
Sorry, danke für die Hinweise.
Hab es jetzt hier mal hochgeladen: http://www.crossmediasolutions.de/5minutes/test/ |
|
|||
Mach den weißen Bereich in deinem body-BG ein paar Pixel schmaler -- dann wird man nichts von der Ungenauigkeit sehen.
edit: Noch ein Hinweis: Die 1px-Verschiebung ist nicht browserabhängig, sondern viewport-breiten-abhängig.
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Fragen zu CSS und Joomla | DOKTOR | CSS | 2 | 23.05.2011 20:29 |
Brauche Hilfe: Schwarzes Nichts | Zwox | CSS | 10 | 19.11.2010 17:53 |
Header entfernen | tripple | CSS | 17 | 15.06.2010 16:41 |
Schriftfarbe in den Eintragungsfeldern von jforms | Steveislucky | CSS | 2 | 16.03.2010 11:59 |
CSS Text nebeinander? | carstiee09 | CSS | 13 | 13.11.2009 20:18 |