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

mein code/ zuviele blockelemente

Status
Für weitere Antworten geschlossen.
littleHtml Freak

littleHtml Freak

Mitglied
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: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title>Simon Kulozik - Blog </title>
  <link rel="icon" type="image/ico" href="bilder/htmlfreak.ico" />
  <link href="style.css" type="text/css" rel="stylesheet" />
  <!--[if IE]>
  <style type="text/css">
  @import url(styleIE.css);
  </style>
  <![endif]-->
</head>
<body>

<div class="navi">
    <a href="index.php"><img src="bilder/home.png" alt="home" class="navi" /></a><br />
</div>
<div class="navi">
    <a href="blog.html"><img src="bilder/blog.png" alt="blog" class="navi" /></a><br />
</div>
<div class="navi">
    <a href="guestbook.php"><img src="bilder/gaestebuch.png" alt="gästebuch" class="navi" /></a><br />
</div>
<div class="navi">
    <a href="links.html"><img src="bilder/links.png" alt="links" class="navi" /></a><br />
</div>

<br />
<div class="rahmen" >
    <div class="inhalt">
        <div class="inhalt_c">
            <h3>Mein Blog:</h3>
            Das ist mein Blog. hier habe ich ein paar Sachen zusammengestellt, die ich<br />in meiner Freizeit mache.<br />Ich werde hier z.B. Sachen vorstellen, die ich gebaut habe<br /> oder vielleicht auch mal ein selbstgemachtes Video veröffentlichen.<br />Viel Spass!<br />
                <div class="index">
                    <h3>Seitenindex:</h3>
                                    <a href="#bierkiste">1. Meine Bierkiste</a>
                                    <a href="#freeborden">2. Freeborden</a>
                </div>
        </div>
        <div class="inhalt_l">
            <h3><a name="bierkiste">Meine Bierkiste:</a></h3>
            Das hier ist ein Computer den ich in eine Bierkiste montiert habe.<br />
            <ins>Technische Details:</ins><br />Von diesem Pc ist nicht viel zu erwarten.
            <br />Er wurde mehr aus Spass gebaut, als später mal wirklich was zu nutzen.<br />
            CPU: 350mhz<br />Arbeitsspeicher: 64mb Ram<br />Hauptspeicher: 10gb<br />Laufwerke: DVD+-Rom Brenner<br />Grafikkarte: Zumindest keine 3D Unterstützung<br />Soundkarte: 2.0<br />Anschlüsse: 2X USB1<br />Systhem: Damn Smal Linux<br />
        </div>
            <h3>Bilder:</h3>
             <img class="right" src="bilder/pc1.jpg" /><br />
             <img class="left" src="bilder/pc2.jpg" /><br />
             <img class="right" src="bilder/pc3.jpg" /><br />
             <img class="left" src="bilder/pc4.jpg" />
        <div class="inhalt_l">
            <h3><a name="freeborden">Freeborden:</a></h3>
            Seit neustem habe ich das Freeborden für mich entdeckt.<br />Ich fahre seit Ende April. Hier ist mein erstes Video:<br />
            <object width="425" height="350"> <param name="movie" value="http://www.youtube.com/v/QW-rM2t9L44"> </param> <embed src="http://www.youtube.com/v/QW-rM2t9L44" type="application/x-shockwave-flash" width="425" height="350"> </embed> </object><br />
            Wie gesagt noch nichts Tolles. Bald folgen hoffentlich noch ein paar!
        </div>
    </div>
</div>
<p class="impressum"><a href="kontakt.html">Impressum</a></p>

</body>
</html>
der link ist: webhosting24 - Login
wäre euch für eure ratschläge dankbar
mfg
EDIT: im moment ist der link nicht erreichbar ka wieso:(
 
Navigation:
Statt immer <div class="navi"> zu schreiben solltest du das ganze als Liste anlegen:
Code: 
<ul id="navi">
  <li><a href="#" title="bla"><img src="." alt="blub" /></a></li>
  <!-- und so weiter -->
</ul>
Anstatt mit div.navi sprichst du die Elemente dann selbstverständlich mit #navi li bzw. #navi li a oder #navi li a img 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:
<h3><a name="bla">bla</a></h3> geht besser so:
Code: 
<h3 id="bla">bla</h3>
Warum hast du da ein <ins>...</ins> ohne dazugehöriges <del>...</del> 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 ;)
 
danke für die antwort!
aber wie bekomme ich jetzt die punkte von den <li> weg?
da sind nämlich jetzt vor jedem bild jeweils ein punkt
und wie schaffe ich es, dass die links nebeneinander sind?
mfg
 
Code: 
ul {list-style-type:none;}
, und evtl mit display:inline; oder die lis floaten lassen (schwachsinn)
 
Was hat diese Code-Untersuchung im Websitecheck verloren?

In den (X)HTML-Bereich verschoben.
 
also ich habe jetzt mal den code folgendermaßen verändert:
Code: 
<body>
<ul id="navi">
    <li>
        <a href="index.php"><img src="bilder/home.png" alt="home" class="navi" /></a>
    </li>
    <il>
        <a href="blog.html"><img src="bilder/blog.png" alt="blog" class="navi" /></a>
    </il>
    <li>
        <a href="guestbook.php"><img src="bilder/gaestebuch.png" alt="gästebuch" class="navi" /></a>
    </li>
    <li>
        <a href="links.html"><img src="bilder/links.png" alt="links" class="navi" /></a>
    </li>
</ul>
das css
Code: 
ul {
    list-style-type: none;
                }
#navi li {
    float: right;
    margin-right: 10px;
    margin-left: 20px;
                }
aussehen tuts folgendermaßen :( :Simon Kulozik - Blog
darunter ist noch die "div-navi" - wie es sein soll
@maxi: ich finde beides ist vertretbar
mfg
 
: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
 
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 ;)
 
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
 
Moin,

littleHtml Freak schrieb:
so...
gibt es sonst noch hässlichkeiten?
mfg
Zum Vergrößern anklicken....

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: 
<ul id="navigation1">
        <li id="navi01"><strong><span class="links">Dr. Johannes Berns</span></strong></li>
        <li id="navi02"><a href="texte/georg"><span class="links">Dr. Georg Berns</span></a></li> 
        <li id="navi03"><a href="texte/stefan"><span class="links">Dr. Stefan Berns</span></a></li>
    </ul>
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;
}
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
 
littleHtml Freak schrieb:
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.
Zum Vergrößern anklicken....
Meine Zehnägel!
Sie rollen sich wieder auf!
Woher hast Du diese Vorgehensweise eigentlich? Nein, ist kein Anschiss an Dich :-) 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 <br /> 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
 
Zuletzt bearbeitet von einem Moderator:
littleHtml Freak schrieb:
das finde ich sehr sehr sehr unübersichtlich und ich muss mir die reihenfolge merken^^
Zum Vergrößern anklicken....
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
 
wenn ich mir keine reihenfolge merken muss dann ist gut :D
@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
 
neuroleptika schrieb:
^^ bedeutet in der Chattersprache Augenbrauen hochziehen.
Das soll, glaube ich, sowas wie Ironie ausdrücken.
Zum Vergrößern anklicken....
Nein, das bedeutet nicht "Augenbrauen hochziehen". Das kommt aus dem Asiatischen und ist ein Augenpaar nach "Anime-Style": ^_^ => glücklich/zufrieden

Wird aber irgendwie zu allem möglichen missbraucht ;)
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben