Willkommen in der Webstatt Zum Webstatt Blog und Stories
trefixxx am 10.04.06 11:16

Hallo,

und zwar habe ich gestern meinen Internetauftritt neu gecodet - mit mehr oder weniger Erfolg. Und zwar wollte ich von diesen IE7-PNG-Patches weg, weil diese schon mal verantwortlich für das lange Laden meiner Seite sind (bis zu 4 oder 5 Sekunden).
Da ich nicht wirklich so bewandert bin auf dem Gebiet, hab ich es mal als Übungsaufgabe gesehen. Trotzdem gibt es hier noch Unterschiede vom FF/Opera zum IE.

Frage: Ist der Code wirklich besser? Kann man ihn verwenden? Kann man den Code kürzen? Wie bekomme ich den Anzeigefehler im IE weg?

Link 1 (Code momentan): http://www.tr-art.de/v3/index.php (2,238 sek. - DSL 2000)
Link 2 (Code neu): http://www.tr-art.de/demo/tr/index.html (1,483 sek.- DSL 2000)

Wär super, wenn mir jemand helfen könnte.
Vielen Dank!

netcup.de Warum gibt es hier Werbung?
fish fish am 10.04.06 11:35

link2=offline

trefixxx am 10.04.06 11:41

sorry, hab's gefixt...

Mirco Mirco am 10.04.06 12:03

Habs eben überflogen

<div class="spacer">&nbsp;</div>
Was soll das den sein? Wer den Code richtig macht braucht keine Spacer.

<div id="navi">
Navigation<br/>
Navigation<br/>
Navigation
</div>

Dafür gibt's Listen!

<span class="title">Quote Box</span>
Für Überschriften sind <h1>, <h2> und <h3> da. Außerdem werden die von den SuMas besser bewertet.

trefixxx am 10.04.06 14:53

ein weiteres (großes) Problem hab' ich hier.

Ich möchte die Box (s. Anhang) so coden, dass sich de Länge an den Inhalt, der später hinzugefügt wird, anpasst.
Die Schwierigkeit: Der schwache Verlauf unter der dunklen Leiste. Auf dieser soll der Text teilweise noch liegen (Beispiel siehe hier).

Bisher habe ich es folgendermaßen gelöst:
<div id="spacer_box">
<img src="images/lay_box_top.gif" alt="Box Top"/>
<div style="background-image: url(images/lay_box_con.gif); background-repeat: y; width: 157px; height: 100%; margin-top: -2px;">
<div class="box">
<h1>Quote Box</h1>
"Es tötet nichts so sicher wie das Leben" (<span class="autor">W. Raabe</span>)
</div>
</div>
<img src="images/lay_box_bot.gif" alt="Box Bottom"/>
</div>


div.box {
width: 140px;
margin : 0px auto;
margin-top: -18px; }


Aber der IE hat Probleme mit dem margin - x px. Dieser Teil wird nämlich von dem Bild überdeckt.
habt ihr eine bessere lösung oder tipps, wie ich das machen kann?

Viele Grüße,
trefixxx

leo am 10.04.06 14:57

die idee von tollem code:

inhalt und präsentation sind komplet getrennt

inhalt -> markup
präsentation -> css

hast du die webdeveloper extension? dann geh mal auf deine seite und schalte alle css styles aus (strg umschalt s)

dann sollte man den inhalt deiner website immernoch erfassen und logisch strukturiert vor sich wiederfinden.

zudem über die semantik (bedeutung) der einzelnen text-teile und elemente gedanken machen.

willst du einen bereich grafisch ausschmücken oder irgendwie präsentieren? -> div
das is kein bereich sondern text? -> span

ein textabsatz ->
eine logisch auflistung (nummeriert, punkte) -> ul / ol
eine begriffserklärung / definition -> dl

zudem hieraschisch gegliederte überschriften (h1-h6), wie bereits erwähnt.

gruß, leo.

// guck dir http://www.456bereastreet.com/lab/teaser/one_image/ mal an.

trefixxx am 12.04.06 14:30

danke @ leo. Hab mich an einiges gehalten.

Aber nun ein weiteres Problem, mit dem ich nicht klar komme - probiere seit stunden rum...
Wieso klappt folgendes nicht?

A.link1 {
display: block;
width: 54px;
height: 9px; }

A.link1:hover {
width: 94px;
height: 9px;
background: url(images/lay_hover_artist.gif); }


<ul>
<li><a href="#" class="link1"><img src="images/lay_link_artist.gif"></a></li>
</ul>


Ich verzweifle so langsam...

leo am 13.04.06 01:08

was klappt denn nicht? evtl gibts das online zum angucken?

gruß, leo.

trefixxx am 13.04.06 18:31

Dir anschauen kannst du das auch alles hier:
http://www.tr-art.de/demo/tr/

Frage: Wie kann ich eigentlich diesen Punkt bei der ul-Liste weg bekommen? Oder habe ich die Falsche Liste gewählt? Mit DL sind keine Punkte vorhanden...

Al3x0r Al3x0r am 13.04.06 18:39

mit
list-style-type:none;
kriegst du die Punkte weg.

mfg Alex

trefixxx am 13.04.06 18:46

danke, klappt...

li {
list-style-type: none;
margin-top: 2px;
margin-left: -19px; }


Wieso klappt denn der Hover nicht?

Al3x0r Al3x0r am 13.04.06 20:14

A.link1 {
display: block;
width: 54px;
height: 9px; }

A.link1:hover {
width: 94px;
height: 9px;
background: url(../images/lay_hover_artist.gif); }


probiers mal so aus.

Bei der css Datei musst du den Pfad zum Hoverbild aus der Sicht der css datei und nicht aus der Sicht der Datei, in die sie geladen wird, angeben.

mfg alex

trefixxx am 14.04.06 09:54

Danke, es funktioniert...
So, meine vorerst letzte Frage:

Ich habe momentan einen hover für text-links angegeben:

body a:link, body a:visited, body a:active {
font-size:10px;
color: #E07B24;
text-decoration: none; }

body a:hover {
color: #E07B24;
text-decoration: none;
border-bottom: 1px dashed; }


Leider wird diese linkformatierung auch auf Bilder übertragen. Also verlinkte Grafiken bekommen auch einen border-bottom.

Da hat auch kein

a img {
border: 0px; }


geholfen. Gibt es vielleicht so ein CSS-Befehl:

text a:link, body a:visited, body a:active {...}

:D

Danke für eure Hilfe...

Creative Commons Lizenzvertrag
Alle Inhalte des Webstatt-Archivs stehen unter einer Creative Commons Namensnennung - Weitergabe unter gleichen Bedingungen 3.0 Unported Lizenz.

Impressum & Kontakt