[CSS] voor dummies - Deel 7

Index

» digital corner

actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
pi_50513215
quote:
Op zaterdag 16 juni 2007 08:57 schreef Chandler het volgende:
align="center"
wel in css natuurlijk
0023
pi_50513440
style="text-align: center;"
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_50513494
quote:
Op zaterdag 16 juni 2007 10:07 schreef Chandler het volgende:
style="text-align: center;"
maar dat is enkel de tekst. Ik heb een pagina die bestaat uit tabellen,

table {

border-spacing:0px;
border-padding:0px;

}

daar wil ik die align tag tussen zodat ie centreert.
0023
pi_50514709
quote:
Op zaterdag 16 juni 2007 10:11 schreef ikJur het volgende:

[..]

maar dat is enkel de tekst. Ik heb een pagina die bestaat uit tabellen,

table {

border-spacing:0px;
border-padding:0px;

}

daar wil ik die align tag tussen zodat ie centreert.
margin-left: auto;
margin-right: auto;

Wel een doctype boven je html zetten zodat IE in standards mode werkt.
pi_50515200
quote:
Op zaterdag 16 juni 2007 11:28 schreef Bigs het volgende:

[..]

margin-left: auto;
margin-right: auto;

Wel een doctype boven je html zetten zodat IE in standards mode werkt.
hmm als ik dan een doctype erboven zet is heel het ontwerp verneukt.
0023
pi_50515997
quote:
Op zaterdag 16 juni 2007 11:52 schreef ikJur het volgende:

[..]

hmm als ik dan een doctype erboven zet is heel het ontwerp verneukt.
Dan wordt het tijd om je html/css kennis wat op te vijzelen en Firefox te installeren.
pi_50517086
quote:
Op zaterdag 16 juni 2007 08:33 schreef mschol het volgende:
ik zit weer eens te klooien met divjes en css (minimaal aangezien ik er niet veel van kan...)
maar ik loop tegen een soort van margin probleem aan in IE7
zie hier de pagina (inclusief code) : http://home.mschol.eu/fok/index.html

1 ik zet alles in een container van 100% bij 100%, dan nog krijg ik in IE7/FF1.5 een witte rand eromheen.. kan dit worden opgelost of is dat onvermijdelijk?
2 wat ik ook probeer met de margin opties of padding opties, in IE7 staat tussen de left en center div een spatie ofzo.. hoe krijg ik die weg? (zodat ze naadloos opelkaar aansluiten?)


--edit--

eens bekeken in IE6 en ook daar heb ik het probleem van punt 2
iemand?
??
hij klopt qua code wel volgens mij (W3 valideert em goed en in FF wordtie goed getoond..)
alleen in IE6/7 wordt tussen de center en left div een stukje van de containerdiv getoont?
pi_50517107
heeft niemand een oplossing voor mijn irritatie?

[CSS] voor dummies - Deel 7 en [CSS] voor dummies - Deel 7

Dit zou namelijk heel fijn zijn als het opgelost zou kunnen worden..
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_50517684
quote:
Op zaterdag 16 juni 2007 12:23 schreef Bigs het volgende:

[..]

Dan wordt het tijd om je html/css kennis wat op te vijzelen en Firefox te installeren.
heb em effe door de validator gehaald , bleken wat kleine foutjes in te zitten zoals een # vergeten voor een rgb-waarde en "px" vergeten bij de maten van tabellen.

nu werkt ie perfect: http://trimsalonpluto.nl/moneycats/
is een opdrachtje voor school
0023
pi_50519252
Tis alleen jammer van die achtergrond kleuren, of is dat ook de bedoeling?
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_50519471
quote:
Op zaterdag 16 juni 2007 14:27 schreef Chandler het volgende:
Tis alleen jammer van die achtergrond kleuren, of is dat ook de bedoeling?
je bedoelt als ie laad? ja dat zit er nog in omdat ik de tabellen altijd eerst allemaal aparte kleuren geef alvorens ik de slices erin stop. Te lui om eruit te halen
0023
pi_50519521
Iemand enig idee of UltraEdit32 toevallig ook in UltraEdit32 geprogrammeerd is?

Dat verklaard wel waarom het zo'n achterlijke kuteditor is.
pi_50522117
quote:
Op zaterdag 16 juni 2007 13:27 schreef ikJur het volgende:

[..]

heb em effe door de validator gehaald , bleken wat kleine foutjes in te zitten zoals een # vergeten voor een rgb-waarde en "px" vergeten bij de maten van tabellen.

nu werkt ie perfect: http://trimsalonpluto.nl/moneycats/
is een opdrachtje voor school
In Safari is ie volgens mij ook goed schreenshot
pi_50524634
quote:
Op zaterdag 16 juni 2007 16:54 schreef Bigs het volgende:

[..]

In Safari is ie volgens mij ook goed schreenshot
jups, prima heb hier trouwens thuis ook de beschikking over een mac

edit: die URL
0023
pi_50533659


Een div genaamd content, een div genaamd sidebar. In de sidebar drie divs, een afgeronde hoek boven, een div die enkel met kleur gevuld is, en een afgeronde hoek onder.

Nu wil ik de float net zo groot maken als de content waar hij naast staat, en daarbij het middelste vakje in de sidebar ook vullend. Kan dit? Misschien een soort van "clear" die ik over het hoofd zie?

Misschien moet ik maar een boek over "floats" aanschaffen
pi_50539642
Moeten het per se floats zijn? Ik zat aan zoiets te denken:

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		<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
            "http://www.w3.org/TR/html4/loose.dtd">
            
<html>
<head>
<title>Titel</title>
<style type="text/css">
#content {width: 800px; position: relative; padding: 8px 110px 8px 8px; background: yellow}
#sidebar {position: absolute; top: 0; bottom: 0; right: 0; width: 100px; background: green}
#boven {position: absolute; top: 0; width: 100%; background: yellow}
#midden {position: absolute; top: 0; bottom: 0; width: 100%; background: pink}
#beneden {position: absolute; bottom: 0; width: 100%; background: yellow}
</style>
</head>

<body>
<div id="content">
<p>Dit is de inhoud. Bladibladibla.</p>
<p>Dit is de inhoud. Bladibladibla.</p>
<p>Dit is de inhoud. Bladibladibla.</p>
<p>Dit is de inhoud. Bladibladibla.</p>
<p>Dit is de inhoud. Bladibladibla.</p>

<div id="sidebar">
 <div id="midden"></div>
 <div id="boven">Boven</div>
 <div id="beneden">Beneden</div>
</div>
</div>
</body>
</html>
pi_50544201
Dat zou ik kunnen doen, ware het niet dat absolute waarden niet gaan werken. Bottom: 0px en Top: 0px referrren namelijk naar de div waar dit vakje in staat. Ergo: De sidebar wordt net zo breed als het totale menu, en dus niet net zo breed als dit vakje. Dus ja, het moet met floats
  dinsdag 19 juni 2007 @ 11:09:33 #48
98312 Ewaldus
Save the cheerleader
pi_50607263
het gaat om het volgende :
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		#bodyAccessoiresLeftColumn h2 {
   color:#FF0000;
   font-size:12px;
   font-weight:bold;
   margin:24px 0pt;
   }

#bodyAccessoiresLeftColumn ul {
   margin:0 auto;
   padding:0 0 0 15px;
   list-style:none;
   line-height:16px;
   float:left;
   }
   
#bodyAccessoiresLeftColumn ul a {
   color:#FFFFFF;
   text-decoration:none;
   }

#bodyAccessoiresLeftColumn ul li {
   background:url(images/listBg.png) no-repeat;;
   width:132px;
   height:16px;
   padding:0 0 0 22px;
   margin:0pt 0pt 3px;
   }
   
#bodyAccessoiresLeftColumn ul li a img {
   border:none;
   float:right;
   }
   
.row {
   clear:both;
   width:400px;
   margin:0 auto;
   }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15		   <div id="bodyAccessoiresLeftColumn">

      <div class="row">
         <ul>
            <h2>navigatie</h2>
            <li><a href="#">XE-345 STV<img src="images/meerInformatie.gif" /></a></li>
            <li><a href="#">TE-456 ANB<img src="images/meerInformatie.gif" /></a></li>
         </ul>
         
         <ul>
            <h2>speakers</h2>
            <li><a href="#">BRA-34Z<img src="images/meerInformatie.gif" /></a></li>
            <li><a href="#">BRA-36B<img src="images/meerInformatie.gif" /></a></li>
         </ul>
      </div>

