Design mit DIV und CSS

[Kropff]

schon mal auf die idee gekommen mit klassen und nicht mit ids zu arbeiten? siehe hier

peter

[UzumakiNaruto]

die guten alten klassen.

auf die idee wäre ich jetzt nicht gekommen
mies .. und dabei verwende ich css klassen schon seit jahren.

[Blackgreetz]

Btw: Guck dir mal bitte Menüs mit Listen an..
Wird ja ne reine Div-Suppe bei dir.. :/

mfg

[h3ll]

Nur mal als Beispiel:

<div id="navi" class="block">
    <h3>Navigation</h3>
    <div class="content"></div>
</div>

<div id="login" class="block">
    <h3>Login</h3>
    <div class="content"></div>
</div>

Oder als Liste:

<ul>
    <li id="navi">
        <h3>Navigation</h3>
        <div class="content"></div>
    </li>
    <li id="login>
        <h3>Login</h3>
        <div class="content"></div>
    </li>
</ul>

Oder als Definitionsliste:

<dl>
    <dt id="navi">Navigation</dt>
    <dd></dd>
    <dt id="login">Login</dt>
    <dd></dd>
</dl>

[UzumakiNaruto]

<div id="container">
   <div id="rahmen" align="center">
      <div id="head">[...]</div>
      <div id="left-side">
         <div class="block" align="left">
            <div class="block_title">Navigation</div>
            <div class="block_content">
               [...]
            </div>
         </div>
         <div class="block" align="left">
            <div class="block_title">Login</div>
            <div class="block_content">
               [...]
            </div>
         </div>
      </div>
      <div id="content"></div>
      <div id="foot">[...]</div>
      <div id="under_foot">
         [...]
      </div>
   </div>
</div>

also viel finde ich das nicht .. das ist ALLES

[unset]

Die wurde schon ein Schlagwort hingeworfen: Div-Suppe. Erkundige dich dannach. Und align-Attribute in Divs ist ballaballa - vor allem wenn man eh schon mit CSS-Klassen arbeitet.

[h3ll]

@UzumakiNaruto

Ein sehr gutes Beispiel für eine Div-Suppe und wie man es auf keinen Fall machen sollte.

[UzumakiNaruto]

die 3 beispiele bringen mich überhaupt nicht weit, da ich dann ja keinen block mehr hätte
die divs positionieren ja nur die einzelnen blöcke .. für die texte selber nehme ich keine divs.

http://cms.mengel.mx-host.de/
könnt ihr euch ja gerne mal angucken.

[unset]

Bitte, setz dich endlich mit den Techniken auseinander, die du benutzen willst. Wenn du dir alles halbherzig anguckst und sofort umsetzen willst, wirst du nie auf einen grünen Zweig kommen. Du musst nicht für jeden Piss den du stylen willst ein neues Div aufmachen. Du kannst auch Fließtextelemente als Blockelemente deklarieren. Informier dich bitte ein bischen darüber, was du mit CSS alles machen kannst.

Drei Leute haben dir gesagt, dass das so Blödsinn ist. Wie kommst du dann auf die Idee, da immer noch von einer sauberen Struktur reden zu wollen!?

[h3ll]

Original geschrieben von UzumakiNaruto
die 3 beispiele bringen mich überhaupt nicht weit, da ich dann ja keinen block mehr hätte

Den Block erstellst du mit CSS.

Heißer Tipp: "display: block"

[UzumakiNaruto]

Original geschrieben von unset
Bitte, setz dich endlich mit den Techniken auseinander, die du benutzen willst. Wenn du dir alles halbherzig anguckst und sofort umsetzen willst, wirst du nie auf einen grünen Zweig kommen. Du musst nicht für jeden Piss den du stylen willst ein neues Div aufmachen. Du kannst auch Fließtextelemente als Blockelemente deklarieren. Informier dich bitte ein bischen darüber, was du mit CSS alles machen kannst.

Drei Leute haben dir gesagt, dass das so Blödsinn ist. Wie kommst du dann auf die Idee, da immer noch von einer sauberen Struktur reden zu wollen!?

das es sauber ist habe ich nie gesagt.
ich sagte nur dass das von euch gezeigte mir nicht viel hilft.

tipps wonach ich gucken muss wären da hilfreich.
evtl. auch ein wenig quellcode, den anpassen kann ich schon alleine .. und daraus lernen tu ich auch.

ich bin in der div materie neu und muss mir erst die ganzen für und wieder angucken/aneignen.

ich bin ja schon froh dass das design-gerust steht.

---

display:block; werde ich mir mal angucken ;-) thx

[unset]

Dann gehste am besten mal hin, und liest dir selfHTML von Vorne bis Hinten einmal komplett durch.

[Kropff]

ein paar beispiele für dein div-suppe:

<div id="head">super neues CMS</div>
// warum nicht
<h1>super neues CMS</h1>

<div class="block_title">Navigation</div>
// Warum nicht ein
<h2>Navigation</h2>

<div class="block_content"><b>Community</b> ...</div>
// Warum nicht
<div class="block_content"><h3>Community</h3><p>...</p></div>

<div id="foot">Copyright &copy; by UzumakiNaruto</div>
// Warum nicht ein
<p id="foot">Copyright &copy; by UzumakiNaruto</p>
// usw. 

peter

[UzumakiNaruto]

@ peter
und was macht es für einen unterschied, ob ich <div> oder <p> benutze??
entweder ist mir etwas entfallen oder ich werde nicht verstanden

h1 = text fett und zentriert
div = "kontainer" um dinge anzuzeigen, positionieren, etc

ich wüsste jetzt nicht wie ich mit einem h1 tag einen header aufbauen kann der z.b. 800px breit ist und ein logo beinhaltet.

<div id="head">super neues CMS</div>
// warum nicht
<h1>super neues CMS</h1> 

<div class="block_content"><b>Community</b> ...</div>
// Warum nicht
<div class="block_content"><h3>Community</h3><p>...</p></div>
// warum <h3> und nicht <b>??? 

@ unset
sorry, ich habe keine masochistische ader.
das problem dabei ist, das ich html zu 90 % beherrsche und ich somit die restlichen 10 % nur schwer finde und ich es lange zeit nicht für nötig gehalten habe es mir anzueignen.

wäre ich in mein altes muster verfallen und hätte mit tabellen das design erstellt, wäre ich schneller, aber auch damit wäre es nicht "ok".

[Kropff]

h1 = text fett und zentriert

falsch

div = "kontainer" um dinge anzuzeigen, positionieren, etc

auch falsch.

h1 = semantische(!) auszeichnung für eine überschrift 1. ordnung
div = html-element ohne(!) semantische bedeutung

ich wüsste jetzt nicht wie ich mit einem h1 tag einen header aufbauen kann der z.b. 800px breit ist und ein logo beinhaltet.

genau so wie mit dem div-element.

h1
{
   width: 800px;
   background-image: url('logo.gif')
} 

ich glaube, du hast den unterschied noch nicht ganz verstanden. suchmaschinen bewerten den inhalt auch anhand seiner semantischen auszeichnung. so ist eine überschrift höher gewichtet als ein absatz (<p>). und wie will eine suma deinen inhalt semantisch erfassen, wenn da nur überall "inhaltslose" div-elemente rumlungern. einen einstieg dazu gibt es bei mir. und vielleicht solltest du dir auch mal die praxis-tutorials zu gemüte führen.

gruß
peter