Anzeige
Tutorialbeschreibung

PSD-Portfolio-III Webseite - Teil 2: XHTML & CSS

PSD-Portfolio-III Webseite - Teil 2: XHTML & CSS

In diesem Tutorial möchte ich euch zeigen, wie ihr das Weblayout PSD-Portfolio III scriptiert.
Es ist das passende Tutorial für meinen Download bzw. das Text-Tutorial PSD-Portfolio III Webseite.


PSD-Portfolio-III scriptieren mit XHTML und CSS

Voraussetzung für dieses Tutorial:
Grundkenntnisse von (X)HTML und CSS ; leider kann ich euch nicht jeden <tag></tag> einzeln erklären, was er bedeutet oder warum ich ihn gerade an dieser Position einsetze.

Gute Denkanstöße findet ihr auf folgenden Webseiten:

(X)HTML --> http://de.selfhtml.org/ oder http://jendryschik.de/wsdev/einfuehrung/
CSS --> http://www.css4you.de/ oder http://www.thestyleworks.de/tut-art/layout_div.shtml

Vorbereitung:
Als Erstes lege ich mir die Ordner-Struktur für meine Webseite an.

Bilder


Danach öffnet ihr euren HTML-Editor, legt eine Standard-XHTML-Seite an und speichert diese als "index.html".
Sieht ungefähr wie folgt aus:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
   <title>PSD-Portfolio-III</title>
   <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
   <meta http-equiv="Content-Style-Type" content="text/css" />
</head>
<body>   
</body>
</html>
Als Nächstes lege ich in dem Ordner "css" eine leere Textdatei an und benenne diese "layout.css"

Bilder


Diese CSS Datei öffne ich jetzt mit einem Texteditor oder mit meinem HTM-Editor.

Weblayout coden:

1. Schritt

Im ersten Schritt verlinke ich die CSS-Datei im Heade-Bereich meiner "index.html" mit folgendem Code:
<link rel="stylesheet" type="text/css" href="css/layout.css" />
Danach speichere ich die Seite mit STRG + S und öffne meine leere "Index.html"-Seite in einem Webbrowser.

Bilder


So, und jetzt geht es auch schon los - folgenden Code füge ich jetzt der CSS-Datei hinzu, um die Grundfarbe festzulegen.

2. Schritt

CSS-Datei
html { 
min-height: 101%; 
}

body {
padding:0; 
margin:0; 
background-color:#737373; 
color:#707070; 
font: 90% Verdana, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Lucida", "Trebuchet MS", "Times New Roman", "Bitstream Vera Sans", sans-serif; 
text-align: center;
}
Hier ein paar Erklärungen dazu, wie ich vorgehe - Das könnt ihr machen, müsst ihr aber nicht.
min-height: 101% --> Im Gegensatz zum IE zeigt der Mozilla den vertikalen Scrollbalken nur an, wenn der Seiteninhalt größer als das Anzeigefenster ist. Der IE zeigt hier standardmäßig einen schmalen Streifen als Platzhalter am rechten Fensterrand an. Dadurch zuckt das Bild beim Wechseln der einzelnen Seiten mit vertikal unterschiedlich langem Inhalt. Um den Scrollbalken auch im Mozilla standardmäßig anzeigen zu lassen, definiere ich in CSS die Seitenhöhe als mindestens 101%.
Sieht dann wie folgt aus:

Bilder


3. Schritt

Als Nächstes definiere ich den Grundcontainer, sozusagen die Basis für die Webseite. In diesem Grundcontainer wird die Webseite aufgebaut.

CSS-Datei
#layout {
margin:0; 
padding:0; 
background-color:#ffffff; 
border: 1px solid red;
}
border: 1px solid red; --> Dieser Border ist nur für das Tutorial definiert, bitte nicht in eure CSS-Datei übernehmen.

XHTML-Datei
<body>
   <div id="layout">
    </div>
</body>

Sieht wie folgt aus:

Bilder


4. Schritt

Als Nächstes definiere ich den Header-Hintergrund mit folgenden Codezeilen:

CSS-Datei
#header {
margin:0; 
padding:0; 
height:192px; 
background: #ffffff url() repeat-x; 
margin-left: auto; 
margin-right: auto;
}
XHTML-Datei
<div id="layout">
   <div id="header">
   </div>
 </div>
Sieht wie folgt aus:

Bilder


5. Schritt

