mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Do 28.03.2024 15:21 Benutzername: Passwort: Auto-Login

Thema: Problem beim css Layout vom 13.10.2007


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> Problem beim css Layout
Seite: 1, 2  Weiter
Autor Nachricht
mop
Threadersteller

Dabei seit: 13.10.2007
Ort: -
Alter: -
Geschlecht: -
Verfasst Sa 13.10.2007 17:31
Titel

Problem beim css Layout

Antworten mit Zitat Zum Seitenanfang

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
  View user's profile Private Nachricht senden
Synoxis

Dabei seit: 07.09.2005
Ort: Roßdorf
Alter: 35
Geschlecht: Männlich
Verfasst Sa 13.10.2007 18:03
Titel

Antworten mit Zitat Zum Seitenanfang

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.
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Anzeige
Anzeige
orangensaft

Dabei seit: 20.04.2007
Ort: Hamburg
Alter: 33
Geschlecht: Männlich
Verfasst Sa 13.10.2007 18:23
Titel

Antworten mit Zitat Zum Seitenanfang

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...
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
mop
Threadersteller

Dabei seit: 13.10.2007
Ort: -
Alter: -
Geschlecht: -
Verfasst Sa 13.10.2007 19:20
Titel

Antworten mit Zitat Zum Seitenanfang

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
  View user's profile Private Nachricht senden
l3mon

Dabei seit: 26.07.2005
Ort: -5m
Alter: 58
Geschlecht: Männlich
Verfasst So 14.10.2007 13:25
Titel

Antworten mit Zitat Zum Seitenanfang

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 * Keine Ahnung... *
das body-tag ist noch offen, deine scripts hängen im body rum - so wird das nix - da is der ff nur gutmütig
  View user's profile Private Nachricht senden
mop
Threadersteller

Dabei seit: 13.10.2007
Ort: -
Alter: -
Geschlecht: -
Verfasst So 14.10.2007 14:02
Titel

Antworten mit Zitat Zum Seitenanfang

die ersten 2 zeilen kloppt mit lycos davor, sind normalerweise nicht dort

das mitm head war dann wohl nen tipfehler *hu hu huu*
der bodytag ist doch geschlossen Hä?

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
  View user's profile Private Nachricht senden
l3mon

Dabei seit: 26.07.2005
Ort: -5m
Alter: 58
Geschlecht: Männlich
Verfasst So 14.10.2007 15:16
Titel

Antworten mit Zitat Zum Seitenanfang

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
  View user's profile Private Nachricht senden
mop
Threadersteller

Dabei seit: 13.10.2007
Ort: -
Alter: -
Geschlecht: -
Verfasst So 14.10.2007 18:49
Titel

Antworten mit Zitat Zum Seitenanfang

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
  View user's profile Private Nachricht senden
 
Ä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
Neues Thema eröffnen   Neue Antwort erstellen Seite: 1, 2  Weiter
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.