[CSS] voor dummies - Deel 5

Index

» digital corner

actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
pi_43951178
Ok, ik heb de pagina even wat versimpeld. Hieronder de code.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26		<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN' 'http://www.w3.org/TR/html4/loose.dtd'>
<html>
 <head>
  <title>Studiereis Hong Kong</title>
  <link href='style.css' rel='stylesheet' type='text/css'>
 </head>

<body>
<div id='wrap'>
   <div id='clock'>";
   <img src='klokkie.jpg'>
   </div>

   <div id='weather'>";

   require("weather.php");

   echo "
   </div>

   <div id='header'>
      <img src='images/logo.jpg' alt=''><br><br>Hier komt het nieuws te staan
   </div>
</div>
</body>
</html>


En CSS:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45		/***********************************************/
/* Algemeen                                   */
/***********************************************/
/* Force firefox to always show a vertical scrollbar */
html {
   overflow: -moz-scrollbars-vertical;
}

body {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   background-color: rgb(194,202,252);   
   margin-left: 0px;
   margin-top: 0px;
}

#wrap {
   margin:0 auto;
   width: 980px;
}

/******************** Header *******************/
#clock {
   width: 110px;
   float: left;
   margin: -15px 0 0 0;
}

#header { 
   width: 709px; 
}

#weather {
   width: 150px;
   float: right;
   margin: 45px 0 0 0;
}

/******************** Menu *********************/
#menu{
   float: left;
   width: 120px;
   background-color: #FFFFFF;
   border: 1px solid #2900cf;
   margin-bottom: 5px;
}


In FF gaat het nu nog steeds niet goed. Ik heb echt geen flauw idee waarom.
pi_43976753
quote:
Op dinsdag 28 november 2006 00:56 schreef mrbombastic het volgende:
Ok, ik heb de pagina even wat versimpeld. Hieronder de code.
[ code verwijderd ]

En CSS:
[ code verwijderd ]

In FF gaat het nu nog steeds niet goed. Ik heb echt geen flauw idee waarom.
Het is wellicht nuttig even ergens door te nemen hoe floats (horen te) werken.
In het kort wat je op je pagina doet:
- Je maakt een links floatend element;
- Je maakt een rechts floatend element;

Wat je moet beseffen is dat floats geen ruimte innemen op de pagina, maar er als het ware 'boven zweven'.

Nu ga je een div met een vaste breedte van 709px plaatsen. De browser plaatst die div in de linker bovenhoek van het scherm (zonder rekening te houden met de float linksboven; die beïnvloedt de plaatsing van nieuwe niet-floatende divs immers niet). Nu wil je een afbeelding van 709px breed in die div plaatsen, maar de linkerbovenhoek van de div wordt al ingenomen door zwevende inhoud. Dus schuift de browser de inhoud (tekst of plaatjes) net zo lang naar beneden tot het wel past.

Wat je zou kunnen doen is de div#header een margin-left van 110px geven, zodat het blok niet overlapt met het klokje.

En ja: Internet Explorers ondersteuning van het floatmodel is kut. Vertrouw daar niet op.
pi_43978742
quote:
Op dinsdag 28 november 2006 22:22 schreef AnGabhar het volgende:

[..]
Wat je zou kunnen doen is de div#header een margin-left van 110px geven, zodat het blok niet overlapt met het klokje.
Bedankt. .

Ik zal er rekening mee houden bij de volgende keer dat ik floats gebruik.
pi_44651907
Ik zit met een probleem.

Op een website van mij heb ik een pagina gemaakt met een tabel, echter krijg ik voor deze tabel een stuk white space die even groot is als het tabel en als ik vanaf het eerste stukje whitespace ga selecteren zie je ook de data in het tabel geselcteerd worden. Nu vraag ik me af hoe dit mogelijk is? alle margins en paddings staan op 0!

Voorbeeld images


en (lijkt het zelfde, maar net even iets meer geselecteerd)



Je kunt het vinden op Gesloten tijd voor bepaalde vissoorten

Ik heb mijn style sheet goed doorgekeken maar kan niets vinden dat wijst op iets fouts ivm height oid.. Iemand een idee?
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_44652007
ik kan het probleem ook niet zo 1 2 3 vinden, maar waarom geef je de margins en paddings op in punten?

Trouwens, de grijs-witte balk loopt niet door in FireFox.
Steam - SC2
pi_44652045
Je moet alle <br /> weghalen tussen je tabellen.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20		<table width="80%" style="margin: 0; padding: 0"><br />
<tr style="margin: 0; padding: 0"><br />
     <td style="margin: 0; padding: 0">Snoek</td><br />
     <td style="margin: 0; padding: 0"><strong>1 maart</strong> tot en met <strong>30 juni</strong></td><br />

</tr><br />
<tr style="margin: 0; padding: 0"><br />
     <td style="margin: 0; padding: 0">Barbeel, kopvoorn, serpeling, sneep, winde en de vlagzalm</td><br />
     <td style="margin: 0; padding: 0"><strong>1 april</strong> tot en met <strong>mei</strong></td><br />
</tr><br />
<tr style="margin: 0; padding: 0"><br />
     <td style="margin: 0; padding: 0">Snoekbaars en baars</td><br />
     <td style="margin: 0; padding: 0"><strong>1 april</strong> tot de laatste zaterdag in <strong>mei</strong></td><br />

</tr><br />
<tr><br />
     <td style="margin: 0; padding: 0">Beekforel, beekridder en bronforel</td><br />
     <td style="margin: 0; padding: 0">1 oktober t/m 31 maart</td><br />
</tr><br />
</table><br />


Die <br /> dingen mogen daar niet staan. Als ze er wel staan zorgen ze er voor dat er per <br /> een witregel boven de tabel verschijnt.
pi_44652062
Heeft dus niets met het CSS te maken .
pi_44652765
OMG!! die br's zijn me niet eens opgevallen

-edit-
Jullie hebben helemaal gelijk, moet toch maar eens een WYSIWYG editor inbouwen
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_44652998
quote:
Op vrijdag 22 december 2006 11:07 schreef Chandler het volgende:
OMG!! die br's zijn me niet eens opgevallen

-edit-
Jullie hebben helemaal gelijk, moet toch maar eens een WYSIWYG editor inbouwen
Je site ziet er overigens niet goed uit in Firefox 2. In IE is het geen probleem, maar in Fx loopt het niet echt lekker.
pi_44653361
Nee, ik weet het. Maar heb helaas geen idee hoe ik de fouten oplos, heb mijn best gedaan op het menutje (linkerkant). Ook voor het laten doorlopen van het grijze menu balkje heb ik geen oplossing gevonden.

Echt lekker loopt de site niet in FF zoals je al zei, maar nogmaals krijg het zelf niet gefixt. Heb al aardig wat CSS kennis maar dit gaat me te boven
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_44976727
Vraagje:

ik wil <a name=""tekst">tekst</a> opmaken.
Ik heb hier invloed op met a:link{}
Maar is er ook iets waarmee uitsluitend <a name=""> mee kan opmaken? Het verschijnt nu als link in de browser en dat wil ik niet.
Hoe flik ik dat?
pi_44976857
<a name="tekst" class="namedanchor">tekst</a>

vervolgens in je css:
a.namedanchor:link {}

As a rule, I never touch anything more sophisticated and delicate than myself.
pi_44977046
quote:
Op vrijdag 22 december 2006 11:29 schreef Chandler het volgende:
Nee, ik weet het. Maar heb helaas geen idee hoe ik de fouten oplos, heb mijn best gedaan op het menutje (linkerkant). Ook voor het laten doorlopen van het grijze menu balkje heb ik geen oplossing gevonden.

Echt lekker loopt de site niet in FF zoals je al zei, maar nogmaals krijg het zelf niet gefixt. Heb al aardig wat CSS kennis maar dit gaat me te boven
zorg dat je de elementen body en html een height geeft van 100%. Standaard zijn deze elementen niet groter dan nodig is.

Voor firefox gebruik je min-height: 100%; voor een 100% vullend block-element (let op dat hij alleen hetgene waar hij in staat 100% vult! een div met 100% min-height in een div met height:50px resulteert dus in 50px hoog).

In IE6 zal dit niet werken, daar heb je height: 100% voor nodig. Echter is het aangeven van een hoogte volgens de specificaties volledig vast, dat houdt dus in dat firefox (de browser die volgens specificaties werkt (IE6 dus absoluut niet (belangrijk punt! ))) het betreffende element altijd en nooit iets anders dan 100% hoog is.

dus wat moet je doen, een hackje toepassen.
zet
height: auto !important;
height: 100%;
min-height: 100%;

IE6 doet niks met important dus houdt de laatst opgegeven waarde aan, alle andere browsers onthouden de important. IE6 wordt 100% hoog, en de rest gedraagt zich zoals normaal (en tevens zou horen).
door de min-height worden ook de andere browsers geattendeerd op een minimale hoogte.

alle browsers rekken nu uit naarmate de content groter wordt dan de opgegeven 100%.

Vergeet niet dat 100% altijd 100% van het parent-element is. Dat betekent dus als je een element met de hoogte van 100% bijvoorbeeld 50px; van de bovenkant afzet, hij ook 50px langer door zal lopen. de hoogte blijft altijd gelijk.

mzo
ga maar experimenteren.
As a rule, I never touch anything more sophisticated and delicate than myself.
pi_45298749
Ik ben nog stééds zo groen als wat op het gebied van CSS en dan loop je nogal eens tegen probleempjes aan.

Ik heb een opzetje voor mijn site hier staan. Voor het gemak heb ik mijn stylesheet hier opgeslagen.

Nu wil ik het volgende. In het navigatie gedeelte heb ik vier linkjes staan: Het begin, Over mij, Portfolio en Blog. Nu ben ik lekker eigenwijs en wil ik de drie laatsten - Over Mij, Portfolio en Blog - helemaal rechts hebben, zoals ze nu dus goed staan. Het begin wil ik echter helemaal links tussen de zwarte borders hebben staan. Nu is dat, zoals jullie zien, totaal mislukt. Ik kan er met mijn beperkte kennis even niet bij. Wie o wie kan mij helpen?

Overigens realiseer ik me dat er wellicht best wat rommel in de HTML of CSS kan staan of dat ik 't een en ander eigenlijk veel logischer kan aanpakken. Suggesties op dat gebied zijn ook van harte welkom, maar het gaat me met name om het navigatieprobleempje. De headers zijn en blijven plaatjes, no question about that.

Alvast bedankt.
last.fm
marksluymers.nl
pi_45299473
1
2
3		<span style="float:left;">Helemaal links</span>

<span style="float:right;">Dit staat helemaal rechts</span>
pi_45299501
En als de headers plaatjes blijven, doe er dan een alt attribuut bij.
pi_45299600
Dat van die alt attribuut was ik al van plan, maar dat is van later zorg.

Is het niet binnen CSS op te lossen, eigenlijk?
last.fm
marksluymers.nl
pi_45299724
Ik heb ook een vraag! .

Heb een div tagje gemaakt met daarin een plaatje, en nou wil ik dat divding en dus het plaatje in het midden van het browservenster hebben. Sowieso horizontaal, als het even kan ook verticaal. Het plaatje is 800x600, dus eigenlijk zou ik het op 50%-400pixels moeten zetten ofzo. Hoe doe je zoiets?
pi_45309266
1<div style="margin:0px auto;">Horizontaal gecentreerd</div>
pi_45309385
Je site verticaal en horizontaal uitlijnen (site heeft bv afmetingen 960x458pixels

css:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15		#wrapper {
height: 458px;
width: 960px;
position:absolute;
top: 50%;
margin-top: -229px;
left: 50%;
margin-left: -480px;
text-align: left;
}

#container {
width: 920px;
margin: 0em auto;
}


html:
1
2
3
4
5
6
7		<body>
<div id="wrapper">
<div id="container">
content
</div>
</div>
</body>
pi_45309437
Zowel horizontaal als vertikaal centreren van een afbeelding in een DIV:

css:
1
2
3
4
5
6
7
8
9		div.afbeelding-container{
height:200px;
width:100px;
line-height:180px;
font-szie:180px;
}
div.afbeelding-container img{
vertical-align:middle
}


html:
1<div class="afbeelding-container"><img src="afbeelding.gif" border="0" width="50" height="50"></div>
  zaterdag 13 januari 2007 @ 11:59:16 #122
165500 MysticBlue
I\'m mister blue
pi_45309479
tvp
pi_45311735
quote:
Op zaterdag 13 januari 2007 11:55 schreef haaahaha het volgende:
Je site verticaal en horizontaal uitlijnen (site heeft bv afmetingen 960x458pixels

css:

[ code verwijderd ]

html:

[ code verwijderd ]
Deze heb ik gebruikt, dat werkt prima.
Maar nu...als ik een 'layer' heb gemaakt met bovenstaande code, en ik wil daarop nog een layer leggen met tekst die bijvoorbeeld een stukje naar links staat, maar wel altijd daar, kan dat ook?
* veldmuis denkt dat-ie beter aan de flash kan :").
pi_45312457
Je kan een layer absolute positioneren binnen een andere absoluut of relatief gepositioneerde layer. De binnenste layer zal dan het 0 punt van de layer daarbuiten nemen.
pi_45314651
Ik denk dat ik toch meer hulp nodig heb :@.
1
2		<div id="wrapper">
<div id="container"><img src="back.jpg" width="800" height="600" border="0" /></div>

Dat heb ik nu van jou gekopieerd dus...maar hoe zet ik daarbinnen nou weer een ander ding? :P.
pi_45316725
Wat zitten kloten, en intussen werkt het, maar nou heb ik weer wat anders !

divje1 = menuutje
divje2 = ding waarin content komt

hoe zorg ik dat alleen divje2 gerefresht wordt als ik in divje1 een linkje aanklik?
  FOK!-Schrikkelbaas zaterdag 13 januari 2007 @ 16:58:40 #127
1972 Swetsenegger
Egocentrische Narcist
pi_45316866
quote:
Op zaterdag 13 januari 2007 16:53 schreef veldmuis het volgende:
Wat zitten kloten, en intussen werkt het, maar nou heb ik weer wat anders !

divje1 = menuutje
divje2 = ding waarin content komt

hoe zorg ik dat alleen divje2 gerefresht wordt als ik in divje1 een linkje aanklik?
niet, het zijn geen frames.
 | FOK! Schrikkelbaasch
pi_45316945
quote:
Op zaterdag 13 januari 2007 16:58 schreef Swetsenegger het volgende:

[..]

niet, het zijn geen frames.
Okay, clear. Hoe los je zoiets normaliter op? Totaal anders? Gewoon een paar pagina's die er hetzelfde uitzien met alleen andere content?

Ik wil de content trouwens uit een database gaan halen, mocht dat uitmaken.
  FOK!-Schrikkelbaas zaterdag 13 januari 2007 @ 17:04:32 #129
1972 Swetsenegger
Egocentrische Narcist
pi_45317071
quote:
Op zaterdag 13 januari 2007 17:00 schreef veldmuis het volgende:

[..]

Okay, clear. Hoe los je zoiets normaliter op? Totaal anders? Gewoon een paar pagina's die er hetzelfde uitzien met alleen andere content?

Ik wil de content trouwens uit een database gaan halen, mocht dat uitmaken.
Gewoon een nieuwe pagina maken. En aangezien je met een database werkt neem ik aan dat je ook php ondersteuning hebt?
Dan kan je grote delen die op elke pagina hetzelfde zijn bv includen. Of precies andersom, je maakt 1 keer de pagina en afhankelijk van de gekozen optie laad je bepaalde content in die ene pagina.

(bv met de GET functie in php.
Als je bv een webpagina pagina.php hebt kan je linkjes maken:
http://www.domein.nl/pagina.php?id=1
http://www.domein.nl/pagina.php?id=2
etc

En vervolgens kan je op basis van het id de bijbehorende content tonen.
 | FOK! Schrikkelbaasch
pi_45317275
Hmm, okay! Ga ik het zo doen, eigenlijk wel logisch .

Thanks!
pi_45321363
quote:
Op vrijdag 12 januari 2007 22:01 schreef MadGuy het volgende:
Ik ben nog stééds zo groen als wat op het gebied van CSS en dan loop je nogal eens tegen probleempjes aan.

Ik heb een opzetje voor mijn site hier staan. Voor het gemak heb ik mijn stylesheet hier opgeslagen.

Nu wil ik het volgende. In het navigatie gedeelte heb ik vier linkjes staan: Het begin, Over mij, Portfolio en Blog. Nu ben ik lekker eigenwijs en wil ik de drie laatsten - Over Mij, Portfolio en Blog - helemaal rechts hebben, zoals ze nu dus goed staan. Het begin wil ik echter helemaal links tussen de zwarte borders hebben staan. Nu is dat, zoals jullie zien, totaal mislukt. Ik kan er met mijn beperkte kennis even niet bij. Wie o wie kan mij helpen?

Overigens realiseer ik me dat er wellicht best wat rommel in de HTML of CSS kan staan of dat ik 't een en ander eigenlijk veel logischer kan aanpakken. Suggesties op dat gebied zijn ook van harte welkom, maar het gaat me met name om het navigatieprobleempje. De headers zijn en blijven plaatjes, no question about that.

Alvast bedankt.
Heeft iemand nog een suggestie voor mijn probleempje?

Dat includen zal voor mij ook nuttig worden als het op de nieuwe host komt te staan, bedankt voor de tip.
last.fm
marksluymers.nl
pi_45321643
MadGuy: wat is er mis met mijn oplossing? Die werkt perfect.

Het is een nette oplossing in CSS (alles wat in style="" staat is CSS). Je moet sowieso beide zaken scheiden en voor elke aangeven of hij links of rechts moet komen te staan.

Als je het gescheiden wilt:

HTML
1
2
3		<span id="links">Het begin</span>

<span id="rechts">Blog - Portfolio - Over mij</span>


CSS
1
2		#links {float:left;}
#rechts {float:right;}
pi_45321770
Oh, wacht! Ik begreep hem he-le-maal verkeerd. Mijn excuses! Ik ga hem zo meteen proberen.
last.fm
marksluymers.nl
pi_45322682
Geprobeerd en het geweldige effect is vervolgens dit:



Niet tof dus.

Maar de kans is groot dat ik het fou t doe, dus bij deze mijn geklooi:

HTML
1
2
3
4
5
6
7
8
9		<ul id="menu">   
  <li><a href="blog.html"><span id="rechts">Blog</span></a></li>
   
  <li><a href="portfolio.html"><span id="rechts">Portfolio</span></a></li>
   
  <li><a href="overmij.html"><span id="rechts">Over mij</span></a></li>
  
  <li><a href="home.html"><span id="links">Het begin</span></a></li>
</ul>


CSS
1
2
3		#links {float:left;}

#rechts {float: right;}
last.fm
marksluymers.nl
pi_45323215
Nadeel van de oplossing van huhu is dat je je navigatie opsplitst. Moet je niet willen denk ik.
Ik zie dat je navigatie vast staat, qua menuitems bedoel ik. De positie kun je daarom ook vastzetten. De afstand tussen de items onderling hoeft niet per se variabel te zijn, je zet ze 1malig vast.
Dit is een oplossing waarbij je je navigatie simpel in 1 UL hebt:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22		<html>
<head></head>
<style style="text/css">
body{font: 11px arial;}
#navigatie{width:600px;height:30px;border-top:solid 1px #000000;border-bottom:solid 1px #00000;}
ul{margin:6px 0;padding:0px;}
li{float:left;}
li a{color:#000000;font-weight:bold;}
li a{text-decoration:none;}
li a.portfolio{margin: 0 90px 0 90px;}
li a.blog{margin: 0 0 0 251px;}
</style>
<body>
<div id="navigatie">
<ul>
<li><a href="hetbegin.htm">het begin</a></li>
<li><a class="blog" href="blog.htm">Blog</a></li>
<li><a class="portfolio" href="portfolio.htm">Portfolio</a></li>
<li><a href="overmij.htm">Over mij</a></li>
</div>
</body>
</html>
pi_45323585
1
2
3
4
5
6
7
8
9		<style id="links"><a href="home.html">Het begin</a></span>

<span id="rechts">
  <a href="blog.html">Blog</a>
   
  <a href="portfolio.html">Portfolio</a>
   
  <a href="overmij.html">Over mij</a>
</span>


En vergeet die <ul> en <li> dingen.
pi_45323643
lol, ik zou toch echt liever een ul navigatie willen dan een in code gebroken navigatie. Een ul is voor de toegankelijkheid via meerdere media een mooiere oplossing. Daarnaast heb je niet per se verschillende spannetjes nodig om tot de uitlijning tussen de navigatie items onderling te komen.
pi_45324235
@ haaahaha: dat komt inderdaad meer in de richting van wat ik bedoel, in ieder geval wat betreft de positioering van de navigatie. Het begin heeeeeelemaal links, de rest rechts. Ik los het liever met ul-codering op, inderdaad. Netter.

Maar nu heb ik dus dit:



last.fm
marksluymers.nl
pi_45325675
Je moet om alle content die je nu hebt staan een div plaatsen en de breedte instellen op de breedte van de website plus margin: 0 auto;
Dus stel de breedte van je website is 600 pixels dan:

css:
1#canvas{width:600px;margin: 0 auto;}


html
1
2
3		<body>
<div id="canvas"> alle content </div>
</body>


Je hebt nu elk element (header, content vlak, footer) los centraal gecentreerd. Beter is dus een box om alle content elementen te plaatsen en die box via de margin center uit te lijnen.
pi_45326023
Oh aha, dus alles weer apart in een box plaatsen. Die miste ik dus. Mijn website 'shifte' al alle kanten op als ik iets probeerde. Weer wat geleerd. Gaan we even proberen!

Maar blijft een site daardoor wel weer dynamisch genoeg, bijvoorbeeld als mensen de tekstgrootte veranderen?
last.fm
marksluymers.nl
pi_45326728
Euhh, zoals ik het nu zie heb je je fonts ingesteld op pixels. Als je dan bv in IE de tekengroter aanpast zie je geen verandering in de grootte van je teksten. Dan zou je EM moeten gebruiken ipv px. Maar je teksten op die manier van grootte aanpassen is altijd killing voor je lay-out.
pi_45327104
Oh, nou ja. Ik kijk dan wel even. Het is ook niet van zo'n enorm belang. Omdat ik het voor mijn werk ga gebruiken is het echter wel van belang dat het zo'n groot mogelijk bereik heeft, zeg maar. Misschien ooki van later zorg. Om dan te gaan pielen.

Ik ga morgen jouw suggesties even uitproberen. Bedankt, nogmaals.
last.fm
marksluymers.nl
pi_45327129
Good luck!
pi_45328410
Toch maar vandaag geprobeerd. Hij staat nu goed. Ik moet alleen nog de puntjes op de welbekende i zetten: die bullits moeten foetsie, de marges tussen de navigatielinkjes moeten nog iets strakker (blog, over mij en portfolio staan nog niet geheel rechts) en de border-bottom is verdwenen.
last.fm
marksluymers.nl
pi_45328616
bullets foetsie:
ul{list-style-type:none;}
Je bekijkt je site in mozilla/firefox?
pi_45328668
Je moet natuurlijk wel goed naar je code of code die je krijgt kijken. De border bottom heeft 5 nulletjes, moeten er 6 zijn
pi_45329036
Of drie. Dat bedoelde ik dus.

Ik heb het gewoon slordig neergekwakt om even te kijken of het werkte. Daarbij ben ik nog aardig groen. Maar bedankt voor de ad rem reactie!

Ik bekijk de site inderdaad in mozilla/firefox omdat deze de standaard meer volgt dan IE. Als er iets in IE niet werkt, zoek ik daar later wel een hack voor.
last.fm
marksluymers.nl
pi_45330662
Als alle drie (of zes ) waardes gelijk zijn kun je er ook gewoon 1 neer zetten.
Steam - SC2
pi_45331619
Je kan prima je lay-out in firefox, ie6 en ie7 op de pixel nauwkeurig krijgen zonder css hacks.
pi_45333380
Tof, ik ben zojuist achter media="print" gekomen!

Erg makkelijk, ik heb er mijn pagina's wat mee verkleind, overal wat niet geprint hoeft te worden gemarkeerd met een noprint class, alles zwart-wit gemaakt, en alle fancy dotted borders rechtgetrokken. Nice
pi_45336637
als je divs niet geprint wilt hebben kun je het best in de print css die divs een display:none meegeven.
  zondag 14 januari 2007 @ 11:50:22 #152
69950 MadGuy
Fever Ray
pi_45337919
quote:
Op zondag 14 januari 2007 00:17 schreef haaahaha het volgende:
Je kan prima je lay-out in firefox, ie6 en ie7 op de pixel nauwkeurig krijgen zonder css hacks.
Ja, tot nu toe totaal geen problemen. Dat is mooi. Nu is mijn structuur ook niet superingewikkeld denk ik (hoewel ik er nog wel eens mee zit te klooien), dus dat scheelt weer.

Nu in feite nog twee noten kraken: tekst in kolommen en en zorgen dat de header blijft staan terwijl de content gescrolled kan worden (dat laatste weet ik nog niet zeker, misschien is het helemaal niet praktisch of mooi).
last.fm
marksluymers.nl
pi_45337995
Als je het content vlak gescrolled wil hebben en daarbij de hele site in de hoogte variabel (afhankelijk van de browser hoogte) wil hebben, dan wordt dat een hele moeilijke klus. Je kunt wel je content div een vast breedte en hoogte meegeven en dan aangeven overflow: auto;
  zondag 14 januari 2007 @ 11:56:25 #154
69950 MadGuy
Fever Ray
pi_45338091
Ja, ik denk dat dat het moet worden. Ik las ook iets over php include, maar wellicht is dat voor mij nog iets te hoog gegrepen. Ik moet het zelf nog even bekijken, maar bedankt voor de suggestie alvast.
last.fm
marksluymers.nl
pi_45338238
Heb je al iets online staan met de laatste verwerkingen?
  zondag 14 januari 2007 @ 12:06:43 #156
69950 MadGuy
Fever Ray
pi_45338352
Ik zal even uploaden. De code heb ik nog heel slordig verwerkt, dus daar moet je maar even niet naar kijken misschien.

EDIT: voila. CSS vind je onder css/madguy.css
last.fm
marksluymers.nl
pi_45338657
Ik zou op 1 plek je font defineren, niet in elke class weer defineren.
body{ font: 11px arial;}
body, p, a, div{color:#000000;}
en dan de texten die je bold wil hebben wel specifiek defineren. text-weight en text-size in je footer?
  zondag 14 januari 2007 @ 12:23:11 #158
69950 MadGuy
Fever Ray
pi_45338743
Ja, dat soort dingen dus. Ik heb veel meuk laten staan wat er makkelijk uitkan. Bedankt voor de tips.

text-weight en text-size zijn daar niet mogelijk, naar ik aanneem?
last.fm
marksluymers.nl
pi_45340007
text-size en text-weight bestaan voor zover ik weet niet eens.
  zondag 14 januari 2007 @ 13:20:31 #160
69950 MadGuy
Fever Ray
pi_45340320
quote:
Op zondag 14 januari 2007 13:09 schreef haaahaha het volgende:
text-size en text-weight bestaan voor zover ik weet niet eens.
Oh, wacht: fuck!
last.fm
marksluymers.nl
pi_45342759
quote:
Op zondag 14 januari 2007 10:35 schreef haaahaha het volgende:
als je divs niet geprint wilt hebben kun je het best in de print css die divs een display:none meegeven. :)
Dat bedoelde ik dus, zo ziet mijn print css er uit:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17		         .noprint {
            display:none
         }
         .bigblock {
            width: 650px;
            margin-left: -325px;
         }
         .smallblock {
            width: 600px;
            border: 1px black solid;
         }
         table,tr,td {
            border: 1px black solid;
         }
         .standardfont, .titlefont, .headfont, a:link {
            color: #000000;
         }


Misschien niet al te netjes, maar het werkt :)
pi_45365158
weet iemand of body:border:0px; w3c compliant is?
  maandag 15 januari 2007 @ 09:59:58 #163
12880 CraZaay
prettig gestoord
pi_45365307
quote:
Op maandag 15 januari 2007 09:51 schreef haaahaha het volgende:
weet iemand of body:border:0px; w3c compliant is?
Haal het eens door de validator zou ik zeggen?

Maar wat probeer je er precies mee te bereiken eigenlijk?
pi_45365443
De validator geeft niks geen fouten op border:0px;.
Het is voor een klant die een stuk content via een IFRAME van ons toont. Dat IFRAME gaf een border. Ik gaf aan dat de IFRAME een border="0" en frameborder="0" moest hebben waarop ik het antwoord terug kreeg dat de body van onze contentpagina een border:0px; moest hebben. Ik ben zelf border:0px; nog nooit tegengekomen en denk dat het dan ook niet w3c compliant is, maar verrassend, de oplossing doet het wel, in IE only dan, firefox laat nog een mooie frameborder zien.

Nu wil ik dus eigenlijk ergens (liefst op de w3c website) zien dat border:0px; niet kan, zodat ik onderbouwd kan aangeven dat dit niet DE oplossing is en dat IE dit wegens eigen opvattingen slikt. Vandaar dus.
pi_45366133
IFRAME.

Gebruik het alsjeblieft niet tenzij het persee nodig is..
pi_45366294
quote:
Op maandag 15 januari 2007 10:39 schreef Geqxon het volgende:
IFRAME.

Gebruik het alsjeblieft niet tenzij het persee nodig is..
Er is helemaal niks mis met een iframe hoor. Wat is er mis daarmee? Heb jij daarnaast een goede oplossing ingeval je een stuk content wat door mij is ontwikkeld en bij mijn bedrijf wordt gehost in een website die door een andere partij is ontwikkeld en gehost wil laten draaien?
Hoe denk je dat betaalmethoden als ideal in webshop draaien?
  maandag 15 januari 2007 @ 10:46:03 #167
12880 CraZaay
prettig gestoord
pi_45366321
Eem iframe is helaas nog steeds vaak nodig, vooral wanneer klanten functionaliteit van derden willen gebruiken zonder hiervoor kosten te maken voor de implementatie van xml-rpc, etc.

Met wat je al gedaan hebt met border en frameborder + style="border: none" zou het gewoon moeten werken. Zo gebruiken wij het ook.

Dat je body een border van 0 zou moeten hebben is gewoon onzin. Ten eerste heeft je body default geen border, en ten tweede zie je de border van het iframe-element, en niet van de body.
pi_45366443
quote:
Op maandag 15 januari 2007 10:45 schreef haaahaha het volgende:

[..]

Er is helemaal niks mis met een iframe hoor. Wat is er mis daarmee? Heb jij daarnaast een goede oplossing ingeval je een stuk content wat door mij is ontwikkeld en bij mijn bedrijf wordt gehost in een website die door een andere partij is ontwikkeld en gehost wil laten draaien?
Hoe denk je dat betaalmethoden als ideal in webshop draaien?
Ideal is te implementeren in je websites. iframes slaan nergens op, al helemaal niet in de tijd dat alles in je website zelf te implementeren is.
pi_45366539
Hoe laat ik content wat ik heb ontwikkeld en wat bij mijn bedrijf wordt gehost in een pagina van een website die door een 3de partij is ontwikkeld en op een andere plek wordt gehost zien? Heb je daar een alternatief voor dan?
pi_45366588
Wat dacht je van doorlinken naar die content?

Of desnoods afspraken maken, zodat jij de GUI host, en het andere bedrijf de achterliggende content?
pi_45366629
quote:
Op maandag 15 januari 2007 10:46 schreef CraZaay het volgende:
Eem iframe is helaas nog steeds vaak nodig, vooral wanneer klanten functionaliteit van derden willen gebruiken zonder hiervoor kosten te maken voor de implementatie van xml-rpc, etc.

Met wat je al gedaan hebt met border en frameborder + style="border: none" zou het gewoon moeten werken. Zo gebruiken wij het ook.

Dat je body een border van 0 zou moeten hebben is gewoon onzin. Ten eerste heeft je body default geen border, en ten tweede zie je de border van het iframe-element, en niet van de body.
Ik heb inmiddels op de w3c site gelezen dat border op elk element toe te passen is. Alleen vermoed ik dat IE deze border (te) ruim interpreteerd waardoor je het ook op de body tag kunt toepassen.
http://www.w3.org/TR/CSS21/box.html#border-properties

Frameborder="0" lijkt mij echter de aangewezen oplossing wil je geen border in je IFRAME laten zien.
pi_45366672
quote:
Op maandag 15 januari 2007 10:55 schreef Geqxon het volgende:
Wat dacht je van doorlinken naar die content?

Of desnoods afspraken maken, zodat jij de GUI host, en het andere bedrijf de achterliggende content?
doorlinken? Stel het gaat om een online folder oplossing en de klant wil de online folder in zijn website getoon hebben. Daarnaast heeft die klant een hosting contract van enkele jaren en is het geen optie dat er gedeelde hosting kan plaatsvinden? Hoe los je dat dan anders dan een IFRAME op?
pi_45367324
Hallo??
pi_45367408
Hey!
pi_45367473
gnegne
pi_45368125
quote:
Op maandag 15 januari 2007 10:58 schreef haaahaha het volgende:

[..]

doorlinken? Stel het gaat om een online folder oplossing en de klant wil de online folder in zijn website getoon hebben. Daarnaast heeft die klant een hosting contract van enkele jaren en is het geen optie dat er gedeelde hosting kan plaatsvinden? Hoe los je dat dan anders dan een IFRAME op?
file_get_contents is een optie...
http://nl2.php.net/manual/nl/function.file-get-contents.php
pi_45368454
We werken hier met ASP.
  maandag 15 januari 2007 @ 12:58:17 #178
12880 CraZaay
prettig gestoord
pi_45369861
quote:
Op maandag 15 januari 2007 11:55 schreef Darkomen het volgende:

[..]

file_get_contents is een optie...
http://nl2.php.net/manual/nl/function.file-get-contents.php
Ander praktijkvoorbeeld: een klant van ons houdt zich bezig met werving en selectie en gebruikt voor recruitment en beheer een applicatie van derden, die onder andere het vacatureoverizcht online zet in de webapp die bij de derde partij draait. Dit aanbod wil onze klant natuurlijk op hun website tonen, en omdat ze de derde partij hier extra voor betalen mag dat ook. Maar ze willen natuurlijk deze functionaliteit wel binnen de eigen site tonen, dus: iframe.

Tuurlijk, we kunnen hele html-bestanden gaan downloaden met bijvoorbeeld file_get_contents en vervolgens parsen en tonen, maar dan betaalt onze klant dus bijvoorbeeld dubbel dataverkeer (zowel aan de derde partij, als aan de eigen webhost).
  FOK!-Schrikkelbaas maandag 15 januari 2007 @ 13:02:33 #179
1972 Swetsenegger
Egocentrische Narcist
pi_45369981
Een iframe is natuurlijk ook niet zo beladen als een normale frameset.
 | FOK! Schrikkelbaasch
pi_45370461
Kortom, er is niks mis met een IFRAME.
Komen we weer terug op mijn 'border probleem'.
Overigens is dat probleem te zien op de bijenkorf website, de folder om specifiek te zijn.
  maandag 15 januari 2007 @ 14:21:55 #181
12880 CraZaay
prettig gestoord
pi_45372074
quote:
Op maandag 15 januari 2007 13:20 schreef haaahaha het volgende:
Kortom, er is niks mis met een IFRAME.
Komen we weer terug op mijn 'border probleem'.
Overigens is dat probleem te zien op de bijenkorf website, de folder om specifiek te zijn.
Klopt. Die hebben het met alleen CSS proberen te doen.Met 'frameborder="0"' en 'border: none' werkt het volgens mij prima?
pi_45372166
De folder komt van ons, de site draait dus ergens anders. Ik gaf aan dat er een frameborder te zien was, oplossing volgens de andere partij was border:0px in de code van de folder te plaatsen. Mwa, frameborder lijkt mij inderdaad de oplossing. Vond border in een body wel een erg vreemde oplossing. Maar goed.
pi_45374130
Ik heb nu op mijn pagina om elke TD (cel) een gestipte border in licht-grijs. Geeft een erg strak effect, alleen in IE6 is deze border helaas zwart en dashed.

1
2
3		td{
   border: 1px #808080 dotted;
}


Is wat ik gebruik, doe ik hier toevallig wat fout?
  FOK!-Schrikkelbaas maandag 15 januari 2007 @ 15:32:42 #184
1972 Swetsenegger
Egocentrische Narcist
pi_45374169
quote:
Op maandag 15 januari 2007 15:31 schreef Geqxon het volgende:
Ik heb nu op mijn pagina om elke TD (cel) een gestipte border in licht-grijs. Geeft een erg strak effect, alleen in IE6 is deze border helaas zwart en dashed.
[ code verwijderd ]

Is wat ik gebruik, doe ik hier toevallig wat fout?
splits het eens op in border-width, border-type en border-color
 | FOK! Schrikkelbaasch
pi_45374664
quote:
Op maandag 15 januari 2007 15:32 schreef Swetsenegger het volgende:

[..]

splits het eens op in border-width, border-type en border-color
Bedankt voor het snelle antwoord

Ik heb IE7 even gedowngrade naar IE6, na een reboot zal ik meer weten. Hopelijk komt het goed, wat een dashed border om elke TD heen is natuurlijk niets
pi_45374710
quote:
Op maandag 15 januari 2007 15:50 schreef Geqxon het volgende:

[..]

Bedankt voor het snelle antwoord

Ik heb IE7 even gedowngrade naar IE6, na een reboot zal ik meer weten. Hopelijk komt het goed, wat een dashed border om elke TD heen is natuurlijk niets
Ik had nog geen alternatief voor een IFRAME van je gelezen. Heb je die?
pi_45374958
quote:
Op maandag 15 januari 2007 15:52 schreef haaahaha het volgende:

[..]

Ik had nog geen alternatief voor een IFRAME van je gelezen. Heb je die?
Werken met een MVC model, de view op jouw site, de controller en het model op de site van het andere bdrijf.

Verder ziet IE6 niet het verschil tussen dashed en dotted in border-style, grrrr. Vast en zeker een IE kneuspuntje.
quote:
TG> The reason is that you are defining your dotted borders with a width of 1px.
TG> IE won't draw dotted borders that thin; they become dashed instead. I recall
TG> testing this a while back, but I don't recall the specific minimum width
TG> necessary for IE to render dots. I think it was something lime 3px; anything
TG> thinner would end up dashed.
pi_45375288
quote:
Op maandag 15 januari 2007 15:59 schreef Geqxon het volgende:
Werken met een MVC model, de view op jouw site, de controller en het model op de site van het andere bdrijf.
Dat ken ik niet. Leg uit please.
pi_45375876
quote:
Op maandag 15 januari 2007 16:09 schreef haaahaha het volgende:

[..]

Dat ken ik niet. Leg uit please.
Wiki kan dat beter
pi_45375950
Ik heb het globaal gelezen. Maar ok, nu graag nog waarom ik geen IFRAME moet gebruiken. Wat is er mis met een IFRAME?
  FOK!-Schrikkelbaas maandag 15 januari 2007 @ 16:29:31 #191
1972 Swetsenegger
Egocentrische Narcist
pi_45375983
quote:
Op maandag 15 januari 2007 16:26 schreef Geqxon het volgende:

[..]

Wiki kan dat beter
Mjah, dat is een theoretische omschrijving, maar geef eens een pragmatisch voorbeeld hoe dat een iframe kan vervangen.

Bij voorkeur aan de hand van een van de eerder genoemde voorbeelden.
 | FOK! Schrikkelbaasch
pi_45376077
quote:
Op maandag 15 januari 2007 16:29 schreef Swetsenegger het volgende:

[..]

Mjah, dat is een theoretische omschrijving, maar geef eens een pragmatisch voorbeeld hoe dat een iframe kan vervangen.

Bij voorkeur aan de hand van een van de eerder genoemde voorbeelden.
Het model en de controller op de server van degene die de dienst levert, en de view in je pagina verwerken doormiddel van een ASP code. Connectie naar de andere server door het één en andere te includen en klaar is kees. Veel netter dan een iframe, gewoon zoals het hoort.
  FOK!-Schrikkelbaas maandag 15 januari 2007 @ 16:35:27 #193
1972 Swetsenegger
Egocentrische Narcist
pi_45376187
quote:
Op maandag 15 januari 2007 16:32 schreef Geqxon het volgende:

[..]

Het model en de controller op de server van degene die de dienst levert, en de view in je pagina verwerken doormiddel van een ASP code. Connectie naar de andere server door het één en andere te includen en klaar is kees.

wat is een model en wat is een controller? Graag concrete voorbeelde gexon, je doet namelijk nogal boude uitspraken
quote:
Veel netter dan een iframe, gewoon zoals het hoort.
waarom dan wat is er tegen op een iframe, bij een applicatie als dit?
Argumenten tegen frames zijn
'slecht te indexeren'
'slecht te bookmarken'
etc

Dat is hierbij allemaal niet van toepassing, dus waarom moeilijk doen als het makkelijk kan?
 | FOK! Schrikkelbaasch
pi_45376227
Ja ik snap er ook geen hol van.
pi_45376854
Och, ga toch heen met je iframes, en verpruts je pagina er maar mee
  FOK!-Schrikkelbaas maandag 15 januari 2007 @ 16:53:42 #196
1972 Swetsenegger
Egocentrische Narcist
pi_45376891
quote:
Op maandag 15 januari 2007 16:52 schreef Geqxon het volgende:
Och, ga toch heen met je iframes, en verpruts je pagina er maar mee
Ah, ik zat al te wachten op gexon argumentatie die we zo goed kennen uit de apple topics.
 | FOK! Schrikkelbaasch
pi_45376916
lol, daar kon je inderdaad op wachten
pi_45377362
quote:
Op maandag 15 januari 2007 16:53 schreef Swetsenegger het volgende:

[..]

Ah, ik zat al te wachten op gexon argumentatie die we zo goed kennen uit de apple topics.
Ook mijn geduld raakt soms op. Ik kan je de architectuur van het MVC model uitleggen, maar ik begrijp de bedoeling van hahaha , en daar heb ik weinig zin in. Dus vandaar.

Iframes op deze manier gebruiken is puur om je incompetentie programming-skills te verbergen.
pi_45378145
Richt. Je wil gewoon stoer doen
pi_45378540
En wat kost nou zo'n über geile MVC implementatie? Hoeveel kost het extra om de viewer zowel in php als in asp te bouwen?
Wil iedereen die in telekinese gelooft nu mijn hand op steken?
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
[CSS] voor dummies - Deel 5
Index

» digital corner

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