css schwierigkeiten
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
absolute display
anpassen
blocken
code
container
dateiname
design
dritten punkt
eigenschaft
feld
http
inhalt
layout
position
positionieren
problem
punkt
tun
url
zeile
-
Hallo!
Ich habe ein paar Schwierigkeiten mit den Designs auf meiner Homepage.
Vielleicht weiß ja jemand von euch, wie ich das ändern kann
1. Der Footer soll unter das weiße content-feld, aber ich weiß nicht wie ich ihn positionieren soll
http://www.change-design.de/?dateiname=a
http://www.change-design.de/a.css
ausserdem frage ich mich, wie ich es anstelle, dass man bei hover im menü das ganze feld als link hat.
es sollte dann auch schwarz bleiben, also türkise schrift mit schwarzem feld bei .active
3. Das weiße Feld unter dem Menüpunkt "gästebuch" ist verrutscht und ich weiß nicht warum
http://www.change-design.de/?dateiname=h
http://www.change-design.de/h.css
Danke schonmal
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Den Footer unter dem Content zu positionieren ist bei deiner Anordnung schier unmöglich. Das kommt davon, wenn man alle Elemente absolut positioniert.
Entweder du schreibst deinen CSS um, damit du nichts absolut positionierst, oder du verlagerst deinen `#footer` ins `#content`.
Beitrag zuletzt geändert: 14.11.2010 21:51:21 von ryanblack -
1. Was du willst, scheint das klassische 3-Zeilen-Layout Problem zu sein. Der Fehler dabei liegt in der Konstruktionsweise.
Wobei der Stylesheet lauten muss:<div id="top"> </div> <div id="content"> </div> <div id="bottom"> </div>#top{ position:absolute; display: block; height:100px; } #bottom{ position:absolute; display:block; height:100px; bottom:0px; } #content{ height:100%; margin-top:100px; margin-bottom:100px; }
So zumindest in meiner Erinnerung. 3-Zeilen-Layouts sind eigentlich sehr Pfui. Ich will allerdings einräumen, dass margin gegen padding getauscht sein könnte, oder so. Das umfassende Element muss selbstverständlich positioniert sein.
Ich fragte mich gerade, warum auf 1. das 3. folgte, aber ich habe glaube ich den Punkt 2 gefunden.
2. Ein einfaches display:block; auf den Anker-Bereich sollte da aushelfen.
Den dritten Punkt kann ich gerade nicht nachvollziehen. -
geekgirl schrieb:
...
Den dritten Punkt kann ich gerade nicht nachvollziehen.
Ich glaub ich weiß was sessin meint. Wenn man auf einen Menüpunkt klickt, erscheint ja im "Content" so ein leicht transparenter weißer Block, in dem der Inhalt steht. Wenn man allerdings auf Gästebuch klickt, dann beginnt dieser weiße Block nicht am oberen Rand sondern hat oben etwas Freiraum. Meiner Meinung nach sieht das evtl nach einem Padding oder so aus, find mich aber in dem Code kaum zurecht, vielleicht bist du da ja erfolgreicher.
Eine kleine Anmerkungen zur Seite noch:
- Bei sehr kleiner Auflösung, in meinem Fall 1024x600(was nicht unüblich bei Netbooks ist) kann man den Punkt "Kontakt" im Menü kaum noch sehen. Falls darunter noch ein Punkt kommen sollte, bleibt der mir gerade vollkommen unsichtbar, da sich das Menü nicht scrollen lässt und es aber gleichzeitig zu hoch für die Auflösung ist. -
So wie geekgirl das beschrieben hat, geht natürlich auch. Bloß ist dann der Footer sozusagen immer ganz unten.
Wenn die Höhe von `#content` nun kleiner ist wie die Höhe des Browser-Viewports, wird der Footer auch ganz unten positioniert, und nicht, wie man es vll erwarten würde, direkt unter `#content`.
donmanfredo schrieb: ...das Problem mit dem footer verstehe ich nicht ganz. Wenn du den Container absolut positionierst kannst du ihn doch mit left und top genau da hinschieben wo du ihn haben willst.
Ja schon, aber die Position ist immer absolut, und nicht mehr relativ. Das heißt, wenn die Höhe von `#content` sich ändert (muss sie ja tun, wenn sich der Inhalt ändert), musst du die `top` Eigenschaft von `#footer` anpassen. So ein Konstrukt ist überhaupt nicht flexibel.
Beitrag zuletzt geändert: 16.11.2010 11:59:32 von ryanblack -
ryanblack schrieb:
.... Das heißt, wenn die Höhe von `#content` sich ändert (muss sie ja tun, wenn sich der Inhalt ändert), musst du die `top` Eigenschaft von `#footer` anpassen....
Wenn ich das richtig sehe dann bleibt die Höhe der Seite immer gleich, und der Inhalt wird scrollbar. Von daher wäre es ja eine Möglichkeit den Footer absolut zu positionieren...
//edit: irgendwie wurde die Seite verändert im Gegensatz zu heute morgen, deswegen weiß ich nicht ob es jetzt noch möglich ist den Footer absolut zu positionieren
Beitrag zuletzt geändert: 16.11.2010 12:07:13 von alfr3d -
...vielleicht hilft dir folgendes weiter um dein footer-problem zu lösen: ziehe doch einfach einen Container als "Rahmen" um dein Textfeld, gib die Höhe des footers dazu und setz die Border auf "0". Den Footer positionierst du absolut mit bottom:0px, so steht der Footer immer unten, egal wie hoch das Feld ist. Funzt allerdings nur, wenn der Rahmen auch absolut pos. ist! Zur Veranschaulichung:
<html>
<head>
<title>footer</title>
<style type="text/css">
#rahmen
{
position:absolute;
top:0px;
left:0px;
width:800px;
height:600px;
border:1px solid black;
}
#footer
{
width:800px;
height:30px;
border:1px solid black;
position:absolute;
bottom:0px;
}
</style>
</head>
<body>
<div id="rahmen">
<div id="footer">
footer
</div>
</div>
</body>
</html> -
Vielen dank für eure Tipps!
ich habe jetzt weniger absolut positioniert, es funktioniert soweit.
bleibt nur noch die frage mit dem verrutschten Gästebuch auf dem h-design... auf dem a ist das beim
gästebuch auch verrutscht. irgendwo ist da der wurm drin, mal schauen ^^
Grüße, sessin -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
