HTML/CSS programmieren

Hallo,
erstmal grundsätzlich: HTML/CSS programmiert man nicht
Nun weiss ich nicht, ob ich Deine Frage richtig verstanden habe.
In einem externen Stylesheet selbst brauchst Du keine Anführungsstriche.
Bei z.B. Bezeichnung von Selektoren innerhalb einer HTML-Datei schon, da können sowohl einfache wie auch doppelte verwendet werden.
Wenn Dir das jetzt nicht weiterhilft, bring mal ein konkretes Beispiel.

Hi,
ich muss heute früh um 9 noch recht wirr gewesen sein , ich denke mit dieser Erklärung kann kaum jemand etwas anfangen.
CSS sollte klar sein, aber die Werte der Attribute bei HTML sollten immer in Anführungszeichen stehen (einzelne oder doppelte). Zwar akzeptieren fast alle Browser das auch ohne, aber eben auch nur fast. Sicher ist sicher.
Die Bezeichnung von Selektoren innerhalb eines div-Tags waren dafür nur ein spontanes Beispiel.
Ich hoffe, jetzt ist ein bißchen klarer.

ne... war schon klar bzw. ist durch die erste Antwort auch schon klar geworden ;-)

und so wirr, warst du doch heute morgen gar nicht...
Also... ich habe früher halt mit Tabellen alles gesetzt, was heute ja nicht mehr gemacht wird.
Dann überleg ich halt noch, ob HTML 4.01 oder HTML 5 genutzt werden soll...

gibt ja bei allem so Kleinigkeiten, die dann speziell sind und beachtet werden müssen.

Aber irgendwie häng ich einfach dabei ein früheres TabellenLayout mit Width und fonts, usw. in ein Tabellenfreies HTML umzuschreiben.
Irgendwie hab ich da einfach ne Blockade... komm mir schon bescheuert vor ;-)

Aber ich werde jetzt mal hingehen, die Tablle in einen DIV-Container umformatieren... nur wie bekomm ich jetzt die Formatierungen dort rein. Kommen die ins DIV iM HTML-Code oder ins CSS...

Nur so als erstes Blockade Problem ;-)

Aber ich bin schon fleissig am Googlen, bzw. einlesen... ich denke, dass ist einfach Macht der Gewohnheit, weil man früher anders rangegangen ist, um zu Layouten...
 

Wieso programmiert man das nicht... man kann es doch auch programmieren??? naja... aber das nur Nebensache...

ist eigentlich garnicht so schwer, man muss sich nur erstmal dran gewöhnen.

Stell Dir die Container einfach mal als Kisten vor.

mit HTML strukturierst Du Deine Seite und baust sie logisch auf - mit diesen "Kisten", die Du hin und her schieben kansst, nebeneinander, übereinander usw.
Gestalterisches würde ich mit HTML garnix mehr machen, dafür nimmst Du CSS, auch zur Positionierung.

Vielleicht fällt es Dir mit dieser Vorstellung leichter, diese Erfahrung habe ich schon oft gemacht.

Wieso programmiert man das nicht... man kann es doch auch programmieren??? naja... aber das nur Nebensache...

weils keine Programmiersprachen sind

ja klar... so hab ich mir die DIV-Tags auch vorgestellt.

Aber... gehen wir mal davon aus... ich möchte einen Header, Nav-Bereich und Inhalt-Bereich...
von mir aus noch den Footer...

dann hab ich ja in Kurzform geschrieben (ist natürlich nicht syntaktisch richtig... schon klar):

<div id=header></div>
<div id=navigation></div>
<div id=content></div>
<div id=footer>div>
und in der css-Datei würde ich dann sagen:
header=
font=verdana
font-size=10px
bold, underline

content=
font=verdana
font-size=10px

aber damit hab ich immer noch nicht die Positionierung...

Und ganz so einfach kann es doch gar nicht sein ;-)

Jetzt müsste ich dann noch irgendwo sagen...
id=header bitte oben hinschreiben
id=content bitte links unter header
id=navigation bitte unterhalb header überhalb von content (oder wie auch immer...

wenn ich dich richtig versteh, oder hab ich das falsch aufgefasst.

machen wir mal nen blöden Versuch:
http://pastebin.com/TkriLCdb
!!! nur der BODY !!!

die entsprechende HTML-Datei, wo aber wohl immer noch Tabellen drin sind.
und die zugehörige CSS-Datei, um einfach unterschiedliche Layouts für den Anfang zu testen...
http://pastebin.com/E1kYqDcB

Die Tabellen sind sicherlich noch falsch, geh ich von aus, weil damit wieder versucht wird zu layouten... aber ich kann doch nicht 100te von DIVs ineinander schachteln, um die einzeln zu setzen.

Irgendwo ist da doch ein Denkfehler drin... (halt das Denken von Früher)
 

Der Ansatz in Deinem ersten Post ist schon richtig.
Vergiss die olle Tabelle, Tabellen nimmt man für wirklich tabellarische Ausgaben.
Von den syntaktischen Dingen mal abgesehen - sagst Du selber positionierst Du jetzt mit dem externen Stylesheet.
Sieh Dir mal dazu an:

float
position:absolute
position:fixed
position:relative

wobei float besonders interessant ist.

weiterhin:
padding
margin


genauso gehören die Farbangaben ins CSS.

Sieh Dir das erstmal in Ruhe an

Also... das mit dem Float
Nehmen wir ein Koordinatensystem links oben in der Ecke x=0,y=0 (weiss nicht, ob Computer das jetzt auch so machen... daher geb ich es nur an, um einen Fixpunkt zu haben)

Man kann also ein Div, in meinem Beispiel der Header z.B. absolut positionieren,  z.B. x=50, y=100 width=50, height=50

Dann könnte ich z.B. den Navigation-Div auf x=0, y=0 mit width=40 und height=90 machen.
Dann wäre z.B. der Navi-Div links oben und der header rechts unten... richtig?

Auch, wenn die im HTML-Dateilein erst <div header> und dann erst <div navigation> steht.

Und dies konfiguriert man lediglich in der css-Datei, nicht in der HTML... in der HTML wären jetzt nur die beiden Zeilen (zzgl. Head und Body, usw.)

Hab ein Büchlein... wo das nicht so einfach zu verstehen drin steht... da wird von Bezügen zum übergeordneten Element gesprochen (in diesem Fall wäre es ja der Body-Tag.

Hab ich das so richtig verstanden?

grundlegend hast das richtig verstanden.
position, farbe, schriftart.etc...  bzw. alle angaben von divs, p, a, body, head etc. machst in der css datei (oder im header der datei, wobei halt externe css dateien zwecks übersichtlichkeit angenehmer sind)

im eigentlichen body part ists egal ob z.b. der footer-div an erster stelle steht und danach erst der header kommt. das funzt. hauptsache alles da.

ich hoffe ich verwirre dich jetzt nicht  noch weiter, aber mal als denkanstoss:

wenn alles absolut machst, der user nur ein kleines fenster offen hat, dann sind in der tat udn absolut,(z.b.)  50px vom linken rand entfernt. der rest fehlt dann.
trick da ist z.b. (kann sein dass es da mehrere varianten gibt)
indem einfach alles relative machst, und um deine ganze webseite noch mal ein div legst, das zentrierst.
(wenn das z.b. einen 1px hohen, horizontalen balken mit repeat-y hat..., hat auch alles bis zum footer den gleichen hintergrund) ... wobei das hat sqlfreak wahrscheinlich auch gemeint als er meinte du sollst dir absolute, relative udn fixed angucken *g (sry)
gewöhn dir auch bitte an, immer die angabe der einheit hinter maßangaben zu machen (z.b. px) so simple sachen führen oft zu fehlern.
und evtl. noch nen tipp, versuch mal ohne margin und padding auszukommen. ich weiss grad nicht welches attribut (benutz keines von denen) zickt in dem einen oder anderen browser (ie^^) um 1px herum. dass ist super nervig wenn grafiken pixelgenau platzieren willst. (dann müsstest für den zickenden browser dann ein workarround schreiben, dass dem hilft das zu verstehen, was von ihm willst. obwohl andere browser das ohne zu murren hinnehmen)
@sqlfreak: oder ist das nicht mehr so?
du musst übrigens auch divs nicht so wie tabellen verschachteln.  bzw. brauchts das oft halt nicht wirklich.
bei tabellen wars halt so wegen row-/colspan. da man da nicht mehr durchgeblickt hat, wars einfach bequemer da noch eine tabelle reinzuwerfen. teilweise tut es da  ein simpler zeilenumbruch ebenso.

Hi,

oder ist das nicht mehr so?

die neuen, sogar IE8 haben kaum noch Probleme. Aber es gibt noch genug Leute, die alte Browser haben. Deshalb ist Deine Bemerkung völlig richtig - danke, nicht dran gedacht. Baust Du eigentl. auch noch Hacks für IE6 ein? Ich ja, die laufen immer noch viel - braucht man hier nur mal ins Viren-Forum schaun

so.... ich geh mal gerade von einem konkreten Beispiel aus:

ich mach einfach eine Logo-Zeile zum ausprobieren.
Dazu mach ich einen Website-Container, der alles beinhaltet, um die Gesamtseite zu layouten.

Darin, einen DIV für den Header, ein Logo links und eines nach rechts, um was zum setzen zu haben.

Da ergibt sich jetzt folgende HTML:

<HTML>
<head>

   <!--
   aktueller Link ist auskommentiert, damit man Lokal austesten kann !!!
   <link href="/template/$FIRMENBEZEICHNUNG/css/website.css" rel="stylesheet" type="text/css">
   </link>-->
   <link href="css/css.css" rel="stylesheet" type="text/css">
   </link>

</head>

<body>
   <p><span>H</span>ier ist dann der erste Text im Dokument eingetragen</p>

   <div id="HEADER">
      <div id="Logo_links">
         <img src="img/LOGOjpg"
            alt="Firmenlogo"
            id="Logo"
            align="LEFT"
         </img>
      </div>
      <hr>
      <p>
         HIER KOMMT DANN DAS SUCHFELD REIN
      </p>
      <hr>
      <img src="img/LOGO.jpg"
         alt="Firmenlogo"
         id="Firmenlogo_Rechts"
         align="RIGHT"
      </img>
   </div>


</body>
die entsprechende css (mein Lieblinksstück, an dem ich ja immer hängen bleibe)
p {
font-style=xx-large;

font-style:italic;
color=white;

}

p span{
text-decoration:bold;
font-size:45px}

Logo_links {

}
Was würde jetzt in den Punkt logo_links kommen.
ein entsprechenden müsste ich dann wohl auch für Logo-rechts machen.

Baust Du eigentl. auch noch Hacks für IE6 ein?

Kommt auf die Zielgruppe an, bei "jüngeren" ists ja eher so dass die sich jeden müll auf die platte hauen. ergo auch neuere IE^^ da vernachlässige ich das.
ansonsten tu ich so als wenns die neueren browser gar nciht geben würde, versuch halt das alles so umzusetzen ohne margin/padding, min-heigt etc. alles tolle befehle aber wem hilfts wenns nicht reibungslos funzt^^

@walterschmitz
eigentlich hast das richtig verstanden (wobei ich grad nicht verstehe warum das logo absolut machen willst)

ich würde das ganz simpel  (bissl pfuschig aber funzt) so machen:
header hast ja. der bekommt eine hintergrundgrafik die 1px breit ist und sich super mit repeat-x verträgt.
anschliessend einfach den img tag fürs logo in den header platzieren. ohne extra div. das formular fürs suchfeld halt direkt daneben.
wenn dir da der abstand super wichtig ist, spacer gif? oder teilst den header direkt in 2divs auf.
(logo-div linksbündig, suchfeld-div rechtsbündig)
um platz zu schaffen kannst auch noch ne andere kleine grafik rechts neben das logo setzen. oder einen text, slogan etc.
%angaben bei breite war auch nen wenig tricky. wenn man das nutzt (was ich nicht mache) musste man irgend was beachten (was auch super simpel war, aber ich dummerweise grad nicht drauf komme^^)

edit: (hab den code gar nicht gesehen vorher o.O)
<body>
<div id="content"> <p><span>H</span>ier ist dann der erste Text im Dokument eingetragen</p>
</div>
     <div id="HEADER">
         <img src="img/LOGOjpg"
            alt="Firmenlogo"
            id="Logo"
            align="LEFT"
         </img>
  <p>
<form></form>
</p>
      <img src="img/LOGO.jpg"
         alt="Firmenlogo"
         id="Firmenlogo_Rechts"
         align="RIGHT"
      </img>
   </div>
</body>das grundgerüst mach ich übrigens immer farbig am anfang. also hinterlege bei den divs immer super fiese farben als hintergrund so dass ich deren grösse sehe, teste das auch so in den verschiedenen browsern bevor ich die mit inhalt fülle.
(also quasi header oben in lime, navi links unten drunter in yellow, content rechts daneben in navy etc. wenn das getestet hast, kannst da dann auch erst mal zukünftige darstellungsfehler zumindest dort ausschließen)

Code: [Auswählen]

   <p><span>H</span>ier ist dann der erste Text im Dokument eingetragen</p>


Hierzu noch ein Tip:

Du kannst sogar das span um den ersten Buchstaben weglassen. Das erledigt das Pseudoelement first-letter:

p:first-letter { font-size:300%; color:red } zum Beispiel lässt den ersten Buchstaben in groß und rot erscheinen.

das irst Letter-Element war nur zum Testen noch drin, und ich habs aus Versehen nicht rausgenommen... aber trotzdem danke für den Hinweis.

Bzgl. der divs nebeneinander, hab ich im Buch nachgelesen, dass dies wohl nicht gehen würde, weil dies nur Blöcke definiert, die dann hintereinander gezeigt werden (egal, was jetzt drin erscheint).

 

Ist so nicht richtig. Dazu verwendest Du eben die float-Anweisungen. Eben float:left oder float:right. Nach dem zugewiesenen Div sollte aber mit clear:both die floatoption aufgehoben werden.

Am besten Du schaust Dir mal fertige oder angehende Tutorials an. Da versteht man eher das zusammenspiel der vielen Attribiute und Formatierungen!

Nimm Dir ein Grundgerüst einer Beispielsseite her und experimentiere damit. Du wirst sehen, wie schnell man hinter einigen Kniffs oder Problemen kommt. ;O)

Ich schreibe aus Erfahrung.^^

http://css.talky.de

http://barrierefrei.e-workers.de/

http://www.css4you.de/

Nun wünsche ich viel Spaß beim Stöbern und Probieren.

gruß saffi

so... mensch bin ich bescheuert... zumindest teilweise:

<HTML>
<head>
   <link href="css/css.css" rel="stylesheet" type="text/css">
   </link>

</head>

<body>
   <p>Hier ist dann der erste Text im Dokument eingetragen</p>
   <div id="header">
      <div id="header_logo_links">
         <p>hier kommt das LOGO rein</p>
      </div>
      <div id="header_spacer">
         <p>hier käme eine Spacer rein</p>
      </div>
      <div id="header_search">
         <p>hier käme später das Suchfeld rein</p>
      </div>
</body>
und css:
body{
valign:center;
width:780px;
border=1px;
color:white;
background-color:black}

#header {
height:70px}

#header_logo_links {
background:red;
width:250px;
color:aqua;
align=LEFT}

#header_spacer {
background:green;
width:200px;
color:Fuchsia}

#header_search{
background:aqua;
width:400px;
color:red;
align:RIGHT}

kleine Probleme noch:
1.) ich hab dem Header die Höhe übergeben und dies dann in der Theorie vererbt an die eingebauten DIV's mit entsprechenden id's.
Mach ich es so, sind die Divs nur Zeilengroß, wie die Texte sind innerhalb der Divs... geb ich den einzelen Div/Id die Height vor, dann klappt es.
Wo ist da noch der Denkfehler?

2.) jetzt sind die Divs noch, wie ich vermutet hab untereinander... wo wird das Float eingebaut. im HTML oder in der CSS? Und wie meinst du das mit aufgehoben?

3.) Ihr dürft mich hauen... ja ich hab immer die # vergessen vor den id, daher wurde das Layout auch nicht umgesetzt... und ich hab immer gedacht, ich mach nen Denkfehler... ne richtig gedacht hab ich schon, nur falsch umgesetzt... und da keine Fehlermeldung wie beim Kompilieren von Programmiersprachen kommen (ja es wird nicht kompiliert sondern interpretiert) ist mir sowas natürlich nicht aufgefallen... mensch steht man auf dem Schlauch.

Ich hoffe, jetzt kann ich mich richtigen css-Problemen widmen... und davon kommen wohl auch noch genug ;-)

Danke üfr eure Hilfe

Da gibts aber nen Validator für. Der könnte Dir helfen:
http://jigsaw.w3.org/css-validator/

danke schon mal...

4 Fehler sind noch drin, die mach ich gleich raus.

aber das grundsätzliche Problem wg. den div-Blöcken ist damit noch nicht geklärt.
Hab das Float jetzt noch mal eingebaut... aber das ändert auch nicht wirklich viel... weil der Spacer da noch drin ist... der in den Center müsste... aber nicht geht

und was das float auflösen gemeint ist, ist auch noch nicht klar.

Danke aber bislang

richtig, div definiert einen block. (p beansprucht z.b. auch eine zeile) dem kannst aber mit

display:inline; abhelfen.
float auflösen ist hier ein schöner link:
http://www.andreas-kalt.de/webdesign/tutorials/float-theorie
funzt wenn unter das letzte floatende div z.b. noch ein div mit clear:both;setzt.
(mag sich für dich stupide lesen, ist aber dafür da um dem browser wirklich .....ensicher mitzuteilen wie man das halt gern hätte)

so... mal wieder etwas weiter.
Damit ich immer nur ein bisschen Fehler suchen muss für einen Anfänger, mach ich immer nur div für div hintereinander eingefügt ;-)

