Projekt: CSS Anfänger benötigt Schritt für Schritt Hilfe

mkuetting · 06.03.2010

Hallo zusammen,

habe vor ein paar Wochen ein Design fertig gestellt für eine Seite für ein Kollegen und mich.
Das Design steht soweit (habe ich in PS CS4 gemacht).

Möchte allerdings die Seite nicht wie früher von PS als HTML Exportieren lassen weil sich ja die Sache mit den iframes nicht mehr wirklich bewehrt und über das tabellensystem brauchen wir mal gar nicht zu reden

Habe mir jetzt das ein oder andere Tutorial angeschaut und auch schon ein wenig hin und her probiert aber leider komme ich noch nicht ganz zum Erfolg :'(

Nun ist meine Frage eigentlich ob es ein paar Leute gibt die mich hier Schritt für Schritt unterstützen damit ich vllt nach der ersten Seite mit dem Rest selbst klar komme ?!?!

Hier mal ein Bild vom Design und meine Vorstellung wie es mal aussehen soll:

Der mittlerei Teil der Seite soll später für den Inhalt sein und daher Dynamisch arbeiten damit bei mehr inhalt die Seite automatisch läger wird.

Rechts und Links in die Boxen soll später das Navigationsmenü kommen welches ebenfalls Dynamisch arbeiten soll (Wenn man auf ne Kategorie klickt soll es ausfahren und die Utnerpunkte anzeigen).
Die Buttons wie Impressum oben in der orangenen Leiste sollen natürlich klickbar sein.
Alle inhalte die angeklickt werden sollen sich im mittleren Bereich der Seite öffnen (wie ein Frame quasi?!?!).

Hier das Bild:

pixeli · 06.03.2010

AW: Projekt: CSS Anfänger benötigt Schritt für Schritt Hilfe

Hallo mkuetting,
ich kann Dir zwei Tipps geben:
1) Kauf Dir "little boxes" von M&T ein geniales Werk zum erlernen von CSS.
2) Schau Dir mal yaml.de an
So ganz nach dem Prinzip: "Hilf mir es selbst zu tun"
Viel Spass, pixeli

AlexanderBo · 06.03.2010

AW: Projekt: CSS Anfänger benötigt Schritt für Schritt Hilfe

fehlt nur noch die frage ob dir jemand die seite hier baut...

da jibbet ne menge tuts für dich zu lesen ;-)
html und css
-> selfhtml

denn dein basiswissen scheint recht "anfänglich" zu sein.

allein dein satz
<quote>
Alle inhalte die angeklickt werden sollen sich im mittleren Bereich der Seite öffnen (wie ein Frame quasi?!?!).
</quote>

zeigt deinen "lesebedarf"...

s.c.r.

mkuetting · 06.03.2010

AW: Projekt: CSS Anfänger benötigt Schritt für Schritt Hilfe

Hallöchen

Danke für die schnelle Antwort.
Welchen Teil von dem Buch sollte ich mir den zu "gemüte" führen ?

pixeli · 06.03.2010

AW: Projekt: CSS Anfänger benötigt Schritt für Schritt Hilfe

Fang mal mit Teil 1 an, da kommst du schon sehr weit und ausserdem ist "little boxes" unterhaltsam zu lesen.
Viel Spass

mkuetting · 06.03.2010

AW: Projekt: CSS Anfänger benötigt Schritt für Schritt Hilfe

Den zweiten Teil habe ich als DvD letzte woche von nem bekannten bekommen aber noch nicht rein geguckt.

Das Design was ich gebaut habe ist aber umsetzbar als Seite oder ?

msblacky · 06.03.2010

AW: Projekt: CSS Anfänger benötigt Schritt für Schritt Hilfe

Hy,

such Dir einfach mal das Selfhtml von Stefan Münz, ist einfach für Anfänger ein echt gutes Nachschlagewerk, ich kanns nur empfehlen.

msblacky

pixeli · 06.03.2010

AW: Projekt: CSS Anfänger benötigt Schritt für Schritt Hilfe

