Div Layer nebeneinander

pheno

Intermediate

Posts: 268

Date of registration: Jul 24th 2006

Location: Ingelheim am Rhein

Occupation: Schüler

0

1

Tuesday, May 1st 2007, 7:54pm

Hi !
Ich versuche mich momentan mit Div Layern.
Leider weiss ich gerade nicht weiter?
Wie bekomme ich es hin, dass die Layer nebeneinander angezeigt werden (Bsp.Bild im Anhang)? Momentan werden sie nur untereinander angezeigt ...

Source code

<div style="width:{$style['tableoutwidth']}" cellpadding="{$style['tableoutcellpadding']}" cellspacing="{$style['tableoutcellspacing']}" align="center" border="{$style['tableoutborder']}" class="tableoutborder">
<div style="background-image:url({$style['imagefolder']}/hostlogo.gif);background-repeat:no-repeat;width:138px;height:119px;"></div>
<div><a href="index.php{$SID_ARG_1ST}"><img src="{$style['imagefolder']}/home.gif" border="0" alt="{$lang->items['LANG_GLOBAL_TOINDEX']}" title="{$lang->items['LANG_GLOBAL_TOINDEX']}" /></a></div>
<div><a href="#"><img src="{$style['imagefolder']}/hostingmenue.gif" border="0" alt="Hostingmenü" title="Hostingmenü" /></a></div>
<div><a href="#"><img src="{$style['imagefolder']}/rechtliches.gif" border="0" alt="Rechtliches" title="Rechtliches" /></a></div>
<div><a href="#"><img src="{$style['imagefolder']}/sonstiges.gif" border="0" alt="Sonstiges" title="Sonstiges" /></a></div>
<div><a href="#"><img src="{$style['imagefolder']}/partner.gif" border="0" alt="Partner" title="Partner" /></a></div>
<div><a href="#"><img src="{$style['imagefolder']}/statistiken.gif" border="0" alt="Statistiken" title="Statistiken" /></a></div>
<div><a href="#" onClick="dropdownmenu(this, event, menu1, '121px')" onMouseout="delayhidemenu()"><img src="{$style['imagefolder']}/produkte.gif" border="0" alt="Unsere Produkte" title="Unsere Produkte" /></a></div>
<div style="background-image:url({$style['imagefolder']}/headend.gif);background-repeat:no-repeat;width:52px;height:119px;"></div>
</div>

Wäre demjenigen sehr dankbar, der mir helfen könnte.

pheno has attached the following image:

Owner of 17000

This is my ship!
Das ist meine Schaufel!

In ALK we trust!

This post has been edited 1 times, last edit by "pheno" (May 1st 2007, 7:54pm)

Go to the top of the page

[~KB~]

Development Center Team

Posts: 1,577

Date of registration: Oct 14th 2002

225

2

Wednesday, May 2nd 2007, 1:06am

Mit dem CSS-Atribut "float" kannst du das erreichen. Schau am Besten mal auf einigen SelfHTML Seiten nach, und probier es was aus. Ist manchmal etwas tricky

..: ~ kb ~ @ kb-online

Go to the top of the page

pheno

Intermediate

Posts: 268

Date of registration: Jul 24th 2006

Location: Ingelheim am Rhein

Occupation: Schüler

0

3

Wednesday, May 2nd 2007, 4:17pm

Danke dir. Hat funktioniert.

Owner of 17000

This is my ship!
Das ist meine Schaufel!

In ALK we trust!

Go to the top of the page

webwalker

Beginner

Posts: 6

Date of registration: Feb 22nd 2009

Occupation: Web-Entwickler, Musiker

0

4

Sunday, February 22nd 2009, 10:26pm

@pheno

Ich würde sowas lieber in LIstenelemente unterbringen, z.B.

Source code

<ul>
<li><a href="#"><img src="{$style['imagefolder']}/hostingmenue.gif" border="0" alt="Hostingmenü" title="Hostingmenü" /></a></li>
<li><a href="#"><img src="{$style['imagefolder']}/rechtliches.gif" border="0" alt="Rechtliches" title="Rechtliches" /></a></li>
</ul>

Ob horizontal oder vertikal, es hat den Vorteil z.B: Abstände besser zu formatieren. Außerdem ist eine diveritis nicht zu empfehlen!

Weiter musst du bei gefloateten Elementen darauf achten, Floats ggf. aufzuheben, da du sonst mit nachfolgenden Elementen im Dokumentenfluss Probleme bekommen wirst.

Hier könnte man z.B: sowas machen um den normalen Dokumentenfluss wiederherzustellen:

	Source code
1	<br style="clear:both;height:1%;"/>

PS: ups, das ganze ist ja nicht mehr sehr Aktuell ... sorry :-)

cheers

This post has been edited 2 times, last edit by "webwalker" (Feb 23rd 2009, 10:36am)

