✔ Table oder Frames?

Status
Nicht offen für weitere Antworten.
Mal 'ne Frage zur Umsetzung:
Strukturiere ich erst ohne mein Design die Seite und bette dann das CSS ein oder wie macht ihr das?
Habe mir z.B. CSSZengarden mal mit Netscape 4.8 angeschaut. Es sieht total anders aus (quasi nur Text eben, ohne Design) und trotzdem is alles lesbar und strukturiert.
Habt ihr da Tipps wie man am besten vorgeht?
Gruß,
Micha
 
Hallo,

hier das wird dir sicher gefallen, damit kann man schön rumspielen und bisjen die Werte verändern und sehen was dann immer passiert, ich kann dir aus Erfahrung sagen, das man mit Beispielen wirklich noch am besten lernt, es sei den du beschäftigs dich dann aber auch damit und probierts einfach alles mal aus was du vorher schon mit Tabellen auch gemacht hast und wenn du dann für jede Funktion deiner alten Tabellen eine Lösung mit CSS gefunden hast, dann bist du ja sicher einen Schritt weiter:

HTML: 
<html>
<head>
<title>:::css.layout.09:::</title>
<style type="text/css">
<!--
body
{
padding: 0px;
margin: 0px;
background: #efefef;
color: #000000;
font-family: verdana, sans-serif;
font-size: 12px;
font-weight: bold;
}
#headerDiv
{
height: 50px;
margin: 10px;
padding: 10px;
border: 1px solid #006699;
background-color: #ffffff;
}
#contentDiv
{
width: auto;
min-width: 120px;
padding: 10px;
margin: 0px 150px;
border: 1px solid #006699;
background-color: #ffffff;
}
#leftmenuDiv
{
position: absolute;
top: 70px;
left: 10px;
width: 130px;
height: 200px;
margin: 0;
padding: 10px;
border: 1px solid #006699;
background-color: #ffffff;
}
#rightmenuDiv
{
position: absolute;
top: 70px;
right: 10px;
width: 130px;
height: 200px;
margin: 0;
padding: 10px;
border: 1px solid #006699;
background-color: #ffffff;
}
pre
{
font-size: 12px;
font-family: verdana, sans-serif;
color: #006699;
}
-->
</style>
</head>
<body>
<div id="headerDiv">headerDiv</div>
<div id="contentDiv">
contentDiv | dynamische Breite
<p>CSS-Code:</p>
<pre>
body
{
padding: 0px;
margin: 0px;
background: #efefef;
color: #000000;
font-family: verdana, sans-serif;
font-size: 12px;
font-weight: bold;
}
#headerDiv
{
height: 50px;
margin: 10px;
padding: 10px;
border: 1px solid #006699;
background-color: #ffffff;
}
#contentDiv
{
width: auto;
min-width: 120px;
padding: 10px;
margin: 0px 150px;
border: 1px solid #006699;
background-color: #ffffff;
}
#leftmenuDiv
{
position: absolute;
top: 70px;
left: 10px;
width: 130px;
height: 200px;
margin: 0px;
padding: 10px;
border: 1px solid #006699;
background-color: #ffffff;
}
#rightmenuDiv
{
position: absolute;
top: 70px;
right: 10px;
width: 130px;
height: 200px;
margin:0px;
padding: 10px;
border: 1px solid #006699;
background-color: #ffffff;
}
</pre>
</div>
<div id="leftmenuDiv">leftmenuDiv</div>
<div id="rightmenuDiv">rightmenuDiv</div>

</body>
</html>

gruß
fehmi
 
tantebootsy hat gesagt.:
Strukturiere ich erst ohne mein Design die Seite und bette dann das CSS ein oder wie macht ihr das?
Zum Vergrößern anklicken....
Zum Üben ist es sicherlich sinnvoll, erstmal an einzelnen Werten zu spielen, wie feh sagt.
Dazu macht man sich dann ein einfaches HTML-Markup, mit dem man konkrete CSS-Eigenschaft ausprobiert, feh hat ja auch schon ein Beispiel.

Wenn Du eine Seite entwickelst, macht es eher Sinn, zuerst das strukturell korrekte HTML-Markup zu schreiben. Dabei ist am besten schon daran zu denken, em und strong etc., also logische Auszeichnung, zu verwenden, statt i, b und font (physische Auszeichnung). Dazu werden häufig Platzhalter-Texte genommen.
Dabei kannst Du natürlich auch schon passende Klassen und ID's vergeben.
Dann beginnst Du, Deine CSS-Klassen zu schreiben. Solltest Du an irgendeiner Stelle Elemente vermissen, um Dein Design zu realisieren, kannst Du weiter mit den aussagelosen HTML-Elementen div und span gruppieren oder leeren Inhalt einfügen. Was ich mit dem letzten Satz meine, siehst Du bei CSS-Zengarden im HTML-Quelltext. Da steht zum Beispiel in jedem p ein span.

Wenn Du dann etwas Erfahrung und Übung hast wird Dir, mit Deinem Design im Hinterkopf, auch schon beim HTML-Markup auffallen, wo Du leere Elemente setzen solltest.
Man entwickelt das Markup und die Styles also gemeinsam, wobei man mit dem Markup beginnt, ausser vielleicht ein Standard-Stylesheet für zum Beispiel Schriftformatierung von body, h1-6, p, em, strong, code etc., welches man sich per Cut'n'Paste schon zu Beginn von früheren Projekten nimmt und schonmal anpasst.

Gruß hpvw
 
