Antworten auf deine Fragen:
Neues Thema erstellen

Frage zum CSS-Layout

F

Flaesch91

Guest

Guten Abend liebe Community,

Ich wollte demnächst eine Website erstellen und hab mich deswegen ein bischen hier in die weiterführenden Tutorials eingelesen. Dabei war nun so ein Tutorial mit Photoshop, wo man am Ende alles sliced und PS einem das Layout in einer Tabelle ausspuckt. Finde ich zimlich praktisch ;)

Dann hab ich gelesen das man das Layout lieber mit Containern, via CSS erstellen soll.

Meine Frage ist nun ob man praktisch einfach die vorgefertigte Tabelle durch Container "nachbaut"? Das ist jedenfalls mein Gedanke :)

Danke schon mal für Antworten :D

Grüße,
Fläsch
 

Ilse_Schnick

Aktives Mitglied

AW: Frage zum CSS-Layout

Nein es ist nicht praktisch, die Tabelle nachzubauen, denn dann baust du dir nur eine div-Suppe, die auch nicht besser ist, als der Tabellencode


Lern anständiges semantisch richtiges html + css und du brauchst den Code den PS auskotzt nicht
 
F

Flaesch91

Guest

AW: Frage zum CSS-Layout

Ja HTML und CSS kann ich ja schon.

Ich meine man braucht doch alle Felder die man in der Tabelle gemacht hat. Die kann man ja schlecht einfach wegfallen lassen. Man braucht ja zB die Buttons noch um die zu verlinken.

Man kann ja anscheinend auch Buttons per CSS erstellen, aber die sehen ja nicht so schön aus wie, die die man mit PS erstellt hat.

Vielleicht habe ich auch irgendwas falsch verstanden ;)

Wenn ihr ein gutes Tutorial kennt, was sich mit Layouten mit CSS beschäftigt wäre es nett, wenn ihr das verlinken könntet ;) Ich habe bisher noch kein (für mich) gutes gefunden, nur welche die zeigen wie man die Divs konfiguriert.

Grüße
 

Ilse_Schnick

Aktives Mitglied

AW: Frage zum CSS-Layout

Wenn du html/ css kannst, dann erstell dir in PS nur die Grafiken (Buttons z.B) die du brauchst für schwarze flächen z.B. braucht m,an kein Bild usw. usf.
 
F

Flaesch91

Guest

AW: Frage zum CSS-Layout

Ja stimmt.

Dann erstelle ich zum Beispiel ein Container als Navigationsleiste und packe da die vorher erstellten Buttons rein. Die verlinke ich dann auf den Content-Container.

Also für einzelne Grafiken braucht man dann ja keinen Container, ich glaube da lag mein Denkfehler ;)

Grüße
 
M

Marotzke

Guest

AW: Frage zum CSS-Layout

Am Besten aufzeichnen :)

Ich skizziere immer erstmal die umfassenden Kästchen, um bei der Strukturierung eine möglichst minimalistische Logik hinzubekommen... was kann man zusammenfassen, welches Objekt muss wo rein, und was ist egal?

Braucht meist 2-3 Versuche und dann ists gut... spart viel Zeit wenn man sich dann z.B. noch die Pixelmaße dranschreibt statt sich alles zu merken oder einzeln nachzugucken, oder notiert was flexibel sein soll und was nicht nicht.


Falls es dir irgendwie weiterhilft :)
 

sokie

Mod | Web

AW: Frage zum CSS-Layout

für verlinkte buttons (Stichwort Navigationsleiste) empfiehlt es sich sie in einer liste zu organisieren(html), und die buttons selbst als HintergrundBild dem <a> element zuzuweisen(css).
 
AW: Frage zum CSS-Layout

hallo,

in photoshop ist es ab version ?? (glaub ab cs2) möglichdie tabellen auf div umzustellen. schau mal in den ausgabeoptionen.


gruß sfischer
 

leohh

CSS verliebt

AW: Frage zum CSS-Layout

hallo,

in photoshop ist es ab version ?? (glaub ab cs2) möglichdie tabellen auf div umzustellen. schau mal in den ausgabeoptionen.


gruß sfischer
Ist definitiv nicht! zu emfpehlen, diese Methode.
Hier wird alles absolut Positioniert und die Auszeichnung der Elemente, bringt besonders Leute die nichts davon verstehen in teufels Kueche.

Ein CSS-Layout hat nichts mit dem 'div'en zu tun!
 
F

Flaesch91

Guest

AW: Frage zum CSS-Layout

Danke nochmal für die vielen und schnellen (!) Antworten :)

Ihr habt mir gut weitergeholfen. Super Community - kann man nur empfehlen ;)

[/schleim]
 

wex_stallion

Motzerator

Teammitglied
PSD Beta Team
AW: Frage zum CSS-Layout

Ein CSS-Layout hat nichts mit dem 'div'en zu tun!

Dann frag ich als Printler mal ganz doof: Wie krieg ich denn dann eine Struktur in eine Seite? Klar, dass ich das nicht so strikt machen kann wie beim Printdesign (von der Variante »großes Bild mit Imagemaps« mal abgesehen).

Aber spätestens, wenn ein CMS zum Zuge kommt, muss ich doch eine Ordnung drin haben, die sagt "Der Kram kommt in dieses Kistchen", zum Beispiel das Menu. Und soweit ich weiß, was im Nonprint absolut nix heisst!, steht dann da meistens irgendwo div id = menu. (z.B.)

Im Grunde wird doch oftmals, mal ganz einfach gesagt, mit div-containern die alte Tabelle nachgebaut.

Und genau in dem Punkt vermag sich mir der Sinn und Zweck nicht mehr so zu erschließen, was nun besser ist, wenn man div id = links, rechts und mitte nebeneinander packt (und teils noch auf die reihenfolge achten und floaten und was weiß ich noch alles) als wenn man sagt: tabelle, drei spalten.

Um InDesign zu verstehen muss man Akademiker sein.

Blödsinn. Kasten auf, Inhalt rein. Der Rest ist Schmuck. ;)
 

ich98

Noch nicht viel geschrieben

AW: Frage zum CSS-Layout

Dann frag ich als Printler mal ganz doof: Wie krieg ich denn dann eine Struktur in eine Seite? Klar, dass ich das nicht so strikt machen kann wie beim Printdesign (von der Variante »großes Bild mit Imagemaps« mal abgesehen).
Mit den HTML-Elementen für Überschriften, Texten, Listen, Tabellen, Zitaten, Links usw.
Aber spätestens, wenn ein CMS zum Zuge kommt, muss ich doch eine Ordnung drin haben, die sagt "Der Kram kommt in dieses Kistchen", zum Beispiel das Menu. Und soweit ich weiß, was im Nonprint absolut nix heisst!, steht dann da meistens irgendwo div id = menu. (z.B.)
Das Navi kann auch einfach: <ul id="menu">... heißen, denn es ist eine Linkaufzählung.
Im Grunde wird doch oftmals, mal ganz einfach gesagt, mit div-containern die alte Tabelle nachgebaut.
Nur, wenn man es nicht verstanden hat, was es heißt mit CSS eine Website zu gestalten. Eine Division wir nur zum Elemente gruppieren genutzt, damit sie besser gestalten kann. Mehr nicht.
Und genau in dem Punkt vermag sich mir der Sinn und Zweck nicht mehr so zu erschließen, was nun besser ist, wenn man div id = links, rechts und mitte nebeneinander packt (und teils noch auf die reihenfolge achten und floaten und was weiß ich noch alles) als wenn man sagt: tabelle, drei spalten.
Wenn du nur die Tabellenzellen durch "Divisionen" ersetzt, dann hast du nichts gewonnen. Aber das ist nicht Sinn der Sache.
 

leohh

CSS verliebt

AW: Frage zum CSS-Layout

Wie krieg ich denn dann eine Struktur in eine Seite? Klar, dass ich das nicht so strikt machen kann wie beim Printdesign (von der Variante »großes Bild mit Imagemaps« mal abgesehen).
Nun es ist relativ einfach, wie mein Vorposter schon schrieb.
Man hat fuer nahezu jede Situation ein passendes Element, wodurch 'Container' eigentlich nur noch zum Zusammenfassen von Bereichen verwendet werden sollten. Man kann es sogar strikter als im Printbereich machen, weil man hier logischer gliedern kann -bzw. darf. Oberpunkte mit einem Div-Container zusammenfassen, den Inhalt des Containers wiederum mit semantisch, sinnvollen Elementen auszeichnen und schon hat man das nahezu perfekte Markup.