Hier benötigen wir jetzt noch eine Grafik für den Header-Hintergrund, und den holen wir uns jetzt aus der erstellten PSD-Portfolio-III.psd-Datei heraus. Dazu öffne ich mein Template mit Photoshop und schneide mir genau den Teil heraus, den ich als Hintergrund verwenden möchte. Diesen Schnipsel kopiere ich jetzt mit STRG + C und füge ihn in eine neue Datei mit STRG + N; diesen Grafik-Schnipsel speichere ich als header_bg.jpg mit einer Qualität von 60%.

Bilder


Danach füge ich jetzt noch im CSS-Code Folgendes unter background: url () hinzu:

CSS-Datei
#header {
margin:0; 
padding:0; 
height:192px; 
background: #ffffff url(../images/header_bg.jpg) repeat-x; 
margin-left: auto; 
margin-right: auto;
}

Sieht wie folgt aus:

Bilder


6. Schritt

Danach definiere ich jetzt den Header selbst; geht fast genauso wie mit dem Header-Hintergrund.
In Photoshop lege ich mir eine neue Ebene an, um mir pixelgenau einen Abstandhalter einzubauen. Genau vom Beginn des Headers gehe ich 10 Pixel nach links außen und zieh mir danach eine Hilfslinie an das Ende der schwarzen Markierung; dasselbe mache ich auch auf der rechten Seite der Header-Grafik.

Bilder


Nun kann ich die Grafik ausschneiden, die ich benötige. Diese Grafik kopiere ich wieder mit STRG + C und füge diese in eine neue Datei mit STRG + N, danach speichere ich die Grafik als header.jpg mit einer Qualität von 50 - 60%.

Bilder


In die CSS-Datei füge ich jetzt folgenden Code hinzu:

CSS-Datei

#header-center {
width:802px; 
height:192px; 
background: #ffffff url(../images/header.jpg); 
background-position: 0px 0px; 
margin-left: auto; 
margin-right: auto;
}
XHTML-Datei
<div id="layout">
      <div id="header">
         <div id="header-center">&nbsp;</div>
      </div>
   </div>
Sieht wie folgt aus:

Bilder


7. Schritt

Auf zum Mittelteil der Webseite! Dieser Mittelteil muss dynamisch sein, weil sich auch der Inhalt der einzelnen Webseiten unterscheiden kann.
Das funktioniert wie folgt:

CSS-Datei

#container {
width: 802px; 
margin: 0px auto; 
padding: 0;
}
XHTML-Datei
<div id="layout">
      <div id="header">
         <div id="header-center">&nbsp;</div>
      </div>
      <div id="container">
      </div>
   </div>
Sieht wie folgt aus:

Bilder


8. Schritt

Als Nächstes füge ich meinem Container eine Content-Grafik hinzu; dazu wechsle ich wieder zu Photoshop, schneide mir die passende Grafik zu und mach mir eine Markierung zwischen den beiden Hilfslinien. Nun kann ich die Grafik ausschneiden, die ich benötige. Diese Grafik kopiere ich wieder mit STRG + C und füge diese in eine neue Datei mit STRG + N, danach speichere ich die Grafik als content_bg.jpg mit einer Qualität von 100%.

Bilder


Wenn das passiert ist, füge ich das Ganze meinen Code hinzu.

CSS-Datei

#container-center {
margin:0; 
padding:0; 
text-align:left; 
width:802px; 
background: #ffffff url(../images/content_bg.jpg) repeat-y; 
background-position: 0px 0px; 
margin-left: auto; 
margin-right: auto;
}
XHTML-Datei
<div id="layout">
      <div id="header">
         <div id="header-center">&nbsp;</div>
      </div>
     
      <div id="container">
          <div id="container-center">   
        <br />
        <br />
        <br />           
    </div>           
      </div>
Sieht wie folgt aus:

Bilder


9. Schritt

Der Bereich, der oben rot umrandet ist, erweitert sich jetzt je nach Inhalt. Das habe ich oben mit den drei <br /> markiert, damit ihr seht, was ich meine.
Als Nächstes möchte ich der Fußzeile eine Hintergund-Grafik hinzufügen. Geht wie folgt: ich wechsle wieder zu Photoshop und schneide mir die passende Grafik aus. Dazu mache ich mir eine neue Hilfslinie am Ende des Templates, um ein Maß zu bekommen. Nun kann ich die Grafik ausschneiden, die ich benötige. Diese Grafik kopiere ich wieder mit STRG + C und füge diese in eine neue Datei mit STRG + N, danach speichere ich die Grafik als footer_bg.jpg mit einer Qualität von 100%.

