Hab mich mal an div´s versucht!

gosiggi · 27.09.2010

AW: Hab mich mal an div´s versucht!

Servus,
irgendwie hast du an deiner Webseite nun soviel rumgeschraubt das du immer mehr Fehlermeldungen bekommst wenn man dein HTML an den W3C Validator schickt.
als erstes mal was zur Listen Formatierung für ein Menü...
Falsch

HTML:

<ul>
   <li><p><a href="http://seite.de">Seitenname</a></p></li>
</ul>

Die <p> tags zwischen <li>und</li> dürfen da nicht stehen.
Richtig

HTML:

<ul>
   <li><a href="http://Seite.de">Seitenname</a></li>
</ul>

Dann verstehe ich nicht so ganz was du meinst mit dem was ich dir als hinweis für deinen Footer geschickt habe.... denn Linien sind in deinem Footer keine zu sehen...
Jedoch ist mir aufgefallen das dein CSS auch erhebliche Fehler aufweißt du wurdest da jedoch auch schon drauf hingewiesen o ist kein gültiger Wert für margin angaben...
Falsch

Code:

margin:o 20px o 20px;

Richtig

Code:

margin:0 20px;

Und zum Thema Footer befasse dich mal ein wenig mit dem Thema Floats / Margin und Padding.... hier mal eine Seite die das ganz gut erklärt Cascading Style Sheets { Grundlegendes : display, position und float }

onpoint · 27.09.2010

AW: Hab mich mal an div´s versucht!

ach mist, da ich ja die gespeicherte Sicherung wieder benutzt habe sind die Fehler ja wieder da gewesen und ich hab nicht dran gedacht diese rausszunehmen!

werd ich sofort mal machen

ps: Die Linien sind im Layout selbst enthalten, also in der Bilddatei des Footers.

Spatzihasi · 27.09.2010

AW: Hab mich mal an div´s versucht!

also dafür das es wirklich erst deine anfänge sind hast du bei deiner seite absolut meinen geschmack getroffen. O.ô

und die sache mit dem 800x600. man sollte tatsächlich heute noch diese auflösung beachten, weils noch leute gibt die mit so einer grösse arbeiten.
ich halt mich zb an ein maß im gesamt container von width:800px; damit ein pc mit kleiner auflösung nich viel waagerecht scrollen muss.

onpoint · 27.09.2010

AW: Hab mich mal an div´s versucht!

Also es sind meine Anfänge was CSS angeht!

Habe früher alles noch mit Tabellen gemacht....

So! Alle Probleme hab ich jetzt geregelt bekommen! Der Validator zeigt mir an dass alles sauber ist

Trotzdem habe ich das mit dem Footer noch nicht so geordnet bekommen wie ich mir das wünsche...ich werd mir mal deinen Link anschauen

onpoint · 27.09.2010

AW: Hab mich mal an div´s versucht!

Noch ne Frage...

Sagen wir das ist jetzt meine Startseite (hab sie übrigens fertiggefüllt).

Ich möchte jetzt mit der Seite "About me" weitermachen...wie gehe ich weiter vor?

Ich habe mir gedacht ich passe die einzelnen Bildelemente einfach an..also hab ich das "HERZLICH WILLKOMMEN WÜNSCHT IHNEN BLABLA" umgeändert in "About Me" und dachte mir ich kann ja dann einfach bei der Seite Aboutme das Bildelement umtauschen..theoretisch gehts ja..aber gibts keinen anderen weg?

Da ich Templates erstellt hab kann ich die einzelnen verlinkungen auf die css befehle nicht mehr ändern und müsste dies dann auch neu machen -.-

Lg

-edit- ups, sorry für den Doppelpost!

-edit-

ich habs jetzt erstmal so geregelt dass ich einfach den Content verändere...doch es hat sich schon ein kleines Problem eingeschlichen...
Klickt mal auf "About me" und schaut euch den Button "Weitere Pics" an...den schneidet er mir irgendwie ab...das Bild an sich ist OK! Und die Seite endet unten auch noch nicht..deshalb versteh ichs nicht! habt ihr eine idee?

gosiggi · 28.09.2010

AW: Hab mich mal an div´s versucht!

so hab mich da mal da durchgeschaut und da is mir in deinem CSS was aufgefallen....

Code:

div.columnabout 
 { 	
    width:230px; 	
    float:left; 
   	margin: 0 20px 0 0;
    font-size:12px; 
   	left:0; 	
    padding:0 0; 
}

wenn du nur eine Breite für die Grafik vergibst, dann wird dir höhe vom Bild als reines Hintergrundbild abgeschnitten... wenn du pech hast, kommt immer drauf an wie der Webbrowser das interpretiert.

Und wieso hast denn da im Container für den Button ein Float:left vergeben?
Du müsstest dann spätestens eine Zeile drunter auch den Float wieder aufheben mit clear:left oder right oder halt mit clear:both was im idealfall immer die beste alternative ist.

und die Grafik selbst hat ne Breite von 290px und du selbst gibst im CSS nur eine Breite von 230px an...

Ein kleiner Tip am rande ...
Notier dir auf einem Zettel immer die einzelnen Angaben zu den Grafiken, oder mach dir ne Skizze das Design aussehen soll und notiere dir dort an den entsprechenden Stellen der Bilder immer direkt dessen größen.
Erspart einem viel Ärger hinterher Beim Design.
Im übrigen kann man deinem Design auch recht gut mit den relativen Positionen arbeiten....

onpoint · 28.09.2010

AW: Hab mich mal an div´s versucht!

gosiggi schrieb:
Im übrigen kann man deinem Design auch recht gut mit den relativen Positionen arbeiten....

Dass ich quasi den Content Bereich ne RELATIVE position gebe und von da aus setze ich auf meine Inhalte die ABSOLUTEN Positionen? Wie ichs oben beim Header gemacht hab?

Und ja, nach dem foat:left wird das ganze natürlich gecleart!

Habs jetzt hinbekommen mit dem Button! Ich habe im css h2 verweis die feste größe des Bildes eingetragen und jetzt wirds ganz angezeigt

und danke für den tipp, ist ne gute idee

Lona · 28.09.2010

AW: Hab mich mal an div´s versucht!

Könnte ich mal die Adresse dieses TUT's haben ?...mir gefällt es sehr gut und als Anfänger mit css *Hut ab*

LG Lona

onpoint · 28.09.2010

AW: Hab mich mal an div´s versucht!

Lona schrieb:
Könnte ich mal die Adresse dieses TUT's haben ?...mir gefällt es sehr gut und als Anfänger mit css *Hut ab*

LG Lona

Klar! Hier ist es:

Lg

Doitsu · 28.09.2010

AW: Hab mich mal an div´s versucht!

Tue ich auch mal meinen Senf dazu geben.

Erstmal grosses Lob an dich - wenn ich die Seite mit deiner Alten vergleiche.. Respekt.

Dann: die Breite der Klasse 'column' ist kleiner als die Breite der Klasse 'button*' - was im IE schwere Layout aenderungen zur Folge hat (Vermutung, habe bei mir zu Hause keinen IE.. Kenne das nur von der Arbeit).
Dann wuerde ich diesen 'noText' kram raus nehmen, fuege die Buttons lieber als Bild mit einem alternativen Text ein, spart Klassen & somit viel aenderungen, wenn du diese mal aenderst (& warum sind das h2-Tags?). Das wird sowieso nur gemacht, damit bei Text basierenden Browsern was zu sehen ist.. und die meisten zeigen dann halt den alt. Text an. Dazu wird deine Webseite in einem Text basierenden Browser sowieso nur kaum was zu sehen sein & dazu ziemlich unordentlich.

Die line-height ist immer noch zu klein, man sollte bei der line-height keine em-Wert benutzen, wenn man das nicht auch bei der font-size machst. Setze die line-height am besten auf 16 oder 18 Pixel.

