[CSS] voor dummies - Deel 7

Index

» digital corner

actieve topics nieuwe topics
abonnement Unibet Coolblue
pi_50500274
In welke browser is dat? Hier in IE6 ( ) is er niks aan de hand.
Steam - SC2
pi_50503241
IE 7 wel Helaas heb ik ook geen IE 6

Zo zie ik het nu (IE7 = fout)


Zo zou het moeten zijn (goed)


En dit is het resultaat van de

1
2
3		div {
     position: relative;
}
Just say hi!
pi_50512630
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?

[ Bericht 8% gewijzigd door mschol op 16-06-2007 09:03:54 ]
pi_50512807
ik kan t effe niet vinden op w3schools, maar hoe krijg ik een tabel horizontaal gecentreerd?
0023
pi_50512830
align="center"
Just say hi!
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;"
Just say hi!
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..
Just say hi!
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?
Just say hi!
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
actieve topics nieuwe topics
abonnement Unibet Coolblue
[CSS] voor dummies - Deel 7
Index

» digital corner

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