Go to the top of the page

[~KB~]

Development Center Team

Posts: 1,577

Date of registration: Oct 14th 2002

225

5

Monday, May 18th 2009, 1:24pm

Quoted

Original von webwalkerPS: ups, das ganze ist ja nicht mehr sehr Aktuell ... sorry :-)

Du hast es erfasst =)

Es ist ein falsche Glaube zu denken, Listenelemente seien besser zu formatieren. Der einzige Vorteil gegenüber Divs ist die Barrierefreiheit, sprich eine blinde Person kann beim Surfen erkennen "aha, hier ist was aufgelistet", anstattt "aha....wieder irgendwelche divs".
Divs sind hingegen weitaus flexibler, was das Layout angeht. Haben als anderer Element-TYP auch andere Attribute, die es in Listenelementen nicht gibt.

Ich weiß auch nicht, wieso du diverities als "nicht empfehlenswert" bezeichnest ?! Gute Webdesigner arbeiten ausschließlich (!) mit solchen ;p

..: ~ kb ~ @ kb-online

Go to the top of the page

webwalker

Beginner

Posts: 6

Date of registration: Feb 22nd 2009

Occupation: Web-Entwickler, Musiker

0

6

Monday, May 18th 2009, 1:51pm

Ich empfehle ja auch nicht überall Listenelemente zu nehmen, lediglich zum dem obigen Beispiel würde ich eine formatierung durch Listenelemente präferieren.

Dein Einwurf mit den (erlaubten) Attributen ist sicherlich ein Grund sich für DIVs zu entscheiden, gerade wenn man gewisse Attribute benötigt und das DOM Konstrukt valide sein soll.

In dem Fall von oben:

Source code

<div style="width:{$style['tableoutwidth']}" cellpadding="{$style['tableoutcellpadding']}" cellspacing="{$style['tableoutcellspacing']}" align="center" border="{$style['tableoutborder']}" class="tableoutborder">
<div style="background-image:url({$style['imagefolder']}/hostlogo.gif);background-repeat:no-repeat;width:138px;height:119px;"></div>
<div><a href="index.php{$SID_ARG_1ST}"><img src="{$style['imagefolder']}/home.gif" border="0" alt="{$lang->items['LANG_GLOBAL_TOINDEX']}" title="{$lang->items['LANG_GLOBAL_TOINDEX']}" /></a></div>
<div><a href="#"><img src="{$style['imagefolder']}/hostingmenue.gif" border="0" alt="Hostingmenü" title="Hostingmenü" /></a></div>
<div><a href="#"><img src="{$style['imagefolder']}/rechtliches.gif" border="0" alt="Rechtliches" title="Rechtliches" /></a></div>
<div><a href="#"><img src="{$style['imagefolder']}/sonstiges.gif" border="0" alt="Sonstiges" title="Sonstiges" /></a></div>
<div><a href="#"><img src="{$style['imagefolder']}/partner.gif" border="0" alt="Partner" title="Partner" /></a></div>
<div><a href="#"><img src="{$style['imagefolder']}/statistiken.gif" border="0" alt="Statistiken" title="Statistiken" /></a></div>
<div><a href="#" onClick="dropdownmenu(this, event, menu1, '121px')" onMouseout="delayhidemenu()"><img src="{$style['imagefolder']}/produkte.gif" border="0" alt="Unsere Produkte" title="Unsere Produkte" /></a></div>
<div style="background-image:url({$style['imagefolder']}/headend.gif);background-repeat:no-repeat;width:52px;height:119px;"></div>
</div>

... empfinde ich diese Konstruktion als Grauenhaft, nicht wegen den verschachtelten DIVs, sondern der Style Formatierungen. Dazu kommt natürlich auch der schlechte Überblick, was die Fehlersuche bei einer wirklich großen Seite enorm erschwert.

Und die Behauptung das gute Web-Entwickler ausschliesslich riesige DIV Verschachtelungen nutzen ist aus meiner Erfahrung heraus absolut Falsch.

Ich habe schon viele Webseiten von angeblichen Web-Gurus gesehen die es nicht mal durch den W3C-Vaildator geschafft haben. Auch sind so manche Formatierungen absoluter Käse.

Das beste Beispiel sind meistens irgendwelche DIV Boxen mit einer Überschrift, einem Text und einem Link, welche oft wie folgt ausschauen:

	Source code
1 2 3 4 5	<div class="box"> <div class="title">Überschrift</div> <div class="content">Inhalt</div> <div class="link><a href="#">ein link</a></div> </div>

Würdest du denn eine solche Schreibweise dem einer logischen Nutzung von HTML Elementen vorziehen?

cheers

This post has been edited 1 times, last edit by "webwalker" (May 18th 2009, 1:53pm)

Go to the top of the page

[~KB~]

Development Center Team

Posts: 1,577

Date of registration: Oct 14th 2002

225

7

Monday, May 18th 2009, 4:50pm

Der Fall oben ist sicherlich nicht schön, liegt aber eher daran, dass es ein Template-File ist und die Style-Attribute dynamisch generiert werden.

Quoted

Original von webwalker
Und die Behauptung das gute Web-Entwickler ausschliesslich riesige DIV Verschachtelungen nutzen ist aus meiner Erfahrung heraus absolut Falsch.

Ich habe schon viele Webseiten von angeblichen Web-Gurus gesehen die es nicht mal durch den W3C-Vaildator geschafft haben. Auch sind so manche Formatierungen absoluter Käse.

Das zeigt doch dann eher, dass die "Web-Gurus" wohl doch keine so guten Programmierer sind, als dass div-Nutzung fehl am Platze ist

Ich weiß zwar nicht, auf welche "logische Nutzung von HTML Elementen" du bei deinem Beispiel anspielst, aber ja, ich würde divs bevorzugen =) Einfach aus dem Grund, Content von Layout und Design zu trennen. Der "Trend" geht immer weiter in diese Richtung. Tabellen werden z.B. so gut wie gar nicht mehr verwendet (jedenfalls versucht man es), immer mehr Websiten stellen auch auf XML um. Ich habe z.B. selbst eine HP nur mit DIVs erstellt, dazu paar Styles die sich nur in CSS/JS unterscheiden.
Dein Code ist übrigens ein sehr schönes Beispiel für Trennung von Contend und Layout

auch wenns nicht beabsichtigt war.

Damit will ich ja nicht sagen, dass man alles andere vergessen sollte, doch die Entwicklung geht eindeutig in diese Richtung. Hatte es leider so verstanden, dass du generell von DIVs abrätst, was ich nicht so ganz verstehen konnte =)

..: ~ kb ~ @ kb-online

This post has been edited 1 times, last edit by "[~KB~]" (May 18th 2009, 4:51pm)

Go to the top of the page

webwalker

Beginner

Posts: 6

Date of registration: Feb 22nd 2009

Occupation: Web-Entwickler, Musiker

0

8

Monday, May 18th 2009, 6:25pm

Mein Beispiel bezog sich aber nicht auf die Web-Guru Seiten, sondern auf Webseiten im allgemeinen.

Mit der logischen Nutzung von HTML Elementen beziehe ich mich auf die Aufteilung in meinem Beispiel. Das Beispiel zeigt eine Überschrift, Inhalt sowie einen link. Ein solches Layout lässt sich mit den entsprechenden HTML Tags - welche es schon gibt - umsetzen:

Source code

<ul>
  <li>
    <h2>title">Überschrift</h2>
    <p>Inhalt</p>
    <a href="#">ein link</a>
  </li>
  <li>
    <h2>title">Überschrift</h2>
    <p>Inhalt</p>
    <a href="#">ein link</a>
  </li>
  <li>
    <h2>title">Überschrift</h2>
    <p>Inhalt</p>
    <a href="#">ein link</a>
  </li>
</ul>

Grundlegend kann man doch sagen das semantisches Markup einer unlogischen diveritis vorzuziehen ist.

Hier eine ganz nette Lektüre: http://www.vorsprungdurchwebstandards.de…antischer-code/

Wichtig ist auch korrekter CSS Code.
Gerade wenn man viele insich verschachtelte HTML Elemente formatieren muss ist es wichtig die HTML Struktur auch im Stylesheet zu übernehmen.

	Source code
1 2 3 4 5 6 7	div.news ul li h2 -------------------------------------- div.news ul li img oder div.news ul li img.logo

Hat man eine Webseite mit mehreren Stylesheets welche selbst mehr als tausend Zeilen Code beinhalten, ist es wichtig die Struktur der HTML Seite auch in der Formatierung zu übernehmen. Andernfalls müsste man immer schauen ob nicht eine Klasse schon vorhanden ist, da sich sonst eventuell die Style Definitionen überschreiben könnten.

cheers

This post has been edited 2 times, last edit by "webwalker" (May 18th 2009, 6:31pm)

Go to the top of the page

[~KB~]

Development Center Team

Posts: 1,577

Date of registration: Oct 14th 2002

225

9

Monday, May 18th 2009, 7:58pm

Dagegen habe ich auch nichts einzuwenden, ganz im Gegenteil, finde ich sehr vorbildlich. Sollte es öfter geben! =)
Im Zuge der Barriefreiheit in einigen Gebieten ist sowas sogar zur Pflicht geworden.

Schätze, wir haben uns einfach etwas missverstanden =)

..: ~ kb ~ @ kb-online

This post has been edited 1 times, last edit by "[~KB~]" (May 18th 2009, 7:59pm)