Hab mich mal an div´s versucht!

onpoint · 25.09.2010

So, ich hab jetzt den ersten Schritt getan komplett mit CSS und divs zu arbeiten....(dank einer eurer workshops!

)

Komme mit der Sache recht gut klar! Habe mir nen Workshop angeschaut, ne ähnliche Seite gebaut und dann via html/css und dreamweaver gecodet!

So schaut sie aus:

Bitte kostenlos registrieren, damit du die Links siehst.

Die Inhalte sind natürlich noch nicht vollständig gefüllt bzw mit Blindtext.

Hätte da noch einige kleine Probleme:

Undzwar vor allem der Footer...ich benutze den selben "column" befehl wie bei den texten obendrüber, jedoch berechnet er mir trotzdem andere abstände...kann ich das irgendwie beheben? sieht so nicht so schön geordnet aus..

Zweiter Punkt: Wurde der Banner richtig repeatet / gekachelt? Habe das Gefühl ich sehe da ne leichte harte Kante..kann mich aber irren

Das wärs sogar erstmal..alles andere hat ziemlich gut geklappt!

Lg

sokie · 25.09.2010

AW: Hab mich mal an div´s versucht!

am besten du fixt erstmal deine Probleme im html und css

zB sind im Footer <li> Element ohne umsachliessende liste (<ul>)

dann benutzt du Buchstaben ("o") für massangaben (margin: 0 15px o o

also einfach mal beides(html und css) validieren.

wenn die Liste im Footer dann eine Liste ist, kannst du die auch entsprechend positionieren und evtl die punkte vor den listenpunkten (list-style:none) herausnehmen - dann sieht das gleich anders aus. die color der Einträge im footer ist ungünstig (lesbarkeit).

wenn du mit entsprechenden einrückungen im Code arbeitest, wird das ganze auch in der Codeansicht besser lesbar

onpoint · 25.09.2010

AW: Hab mich mal an div´s versucht!

sokie schrieb:
dann benutzt du Buchstaben ("o") für massangaben (margin: 0 15px o o

Ups..ich schäme mich gerade..:lol::lol:

Hab deine Punkte mal korrigiert!

Außerdem hab ich für jeden Footerpunkt ne eigene div angelegt um sie letzendlich einzeln zu positionieren..mit dem dritten Footerpunkt gibts allerdings Probleme..das lässt sich, warum auch immer, einfach nicht weiter nach rechts rücken..

pinkflo · 25.09.2010

AW: Hab mich mal an div´s versucht!

Hallo,
auf welche Browser Fenster Größe hast du deine Seite den schon mal getestet. Wenn ich das Fenster kleiner ziehe, z.B. 800x600px, rutscht deine Info auf der linken Seite unter den Hauptcontent.

onpoint · 25.09.2010

AW: Hab mich mal an div´s versucht!

Hmm habs selbst gerade mal getestet mittels testsize.com

bei ner auflösung unter 800x600 ist es in der tat so, dass sich im content die felder nach unten links verschieben, die eigentlich rechts UNTER dem TGBBZ Button liegen......wie kann ich das beheben?

Pixus · 25.09.2010

AW: Hab mich mal an div´s versucht!

@pinkflo
Wer programmiert denn noch für 800x600px?

@bboydaniele
Das Du mit der Sache recht gut klarkommst, sieht man. Respekt!
Zu deinem Problem mit dem Hintergrund: Ich mußte, nachdem ich es gelesen habe, noch
mal genau nachschauen, und du hast recht, da ist ´ne Kante. Na und? Hätt ich sonst
gar nicht bemerkt.
Was mir dagegen sofort auffällt, ist der zu geringe Abstand zwischen den Zeilen und
ebenso die mangelnden Abstände im Footer. Die würde ich etwas großzügiger anlegen.
Als letztes wäre noch zu erwähnen, das die Überschrift über den Bildern nicht bündig
abschliesst. Wahrscheinlich sind die Bilder durch den Aussenrand zu lang geworden.

onpoint · 25.09.2010

AW: Hab mich mal an div´s versucht!

Ich dank dir Pixus!

Du meinst die Zeilenabstände der Texte? Die müsste ich dann mit "line-height" einstellen können, oder?

Und wie gesagt, im Footer schaff ichs nicht die einzelnen Abstände so zu setzen wie ichs will..sobald ich den rechten abschnitt nach rechts verschieben will springt die schrift sofort nach unten links..als wäre quasi das Bildelement schon zu Ende..ist es jedoch nicht!

-edit - ist mir garnicht aufgefallen mit den Bildern! Danke! habs angepasst

Quabbe · 25.09.2010

AW: Hab mich mal an div´s versucht!

bei ner auflösung unter 800x600 ist es in der tat so, dass sich im content die felder nach unten links verschieben, die eigentlich rechts UNTER dem TGBBZ Button liegen......wie kann ich das beheben?

Kann es sein, dass die drei DIVs nicht innerhalb des #content liegen? Nehm mal ein </div> weg und schreib es dahinter.

Mit demselben Tutorial habe ich übrigens auch CSS gelernt. Sehr lehrreich.

Obwohl es mir vorkommt, als hätte ich das schonmal geschrieben ... :mysteriös:

Q

onpoint · 25.09.2010

AW: Hab mich mal an div´s versucht!

Hmm hab nochmal geschaut..es liegt alles in der Content div...

danach folgt halt der "clear" befehl und dann startet auch schon der footer...

Quabbe · 25.09.2010

AW: Hab mich mal an div´s versucht!

Code:

  [color=green]<div id="content">[/color] 
 

[color=yellow]<div class="columnbreit">  [/color]
[color=red]<div class="column"></div> [/color]
  
 [color=blue]<div class="column noMargin"> 
   
 </div>[/color][color=yellow]</div>[/color][color=green]</div> [/color] <--- hier schließt sich der Content
   
 --- die drei Test-Divs befinden sich hier ---

Wenn mich nicht alles täuscht, täuschst Du Dich. Oder täusche ich mich?

mgrk · 25.09.2010

AW: Hab mich mal an div´s versucht!

Bin mal auf den Link, na ja... Muß selbst bei meinem 16 zoll Lap gleich scrollen. Schreckt mich ab

onpoint · 25.09.2010

AW: Hab mich mal an div´s versucht!

Quabbe schrieb:

Code:

  [COLOR=green]<div id="content">[/COLOR] 
 

[COLOR=yellow]<div class="columnbreit">  [/COLOR]
[COLOR=red]<div class="column"></div> [/COLOR]
  
 [COLOR=blue]<div class="column noMargin"> 
   
 </div>[/COLOR][COLOR=yellow]</div>[/COLOR][COLOR=green]</div> [/COLOR] <--- hier schließt sich der Content
   
 --- die drei Test-Divs befinden sich hier ---

Wenn mich nicht alles täuscht, täuschst Du Dich. Oder täusche ich mich?

Ach, stimmt!! Sorry! du hattest recht!

Habs geändert, jetzt passt es! auch bei der kleineren auflösung bleibt es wies ist! super!!

@mgrk..echt?? habe auch nen 16er laptop und dort passt es...mit was für ner auflösung arbeitest du?

Quabbe · 25.09.2010

AW: Hab mich mal an div´s versucht!

bboydaniele schrieb:
Ach, stimmt!! Sorry! du hattest recht! Habs geändert, jetzt passt es! auch bei der kleineren auflösung bleibt es wies ist! super!!

@mgrk..echt?? habe auch nen 16er laptop und dort passt es...mit was für ner auflösung arbeitest du?

Da bin ich ja beruhigt.

Ich weiß auch nicht, was mgrk mit dem Scrollen meint. Dass man abwärts scrollen muss, um den ganzen Inhalt zu lesen, sollte ja bekannt sein. :confused:

Q

onpoint · 25.09.2010

AW: Hab mich mal an div´s versucht!

Ja, ich hoffe er meint wirklich das vertikale...nicht dass er horizonzal scrollen muss..das wäre mies..

und ich hab da noch ein problem -.- ich bearbeite gerade die MASTER datei im dreamweaver und verändere das mit dem </div>...jedoch übernimmt er das nicht wenn ichs abspeichere....

<div id="content">
</div>

hat auf einmal auch keine blaue farbe mehr im dreamweaver.....mit dem code stimmt allerdings alles..habe das </div> nur ans ende des contents gesetzt wos auch hingehört..

-edit- hab dreamweaver neu gestartet und jetzt sind sie wieder blau! abspeichern tut er das jedoch irgendwie trotzdem nicht..bzw übernimmt ers nicht auf die einzelnen html dateien

im Protokoll bleibt es auch bei "Dateien aktualisiert: 0"....ich verstehs nicht..ging doch die ganze zeit..

-edit2- jetzt aktualisiert er sie wieder...laut protokoll...jedoch übernimmt er die änderungen nicht..es bleibt so..

und wenn ich die einzelnen html´s aufrufe und es von dort aus bearbeite zerbaut er mir den ganzen code...was ist mit meinem dreamweaver los?

oxygen · 25.09.2010

AW: Hab mich mal an div´s versucht!

bboydaniele schrieb:
und wenn ich die einzelnen html´s aufrufe und es von dort aus bearbeite zerbaut er mir den ganzen code...was ist mit meinem dreamweaver los?

falls du dich mit cs5 plagst ... dann scheint es ein bug zu sein

... ähnliche probleme sind mir heute (erster start dw cs5) aufgefallen

onpoint · 25.09.2010

AW: Hab mich mal an div´s versucht!

oxygen schrieb:
falls du dich mit cs5 plagst ... dann scheint es ein bug zu sein

... ähnliche probleme sind mir heute (erster start dw cs5) aufgefallen

In der Tat..arbeite mit CS5....habe nen systemneustart versucht..mal sehn was er jetzt meint..

-edit- geht immernoch nicht..ich versuche mal aus der index.html eine neue master.dwt zu erstellen und probiers danach wieder..

ARG DAS REGT MICH AUF! Ich will doch nur etwas speichern....normalerweise gibts solch große bugs doch überwiegend nur bei illegalen versionen von programmen die man aus dem netz hat...ich zweifel langsam dran dass es wirklich nur ein bug ist..keine ahnung..

Jedenfalls ist jetzt meine Master.dwt richtig und alle andere html dateien haben noch den falschen code...das sieht man gut wenn man auf die dwt zugreift und das fenster minimiert:

Bitte kostenlos registrieren, damit du die Links siehst.

Dort bleibt er Inhalt wie er ist..bei der normalen Index.html verschiebt es sich..er hat den kompletten inhalt also wohl wirklich nicht auf die andern dateien übertragen..

Crawford · 26.09.2010

AW: Hab mich mal an div´s versucht!

Also mir gefällt der Aufbau und die Farbgestaltung des Designs wirklich gut

gosiggi · 26.09.2010

AW: Hab mich mal an div´s versucht!

Kleiner Tipp zum Footer ausrichten....

HTML:

/*Das wäre nun dein Footer*/
<div id="footer">
    <div id="col1">Linke Spalte</div>
    <div id="col2">Mittlerer Bereich</div>
     <div id="col3">Rechte Spalte</div>

</div><!--Footer end-->
/*Dann die CSS Definition für deinen Bereich*/
#footer{
   width:100%;
   height:60px;
   background:irgendeineFarbe oder Transparent
}
#col1{
   width:33%;
   height:100%;
   float:left;
}
#col2{
  width:33%;
  height:100%;
  margin:0 33%;
}
#col3{
  width:33%;
  height:100%;
  float:right;
}