wenn ihr mich fragt, wird der Anfänger von Selfhtml erschlagen. Die Fülle ist so gross, dass ein Aufbau nicht möglich ist, deshalb empfehle ich eher eine Schritt für Schritt Anleitung. Wenn Du dan spezielle Probleme hast, kannst Du in Selfhtml nachschlagen.
Deshalb empfehle ich auch als Alternative Yaml, da hst Du schnell einmal deine divs und erst noch sauber platziert.

sokie · 06.03.2010

AW: Projekt: CSS Anfänger benötigt Schritt für Schritt Hilfe

Little Boxes muss nicht unbedingt gekauft werden - hier ist es online zu lesen:
Teil 1 kostenlos online lesen - Little Boxes - Webseiten gestalten mit HTML und CSS

Tobadin · 06.03.2010

AW: Projekt: CSS Anfänger benötigt Schritt für Schritt Hilfe

Also ich schiesse einfach mal drauf los.
Hilf dir selber ist natürlich auch eine Antwort von mir.
Bin jedoch selber Polo6n Fahrer und Tuner und deshalb helf ich doch gerne ;-)

Also eine einfache möglichkeit ist:
Da du ja bereits deine Seite in PS ohne ähnlichem erstellt hast, kannst du jetzt anfangen die Webseite zu slicen.

Ich denke, da du den Inhalt in die Mitte haben willst, würde ich dir eine HTML,PHP,CSS Seite empfehlen.
Ich weiß nicht wie gut du bist, aber... laut beitrag..naja...

HTML: Zeigts
PHP: Generierts dynamisch
CSS: macht es sexy

HTML ist eigentlich immer bei ner webseite dabei

der html head und body tag sind die interessanten.
Um das design browserunabhängig zu machen benutze einen wrapper.

dieser ist ein Kästchen welches in HTML so eingeleitet wird:

<div>
Alles hier drinnen ist deine seite
</div>

In diesem Wrapper-div können natürlich mehrere layer stehen.
Du solltest dir einen header, Navigation, Content und den rechten layer anlegen.
So groß wie du ihn haben möchtest legst du dir auch deine layer an.

Bedenke:
HTML erstellts (also <div>INHALT</div> mehr nicht!)
CSS macht es schön (position absoulte, color, rahmen usw usw)

um die Inhalte reinzubekommen lege ich dir den PHP include befehl ans Herz welcher HTML inhalte an einer bestimmten stelle einbaut.

Mit dem HTML-Tag <a href="index.php?option=TUNING">TUNING Extreeeem</a> kannst du dann den inhalt des include skripts auswechseln.
Durch diese Hyperlinks wird dann die Mitte ausgetausccht um den Inhalt zu ändern.

auf die INhaltsseite muss halt dann in den content div soetwas:

<div id="content">
<?php
$option = arrray();
$option['willkommen'] = 'willkommen.php';
usw
?>

damit dir der inhalt geändert wird und damit überhaupt etwas angezeigt wird:
<?php
if(isset($_GET['option'],$option[$_GET['option']]))
{include $section[$_GET['option']];
} else {
include $option['willkommen'];
}

?>

Denke und hoffe das dir das erstmal den richtigen "Tritt" in die richtige Richtung gibt.

Und ich kann dir nur empfehlen die Seite zu "fressen".
Die ist einfach der Hammer und ist auch bei Erfahrenen Webdesignern sehr belibt und hilfreich.

Hau rein!

AlexanderBo · 06.03.2010

AW: Projekt: CSS Anfänger benötigt Schritt für Schritt Hilfe

<ouha>
war das das wort zum sonntag¿
mit den angaben (wenn man sich nicht gut auskennt)
wird er abba nu erstrecht übbafordert sein.

Tobadin · 06.03.2010

AW: Projekt: CSS Anfänger benötigt Schritt für Schritt Hilfe

naja @alexanderBo
guck dir das Template mal an. Er hat sich auch durch Photoshop ansehnlich durchgebissen. warum sollte er das nicht auch mit meiner anleitung schaffen. Für Photoshop hatte er viellleicht auch keinen Leitfaden.

Ich denke, dass er das schon schaffen wird.

Wenn nicht: Ich/Wir sind ja nicht aus der Welt und auch hier um solchen unerfahrenen Nutzern eine Hilfestellung zu geben.

Einen schöne SAMSTAG Abend noch ;-)

mkuetting · 06.03.2010

AW: Projekt: CSS Anfänger benötigt Schritt für Schritt Hilfe

Sodalle habe mir die letzten Stunden die erste DvD sprichwörtlich rein gezogen.

Ich konnte auf jeden Fall eine Menge lernen und habe die Testseite die im Video gescriptet wird selbst erstellt sowohl HTML als auch CSS.

Habe jetzt mein Design mal als ein drei Spalten Design eingestuft.

Ich kann ja jetzt quasi wie im Video die Seite als HTML mit CSS Zusatz im Head scripten und später dann anhand der einzelnden Spalten das Design einfügen indem ich für jede Spalte ein eigenes background einsetze ?

Demnach hätte ich dann einmal den:

- den oberen Bereich (für den Banner)
- den linken Bereich (erste Navi)
- den mittleren Bereich (für den Inhalt)
- den unteren Bereich (als Footer)

Habe ich das System soweit Korrekt nachvollzogen ?

Tobadin · 06.03.2010

AW: Projekt: CSS Anfänger benötigt Schritt für Schritt Hilfe

Ääh ja,
wenn ich Spalten höre, denke ich an Tabellen, und wenn ich an Tabellen im Web denke, .... :schmoll:

Fehlt da nicht noch die Nik Spalte?

Welches Video hast du dir denn reingezogen?
EDIT: Habs schon gesehen, DVD vom Kumpel

mkuetting · 06.03.2010

AW: Projekt: CSS Anfänger benötigt Schritt für Schritt Hilfe

Jo,

also ich habe mir die erste DvD vom Little Boxes komplett angesehen und die zweite habe ich mir gerade teilweise angesehen weil ich langsam zum scripten meiner eigenen Seite kommen möchte.

Daher tendiere ich im moment dazu mir die Anleitung zu Yaml auf der DvD anzusehen.
Ist relativ ausführlich beschrieben wie Yaml arbeitet und welche Möglichkeiten es gibt.

Wenns Euch interessiert versuche ich euch hier auf dem Laufenden zu halten was mein Fortschritt im Umgang mit HMTL, CSS und YAML angeht...

mkuetting · 07.03.2010

AW: Projekt: CSS Anfänger benötigt Schritt für Schritt Hilfe

So Leute

Ich habe jetzt immerhin 11,5 Stunden vor der Kiste gesessen und mir die Videos sooo in mein Hirn geprügelt, dass ich immerhin schonmal was auf die beine gestellt habe was sich "sehen lässt.

Habe mit den <div></div> jetzt das Design sortiert und die CSS mithilde der Videos geschrieben.

Habe den ganzen kram mal auf meinen Space geladen und folgendes ist dabei raus gekommen:

Habe jetzt quasi allen "bildern" auf der Seite eine Feste Breite gegeben (1100px) und die jeweilige Höhe zugewiesen.
Nur den Textbereich habe ich variabel gelassen damit er sich automatisch verlängert wenn ich in die <div id="textbereich"></div> text oder bilder einfüge.

Was sagt Ihr dazu ?

GoMeZ · 07.03.2010

AW: Projekt: CSS Anfänger benötigt Schritt für Schritt Hilfe

So für den Anfang sieht das schon mal nicht schlecht aus, aber für 11,5 Std. ein wenig leer ...

Das lässt sich auch nach einer halben Std. selfhtml auf die Beine stellen ...

Nicht böse sein, halt meine Meinung.

Gruß, der GoMeZ

mkuetting · 07.03.2010

AW: Projekt: CSS Anfänger benötigt Schritt für Schritt Hilfe

Hiho,

ja ist ja kein Thema aber darfst nicht vergessen, dass ich heute das erste mal programmiere

Habe aber jetzt noch 2 kleine Probleme:
Ich habe ja oben in der Navileiste eigentlich mehrere Buttons die eine eigene Grafik haben. Jetzt würde ich gern die Grafiken auch horizonzal nebeneinander einfügen, dass es genau so aussieht wie jetzt nur halt als einzelgrafiken wo die trennlinien sind.

