Autor |
Nachricht |
mop
Threadersteller
Dabei seit: 13.10.2007
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Sa 13.10.2007 17:31
Titel Problem beim css Layout |
|
|
Hallo,
ich habe eine kleine Seite mit div tables gebaut.
Mit Firefox wird auch alles korrekt angezeigt.
Wenn ich die Seite allerdings mit dem IE anschaue paßt sogut wie garnichts mehr.
Kein table wird mehr korrekt bis zum bildschirmrand "gestreckt". Die schriftausrichtung, farbe paßt nicht, usw
Wie bekomme ich es hin, daß auch im IE alles da sitzt wo es soll.
Aufbau der Seite:
- oben eine zeile die eine feste höhe hat und sich in der breite dem fenster anpaßt
- links, unter "oben" eine spalte die eine feste breite hat und sich bei der höhe an das fenster anpaßt
- links unten der inhalt der sich in breite und höhe an das fenster anpaßt
Anbei der Quellcode
layout.css
body
{
background-color:white;
}
#oben
{
position:absolute;
top:0px;
left:0px;
bottom:0px;
right:0px;
height:230px;
background-image:url(grafiken/hintergrund_oben.jpg);
}
#menue
{
position:absolute;
top:227px;
left:0px;
bottom:0px;
padding:20px;
width:200px;
background-image:url(grafiken/hintergrund_menue.jpg);
}
#inhalt
{
position:absolute;
top:227px;
left:200px;
bottom:0px;
right:0px;
padding:20px;
background-color:white;
}
.ueberschrift
{
color:grey;
font-weight:bold;
text-align:center;
vertical-align:middle;
font-size:40pt;
}
index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN">
<html>
<head>
<title>
titel
</title>
<link rel="stylesheet" type="text/css" href="layout.css" />
<head>
<body>
<div id="oben">
<img src="grafiken/firmenlogo-klein.jpg" alt="Firmenlogo" align="left" />
<p class="ueberschrift">überschrift</p>
</div>
<div id="menue">
<a href="unternehmen.html">Unternehmen</a>
<br />
<br />
<a href="produkte.html">Produkte</a>
<br />
<br />
<a href="rezepte.html">Rezepte</a>
<br />
<br />
<a href="kontakt.php">Kontakt</a>
</div>
<div id="inhalt">
<img src="grafiken/hintergrund_index.jpg" />
</div>
</body>
Danke schonmal
Zuletzt bearbeitet von mop am Sa 13.10.2007 17:40, insgesamt 1-mal bearbeitet
|
|
|
|
|
Synoxis
Dabei seit: 07.09.2005
Ort: Roßdorf
Alter: 35
Geschlecht:
|
Verfasst Sa 13.10.2007 18:03
Titel
|
|
|
Wieso positionierst du alles absolut? Irgendwelche Gründe dafür?
Mach mal eine Online-Demo mit deinem Code. Da du ja Grafiken verwendet hast, bei fast allen Elementen. Dann kann man dir auch besser helfen.
|
|
|
|
|
Anzeige
|
|
|
orangensaft
Dabei seit: 20.04.2007
Ort: Hamburg
Alter: 33
Geschlecht:
|
Verfasst Sa 13.10.2007 18:23
Titel
|
|
|
Für den oberen Streifen musst du folgenden Code im Stylesheet schreiben:
Code: |
body {
background-color:white;
width:100%;
margin:0px;
padding:0px;
}
#oben {
height:230px;
background-image:url(grafiken/hintergrund_oben.jpg);
width:100%;
}
|
Komischerweise funktioniert das Ganze aber nur, wenn du das hier aus dem HTML-Code entfernst:
Code: | <img src="grafiken/firmenlogo-klein.jpg" alt="Firmenlogo" align="left" />
<p class="ueberschrift">überschrift</p> |
Das Stückchen musst du dann wohl in einem div-Container ablegen, der genau über dem oberen Streifen draufliegt...
|
|
|
|
|
mop
Threadersteller
Dabei seit: 13.10.2007
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Sa 13.10.2007 19:20
Titel
|
|
|
hab noch nicht wirklich viel mit css gemacht, und nach paar tests sah es im firefox mit absolute am besten aus :/
beispiel
allerdings drück die olle lycos werbung das ganze obere nach unten, weswegen die obere zeile nicht 100% paßt
Zuletzt bearbeitet von mop am Sa 13.10.2007 19:21, insgesamt 1-mal bearbeitet
|
|
|
|
|
l3mon
Dabei seit: 26.07.2005
Ort: -5m
Alter: 58
Geschlecht:
|
Verfasst So 14.10.2007 13:25
Titel
|
|
|
räum erst mal deinen code auf - heisser tipp
z.b.:
Code: |
<head>
<title>
titel
</title>
<link rel="stylesheet" type="text/css" href="layout.css" />
<head> |
sollte wohl eher
Code: |
<head>
<title>
titel
</title>
<link rel="stylesheet" type="text/css" href="layout.css" />
</head>
|
heißen, oder?
dann hast du ein div VOR dem head-tag
das body-tag ist noch offen, deine scripts hängen im body rum - so wird das nix - da is der ff nur gutmütig
|
|
|
|
|
mop
Threadersteller
Dabei seit: 13.10.2007
Ort: -
Alter: -
Geschlecht: -
|
Verfasst So 14.10.2007 14:02
Titel
|
|
|
die ersten 2 zeilen kloppt mit lycos davor, sind normalerweise nicht dort
das mitm head war dann wohl nen tipfehler
der bodytag ist doch geschlossen
kanns evtl auch daran liegen, daß meine erste zeile nicht korrekt ist?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN">
hab das nur von ner uralt seite übernommen
|
|
|
|
|
l3mon
Dabei seit: 26.07.2005
Ort: -5m
Alter: 58
Geschlecht:
|
Verfasst So 14.10.2007 15:16
Titel
|
|
|
ok - sorry den geschlossenen body-tag hab ich vor lauter javas überlesen
habs mal duch den validator gejagt
validator
vlt hilfts dir
Zuletzt bearbeitet von l3mon am So 14.10.2007 15:21, insgesamt 1-mal bearbeitet
|
|
|
|
|
mop
Threadersteller
Dabei seit: 13.10.2007
Ort: -
Alter: -
Geschlecht: -
|
Verfasst So 14.10.2007 18:49
Titel
|
|
|
danke werds ma durchgehen
gibts nicht auch nen umsonst webspace der einem nicht werbung dazwischenklatscht?
danke
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
sieht es im ie nun jedenfalls so aus wie es soll, nur das strecken der einizgen div tables bis zum fensterrand klappt immer noch nicht :/
Zuletzt bearbeitet von mop am So 14.10.2007 19:01, insgesamt 1-mal bearbeitet
|
|
|
|
|
|
|
|
Ähnliche Themen |
layout problem
Hab da ein Problem - Layout
css layout problem
Problem bei CSS-Layout
CSS - Layout height Problem
problem mit 3 spalten css-layout
|
|