Und dann würde ich an deiner Stelle die Textfarbe abändern, denn schwarzer Text auf grauem Hintergrund macht sich nicht gut.
Und laut dem Validator vom W3C fehlt dir ein </div> an einer steller.
"Fehlermeldung:"
Line 77, Column 8: end tag for element "div" which is not open

mgrk · 26.09.2010

AW: Hab mich mal an div´s versucht!

Lap arbeitet mit 1366*768... Ich muß aber nur nach unten scrollen nicht rechts links. Aber mach doch einfach dein Selbstbildnis oben nich so groß, schon kommt dat better

onpoint · 26.09.2010

AW: Hab mich mal an div´s versucht!

Danke euch! Auch für den Code, aber ich kann im Dreamweaver nix mehr speichern...er überträgt nichts mehr auf die Dateien..weiß echt nicht weiter mit dem Programm..

-edit-

sooo, hatte mir zum glück ne Sicherung der HTML erstellt, bevor ich die template draus gemacht habe..habe somit alle dateien neu erstellt.

jetzt dürfte alles funktionieren!

Nochmal der Link:
Bitte kostenlos registrieren, damit du die Links siehst.

Ich habe die Schrift im Footer auf weiss gestellt!

Dein Tipp mit den 33% Aufteilungen funktionierte leider in dem Sinne nicht, dass ich ja meine Linien habe, und die nicht diese Drittel Aufteilungen haben..somit setzt er mir die Schrift - zwar bündig - jedoch nen tick links neben die linie...trotzdem danke gosiggi, war ne nette idee!