Was ist neu?
Digital Marketing & Webmaster Forum

Digital Marketing, Internet-Technologien, Metaverse und mehr interessieren Dich? Registriere Dich gleich kostenlos, um Mitglied zu werden! Sobald Du angemeldet bist, kannst Du loslegen, Themen und Beiträge veröffentlichen und mit anderen Mitgliedern in Kontakt treten! Wir wünschen Dir einen anregenden Austausch!

CSS Layouts für Cam-Content

jahweh

- Premium Member -
hallo,
ich weis zwar nicht ob man dafür verwendung hat, aber da mein cms noch nicht fertig ist und ich ein wenig zeit heute nachmittag hatte, habe ich mal für die allgemeinheit ein paar css layouts für cam-content entworfen. zur auswahl stehen momentan 5 verschiedene 2 spalige layouts.

wenn jemand interesse haben sollte, dann einfach auf Cam-Content Layouts klicken.
vielleicht gefällt jemanden sogar das eine oder das andere layout.

valls dies der fall sein sollte, dann einfach downloaden, entpacken, mit content füllen und spaß haben :mrgreen:

für anregungen und oder kritik wäre ich wirklich dankbar.

gruß
jahweh
 

mesh

- Premium Member -
Wenn Du so codierst wie Du schreibst würde ich das Zeugs nicht mal mit der Kneifzange anfassen...
 

NicoEroAds

- Premium Member -
Den Code würde ich in der Tat mal überarbeiten. Menus sind Listen und nicht einfach DIV Container untereinander. Außerdem

<div id="zelle" style="width:25%;"><span id="content"><a href="#" title="#">Dein Link Hier</a></span></div>

id´s sollten Unqiue sein pro Seite, also müsstet du da schon classes verwenden und diese Struktur die du da bei den Links machst, macht keinen Sinn. So sollte es sein:

<ul>
<li><a href"#">LINK</a></li>
</ul>

Ist übersichtlicher und auch noch valider Quellcode.
 

jahweh

- Premium Member -
<div id="zelle" style="width:25%;"><span id="content"><a href="#" title="#">Dein Link Hier</a></span></div>
was ist denn an dem code so falsch? die tabelle wird doch über css definiert

id´s sollten Unqiue sein pro Seite, also müsstet du da schon classes verwenden und diese Struktur die du da bei den Links machst, macht keinen Sinn. So sollte es sein:

wie meinst du das denn mit "id´s sollten Unqiue sein pro Seite"

<ul>
<li><a href"#">LINK</a></li>
</ul>

das ist auf jedenfall übersichtlicher. da hast du recht. aber welcher große unterschied besteht zu dem code den ich verwendet habe?
 

develish

- Premium Member -
was ist denn an dem code so falsch? die tabelle wird doch über css definiert

Dann brauchste die Style-Infos ja nicht im Quelltext, ne?


wie meinst du das denn mit "id´s sollten Unqiue sein pro Seite"

Er meint das so wie die W3C es meinte. Sinngemäß das CSS IDs im Dokument eineindeutig zu verwenden sind, also nur genau EINmal und nicht wie class mehrfach. Es ist sehr unsauber und nicht standartkonform CSS IDs mehrfach zu verwenden, selbst wenns für ein gleiches HTML-element ist.


das ist auf jedenfall übersichtlicher. da hast du recht. aber welcher große unterschied besteht zu dem code den ich verwendet habe?

Sauberkeit? Wohlgeformtheit?

Der W3C Validator schlägt bei eben genau diesen IDs in deinem Template01 mehrfach an (http://validator.w3.org/check) und bemängelt auch andere attribute wie TARGET als nicht XHTML 1.0 Strict konform.
 

Steve

- Premium Member -
wie meinst du das denn mit "id´s sollten Unqiue sein pro Seite"

Die id sollte pro HTML-Dokument genau einmal (1x) Verwendung finden. Nicht zweimal, nicht dreimal ... einmal!

Und: Listen, Listen, Listen! Google mag Listen. Listen lassen den Quellcode aufgeräumter und das Dokument strukturierter erscheinen. Sie sind deutlich flexibler, als irgendwelche Containerkonstrukte und lassen sich besser formatieren.
 

jahweh

- Premium Member -
ich muss nochmal nach hacken. ob ich das richtig verstanden habe.

wenn ich in das html dokument folgendes schreibe

<ul id="tabelle">
<li><a href="#"><img src="img/test.gif" alt="Bildbeschreibung"></a></li>
<li><a href="#"><img src="img/test.gif" alt="Bildbeschreibung"></a></li>
<li><a href="#"><img src="img/test.gif" alt="Bildbeschreibung"></a></li>
<li><a href="#"><img src="img/test.gif" alt="Bildbeschreibung"></a></li>
</ul>
<ul id="tabelle">
<li><a href="#"><img src="img/test.gif" alt="Bildbeschreibung"></a></li>
<li><a href="#"><img src="img/test.gif" alt="Bildbeschreibung"></a></li>
<li><a href="#"><img src="img/test.gif" alt="Bildbeschreibung"></a></li>
<li><a href="#"><img src="img/test.gif" alt="Bildbeschreibung"></a></li>
</ul>

und in die css dies

ul#tabelle {
margin: 0; padding: 0.5em;
text-align: center;
border: 0px solid black;

}
ul#tabelle li {
list-style: none;
display: inline;
margin: 0.5em; padding: 0;
}

dann wäre das konform oder wird bei dem beispiel auch etwas doppelt verwendet?
das wäre ein beispiel für die navigation. wenn ich dann ein anderen code für die seiten navigation verwende müsste das gehen oder?
 

jahweh

- Premium Member -
ich hab den css code jetzt umgeschrieben. es wäre nett, wenn heute abend einer von euch einmal bei einem template nachschauen könnte ob der code diesmal sauberer ist. denn bis heute abend habe ich dann die templates hochgeladen. ich habe mich an die ul li vorgaben gehalten wie es mir geraten von NicoEroAds wurde.

der code sieht dann so aus

<ul>
<li><a href"#">LINK</a></li>
</ul>

die navigation und das menü hat ebendfall eine unique id dadurch erhalten.
danke nochmal für den hinweis.

gruß
jahweh
 

develish

- Premium Member -
<div id="navigation">

<ul id="navigation">

was an "eindeutig" und "IDs sind nur EINMAL zu verwenden war unklar ausgedrückt"?

der W3C Validator meint dazu folgende:

Line 37, Column 10: ID "navigation" already defined
<ul id="navigation">

An "id" is a unique identifier. Each time this attribute is used in a document it must have a different value. If you are using this attribute as a hook for style sheets it may be more appropriate to use classes (which group elements) than id (which are used to identify exactly one element).

Ausserdem beastandet er noch

Line 12, Column 44: end tag for "meta" omitted, but OMITTAG NO was specified
<meta name="robots" content="index,follow">

You may have neglected to close an element, or perhaps you meant to "self-close" an element, that is, ending it with "/>" instead of ">".

da fehlt ein einfacher Slash vor der spitzen klammer zu wie oben angegeben


Als letztes folgendes

Line 109, Column 92: there is no attribute "target"
…e="Geile Amateur Sexcam Girls" target="_blank">Sexcam</a> Copyright by DOMAIN …

You have used the attribute named above in your document, but the document type you are using does not support that attribute for this element. This error is often caused by incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Transitional" document type to get the "target" attribute), or by using vendor proprietary extensions such as "marginheight" (this is usually fixed by using CSS to achieve the desired effect instead).

Alles nachzusehen hier The W3C Markup Validation Service

DEV
 

develish

- Premium Member -
naja so triftige gründe sind das doch nicht oder?

nein, nur syntatischer art... so als würdest du verkacktes php coden das nicht geparst oder kompiliert werden kann weils fehler enthält..

nur bei html haben die parser-schreiber mit leuten gerechnet, die nicht fehlerfrei html schreiben können
 

jahweh

- Premium Member -
ist das nun irrelevant oder hat es irgendwelche auswirkungen? denn wenn es welche habe sollte, dann überarbeite ich die layouts noch einmal.
 

develish

- Premium Member -
ist das nun irrelevant oder hat es irgendwelche auswirkungen? denn wenn es welche habe sollte, dann überarbeite ich die layouts noch einmal.

relevant... irrelevant... man weis es nicht inwiefern nicht-valider code auswirkungen aufs ranking oder so hat oder ob es sonst irgendwelche auswirkungen hat.

Aber "schöner" ist natürlich valider code für jeden programmierer.
 

blackmexx

- Premium Member -
Ich finde das immer Lustig wenn die Leute daher kommen ach W3C sind doch eh nur Spinner. Ich würde gern mal die Gesichter sehen wenn man in denn Baumarkt geht eine M13 Mutter kauft vom Hersteller A weil man die M13 Schraube von Hersteller B zuhaue hat und die dann nicht passt weil Hersteller A sich sagt ach wozu DIN sind doch eh nur Spinner.

Die W3C vorgaben sind wie DIN vorgaben damit alles überall gleich ausschaut!

@jahweh wenn du Professionelles Webdesign betreiben würdest (ist kein Vorwurf) wüsstest du was ich meine. Ich verlange z.B. für die Anpassung an denn IE immer extra Geld und für denn IE6 mach ich schon seit fast einem Jahr keine Anpassungen mehr.
 

Nicole

- Premium Member -
Da war ich ja mal neugierig und habe einige meiner Seiten prüfen lassen. Ergebnis, Fehler bei den Tags: <, ", >. Mein CSS scheint total IO, aber zum Beispiel meckert er schon beim Link zum CSS sowie auch bei den Metas.

Nun weiß ich nicht, ob es zwingend ist, dass man vor und nach den Tags immer ein Leerzeichen haben muss, damit das nicht mehr angemeckert wird.

Ich schreibe das HTML jedoch nicht selbst, sondern arbeite mit dem CS3 Dreamwaver.
 

blackmexx

- Premium Member -
Hi Nicole,

Nun weiß ich nicht, ob es zwingend ist, dass man vor und nach den Tags immer ein Leerzeichen haben muss, damit das nicht mehr angemeckert wird.

du meinst bestimmt denn Abschluss des Tags?

<meta .... /> Das Leerzeichen vor dem Slash ist nicht zwingend schaut nur übersichtlicher aus.

Es kommt auch immer darauf an was man schreibt HTML oder XHTML
bei HTML kommt dieser Slash nicht rein ausschließlich bei XHTML.

Zum Dreamwaver auch er schmeißt unnötig Code in denn Quelltext ist jetzt die Frage wie du Arbeitest in der Quelltext Ansicht oder in der WYSIWYG Ansicht
 

Steve

- Premium Member -
@Nicole

Wenn du den Quelltext selbst schreibst (also nicht WYSIWYG machst), dann kann ich dir ganz wärmstens Nusphere's phpED ans Herz legen. Das ist primär zwar eine PHP-IDE, hat aber einen wirklich ausgefeilten und vor allem ausgereiften HTML-Editor onboard.

Und je schärfer du den Echtzeitparser einstelltst, desto sauberer wird am Ende der Code.
 

weedy

- Premium Member -
@ Nicole
Du kannst bei Dreamweaver die Art der Codierung einstellen damit der Code als XHTML 1.0 STRICT ausgegeben wird.
Beim Dreamweaver CS2 kann man das beim erstellen eines neuen Dokumentes voreinstellen, bei CS3 bstimmt auch. Voreingestellt ist da meist HTML 4.01 Transitional.
Aber auch nachträglich kann man mit einem Klick auf Datei >>> Konvertieren , das Codierungsformat ändern. Dreamweaver passt dann den Code automatisch an und CSS Fehler werden farblich markiert, sofern die stylesheet Datei geöffnet ist.
 

Nicole

- Premium Member -
Danke, Weedy, hat in der Tat geklappt. Und mein CSS ist handgeschrieben und fehlerfrei, stolz guck.. lach

Nicole
 
Oben