2sTeAmEd Mitglied
Angemeldet: 08.09.2004 Beitrge: 879
|
Verfasst am: 05.10.2008, 13:19 Titel:
Hilfe beim Code |
|
|
|
|
Servus euch,
wie ihr manche sicher gemerkt haben, (explizit die, die ich ber ICQ massenweise
belstigt habe^^) bin ich momentan im Codingaufbauseminar, respektive im
learning bei doing des Codens.
So. Diesen Thread mache ich jetzt dafr auf, dass wenn ich ein Problem hab es hier
rein poste und nicht jedesmal nen neuen Thread fr einzellne Probleme aufmachen
muss.
Mein erstes Startproblem ist folgendes:
http://www.buntpunkt-media.de/knutbertde/sbc/index.html
ich wrde gerne unten einen Footer integrieren - also einen Balken, der ber den
gesamten weien Bereich verluft. Mein jetztiges Problem war schon, dass ich nicht
wusste wie man den weien Bereich dynamisch streckt. Soll heien, ich habe eine
<div> gemacht, mit id="main" beschildert und dieser #main eine fixe Breite und
Hhe zugeteilt. Ich htte aber gerne eine Hhe, die die weie Flche 20px unter
dem letzten Wort/Punkt des Contents aufhren lsst.
Ich dachte daher, einfach eine <div></div> um den gesamten Inhalt machen geht.
Geht ja eigentlich auch, nur nicht, wenn ich float:left oder float:right zuteile, dann
springt die weie Flche sofort wieder nach oben zur letzten div ohne float (das
Wre die div mit "restoring with passion"). Dummerweise brauche ich aber diese
floats, denn ohne diese kann ich ja keinen zweispaltigen Content machen.
Wie also einen dynamischen Hintergrund?
Und wie einen Footer?
CSS-File unter http://www.buntpunkt-media.de/knutbertde/sbc/style.css
danke euch |
|
deLiTe. Mitglied
Angemeldet: 16.09.2006 Beitrge: 504 Wohnort: Freiburg Interessen: Eye-Candy
|
Verfasst am: 07.10.2008, 18:12 Titel:
|
|
|
|
|
Das hier lst dein Problem:
Zitat: | 1. I have a floated element inside of a div. The problem is that the div is not containing the floated element. As a result, my layout is screwed up. How can I fix this?
Very easily. You could take the old-school route and add some mud to your html page. But, let's do it an easier way. First, let's add the code for newer browsers:
#floatElement
{
float: left;
}
#containerDiv:after
{
content: ".";
clear: both;
display: block;
height: 0;
visibility: hidden;
}
The pseudo element "div:after" only applies to modern browsers. In this declaration, we are stating that a period (content:"." should be placed at the last possible location before the div is closed. We are then setting it to display as a block and are clearing the floated element. Obviously, we don't want to see that period, so we set the visibility to hidden and the height to 0.
However, this method won't work in IE6 and below. To compensate for this browser, add the following:
#containerDiv
{
_height: 1%;
}
Internet Explorer 6 has a bug that interprets the "height" property in the same way that a modern browser will interpret the "min-height" property. We used the underscore hack to target older browsers. By setting the height to 1%, the div will automatically expand to fill its contents. Need a video tutorial to fully understand this method? |
http://www.detacheddesigns.com/blog/blogSpecific.aspx?BlogId=52 |
|
ShortY Mitglied
Angemeldet: 04.06.2004 Beitrge: 556 Wohnort: Herdorf Interessen: Glaube, MTB, klettern, Musik(hren und machen), Computer
|
Verfasst am: 07.10.2008, 19:00 Titel:
|
|
|
|
|
was Du da gebaut ist ist semantischer Bockmist
erste Hausaufgabe: VALIDIEREN
<p> ist ein sinnvoller Tag, und man brauch auch nicht berall <br />s
dann musst Du, wenn Du laut DTD xhtml1 benutzt Dich auch dran halten <img> -> <img /> etc
http://messdiener-herdorf.de/stratford/
hier mal ein Link... hab mal aufgerumt und ordentlich eingerckt, sowie das 100%div dausgeworfen... Wichtig war, dass Du vor dem Footer clearen muss, denn wer floatet muss auch clearen... |
|