mein code/ zuviele blockelemente

html.de-Forum HTML, XHTML & CSS
1

hallo
da ich wiederholt darauf hingewiesen wurde, dass es meistens eine bessere lösung für inhalt einer seite als divs würde ich gerne wissen wo ich in meinem code einen unprakischen oder gar falschen tag verwendet habe. mir fällt nämlich auf, dass mein code zwar valide ist aber dennoch fast nur aus divs besteht.
hier der code

[code]

Simon Kulozik - Blog
home
blog
gästebuch
links

Mein Blog:

Das ist mein Blog. hier habe ich ein paar Sachen zusammengestellt, die ich
in meiner Freizeit mache.
Ich werde hier z.B. Sachen vorstellen, die ich gebaut habe
oder vielleicht auch mal ein selbstgemachtes Video veröffentlichen.
Viel Spass!

Meine Bierkiste:

Das hier ist ein Computer den ich in eine Bierkiste montiert habe.
Technische Details:
Von diesem Pc ist nicht viel zu erwarten.
Er wurde mehr aus Spass gebaut, als später mal wirklich was zu nutzen.
CPU: 350mhz
Arbeitsspeicher: 64mb Ram
Hauptspeicher: 10gb
Laufwerke: DVD+-Rom Brenner
Grafikkarte: Zumindest keine 3D Unterstützung
Soundkarte: 2.0
Anschlüsse: 2X USB1
Systhem: Damn Smal Linux

Bilder:




Freeborden:

Seit neustem habe ich das Freeborden für mich entdeckt.
Ich fahre seit Ende April. Hier ist mein erstes Video:

Wie gesagt noch nichts Tolles. Bald folgen hoffentlich noch ein paar!

Impressum

