nicht angemeldet
DIV und CSS
Hiho Zusammen,
Leider hab ich den Dreh noch nicht so richtig raus mit DIV und CSS, bin aber auf gutem Weg ;-)
Nun aber zum eigentlichen Problem. Das Grundlayout wurde erstellt ohne Probleme, jedoch aber wenn man das Fenster vergrößert, verschieben sich die Layer nebeneinander, und das sollte es nicht.
Wo liegt das Problem an diesem Code?
<head>
<title>Grundbau</title>
<link rel="Stylesheet" type="text/css" href="script/main.css">
</head>
<body bgcolor="#000000">
<div id="kat4">
<div style="width:100px; height:100px;">Logo</div>
<div style="width:100px; height:10px;">Text Zum Logo</div>
</div>
<div id="kat1">Kat1</div>
<div id="kat2">Kat2</div>
<div id="kat3">Kat3</div>
<div id="kat3" style="margin-top:1px;">Kat4</div>
div {
float: left;
}
div#kat1 {
font-size: 12px;
font-family: Tahoma;
background-color: #FFFFFF;
height: 383px;
width: 191px; float: left;
}
div#kat2 {
font-size: 12px;
font-family: Tahoma;
background-color: #FFFFFF;
height: 383px;
width: 610px;
margin-left: 1px;
margin-right: 1px; float: left;
}
div#kat3 {
font-size: 12px;
font-family: Tahoma;
background-color: #FFFFFF;
height: 191px;
width: 191px; float: left;
}
div#kat4 {
font-size: 12px;
font-family: Tahoma;
background-color: #FFFFFF;
width: 994px;
height: 100px;
margin-bottom: 1px;
}
Danke schon im Voraus für eure freundliche Hilfe.
Freundlicher Gruß
Cicco0
-
hoi,
weil du dem div float gegeben hast:
div {
float: left;
}LG
-
hoi,
weil du dem div float gegeben hast:
div {
float: left;
}LG
Was wäre an dieser Stelle geeigneter?
-
hi,
einfach loeschen?
Inita
-
hi,
einfach loeschen?
Inita
Hi,
Das war mir schon klar, jedoch funktioniert auch dies nicht, sry vielleicht steh ich gerade auf dem Schlauch.
LG
Cicco0
-
-
-
-
Leider hab ich den Dreh noch nicht so richtig raus mit DIV und CSS, bin aber auf gutem Weg ;-)
bitte bremse, zwei schritte zurück und ordentlich weiter machen - damit hast du auf lange sicht mehr freude ;)
Wo liegt das Problem an diesem Code?
dass du offenbar das konzept von "div" und "css" falsch verstanden hast
schreibe semantisch vernünftigen code - was du produziert hast, nennt sich gemeinhin div-suppe
-
Leider hab ich den Dreh noch nicht so richtig raus mit DIV und CSS, bin aber auf gutem Weg ;-)
bitte bremse, zwei schritte zurück und ordentlich weiter machen - damit hast du auf lange sicht mehr freude ;)Wo liegt das Problem an diesem Code?
dass du offenbar das konzept von "div" und "css" falsch verstanden hastschreibe semantisch vernünftigen code - was du produziert hast, nennt sich gemeinhin div-suppe
Nur stell ich mir dann da die Frage, wie man es semantisch machen soll bzw. ohne gleich eine Div-Suppe zu erhalten bzw. mir fehlt da der Gedankenschritt und wie ich auf solche Stolpersteine achten muss bzw. wie ich sie umgehen kann.
-
Nur stell ich mir dann da die Frage, wie man es semantisch machen soll bzw. ohne gleich eine Div-Suppe zu erhalten bzw. mir fehlt da der Gedankenschritt und wie ich auf solche Stolpersteine achten muss bzw. wie ich sie umgehen kann.
Nicht die div sind das Problem, sondern id="kat1".
Ich wette, dass du nicht weisst, was das beinhaltet, sofern du den Code nicht konsultieren kannst.mfg Beat
--
Selber klauen ist schöner!-
Nur stell ich mir dann da die Frage, wie man es semantisch machen soll bzw. ohne gleich eine Div-Suppe zu erhalten bzw. mir fehlt da der Gedankenschritt und wie ich auf solche Stolpersteine achten muss bzw. wie ich sie umgehen kann.
Nicht die div sind das Problem, sondern id="kat1".
Ich wette, dass du nicht weisst, was das beinhaltet, sofern du den Code nicht konsultieren kannst.mfg Beat
Wenn ich es richtig interpretiere, identifiziert die ID eindeutig ein HTML-Element und demzufolge sollte class an dieser Stelle stehen. Richtig? ;)
-
-
Nur stell ich mir dann da die Frage, wie man es semantisch machen soll bzw. ohne gleich eine Div-Suppe zu erhalten bzw. mir fehlt da der Gedankenschritt und wie ich auf solche Stolpersteine achten muss bzw. wie ich sie umgehen kann.
der größte fehler ist zuerst ein design zu machen, das template zu bauen und dann erst zu überlegen, welcher inhalt rein muss
design und inhalt müssen von vorne herein klar sein, dann kann man loslegen
eine 08/15 seite beisteht zb aus kopf, inhalt, menu und fusszeile
das sieht dann in etwa so aus:
<h1>Meine tolle Seite</h1> <div id="inhalt"> <h2>überschrift</h2> <p>lorem ipsum</p> <h3>zwischenüberschrift</h3> <p>dolor sit ahmen</p> <blockquote cite="example.com"> Ihr dürft unsere Domain als Test-Platzhalter verwenden </blockquote> </div> <ul id="menu"> <li><a href="#"></a>menüpunkt1</li> <li><a href="#"></a>menüpunkt2</li> <li><a href="#"></a>menüpunkt3</li> </ul> <adress id="footer">Max Mustermann | Musterstraße 1 | 12345 Musterhausen</address>wenn das ganze so steht, kann man zu layoutzwecken immer noch div-elemente einfügen wenn man sie braucht - sobald man das mal intus hat, kann mans umgekehrt auch machen
aber code nach dem schema <div></div><div><div><div></div></div><div></div></div><div></div>
ist nicht der renner ;)-
Nur stell ich mir dann da die Frage, wie man es semantisch machen soll bzw. ohne gleich eine Div-Suppe zu erhalten bzw. mir fehlt da der Gedankenschritt und wie ich auf solche Stolpersteine achten muss bzw. wie ich sie umgehen kann.
der größte fehler ist zuerst ein design zu machen, das template zu bauen und dann erst zu überlegen, welcher inhalt rein muss
design und inhalt müssen von vorne herein klar sein, dann kann man loslegen
eine 08/15 seite beisteht zb aus kopf, inhalt, menu und fusszeile
das sieht dann in etwa so aus:
<h1>Meine tolle Seite</h1>
<div id="inhalt">
<h2>überschrift</h2>
<p>lorem ipsum</p>
<h3>zwischenüberschrift</h3>
<p>dolor sit ahmen</p>
<blockquote cite="example.com">
Ihr dürft unsere Domain als Test-Platzhalter verwenden
</blockquote>
</div>
<ul id="menu">
<li><a href="#"></a>menüpunkt1</li>
<li><a href="#"></a>menüpunkt2</li>
<li><a href="#"></a>menüpunkt3</li>
</ul>
<adress id="footer">Max Mustermann | Musterstraße 1 | 12345 Musterhausen</address>> > wenn das ganze so steht, kann man zu layoutzwecken immer noch div-elemente einfügen wenn man sie braucht - sobald man das mal intus hat, kann mans umgekehrt auch machen > > aber code nach dem schema <div></div><div><div><div></div></div><div></div></div><div></div> > ist nicht der renner ;) Wie eine Website aussehen muss und was sie beinhaltet, stelle ich mir schon im Kopf vor. Dannach erstelle ich mir ein Mindmap und zeichne die wichtigsten Punkte der Texte auf. (Mein Vorgehen) Nun komm ich zum Layout. Ich weiss nun, was ich auf der Website anbieten möchte, und was evtl. gerne gelesen wird nun fehlt mir noch das passende Design. Nun erstelle ich mir in einer HTML-File ein kleines Layout mit Tabellen wie das ganze in etwa aussehen sollte. Bis jetzt, habe ich die Tabellen "missbraucht" um es so zu gestallten wie ich es gerne möchte. Jedoch aber möchte ich gerne auch Webseiten programmieren ohne Tabellen, und wenn dann nur für Tabellarischen aufbau. Ich versteh den Gedankenschritt noch nicht ganz. Wenn ich alles in einem schematischen Aufbau mache und dann nur noch mit CSS formatieren sollte, verliere ich ja den Überblick über das ganze.-
Ich versteh den Gedankenschritt noch nicht ganz. Wenn ich alles in einem schematischen Aufbau mache und dann nur noch mit CSS formatieren sollte, verliere ich ja den Überblick über das ganze.
wieso?
"Semantik (gr. σημαίνειν sēmainein „bezeichnen“), auch Bedeutungslehre oder Semasiologie, nennt man allgemein die Theorie oder Wissenschaft von der Bedeutung der (sprachlichen) Zeichen, mitunter auch die Bedeutung oder ein System von Bedeutungen selbst."
http://de.wikipedia.org/wiki/Semantikund gerade weil der code dann eine echte bedeutung hat, ist er leichter zu formatierungen und anzupassen
du weisst, dass eine überschrift eine überschrift ist und nicht irgend ein aussageloses div-element
dein problem ist schlichtweg, dass du (noch) in tabellen denkst und alles in kästchen einteilen willst die <td /> heissen, das ist aber nicht notwendig
ggf
ersetze <table />, <tr /> und <td /> gedanklich durch <div /> [1] und überlege dann, welche <div />-elemente sinnvoll durch semantisches markup getauscht werden kann - eine überschrift durch eine überschrift, ein zitat durch ein zitat, ein textabsatz durch einen textabsatz, ein liste durch eine liste, eine adresse durch eine adresse, eine liste an defintionen (glossar) durch eine defintionsliste, usw[1] wenn es sich NICHT um daten-tabellen handelt
-
Ich versteh den Gedankenschritt noch nicht ganz. Wenn ich alles in einem schematischen Aufbau mache und dann nur noch mit CSS formatieren sollte, verliere ich ja den Überblick über das ganze.
wieso?
"Semantik (gr. σημαίνειν sēmainein „bezeichnen“), auch Bedeutungslehre oder Semasiologie, nennt man allgemein die Theorie oder Wissenschaft von der Bedeutung der (sprachlichen) Zeichen, mitunter auch die Bedeutung oder ein System von Bedeutungen selbst."
http://de.wikipedia.org/wiki/Semantikund gerade weil der code dann eine echte bedeutung hat, ist er leichter zu formatierungen und anzupassen
du weisst, dass eine überschrift eine überschrift ist und nicht irgend ein aussageloses div-element
dein problem ist schlichtweg, dass du (noch) in tabellen denkst und alles in kästchen einteilen willst die <td /> heissen, das ist aber nicht notwendig
ggf
ersetze <table />, <tr /> und <td /> gedanklich durch <div /> [1] und überlege dann, welche <div />-elemente sinnvoll durch semantisches markup getauscht werden kann - eine überschrift durch eine überschrift, ein zitat durch ein zitat, ein textabsatz durch einen textabsatz, ein liste durch eine liste, eine adresse durch eine adresse, eine liste an defintionen (glossar) durch eine defintionsliste, usw[1] wenn es sich NICHT um daten-tabellen handelt
Danke dir vielmals, das hat mir einiges gebracht. Nun hab ich noch eine letzte Frage. Wo hört die semantische Programmierung auf? Komplexe Dinge wie Shoplösungen, oder besteht auch da die semantisch Aufzubauen?
LG Cicco0
-
Hi,
bitte zitiere vernuenftig, und nicht immer alles!
Nun hab ich noch eine letzte Frage. Wo hört die semantische Programmierung auf? Komplexe Dinge wie Shoplösungen, oder besteht auch da die semantisch Aufzubauen?
Semantische Auszeichnung "hoert dann auf", wenn man mit dem Auszeichnen der Inhalte im HTML fertig ist. Sobald das geschehen ist [1], geht es dann an die Erzeugung der gewuenschten Darstellung dieser Inhalte per CSS.
[1] "Sobald" beinhaltet hier "und nicht frueher".
MfG ChrisB
--
"The Internet: Technological marvel of marvels - but if you don't know *what* you're lookin' for on the Internet, it is nothing but a time-sucking vortex from hell."
-
-
-
-
-
Hallo Cicco0,
schreibe semantisch vernünftigen code - was du produziert hast, nennt sich gemeinhin div-suppe
Nur stell ich mir dann da die Frage, wie man es semantisch machen soll bzw. ohne gleich eine Div-Suppe zu erhalten bzw. mir fehlt da der Gedankenschritt und wie ich auf solche Stolpersteine achten muss bzw. wie ich sie umgehen kann.
Erste Frage: Welche Art von Inhalten möchtest Du wo plazieren und ggf. gruppieren?
Bsp:
Header mit Überschrift/Bild
Navigationsleiste
Newsblock
Inhaltsbereich
...usw.
Fang nicht "außen", sondern innen an, also beim einzelnen Inhaltselement. ein <p>? Ein <h1>? Eine Liste? Welches Teile Deines Designs kannst Du diesen Elementen bereits mitgeben? (Farbe, Abstände, Rahmen, Hintergrundbilder etc.)
Formatiere die Inhaltsblöcke mit CSS. Wenn nötig, kommt *jetzt* erst das eine oder andere div ins Spiel, das Deinen Inhalt gruppiert. Diesem gibst Du eine sinnvolle, sprechende ID, u.a. damit Du sie im Gewusel nachher wiederfindest: z.B. "<div id="newsbereich">"
Probier mal diese Vorgehensweise, und melde Dich hier, wenn Du auf Probleme stößt.
Gruß aus Köln-Ehrenfeld,
Elya
-
-
-
<div id="kat3">Kat3</div>
<div id="kat3" style="margin-top:1px;">Kat4</div>IDs mit gleichem Value dürfen pro Dokument nur einmalig vorkommen.
Wenn mehrere Elemente gleichartig formatieren willst, verwende class="value".mfg Beat
--
Selber klauen ist schöner!