Zum Footer:
Gib der Spalte in der Mitte am besten noch eine Klasse mit (oder besser eine ID), wo du die Breite etwas groesser machst und mit einem !important sagst, dass diese genommen werden soll.

@gosiggi:
Zettel? was das? -fg-
Die benutzte ich eig. nur wenn ich gerade unterwegs bin & mir gedanken ueber ein Projekt mache, aber wenn ich am PC bin - und wie der TE - gerade mit Photoshop arbeite, kann ich mir diese Notizen auch sparen, da das Layout da sowieso ist & es auch gute moeglichkeiten gibt, die Breiten exakt zu berechnen. & mit position wuerde ich auch nicht arbeiten, m.M.n. macht man sich dadurch erst recht Aerger (oder ich bin einfach zu unfaehig damit klar zu kommen), ich benutze da lieber ein paar divs mehr, die als Platzhalter dienen (leer & nur mit breiten/hoehen angaben).

P.S.: Die Links im footer mal ueberpruefen. :*

onpoint · 29.09.2010

AW: Hab mich mal an div´s versucht!

Doitsu schrieb:
Tue ich auch mal meinen Senf dazu geben.
Erstmal grosses Lob an dich - wenn ich die Seite mit deiner Alten vergleiche.. Respekt.

Dann: die Breite der Klasse 'column' ist kleiner als die Breite der Klasse 'button*' - was im IE schwere Layout aenderungen zur Folge hat (Vermutung, habe bei mir zu Hause keinen IE.. Kenne das nur von der Arbeit).
Dann wuerde ich diesen 'noText' kram raus nehmen, fuege die Buttons lieber als Bild mit einem alternativen Text ein, spart Klassen & somit viel aenderungen, wenn du diese mal aenderst (& warum sind das h2-Tags?). Das wird sowieso nur gemacht, damit bei Text basierenden Browsern was zu sehen ist.. und die meisten zeigen dann halt den alt. Text an. Dazu wird deine Webseite in einem Text basierenden Browser sowieso nur kaum was zu sehen sein & dazu ziemlich unordentlich.

Die line-height ist immer noch zu klein, man sollte bei der line-height keine em-Wert benutzen, wenn man das nicht auch bei der font-size machst. Setze die line-height am besten auf 16 oder 18 Pixel.

Zum Footer:
Gib der Spalte in der Mitte am besten noch eine Klasse mit (oder besser eine ID), wo du die Breite etwas groesser machst und mit einem !important sagst, dass diese genommen werden soll.

@gosiggi:
Zettel? was das? -fg-
Die benutzte ich eig. nur wenn ich gerade unterwegs bin & mir gedanken ueber ein Projekt mache, aber wenn ich am PC bin - und wie der TE - gerade mit Photoshop arbeite, kann ich mir diese Notizen auch sparen, da das Layout da sowieso ist & es auch gute moeglichkeiten gibt, die Breiten exakt zu berechnen. & mit position wuerde ich auch nicht arbeiten, m.M.n. macht man sich dadurch erst recht Aerger (oder ich bin einfach zu unfaehig damit klar zu kommen), ich benutze da lieber ein paar divs mehr, die als Platzhalter dienen (leer & nur mit breiten/hoehen angaben).

P.S.: Die Links im footer mal ueberpruefen. :*

Danke Doitsu! Viele Fehler sind mir garnicht aufgefallen die du da genannt hast, ich habe folgendes erstmal behoben:

- Die Breite der Klassen column und Button angepasst, jetzt stimmts wieder mit den Maßen der Elemente (war im IE in der Tat nicht korrekt!)

- Die line-height habe ich auf 15px hochgehauen

- Deinen Tipp bezüglich Footer umgesetzt, klappt super!

Jetzt ist er schön am oberen Text angeordnet.

