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.