Suche im Forum:
Suchen


Autor Nachricht
Beitrag06.08.2009 um 17:20 (UTC)    
Titel: CSS: Box um Inhalt [Tutorial]

Hallo,
Erstmal hoffe ich das dieses Tutorial von den Mods verschoben wird! Wink

So in diesem Tutorial handelt es sich um die sogenannte
"Box um Inhalt"
Bsp: http://img.webme.com/pic/c/choose-snails/bild_bui.png

Als erstes fügen wir die Codes
für den Header (Bild/1) und für den Rahmen (Bild/3) ein.

Zitat:

#box_header1 {
padding-left: 10px;
padding-top: 3px;
text-align: left;
color: #ffffff;
font-size: 12px;
width: 567px;
margin: 0 auto;
height: 20px;
background-image: url(http://www2.pic-upload.de/18.07.09/nvw8efaljcmb.png);}


#box_content1 {
background: #ffffff;
width: 555px;
border: 1px solid #CCCCCC;
padding: 10px;
margin: 0 auto;}



Legende
padding-left: 10px; = (Positioneirung)
padding-top: 3px; = (Positioneirung)
text-align: left; (Schrift-Position,Hier: linksbündig)
color: #ffffff; = (Schriftfarbe)
font-size: 12px; = (Schriftgröße)
width: 567px; = (Breite in Pixeln
margin: 0 auto; = (Header zentriert)
height: 20px = (Höhe in Pixeln)
background-image: url(Url des Headers?)


background: #FFFFFF; = (Hintergrundfarbe Text)
width: 555px; = (Breite des Rahmen)
border: 1px solid #CCCCCC; = (Rahmenstärke + farbe)
padding: 10px; = (Zusätzliche Breite, kann weggelassen werden)
margin: 0 auto;} = ( Rahmen zentriert)/b]




So im Design wäre es dann erledigt!
Jetzt müsst ihr die Seiten auswählen,
wo diese Box sein soll.

Klickt links,oben auf "Quellcode";
dann ist vor euch euer Quellcode.

Da fügt ihr dann folgendes ein damit es so aussehen soll:



Zitat:
<div id="box_header1" style="text-align: left;"><span style="font-family: Arial;">Start<br />
</span></div>
<div id="box_content1"> Der restliche Quellcode , ohne diesen Wink </div>


[b]Legende
style="text-align: left;"> = (Das "left" könnt ihr auch durch center erstezen dann
wird die Schrift im Header (Bild/3) zentriert)


<span style="font-family: Arial;"> = ( Bei Arial kann auch deine eigene
Schriftart stehen)


Start = ( Hier kann dein Titel stehen, der auf dem Header zu sehen ist! )



Ich hoffe euch gefällt mein Tutorial!
lg Wink


Zuletzt bearbeitet von choose-snails am 07.08.2009, 01:06, insgesamt 10-mal bearbeitet
Beitrag06.08.2009 um 17:44 (UTC)    
Titel:

Hallo,

an sich ein nettes Tutorial.
Ich belasse es aber noch hier. In den Tutorials sollen vorerst wirklich nur die wichtigsten Dinge rein, um die Übersicht zu bewahren. Daher muss ein Allgemein-Interesse bestehen für das Tutorial.

Verbesserungsvorschläge sind dennoch gerne gesehen.
Wichtig ist jedoch: Wenn das Tutorial in den BEreich verschoben wird, werde ich alle Kommentare darauf entfernen, damit im Tutorialbereich auch nur das tutorial stehen wird. Kommentare könnten störend sein Wink


Was mein Kritikpunkt daran ist:
Es ist nur für einzelne Seiten gemacht. Wer es für alle Seiten haben möchte, muss es immer im Quellocdemodus seiner Seite hinzufügen - diese Methode ist allgemein sowieso unschön, wenn man etwas als Quellcode einer einzelnen Seite hinzufügen möchte.
Zudem das dann nur eine Möglichkeit von vielen ist, sich den Content einer bestimmten Seite zu "verschönern" mit einer solchen Box.
Das könnte sich anhäufen. Ich werde hier aber auch noch weitere Rückmeldungen abwarten.

Vielleicht gibt es ja User oder auch einen anderen Moderator hier aus dem Forum, der eine gute Begründung hat, warum es nicht so schlimm ist (mein Kritikpunkt).
Mal sehen ^^


Liebe Grüße,

Jan aka "Asgar"
______________
Beitrag06.08.2009 um 17:49 (UTC)    
Titel:

Ok,
Aber wie du siehst habe ich mir viel Mühe gegeben
(9-mal bearbeitet Wink )

Hoffe es kann doch verschoben werden Sad

lg
Beiträge der letzten Zeit anzeigen:   


Powered by phpBB © 2001, 2005 phpBB Group
Deutsche Übersetzung von phpBB.de