[CSS] voor dummies - Deeltje 8

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 ...

AJAX staat voor Asnynchronus Javascript And XML

Heeft dus weinig met CSS te maken, totdat je de boel wilt gaan opmaken.

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?

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?

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.

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.

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.

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...

RM-rf waarom zo agressief opgesteld

Als ik het beter zou weten was ik hier niet terecht.
Zo leer ik nog eens wat

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

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>