Wenn ich nur wüsste...

SR200X · 07. Nov. 2005

Hallo dkdenz,

vielen Dank erst einmal für die Mühe die Du Dir mir mir machst

Ich habe auf Deine neuen Vorlage basierend erst einmal "weiter" gemacht... allerdings bin ich doch schon wieder noch an viele Probleme gestoßen:

http://www.robert-jungk-oberschule.de/ots/div-gebastel4.html#

Vielleicht hatte ich mich auch zu unklar ausgedrückt?! Aber auf jedenfall soll halt das Bild "links" und rechts" oeben "Fix" sein... und nicht prozentual. Deswegen habe ich diese Titelleiste nun oben in das Inhalt-Div mit eingefügt und die beiden Bilder jeweils oben in die "links und Rechts" mit rein. Somit klappt wenigstens die Anordnung. Allerdings baut er mir da jetzt noch 'n Zeilenumbruch, der mir nicht klar ist :-(

Wichtig wäre eigentlich auch, dass das mittlere, Bild (im_header_mitte) jetzt auch "fest" (517 Pixel breit) ist, der Rest davon (im_header_links und im_header_rechts) sich jeweils prozentual auf die restliche, noch darstellbare Seite ausbreiten.

Das nächste, ganz wichtige "Problem", das in Deiner Vorlage leider auch noch nicht gelöst wurde, sind die Hintergründe für die Div's "links" und "rechts". Diese sind zwar da (waren sie eigentlich schon immer), nur eben nicht bis unten auf der jeweiligen Seite, sondern nur oben! Das ist ja auch ganz entscheidend.

Ansosnten ist's natürlich schon toll. Auch vielen Dank für das tolle Navigationsmenü. Wie kann ich dieses Menü einrücken? Mittels einer Tabelle? Das ist ja dann wieder nicht richtig, oder? Hab's rechts auch mal zentriert.. aber das passt leider auch nicht genau. Daher wäre eine "X-pixelweite" Einrückung schon besser.

Und zur letzten Frage dann. Wenn dann alles steht, fülle ich den Inhalt einfach nur das "Inhalts" Div. Dann speichere ich die Seite jeweils neu für jeden neuen Unterpunkt wieder komplett so ab. Wenn ich dann mal das Menü verändere, muss ich das aber auch auf allen Seiten gleichsam tun. Und so wäre dann also ein aktuellerund zeitgemäßer Seitenaufbau. Richtig?

LG
Sebastian

P.S. Hier auch nochmal der neue Quelltext:

Code:

[COLOR=Blue]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Layout</title>
<style type="text/css">
/* <![CDATA[ */	
* {
padding:0px;
margin:0px;
}
#banner {
background: #FF00FF;
height: 70px;
background-image:url(oben.jpg);
}
#header {
height:100px;
width:100%;
}
#im_header_links {
float:left;
width: 20%;
height: 100px;
background: #ccc;
background-image:url(m1.jpg);
}
#im_header_mitte {
float:left;
width:60%;
height: 100px;
text-align:center;
background:#00ff00;
background-image:url(mz.jpg);
}
#im_header_rechts {
float:left;
width: 20%;
height: 100px;
background: #ccc;
text-align:right;
background-image:url(m6.jpg);
}
#links {
position: absolute;
left: 0px;
width: 173px;
color: #564b47;
height: 100%;
background-color: #ff99cc;
background-image:url(links.jpg);
}
#inhalt {
margin: 0px 173px 0px 173px;
border-left: 0px solid #564b47;
border-right: 0px solid #564b47;
background-color: #ffffff;
height: 100%;
}
#rechts {
position: absolute;
right: 0px;
width: 173px;
color: #564b47;
height: 100%;
background-color: #ff99cc;
background-image:url(rechts.jpg);
}
/*navigation----------------------------------------------------*/
a.menu:link, a.menu:visited, a.menu:hover, a.menu:active {
  background:#8FBC8F;
  width:151px;
  text-decoration:none;
  display:block;
  border:1px dashed #000;
}
a.menu:hover {
  background:#556B2F;
}
ul {
  list-style-type:none;
}
/* ]]> */	
</style>
</head>


<body>

<div id="banner">oben</div>



<div id="links" >
<img src="ml.jpg" border=0>
<br>
<ul>
<li><a class="menu" href="#">Link Nr. 1</a></li>
<li><a class="menu" href="#">Link Nr. 2</a></li>
<li><a class="menu" href="#">Link Nr. 3</a></li>
<li><a class="menu" href="#">Link Nr. 4</a></li>
<li><a class="menu" href="#">Link Nr. 5</a></li>
<li><a class="menu" href="#">Link Nr. 6</a></li>
</ul>

</div>



<div id="rechts" align=center>
<img src="mr.jpg" border=0>
<br>
<ul>
<li><a class="menu" href="#">Link Nr. 7</a></li>
<li><a class="menu" href="#">Link Nr. 8</a></li>
<li><a class="menu" href="#">Link Nr. 9</a></li>
<li><a class="menu" href="#">Link Nr. 10</a></li>
<li><a class="menu" href="#">Link Nr. 11</a></li>
<li><a class="menu" href="#">Link Nr. 12</a></li>
</ul>
</div>



<div id="inhalt">

<div id="header">
<div id="im_header_links">Bild links</div>
<div id="im_header_mitte">Bilder mitte</div>
<div id="im_header_rechts">Bild rechts</div>
</div>

INHALT<br />
Test 1<br>
Test 1<br>
Test 1<br>
Test 1<br>
Test 1<br>
Test 1<br>
Test 1<br>
Test 1<br>
Test 1<br>

Test 10<br>
Test 1<br>
Test 1<br>
Test 1<br>
Test 1<br>
Test 1<br>
Test 1<br>
Test 20<br>
Test 1<br>

Test 1<br>
Test 1<br>
Test 1<br>
Test 1<br>
Test 1<br>
Test 30<br>
Test 1<br>
Test 1<br>
Test 1<br>

Test 1<br>
Test 1<br>
Test 1<br>
Test 1<br>
Test 1<br>
Test 1<br>
Test 1<br>
Test 1<br>
Test 1<br>

Test 1<br>
Test 1<br>
Test 1<br>
Test 1<br>
Test 1<br>
Test 1<br>
Test 10<br>
Test 1<br>
Test 1<br>

Test 1<br>
Test 1<br>
Test 1<br>
Test 1<br>
Test 20<br>
Test 1<br>
Test 1<br>
Test 1<br>
Test 1<br>

Test 1<br>
Test 1<br>
Test 30<br>
Test 1<br>
Test 1<br>
Test 1<br>
Test 1<br>
Test 1<br>
Test 1<br>

Test 1<br>
Test 1<br>
Test 1<br>
Test 1<br>
Test 1<br>
Test 1<br>
Test 1<br>
Test 1<br>
Test 1<br>

Test 1<br>
Test 1<br>
Test 1<br>
Test 10<br>
Test 1<br>
Test 1<br>
Test 1<br>
Test 1<br>
Test 1<br>

Test 1<br>
Test 20<br>
Test 1<br>
Test 1<br>
Test 1<br>
Test 1<br>
Test 1<br>
Test 1<br>
Test 30<br>

Test 1<br>
Test 1<br>
Test 1<br>
Test 1<br>
Test 1<br>
Test 1<br>
Test 1<br>
Test 1<br>
Test 1<br>

</div>
</body>
</html>[/COLOR]

SR200X · 07. Nov. 2005

Hab' übrigens gerade festgestellt, dass der oben beschriebene Zeilenumbruch sich verändert bzw. verschwindet, wenn man das Fenster kleiner macht. Dann rutscht aber der rechte 20% Bereich auf den Titel

