Ein paar anstrengende CSS Positionierungsfragen
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
beispiel
code
display
element
frage
http
leiste
liste
mache
maus
nehmen
paar
position
problem
span
tabelle
test
unteren rand
unterpunkte
url
-
Hallo,
ich hätte da ein paar CSS Fragen zum Thema Positionierung, die ich gerade nicht gelöst bekomme.
1. Ich habe ein <span> Element (oder <div>), mit dem ich ein Navigationsmenü aufbauen will. Also ganz normal so, dass wenn man mit der Maus über das <div> Element fährt, unter diesem Element eine Liste aufklappt und dort weitere Links sichtbar werden. Das ganze ist also eine ausklappbare Liste. Kennt jeder, wird überall eingesetzt.
#Link #hidden { display:none; } #Link:hover #hidden { display:block; }
und:
<span id="Link"> <a href="index.php?s=news">News</a> <a href="index.php?s=test" id="hidden">Test</a> <a href="index.php?s=test" id="hidden">Test</a> </span>
So und nun? Wenn ich mit der Maus über News fahre, kommen die beiden Test-Links auch wie vorgesehen, aber nicht an der richtigen Stelle! Sie erscheinen nämlich rechts neben dem "News" Link. Ich habe versucht mit position:absolute; das ganze zu positionieren, aber hat nicht hingehauen ... Wie kann ich es so hinkriegen, dass das die einzelnen Links UNTER dem News Link aufklappen? Mit welchen position-CSS Werten geht das bitte?
2. Ich habe eine #Foot Leiste (wieder ein <div> Element), die ganz am unteren Rand solche Sachen wie Impressum, etc. beinhalten soll. Das einzige Problem jetzt ist, dass ich die Leiste nicht ganz an den unteren Rand bekomme. Ich hab es mit margin-bottom:0px; versucht und mit margin-top:100%; aber es geht nichts. Ich will doch einfach nur, dass die Leiste, also das <div> Element, am unteren Bildschirmrand ist. Wie mache ich das nun?
3. Bei font Formatierungen mit CSS hab ich so meine Probleme. Wenn ich font-family:Verdana benutze, bleibt das ganze auf der Standardschrift (benutze aktuelles Chrome), wenn ich font-size:20px; setze, passiert auch nichts. Was muss ich hier machne?
Vielen Dank für eure Hilfe! :) -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
1.)
midwar schrieb:
Dann versuche doch einmal die Liste als eine richtige Liste aufzubauen, d.h. mit <ul> und <li>, damit sollte die Formatierung und Positionierung kein Problem darstellen. Ich habe dazu auch schon Tutorials im Internet gesehen, musst einfach mal nach "CSS Aufklappmenü" oder so googlen.
Also ganz normal so, dass wenn man mit der Maus über das <div> Element fährt, unter diesem Element eine Liste aufklappt und dort weitere Links sichtbar werden. Das ganze ist also eine ausklappbare Liste.
2.) versuch es mal mit:bottom: 0;
3.) hast du font-family für die ganze Seite gesetzt? Ich mache das ganze z.B. immer so im CSS:
und das funktioniert einwandfrei in allen Browsern...body { font-family: Tahoma, Verdana, Helvetica, Arial, sans-serif; font-size: 13px; }
Beitrag zuletzt geändert: 1.2.2012 8:02:37 von alfr3d -
Ich würde das spontan mal so machen:
<div id="myDIV"> <a href="#">auswahlbutton<span>Text der beim Klick angezeigt werden soll...</span></a> <a href="#">liste<span>Text der beim Klick angezeigt werden soll...</span></a> <a href="#">karte<span>Text der beim Klick angezeigt werden soll...</span></a> </div>
und
#myDIV a span { display: none; } #myDIV a:focus span, #myDIV a:focus span { display: block; position: absolute; left:?px; top: ?px; }
Wenn nicht im Content eine Tabelle von Nöten ist, rate ich dir dringend davon ab, in gestalterischer Hinsicht eine Tabelle zu nehmen. Diese Art des Layouts ist zum Glück veraltet und darauf solltest du auch nicht mehr bauen
Beitrag zuletzt geändert: 1.2.2012 9:27:46 von flockhaus -
midwar schrieb:
ich fand die seiten sehr oft sehr hilfsreich:
ich hätte da ein paar CSS Fragen zum Thema <welche auch immer> ...
maxdesign.com.au (wird im netz oft zitiert)
w3schools.com
barelyfitz.com (beispiele, speziell für positionierung).
und von ratschlägen wie tabledesign würde ich sicher abstand nehmen. dazu nur eine seite mit argumenten: chromaticsites.com
Beitrag zuletzt geändert: 1.2.2012 9:10:50 von hemiolos -
midwar schrieb:
Hallo,
ich hätte da ein paar CSS Fragen zum Thema Positionierung, die ich gerade nicht gelöst bekomme.
1. ....Das ganze ist also eine ausklappbare Liste. .....
Warum benutzt du dann keine Liste? ...
Davon mal abgesehen,könnte das dir weiterhelfen - Guckst du: http://www.ohne-css.gehts-gar.net/0066.php
zu 2: google mal nach Sticky Footer
zu 3: wenn du die font-family im body angibst sollte es doch funktionieren???
wie und wo im CSS setzt du denn die Font Anweisungen? Etwas Qelltext wäre hier evtl. hilfreich.
-
Zu 1.
Du solltest Dir einmal diese Seite dazu anschauen...
Zu 2.
Hast Du margin und padding der Seite auf 0 gesetzt?
html, body { margin: 0; padding: 0; }
Zu 3.
Lege den Font für alle Elemente fest...
* { font-family: ....; }
Beitrag zuletzt geändert: 2.2.2012 0:08:31 von staymyfriend -
2.) body{ margin-bottom: 0} schon probiert? Für mich klingt deine Aussage wie #Foot{margin-bottom:0}
-
Hallo,
vielen Dank für eure Antworten - Problem 2 und 3 sind gelöst (bei 3 hab ich mich einfach nur vertippt und aus eigener Blödheit nichts gemerkt. ;))
Bei Problem Nummer Eins mit dem Ausklappmenü, gibt es nun immer noch eine Sache, die nicht klappen möchte. Ich habe es jetzt zwar hinbekommen eine Menüleiste (diesmal aus <ul><li> etc.) zu basteln, bei denen die Unterpunkte dann auch entsprechend aufklappen, allerdings verschiebt sich der Content der Website dann ebenfalls nach unten.
Beispiel: Ich fahre mit der Maus über den Menüpunkt "News", wo sich 2 Unterlinks befinden, die nun aufklappen, dann verschiebt sich der gesamte Content der Website dadrunter um 40px nach unten, weil die beiden Unterlinks, die aufklappen, genau 40px hoch sind. Wie kann ich das aber nur einstellen, dass das ganze ÜBER den Content geschoben wird? Ich habe in den Tutorials was von clear:both; gelesen und versucht, aber nicht hinbekommen. Jemand ne Idee?
Vielen Dank. :) -
Die Listen, die die Unterpunkte beinhalten müssen absolut formatiert werden.
Hier noch einmal ein Beispiel: http://bit.ly/zuLKPU -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
