Autor |
Nachricht |
diekleinesabine
Threadersteller
Dabei seit: 14.02.2009
Ort: -
Alter: -
Geschlecht:
|
Verfasst Sa 14.02.2009 14:41
Titel probleme mit css |
|
|
hallo..
ich habe in der schule die aufgabe bekommen eine homepage zu bauen. unser lehrer meinte aber wir müssen sie selber programieren ohne verwendung von tabellen, da dies nicht mehr aktuell ist. wir sollten mit div´s und css arbeiten und er hat uns ein layout vorgegeben.
"erstelle eine homepage die mittig zentriert ist, eine breite von 800 pixeln, oben und unten einen abstand von 50 pixeln und eine dynamische länge hat. die homepage muss wie folgt aufgebaut sein:"
a) header (mit überschrift)
b) kleine zeile als abstand
c) logo
d) kleine zeile für abstand
e) navigation
f) ein bereich für bilder (300 pixel breit) und einen bereich für text (500 pixel breit)
g) eine fusszeile
h) einen platz für werbung (rechts neben der eigentlichen homepage mit 150x600 pixeln)
wir durften uns die homepage in der schule mit frontpage einmal optisch zusammenstellen und nun müssen wir diese umbauen mit div´s und css.
ich habe das auch fast geschafft, denke ich, nur habe ich ein kleines problem. der lehrer sagte ja die seitenlänge muss dynamisch sein, also wenn der inhaltstext sehr lang ist. muss man rechts runterscrollen können. das klappt bei mir noch nicht so ganz, denn wenn der text lang wird, überschreibt er einfach die fusszeile
und mein 2. problem ist das ich die seite nicht mittig bekomme.
ich habe schon viele seiten und foren im netz besucht und geschaut nach befehlen etc. aber irgendwie komme ich nicht ans ziel. hier mal mein code und 2 links.
Code: |
<html>
<head>
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Header</title>
<style type="text/css">
body { text-align: center; overflow: auto; }
#container {width: 1000px; height: 100%; position: relative; margin-top: 50px; margin-bottom: 50px; }
#page {width: 800px; height: 100%; border: solid 1px; position: absolute; top: 0px; }
#header {width: 100%; height: 30px; position: absolute; top: 0px; background: green; }
#abstand {width: 100%; height: 5px; position: absolute; top: 30px; background: yellow; }
#logo {width: 100%; height: 180px; position: absolute; top: 35px; background: pink; }
#abstand2 {width: 100%; height: 5px; position: absolute; top: 215px; background: yellow; }
#navi {width: 100%; height: 30px; position: absolute; top: 220px; background: blue; }
#main {width: 100%; height: 100%; background: black; }
#bilder {width: 300; position: absolute; top: 250px; left: 0px; background: yellow; }
#text {width: 500; position: absolute; top: 250px; left: 300px; background: white; }
#fuss {width: 100%; height: 30px; background: pink; }
#werbung {width: 150; height: 600px; position: absolute; top: 100px; left: 850px; background: blue; }
</style>
</head>
<body>
<div id="container">
<div id="page">
<div id="header">Header</div>
<div id="abstand"></div>
<div id="logo">Logo</div>
<div id="abstand2"></div>
<div id="navi">navi navi 2 navi 3 navi 4
</div>
<div id="main">
<div id="bilder">Bilder</div>
<div id="text">text</div>
</div>
<div id="fuss">fuss</div>
<div id="werbung">werbung</div>
</div>
</body>
</html>
|
http://www.links4all.at/test/index2.htm
http://www.links4all.at/test/index3.htm
ich hoffe das mir hier vielleicht jemand helfen kann... ich finde den fehler nicht
mfg Die kleine Sabine
|
|
|
|
|
willshedo
Dabei seit: 21.12.2005
Ort: Waldshut
Alter: 51
Geschlecht: -
|
Verfasst Fr 13.03.2009 13:18
Titel
|
|
|
Hi,
wenn du mittig platzieren willst, solltest du deinem #container ein
margin-left:auto;
margin-right:auto;
hinzufügen.
Und ein schließendes div fehlt dem #container auch.
Für das Problem mit der nicht mitwachsenden Fußzeile würde ich dir eher eine solche Lösung zum Nachbasteln empfehlen:
[url]http://www.aspnetzone.de/blogs/peterbucher/archive/2008/09/03/faux-columns-unechte-spalten-oder-wie-werden-zwei-divs-gleich-hoch.aspx[/url]
Stichwort: 'faux columns'
Viel Erfolg!
(FrontPage ist meist nicht sehr hilfreich in diesen Sachen, müßt ihr den verwenden in der Schule? Wenn schon Editor, dann besser Dreamweaver...)
|
|
|
|
|
Anzeige
|
|
|
m
Moderator
Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht:
|
Verfasst Fr 13.03.2009 15:14
Titel
|
|
|
Verschoben aus dem Offtopic nach Allgemeines Non-Print.
|
|
|
|
|
l3mon
Dabei seit: 26.07.2005
Ort: -5m
Alter: 58
Geschlecht:
|
Verfasst Fr 13.03.2009 19:36
Titel
|
|
|
ok, wenn du die suche bemüht hättest, wärst du sicher drüber gestolpert - aber bitte - schau dir mal den quellcode dieser site an - was die zentrierung angeht
was das scrollen angeht, solltest dich mal mit overflow:auto;, overflow-x: und overflow-y: beschäftigen
|
|
|
|
|
|
|
|
Ähnliche Themen |
CSS Probleme IE VS FF
Probleme mit dem IE
CSS Probleme
Probleme mit IE
Probleme im IE
Probleme mit PDF
|
|