| Autor |
Nachricht |
cnet2k
Threadersteller
Dabei seit: 09.03.2009
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Mo 09.03.2009 00:43
Titel css Problem mit dem IE |
  |
|
Hallo Leute!
Ich lese hier schon länger mit und bin ziemlich begeistert von diesem Forum und der Hilfsbereitsschaft der User!
Ich beschäftige mich erst seit kurzem mit dem erstellen von (meiner) Homepage und habe hier ein grundlegendes Problem.
mein Problem:
Ich hab´s geschafft ein Hintergrundbild wie im Beispiel (siehe Source) mit 100% Höhe sowie Breite einzufügen. Im Firefox wirkt das auch perfekt. (Logo+Content Div steht mittig und passen sich mit der Größe des Browser dementsprechend an.
...schaut man sich das ganze nun mit dem IE an. klebt alles links in der Ecke.. ich habe jetzt ca. 6 stunden investiert und bin zu keiner Lösung gekommen die nicht bedeutet, dass ich für den Abstand links ein fixes "margin" angeben muss.
Ich bitte euch um ein kurzes durchschauen und einen kleinen Schlag auf meinen Hinterkopf für einen wahr. leicht zu lösenden Fehler damit das ganze im IE genauso wie im Firefox wirkt.
der code:
css:
| Code: |
html, body {
margin:0;
padding:0;
width:100%;
height:100%;
overflow:hidden;
}
body {
font-family:verdana, arial, sans-serif;
font-size:76%;
}
#background{
position:absolute;
width:100%;
height:100%;
z-index:1;
}
#wrapper {
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
overflow:auto;
z-index:2;
}
#content {
padding:5px 300px 20px 215px;
}
p {line-height:1.8em; letter-spacing:0.1em; text-align:justify;}
#logo {
width: 939px;
height: 165px;
background: url(images/img02.jpg) no-repeat;
margin-left: auto; margin-right: auto; text-align: left;
z-index:2;
}
#page {
width: 939px;
margin-left: auto; margin-right: auto; text-align: left;
background: #FFFFFF;
z-index:2;
}
#sidebar {
width: 939px;
float: left;
width: 200px;
padding-left:10px;
}
|
html:
| Code: |
<body>
<!-- hintergrundbild wie im beispiel auf http://www.cssplay.co.uk/layouts/background.html -->
<div>
<img id="background" src="background.jpg" alt="" title="" />
</div>
<!-- hauptdiv start -->
<div id="wrapper">
<!-- setze titel logo -->
<div id="logo"></div>
<!-- setze content-div -->
<div id="page">
<!-- navigation links im content-div -->
<div id="sidebar">
<img src='./images/button1.gif' border='0' />
</div>
<!-- start content -->
<div id="content">
Willkommen auf meiner Homepage!
</div>
<!-- end content -->
</div>
<!-- end hauptdiv -->
</body>
|
Leute ich Danke euch!
Mfg[/code]
Christoph!
|
|
| |
  |
 |
Kash
Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht: 
|
|
| |
|
|
|
Anzeige
|
|
|
cnet2k
Threadersteller
Dabei seit: 09.03.2009
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Mo 09.03.2009 10:12
Titel
|
|
|
Hallo!
Danke für deine Antwort, jedoch hab ich dann nicht das gewünschte Ergebnis mit dem Hintergrund (dieser sollte sich je nach Größe oder Länge des Browsers ziehen wie in diesem Beispiel: http://www.cssplay.co.uk/layouts/background.html )
vl hast du noch einen Tipp das ich den wrapper mittig, wie im Firefox bekomme.
Danke!
lg Christoph
|
|
| |
|
|
Kash
Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht:
|
Verfasst Mo 09.03.2009 10:49
Titel
|
|
|
und wieso nimmst du nicht den SourceCode wie beschrieben?
die mittige ausrichtung habe ich dir schon beschrieben.
|
|
| |
|
|
cnet2k
Threadersteller
Dabei seit: 09.03.2009
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Mo 09.03.2009 11:10
Titel
|
|
|
tut mir leid, ich steh da auf der Leitung, es will einfach nicht funktionieren.
ich probiers weiter.
trotzdem Danke!
|
|
| |
|
|
Kash
Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht:
|
Verfasst Mo 09.03.2009 11:20
Titel
|
|
|
| Code: |
#wrapper {
margin:auto;
}
|
= mittig ausrichtung = (horizontal!!!)
//ersetze im #wrapper position:absolute; durch position:relativ;
Zuletzt bearbeitet von Kash am Mo 09.03.2009 11:27, insgesamt 1-mal bearbeitet
|
|
| |
|
|
cnet2k
Threadersteller
Dabei seit: 09.03.2009
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Mo 09.03.2009 11:29
Titel
|
|
|
das hab ich probiert.. im firefox perfekt und im IE rührt sich der "logo div" keinen millimeter vom Rand weg.
| Code: |
<html>
<head>
<style type="text/css">
html, body {margin:0; padding:0; width:100%; height:100%; overflow:hidden;}
body {font-family:verdana, arial, sans-serif; font-size:76%;}
#background{position:absolute; z-index:1; width:100%; height:100%;}
#scroller {margin:0; position:absolute; width:100%; height:100%; overflow:auto; z-index:2;}
#content {padding:5px 300px 20px 200px;}
#logo {
margin: 0 auto; /* Zentrierung mitte */
width:939px;
height:165px;
background:transparent url(./images/img02.jpg) top center repeat;
}
</style>
</head>
<body>
<div>
<img id="background" src="background.jpg" alt="" title="" />
</div>
<div id="scroller">
<div id="logo"></div>
<div id="content">ttesstt</div>
</div>
</html>
|
// bei der position:relative (im #scroller) verschwindet das div und ich sehe praktisch nur mehr das hintergrundbild
Zuletzt bearbeitet von cnet2k am Mo 09.03.2009 11:32, insgesamt 2-mal bearbeitet
|
|
| |
|
|
Kash
Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht:
|
Verfasst Mo 09.03.2009 11:45
Titel
|
|
|
am besten ist du zeigst mal anhand eines bsp was du willst.
probiere mal folgendes und sag ob es in die richtung geht
| Code: |
<html>
<head>
<style type="text/css">
html, body {margin:0; padding:0; width:100%; height:100%;}
body {font-family:verdana, arial, sans-serif; font-size:76%;}
div#wrapper {
margin:auto;
position:relative;
width:980px;
min-height:100%;
}
* html div#wrapper {
height:100%;
}
div#wrapper #logo {
margin: auto; /* Zentrierung mitte */
width:939px;
height:165px;
background:transparent url(./images/img02.jpg) top center repeat;
}
div#wrapper #content {padding:5px 300px 20px 200px;}
</style>
</head>
<body>
<div id="wrapper">
<div id="logo"></div>
<div id="content">ttesstt</div>
</div>
</html>
|
beschäfftige dich auch mit dem Doctype und dem boxmodell
http://de.selfhtml.org/html/allgemein/grundgeruest.htm
http://www.edition-w3c.de/TR/1998/REC-CSS2-19980512/kap08.html
Zuletzt bearbeitet von Kash am Mo 09.03.2009 11:47, insgesamt 1-mal bearbeitet
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
Formmailer-Problem-neues problem
CSS Problem (IE)
PS Problem
Problem mit Ton
Problem mit div
Css problem
|
|
Willkommen auf dem Portal für Mediengestalter
