kostenloser Webspace werbefrei: lima-city


css schwierigkeiten

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    sessin

    Kostenloser Webspace von sessin

    sessin hat kostenlosen Webspace.

    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 :smile:

  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. t********g

    1: Das geht mit zB margin-left

    Mit den Links geht mit a:visited
  4. 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
  5. ...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.
    Ist übrigens eine sehr schöne Seite...
  6. 1. Was du willst, scheint das klassische 3-Zeilen-Layout Problem zu sein. Der Fehler dabei liegt in der Konstruktionsweise.
    <div id="top">
    </div>
    <div id="content">
    </div>
    <div id="bottom">
    </div>
    Wobei der Stylesheet lauten muss:
    #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.
  7. 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.
  8. 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
  9. 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 :biggrin:

    Beitrag zuletzt geändert: 16.11.2010 12:07:13 von alfr3d
  10. ...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>
  11. Autor dieses Themas

    sessin

    Kostenloser Webspace von sessin

    sessin hat kostenlosen Webspace.

    Vielen dank für eure Tipps! :smile:

    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
  12. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!