hoe krijg ik het voor elkaar dat meerInformatie.gif rechts in de list komt?
Dus zo: http://www.ewaldvankampen.nl/upload/audio1.jpg
.
Als ik zorg dat de img float:right krijgt, komt hij te laag, en is het ontwerp niet meer zoals het zou moeten
niets
pi_50607375
Toch floaten, maar dan vertical-align: middle; aan de css van je img toevoegen.
  dinsdag 19 juni 2007 @ 11:25:19 #50
98312 Ewaldus
Save the cheerleader
pi_50607759
dan krijg je dus dit.
Terwijl er 2 UL's naast elkaar moeten staan e.d.
niets
pi_50608111
quote:
Op dinsdag 19 juni 2007 11:09 schreef Ewaldus het volgende:
hoe krijg ik het voor elkaar dat meerInformatie.gif rechts in de list komt?
Dus zo: http://www.ewaldvankampen.nl/upload/audio1.jpg
.
Als ik zorg dat de img float:right krijgt, komt hij te laag, en is het ontwerp niet meer zoals het zou moeten
Dat float:right elementen op de volgende regel geplaatst worden als ze niet het eerste element op de regel zijn, is een bekende bug in Internet Explorer en Mozilla-gebaseerde browsers. Je kunt dit proberen te omzeilen door die elementen ook nog een negatieve margin-top mee te geven zodat ze weer omhoog getrokken worden, maar dan veroorzaak je weer problemen met browsers die het wel goed doen zoals Opera en Safari.

Een andere oplossing is het rechts-zwevende element als eerste in de regel op te nemen. Dan blijft het in alle browsers op dezelfde regel.
  dinsdag 19 juni 2007 @ 11:36:58 #52
12880 CraZaay
prettig gestoord
pi_50608144
Dat plaatje hoort helemaal niet in je html, maar in je css. Het is namelijk geen illustratie maar een element om je link op te leuken.

Plaatje dus gewoon als achtergrondafbeelding voor je links gebruiken en rechts positioneren (background-position)
  dinsdag 19 juni 2007 @ 12:08:59 #53
98312 Ewaldus
Save the cheerleader
pi_50609386
quote:
Op dinsdag 19 juni 2007 11:36 schreef CraZaay het volgende:
Dat plaatje hoort helemaal niet in je html, maar in je css. Het is namelijk geen illustratie maar een element om je link op te leuken.

Plaatje dus gewoon als achtergrondafbeelding voor je links gebruiken en rechts positioneren (background-position)
nee niet, want ik wil van dat plaatje een link maken,
maar nu ik het zo type zit ik er ook over te denken het plaatje als achtergrond te doen, de link display:block mee te geven...
niets
  dinsdag 19 juni 2007 @ 12:29:03 #54
98312 Ewaldus
Save the cheerleader
pi_50610054
quote:
Een andere oplossing is het rechts-zwevende element als eerste in de regel op te nemen. Dan blijft het in alle browsers op dezelfde regel.
Opgelost
niets
  dinsdag 19 juni 2007 @ 13:29:47 #55
12880 CraZaay
prettig gestoord
pi_50612102
quote:
Op dinsdag 19 juni 2007 12:08 schreef Ewaldus het volgende:

[..]

nee niet, want ik wil van dat plaatje een link maken,
maar nu ik het zo type zit ik er ook over te denken het plaatje als achtergrond te doen, de link display:block mee te geven...
Precies, 'display: block' erop en dan is dat plaatje ook gewoon klikbaar. Het hoort simpelweg niet in de html
pi_50615234
quote:
Op dinsdag 19 juni 2007 13:29 schreef CraZaay het volgende:

[..]

Precies, 'display: block' erop en dan is dat plaatje ook gewoon klikbaar. Het hoort simpelweg niet in de html
Naar mijn mening hoort het, zoals het in het voorbeeld getoond is, in de html noch in de css. Ik ging ervan uit dat het een afzonderlijk klikbaar element moet worden met een eigen href (wat Ewaldus ook aangeeft), en dan moet het uiteraard wel in de html worden gezet. Als het dezelfde link is als de tekst ervoor is het plaatje nergens voor nodig en zelfs verwarrend.
  dinsdag 19 juni 2007 @ 15:10:52 #57
12880 CraZaay
prettig gestoord
pi_50615900
quote:
Op dinsdag 19 juni 2007 14:54 schreef AnGabhar het volgende:

[..]

Naar mijn mening hoort het, zoals het in het voorbeeld getoond is, in de html noch in de css. Ik ging ervan uit dat het een afzonderlijk klikbaar element moet worden met een eigen href (wat Ewaldus ook aangeeft), en dan moet het uiteraard wel in de html worden gezet. Als het dezelfde link is als de tekst ervoor is het plaatje nergens voor nodig en zelfs verwarrend.
In het voorbeeld staat het binnen de link van de tekst, en hoort het dus in de css (er is al een tekstlink). Los of dit verwarrend is voor gebruiker, ik heb het niet over usability gehad.

Met een eigen href zou het alsnog in de css moeten wat mij betreft, aangezien het geen afbeelding met toegevoegde waarde is. Je zou imo dan een tekstlink moeten maken waarvan je de tekst met css verbergt en het plaatje toont als achtergrondafbeelding. Accessibility enzo.
pi_50616269
quote:
Op dinsdag 19 juni 2007 15:10 schreef CraZaay het volgende:
Met een eigen href zou het alsnog in de css moeten wat mij betreft, aangezien het geen afbeelding met toegevoegde waarde is. Je zou imo dan een tekstlink moeten maken waarvan je de tekst met css verbergt en het plaatje toont als achtergrondafbeelding. Accessibility enzo.
Dat werkt dan voor mensen die css uit hebben staan. Krijg je het met een achtergrondafbeelding via css ook werkend voor mensen die css aan en afbeeldingen uit hebben staan? Ik noem maar een toegankelijkheidsdwarsstraat.
pi_50616959
quote:
Op dinsdag 19 juni 2007 15:20 schreef AnGabhar het volgende:

[..]

Dat werkt dan voor mensen die css uit hebben staan. Krijg je het met een achtergrondafbeelding via css ook werkend voor mensen die css aan en afbeeldingen uit hebben staan? Ik noem maar een toegankelijkheidsdwarsstraat.
Het plaatje is puur ter decoratie en voegt niets toe aan de content. Het dingetje zou net zo goed in de achtergrond van het li element geplaatst kunnen worden.

Mijn vuistregel: Plaatjes waarvoor je geen zinnige alt tekst kunt verzinnen horen niet in de HTML thuis. Die voegen kennelijk niets aan je HTML toe.
  dinsdag 19 juni 2007 @ 15:45:17 #60
12880 CraZaay
prettig gestoord
pi_50617222
quote:
Op dinsdag 19 juni 2007 15:20 schreef AnGabhar het volgende:

[..]

Dat werkt dan voor mensen die css uit hebben staan. Krijg je het met een achtergrondafbeelding via css ook werkend voor mensen die css aan en afbeeldingen uit hebben staan? Ik noem maar een toegankelijkheidsdwarsstraat.
Als we ons even limiteren tot screen readers, braille leesregels, zoekmachines en de meeste mobile devices dan is tekst verbergen en een afbeelding tonen middels css de meest ideale oplossing. Die kunnen hier allemaal prima mee overweg namelijk.

De mensen die css uit hebben staan en afbeeldingen aan, zien dan gewoon de tekst die anders door de css verborgen zou worden. Dit in tegenstelling tot wanneer je afbeeldingen gebruikt en een bezoeker het tonen van afbeeldingen uit heeft staan. Er is in dat geval dus helemaal geen toegankelijkheidsissue: je ziet altijd de naam van de link, tenzij er door middel van "progressive enhancement" iets met de presentatie gedaan wordt.

Voor mensen met css aan en afbeeldingen uit is er per definitie geen goede oplossing, maar gelukkig betreft dat een miniem aantal gebruikers. Het blijft een kwestie van keuzen, maar de html moet sowieso goed zijn. Als een gebruiker kiest voor css aan en afbeeldingen uit, dan leveren ze bewust een deel van de progressive enhancement in, waardoor de boel minder optimaal kan performen.
actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
[CSS] voor dummies - Deel 7
Index

» digital corner

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