[CSS] voor dummies - Deeltje 8

Sterker nog, inhoudelijk was 'ie correct

quote:

Op donderdag 21 februari 2008 14:27 schreef CraZaay het volgende:
Sterker nog, inhoudelijk was 'ie correct

Hij mag het later nog eens proberen.

Ik heb een layout gemaakt met een footer onderaan, dat werkt op zich prima, behalve wanneer de div boven de footer een plaatje bevat dat langer is dan de tekst. Dit is mijn (relevante) css:



Als ik dan vervolgens zo'n pagina er in gooi:


Dan komt de footer dus onderaan de tekst, en loopt hij dus over het plaatje heen. Ik wil dat de tekst onderaan de gehele content blijft staan.

Geprobeerd:
content height: 100% geven, maar dan loopt bij veel content de tekst door tot voorbij de content
conten min-height: 100%; geven, maar dan staat de footer bij weinig content te ver weg
img display:block; geven,. vond ik op internet, hielp niets
margins van footer of content aanpassen werkt wel maar geeft ook weer te veel witruimte, en is bovendien geen permanente oplossing.

Kortom, hoe kan ik er voor zorgen dat de img meegeteld wordt als de hoogte van de div waar de footer onder komt?

Waarschijnlijk heeft het plaatje een position:absolute edit of een float:left/right

Hier gaat het verder gewoon goed als ik bovenstaande code test.

Ik heb daar een werkende oplossing voor, maar die kan ik zo snel even niet vinden. Volgens mij is het iets als:

css


html


Daar moeten dan nog wel een paar IE-hacks bij.

quote:

Op zaterdag 1 maart 2008 17:22 schreef mcDavid het volgende:
Waarschijnlijk heeft het plaatje een position:absolute edit of een float:left/right

Hier gaat het verder gewoon goed als ik bovenstaande code test.

Ik heb even nagekeken, en het plaatje heeft een align: right waardoor het mis gaat. Zonder die align gaat het wel goed (maar komt er uiteraard geen plaatje rond de tekst). Kortom, de vraag is, hoe kan ik een plaatje goed in de tekst plaatsen terwijl de footer blijft staan?

Bah. Dat ziet er niet uit. In Safari is-ie wel mooi en zelfs in Internet explorer. Ik wil dus graag dat de tekst die de gebruiker invoert mooi verticaal gecentreerd is. Met paddings etc zou ik het kunnen forceren, maar dat zou betekenen dat t er in Safari ed. niet mooi meer uitziet (de invoertekst te dicht tegen de onderrand aan.

Mijn css voor de input



Heeft iemand een idee?

Edit: Handig om erbij te vermelden dat het dus niet netjes in Firefox wordt weergegeven

[ Bericht 6% gewijzigd door GVRuud op 06-03-2008 19:49:24 (stom) ]

Safari doet sowieso niets met die paddings toch? Voor zover ik weet worden de form elementen door Safari helemaal onafhankelijk van de CSS gerenderd.

Maar los daarvan: wat is het probleem als je boven en onder dezelfde padding gebruikt? Dan staat 'ie gewoon in het midden.

quote:

Op maandag 3 maart 2008 20:50 schreef De_Hertog het volgende:

[..]

Ik heb even nagekeken, en het plaatje heeft een align: right waardoor het mis gaat. Zonder die align gaat het wel goed (maar komt er uiteraard geen plaatje rond de tekst). Kortom, de vraag is, hoe kan ik een plaatje goed in de tekst plaatsen terwijl de footer blijft staan?

Plaatje floaten en de float clearen op het element dat je er altijd onder wilt hebben (footer in dit geval)?

quote:

Op donderdag 6 maart 2008 19:59 schreef CraZaay het volgende:
Safari doet sowieso niets met die paddings toch? Voor zover ik weet worden de form elementen door Safari helemaal onafhankelijk van de CSS gerenderd.

Maar los daarvan: wat is het probleem als je boven en onder dezelfde padding gebruikt? Dan staat 'ie gewoon in het midden.

Safari heeft sinds versie 3 ook cssbare form elementen.

Met die paddings lukt inderdaad wel als ik ze boven en onder opgeef...
_{Na 8 uur prutsen aan dit project ben ik blijkbaar niet meer zo scherp... deadlines...}

Maar ergens anders heb ik diezelfde input-elementen, alleen met een kleinere lettergrootte. De input wordt dan ook automatisch kleiner, en met het aanpassen van de paddings zou dit idd wel te verhelpen zijn. Is er niet een mogelijkheid dat-ie de inputtekst altijd centreert in het inputveld, ongeacht de height die ik opgeef?

Denk niet dat dat cross browser gaat werken. Zou met vertical-align moeten als het überhaupt kan.

vertical-align leverde helaas ook niets op. Dat wordt dus maar met die paddings werken. Bedankt!

Ik heb een CSS probleem. Het gaat hierbij om het positioneren van vlakken. Ik positioneer 5 vlakken op de volgende manier:

222111111111111111111111111111
222555555555555555444444444444
222555555555555555444444444444
333
333

Nu wordt dat in IE goed weergegeven(gek genoeg), maar in FireFox wordt het vlak 5, 1 rij naar boven gedrukt.
Het bovenste gedeelte van vlak 5 verdwijnt dus onder vlak 1 in FF. Is dit een veel voorkomend probleem? En is er een duidelijke oplossing voor?

Mocht dit niet genoeg informatie zijn, dan kan ik altijd de code nog erbij zetten. Ik heb ook screenshots gemaakt, heb alleen geen webspace.

Mvg. Machiel

PS. Mijn excuses als dit niet goed gepost is

quote:

Op dinsdag 11 maart 2008 10:01 schreef allesisgekozen het volgende:
Ik heb een CSS probleem. Het gaat hierbij om het positioneren van vlakken. Ik positioneer 5 vlakken op de volgende manier:

222111111111111111111111111111
222555555555555555444444444444
222555555555555555444444444444
333
333

Nu wordt dat in IE goed weergegeven(gek genoeg), maar in FireFox wordt het vlak 5, 1 rij naar boven gedrukt.
Het bovenste gedeelte van vlak 5 verdwijnt dus onder vlak 1 in FF. Is dit een veel voorkomend probleem? En is er een duidelijke oplossing voor?

Mocht dit niet genoeg informatie zijn, dan kan ik altijd de code nog erbij zetten. Ik heb ook screenshots gemaakt, heb alleen geen webspace.

Mvg. Machiel

PS. Mijn excuses als dit niet goed gepost is

Heb je de pagina online staan? Moeten natuurlijk wel je code kunnen bekijken om te zien wat er mis is.

Even een tip geheel terzijde. Als je een nieuwe layout gaat maken, begin dan altijd met de standaardindeling/basis en geef deze desnoods felle kleuren mee zodat je goed kunt zien hoe ze weergeven worden. In je voorbeeld die ik in feite een layout vrij recht toe recht aan ingedeeld is.

hier is de code van de css file (ik heb sinds kort geen webspace meer, sorry) Het gaat dan om de laatste div (de zwarte) :

* {
margin: 0px;
padding: 0px;
border: 0px;
}

html, body {
width: 100%;
height: 100%;
}

body {
font-family: "Lucida Sans Unicode", "Lucida Grande", arial, verdana;
font-size: 11px;
color: #b5bce8;
background: url('../images/body_bg.jpg') repeat-x 0px 0px #b5bce8;

}

input {
font-family: "Lucida Sans Unicode", "Lucida Grande", arial, verdana, helvetiva;
font-size: 11px;
}

#wrapper {
margin: 0 auto;
width: 1076px;
min-height: 100%;
height: auto !important;
height: 100%;
background: url('../images/wrapper_bg.jpg') repeat-y 0px 0px;
}

#breadcrumb {
width: 905px;
height: 40px;
background-color: red;
float:right;
}

#menu {
width: 171px;
height: 430px;
background-color: yellow;
float: left;
}

#logo {
width: 171px;
height: 170px;
background-color: green;
}

#fotoblok {
width: 338px;
height: 290px;
float: right;
background-color: orange;
}

#titelblok {
height: 130px;
background-color: black;
}

#maintekst {
width: 567px;
height: 100%;
min-height: 400px;
background-color: purple;
}

En de HTML:

<body>
<div id="wrapper">

<div id="breadcrumb"></div>
<div id="menu">
<div id="logo"></div>
</div>
<div id="fotoblok"></div>
<div id="titelblok"></div>
<div id="maintekst"></div>

</div>


</body>

Welk doctype gebruik je?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xHTML1/DTD/xHTML1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl" dir="ltr">

is dat de slechte variant?

Nee hoor, xhtml 1.0 strict is prima

wtf ik zit wat te klooien met bovenstaande code, maar in Fx schuiven 2 divs die naast elkaar staan, waarvan er één een float:left heef, gewoon achter elkaar langs
Ik snap er geen yota meer van. Ik had allang alles met position gedaan.

met position: absolute bedoel je? ik had gelezen dat je zoveel mogelijk position moet mijden, waarom dan ook.

quote:

Op dinsdag 11 maart 2008 15:01 schreef allesisgekozen het volgende:
met position: absolute bedoel je? ik had gelezen dat je zoveel mogelijk position moet mijden, waarom dan ook.

Omdat je alles uit de flow haalt, al doe je dat met floats ook gedeeltelijk

quote:

Op dinsdag 11 maart 2008 15:01 schreef allesisgekozen het volgende:
met position: absolute bedoel je? ik had gelezen dat je zoveel mogelijk position moet mijden, waarom dan ook.

Als je objecten absoluut positioneert, houden ze geen rekening meer met elkaar. Soms is dit gewenst, soms niet. Het ligt er natuurlijk maar net aan wat je wil doen.

quote:

Op dinsdag 11 maart 2008 15:01 schreef allesisgekozen het volgende:
met position: absolute bedoel je? ik had gelezen dat je zoveel mogelijk position moet mijden, waarom dan ook.

jep

geef eerst die wrapper een position: relative, daarna kun je alle div's m.b.v. position:absolute gewoon exact positioneren.

Het is gewoon een goeie methode om te positioneren. Je moet alleen wel oppassen dat je je html semantisch houdt. Als je alles absolute positioneert maakt het namelijk geen reet meer uit waar je wat neerzet (je kunt bijv. de div met de header helemaal onderaan zetten) en dat kan chaos opleveren.
Vandaar dat over het algemeen het advies is indien mogelijk liever geen position:absolute te gebruiken.

-edit-
er is wel wat voor te zeggen zoveel mogelijk div's in de float te houden, maar met een layout met een fixed breedte zoals die van jou lijkt me dat niet erg noodzakelijk.

bedankt voor alle reacties!
eerste wat ik morgenvroeg doe is uitproberen met position.

Zo, zojuist ermee zitten klooien.
Firefox vindt het dan allemaal heel mooi, en klopt dus ook. Maar IE zegt dan: nee, ik doe het lekker allemaal 10px meer naar rechts. ik _haat_ verschillende browsers!

Terwijl je geen floats gebruikt?

der zitten een paar floats in, meot ik dat consequent gebruiken in elke div?
en trouwens, IE neemt met position absolute een paar pxs meer naar rechts, met position relative neemt FF de wrapper en IE de vorige gemaakte div's. Wellicht regel ik even een stukje webspace zodat het makkelijker is om ernaar te kijken

quote:

Op woensdag 12 maart 2008 09:46 schreef allesisgekozen het volgende:
Zo, zojuist ermee zitten klooien.
Firefox vindt het dan allemaal heel mooi, en klopt dus ook. Maar IE zegt dan: nee, ik doe het lekker allemaal 10px meer naar rechts. ik _haat_ verschillende browsers!

heerlijk, double-margin-bug.
In principe moet het als je alles absolute positioneert altijd goed gaan.

zo, heb het even online gezet:

http://preview.anchormen.nl/css-test/

Het gaat hier dus om de zwarte en paarse balk. in IE loopt het goed, in FF schuift ie de balken onder mekaar

quote:

Op woensdag 12 maart 2008 10:58 schreef mcDavid het volgende:

[..]

heerlijk, double-margin-bug.
In principe moet het als je alles absolute positioneert altijd goed gaan.

Precies, vandaar dat ik vroeg of 'ie nog floats gebruikte

quote:

Op woensdag 12 maart 2008 11:32 schreef allesisgekozen het volgende:
zo, heb het even online gezet:

http://preview.anchormen.nl/css-test/

Het gaat hier dus om de zwarte en paarse balk. in IE loopt het goed, in FF schuift ie de balken onder mekaar

Wat gebeurt er eigenlijk als je in alle div's wat tekst zet?

-edit-
ff geprobeerd.. het gekke is: de tekst schuift níét onder de andere divs! (maar de div zelf dus wel)
http://duft.nl/web/css-test.htm

[ Bericht 8% gewijzigd door mcDavid op 12-03-2008 13:34:04 ]

hmmm..nu zegt mij dat natuurlijk helemaal niks (post niet voor niks op newbie forum :p)
maar tekst ziet ie anders als de divs?