Suche im Forum:
Suchen


« Vorheriges Thema anzeigen :: Nächstes Thema anzeigen »  
Autor Nachricht
Beitrag21.11.2011 um 15:32 (UTC)    
Titel: CSS Design- Schritt für Schritt

Hallo,

ich würde gerne ein neues CSS-Design gestalten für meine Hp.
Ich habe eine Vorstellung wie die Seite aussehen kann bräuchte aber Hilfe bei der Programierung:

http://www.fotos-hochladen.net/uploads/hpvorlageumz04olqnx.jpg

Rolling Eyes

So wenn man auf meine Homepage guckt sieht man nicht viel. Dass sollte sich ändern. Bis jetzt habe ich den Hintergrund und so einen ''halben Container'' Neutral
Ich denke der nächste Schritt wäre der Header. Ich habe ihn auch schon hochgeladen: http://img.webme.com/pic/m/mario-klassen/header.png
Und wie kann ich den jetzt einfügen und an die richtige Stelle bringen?



Ich hoffe sehr ihr könnt mir helfen
Beitrag21.11.2011 um 15:53 (UTC)    
Titel:

Also meine nächste Frage ist wie ich meinen Header an Ort und Stelle bekomme Question
Beitrag21.11.2011 um 20:29 (UTC)    
Titel:

Also z.Z. kapier ich nicht wir ich unten das Feld hinbekomme??:
http://img.webme.com/pic/m/mario-klassen/unten.png

Bitte dringend um Hilfe
Sad
Beitrag25.11.2011 um 05:59 (UTC)    
Titel: Design erstellen mit CSS

Hallo,

da hilft zunächst sicherlich ein Blick in den Quellcode des Design "CSS".
Diese DIV Felder hat das Design "CSS" in folgender Reihenfolge (nicht kopieren ^^):

Zitat:

<div id="container">
<div id="header_container"> Headerfeld </div>
<div id="nav_container"> Feld der Navigation </div>

<div id="content_container">
<div id="pre_content"> Feld über Content + Box </div>
<div id="content"> Seiteninhalt </div>
<div id="counter"> Besucherzähler </div>
<div id="post_content">lässt sich nicht füllen</div>
<div id="below_content">Feld Copyright-Hinweis</div>

<div id="sidebar_container">
<div id="sidebar_heading"> Titel der Box </div>
<div id="sidebar_content"> Inhalt der Box </div>
</div>
</div>
</div>


Schritt 1
Wir fangen mit dem "Design-Container" #container an.
Der hat alle anderen Felder als Inhalt. Hält also alles zusammen .
Das <div id="container"></div> steht bereits im Quellcode.
Mit CSS bekommt es nur noch gewünschte Eigenschaften.

Dein Design soll 900 Pixel breit sein + mittig platziert ?
Zitat:

#container {
width: 900px;
margin: 0px auto;
overflow: hidden; }


Schritt 2: Der Header
Das Headerfeld folgt im Quellcode gleich als nächstes.
Darum platziert es sich auch automatisch oben.
Mit CSS müssen wir dem nur eine Breite, Höhe und Hintergrundbild geben,
sowie einen Abstand nach unten. Damit der Header nicht am Seiteninhalt klebt:

Zitat:

#header_container {
width: 900px;
height: 150px;
margin-bottom: 20px;
background-image: url(http://img.webme.com/pic/m/mario-klassen/header.png); }


Schritt 3: Die Navigation
Im Quellcode des Designs folgt nun das Feld mit der Navigation.
Du möchtest die Baukasten-Navigation nicht verwenden.
Du lässt das Feld nicht anzeigen, mit "display: none;"

Zitat:

#nav_container {display: none;}


Schritt 4 :
Der "Content-Container" hat #content (Seiteninhalt) und Box (#sidebar_container) als Inhalt.
Es bekommt den weißen Hintergrund mit blauen Rahmen, gerundete Ecken.
Rahmenstärke (4 Links + 4 Rechts) ziehen wir von der Breite ab :

Zitat:

#content_container
width: 894px;
background-color: #FFFFFF;
border: 4px solid #168BAA;
border-radius: 10px;
overflow: hidden; }


Schritt 5: Seiteninhalt
Wenn der Seiteninhalt links neben der Box sitzen soll, geben wir #content ein float: left;

Zitat:

#content {
width: 630px;
float: left;
margin: 20px 0px 20px 20px;
overflow: hidden; }


Schritt 6: Die rechte Box
Wie breit die rechte Box werden kann, hängt von 3 Dingen ab:
Design-Breite - Seiteninhalt - Außenabstand = Breite für die Box.
900 - 630 - 20 - 20 = 230 Pixel für die Box.
Die Box bekommt auch noch einen Abstand nach Rechts. Damit der Inhalt nicht am blauen Rahmen endet.
230 - 20 = 210 Pixel Breite für die Box. Damit die sich rechts platziert, auch ein float: right;

Zitat:

#sidebar_container {
width: 210px;
float: right;
overflow: hidden; }


Schritt 7: Der Counter + Copyright-Feld
Im Quellcode sehen wir, das zwischen Seiteninhalt und rechter Box
der Counter und das Copyright-Feld platziert wurde. Wenn Seiteninhalt und Box nebeneinander stehen sollen, dürfen beide nicht angezeigt werden :

Zitat:

#counter, #below_content {display: none;}


Und zur Frage mit dem "Footer" unter dem Design:
Da nutzen wir das Feld "Text UNTER Design".
Füge dort ein :
Zitat:

<div id="footer"> Hier dein Inhalt </div>


Und mit CSS bekommt das Feld gewünschte Eigenschaften.
Breite , Innenabstand, Zentrierung (mittig) und Hintergrundfarbe.
Den Innenabstand müssen wir von der Breite wieder abziehen.
900 - 20 Pixel Abstand nach Links - 20 Pixel Abstand nach Rechts = 860 Pixel.

Zitat:

#footer {
width: 860px;
padding: 20px 20px 20px 20px;
margin: 20px auto;
overflow: hidden;
background-color: #202020;
color: #FFFFFF; }



Die Werte in den CSS-Eigenschaften können natürlich alle von dir angepasst werden.
Mir ging es nur darum dir die Vorgehensweise zu beschreiben Very Happy
Ich hoffe die Beschreibung konnte dir weiter helfen.

Gruß Wolle


Zuletzt bearbeitet von find-templates am 25.11.2011, 07:15, insgesamt 6-mal bearbeitet
Beitrag25.11.2011 um 13:59 (UTC)    
Titel:

Danke! Smile Das hilft mir.
Beitrag26.11.2011 um 00:58 (UTC)    
Titel:

gern geschehen Very Happy

ich werde dazu in kürze ein Tutorial erstellen ,
Schritt-für-Schritt Anleitung für "Templates im Baukasten" einbinden.
Beiträge der letzten Zeit anzeigen:   


Powered by phpBB © 2001, 2005 phpBB Group
Deutsche Übersetzung von phpBB.de