Kann mir jemand einen Tipp geben wie ich das hin bekomme ?

Samuelll · 07.03.2010

AW: Projekt: CSS Anfänger benötigt Schritt für Schritt Hilfe

Tip :

Eine Navi ist eine Liste von Links.

In HTML sehen die zB so aus

<ul>
<li>Inhalt</li>
<li>Inhalt</li>
<li>Inhalt</li>
</ul>

Statt Inhalt, musst du natürlich eine richtigen Link einfügen.

Dann sorgst du dafür dass die LI-Elemente via CSS nebeneinander positioniert werden.

mkuetting · 07.03.2010

AW: Projekt: CSS Anfänger benötigt Schritt für Schritt Hilfe

HTML:

<div id="navibereich">
<ul>
    <li><img src="bilder/polo6Nv4_02.jpg" width="176" height="24" /></li>
    <li><img src="bilder/polo6Nv4_03.jpg" width="77" height="24" /></li>
    <li><img src="bilder/polo6Nv4_04.jpg" width="91" height="24" /></li>
    <li><img src="bilder/polo6Nv4_05.jpg" width="52" height="24" /></li>
    <li><img src="bilder/polo6Nv4_06.jpg" width="73" height="24" /></li>
    <li><img src="bilder/polo6Nv4_07.jpg" width="96" height="24" /></li>
    <li><img src="bilder/polo6Nv4_08.jpg" width="535" height="24" /></li>
</ul>
</div> <!-- Ende navibereich -->

Habe jetzt das hier im HTML stehen aber irgendwie packt er die Bilder nicht direkt aneinander sondern macht nen paar pixel abstand zwischen die inzelnden teile sodass sie in 2 Reihen auftauchen.

In der CSS Date finde ich keine padding, oder margin abstände die das Verhalten irgendwie bestimmen in dem Navibereich ?!?!:

HTML:

/* =========================================
Stylesheet Polo6N-GTi.de 
Datei: bildschirm.css
Datum: 07.03.2010
Autor: ...

Aufbau: 1. Kalibrierung
        2. Allgemeine Styles
        3. Styles fuer Layoutbereiche
        4. Sonstige Sytles
============================================*/

/*      =====================================
        1. Kalibrierung
        ===================================*/

* { padding: 0; margin: 0; }

h2, p, ul, ol { margin-bottom: 1em; }

ol ul { margin-bottom: 0; }

li { margin-left: 2em; }        
        
/*      =====================================
        2. Allgemeine Styles
        ===================================*/

html { height: 101%; }

body { 
  background-color: #181818; /* dunkel grau*/
  color: white;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: small;
}

h1 { font-size: 150%; }
h2 { font-size: 130%; }

address {
  text-align: center;
  font-size: 80%;
  font-style: normal;
  letter-spacing: 2px;
  line-height: 1.5;
}

.skiplink {
  position: absolute;
  top: -5000px;
  left: -5000px;  
  width: 0;
  height: 0;
  overflow: hidden;
  display: inline;
}      
        
/*      =====================================
        3. Styles fuer Layoutbereiche
        ===================================*/

#wrapper {
  background-color: white;
  color: black;
  width: 1100px;
  margin: 10px auto;
}

#kopfbereich {
  background-image: url(bilder/index_01.jpg);
  width: 1100px;
  height: 162px;
}

#navibereich {
  background-color: black;
  margin: 0px;
}
    #navibereich ul {
      margin-bottom: 0px;
    }
    #navibereich li {
      display: inline;
      list-style-type: none;
      margin-right: 0px;
      margin-left: 0px;
      }
      
#namenbereich {
  background-image: url(bilder/index_05.jpg);
  width: 1100px;
  height: 52px;
  }
  
#textbereich {
  background-image: url(bilder/index_03.jpg);
  padding: 10px 20px 10px 20px;
  }

#fussbereich {
  background-image: url(bilder/index_04.jpg);
  width: 1100px;
  height: 14px;
  margin-top: 0px;
}        
        
/*      =====================================
        4. Sonstige Styles
        ===================================*/









        
/*      =====================================
        ENDE DES STYLESHEETS
        ===================================*/