XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   erster CSS Code (http://xhtmlforum.de/showthread.php?t=49079)

Chaosgoettin 25.11.2007 08:29

erster CSS Code
 
Habe mich jetzt mal getraut, einen CSS-Code zu schreiben für ein Deviantart-Journal. Natürlich hats nid geklappt :D

So soll es aussehen: CSS Journal Snowqueen by *Chaosgoettin on deviantART

Hier ist der code:

Zitat:

.journalbox {
color:#FFFFFF;
text-decoration:none;
background-color:#212121;
background-image:url(http://i183.photobucket.com/albums/x...n/footer.jpg);
background-repeat:no-repeat;
background-position:center bottom;
text-align:center;
border-width:0px;
border-color:#C8C8C8;
}

.journalbox .journaltop img {
display:none;
}

.journaltop {
font-size:0px;
background-color:transparent;
background-image:url(http://i183.photobucket.com/albums/x...n/header.jpg);
background-repeat:no-repeat;
background-position:top center;
width:auto;
height:344px;
}

.journalbox .journaltop h2 {
color:#03F9FB;
font-size:18px;
font-family:Tahoma, Helvetica, Geneva, Arial, SunSans-Regular, sans-serif;
line-height:0em;
letter-spacing:0.01em!important;
background-color:transparent;
text-align:center;
padding:273px 0px 0px 0px;

}

div.journaltop span {
background-color:transparent;
padding-top:0px;
text-align:center;
color:#03F9FB;
font-size:10px;
position:absolute;
top:10px;
left:20px;
letter-spacing:0.0em !important;
}

.journalbox .title {
color:#03F9FB;
font-size:12px;
font-weight:normal;
text-align:center;
letter-spacing:1px;
border-style:solid!important;
border-width:1px 0px 1px 0px!important;
border-color:#FFFFFF!important;
background-color:#212121;
margin:15px -29px 20px -29px!important;
padding:0px 0px 0px 0px!important;
text-decoration:none;
}

.journalbox .textbox {
background-image: url(http://i183.photobucket.com/albums/x...turKopie.jpg);
background-repeat: repeat-y;
color:#FFFFFF;
font-size:12px;
font-family:Tahoma, Verdana, Arial, SunSans-Regular, sans-serif;
background-color:#212121;
background-position:left top;
text-align:center;
margin:15px 5px 10px 5px;
padding:5px 6px 5px 6px;
border-style:solid;
border-width:2px 2px 2px 2px;
border-color:#FFFFFF;
}

.journalbox .textboxbg {
background-color:#545454;
margin:0px 10px 0px 10px;
border-style:solid;
border-width:1px 1px 1px 1px;
border-color:#C8C8C8;
padding:10px;

}

a:link {
color:#03B2FA!important;
font-weight:bold!important;
text-decoration:none!important;
border-width:
border-color:#FFFFFF;
}

a:active {
color:#03B2FA!important;
font-weight:bold!important;
text-decoration:none!important;
}

a:visited {
color:#03B2FA!important;
font-weight:bold!important;
text-decoration:none!important;
}
a:hover {
color:#03B2FA!important;
font-weight:bold!important;
text-decoration:none!important;
}

.list {
background-color:transparent!important;
color:#03F9FB!important;
font:10px Tahoma!important;
text-align:center!important;
margin-top:10px;
padding:0px 10px 70px 20px;
}

.journalbox li.a {
background:inherit;
}

.journalbox .commentslink {
color:#03B2FA!important;
font-weight:bold!important text-decoration:none;
margin:0px 0px 0px 0px;
}

.journalbox .prevlink {
color:#03B2FA!important;
font-weight:bold!important text-decoration:none;
margin:0px 0px 0px 10px;
}

.journalbox .journalbottom a:hover {
color:#03B2FA !important;
}

.credit {
color:#03B2FA;
font-size:9px;
font-family:Tahoma, Verdana, Arial, SunSans-Regular, sans-serif;
text-decoration:none;
text-align:right;
margin-bottom:60px;
margin-right:25px;
}
.credit {
color: #C8C8C8;
font-size: 9px;
font-family: Verdana, Arial, SunSans-Regular, sans-serif;
text-decoration: none;
text-align:right;
margin-bottom:5px;
}
was is daran völligst verkehrt?
Habe übrigens andere Journal-Codes zur Hilfe genommen, ganz alleine aus dem Nichts hätte ich das wohl nicht hinbekommen....aber habe versucht das so gut wie möglich auf mein Zeugs abzustimmen....aber is eben noch etwas früh. Hoffe trotzdem, hier Hilfe zu bekommen, es besser hinzubekommen. Vielen Dank :)

Der Footer wurde mal oben angezeigt, das Problem konnte ich lösen..nun wird er garnicht mehr angezeigt...
Die Hintergrundgrafik wird ebenfalls nicht angezeigt. Die Moodbox soll unten angezeigtw erden, wird aber oben angezeigt, finde den Teil im Code nicht, der dafür zuständig ist :/

hubspe 25.11.2007 10:12

Hi Cecilia,

leider hast du vergessen den (X)HTML-code mitzuposten, mit der Formatierung allein kann man nicht ganz so viel anfangen.

Was mir jetzt anhand der Formatierung auffiel:

Ganz oben vermisse ich einige Formatierungen:
Code:

*  {
        padding:0;
        margin:0;
}
html  {
        height:100%;
}
body  {
      color:#000;
      background-color:#fff;
      text-align:center;
      font:100.01% verdana,arial,helvetica,sans-serif;
}
li, dd  {
        list-style-type:none;
}
h1,h2,h3,h4,h5  {
    font-size:115%;
}
p, li, dt, dd, input, textarea  {
    font-size:115%;
}
img  {
        border-style:none;

So könnte es aussehen.

Durch den *-Selektor setze ich erstmal alle Abstände auf null.
html bekommt eine Höhe.

body bekommt Hintergrundfarbe, Schriftfarbe, Schriftgröße, Schriftarten Textausrichtung.

Listenzeichen werden ausgeschaltet.
Überschriften und Texte kriegen erst mal alle die gleiche Schriftgröße.
Rahmen um Bilder ausgeschaltet.

So sieht es erstmal in allen Browsern gleich aus.
Browser haben nämlich schon intern unterschiedliche Vorformatierungen, die setze ich zurück um mehr Kontrolle über meine Formatierungen zu bekommen.

Ich muß dann weiter unten zwar wieder alles definieren aber um eine einheitliche Darstellung in allen Browsern zu erreichen ist das imho ein notwendiger Schritt.

Im code steht sehr häufig: !important.
Soweit ich weiß, sollte man das nur in Ausnahmefällen und sehr sparsam einsetzen.

Schriftgrößen sollte man eher in % oder em definieren.
Wenn du es in px machst verhinderst du das IE-Benutzer die Schriftgröße verändern können.

line-height:0em; erscheint mir fragwürdig. Kein Abstand zwischen den Textzeilen??

Das waren nur ein paar Sachen.

Ohne dir zu nahe treten zu wollen, wenn du gleich so etwas machen willst ohne so viel davon zu verstehen holst du dir den Frust ins Haus.

Das alles in kleinen Portionen mit kleinen Übungen das du auch immer wieder Erfolgserlebnisse hast fände ich viel wichtiger.

Ich habe im April mit allem angefangen.
Zuerst mal zwei Monate nur HTML Grundlagen.
Dann mit CSS angefangen.

Wieder zwei Monate später meine erste HP gebaut und dafür hier im Forum ordentlich Kritik eingesteckt.

Dann erst mal an den Kritikpunkten gearbeitet.

Jetzt bin ich dabei meine HP's mit elastischen und flüssigen Layouts zu verwirklichen.

Fehler mache ich immer noch eine Menge aber es wird immer besser.

Geduld bei allem halt ich für wichtig.

Ich wünsche dir jedenfalls das du das alles mit der Zeit bewältigst.:)

Viele Grüße
Klaus

Chaosgoettin 25.11.2007 10:25

Hallo Klaus :)
Vielen lieben Dank für die ausführliche Kritik und die Verbesserungsvorschläge :)
Ich dachte, ich probier es nochmal aus, mit Hilfe von anderen Codes von Journalen. Meine Erwartungen waren nicht gerade extremst zuversichtlich, daher war der Fall auch nicht so schlimm tief :P

Der html-code ist nicht sonderlich wichtig, da bei Deviantart schon so einiges vorformatiert und eingeschränkt ist und sich vieles von selbsts chon sein Platz sucht...viel steht in dem code echt nicht drin...eigentlich so ziemlich garnix was ein html code normal ausmacht^^

Code:

<div class="textboxbg><div class="title">::News::</div><div class="textbox">Journal Content</div></div>

<img src="http//desolatecarnage.net/ceci/snowqueen/next_news.jpg">
:iconblissart: :iconginkgografix:

<img src="http//desolatecarnage.net/ceci/snowqueen/featured_artwork.jpg">
:iconblissart: :iconginkgografix:

<img src="http//desolatecarnage.net/ceci/snowqueen/snowing_artwork.jpg">
:iconblissart: :iconginkgografix:</div>

<img src="http//desolatecarnage.net/ceci/snowqueen/clubs_and_stamps.jpg">
:iconblissart: :iconginkgografix:


Ich kann mir vorstellen, daß der CSS dann auch leicht abgewandelt angewendetw erden muß dort???
Nun ja, ich bin jetzt 30, ich werd alt, mein Hirn hört bald auf zu laufen....ich muß mich halt beeilen mit dem lernen :P

paracelsus 25.11.2007 10:25

Servus nach B.!


Ich muss Klaus recht geben.
Du machst dDeine ersten Schritte und wagst Dich an doch recht große Dinge ran.
Als Grafiker der seine Dinge so verwirklichen will wie er sie sieht, kann ich Dich verstehen. Aber das hat mir hier auch schon Kritik eingebracht.
Leider ist das Web nicht aus Papier!

Wenn Du Dich CSS rantraust besorge Dir das Buch von Peter Müller - Little Boxes, dies ist uneingeschränkt zu empfehlen, und genau das Maß für Beginner - soweit ich weiß schreibt er gerade an einer Fortsetzung, freu mich schon.

LG

hubspe 25.11.2007 10:38

Hi Cecilia,

ich bin 51 und scheintot, die Altersdemenz und der Altersstarrsinn stehen vor der Tür bzw. sind schon da.:mrgreen:
Bin immer noch schrecklich neugierig und habe noch viel vor.8)

Du bist erst alt wenn du auf das schaust was hinter dir ist und nicht auf das was vor dir liegt, das ist imho altersunabhängig.

Außerdem nutze ich die Gelegenheit um noch mal in Thomas' Horn zu tröten:

Hol dir Little Boxes von Peter Müller, glaub uns einfach, das ist genau das was du brauchst!!
20 Euronen sind die beste Investition die du in deiner Situation machen kannst.

Viele Grüße
Klaus

p.s. jetzt grad wühle ich mich durch PS CS3 (Was für ein Monsterprogramm!).
Nächstes Jahr stehen PHP, Datenbanken und Shops auf dem Programm, aber eins nach dem anderen.

Chaosgoettin 25.11.2007 10:43

Ja, ich gebe euch beiden auch recht :D
Immerhin hat es etwas angezeigt, hätte ich vor ein paar Tagen nicht gedacht, daß es für mich überhaupt je möglich ist ;)

Habe übrigens gestern endlich mal in das Onlinebuch "Professionelle Websites, Auflage 2" reingelesen und ich muß sagen, daß der Aufbau viel schlüssiger für mich ist, wie selfhtml.de oder das Buch von Michael jendryschik.
Dort wird nämlich egnau das alles von Anfang an erklärt, wofür ich hier ausgeschimpft werde es zu benutzen :D

Bei dem jetzigen Onlinebuch (wurde mir auch hier empfohlen, aber habe vergessen von wem) lässt der Autor allen überflüssigen Krimskrams weg (nämlich die gstalterischen Elemente) und geht auf die wirkliche Basis erstmal ein und spannt dannach gleich einen Bogen zu Grundkenntnisse in CSS. Das ist für mich super aufgebaut, jetzt versteh ich auch einige Sachen hier mehr, was mir hier schon 1000fach gesagt wurde.
er sagt zwar zb dass es Formatierungen wie <b> <i> usw gibt, dies mana ber getrost vergessen kann, weil....und dann zeigt er erstmal in kleinen Schritten, wie man CSS direkt ins html einbindet etc.
Naja, lange Rede, kurzer Sinn!

Zumindest sind mir ein paar Groschen gefallen und sie werden auch noch weiter purzeln :D Freue mich, daß Du mcih als Grafiker verstehst.

Viele Grüße auch nach W. ;)

hehe, Klaus, war ja auch nur halber Spaß mit dem Alter^^
Diesen Monat konnte ich leider keinen Euro für ein Buch ausgeben, ich mußs ehen, wie es nächsten Monat ist. Kanns ein, daß ich es abzwacken kann, dann hol ich mir das bestimmt. Bis dahin bleiben mir Onlinebücher, Foren und Seiten....und 2 Noname-Billig-Bücher von der Bücherei ;)

paracelsus 25.11.2007 13:12

@C aus B.

Irrtum ich bin nicht aus W. , sondern 240 km weiter südlich, an der Grenze zu Slo -aus E. (Tipp: ein Haus voller Ehre ... gg)

cu. :lol:


Alle Zeitangaben in WEZ +2. Es ist jetzt 18:18 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023