Bilder


CSS-Datei

#footer {
padding:0; 
margin:0 auto; 
background: #737373 url(../images/footer_bg.jpg) repeat-x ;
}
XHTML-Datei
<div id="layout">
      <div id="header">
         <div id="header-center">&nbsp;</div>
      </div>
      <div id="container">
          <div id="container-center">   
        <br />
        <br />
        <br />           
    </div>           
      </div>
<div id="footer">
</div>
Sieht wie folgt aus:

Bilder


10. Schritt

Um nun auch die mittlere Grafik hinzuzufügen, schneide ich mir die Grafik ebenfalls aus meinen Photoshop-Template. Diese Grafik kopiere ich wieder mit STRG + C und füge diese in eine neue Datei mit STRG + N. Danach speichere ich die Grafik als footer.jpg mit einer Qualität von 60%.

Bilder


CSS-Datei
#footer-center {
width:802px; 
height:83px; 
text-align:center; 
margin:0 auto; 
padding:0; 
background: #737373 url(../images/footer.jpg) no-repeat 50% 0;
}
XHTML-Datei
<div id="layout">
      <div id="header">
         <div id="header-center">&nbsp;</div>
      </div>
      <div id="container">
          <div id="container-center">   
        <br />
        <br />
        <br />               
    </div>           
      </div>
      <div id="footer">
        <div id="footer-center">&nbsp;</div>   
        </div>
Sieht wie folgt aus:

Bilder


11. Schritt

Und nun fügen wir noch einen Copyright-Schriftzug hinzu - geht wie folgt:

Bilder


CSS-Datei
#footer-content {
font: 70% Verdana, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Lucida", "Trebuchet MS", "Times New Roman", "Bitstream Vera Sans", sans-serif; 
color:#ffffff; 
margin: 0 auto; 
width:802px; 
text-align:center;
}

#footer-content a:link, #footer-content a:visited  {
font: 100% Verdana, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Lucida", "Trebuchet MS", "Times New Roman", "Bitstream Vera Sans", sans-serif; 
color:#ffffff; 
text-decoration:none;
}

#footer p {
text-align:center;
}
XHTML-Datei

<div id="layout">
      <div id="header">
         <div id="header-center">&nbsp;</div>
      </div>
      <div id="container">
          <div id="container-center">   
        <br />
        <br />
        <br />               
    </div>           
      </div>
      <div id="footer">
        <div id="footer-center">&nbsp;</div>
        <div id="footer-content">
     <p>&copy; Copyright 2009 - by <a href="http://www.meineseite.com"
    target="_blank">meineSeite</a></p>
    </div>
  </div>
Sieht wie folgt aus:

Bilder


12. Schritt

Jetzt kommen wir zur Navigation bzw. zum Inhalt der Webseite. Ich lege mir im "css-Ordner" noch mal zwei leere css-Dateien an, mit dem Namen "content.css" für den Webinhalt und eine "navigation.css" für die Navigation der Webseite.

Bilder


Um nun den Webinhalt definieren zu können, lege ich in der content.css folgenden Code an:

CSS-Datei
#content {
width:782px; 
margin:0px auto; 
padding:0;
}
XHTML-Datei

<head>
<link rel="stylesheet" type="text/css" href="css/content.css" />
</head>
<div id="container">
        <div id="container-center">
           <div id="content">   
        <br />
              <br />
              <br />         
             </div>
        </div>
     </div>
Sieht wie folgt aus:

Bilder


13. Schritt

Ich habe mich bei diesem Tutorial entschieden, eine externe Quelle heranzuziehen, um ein CSS-Navigation einzubinden.

Quellen:

http://www.simplebits.com/bits/bulletproof_slants.html
http://www.simplebits.com/img/nav_slant.gif

Weitere Navigationsbeispiele findet ihr hier (Horizontal lists):

http://css.maxdesign.com.au/listamatic/index.htm


Ich öffne die navigation.css und füge folgenden Code hinzu:

CSS-Datei
#nav {
float: left; 
width: 100%; 
margin: 0; 
padding: 0; 
list-style: none; 
background: #e7c7a7; 
border-bottom: 1px solid #999999;
}   

#nav li { 
float: left; 
margin: 0; 
padding: 0;
}   

#nav a {
float: left; 
display: block; 
padding: 6px 30px 6px 5px; 
text-decoration: none; 
font-weight: bold; 
font-size: 90%; 
color: #737373; 
background: #e7c7a7 url(../images/nav.gif) no-repeat top right;
}  
 
#nav #nav-1 a {
padding-left: 20px;
}   

#nav a:hover {
color: #000000;
}

ul {
clear: left; 
margin-top: 60px;
}
XHTML-Datei
<head>
<link rel="stylesheet" type="text/css" href="css/navigation.css" />
</head>
<div id="container">
        <div id="container-center">
           <div id="content">
              <ul id="nav">
             <li id="nav-1"><a href="#">Home</a></li>
             <li id="nav-2"><a href="#">&Uuml;ber mich</a></li>
             <li id="nav-3"><a href="#">Portfolio</a></li>
             <li id="nav-4"><a href="#">G&auml;stebuch</a></li>
             <li id="nav-5"><a href="#">Kontakt</a></li>
              </ul>
        <br />
              <br />
              <br />
             </div>
        </div>
     </div>

Sieht wie folgt aus:

Bilder


14. Schritt

Ab jetzt beginnt der schwierigste Teil des Tutorials. Wir fügen ein bisschen Text auf der Seite ein und dazu müssen wir per CSS zwei Textblöcke definieren. Dazu öffne ich die "content.css" und füge folgenden Code hinzu:

CSS-Datei (Textblock 1, links)
#textblock-links {
float: left; 
width: 500px; 
padding: 20px 0px 0px 0px; 
margin: 0px 0px 0px 20px; 
display: inline;
}

#textblock-links p, #textblock-links h1, #textblock-links h2, #textblock-links h3, #textblock-links ol, #textblock-links ul, #textblock-links form {
margin:10px 0px 0px 15px;
}

#textblock-links p, {
text-align:justify;
}

h1 {
font: 120% bold Verdana, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Lucida", "Trebuchet MS", "Times New Roman", "Bitstream Vera Sans", sans-serif; 
color:#9BBFBF; 
letter-spacing:2px;
}

a, a:visited {
color:#FB9233; 
text-decoration:none;
}

a:hover {
color:#93C600; 
text-decoration:underline;
}
XHTML-Datei
<div id="container">
        <div id="container-center">
           <div id="content">
                 <ul id="nav">
	         <li id="nav-1"><a href="#">Home</a></li>
	         <li id="nav-2"><a href="#">&Uuml;ber mich</a></li>
	         <li id="nav-3"><a href="#">Portfolio</a></li>
	         <li id="nav-4"><a href="#">G&auml;stebuch</a></li>
	         <li id="nav-5"><a href="#">Kontakt</a></li>
                   </ul>
<div id="text-links">	  	   
<h1>&Uuml;berschrift 1</h1>
<p>Streng dem definierten Wesen des Blindtextes folgend, fungiere ich als solcher und gebe mich unverbindlich inhaltsleer. In bedrückender Enge in vorgefertigte Masken gepresst friste ich ein freudloses Dasein auf dem schmalen Grat zwischen Nichtbeachtung und Bedeutungslosigkeit und habe doch eine Bitte: Handeln Sie Sinn stiftend für meine Existenz und lesen Sie mich.</p>
 <p>Streng dem definierten Wesen des Blindtextes folgend, fungiere ich als solcher und gebe mich unverbindlich inhaltsleer.</p>
 <h1>&Uuml;berschrift 2</h1>
<p>Streng dem definierten Wesen des Blindtextes folgend, fungiere ich als solcher und gebe mich unverbindlich inhaltsleer.</p>
<h1>&Uuml;berschrift 3</h1>
<p>Streng dem definierten Wesen des Blindtextes folgend, fungiere ich als solcher und gebe mich unverbindlich inhaltsleer. In bedrückender Enge in vorgefertigte Masken gepresst friste ich ein freudloses Dasein auf dem schmalen Grat zwischen Nichtbeachtung und Bedeutungslosigkeit und habe doch eine Bitte: Handeln Sie Sinn stiftend für meine Existenz und lesen Sie mich.</p>
</div>
Um Blindtext hinzuzufügen, benutze ich immer folgende Seite --> http://www.newmediadesigner.de/

Sieht wie folgt aus:

Bilder


