• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Coden eines Designs

W

Witschi262

Blogger
Hallo!
Ich bin ja schon eine Weile mit HTML beschäftigt habe aber das coden von Designs immer den anderen überlassen.
Doch ich möchte mal mein eigenes Design coden!
Hier mal so meine Vorstellung:
http://ragehabz.de/v3.PNG
Die Shoutbox soll natürlich ein Lauftext sein (:

Wie fange ich nun am besten an?
 
Also erstmal FALSCHER Bereich.
Um ein Design zu Coden musst du CSS verwenden.
Es muss in den Quellcode eingebaut werden.
Also aber es muss alles vorhanden sein : Navigation,etc.
Hier mal ein Beispiel!(Nur ein Beispiel)
Code: 
   [B][COLOR=green]<style type="text/css"> 
<!--[/COLOR][/B] 

[B]/* Hintergrund hinter Design */[/B] 
[B][COLOR=red]body[/COLOR][/B] { 
background-color:; 
background-image:url(http://dryicons.com/files/graphics_previews/techno_background.jpg); 
background-repeat: repeat; 
text-align:center; } 

[B]/* Schriftfarbe + Größe auf allen Seiten */[/B] 
[B]td[/B] { 
color:#000000; 
font-size:14px; 
text-align:left; 
font-family: arial,verdana; } 

[B]/* Linkfarben + Größen auf Seiten */[/B] 
[B][COLOR=red]a:link[/COLOR][/B] { 
color:#000080; 
font-size:14px; 
font-family:arial,verdana; 
text-decoration:none; } 

[B]/* besuchte Links */[/B] 
[B][COLOR=red]a:visited[/COLOR][/B] { 
color:#800000; 
font-size:14px; 
font-family:arial,verdana; 
text-decoration:none;} 

[B]/*Hover-Effekt bei Links*/[/B] 
[B][COLOR=red]a:hover[/COLOR][/B]{ 
color:#000080; 
font-size:14px; 
font-family:arial,verdana; 
text-decoration:none;} 

[B]/* Header oben */[/B] 
[B]td.[COLOR=red]edit_header_full[/COLOR][/B] { 
background-color:#FFFFFF; 
background-image:url(http://www.psp-backgrounds.info/wp-content/uploads/2008/06/psp_abstract02.jpg); 
background-repeat:no-repeat; 
border:1px solid #000000; } 

[B]/* Titel im Header entfernen */[/B] 
[B]td.[COLOR=red]headline[/COLOR][/B] {visibility:hidden;} 

[B]/* Titel über Navigation */[/B] 
[B]td.[COLOR=red]nav_heading[/COLOR][/B] { 
color:#FFFFFF; 
font-size:14px; 
font-family:arial,verdana; 
text-align:center; 
height:29px; 
background-color:#000000; 
background-image:url(http://www.psp-backgrounds.info/wp-content/uploads/2008/06/psp_abstract02.jpg); 
border:1px solid #000000; } 

[B]/* Navigation Buttons */[/B] 
[B]td.[COLOR=red]nav[/COLOR][/B] { 
background-color:; 
background-image: url(http://www.psp-backgrounds.info/wp-content/uploads/2008/06/psp_abstract02.jpg); 
border:1px solid #000000; } 

[B]/* Hover-Effekt Navigation Buttons */[/B] 
[B]td.[COLOR=red]nav:hover[/COLOR][/B] { 
background-color:#800000; 
background-image:url(); 
border:1px solid #000000; } 

[B]/* Textlinks in Navigation */ 
td.[COLOR=red]nav a[/COLOR][/B] { 
color:#000000; 
font-size:14px; 
font-family:arial,verdana; 
text-decoration:none; 
text-align:left; } 

[B]/* Hover-Effekt Textlinks */ 
td.[COLOR=red]nav a:hover[/COLOR][/B]{ 
color:#FFFFFF; 
font-size:14px; 
font-family:arial,verdana; 
text-decoration:none; 
text-align:left; } 

[B]/* Bild unter Navigation entfernt */ 
td.[COLOR=red]edit_below_nav[/COLOR][/B] {display:none;} 

[B]/* Feld hinter Navigation / Kein Scrollbalken mehr bei Seiten mit wenig Inhalt */[/B] 
[B]td.[COLOR=red]edit_main_tr[/COLOR][/B] { 
height: 50% !important; } 

[B]/* Hintergrund Navigation */ 
td.[COLOR=red]edit_navi_headbg[/COLOR][/B] { 
height: 50%; 
background-color:#XXXXXX ; 
background-image:url(http://www.psp-backgrounds.info/wp-content/uploads/2008/06/psp_abstract02.jpg); 
border:0px solid #000000; } 

[B]/* Balken über Textfeld */ 
td.[COLOR=red]edit_content_top[/COLOR][/B] { 
height:29px; 
background-color:#000000; 
background-image:url(http://www.psp-backgrounds.info/wp-content/uploads/2008/06/psp_abstract02.jpg); 
border:1px solid #000000; } 

[B]/* Seitentitel über Textfeld */ 
td.[COLOR=red]headline2[/COLOR][/B] { 
color:#FFFFFF; 
font-size:12px; 
font-family:arial,verdana; 
text-align:left; } 

[B]/* Textfeld */ 
td.[COLOR=red]edit_content[/COLOR][/B] { 
padding-top:15px; 
padding-bottom:15px; 
background-color:; 
background-image: url(http://www.psp-backgrounds.info/wp-content/uploads/2008/06/psp_abstract02.jpg); 
border:1px solid #000000; } 

[B]/* Linke Spalte im Textfeld */ 
td.[COLOR=red]edit_content_left_spacer[/COLOR][/B] { 
background-color:; 
background-image:url(http://www.psp-backgrounds.info/wp-content/uploads/2008/06/psp_abstract02.jpg); } 

[B]/* Rechte Spalte im Textfeld */ 
td.[COLOR=red]edit_content_right_spacer[/COLOR][/B] { 
background-color:; 
background-image:url(http://www.psp-backgrounds.info/wp-content/uploads/2008/06/psp_abstract02.jpg); } 

[B]/* Erste Balken unter Textfeld */ 
td.[COLOR=red]edit_content_bottom[/COLOR][/B] { 
height:29px; 
background-color:#000000; 
background-image: url([COLOR=blue]http://www.psp-backgrounds.info/wp-content/uploads/2008/06/psp_abstract02.jpg[/COLOR]); 
border:1px solid #000000; } 

[B]/* Zweiter Balken unter Textfeld (mit Counter) */ 
td.[COLOR=red]edit_content_bottom2[/COLOR][/B] { 
background-color:#XXXXXX ; 
background-image: url(http://www.psp-backgrounds.info/wp-content/uploads/2008/06/psp_abstract02.jpg); 
border:0px solid #000000; } 

[B]/* Counter / Besucherzähler */ 
td.[COLOR=red]edit_content_bottom2_counter[/COLOR][/B] { 
font-family:arial,verdana; 
font-size:12px; 
background-color:#0000FF; 
border:1px solid #000000; } 

[B]/* große Feld unter Textfeld */ 
td.[COLOR=red]edit_rechts_cbg[/COLOR][/B] { 
background-color:#XXXXXX; 
background-image: url(http://www.psp-backgrounds.info/wp-content/uploads/2008/06/psp_abstract02.jpg); 
border:0px solid #000000; } 

[B]/* Streifen rechts vom Design entfernt mit */ 
td.[COLOR=red]edit_rechts_sbg[/COLOR][/B] {display:none;} 

[B]/* Titel über rechter Box */ 
td.[COLOR=red]sidebar_heading[/COLOR][/B] { 
color:#FFFFFF; 
font-size:14px; 
font-family:arial,verdana ; 
text-align:center; 
height:29px; 
background-color:#000000; 
background-image: url(http://www.psp-backgrounds.info/wp-content/uploads/2008/06/psp_abstract02.jpg); 
border:1px solid #000000; } 

[B]/* rechte Boxen 1 bis 5 */ 
td.[COLOR=red]shouty, .shouty2, .shouty3, .shouty4, .shouty5[/COLOR][/B] { 
color:#000080; 
font-size:14px; 
font-family.arial,verdana; 
text-align:left; 
background-color:; 
background-image: url(http://www.psp-backgrounds.info/wp-content/uploads/2008/06/psp_abstract02.jpg); 
border:1px solid #000000; } 

[B]/* Abschluß unter Boxen 1 bis 5 entfernt mit */ 
td.[COLOR=red]edit_rb_footer[/COLOR][/B]{display:none; } 

[B]/* Hintergrund unter rechten Boxen */ 
td.[COLOR=red]edit_rechts_bottom[/COLOR][/B] { 
background-color:#XXXXXX ; 
background-image: url(http://www.psp-backgrounds.info/wp-content/uploads/2008/06/psp_abstract02.jpg); 
border:0px solid #000000; } 

[B][COLOR=green]--> 
</style>[/COLOR][/B]
 
Ich möchte ja ein Design Coden, d.h es ist noch NICHTS an HTML&CSS gemacht.
Ich habe gefragt, wie ich am besten Anfange, einen Quellcode habe ich ja noch nicht, genau den, möchte ich ja erstellen.
Hast du es vielleicht falsch aufgefasst?
 
Die Frage ist so nicht gemeint.
Wie genau Fange ich nun an.Was machst du, wenn du vor einem Design stehst, und es danach coden willst.Was überlegst du dir?...
 
So gehe ich vor:

1. Planen der Website (Welcher Inhalt, wie soll es Aussehen)
2. Nachdem das Gehirn erste gute Pläne veröffentlicht, nehme ich ein Stift und ein ein Papier und male es auf :)
3. HTML - Der Inhalt wird ausgezeichnet, das Aussehen ist egal
4. CSS - Jetzt wird das Design mit CSS gemacht :)

MfG
 
habe vorher mal rumprobiert und folgendes herausbekommen:
RageHabZ | Version 3

Momentanes Problem:
Wenn ich nun einen Text in den Content schreibe, soll der Content automatisch ein neues Mittelstück dazusetzen, damit jeder text wirklich auch im Content sind.

Mit repeat:repeat-y;
geht es nicht.
Wie dann?
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben