• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

[Code unter die Lupe nehmen] Kleine 1-Seiten HP

rest0ck

rest0ck

Neues Mitglied
Hey,
hab hier vor 2 Tagen nen Thread erstellt (http://www.html.de/html-und-xhtml/3...plorer-kompatibel-zellengroesse-fixieren.html), weil mein Tabellenlayout nicht IE Kompatibel war. Daraufhin hab ich mich in css und dem Tabellen-losen Design eingelesen und von neuem begonnen. Die Homepage ist wirklich sehr klein und es geht mir nur um den Code.

Das Tabellenlayout: Referenzen
Das neue: css test

Also Code bitte bewerten (man darf natürlich auch das Design kritisieren, das hab ich jetzt aber nicht vor zu ändern ..will erstmal html/css üben) und dann hätte ich noch eine Frage:

Ich hab den Bildern ein padding-left von 197 gegeben, jetzt ist allerdings das Bild für den Browser so groß wie padding + Bild - aber ich will das Bild verlinken, wie kann ich dann den "klick-bereich" auf das Bild reduzieren? ._.
-> Zu sehen bei dem 2. Bild von oben, habs mal verlinkt ..

Danke schon mal,
rest0ck
 
Zuletzt bearbeitet:
Werbung:
Viel gibts ja noch nicht zu bewerten ;)
Soweit in Ordnung, vielleicht etwas zu viele Divs. Aber leere Div-Container solltest du vermeiden (header, footer). HTML-Elemente zeichnen Inhalt aus. Ohne Inhalt hat ein Tag keine Daseinsberechtigung.
Padding-Bereiche werden in Links immer mit einbezogen. Probier mal, den Abstand mit margen zu erzeugen.
 
Hey, danke schonmal. Mit Margin funktioniert es bei allen Links, ausser dem ganz oben eben, das ist etwas gesondert, weil ich da noch

HTML: 
#rf1-bild {
	background-image:url(Bilder/l1.gif);
	padding-left:197px;
}
dranhänge (der verlauf Links hat ja noch so bisschen farbe) - wenn ich es mit margin-left mache, dann ist zwar das Bild immer noch an der richtigen Stelle, das Hintergrundbild aus dem #rf1-bild aber nicht mehr zu sehen? :/

/e Habs durch so eine Map gelöst, funktioniert : )
Oh und index.html ersetzt, Tabellenlayout adé

http://dl.dropbox.com/u/7066359/hp/index.html

Gute Nacht.
 
Zuletzt bearbeitet:
Werbung:
Hey, dieser Valid-check (?) spuckt 2 Fehler aus:

Line 18, Column 90: there is no attribute "TARGET"
Zum Vergrößern anklicken....
HTML: 
…ape="rect" coords="190,5,0,253" href="rf/3x.jpg" target="_self" alt="3x"></map>
Was heißt das? Also target= gibts doch, oder nicht? :s

Oh und woher weiß ich, welchen Doctype ich verwenden sollte? Hab einfach einen kopiert :) (html 4.0.1)

rest0ck
 
Hallo,
würde deine neue Seite gern bewerten, allerdings komme ich bei dem Link nur auf eine 404-Seite.

MfG Icy
 
Du wählst den Doctype, mit dem du arbeiten möchtest ;)
Den HTML 4.01 kannst du nehmen, ich würde dir zu XHTML 1.1 oder dem HTML5-Doctype raten, der ist am einfachsten:
<!doctype html>
target ist veraltet und hat in modernem Code nichts mehr zu suchen.
 
Werbung:
Icy schrieb:
Hallo,
würde deine neue Seite gern bewerten, allerdings komme ich bei dem Link nur auf eine 404-Seite.

MfG Icy
Zum Vergrößern anklicken....
Hey, sry der Link ist nun:
Referenzen

Du wählst den Doctype, mit dem du arbeiten möchtest
Den HTML 4.01 kannst du nehmen, ich würde dir zu XHTML 1.1 oder dem HTML5-Doctype raten, der ist am einfachsten:
<!doctype html>
target ist veraltet und hat in modernem Code nichts mehr zu suchen.
Zum Vergrößern anklicken....
Okay hm, bei XHTML müsste ich nun aber noch Sachen umschreiben, oder? und HTML5 unterstützt doch noch nicht jeder Browser, richtig?
Hab target rausgenommen, den validcheck hat die Seite bestanden :>
Welche Vorteile würde XHTML bieten?
 
Hab grad nochmal alles geändert, also die Bilder. Es war nicht mittig, rechts war mehr Platz :> .. fiel mir vorher garnicht auf.
Okay gut, ich lasse es bei der hp nun wohl einfach bei HTML 4.0.1 und schau mir dann mal XHTML an.
Also wegen des Headers, da wird dann einfach die Font quasi ausgeblendet, aber wo soll ich das bei mir anwenden?
In dem <h2> steht ja wirklich Text und dort ist auch die Überschrift. Sollte ch vor das h2 noch ein h setzen, dem ich dann
HTML: 
.headerReplacement {
   text-indent: -9999px
}
zuteile?
 
Werbung:
Am Rande: Veto gegen XHTML 1.1. ;) Das muss nach Spezifikation als XML ausgeliefert werden und kann deshalb im IE nicht gerendert werden. XHTML 1.0 oder HTML5.
 
Sollte ch vor das h2 noch ein h setzen, dem ich dann
HTML-Code:
.headerReplacement {
text-indent: -9999px
}
zuteile?
Zum Vergrößern anklicken....

Richtig. Du zeichnest eine Überschrift mit HTML ganz normal als Überschrift aus. DANACH kommt erst das Gestalten mit CSS, in diesem Fall Ersetzen der Überschrift durch ein Bild.
Das ist eine Sache, die viele bei der Gestaltung falsch angehen. Zuerst die Informationen mit HTML auszeichnen, dann erst Gestalten dieser Informationen.
 
[...]

/e Okay, lag an hight:39px, dachte ich muss es angeben..

/e2 Andere Frage: Wie bestimme ich, welches Hintergrundbild weiter oben liegt? Denn im Content-Div ist der Hintergrund, also dieser Kasten da eben mit dem verlauf nach aussen, der geht um alle anderen herum und nun auch um den Footer. zz ist der Footer weiter oben, aber wie bestimme ich das genau, der soll nicht auf einmal in nem anderem Browser drunter liegen :eek:

/e3 Noch was: Die Bilder sind ja alle verlinkt, allerdings anscheinend nicht nur das Bild, sondern auch unten am Links, da nach links ist auch noch ein kleiner Streifen anklickbar (Links vom Hintergrund), das liegt wohl daran, das jedes Bild ein margin-left von x pixeln hat, aber wie lässt sich das verhindern, ausser überall eine map wie beim 1. zu erstellen?
 
Zuletzt bearbeitet:
Werbung:
@e2: Üblicherweise liegt das innerste geschachtelte Element am weitesten oben.

HTML: 
<div style="background: red; padding: 10px;">
    <div style="background: green; padding: 10px;">
        <div style="background: blue; padding: 10px;">
            Hallo Welt!
        </div>
    </div>
</div>

Alternativ lässt sich das per z-index beeinflussen, was aber in der Regel nicht zu empfehlen ist.

- SELFHTML: Stylesheets / CSS-Eigenschaften / Positionierung und Anzeige von Elementen

@e3: Das kann ich spontan nicht nachvollziehen. Bei mir sind nur die Bilder anklickbar. Du hast eben auf die Bilder immer noch ein Stück Hintergrund mit draufgemalt.

- http://dl.dropbox.com/u/7066359/hp/Bilder/rf5.gif
 
Alles klar, danke - dann brauch ich mir ja keine Sorgen machen das es falsch interpretiert wird von nem Browser - hab übrigens mal auf Browsershot.org meine HP getestet -> Überall wird sie richtig angezeigt (ausser eben auf Lynx, oder Browsern die keine Hintergrundbilder erlauben (: )

@e3
Wenn ich bei Google Chrome das "Element untersuche", dann zeigt er mir das hier als "verlinkt" an:

und da + auf das Bild kann ich auch draufklicken. Ich teste mal eben mit dem IE (hab keinen weiteren Browser drauf..)
.. okay, da hab ich DEN Fehler nicht, allerdings funktioniert dort anscheinend diese Map auf Bild1 nicht, dort kann ich auch auf den dicken Rand links klicken (padding-left) :s

rest0ck
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben