zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden CSS für totale Anfänger

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 13.04.2006, 13:04
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.04.2006
Beiträge: 4
advancemaster befindet sich auf einem aufstrebenden Ast
Standard CSS für totale Anfänger

Hallo,
Ich möchte meine erste eigene Webseite coden. Dabei möchte ich gleich mit XHTML und CSS arbeiten und nicht erst mit Tabellen anfangen. Da es mein erster Versuch ist, eine Seite zu schreiben, ist mir in Sachen CSS noch vieles unschlüssig. Mein Problem ist dabei, dass die Dinge einzeln zwar verstehe, aber es nicht in ein Gesamtpaket bekomme. Ich schreib einfach mal auf, was ich mir gedacht habe, vielleicht kann mir jemand helfen
Es soll ein zwei Spalten-Layout werden; links die Navigation, rechts der Inhalt. Kann jemand einen guten Wert in Pixeln für die Navigationsbreite und den Inhalt sagen, damit es bei 800x600 passt?
Über die Navigation und den Inhalt kommt ein Header, 760x150 px. Unter diesem Header sollte eine kleine Trennlinie hin, doch wie lässt sich das in der CSS-Datei realisieren?
Dann habe ich noch das Problem, dass der Text über den Rand hinausgeht. Dabei soll er nur innerhalb des Inhaltsbereiches bleiben. Was muss ich da genau machen?
Ein weiteres Problem ist die Position des "Gesamtpakets" bei einer höheren Auflösung als 800x600. Wie macht man es, dass es zentriert steht?
Ich hoffe, ihr lacht nicht alzu sehr über meine totalen Anfänger-Fragen
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 13.04.2006, 13:25
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 11.01.2005
Ort: Berlin
Beiträge: 2.149
mazzo wird schon bald berühmt werden
Standard Re: CSS für totale Anfänger

Zitat:
Zitat von advancemaster
Es soll ein zwei Spalten-Layout werden; links die Navigation, rechts der Inhalt. Kann jemand einen guten Wert in Pixeln für die Navigationsbreite und den Inhalt sagen, damit es bei 800x600 passt?
vergiss gleich wieder die Pixel. Sinnvoller ist ein Layout welches sich an die jeweiligen Bedingungen anpasst. Da definiert man die Breiten in em oder in %.
Du brauchst auf jeden Fall die Float-Eigenschaft und evtl. auch faux-columns. (Guck mal im oben verlinkten XHTMLwiki unter den dortigen FAQs).

Zitat:
Zitat von advancemaster
Über die Navigation und den Inhalt kommt ein Header, 760x150 px. Unter diesem Header sollte eine kleine Trennlinie hin, doch wie lässt sich das in der CSS-Datei realisieren?
mit der Border-Eigenschaft, siehe auch www.css4you.de

Zitat:
Zitat von advancemaster
Dann habe ich noch das Problem, dass der Text über den Rand hinausgeht. Dabei soll er nur innerhalb des Inhaltsbereiches bleiben. Was muss ich da genau machen?
das kann ich nicht nachvollziehen. Normalerweise bleibt Text in einem Element. Dafür bräuchte es mal ein Online-Beispiel.

Zitat:
Zitat von advancemaster
Wie macht man es, dass es zentriert steht?
Zentrieren geht (bei richtigem Doctype auch im IE) mit margin: 0 auto; für das zu zentrierende Element. Aber nur, wenn es schmaler als 100% ist. Sonst besteht kein Platz zum zentrieren. Verwechsl das nicht mit text-align: center; was lediglich Inline-Elemente in einem so definierten Element zentriert.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 13.04.2006, 14:01
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 05.12.2004
Beiträge: 357
kippe befindet sich auf einem aufstrebenden Ast
Standard

Also ob Liquid oder nicht sollte wohl jeder je nach Art des Projektes selbst entscheiden. Man kann nicht pauschal sagen, dass fixe Breiten schlecht sind - für Anfänger ist es auf jeden Fall einfacher damit zu arbeiten.

Beim Zentrieren musst du dem body trotzdem noch ein "text-align: center" geben (für IE 5.x), welches du später im Wrapper, also in dem 760px breiten <div>, einfach wieder aufhebst.
__________________
Gruß,
Sebastian
Mit Zitat antworten
  #4 (permalink)  
Alt 15.04.2006, 15:04
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.04.2006
Beiträge: 4
advancemaster befindet sich auf einem aufstrebenden Ast
Standard Re: CSS für totale Anfänger

Sorry, dass ich mich jetzt erst wieder melde
Ich finde das mit den Pixeln besser. Bei Auflösungen von 800x600 und 1024x780 mögen Prozente sinnvoll sein, aber ich habe eine Auflösung von 1280x800 und da sieht es mit Prozent nicht so toll aus.

Zitat:
Zitat von mazzo
Zitat:
Zitat von advancemaster
Dann habe ich noch das Problem, dass der Text über den Rand hinausgeht. Dabei soll er nur innerhalb des Inhaltsbereiches bleiben. Was muss ich da genau machen?
das kann ich nicht nachvollziehen. Normalerweise bleibt Text in einem Element. Dafür bräuchte es mal ein Online-Beispiel.
Das hatte einen ganz banalen Grund und zwar gab es keine Grenzen, sodass der Text natürlich bis an den rechten Browserrand geht.


Das mit dem Zentrieren klappt noch nicht. Setzt man margin:0 auto; zum html? Und wie hebt man text-align:center wieder auf?
Mit Zitat antworten
  #5 (permalink)  
Alt 15.04.2006, 22:11
Benutzerbild von kadees
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 22.06.2004
Ort: in Baden (nicht Schwaben)
Beiträge: 792
kadees wird schon bald berühmt werden
Standard

habs bisher immer so gehandhabt:

Code:
body {
   ...
   text-align: center;
   ...
}

wrapper {
   ...
   margin: 10px auto;
   width: 760px;
   text-align: left;
   ...
}
das 'text-align: center' im body ist hauptsächlich für ie5.x notwendig, da diese 'margin: ...px auto' nicht verstehen - der ie6 im standartmode kann das.
__________________
Gruss Dieter

Vegetarier essen meinem Essen das Essen weg.
Und unsere Norweger sind reine Karnivoren.

selfhtml | css4you | jendryschik | styleworks | Webdesign mit XHTML und CSS
Mit Zitat antworten
  #6 (permalink)  
Alt 15.04.2006, 23:20
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.04.2006
Beiträge: 4
advancemaster befindet sich auf einem aufstrebenden Ast
Standard

Vielen Dank für die Hilfe
Leider klappt das nicht so ganz wie ich es mir vorstelle. Ich habe mal ein Onlinebeispiel. http://www.talesemblem.de/beispiel.html
Eigentlich möchte ich ja gerne, dass das Gesamtpaket, also der ganze Inhalt zentriert steht und nicht vereinzelte Teile. IE6 stellt jetzt alles untereinander.
Wenn euch auch andere Fehler auffallen, dann sagt es bitte. Auch was man besser machen könnte.
Mit Zitat antworten
  #7 (permalink)  
Alt 19.04.2006, 01:07
Benutzerbild von E|H
E|H E|H ist offline
body:hover{display:none;}
XHTMLforum-Kenner
 
Registriert seit: 27.01.2005
Beiträge: 1.325
E|H befindet sich auf einem aufstrebenden Ast
Standard

um das mit float und clear zu verstehen, solltest du selbst mal rumexperimentieren
eigentlich ist das ganz einfach. nur der ie ist halt evtl. zu blöd dazu, aber darum würde ich mich jetzt nicht kümmern

es gibt zwei sorten elemente: inline und block
bilder (<img>) sind grundsätzlich inline-elemente
das heißt, wenn du in einem text ein bild einfügst, dann ist die zeile, in dem das bild ist, so hoch wie das bild, plus unterlänge (zB soviel, wie das kleine g nach unten übersteht). das bild sitzt dann richtigerweise auf der grundlinie! das wird oft vergessen. (@board: Macht der IE das falsch?)

http://de.wikipedia.org/wiki/Bild:Ty...e_Begriffe.png

wenn du nun im css schreibst

img{display:block}

dann werden alle bilder zu block-elementen

block-elemente stehen immer in einer eigenen zeile
überschriften, absätze, listen, uvm. sind block-elemente

das läßt sich im css aber auch ändern, mit:

p{display:inline}

absätze zu inline-elementen macht aber keinen sinn, zumindest fällt mir kein beispiel dafür ein.

in europa wird von links nach rechts gelesen, dadurch ist auch das meiste linksbündig (in europa)
man kann im css nicht nur einstellen, ob text links- oder rechtsbündig ist, man kann dort auch die leserichtung angeben. der standard ist ltr, also von links nach rechts (left to right). schreibt man nichts ins css, ist text linksbündig und wird von links nach rechts gelesen.

das gleich gilt aber auch für (fast?) alle elemente. zumindest für inline-elemente. die rutschen, je nach platzverhältnissen, nach oben und nach links. wenn in einer reihe kein platz mehr ist, wird in der nächsten zeile links weitergemacht.

das ist der sogenannte „normale fluß“, so wird er glaube ich oft bezeichnet.

elemente, die gefloatet werden, werden aus diesem fluß herausgenommen.
es gibt für float nur die werte left und right (und none und inherit, aber das ist hier unwichtig).

ein element kann also, wenn es floatet, nur entweder links oder rechts floaten, nicht in der mitte.
alle NACHFOLGENDEN (block-)elemente tun so, als wäre das gefloatete element nicht da, sie rutschen drunter. deren inhalte aber umfließen das gefloatete element, gucken also darunter hervor.
wenn du willst, daß (irgend-)ein nachfolgendes element merkt, daß da ein vorhergehendes floatet, mußt du es clearen, dadurch rutscht es nicht drunter.

ich hab zu dem thema schon eine menge seiten mit erklärungen gesehen, aber mir fallen gerade keine ein. daher schreib ich das hier nicht ins icq, sondern ins board, vielleicht hat gerade jemand was zur hand (was zum lesen …). Daher auch die Kleinschreibung, hab’ aus dem Nachrichtenfenster kopiert.

Hier schon mal ein Link:

http://www.css4you.de/float.html

ps:

Zitat:
Dabei entfaltet sich die volle Pracht nur mit CSS. Bitte besorgen Sie sich die aktuelle Version Ihres Browsers.
Erzähl das mal einem Lynx-User.

Das div#header ist eigentlich überflüssig.
Mit Zitat antworten
  #8 (permalink)  
Alt 20.04.2006, 15:00
Benutzer
neuer user
 
Registriert seit: 09.03.2006
Beiträge: 34
sinot befindet sich auf einem aufstrebenden Ast
Standard

also als anfänger in dem sinne kann ich dir nur raten mit dem absoluten grundwissen anzufangen.

nur so wirst du einen kompletten unterschied feststellen. meine erste seite war zu 100% mi tabellen. Alles ging schnell und erzielte seinen effekt nur sah es miserabel aus.

die 2. umstellung erfolgte mit bißchen css und jetzt habe ich es bis auf eine linkseite alles mit css gemacht und haut mich ehrlich egsagt vom hocker das ich das zustande gebracht habe.

css ist das beste was es gibt so java zeug kann man von mir aus je nach fall dazu nehmen aber ansonsten nicht.

Außerdem merke ich wie mir einige Kenntnisse fehlen die auf eben die nicht ganz durchgeackerte Basis zurückzuführen sind. Eine übelst leichte Einsteigerseite ist PLANETHTML danach kannst du zu selfhtml umsteigen.

und dann css tutorial bei googel suchen da gibt es einen riesenhaufen an seiten die das thema behandeln. alle sist irgendwie miteinander vermischt.

mfg sinot
__________________
Du bist vom Himmel gefallen erstrahlender Sohn der Morgenröte.
Zu Boden bist du geschmettert du Bezwinger der Völker.

Die Mega-Mod:
http://doom3.planet-multiplayer.de/d...d.php?view.567
http://doom3.filefront.com/file/Maximum_Graphic;50595
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 Menü al Anfänger nopox CSS 3 12.01.2012 01:29
Inspiration - Sammlung von Links emti Ressourcen 8 01.12.2009 19:02
Ich hasse CSS... neu-art.de Offtopic 24 30.08.2008 14:11
CSS für Anfänger Sephi CSS 1 03.12.2006 00:01
Mozilla ignoriert externes css DarkWanderer CSS 9 22.09.2005 12:39


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