css:

/*
HTML-Tags-Formatierungen
*/

body{
width:100%;
color:black;
background-color:white;
border:1px;
border-width:thin;
border-style:dashed }

/*
Grundlayouts
*/
#header {
height:70px;
cursor:pointer;
background-color:lime;
border:2px;
border-width:thin;
border-style:dotted}

#breadcrumbs {

height:25px;
cursor:none;
background-color:purple;
border:1px;
border-width:thin;
border-style:groove
}

/*
Elemente innerhalb der Grundlayouts
*/

#header_logo_links {
background:red;
width:250px;
color:aqua;
height:70px;
float:left}

#header_search{
background:aqua;
width:400px;
color:red;
height:70px;
float:right}

/*
allgemeines
*/
#whiteline {
width:100%;
height:2px;
clear:both
}

.text-shadow {
text-shadow: #ffffff 3px 3px 5px
}
und html:
<HTML>
<head>
   <link href="css/css.css" rel="stylesheet" type="text/css">
   </link>

</head>

<body>
   <div id="header">
      <div id="header_and_spacer">
         <div id="header_logo_links">
            <p>hier kommt das LOGO rein</p>
         </div>
         <div id="header_search">
            <p>hier käme später das Suchfeld rein</p>
         </div>
      </div>
   </div>
   <div id=whiteline"></div>
   <div id="breadcrumbs">
      <p>hier kommen dann später die breadcrumbs rein</p>
   </div>
</body>
1. Frage: warum ist die whiteline nicht zu sehen, obwohl die 1, oder in anderen Tests auch mal 2 oder 3 px gross ist.

2.) warum ist der text in breadcrumbs nicht innerhalb vom block / div... sondern bei mir wird er auf der unteren linie vom div angezeigt.

3.) ihr habt mal geschrieben, man muss nicht so verschachteln wie Tabellen... kann man das in diese Beispiel auch schon einhalten?

Danke euch

1. Frage: warum ist die whiteline nicht zu sehen, obwohl die 1, oder in anderen Tests auch mal 2 oder 3 px gross ist.

Bei sowas mach ich immer das betreffene Element ganz groß und bunt und wenn man es dann immernoch nicht sehen kann, dann schau ich ob ich mich verschrieben habe (oder ein Anführungszeichen vergessen habe oder sowas).

2.) warum ist der text in breadcrumbs nicht innerhalb vom block / div... sondern bei mir wird er auf der unteren linie vom div angezeigt.

das liegt daran, dass der Absatz (<p>) typischerweise mit margin/padding vordefiniert ist. setz mal beides auf 0 p{
margin:0;
padding:0;
} dann siehts gut aus.

3.) ihr habt mal geschrieben, man muss nicht so verschachteln wie Tabellen... kann man das in diese Beispiel auch schon einhalten?

Das hast Du doch schon ganz gut hinbekommen. Du musst nur alles, was in einem div sein soll auch in dieses div reinschreiben und alles was nicht drin sein soll schreibst Du halt dahinter.

ok, das mit dem <p> hab ich in der css-Datei mal mit margin:0;padding:0 gefüllt. Jetzt geht's ;-) Danke dafür.

bzgl. der whiteline hab ich die height mal mit 20px oder so gefüllt, mal ohne clear:both, mal mit... egal, was ich mach, es wird nicht angezeigt.

irgendwo hab ich da noch nen Bug drin ;-)

Wenn das Listing noch so stimmt, dann setze das id whiteline in Anführungsstriche! Das erste fehlt nämlich. ;O)

Dann solle es funktionieren.

gruß saffi

oh, verzeih. Ich wollte "oder ein Anführungszeichen vergessen oder sowas" eigentlich in Fett schreiben. Habsch dann aber vergessen.