PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : Homepage mit Div Container


_SlayeR_
03.03.2010, 17:38
Hallo zusammen,

ich habe mir mit Adobe Photoshop ein Design für eine Homepage erstellt und gesliced.
Jetzt hab ich schon eine fertige Page, jedoch ist die in Tabellenform.
Da Tabellen aber ziemlich ungeeignet für sowas sind möchte ich nun das Design mit css und div container machen.
Gibt es irgendwo passende , am besten Deutsche tutorials ? (englisch ist auch nicht schlimm)
Bei google finde ich viel aber nicht so viel passendes.

mfG
Joka
03.03.2010, 17:42
nuzt doch hier mal die sufu (such funktion ;) )
vllt findeste hier ja was passendes.

mfg,

Joka
Keksdose
03.03.2010, 18:02
Bei DIV sachen musst ja eig nur die Größe und Position wissen, der Rest kommt dann von allein. Und das kannst ja mal auf Selfhtml nachschauen. Da sind auch Beispiele und so.
Ansonten würd ich sagen einfach mal rumspielen und dann wenn du eine Frage hast nochmal suchen.
chopy
03.03.2010, 18:05
http://net.tutsplus.com/ (sehr gute seite, massig tuts, rund um webdesign)
http://www.blog.spoongraphics.co.uk/category/tutorials
http://hv-designs.co.uk/ (gute anfängertuts)
http://hv-designs.co.uk/2009/05/23/my-project-psd-to-html/ (beispiel)

so wie ich aus deinem text entnehmen konnte, hast du dir von ps ne html datei erstellen lassen. vergiss das ganz schnell und speicher nur die bilder. als png oder gif.
wenn du noch fragen hast, schreib einfach. die seiten sollten zum arbeiten aber erstmal langen.
RaZz0r
03.03.2010, 18:07
Das Tutorial sollte dir weiter helfen:
http://tuts.freddy-online.com/div/div.html
-RaZoR-
03.03.2010, 19:48
hmm divs sind eigentlich sehr leicht und css auch
du kannst mir ja mal ne pn schicken dann helf ich dir ^^
_SlayeR_
03.03.2010, 21:30
Die links haben mir geholfen, trotzdem habe ich ein Problem. Ich poste es einfach mal


Ich möchte unter meinem Header noch einen Schatten vom Header setzen.. jedoch wird das Bild (wo der schatten drin ist) ganz oben angesetzt , also nicht unter dem header.

HTML-Bild (http://www.imagebanana.com/view/qsubhh6j/html.JPG)

CSS-Bild (http://www.imagebanana.com/view/82a7o6o2/css.JPG)

Wenn ich das jetzt mit margin-top:xxpx; mache, dann wird es in Dreamweaver und Internet explorer auch korrekt angezeigt, aber im Firefox ist der Schatten dann noch immer IM header und nicht drunter
hoffe ihr könntt mir helfen

mfG
chopy
03.03.2010, 21:42
versuch immer nen design an firefox anzupassen und danach für internet explorer ne extra css datei mit anderen werten anzulegen. nicht andersherum... das problem bei ie ist, dass er viele css befehle missversteht oder gar nicht unterstützt. deswegen immer zuerst an modernen browsern wie firefox, google chrome oder auch opera orientieren.


zu deinem problem, ich denke mal dein headerschattendiv muss unter den eigentlich headerdiv. denk außerdem ans floating. also float:left z.b. um die verschiedenen divs richtig anzuordnen. so vermeidest du z.b., dass 2 divs "ineinanderhängen".
ich hoffe ich hab dich jetzt nicht erschlagen ^^

hab mich mal kurz hingesetzt und nen beispiel für dich geschrieben..


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>bliblablub</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="container">
<div id="header"></div>
<div id="headerschatten"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
</body>
</html>CSS:

#container{
background:#0DD30D;
height:500px;
margin:0 auto;
width:960px;
}

#header{
background:#8BFF8B;
float:left;
height:200px;
width:960px;
}

#headerschatten{
background:#003A00;
float:left;
height:1px;
width:960px;
}
_SlayeR_
03.03.2010, 22:12
Danke dass du dir die Mühe gemacht hast, klappt jetzt Einwandfrei :)

Eine Frage hätte ich aber noch.
Ich möchte gern ein Bild als Button benutzn, und wenn man mit der Maus über das Bild fährt, dann bekommt der Button ne andere Farbe und bekommt nen schatten.
Habe einmal button1.jpg und einmal button1hover.jpg
und ich möchte dass wenn ich über den button button1.jpg mit der Maus fahre dann der button1.jpg zu button1hover.jpg wird..

genug gebuttont
mfG

ps: wie kann ich die divs wieder zentrieren wenn ich float:left benutze
chopy
03.03.2010, 22:18
huhu,
ich würd dir empfehlen mal die 2 seiten anzuschauen:
http://www.alvit.de/css-showcase/css-navigation-techniques-showcase.php
http://sixrevisions.com/css/30-exceptional-css-navigation-techniques/

da gibts tausend techniken wie du mit css ne schöne navigation zauberst.
oder halt bei google mal so was wie: "css navigation samples" eingeben.
und ich verweise immer wieder gerne auf nettuts :P
wenn du schon dreamweaver benutzen willst, da gibts bestimmt auch so hässliche vorgefertigte code snippets zum einbauen :P
Marwin
03.03.2010, 22:35
wenn ich ein bisschen über skype oder so helfen soll schreib mal per PM deine addy dann helfe ich gerne ;)
Ich kann dir bei CSS und HTML gerne weiterhelfen ;)