| von Gon |
| in ein paar Tagen ^^ Ich poste den Link dann mal hier |
| von Ori |
| Du hast die Seite nicht zufällig irgendwo online? Das erleichtert das Fummeln ungemein.. |
| von Gon |
Ori schrieb am 23.07.2006 20:30
Probier mal, den margin vom h2 auch festzulegen, zumindest jedenfalls margin-top. |
Ändert leider nichts am Problem, aber trotzdem danke für den Tipp. |
| von Ori |
| Probier mal, den margin vom h2 auch festzulegen, zumindest jedenfalls margin-top. |
| von Gon |
hmm, ich habe wie im Artikel Custom Borders II meine Eckgraphiken mit relativen Positionsangaben "aus dem div herausgezogen" und nun scheint irgendetwas einen Teil der Grafik zu verdecken... und es wird mehr verdeckt, wenn man die Schriftgröße erhöht (strg + Mausrad)
die oberen drei bilder zeigen den Fehler, das untere, wie die Grafik aussehen sollte...
kleiner Hinweis, die Grafiken sind Platzhalter, die später durch die eigentlichen Grafiken (mit gleichen Maßen) ersetzt werden, nicht über die Qualität wundern, ich bin noch kein MS Paint Meister ^^
Der Fehler tritt nicht nur im IE auf, es ist absolut nichts oberhalb (ich hab zum Test alles andere entfernt) und da man den Untergrund sehen kann, schließe ich, dass es nicht ÜBERdeckt wird.
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16: | #maintank {
background-color: #0F7896;
border-style: ridge;
border-width: 4px;
border-color: #FFFFFF;
border-top: 0;
margin-top: 45px;
padding: 15px 15px 45px 15px;
width: 100%; }
#maintank h2 {
background: url("../images/maintank_topborder.gif") top left no-repeat;
position: relative;
left: -24px;
top: -39px;
padding: 23px 15px 15px 15px; } |
1:
2:
3:
4:
5: | <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
###### Der Inhalt der Seite ######
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<div id="maintank" class="column">
<h2>Lorem Ipsum</h2> |
Ich hoffe irgendjemand kennt das Problem und versteht es. Ein Freund von mir, den ich eben über ICQ zur Hilfe rufen wollte, kennt das Problem zwar aber versteht es nicht. Wir vermuten nur, dass es irgendwie mit der Line-height zusammenhängt. Er macht nur Probleme, wenn die Grafik mit Text verknüpft ist (wie zB einem h2).
MfGon |
| von Gon |
ok, ich hab mich mit dem Tutorial (und seinem Nachfolger) beschäftigt und auch ein anderes Tutorial gefunden, das mir hilft zu verwirklichen, was ich vor habe.
http://www.alistapart.com/articles/holygrail
Ich möchte etwa diese Aufteilung haben
[imghttp://img101.imageshack.us/img101/8426/designkonzepttg4.png[/img]
Das ist der grobe Aufbau meiner Seite:
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29: | <html>
<head>
</head>
<body>
<div id="banner">
</div>
<div id="container">
<h1> </h1>
<div id="offtank">
<div id="maintank" class="column">
<h2> </h2>
<div class="articlebody"> </div>
<div class="articlefooter"> </div>
</div>
<div id="navigationtank" class="column">
</div>
</div>
<div id="footer">
<p> </p>
</div>
</div>
</body> |
der Footer ist mit absicht im Hauptteil der Seite drinn.
Maintank und Navitank sollen nebeneinander stehen. Der Rahmen um den Haupotteil der Seite soll ein eigener sein, wie oben im Artikel beschrieben. Dabei werden die Grafiken wie folgt verankert.
Ecke oben links = container
Ecke oben rechts = container h1
links (repeat-y) = offtank
rechts (mit repeat-y) = maintank
Ecke unten links = footer
Ecke unten rechts = footer p
Nun treten ein paar Probleme auf. Manche mögen IE6 bedingt sein, ich habe leider derzeit nicht die Möglichkeit, es mir in anderen Browsern anzusehen.
Ich habe wie im Artikel über den heiligen Gral die Aufteilung der Seite unternommen, nur dass ich die rechte Spalte vorerst weggelassen habe.
Fehler #1. Sowie ich die Höhe des Browserfensters verändere, landet der Navigationtank rechts neben dem Maintank. Lade ich die Seite mit der neuen Höhe des Fensters neu (f5) dann stimmt es wieder.
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35: | body {
background: url("../images/body_bg.jpg");
background-attachment: fixed;
padding: 15px;
min-width: 400px; /* ### zwei mal die Breite der Navi + 100 ### */ }
#container {
padding-left: 150px; }
#container .column {
float: left;
position: relative; }
#maintank {
width: 100%; }
#navigationtank {
width: 150px;
margin-left: -100%;
right: 150px; }
#footer {
clear: both;
width: 100%; }
|
Ist das ein Problem von position: relative ?
MfGon |
| von Gon |
danke, ich habs eben nur überflogen aber das sieht genau nach dem aus, was ich gesucht habe. Werds zu hause mal in Ruhe lesen.
MfGon |
| von chip |
| Ich hoffe, das hilft: http://www.alistapart.com/articles/customcorners/ |
| von Gon |
Hi
Tabellen sind dazu da, tabellarische Daten darzustellen. So wird es mir in jedem Tutorial gesagt. Leider habe ich früher eine Tabelle verwendet für etwas, das ohne nicht gelingen will.
Die Tabelle auf der Seite hatte 3 * 3 Felder, die äußeren 8 waren für Grafiken, 4 Eckbilder statisch, 4 Kantenbilder mit repeat um sich der Größe des mittleren Feldes anzupassen. Im Mittleren Feld war der eigentliche Inhalt. Das ganze hatte die Funktion einer Infobox, die aussah wie ein Datapad aus einem SciFi Film.
Da ich leider noch nicht so versiert bin in Sachen HTML, will es mir nicht gelingen, das ganze ohne die Tabelle darzustellen. Ich wäre für sachdienliche Hinweise sehr zu Dank verpflichtet.
MfGon
P.S.:Ich hoffe, diese einfache Skizze verdeutlicht, was ich meine, für den Fall, das ich mich ungenau ausgedrückt habe.
---
'Never imagine yourself not to be otherwise than what it might appear to others that what you were or might have been was not otherwise than what you had been would have appeared to them to be otherwise.'
(the Duchess) |
|