Da ist irgendwie noch der Wurm drin :-(

dkdenz · 07. Nov. 2005

Welchen Browser benutzt Du denn?

Wie Du siehst, ist es derzeitig noch nicht so weit, dass man mit CSS browserübergreifend ein Pixelgenaues Layout hinbekommt, ohne massig Hacks und/oder Browserweichen einzubauen.
Man sucht sich einen Kompromiss raus, indem man z.B. ein Layout entwirft, welches nicht den traditionellen Layouts gleicht.
Wenn Du allerdings unbedingt so ein klassisches Layout 'brauchst', wäre ein einfaches Tabellenkonstrukt oder ein Frameset (gibt's auch in XHTML) vielleicht doch die bessere, weil unkompliziertere und stabilere Wahl.

Was das Menü betrifft, da empfehle ich einen include.

Wenn Du etwas den Quelltext 'studierst', wirst Du mit der Zeit von selbst darauf kommen, wie Du es anstellen musst, das er Dir 'gehorcht', denn im Prinzip sind das alles Wiederholungen.

Und: es macht mit keine Mühe, Dich zu unterstützen. Ich lerne dadurch immer noch selber was dazu.

SR200X · 07. Nov. 2005

Hm - zum Seiten aufbauen nehme ich meist den IE, da er ja immerhin auch noch von gut 60% aller User genutzt wird. Somit eindeutig die Mehrheit.

Beim Mozilla Firefox sind die Probleme mit der Überlappung rechts über den Titel beim "zusammenschieben" des Bildes auch vorhanden. Dort endet allerdings "links" und "rechts" unten auf der Seite. Das ist ja schon mal nicht schlecht ;-) Schlag' mich bitte nicht, aber wäre es auch möglich, "links" und "rechts" noch weiter laufen zu lassen? um genau zu sein soweit, wie ich dort diese "Pseudozeilen" eingefügt habe? Also natürlich sind die belanglos, ich wollte damit ja nur simulieren was passiert, wenn man im Inhaltsfeld z.b. einen langen Text o.ä. eingebunden hat. Hier wäre es mir lieb oder wünschenswert, wenn rechts und links eben immer genauso lang gingen?!

Aber wenn das nicht geht, muss ich halt damit leben.

dkdenz · 07. Nov. 2005

Ich guck mir das nochmal an, wenn ich fitter bin. Bin kurz vor'm Einschlafen.

Komisch, in meinem FireFox sehe ich den von Dir beschriebenen Effekt nicht,
ebenso nicht beim Opera und dem Konqueror.

Das der IE leider die grösste Verbreitung hat, ist hinlänglich bekannt.
Ich mache das allerdings genau andersrum.
Da der IE die meissten Zicken macht, weil er sich unzureichend an die Standards hält,
ist meine erste Wahl der FireFox. Sieht's bei dem ok aus, ist dies meisst auch im Opera so.
Dann kommt der Feinschliff für den IE.
Und wenn der gar nicht kooperieren will,
kriegt der eine eigene CSS und 'ne CSS-Browserweiche verpasst.

SR200X · 07. Nov. 2005

Bei Dir beim Firefox passiert es also nicht, dass wenn Du dein Fenster deutlich verkleinerst, im endeffekt irgendwann der Titel nicht mehr zu sehen ist, da sich das rechts davon liegende Bild über ihn legt?

Also bei mir definitiv. Wenn Du benötigst kann ich auch mal einen Screenshot machen.

Aber leg' Dich ruhig erstmal hin..

gute n8

dkdenz · 08. Nov. 2005

So, besser kriege ich das jetzt auch nicht mehr hin.
(dafür mussten allerdings Deine Hintergrundbilder links und rechts dran glauben)
http://dkmd.de/tests/layout/layout.html

Bei Dir beim Firefox passiert es also nicht, dass wenn Du dein Fenster deutlich verkleinerst, im endeffekt irgendwann der Titel nicht mehr zu sehen ist, da sich das rechts davon liegende Bild über ihn legt?

Achso das, ja das passiert bei mir auch.
Aber in der Mitte feste Pixelmaße und links und rechts flexibel ist schwierig.
Du musst da schon Kompromisse eingehen, ansonsten wird das Layout instabil.

Daher wäre eine "X-pixelweite" Einrückung schon besser.

Bitte etwas präziser...

Ansonsten empfehle ich mal ein paar Blicke hier hinein,
um mit der Materie etwas vertrauter zu werden:
http://de.selfhtml.org/css/index.htm

SR200X · 09. Nov. 2005

Also erst mal wieder vielen Dank, für Deine tolle Vorlage..

Trotzdem hatte ich jetzt nochmal etliche Stunden rumgebastelt und hab's nur über eine Tabelle im Container lösen können. Ich hoffe das ist "gestattet" ?!

http://www.robert-jungk-oberschule.de/ots/div-gebastel8.html

Oder ist das jetzt auch wieder völlig "scheiße"?

Wenn ich aber nochmal 'n Wunsch bzw. viel mehr 'ne Frage äussern kann...

Folgendes "Phänomen" tritt noch auf, was mich nicht ganz zufrieden stellt. Wenn man die Seite sehr stark in der breite "zusammenschiebt", kann man irgendwann den oberen Bereich sorllen. also nicht wirklich "oben", sondern halt die ganze Seite. Das finde ich eignetlich auch klasse und sehr gut. Was mich dann dabei nur noch ärgert ist, dass dann der rechte Container "mitwächst". Kann man den nicht irgendwie richtig auf seine "Breite" (173 Pixel) festnageln?

Liebe Grüße
Sebastian

Guten Morgen, ich hab' auch grad' nochmal was festgestellt. Urspünglich gab' es drei DIv-Hintergründe (oben, links und rechts). Von denen hast Du nur noch "oben" übrig gelassen. Da Du ja jetzt den Seitenaufbau geändert hast, kann ich in die links und rechts leider nicht mehr so einfach die alten Hintergründe (links.jpg und rechts.jpg) einfügen. Ist das sehr kompliziert das wieder möglich zu machen oder geht das gar nicht mehr?

dkdenz · 10. Nov. 2005

Uuups, grade erst gelesen:

SR200X schrieb:
Guten Morgen, ich hab' auch grad' nochmal was festgestellt. Urspünglich gab' es drei DIv-Hintergründe (oben, links und rechts). Von denen hast Du nur noch "oben" übrig gelassen. Da Du ja jetzt den Seitenaufbau geändert hast, kann ich in die links und rechts leider nicht mehr so einfach die alten Hintergründe (links.jpg und rechts.jpg) einfügen. Ist das sehr kompliziert das wieder möglich zu machen oder geht das gar nicht mehr?

dkdenz schrieb:
So, besser kriege ich das jetzt auch nicht mehr hin.
(dafür mussten allerdings Deine Hintergrundbilder links und rechts dran glauben)

Ich habe das deswegen so gelöst, denn ansonsten würde Links und Rechts nicht bis zum Seitenende gehen.

Wenn ich nur wüsste...

SR200X

New member

SR200X

New member

dkdenz

New member

SR200X

New member

dkdenz

New member

SR200X

New member

dkdenz

New member

SR200X

New member

dkdenz

New member