[CSS] voor dummies - Deeltje 8

Index

» digital corner

actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
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 ]
pi_57342009
quote:
Op woensdag 12 maart 2008 23:46 schreef mcDavid het volgende:

[..]

Er bestaat ook nog een line-height
Daar kan ik nog wel mee gaan spelen morgen.
quote:
-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.
Ik gebruik wel alt-teksten En de ontwerper van de layout heeft een lettertype gekozen dat niet standaard als font beschikbaar is.
fokstok.nl
  donderdag 13 maart 2008 @ 00:07:06 #202
12880 CraZaay
prettig gestoord
pi_57342074
quote:
Op donderdag 13 maart 2008 00:03 schreef Light het volgende:

Ik gebruik wel alt-teksten En de ontwerper van de layout heeft een lettertype gekozen dat niet standaard als font beschikbaar is.
Dan nog horen de afbeeldingen wat mij betreft in de CSS, en niet in de HTML
pi_57342706
quote:
Op donderdag 13 maart 2008 00:03 schreef Light het volgende:

[..]

Daar kan ik nog wel mee gaan spelen morgen.
[..]

Ik gebruik wel alt-teksten En de ontwerper van de layout heeft een lettertype gekozen dat niet standaard als font beschikbaar is.
Er bestaan ook manieren om je eigen font mee te sturen.
pi_57344533
quote:
Op donderdag 13 maart 2008 00:07 schreef CraZaay het volgende:

[..]

Dan nog horen de afbeeldingen wat mij betreft in de CSS, en niet in de HTML
Zoveel mogelijk, dat ben ik met je eens. Als je suggesties hebt hoe ik tekst in de HTML kan gebruiken en dat kan vervangen met een afbeelding in CSS zonder dat de functionaliteit aangetast wordt dan houd ik me aanbevolen. Bij voorkeur zo dat ik een andere afbeelding kan kiezen op het moment dat iemand met z'n muis over het plaatje fietst.
fokstok.nl
pi_57344542
quote:
Op donderdag 13 maart 2008 00:31 schreef mcDavid het volgende:

[..]

Er bestaan ook manieren om je eigen font mee te sturen.
Geen nette manier, lijkt me. Sowieso vind ik niet dat je mensen kunt verplichten iets te installeren als ze op je site komen.
fokstok.nl
  donderdag 13 maart 2008 @ 08:24:30 #206
12880 CraZaay
prettig gestoord
pi_57344900
quote:
Op donderdag 13 maart 2008 07:30 schreef Light het volgende:

Zoveel mogelijk, dat ben ik met je eens. Als je suggesties hebt hoe ik tekst in de HTML kan gebruiken en dat kan vervangen met een afbeelding in CSS zonder dat de functionaliteit aangetast wordt dan houd ik me aanbevolen. Bij voorkeur zo dat ik een andere afbeelding kan kiezen op het moment dat iemand met z'n muis over het plaatje fietst.
HTML:
1
2		<a href="link.html" class="link_met_plaatje_als_achtergrond">Tekst die Google,
screenreaders en mensen zonder CSS zien</a>


CSS:
1
2
3
4
5
6
7
8
9
10
11
12		a.link_met_plaatje_als_achtergrond {
   width: 100px;
   height: 20px;
   display: block;
   background: url(plaatje.gif);
   text-indent: -9999px;
   overflow: hidden
}

a.link_met_plaatje_als_achtergrond:hover {
   background: url(plaatje2.gif);
}
pi_57346388
quote:
Op donderdag 13 maart 2008 08:24 schreef CraZaay het volgende:

[..]

HTML:
[ code verwijderd ]

CSS:
[ code verwijderd ]
Daar kan ik wel wat mee, dank Het lost ook het eerdere probleem op, waarbij de plaatjes niet goed aansloten.
fokstok.nl
pi_57353931
quote:
Op donderdag 13 maart 2008 07:32 schreef Light het volgende:

[..]

Geen nette manier, lijkt me. Sowieso vind ik niet dat je mensen kunt verplichten iets te installeren als ze op je site komen.
Je hebt gelijk. Ik dacht ooit dat ik zoiets gezien had, maar de enige mogelijkheden werken óf alleen in IE, óf werken met flash.
pi_57355094
Bij gebrek aan een centraal html topic vraag ik het hier maar even..

In html4.01 sluit je enkele tags zo af <br> en in xhtml <br />
Maar de validator keurt mijn <br /> wel gewoon goed, terwijl ik ik 4.01 doctype heb, waarom is dit?
Ik kon het in de officiële documentatie niet terug vinden.
-
pi_57355892
quote:
Op donderdag 13 maart 2008 17:14 schreef splendor het volgende:
Bij gebrek aan een centraal html topic vraag ik het hier maar even..

In html4.01 sluit je enkele tags zo af <br> en in xhtml <br />
Maar de validator keurt mijn <br /> wel gewoon goed, terwijl ik ik 4.01 doctype heb, waarom is dit?
Ik kon het in de officiële documentatie niet terug vinden.
de validator van W3c is eigenlijk gewoon een xml-based validator, traditioneel HTML kent eigenlijk geen validatie aangezien de browsers gewoon sowieso altijd moeite moeten doen een document weer te geven en ook 'interpretaties' te doen van elementen... HTML4.01 'herkent' dus ook gewoon een BR mét een traling slash.

'officiele' HTML dient eigenlijk zo streng te zijn dat als iets _niet_ valideert, het hele document eigenlijk niet verder verwerkt 'mag' worden (om data-integriteit te waarborgen, non-validatie betekent dat er iets mis is met de data)
"Whatever you feel like: Life’s not one color, nor are you my only reader" - Ausonius, Epigrammata 25
pi_57355901
Heb je een voorbeeld?
Bij mij pikt'ie ze er gewoon tussenuit hoor met html4.01 transitional!

en idd wat RM-rf zegt. Als je site het in alle browsers prima doet ondanks een paar 'bugs' in de html, dan is dat geen probleem. Valideren is meer een hulpmiddel om fouten op te sporen, maar niet per se de enige heilige manier.
pi_57371730
Na wat problemen met een ander CSS menu op mijn website (in mijn sig.) heb ik op advies een ander CSS menu geprobeerd. Maar nu werkt het alsnog niet op IE6. In IE7 en Firefox en de rest werkt het perfect, maar in IE6 krijg ik niet eens de links te zien.

Weet iemand wat dit kan zijn? Fout in de code?

http://www.meesterbrein.com/menu_style.css

Ik heb trouwens de code hiervandaan: http://www.deansabatino.com/suckerfish/suckerfish.html
Heb dezelfde code gebruikt, maar hier werkt het wel gewoon met IE6 en op mijn site niet.

Erg vreemd, want voor zover ik weet ligt het verschil tussen IE6 en IE7 vooral in de hover. Waarom werkt bij mij het halve menu dan niet?
If you don't read the newspaper, you are uninformed; if you do read the newspaper, you are misinformed.
pi_57371901
quote:
Op vrijdag 14 maart 2008 12:07 schreef HetMeesterbrein het volgende:
Na wat problemen met een ander CSS menu op mijn website (in mijn sig.) heb ik op advies een ander CSS menu geprobeerd. Maar nu werkt het alsnog niet op IE6. In IE7 en Firefox en de rest werkt het perfect, maar in IE6 krijg ik niet eens de links te zien.

Weet iemand wat dit kan zijn? Fout in de code?

http://www.meesterbrein.com/menu_style.css

Ik heb trouwens de code hiervandaan: http://www.deansabatino.com/suckerfish/suckerfish.html
Heb dezelfde code gebruikt, maar hier werkt het wel gewoon met IE6 en op mijn site niet.

Erg vreemd, want voor zover ik weet ligt het verschil tussen IE6 en IE7 vooral in de hover. Waarom werkt bij mij het halve menu dan niet?
Bij dat suckerfish menu gebruiken ze een javascript hack voor IE6, omdat die de psuedo-class :hover niet kent voor list-items.

Enneuh, heb je wel eens gehoord van relatieve url paden?
pi_57373045
Ja, maar hoorde dat het beter is voor SEO als je hele pad neerzet. Zie ook het nadeel er niet van eigenlijk.

Dat ze een javascript hack voor hover gebruiken weet ik al. Die gebruik ik ook.

Weet je misschien waarom het menu niet werkt? Dat was namelijk mijn vraag
If you don't read the newspaper, you are uninformed; if you do read the newspaper, you are misinformed.
pi_57373197
Absolute paths vind ik wel fijn, vooral als je veel met mod_rewrite werkt.
pi_57373323
Oh, euh...
155 fouten gevonden in je html-code. Misschien moet je er daar eens een paar van wegwerken?

Enneuh ik weet niet wie je dat van die SEO verteld heeft, maar dat slaat echt als een tang op een varken. Eén ding kan ik je wel vertellen: google e.d. worden niet blij van bestandsnamen als "onze-ogen-hebben-vanaf-de-geboorte-dezelfde-grootte-maar-onze-neus-en-oren-groeien-altijd.html". Kijk niet raar op als ze besluiten je niet te indexen.
  vrijdag 14 maart 2008 @ 13:19:27 #217
12880 CraZaay
prettig gestoord
pi_57373363
quote:
Op vrijdag 14 maart 2008 13:05 schreef HetMeesterbrein het volgende:

Dat ze een javascript hack voor hover gebruiken weet ik al. Die gebruik ik ook.

Weet je misschien waarom het menu niet werkt? Dat was namelijk mijn vraag
Ja, je JS werkt niet. Er hoort on hover een class op de LI gezet te worden, maar Firebug ziet dat niet gebeuren.
pi_57373887
quote:
Op vrijdag 14 maart 2008 13:19 schreef CraZaay het volgende:

[..]

Ja, je JS werkt niet. Er hoort on hover een class op de LI gezet te worden, maar Firebug ziet dat niet gebeuren.
Oooh dan moet ik daar eens naar gaan kijken. Heb het script in een apart .js bestand gezet.
quote:
Op vrijdag 14 maart 2008 13:17 schreef mcDavid het volgende:
Oh, euh...
155 fouten gevonden in je html-code. Misschien moet je er daar eens een paar van wegwerken?

Enneuh ik weet niet wie je dat van die SEO verteld heeft, maar dat slaat echt als een tang op een varken. Eén ding kan ik je wel vertellen: google e.d. worden niet blij van bestandsnamen als "onze-ogen-hebben-vanaf-de-geboorte-dezelfde-grootte-maar-onze-neus-en-oren-groeien-altijd.html". Kijk niet raar op als ze besluiten je niet te indexen.
quote:
Op vrijdag 14 maart 2008 13:12 schreef Geqxon het volgende:
Absolute paths vind ik wel fijn, vooral als je veel met mod_rewrite werkt.
Klopt. Ook bij cutenews is het handig, omdat hij anders gaat openen in view.php/index.php en dan werkt het niet goed.
If you don't read the newspaper, you are uninformed; if you do read the newspaper, you are misinformed.
pi_57373931
Je moet het zelf weten
  vrijdag 14 maart 2008 @ 16:41:16 #220
37634 wobbel
Da WoBBeL King
pi_57377884
Ik heb dit:

1Bier en tieten <div id="bier">zijn okee oleeee</div>


Probleem is dat ik dit als output krijg:

1
2		Bier en tieten 
zijn okee oleeee


maar ik wil het zo
1Bier en tieten zijn okee oleeee
Hosted VoIP SIP trunks Vast mobiel VoIP
  vrijdag 14 maart 2008 @ 17:13:14 #221
12880 CraZaay
prettig gestoord
pi_57378542
quote:
Op vrijdag 14 maart 2008 16:41 schreef wobbel het volgende:
Ik heb dit:
[ code verwijderd ]

Probleem is dat ik dit als output krijg:
[ code verwijderd ]

maar ik wil het zo
[ code verwijderd ]
Een div is een block level element van 100% breed. Waar heb je die div voor nodig?
pi_57381442
Ik heb het menu aangepast in een ander menu. Heb geen IE6 hier bij de hand.. kan iemand even zeggen of het werkt met IE6?
If you don't read the newspaper, you are uninformed; if you do read the newspaper, you are misinformed.
  vrijdag 14 maart 2008 @ 20:04:18 #223
12880 CraZaay
prettig gestoord
pi_57382305
quote:
Op vrijdag 14 maart 2008 19:27 schreef HetMeesterbrein het volgende:
Ik heb het menu aangepast in een ander menu. Heb geen IE6 hier bij de hand.. kan iemand even zeggen of het werkt met IE6?
Werkt prima.
pi_57382456
quote:
Op vrijdag 14 maart 2008 16:41 schreef wobbel het volgende:
Ik heb dit:


[ code verwijderd ]


Probleem is dat ik dit als output krijg:


[ code verwijderd ]


maar ik wil het zo

[ code verwijderd ]
zou je dat niet liever met een <span> doen?
quote:
Op vrijdag 14 maart 2008 19:27 schreef HetMeesterbrein het volgende:
Ik heb het menu aangepast in een ander menu. Heb geen IE6 hier bij de hand.. kan iemand even zeggen of het werkt met IE6?
deze doet het wel goed
pi_57383218
Oke mooi. Dan nog iets kleins. Tussen het menu en de adsense reclame zit een regel wit. Ik heb dit niet ingesteld, heb het liefst dat het tegen elkaar aan zit, maar ik weet niet hoe ik het weg kan krijgen...
If you don't read the newspaper, you are uninformed; if you do read the newspaper, you are misinformed.
actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
[CSS] voor dummies - Deeltje 8
Index

» digital corner

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