HTML <div> macht was es will -.-

[Mr. Poe]

hallo,

ich will mir grad ne webseite zusammenbasteln...
bin noch ganz am anfang...

jetzt hab ich 1 oder 2 kleine probleme...:

meine webseite sieht bis jetzt so aus: (bild im anhang)

im css code steht drinnen:

.pink{
background-color:#ff00ff;
position:relative;
top:-90px;
left:120px;
right:10px;
widht:20px;
height:100px;
}

.rot{
background-color:#ff0000;
position:relative;
top:10px;
left:10px;
widht:40px;
height:150px;
}

die werte bei "width" sind nur zur veranschaulichung gewählt... egal was ich reinschreibe... die werden einfach nicht kürzer...

html code:

<div class="blauer_rand">
   <div class="rot">
      <div class="schwarz">
         <div class="grün">
            asdhkas
         </div>
         <div class="pink">
            aslhlkahdlkashdlkashdlkash
         </div>
      </div>
   </div>
</div>

das pinke soll innerhalb vom scharzen sein (mit 10px abstand nach rechts) und das rote soll innerhalb vom blau umrandeten div sein...

 

[webworker]

schonmal mit width probiert

 

[Jesterfox]

Hm, wenn der Text im DIV länger wäre würd ich sgaen das es daran liegt... aber probier es trotzdem mal mit overflow:hidden.

EDIT: man sollte übrigens width richtig schreiben damit es die Browser auch als solche erkennen...

Andererseits würd ich auch mal schauen ob sich das gewünschte Design nicht auch ohne DIV-Suppe und relativen Positionrumgeschiebe realisieren lässt... bei sowas blickt man irgendwann nicht mehr durch und wenn man nachträglich etwas ändern will wird richtig haarig... Rahmen kann man z.B. auch per CSS realisieren ohne das man extra Elemente braucht.

 

[Mr. Poe]

ne... ich muss das mit divs machen...^^
das hat seine gründe...

wo soll ich das overflow:hidden reinschreiben?
wenns im schwarzen is, dann is es zwar abgeschnitten... aber es is halt kein abstand da drinnen...

 

[Jesterfox]

Hab nochmal editiert, das hidden brauchst du vermutlich nicht (wenn dann müsste es in die CSS-Klasse rein die die Breite nicht richtig annimmt, also .pink, aber wie gesagt liegts wohl nur am Schreibfehler)

 

[Mr. Poe]

ohh neee -.-

son kak^^ ich frag mich die ganze zeit, warums nich geht und dann is die lösung so einfach -.-

danke
jetzt gehts...

ps. kann man in notepad/wordpad syntaxhighlighting aktivieren?^^

 

[Jesterfox]

Nö, die haben sowas nicht... hol dir am besten einen anderen Editor wie PSPad, die können das und einiges mehr (vor allem auch besserer Umgang mit Unicode was für Webseiten sehr wichtig ist... Notepad haut dir da immer eine BOM rein die viel zerschießen kann und bei UTF-8 bestenfalls überflüssig ist)

 

[Mr. Poe]

ja kann hier keinen anderen editor verwenden...

aber nochmal danke für die hilfe

 

[Jesterfox]

Mit Divs und Notepad arbeiten müssen... an deiner Stelle würd ich mich bei Amnesty International melden wegen menschenunwürdiger Arbeitsbedingungen ;-)

 

[Domi83]

Wieso kannst Du keinen anderen Editor verwenden..?
Notepad++ Portable runter laden, starten und gut ist der Lack... das sollte doch wohl gehen. Oder sind deine Berichtigungen soweit eingeschränkt, dass Du nur PC an und aus machen darfst?!

Aber das arbeiten mit DIV Layer ist schon ein Spaß für sich.. vor allen mit dem normalen Notepad

 

[HigH_HawK]

ja kann hier keinen anderen editor verwenden...

aber nochmal danke für die hilfe

Falls du es darfst und auch Hardwareseitig kannst, würde ich PortableApps auf einem USB Stick empfehlen! Somit brauchst du nichts installieren und hast die oben besagten Programme immer dabei.

 

[Mr. Poe]

ja hab keine rechte...
sonnst hätt ich doch schon längst notepad++ installiert...

 

[BigNum]

Darum hat Domi83 oben ja auch den Notepad++ Portable vorgeschlagen, den musst Du nicht installieren!


HTH

BigNum

 

[Daaron]

Mit Divs und Notepad arbeiten müssen... an deiner Stelle würd ich mich bei Amnesty International melden wegen menschenunwürdiger Arbeitsbedingungen ;-)

Notepad ist grausam, aber was hast du gegen Div-Suppe (bzw. welches elegante Mittel)? Manchmal muss es eine Div-Suppe sein... spätestens dann, wenn HTML5-Elemente und CSS3-Formatierungen keine Option sind.

 

[Jesterfox]

Bereits HTML 4 bietet viel mehr als nur DIV und auch mit CSS 2.1 kann man schon sehr viel anstellen. Die unfähigen Browser wie IE kleiner 8 und Firefox kleiner 3 so langsam auch mal ausgestorben sein... ein gut strukturierter HTML Quelltext ist einfach viel übersichtlicher und man findet sich auch später noch darin zurecht wenn man mal ne Woche oder mehr etwas anderes gemacht hat.

Ansonsten ist noch die Frage wie ernst gemein die Klassennamen waren, ich hoffe die waren nur zum Test so... da sollte nie die gewünschte Darstellung sondern eher der Sinn und Zweck des Elements drin enthalten sein. Wenn plötzlich statt pink grün gewünscht wird hat man dann enwteder .pink { color: green; } im CSS stehen oder darf den ganzen HTML Code mit anfassen... ein .Infobox dagegen bleibt immer aktuell.

 

[Domi83]

Ist zwar am Topic vorbei, aber gibt es mal Beispiele, Vergleiche oder ähnliches für HTML 4 und CSS 2.1 gegenüber den älteren Varianten..? Das interessiert mich ja mal, was man da so geändert hat.

 

[Jesterfox]

Hm, wüsst jetzt nicht direkt was... aber bei HTML ists auch relativ egal, HTML 4 ist "uralt" die noch älteren Varianten wirklich irrelevant. Aber die hauptsächliche Änderung gergenüber HTML 3.2 war die ganzen Darstellungssachen als deprecated zu markieren und as an CSS zu übergeben.

Bei CSS ists sowieso eine schwierige Sache da man nie wirklich auf den Standard selbst schauen kann sondern betrachten muss was die Browser davon tatsächlich unterstützen... der einzige Browser mit vollständigem CSS 2.1 ist der IE 8 (und neuer)... die anderen Browser punkten zwar mit tollen neuen CSS 3 Features, arbeiten aber die alten Lücken nicht auf. Aber das sind meist auch nur Spezialfälle die man selten antrifft. Im allgemeinen kann man davon ausgehen das in aktuellen Browsern HTML 4 und CSS2.1 läuft. Maximal das man noch alte IEs (7 und kleiner) antrifft, da muss man sich halt überlegen was man in dem Fall dem User präsentieren will.

Aber das sit das schöne wenn man ein gut strukturietes HTML hat: im Notfall einfach kein Stylesheet liefern und es komplett dem Browser überlassen und es kommt trotzdem was halbwegs sinnvolles und benutzbares raus.

 

[Domi83]

Ah.. ich glaube mein Fehler war auch, dass ich HTML 4 mit xHTML verwechselt hatte, darum kam ich auf neuere Features. Bei CSS wusste ich noch so halbwegs, dass es da was neues gibt was nicht jeder kann oder anzeigen will etc.

Besonders schöne Beispiele sind dann der IE gegenüber FF oder Chrome etc., mit solchen Dingen wie dem border-radius...

 

[Jesterfox]

Wobei HTML 4 und XHTML 1.0 sich nicht unterschieden und XHTML 1.1 eher irrelevant ist da es nie wirklich Verbreitung gefunden hat. XHTML 2 ist leider tot... hätte mir wesentlich besser gefallen als HTML 5.

Der border-radius ist aber schon CSS 3, aber wie gesagt ist das bei CSS eh recht fließend, genau den selben Weg beschreitet jetzt auch HTML 5.

 

[Daaron]

Der einzige Vorteil von XHTML gegenüber HTML sind die Namespaces. Ich fand die Ansätze von z.B. Facebook mit der fbxml - Notation für Like-Buttons etc. ziemlich gut.

Die Div-Hölle lässt sich aber trotzdem nicht immer umgehen. Du kannst ja mal versuchen einen variablen Dropshadow ohne CSS3 zu realisieren.