[/code]der link ist: [webhosting24 - Login](http://skulozik.ohost.de) wäre euch für eure ratschläge dankbar mfg EDIT: im moment ist der link nicht erreichbar ka wieso:(
2

Navigation:
Statt immer

zu schreiben solltest du das ganze als Liste anlegen:

[code]

  • blub
[/code]Anstatt mit [I]div.navi[/I] sprichst du die Elemente dann selbstverständlich mit [I]#navi li[/I] bzw. [I]#navi li a[/I] oder [I]#navi li a img[/I] an.

Überschriften:
Solltest du anders strukturieren, es gibt nur h3. Es sollte bei h1 anfangen (z.B. der Seitentitel) und dann logisch nach unten gehen.

Text:
Gehört normalerweise in p-Tags.

Und noch ein paar Kleinigkeiten:

bla

geht besser so: [code]

bla

[/code]Warum hast du da ein ... ohne dazugehöriges ... stehen?

Und du hast irgendwie sehr viele Rahmen/Inhalt/etc.-divs, da die Seite z.Z. nicht erreichbar ist kann ich nicht sehen, ob die alle „nötig“ sind ^^

Ist mir jetzt so auf die Schnelle aufgefallen :wink:

3

danke für die antwort!
aber wie bekomme ich jetzt die punkte von den

  • weg?
    da sind nämlich jetzt vor jedem bild jeweils ein punkt
    und wie schaffe ich es, dass die links nebeneinander sind?
    mfg

    • 4

    ul {list-style-type:none;}, und evtl mit display:inline; oder die lis floaten lassen (schwachsinn)

    5

    Was hat diese Code-Untersuchung im Websitecheck verloren?

    In den (X)HTML-Bereich verschoben.

    6

    Hi,

    im Gegenteil, die float-Variante sollte man vorziehen, weil man es da nur mit Blockelementen zu tun hat und man so mehr Kontrolle über die Darstellung
    hat.:wink:

    koslowski

    7

    also ich habe jetzt mal den code folgendermaßen verändert:

    [code]

    • home
      • blog
    • gästebuch
    • links
    [/code]das css [code]ul { list-style-type: none; } #navi li { float: right; margin-right: 10px; margin-left: 20px; }[/code]aussehen tuts folgendermaßen :( :[Simon Kulozik - Blog](http://skulozik.ohost.de/blog.html) darunter ist noch die "div-navi" - wie es sein soll @maxi: ich finde beides ist vertretbar mfg
    8

    funktioniert aber nit richtig…gelle?

    hast 2x il statt li…:wink:

    9

    :oops:oops
    (gibt es denn il auch denn mein editor hat keinen fehler angezeigt!?)
    ich würde jetzt die ganze ul in einen div packen und left: 20px; für diesen definieren; dafür gibt es aber warscheinlich eine bessere lösung…:lol:
    kann ich für den ul-tag left: xx; definieren?
    oder muss ich da was ganz anderes machen.
    mfg

    10

    left: 20px; geht doch nur bei absoluter Positionierung oder?

    Warum nicht einfach einen Außenabstand nach links von 20 Pixeln ( margin-left:20px; )?

    In ein div packen ist sowieso Quatsch, die ul ist ja quasi das div :wink:

    11

    ul und div sind zumindest beides Blockelemente, sprich du kannst beide ähnlich formatieren

    12

    so…
    das hätten wir
    jetzt noch die überschriften sortieren… hab ich gemacht
    ins in em ungeändert…
    gibt es sonst noch hässlichkeiten?
    mfg

    13

    Moin,

    jep, der Link der aktuellen Seite ist nicht hervorgehoben und hat keinen Hover-Effekt. Das ginge , wenn du eine Grafik hast, die alle Zustände hat.

    Diese Grafik wird a als HG-Grafik zugewiesen und der Grafikteil mit dem benötigten Zuständ jeweils per background-position ins Bild geschoben.
    Ich tät auch a noch display:block mit auf den Weg geben.

    Beispiel:

    XHTML:

    [code]

    [/code]CSS dazu: [code] #navigation1 { width:775px; } #navi01, #navi02, #navi03 { position:relative; display:block; float:left; width:187px; height:44px; } #navi01 a, #navi01 strong, #navi02 a, #navi02 strong, #navi03 a, #navi03 strong { position:absolute; display:block; width:100%; height:100%; text-align:center; } /*---------Aktuellen Menuepunkt hervorheben------------------*/ #hannes #navi01 strong, #georg #navi02 strong, #stefan #navi03 strong { background:url(../images/navi.jpg) no-repeat 0px -44px; }

    /----------Normalzustand der Links------------------------/
    #navi01 a,
    #navi02 a,
    #navi03 a {
    background:url(…/images/navi.jpg) no-repeat 0px 0px;
    text-decoration:underline;
    }

    /-----------:hover und:focus-Zustand der Links-----------/
    #navi01 a:hover,
    #navi01 a:focus,
    #navi02 a:hover,
    #navi02 a:focus,
    #navi03 a:hover,
    #navi03 a:focus {
    position:absolute;
    width:100%;
    height:100%;
    color:#2e5c89;
    background:url(…/images/navi.jpg) no-repeat 0px -44px;
    font-weight:bold;
    }

    #navigation1 li a span.links,
    #navigation1 li span.links {
    display:block;
    height:33px;
    width:100%;
    padding-top:11px;
    }[/code]Die Navigrafik ist 187x88 groß. Ein „Zustand“ ist also 187x44 groß.

    So funktioniert das technisch.

    Da du in Menüs noch nicht so fit bist, lies dich doch mal
    hier ein.
    Weiter unten ist ein Tutorial zu allen Arten von Navis.:wink:

    koslowski

    14

    Meine Zehnägel!
    Sie rollen sich wieder auf!
    Woher hast Du diese Vorgehensweise eigentlich? Nein, ist kein Anschiss an Dich :slight_smile: Ich weiß, dass das außer Dir etliche machen, aber ich verstehe eigentlich gar nicht warum? Es gibt überhaupt keinen logischen, sinnvollen, verständlichen Grund, ein Element mit einem anderen Element einzupacken, nur um diesem dann Formatierungen zu vergeben. Warum nicht die Liste selber entsprechend formatieren?

    Deine Liste mit der Bierkiste ist noch keine Liste. Danach fällt wohl auch div.index weg, weil überflüssig.
    Deine Bilder sollten auch als Liste vorliegen. Dann fallen auch die
    weg.
    Am Stylesheet könnte man noch viel optimieren. border-color/style/width kann man nämlich unter der Eigenschaft „border“ zusammenfassen, z.B. border:1px dashed #000000;
    img.left und img.right z.B. unterscheiden sich nur im margin. Man könnte eine gemeinsame Klasse nehmen, da die identischen Formatierungen reinschreiben und die unterschiedlichen in eine eigene Klasse. Man kann im class-Attribut in HTML auch mehrere Klassen angeben, z.B. class=„gemeinsam eigenes“.
    Klassennamen und IDs mit Hinweisen auf das Layout sind ungünstig (left, right, etc.), wenn Du das mal änderst, musst Du alle HTML-Dateien ändern oder damit leben, dass ein element#left plötzlich auf der rechten Seite steht!

    Gruß,
    -Efchen

    15

    z.B. border:1px dashed #000000;

    das finde ich sehr sehr sehr unübersichtlich und ich muss mir die reihenfolge merken^^
    bei dem rest schaue ich mal hab nur heute keine zeit mehr
    mfg und danke an euch alle für eure mühe

    16
    1. Tendenziell ist ein Code, der 2 Zeilen kürzer ist, übersichtlicher, als ein langer.
    2. Wie alt bist Du? 15? Und schon Probleme, sich eine Reihenfolge zu merken?
    3. Was bedeuten eigentlich immer die zwei „^^“ am Ende Deiner Zeilen?

    Gruß,
    -Efchen

    17

    Reihenfolge spielt keine Rolle, du kannst es auch anders ordnen :wink:

    18

    wenn ich mir keine reihenfolge merken muss dann ist gut :smiley:
    @elfchen ^^ ist ein zeichen um auszudrücken dass man es nicht ganz so ernst meint oder wenn es zwei sinne eines satzes gibt dass man den „nicht bösen“ meint
    ersetzt das was man in der sprache mit der betonung oder einem gesichtsausdruck machen würde

    mfg

    19

    ^^ bedeutet in der Chattersprache Augenbrauen hochziehen.
    Das soll, glaube ich, sowas wie Ironie ausdrücken.

    20

    Nein, das bedeutet nicht „Augenbrauen hochziehen“. Das kommt aus dem Asiatischen und ist ein Augenpaar nach „Anime-Style“: :slight_smile: => glücklich/zufrieden

    Wird aber irgendwie zu allem möglichen missbraucht :wink: