[CSS] voor dummies - Deeltje 8

Index

» digital corner

actieve topics nieuwe topics
abonnement Unibet Coolblue
pi_56859431
quote:
Op woensdag 20 februari 2008 12:22 schreef NiteSpeed het volgende:
saban, het is geen ajax. Die 2 KB tekst en CSS gegevens kan je wel hiden en showen op een mouseover zonder serverside processing.
Ik krijg een heel lang overzicht met id's, zodra ik met mn muis erover heen ga moet er informatie opgehaald worden wat gekoppeld staat bij desbetreffende id.
Stel ik heb een overzicht met 150 id's, om nou gelijk voor alle 150 id's alle info binnen te halen ...
ne okuyon, bokmu var?
pi_56859551
AJAX staat voor Asnynchronus Javascript And XML

Heeft dus weinig met CSS te maken, totdat je de boel wilt gaan opmaken.
pi_56859749
quote:
Op woensdag 20 februari 2008 14:00 schreef saban het volgende:

[..]

Ik krijg een heel lang overzicht met id's, zodra ik met mn muis erover heen ga moet er informatie opgehaald worden wat gekoppeld staat bij desbetreffende id.
Stel ik heb een overzicht met 150 id's, om nou gelijk voor alle 150 id's alle info binnen te halen ...
Je moet het andersom zien.... kennelijk moet je een hele extra oplossing gaan bedenken en uitvoeren (en de techniek an sich ook eerst nog ontdekken) om je probleem 'asynchroon' op te lossen, terwijl in je eisenpakket verder nergens asynchroniteit vereist of dit een duidelijke meerwaarde bied..

de 'server-load' is hier redelijk irrelevant.. je verlicht iig vrijwel geen enkele structurele belasting op de server met een 'ajax-oplossing' tov een oplossing waar de info direkt meegestuurd wordt... dus blijft de vraag 'wat is de reden dat je ajax wilt gebruiken' en weegt dat op tegen de extra moeite die je moet doen het op die manier uit te voeren?
"Whatever you feel like: Life’s not one color, nor are you my only reader" - Ausonius, Epigrammata 25
pi_56859847
quote:
Op woensdag 20 februari 2008 14:00 schreef saban het volgende:

[..]

Ik krijg een heel lang overzicht met id's, zodra ik met mn muis erover heen ga moet er informatie opgehaald worden wat gekoppeld staat bij desbetreffende id.
Stel ik heb een overzicht met 150 id's, om nou gelijk voor alle 150 id's alle info binnen te halen ...
Je kunt eventueel ook met meerdere pagina's werken, of een zoekfunctie? Misschien dat iemand het ID intypt voor informatie?
  woensdag 20 februari 2008 @ 14:45:15 #155
12880 CraZaay
prettig gestoord
pi_56860486
quote:
Op woensdag 20 februari 2008 14:00 schreef saban het volgende:

[..]

Ik krijg een heel lang overzicht met id's, zodra ik met mn muis erover heen ga moet er informatie opgehaald worden wat gekoppeld staat bij desbetreffende id.
Stel ik heb een overzicht met 150 id's, om nou gelijk voor alle 150 id's alle info binnen te halen ...
Wat is 'alle info"? Hoeveel info heb je per ID? Desnoods zet je het niet in de DOM maar in een JS object (JSON bijv.) en haal je het daar uit. Scheelt een hoop HTML.
pi_56878230
quote:
Op woensdag 20 februari 2008 14:13 schreef RM-rf het volgende:

[..]

Je moet het andersom zien.... kennelijk moet je een hele extra oplossing gaan bedenken en uitvoeren (en de techniek an sich ook eerst nog ontdekken) om je probleem 'asynchroon' op te lossen, terwijl in je eisenpakket verder nergens asynchroniteit vereist of dit een duidelijke meerwaarde bied..

de 'server-load' is hier redelijk irrelevant.. je verlicht iig vrijwel geen enkele structurele belasting op de server met een 'ajax-oplossing' tov een oplossing waar de info direkt meegestuurd wordt... dus blijft de vraag 'wat is de reden dat je ajax wilt gebruiken' en weegt dat op tegen de extra moeite die je moet doen het op die manier uit te voeren?
Met AJAX komt niet direct alle gegevens mee. Pas wanneer je het laat aanvragen.
Indien ik het zonder AJAX wil doen, dus alle gegevens direct opvragen en hiden met CSS is dat zeker wel zwaarder voor de serverload.
ne okuyon, bokmu var?
pi_56878248
quote:
Op woensdag 20 februari 2008 14:17 schreef Geqxon het volgende:

[..]

Je kunt eventueel ook met meerdere pagina's werken, of een zoekfunctie? Misschien dat iemand het ID intypt voor informatie?
Natuurlijk kan dat Was alleen aan het rondkijken/vragen/zoeken of het mogelijk was (tuurlijk wel), maar of het ook efficient is voor de tijd dat ik er in stop
quote:
Op woensdag 20 februari 2008 14:45 schreef CraZaay het volgende:

[..]

Wat is 'alle info"? Hoeveel info heb je per ID? Desnoods zet je het niet in de DOM maar in een JS object (JSON bijv.) en haal je het daar uit. Scheelt een hoop HTML.
Per ID nu 15 velden (in zelfde tabel), dit later uitgebreid worden door info ook uit andere tabellen op te vragen.
De hoeveelheid ID kan verschillen, van tien tot een paar honderd.
ne okuyon, bokmu var?
pi_56879934
quote:
Op donderdag 21 februari 2008 09:14 schreef saban het volgende:

[..]

Met AJAX komt niet direct alle gegevens mee. Pas wanneer je het laat aanvragen.
Indien ik het zonder AJAX wil doen, dus alle gegevens direct opvragen en hiden met CSS is dat zeker wel zwaarder voor de serverload.
Dat is onzin, serverload is geen 2-dimensionale absoluutheid..

ik zei niet voor niks dat het gebruik van ajax in deze 'verlicht iig vrijwel geen enkele structurele belasting op de server'

het enige verschil dat je zou 'winnen' zou een enkele sqlquery zijn om de betreffende data op te vragen (ervanuitgaande dat de data uit een db komt) wat milli-microseconden rendertijd en een paar bytes aan data...
zodra echter een gebruik enthousiast met zn muis over de elementen beweegt krijg je een veel zwaardere belasting, omdat voor iedere mouseover dus een separate reqiuest komt, een aparte query uitgevoerd moet worden... iedere 'winst' wat betreft serverbelasting is minimaal en niet structureel die je had verlies je razend snel zodra er ook gebruik van gemaakt wordt..

bedenk ook dat een server helemaal geen problemen ermee heeft ipv in 0.135 seconde in 0.137 seconde een pagina te renderen en server en of deze ipv 6.056 ipv 6.012 Bytes groot is...

een 'que' aan requests kan eerder laadproblemen opleveren, zowel aan de serverside (het aantal connecties welke een server aankan zal eerder beperkt zijn en hierdoor kunnen request in de wachtrij geplaatst).. maar ook aan de clientside, meestal betekent ajax toch dat er na het event dat het request ooproept eventjes gewacht moet worden totdat het request geplaatst is en de data teruggelezen... juist zulk een vertraging is bij mouseovers mogelijk een ergenis, helemaal als het gaat om een hele rij van elementen die op een mouseover zo'n request oproepen (het effect dat je kunt krijgen is dat als de gebruiker toevallig met zn muispointer over de elementen heenbeweegt zelfs zonder te weten hermee data op te vragen, opeens meerdere requests geplaats worden en het enkele seconden duurt voor deze afgehandeld zijn).

maar als je zo nodig het beter wilt weten, moet je het vooral gaan uitvoeren en zul je zelf merken wat de nadelen zijn...
"Whatever you feel like: Life’s not one color, nor are you my only reader" - Ausonius, Epigrammata 25
pi_56880253
RM-rf waarom zo agressief opgesteld

Als ik het beter zou weten was ik hier niet terecht.
Zo leer ik nog eens wat
ne okuyon, bokmu var?
pi_56880373
quote:
Op donderdag 21 februari 2008 10:47 schreef RM-rf het volgende:

[..]

maar als je zo nodig het beter wilt weten, moet je het vooral gaan uitvoeren en zul je zelf merken wat de nadelen zijn...
Dat laatste zinnetje verneukt echt je hele post, waar misschien toch wel een kern van waarheid in zat
  donderdag 21 februari 2008 @ 14:27:08 #161
12880 CraZaay
prettig gestoord
pi_56884258
Sterker nog, inhoudelijk was 'ie correct
pi_56884910
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.
  zaterdag 1 maart 2008 @ 13:49:12 #163
73232 De_Hertog
Aut bibat, aut abeat
pi_57080528
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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19		body {
   height: 100%;
}

#header {
    position: relative;
    width: 100%;  
}

#content {
    position: relative;
    margin-bottom: 20px;
}


#footer {  
    position: relative;
    height: 20px; 
}


Als ik dan vervolgens zo'n pagina er in gooi:
1
2
3
4
5
6
7
8
9
10		<div id="header">Title</div>

<div id="content">
  <p>
    <img src="plaatje.jpg" alt="Een plaatje van meer dan een regel tekst">
    Hier dan een regel tekst
  </p>
</div>

<div id="footer"> En hier dan de footer</div>


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?
Mary had a little lamb
Then Mary had dessert
pi_57084577
Waarschijnlijk heeft het plaatje een position:absolute edit of een float:left/right

Hier gaat het verder gewoon goed als ik bovenstaande code test.
pi_57084616
Ik heb daar een werkende oplossing voor, maar die kan ik zo snel even niet vinden. Volgens mij is het iets als:

css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15		html, body {
   margin: 0;
   padding: 0;
   min-height: 100%;
}
#container {
   min-height: 100%
   margin-bottom: -20px;
}
#clearfooter {
   height: 20px;
}
#footer {
   height: 20px;
}


html
1
2
3
4
5
6
7
8
9
10
11
12
13
14		<html>
<body>
<div id="container">
<div id="header">Title</div>
<div id="content">
  <p>
    <img src="plaatje.jpg" alt="Een plaatje van meer dan een regel tekst">
    Hier dan een regel tekst
  </p>
  <div id="clearfooter"></div>
</div>
<div id="footer">Hier de footer</div>
</body>
</html>


Daar moeten dan nog wel een paar IE-hacks bij.
fokstok.nl
  maandag 3 maart 2008 @ 20:50:48 #166
73232 De_Hertog
Aut bibat, aut abeat
pi_57135313
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?
Mary had a little lamb
Then Mary had dessert
pi_57203977


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

1
2
3
4
5
6
7
8
9
10
11
12		input
{
   border: 1px solid #000000;
   background-image: url('../img/inputback.jpg');
   background-repeat: repeat-x;
   font-family: Arial;
   font-size: 14px;
   font-weight: normal;
   color: #322F33;
   height: 21px;
   line-height: 21px
}


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) ]
  donderdag 6 maart 2008 @ 19:59:03 #168
12880 CraZaay
prettig gestoord
pi_57204447
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.
  donderdag 6 maart 2008 @ 20:00:17 #169
12880 CraZaay
prettig gestoord
pi_57204488
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)?
pi_57204829
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?
  donderdag 6 maart 2008 @ 20:17:17 #171
12880 CraZaay
prettig gestoord
pi_57204995
Denk niet dat dat cross browser gaat werken. Zou met vertical-align moeten als het überhaupt kan.
pi_57205617
vertical-align leverde helaas ook niets op. Dat wordt dus maar met die paddings werken. Bedankt!
pi_57301169
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
pi_57301314
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.
pi_57301641
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>
  dinsdag 11 maart 2008 @ 11:31:41 #176
12880 CraZaay
prettig gestoord
pi_57302829
Welk doctype gebruik je?
pi_57303206
<!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?
  dinsdag 11 maart 2008 @ 12:34:41 #178
12880 CraZaay
prettig gestoord
pi_57304039
Nee hoor, xhtml 1.0 strict is prima
pi_57305101
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.
pi_57306772
met position: absolute bedoel je? ik had gelezen dat je zoveel mogelijk position moet mijden, waarom dan ook.
  dinsdag 11 maart 2008 @ 15:13:04 #181
12880 CraZaay
prettig gestoord
pi_57306932
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
pi_57307007
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.
pi_57307298
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.
pi_57317426
bedankt voor alle reacties!
eerste wat ik morgenvroeg doe is uitproberen met position.
pi_57322628
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!
  woensdag 12 maart 2008 @ 09:50:24 #186
12880 CraZaay
prettig gestoord
pi_57322664
Terwijl je geen floats gebruikt?
pi_57323684
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
pi_57323735
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.
pi_57324324
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
  woensdag 12 maart 2008 @ 12:40:24 #190
12880 CraZaay
prettig gestoord
pi_57325629
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
pi_57326505
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 ]
pi_57326940
hmmm..nu zegt mij dat natuurlijk helemaal niks (post niet voor niks op newbie forum :p)
maar tekst ziet ie anders als de divs?
pi_57327366
quote:
Op woensdag 12 maart 2008 13:53 schreef allesisgekozen het volgende:
hmmm..nu zegt mij dat natuurlijk helemaal niks (post niet voor niks op newbie forum :p)
maar tekst ziet ie anders als de divs?
Ik vind het zelf ook een beetje vaag.
De site die je online hebt gezet werkt nog volledig met de floats.
De div's #titelblok en #maintekst verdwijnen gedeeltelijk onder andere divs
Maar de tekst in die divs staat wél op de goeie positie, in de float.

Wat je nog kunt proberen is wat er gebeurt als je alle tags m.b.t. de grootte van die divs eruit haalt, zodat de grootte puur bepaald wordt door de hoeveelheid tekst die erin staat
pi_57333148
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
Dat is op te lossen door #titelblok een breedte mee te geven. En een float: right, natuurlijk.
fokstok.nl
pi_57334007
light, je bent mn held.
alles werkt nu. alle anderen natuurlijk ook bedankt
pi_57337822
Soms kan het zoiets stoms zijn heh

Weet iemand trouwens of het m.b.v. CSS mogelijk is woorden die zo gigantisch lang zijn dat ze niet in een div of table-cel passen, tóch af te kappen?
  woensdag 12 maart 2008 @ 22:30:57 #197
12880 CraZaay
prettig gestoord
pi_57338258
quote:
Op woensdag 12 maart 2008 22:18 schreef mcDavid het volgende:
Soms kan het zoiets stoms zijn heh

Weet iemand trouwens of het m.b.v. CSS mogelijk is woorden die zo gigantisch lang zijn dat ze niet in een div of table-cel passen, tóch af te kappen?
Nee, dat kan niet. Je kan hoogstens de parent overflow: hidden geven, that's it.
pi_57339148
Mja dat zuigt ook wel. Dan gaan we het toch maar eens javascripten.
pi_57339790
Ik heb ook nog een probleempje waar ik wel wat hulp bij kan gebruiken. Ik probeer een menu te maken. Relevante html:

1
2
3
4
5		<ul>
  <li><a href="link1.html"><img src="plaatje1.gif"/></a></li>
  <li><a href="link2.html"><img src="plaatje2.gif"/></a></li>
  <li><a href="link3.html"><img src="plaatje3.gif"/></a></li>
<ul>


De bedoeling is dat de plaatjes netjes tegen elkaar aan komen te liggen. Dat lukt in FF, maar niet in IE.

1
2
3
4
5
6
7
8
9
10
11
12
13		li {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
li img {
  margin: 0;
  padding: 0;
}
li a {
  margin: 0;
  padding: 0;
}


Uiteraard valide CSS. Het html-bestand is valide XHTML 1.0 Transitional (met doctype). Wat hierboven staat is dus niet het volledige bestand, maar dat lijkt me ook niet nodig.
fokstok.nl
pi_57341456
quote:
Op woensdag 12 maart 2008 23:14 schreef Light het volgende:
Ik heb ook nog een probleempje waar ik wel wat hulp bij kan gebruiken. Ik probeer een menu te maken. Relevante html:


[ code verwijderd ]


De bedoeling is dat de plaatjes netjes tegen elkaar aan komen te liggen. Dat lukt in FF, maar niet in IE.


[ code verwijderd ]


Uiteraard valide CSS. Het html-bestand is valide XHTML 1.0 Transitional (met doctype). Wat hierboven staat is dus niet het volledige bestand, maar dat lijkt me ook niet nodig.
Er bestaat ook nog een line-height

-edit-
en ik wil je erop wijzen dat links met een plaatje ipv tekst lastig zijn voor zoekmachines, textbrowsers, enz.
Een herhaalde achtergrondafbeelding met tekst is een betere optie.

[ Bericht 10% gewijzigd door mcDavid op 12-03-2008 23:54:27 ]
actieve topics nieuwe topics
abonnement Unibet Coolblue
[CSS] voor dummies - Deeltje 8
Index

» digital corner

Forum Opties
Forumhop:
Hop naar:
(afkorting, bv 'KLB')