Hoppala, jetzt hat es mir mein ganzes Design zerlegt. Aber macht euch keine Sorgen, denn das liegt an der CSS-Option float:left;
Simpel gesagt bewirkt die CSS-Eigenschaft float, dass der betreffende Text-Block links (float: left;) an den linken Rand positioniert wird und dort "Platz blockiert". Die Besonderheit von float liegt nun im Verhalten des nächsten Blockes, der nicht unterhalb des float-Blockes beginnt, sondern bereits auf gleicher Höhe neben dem float seinen Platz sucht und den verbleibenden Platz auffüllt! Der zweite Block versucht also, um den ersten Block herumzufliessen, daher der Name der CSS-Eigenschaft float.
Also wenn einmal irgendwo ein float gesetzt wurde, muss es auch wieder mit einem clear beendet werden. Dazu gleich mehr. :-)
#text-links {float: left; width: 500px;.........}
15. Schritt

Um nun das Ganze
wieder geradezubiegen, werde ich neben den linken Textblock noch einen rechten Textblock setzen. Funktioniert wie folgt:

CSS-Datei (Textblock 2, rechts)
#text-rechts {
float: right; 
width: 240px; 
padding: 0px; 
margin:0px 0px 0px 0px;    
font: 90% bold Verdana, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Lucida", "Trebuchet MS", "Times New Roman", "Bitstream Vera Sans", sans-serif;     
color: #737373;
}

#text-rechts *  {
margin: 30px;
}

#text-rechts h1 {
font: 120% bold Verdana, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Lucida", "Trebuchet MS", "Times New Roman", "Bitstream Vera Sans", sans-serif; 
color:#9BBFBF; 
letter-spacing:2px;
}

#text-rechts ul.menu {
list-style: none; 
text-align: left; 
margin: 7px 10px 8px 10px; 
padding: 0; 
text-decoration: none;    
border-top: 1px solid #d6d6d6;    
}

#text-rechts ul.menu li {
list-style: none; 
padding: 4px 0px 4px 10px; 
margin: 0 2px; 
color: #737373; 
border-bottom: 1px solid #d6d6d6;
}

* html body #text-rechts ul.menu li {
height: 1%;
}

#text-rechts ul.menu li a {
text-decoration: none; 
color: #08A2F7;
}

#text-rechts ul.menu li a:hover {
color: #303030 ;
}

#text-rechts ul.menu ul {
margin: 0 0 0 5px; 
padding:0;
}

#text-rechts ul.menu ul li {
border: none;
}
XHTML-Datei
<div id="text-rechts">
        <h1>Kategorien</h1>
           <ul class="menu">
               <li><a href="#">Kategorie 1</a></li>
               <li><a href="#">Kategorie 2</a></li>
               <li><a href="#">Kategorie 3</a></li>                   
               <li><a href="#">Kategorie 4</a></li>
               <li><a href="#">Kategorie 5</a></li>
           </ul>
     <h1>News</h1>
       <p>Streng dem definierten Wesen des Blindtextes folgend, fungiere ich als solcher und gebe mich unverbindlich inhaltsleer. In bedrückender Enge in vorgefertigte Masken gepresst friste ich ein freudloses Dasein auf dem.</p>
     </div>
       <div style="clear:both"></div>
     </div>
   </div>
 </div>
Sieht dann wieder wie folgt aus:

Bilder


Höchstwahrscheinlich seid ihr, was den CSS-Code angeht, ein wenig verwirrt. Bin ich auch jedes Mal, aber mit ein bisschen Spucke und vielen vielen Stunden suchen bekomme ich es immer wieder hin.
Daher ein paar Erklärungen zu den einzelnen CSS-Tags

