Design mit DIV und CSS

[UzumakiNaruto]

das macht mich fertig

den sinn der einzelnen tags habe ich jetzt weitesgehend verstanden.
jetzt kommt der mist mit xhtml

<div>
<h1></h1>
<p>
<form></form>
</p>
</div>

FEHLER und ich kann mir nicht erklären wieso. die fehlermeldung sagt mir auch nicht viel
blockelemente in inlineelemente .. mag ich nicht

dann wird mein design auch noch voll verrissen, sobald ich andere tags benutze

habe das jetzt erstmal alles wieder auf ausgangsstellung gebracht und werde mir das morgen angucken

[Abraxax]

form ist innerhalb von p nicht erlaubt. (wenn ich nicht irre)

[Blackgreetz]

Original geschrieben von Abraxax
form ist innerhalb von p nicht erlaubt. (wenn ich nicht irre)

Bleibt wohl nichts anderes , wenn alles andere nicht verschachtelt ist ^^

[Abraxax]

wieso .. p ist in div ... und form wäre immer noch im div, auch wenn es aus p raus wäre.

[Blackgreetz]

Original geschrieben von Abraxax
wieso .. p ist in div ... und form wäre immer noch im div, auch wenn es aus p raus wäre.

Nur das wir alle wissen, dass ein div ein Block-Element ist und somit die Fehlermeldung nicht passt (zudem kann man fast jeden Tag in ein div packen^^..)

Zudem: Wer weiß, was <p> für ein Element ist? Aus dem Kopf sicher keine 95% wenn nicht mehr

btw: Ein Blick in selfhtml wäre da auch einfallsreich gewesen @Naruto..

mfg

[UzumakiNaruto]

so .. damit ich das auch verstehe fange ich mal "neu" an.

wäre es ok, wenn ich meine 5 "Blöcke" als <div> mache?

sprich:

• Header
• linke Seite ("Schachtel" für die Navi-Blöcke)
• Content
• rechte Seite ("Schachtel" für die Navi-Blöcke)
• Footer

oder wäre dieses auch schon zuviel?

[Griecherus]

Nein, das ist OK so.

Grüße

[UzumakiNaruto]

hi,

nachdem ich ein wenig bei peter seiner webseite gelesen und abgeguckt habe, kommt ein neues problem.

ich möchte den content bereich gerne relativ halten und das es sich der browsergröße anpasst.

header und footer machen dieses

linke und rechte seite sind 12em groß und der content bleibt so groß, wie sein text ist.
wenn ich den browser verschiebe, dann wandern meine div elemente unter die anderen.
bei peter bleibt seine rechte box aber stehen und der content verkleinert sich

bei selfthtml ist es genauso (css - mehrspaltiges layout mit kopf und fusszeile).

wüsstet ihr wie ich
a) content die volle breite gebe und dennoch relativ bleibe?
b) content sich verkleinert wenn nötig?

body {
   font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
   font-size: 0.8em;
}

#rahmen {
   /*farbinfos*/
}

#head {
   padding:5px;
   margin:10px;
}

#left-side {
   float:left;
   width:12em;
   margin:0px 10px 0px 10px;
}

#right-side {
   float:right;
   width:12em;
   margin:0px 10px 0px 10px;
}

#content {
   float:left;
   margin:0px 0px 10px 0px;
}

#foot {
   clear:left;
   padding:5px;
   margin:0px 10px 10px 10px;
}

[UzumakiNaruto]

sieht das jetzt besser aus?

<div class="rahmen">
   <div class="head">super neues CMS</div>
   <div class="nav-top">[...]</div>
   <div class="nav-left">
      <h1>Navigation</h1>
      <p>
         <b>Community</b><br />
         [...]
      </p>
      <h1>Login</h1>
      <form action="[...]" method="post" id="fLogin">
         <p>
            [...]   
         </p>
      </form>
   </div>
   <div id="content" class="content"></div>
   <div class="nav-right">
      <h1>Test-Block</h1>
      <p>
         [...]
      </p>
   </div>
   <div class="foot">Copyright &copy; by UzumakiNaruto</div>