Also ich hab ja hier ganz schöne Diskussionen ausgelöst! ;-)
Naja ist ja auch Sinn der Sache.
Also werd ich mich mal an euren Vorschlag halten und div´s verwenden. Hab schon ein wenig angefangen und so schwer ist es gar nicht!
Naja also Danke nochmal an Alle,
$$Goodfella!$$
 
Ich hatte mit CSS schon das Problem, dass sich 2 Elemente, die sich berühren sollen (weswegen ich die Koordinaten der linken Seite des einen, und der rechten Seite des anderen auf den selben Wert setze) einen deutlich sichtbaren Abstand haben... Hab in diesem Fall dann doch ne Tabelle genommen. Und Tabellen sind anscheinend auch noch relativ verbreitet, man braucht sich ja nur zB mal den Quelltext dieser Seite anzusehen ;-) Benutze aber auch vorwiegend CSS
 
Danke @hpvw und feh!

Tss, ihr erklärt hier Sachen, die ich eigentlich in der Ausbildung hätte lernen müssen ... *nerv*

Mein Design mache ich also allein mit CSS, also Slices binde ich via background-image ein?
Und wenn ich Rollover-Effekte haben möchte, die ich nicht via CSS herstellen kann (z.B. einfach nur die Text-Farbe zu ändern) lege ich über das Hintergrundbild einfach eines drüber und beim Rollout, entlade ich es wieder, richtig?

Gruß,
Micha
 
Ich würde auf jeden Fall mit Tabellen arbeiten. Frames sind Benutzerunfreundlich, weil die site dann mehr Ladezeit braucht.
Außerdem wenn du mit Tabellen jede Seite einzeln skipptest, kannst du gegnfalls deine navigationsleist entsprechend anpassen.
 
MG-Webmaster, hast du unsere Diskussion und die dort gebrachten Argumente gelesen? Denn die anderen und ich sind zu dem Ergebnis gekommen, dass nicht nur Frames, sondern auch Tabellen nicht geeignet sind bzw. dass es bessere Methoden gibt.
 
son gohan hat gesagt.:
Hallo,

hier das wird dir sicher gefallen, damit kann man schön rumspielen und bisjen die Werte verändern und sehen was dann immer passiert, ich kann dir aus Erfahrung sagen, das man mit Beispielen wirklich noch am besten lernt, es sei den du beschäftigs dich dann aber auch damit und probierts einfach alles mal aus was du vorher schon mit Tabellen auch gemacht hast und wenn du dann für jede Funktion deiner alten Tabellen eine Lösung mit CSS gefunden hast, dann bist du ja sicher einen Schritt weiter:

HTML: 
<html>
<head>
<title>:::css.layout.09:::</title>
<style type="text/css">
<!--
body
{
padding: 0px;
margin: 0px;
background: #efefef;
color: #000000;
font-family: verdana, sans-serif;
font-size: 12px;
font-weight: bold;
}
#headerDiv
{
height: 50px;
margin: 10px;
padding: 10px;
border: 1px solid #006699;
background-color: #ffffff;
}
#contentDiv
{
width: auto;
min-width: 120px;
padding: 10px;
margin: 0px 150px;
border: 1px solid #006699;
background-color: #ffffff;
}
#leftmenuDiv
{
position: absolute;
top: 70px;
left: 10px;
width: 130px;
height: 200px;
margin: 0;
padding: 10px;
border: 1px solid #006699;
background-color: #ffffff;
}
#rightmenuDiv
{
position: absolute;
top: 70px;
right: 10px;
width: 130px;
height: 200px;
margin: 0;
padding: 10px;
border: 1px solid #006699;
background-color: #ffffff;
}
pre
{
font-size: 12px;
font-family: verdana, sans-serif;
color: #006699;
}
-->
</style>
</head>
<body>
<div id="headerDiv">headerDiv</div>
<div id="contentDiv">
contentDiv | dynamische Breite
<p>CSS-Code:</p>
<pre>
body
{
padding: 0px;
margin: 0px;
background: #efefef;
color: #000000;
font-family: verdana, sans-serif;
font-size: 12px;
font-weight: bold;
}
#headerDiv
{
height: 50px;
margin: 10px;
padding: 10px;
border: 1px solid #006699;
background-color: #ffffff;
}
#contentDiv
{
width: auto;
min-width: 120px;
padding: 10px;
margin: 0px 150px;
border: 1px solid #006699;
background-color: #ffffff;
}
#leftmenuDiv
{
position: absolute;
top: 70px;
left: 10px;
width: 130px;
height: 200px;
margin: 0px;
padding: 10px;
border: 1px solid #006699;
background-color: #ffffff;
}
#rightmenuDiv
{
position: absolute;
top: 70px;
right: 10px;
width: 130px;
height: 200px;
margin:0px;
padding: 10px;
border: 1px solid #006699;
background-color: #ffffff;
}
</pre>
</div>
<div id="leftmenuDiv">leftmenuDiv</div>
<div id="rightmenuDiv">rightmenuDiv</div>

</body>
</html>

gruß
fehmi
Zum Vergrößern anklicken....

@ son gohan: diesen Quellcode hatte ich dir am 24.11.2004 per Email als ZIP-Datei [ css.layout.zip ] zukommen lassen, die noch weitere acht CSS-Templates enthält [ css.layout.01 - css.layout.09 ]. Ich finde es nicht korrekt, dass du dich hier mit fremden Federn schmückst und nicht die Quelle nennst.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück