zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden erster CSS Code

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 25.11.2007, 07:29
Benutzerbild von Chaosgoettin
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.11.2007
Beiträge: 42
Chaosgoettin befindet sich auf einem aufstrebenden Ast
Standard erster CSS Code

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

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 :/
__________________
kein Bild verfügbar....
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 25.11.2007, 09:12
Benutzerbild von hubspe
Eisen 7 ole....
XHTMLforum-Kenner
 
Registriert seit: 22.06.2007
Ort: Passau
Beiträge: 7.087
hubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblick
Standard

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
__________________
Ein mehrfacher Gruß aus dem Südosten
Klaus
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 25.11.2007, 09:25
Benutzerbild von Chaosgoettin
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.11.2007
Beiträge: 42
Chaosgoettin befindet sich auf einem aufstrebenden Ast
Standard

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
__________________
kein Bild verfügbar....
Mit Zitat antworten
  #4 (permalink)  
Alt 25.11.2007, 09:25
Benutzerbild von paracelsus
be simple
XHTMLforum-Kenner
 
Registriert seit: 16.07.2007
Ort: Bruck an der Mur - Austria, einige meinen am "Anus Mundi"
Beiträge: 4.786
paracelsus ist einfach richtig nettparacelsus ist einfach richtig nettparacelsus ist einfach richtig nettparacelsus ist einfach richtig nett
Standard

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
Mit Zitat antworten
  #5 (permalink)  
Alt 25.11.2007, 09:38
Benutzerbild von hubspe
Eisen 7 ole....
XHTMLforum-Kenner
 
Registriert seit: 22.06.2007
Ort: Passau
Beiträge: 7.087
hubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblick
Standard

Hi Cecilia,

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

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.
__________________
Ein mehrfacher Gruß aus dem Südosten
Klaus

Geändert von hubspe (25.11.2007 um 09:44 Uhr)
Mit Zitat antworten
  #6 (permalink)  
Alt 25.11.2007, 09:43
Benutzerbild von Chaosgoettin
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.11.2007
Beiträge: 42
Chaosgoettin befindet sich auf einem aufstrebenden Ast
Standard

Ja, ich gebe euch beiden auch recht
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

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 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
__________________
kein Bild verfügbar....
Mit Zitat antworten
  #7 (permalink)  
Alt 25.11.2007, 12:12
Benutzerbild von paracelsus
be simple
XHTMLforum-Kenner
 
Registriert seit: 16.07.2007
Ort: Bruck an der Mur - Austria, einige meinen am "Anus Mundi"
Beiträge: 4.786
paracelsus ist einfach richtig nettparacelsus ist einfach richtig nettparacelsus ist einfach richtig nettparacelsus ist einfach richtig nett
Standard

@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.
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
CSS Code - Komme nicht zurecht Invator01 CSS 19 05.04.2011 21:00
Was ist an meinem CSS Style Code falsch? bayway CSS 3 29.07.2009 23:24
Lightbox mit zweiter CSS Datei funktioniert nicht T4ke CSS 12 11.12.2007 19:20
CSS Menuproblem im IE (Superfish) ven CSS 1 04.10.2007 12:13
XHTML und CSS Projekt: Layout und Code check Lloyd Larkin Site- und Layoutcheck 5 19.03.2006 14:20


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