Das Komma (,) verbindet mehrere Elemente durch UND. Damit kann die gleiche Definition auf mehrere Elemente angewandt werden. z.B. a, a:visited {color:#FB9233; text-decoration:none;}

Der Punkt (.) verbindet jeweils Elementnamen und Klassenbezeichnung (class=""). Die entstehende Elementvariante bezeichnet alle Elemente, die den definierten Namen sowie die definierte Klassenbezeichnung enthalten. z.B. #text-rechts ul.menu {list-style: none;....}

Das Leerzeichen ('''''''''''''''' '''''''''''''''') verbindet zwei Elemente. Es bezeichnet dabei das zweite Element, wenn es im ersten enthalten ist. z.B. #text-rechts ul.menu ul li {border: none;}

Der Stern (*) bedeutet, dass alle Elemente gemeint sind; bezeichnet also alle Elemente. z.B. * html body #text-rechts ul.menu li {height: 1%;} oder #text-rechts *  {margin: 30px;}

Sucht einfach mal nach CSS-Verknüpfungen, da wird euch geholfen. :-)

16. Schritt

Jetzt ist die Webseite im Großen und Ganzen fertig;, zu guter Letzt müssen wir noch die Navigation verlinken, damit die Webseite auch funktioniert, wenn man irgendwo hinklickt.
Dazu kopiere ich jetzt die index.html-Datei viermal und benennen die einzelne Dateien um.

Sieht wie folgt aus:

Bilder

Jetzt öffne ich noch jede HTML-Seite und definiere noch den Titel der einzelnen Seiten.
Danach passe ich wie unten gezeigt noch die Links der Navigation in jeder Seite an

<ul id="nav">
             <li id="nav-1"><a href="index.html">Home</a></li>
             <li id="nav-2"><a href="uebermich.html">&Uuml;ber mich</a></li>
             <li id="nav-3"><a href="portfolio.html">Portfolio</a></li>
             <li id="nav-4"><a href="gaestebuch.html">G&auml;stebuch</a></li>
             <li id="nav-5"><a href="kontakt.html">Kontakt</a></li>
  </ul>
Sieht wie folgt aus:

Bilder


Fertig ist die Webseite.

Hoffe, ihr hattet Spaß mit dem Tutorial und ihr konntet wieder ein wenig dazulernen.

Gruß hellemon

DVD-Werbung
Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von SaralosCity
  • 26.12.2011 - 08:40

Ich bin zwar ein völliger Anfänger, aber trotzdem hab ich das Tutorial recht gut verstanden (Nicht alles, aber vieles :D). Vielen Dank :)

Portrait von pTown
  • 24.11.2011 - 09:19

genau das, was ich gesucht habe... ichdanke vielmals!!! top verständlich, sogar beim bloßen "überfliegen...

Portrait von timeless122
Portrait von OJey
  • 11.07.2011 - 08:51

Super Nachfolger des ersten Teils!

Portrait von wikkit
  • 06.06.2011 - 22:09

Klasse Tutorial. Hat mich sehr viel weitergebracht

Portrait von Angelripper
  • 14.04.2011 - 10:45

super tutorial, danke dafür

Portrait von cihan
  • 04.04.2011 - 18:06

einfach genial gemacht.

Portrait von ganjaaa
  • 13.03.2011 - 01:21

super erklärt und top gemacht ... endlich habe ich die verflixten div's ein bissl verstanden ;)

Portrait von Sean89
  • 05.11.2010 - 17:43

Danke sehr =)
Liebe Grüße

Portrait von djangohh
  • 22.09.2010 - 19:25

vielen dank - super job

Portrait von sophie67
  • 06.08.2010 - 16:29

Vielen Dank, Super Klasse!

Portrait von Spearboy
  • 04.08.2010 - 13:18

Vielen Dank für dieses wunderbare Tutorial!

Portrait von jr3012
  • 28.07.2010 - 11:12

immer wieder gut anzuschauen....

Portrait von jr3012
  • 26.07.2010 - 10:29

sehr gutes tutorial.

Portrait von DraQ
  • 16.07.2010 - 09:54

*thumps up*

Portrait von shorti41
  • 23.06.2010 - 17:17

Hey sehr gutes Tutorial. ich wüsste nur gerne wie man es schafft einen Link aus der Navi-Leiste im content bereich unten zu Öffnen?

Portrait von egon343
  • 13.06.2010 - 12:51

sehr gut erklärt. top tutorial

Portrait von hellemon
  • 14.04.2010 - 23:28

id="textblock-links"

Portrait von Khazar
  • 14.04.2010 - 12:57

Kleine Frage: In der content.css schreibst du #textblock-links und in der index.html rufst du es mit div id="text-links" auf.
Ist denk ich mal nur nen formaler Fehler, dass du hier das Selbe meinst?
Irre ich mich hier, oder hab ich einfach mal wieder keine Ahnung, da ich beim ausprobieren hier auf den Fehler stieß?

Ansonsten einfach ein prima Tutorial. Da ist mir vieles klar geworden. Danke

Portrait von hellemon
  • 14.04.2010 - 23:27

Vielen Dank für den Hinweis. Das habe ich total übersehen, natürlich hast du recht, wenn in der CSS Datei #textblock-links definiert ist muss natürlich in die (X)HTML Datei ebenfalls ... drinstehen, werde mal bei den Admins anfragen ob Sie das ändern können. Gruß hellemon

x
×
×