Webstatt.org - Community seit 2006 - 2012 (2024?)

Div-Suppe?

user-333
10.04.2006 09: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): 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 user-158k!
Avatar user-180
10.04.2006 09:35
link2=offline
may the force be with you. but mostly with me.
user-333
10.04.2006 09:41
sorry, hab's gefixt...
Avatar user-257
10.04.2006 10: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.
user-333
10.04.2006 12: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>zwinkern

                             </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
user-228
10.04.2006 12: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ß, user-228.

// guck dir http://www.456bereastreet.com/lab/teaser/one_image/ mal an.
user-333
12.04.2006 12:30
danke @ user-228. 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...
user-228
12.04.2006 23:08
was klappt denn nicht? evtl gibts das online zum angucken?

gruß, user-228.
user-333
13.04.2006 16: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...
Avatar user-118
13.04.2006 16:39
mit
list-style-type:none;

kriegst du die Punkte weg.

mfg Alex
Ich brauche keine Signatur
user-333
13.04.2006 16:46
danke, klappt...

li {

   list-style-type: none;

   margin-top: 2px;

   margin-left: -19px; }


Wieso klappt denn der Hover nicht?
Avatar user-118
13.04.2006 18: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
Ich brauche keine Signatur
user-333
14.04.2006 07: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 {...}


Fettes Grinsen

Danke für eure Hilfe...