Navi Bilder, postion von div's

[Niklas]

Hey,

ich studiere seit dem Semester Medieninformatik. Jetzt haben wir die Aufgabe eine kleine Homepage zu basteln. Bis jetzt hab ich immer mit Tabellen gearbeitet. Doch der Prof will das wir das alles in div's machen.

Jetzt zu meinen kleinen Fragen:

Hier schon mal der Link: http://dii.fh-friedberg.de/mg/stud/werr_n/

und zwar mein erstes Problem sind die Link Bilder Und zwar hätte ich gerne das das Komplette Bild der Link ist. Ich hab das bis jetzt nach Richtlinien gemacht. Deswegen wäre das schön wenn das auch ungfair so bleiben könnte. Wir sollen das machen mit background verschieden usw.

Meine zweite Frage ist ein bissen Komplizierter. Und zwar geht es darum das ich jetzt fast alle div's mit position:absolut; gemacht habe. Doch wenn man jetzt das Fenster kleiner macht sieht das sowas von scheiße aus das verückt alles ! So dann wollt ich das alles zentrieren also postion:relativ;. DOch leider bekomm ich keine div's nebereinander im relative mode. Kann mir da einer helfen wie ich das hin bekommen könnte.

Hilfe wäre echt der Hammer

mfg Niklas

[suit]

Hey,

ich studiere seit dem Semester Medieninformatik. Jetzt haben wir die Aufgabe eine kleine Homepage zu basteln. Bis jetzt hab ich immer mit Tabellen gearbeitet. Doch der Prof will das wir das alles in div's machen.

"alles mit divs machen" ist ein fehler

alles mit vernünftigen markup zu machen keiner

dein div mit der id "titel" wäre zb vernünftigerweise als h1-element auszuzeichnen

und zwar mein erstes Problem sind die Link Bilder Und zwar hätte ich gerne das das Komplette Bild der Link ist. Ich hab das bis jetzt nach Richtlinien gemacht. Deswegen wäre das schön wenn das auch ungfair so bleiben könnte. Wir sollen das machen mit background verschieden usw.

du meinst der link mit "ich"? "padding" ist die gesuchte css-eigenschaft

Meine zweite Frage ist ein bissen Komplizierter. Und zwar geht es darum das ich jetzt fast alle div's mit position:absolut; gemacht habe. Doch wenn man jetzt das Fenster kleiner macht sieht das sowas von scheiße aus das verückt alles ! So dann wollt ich das alles zentrieren also postion:relativ;.

position: relative zentriert nicht, relative positionierung positioniert relativ - zur zentrierung von inline-elementen ist text-align: center geeignet, zur zentrierung von block-elementen die margin-eigenschaft mit dem wert auto

DOch leider bekomm ich keine div's nebereinander im relative mode. Kann mir da einer helfen wie ich das hin bekommen könnte.

kannst du ggf begreiflich machen, wie das ganze überhaupt aussehen soll?

wie schon erwähnt: layouten mit css ist nur mit vernünftigem html möglich ;)

[Niklas]

Hey Danke für deine Atnwort.

Wenn ich das richtig verstanden hab ich markup der Mix aus HTML (XHTML) und CSS? Oder wie ?

Klar können wir auch was im HTML schreiben. Nur sollen wie möglichst global und zwar im CSS formatieren. steht h1 nicht für die Überschrift ? also TEXT ?

Ja ich hab da ja Padding drin damit der Text auch in der MItte vom Bild steht! Mir geht es darum das ich auch mit der Maus auf das Bild klicken kann damit der Link kommt und nicht nur auf dem Text.

Ja es soll so aussehen wie es jetzt aussieht nur wenn ich jetzt das Fenster zusammen schiebe verrutscht alles ! Und das passiert wegen dem postion:absolute; jetzt wollte ich postion:realtive; benutzten doch dann bekomm ich keine 2 div Boxen neben einander die ruten immer in die nächste Zeile ! Das ist die Frage wie bekomm ich die neber einander !

Hier nochmal der Link zum CSS :

http://dii.fh-friedberg.de/mg/stud/werr_n/css/style.css

Ja dann versuchen wir das mal hin zubekommen mit ordentlichem HTML und CSS ! ^^

mfg Niklas

[ChrisB]

Hi,

Wenn ich das richtig verstanden hab ich markup der Mix aus HTML (XHTML) und CSS? Oder wie ?

Damit du es richtig verstehst, noch mal:

Zuerst zeichnest du deine Inhalte in HTML aus - mit *sinnvollem* HTML.
Anschliessend, *erst* anschliessend, wird dieses mittels CSS wie gewuenscht formatiert.

Klar können wir auch was im HTML schreiben. Nur sollen wie möglichst global und zwar im CSS formatieren. steht h1 nicht für die Überschrift ? also TEXT ?

Ja - und?
Ein vernuenftig strukturiertes Dokument wird ja wohl auch eine Ueberschrift haben - eine, die auch lesbar ist, wenn der Browser des Nutzers bspw. keine Bilder anzeigen kann. Also willst du eine solche in dein Dokument einfuegen.

Wenn du damit fertig bist, moechtest du dich vielleicht ueber das Stichwort Image Replacement informieren - falls du das ganze fuer die Nutzer, deren Browser Bilder anzeigen koennen, etwas "aufhuebschen" willst.

Ja ich hab da ja Padding drin damit der Text auch in der MItte vom Bild steht! Mir geht es darum das ich auch mit der Maus auf das Bild klicken kann damit der Link kommt und nicht nur auf dem Text.

Wenn du ein Bild verlinken wolltest, wuerdest du es in einen Link packen.

Ja es soll so aussehen wie es jetzt aussieht nur wenn ich jetzt das Fenster zusammen schiebe verrutscht alles ! Und das passiert wegen dem postion:absolute;

Sicher. Dass gerade Anfaenger die Finger von position:absolute lassen sollten, so lange sie dessen Auswirkungen noch nicht abschaetzen koennen, sagen wir hier ja immer wieder.

jetzt wollte ich postion:realtive; benutzten doch dann bekomm ich keine 2 div Boxen neben einander die ruten immer in die nächste Zeile ! Das ist die Frage wie bekomm ich die neber einander !

Informiere dich ueber die CSS-Eigenschaft float.
Und hoere bitte auf zu Plenken.

MfG ChrisB