Einfaches (falsches) Beispiel:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" >
   <head>
      <meta http-equiv="content-type" content="text/html; UTF-8" />
      <title>Datenbank</title>

      <style type="text/css" media="screen, projection" id="id">
         @import "style.css";
      </style>
      
   </head>
   <body id="index">
      <div id="header">
         <div id="logo"><img src="" alt="" /></div>
         <div  id="ueberschrift1">Seitentitel</div>
      </div>
      
      <div id="sidebar">
         <div id="menue">
            <a href="#" title="">Lorem</a> |
            <a href="#" title="">Lorem</a> |
            <a href="#" title="">Lorem</a> |
            <a href="#" title="">Lorem</a> |
         </div>
         <div id="werbung">
            <div id="werbeueberschrift">Werbung</div>
            <script type='text/javascript'><!--//<![CDATA[
               [Werbescript]
            //]]>--></script>
         </div>
      </div>
         
        <div id="main">
           <div id="ersterParagraph">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</div>
            <div id="zweiterParagraph">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</div>
        </div>

        <div id="footer">&copy; Firma | Datum | Ipressum usw.</div>
   </body>
</html>

Mit diesem Code, haettest du zwar eine leckere Suppe gekocht aber nicht jeder steht auf Suppe. Suchmaschinen werden hier streiken, Screenreader melden auch nur noch Muell und deine gesammte Struktur faellt im Benutzermodus komplett auseinander und wird somit nicht verwertbar fuer den Endanwender.

Im Gegendsatz dazu, verwandelnt sich bei einer semantisch, korrekt ausgezeichneten Webseite die Nachteile schon praktisch zu Vorteilen.

Einfaches ('richtiges') Beispiel:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" >
   <head>
      <meta http-equiv="content-type" content="text/html; UTF-8" />
      <title>Datenbank</title>
      <link rel="stylesheet"
      <style type="text/css" media="screen, projection" id="id">
         @import "style.css";
      </style>
      
   </head>
   <body id="index">
      <div id="wrapper">
         <h1 id="ueberschrift1">Seitentitel</h1>
      
         <div id="sidebar">
            <ul id="menue">
               <li><a href="#" title="">Lorem</a></li>
               <li><a href="#" title="">Lorem</a></li>
               <li><a href="#" title="">Lorem</a></li>
               <li><a href="#" title="">Lorem</a></li>
            </ul>
            <h3 id="werbeueberschrift">Werbung</h3>
            <script type='text/javascript'><!--//<![CDATA[
               [Werbescript]
            //]]>--></script>
         </div>
         
         <div id="main">
            <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
            <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
         </div>

         <ul id="footer">
            <li>&copy; Firma</li>
            <li>Datum</li>
            <li>Ipressum usw.</li>
         </ul>
        
      </div>
   </body>
</html>
Mit diesem Markup vermittelst du anderen Geraeten mehr Information ueber deinen Inhalt, da du deinen Elementen eine hochwertigere Bezeichnung zuordnest.

Aber spätestens, wenn ein CMS zum Zuge kommt, muss ich doch eine Ordnung drin haben, die sagt "Der Kram kommt in dieses Kistchen", zum Beispiel das Menu. Und soweit ich weiß, was im Nonprint absolut nix heisst!, steht dann da meistens irgendwo div id = menu. (z.B.)
Dann schau noch mal in ein CMS und sieh dir die labels noch mal etwas genauer an ;)

Im Grunde wird doch oftmals, mal ganz einfach gesagt, mit div-containern die alte Tabelle nachgebaut.
In anderen Foren, wird man fuer diese und aehnliche Aussagen nahezu gesteinigt. Nein, so ist es sicherlich nicht, da man hier schon ganz anders denken bzw. vorgehen muss. Bei Tabellen erstellt man meist erst seine Webseite und fuegt dann den Inhalt ein, in der modernen Variante hat man zuerst den Content und bastelt um diesen eine 'benutzergrafisch, ansprechende Oberflaeche'.

Und genau in dem Punkt vermag sich mir der Sinn und Zweck nicht mehr so zu erschließen, was nun besser ist, wenn man div id = links, rechts und mitte nebeneinander packt (und teils noch auf die reihenfolge achten und floaten und was weiß ich noch alles) als wenn man sagt: tabelle, drei spalten.
Ganz einfach:
SEO bzw. Leserlicher fuer Suchmaschinen, keine Spacer *.gifs, leichter zu handlen, semantisch hochwertiger & zugaenglicher fuer Leute mit Einschraenkungen und vorallendingen weniger Code (weniger Traffic)

Blödsinn. Kasten auf, Inhalt rein. Der Rest ist Schmuck. ;)
Und auf den Schmuck kommt es eben an :p
Hier wird es im InDesign m.E. schon sehr abenteuerlich.
Ich muss es zum Glueck nur selten verweden :D
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.611
Beiträge
1.538.342
Mitglieder
67.524
Neuestes Mitglied
BSKGA
Oben