die Sache mit den h2 Werten hab ich jetzt erstmal nicht geändert, weil ich erstmal die Sachen ändern will, die das Design im IE quasi zerspalten, danach kommen die dinge die sauberer wären, aber nicht unbedingt zwingend für den aufbau der seite geändert werden müssen.

mit dem em wert meinst du sicher in der body klasse das "font:62.5%/1.2em" ? Wenn ich das allerdings in nen pixel-wert schreibe, tut sich nix auf der seite..sehe keine veränderung..egal welchen pixelwert ich nehme..

außerdem zeigt der IE die schrift meines Footers viel größer an als im Firefox, was nicht unbedingt schön ist....was könnte das sein? Habe die neue css datei schonmal hochgeladen.

und jetzt das größte problem...wenn ich der column klasse dieselbe breite zuordne wie dem button, verschiebt sich der rechte inhalt nach unten...gibts dafür ne lösung? (siehe ABOUT ME auf der Seite)

hier mal wieder der link:

Daniele De Rosa

Doitsu · 29.09.2010

AW: Hab mich mal an div´s versucht!

bboydaniele schrieb:
mit dem em wert meinst du sicher in der body klasse das "font:62.5%/1.2em" ? Wenn ich das allerdings in nen pixel-wert schreibe, tut sich nix auf der seite..sehe keine veränderung..egal welchen pixelwert ich nehme..

Das liegt daran, dass du den Font-size Wert ueberall wieder ueberschreibst - was auch richtig so ist.

bboydaniele schrieb:
außerdem zeigt der IE die schrift meines Footers viel größer an als im Firefox, was nicht unbedingt schön ist....was könnte das sein? Habe die neue css datei schonmal hochgeladen.

Das liegt am IE selbst, der kann mit den 'em'-Werten nicht richtig umgehen, abhilfe soll hier (angeblich) ein height: 101% im Body schaffen - habe es aber nie probiert, da ich diese 'Relativen' angaben dazu neigen, in jedem Browser anders auszusehen.. Das hat man mit Pixeln nicht. Wobei diese angaben auch positiven Seite haben - z.B. um schnell die groessen der ganze Seite aendern zu koennen, ohne alles einzeln zu aendern.

bboydaniele schrieb:
und jetzt das größte problem...wenn ich der column klasse dieselbe breite zuordne wie dem button, verschiebt sich der rechte inhalt nach unten...gibts dafür ne lösung? (siehe ABOUT ME auf der Seite)

Breite vom Content: 961 Pixel.

Breite von 'columnbreit': 600 Pixel.
Breite von 'columnabout': 299 Pixel (2x)
Margin gesamt: 40 Pixel
~> 1238 Pixel, heisst: du hast 277 Pixel zu viel..

onpoint · 29.09.2010

AW: Hab mich mal an div´s versucht!

Doitsu schrieb:
Breite vom Content: 961 Pixel.

Breite von 'columnbreit': 600 Pixel.
Breite von 'columnabout': 299 Pixel (2x)
Margin gesamt: 40 Pixel
~> 1238 Pixel, heisst: du hast 277 Pixel zu viel..

Ja..ist soweit richtig, jedoch will ich ja, dass die 2 "columnabouts" untereinander stehen...dann muss die 299 ja nur einmal in die breite berechnet werden...

musste jetzt jedenfalls beim "columsnabout" bis auf 200px runtergehen bis es passte..jetzt sitzt es jedenfalls auf beiden browsern..IE und FIREFOX..obwohls mir seltsam vorkommt..weil:

mein gesamter content beträgt ne breite von 961px

600px hat links der columnbreit, insgesamt gibts nen margin von 40px, somit wärn wir bei 640..also kann ich die 640 doch theoretisch von der 691 abziehen und somit weiß ich dass mir noch 321 px zur verfügung stehen...warum verschiebt es sich dann nach unten wenn ich die 200px übersteige? versteh ich nicht...

Doitsu · 30.09.2010

AW: Hab mich mal an div´s versucht!