</div> 

das problem, das nav-right unter content wandert besteht immer noch.
content wandert aber nicht unter nav-left, sondern verkleinert sich.

[h3ll]

"super neues CMS" soll doch die Überschrift der Seite sein, oder? Warum machst du dann keine Überschrift? Ich würde übrigens Elemente, die eindeutig sind, mit ID und nicht mit Klasse ansprechen. Klassen sind dafür gedacht, wenn du mehrere Elemente vom gleichen Typ hast und ich denke nicht dass auf der Webseite gleichzeitig mehrere Header vorkommen, oder?

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

Folgende sind Überschriften zweiter Ordnung. Oder ist das Hauptthema deiner Webseite "Login" und "Test-Block"?

<h1>Navigation</h1> => <h2>Navigation</h2>
<h1>Login</h1> => <h2>Login</h2>
<h1>Test-Block</h1> => <h2>Test-Block</h2> 

Das soll doch eine Überschrift sein, oder? Dritte Ordnung, weil Innerhalb von Navigation:

<b>Community</b><br /> => <h3>Community</h3> 

[Kropff]

bei peter seiner webseite

der dativ ist dem genitiv sein tod!

wenn du dir mal meinen quellcode genau ansiehst, wirst du feststellen, dass die reihenfolge ein wenig anders ist.

- erst der linke bereich (float: left)
- dann der rechte! (float: right)
- und erst zum schluss der mittlere (margin-left, margin-right)

Ich würde übrigens Elemente, die eindeutig sind, mit ID und nicht mit Klasse ansprechen. Klassen sind dafür gedacht, wenn du mehrere Elemente vom gleichen Typ hast und ich denke nicht dass auf der Webseite gleichzeitig mehrere Header vorkommen, oder?

ansichtssache! ich halte davon nicht viel.

peter

[h3ll]

Original geschrieben von Kropff
ansichtssache! ich halte davon nicht viel.

Wozu gibts dann ID-Selektoren?

Ich versuch immer den HTML (und CSS) Code so logisch wie möglich zu halten und Klassen beziehen sich nun mal auf Elemente, die öfters vorkommen können und IDs auf eindeutige Elemente.

Im Endeffekt hat das natürlich keine Auswirkungen auf die Seite, aber es dient der Übersicht, weil man gleich sieht welche Elemente nur einmal vorkommen und welche öfters vorkommen können.

Ich will dir natürlich jetzt nicht einreden, wie du arbeiten sollst, sondern will nur verdeutlichen wie sinnvoll das ist.

[Kropff]

Ich versuch immer den HTML (und CSS) Code so logisch wie möglich zu halten und Klassen beziehen sich nun mal auf Elemente, die öfters vorkommen können und IDs auf eindeutige Elemente.

ich will jetzt hier auch keine diskussion zu dem thema anfangen. mich persönlich stört es immer nur, dass in fast jedem css-tutorial permanent mit ids gearbeitet wird, und keine sau darauf hinweist, dass man die nur einmal pro seite verwenden darf.

außerdem haben schon etliche leute eine id zweimal vergeben, weil sie nicht aufgepasst haben. in meinen augen sind klassen viel flexibler. ich selber arbeite nur dann mit ids, wenn ich per javascript darauf zugreife. allerdings gehöre ich mit meiner meinung zugegebenermaßen zu einer minderheit.

peter

[UzumakiNaruto]

thx peter .. das hat mir weiter geholfen

jetzt frage ich mich nur wieso es mit

margin:0px 13.5em 10px 13.5em; 

geht und mit

margin:0px 10px 10px 10px; 

nicht

px = fix
em = relativ ist mir klar

und mit

margin:0px 10em 10px 10em; 

wird das feld in der mitte plötzlich breiter

[h3ll]

Noch ein Vorteil von IDs ist, dass sie als Anker fungieren.

Aber das war jetzt schon mein letztes Kommentar zu dem Thema, versprochen