Kommt vom margin - die 2 columnabou haben kein Margin zwischen drin, columnbreit zu columnabout hat aber welchen ~> es wird da gebrochen.
Dein jetziges kannst du dir so vorstellen: (M = Margin)
|M| breit |M| about | about |
Und du scheinst dir zu denken, es wird in dieses geformt?

Code:

|  breit |  about |
|           | about  |

Dann ist bei 'columnabout' der float zu viel - muesstest du um diese 2 ein div packen, welches ein float bekommt, die 2 divs dann aber keins.. Dann sie sie neben 'columnbreit', aber untereinander.

onpoint · 30.09.2010

AW: Hab mich mal an div´s versucht!

Hmm irgendwie versteh ich den Punkt nicht ganz...

Columnabout habe ich doch bei beiden jeweils nen margin von 20 vergeben..

im Firefox wirds korrekt dargestellt, im Internet Explorer schiebt er die nach unten...genauso wie bei der index.html..dort schiebt ers auch nach unten..

Doitsu · 30.09.2010

AW: Hab mich mal an div´s versucht!

Na ja, der 2. 'columnabout' hatte ein noMargin mit als Klasse. Kann ich jetzt aber schwer sagen, da du es umgebaut hast.. aber so, wie es jetzt ist, ist es falsch.
Wie gesagt, nehme das float da raus, und mach ein div-container drumherum, der dann den float bekommt. Oder verstehe ich dich jetzt falsch?

patrick_l · 30.09.2010

AW: Hab mich mal an div´s versucht!

Ich möchte kurz an dieser Stelle erwähnen das es sinnvoll ist wenn du dich zunächst mehr in die einzelnen Sprachen einliest.
Also in diesem Fall HTML und CSS. Besonders auch das saubere und geordnete schreiben deiner Seite und dem StyleSheet.
Ich habe dazu mal einen netten Link bekommen.

CSS – Ordnung 1

Was die Probleme mit dem IE 6 und darunter angeht kann ich außerdem empfehlen,
das ganze über ein extra für den IE gedachte JavaScript zu beheben.
So wird durch das Script grob gesagt der IE gepimp und so fast alle Bugs (Fehler/Probleme) behoben.
Es kann natürlich auch ein extra CSS für den IE eingebunden werden.

Lg DerOtto

onpoint · 03.10.2010

AW: Hab mich mal an div´s versucht!

Soo, ich hab jetzt um die 2 "columsnabout´s" nen div drumgelegt mit dem float:left befehl..

also bei mir zeigt ers in beiden browsern richtig an..weiß jetzt halt nicht wies bei älteren IE Versionen ist..

hab außerdem mal bisschen weitergebastelt..jetzt kommts zur nächsten Frage!

Geht mal bitte auf den Punkt "Animation". Dort hab ich eine SWF dabei eingebunden..allerdings hätte ich gern, dass sie losgeht, wenn ich ihr das Zeichen dazu gebe, quasi nen PLAY Button oder so...ist das möglich?

Doitsu · 03.10.2010

AW: Hab mich mal an div´s versucht!

Scher, entweder halt mit einem Button im Flash selbst, wo du dann 'gotoAndPlay' benutzt, oder mit Javascript
~> Flash Interaction with JavaScript

Ach ja: Multiple IE, IE-Tester .. (Google) Zum aussehen der aelteren IE-Versionen.

patrick_l · 03.10.2010

AW: Hab mich mal an div´s versucht!

Doitsu schrieb:
Ach ja: Multiple IE, IE-Tester .. (Google) Zum aussehen der aelteren IE-Versionen.

Dafür kann ich auch die Seite Check Browser Compatibility, Cross Platform Browser Test - Browsershots empfehlen. Dort kannst du gleich alle erdenklichen Browser durch testen. Aber auch lokal auf deinem Pc ist es Möglich. Einmal wie von Doitsu vorgeschlagen mit dem IE-Tester. Du kannst aber auch ein virtuelles System erstellen mit z.B. Windows XP und dort den IE testen.