[CSS] voor dummies - deel 12

Index

» digital corner

» development

actieve topics nieuwe topics
abonnement Unibet Coolblue
pi_70977876
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		#container { 
    width:802px;
    height: 80%;
    margin: 0; 
    } 
#div1 { 
    background: #000000; 
    width: 32%; 
    float:left;
    border:thin #CCCCCC solid;
    background-color:#1A1A1A;
    } 

#div2 { 
    background: #000000; 
    width: 32%; 
    float:left;
    border:thin #CCCCCC solid;
    background-color:#1A1A1A;
    }

#div3 { 
    background: #555555; 
    width: 65%; 
    height: 80%;
    float: right;
    border:thin #CCCCCC solid;
    background-color:#1A1A1A;
    }



HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17		<div id="container" >
      <div id="div3"><div class=menuheader>
        <div class=contentitemheader>test</div>
          <div class=contentitem></div>
       </div></div>
  <div id="Menu">
      <div id="div1">
        <div class=menuheader><b>Karting menu</b></div>
          <div class=menuitem>Menu items uit database</div>
          <br>
          </div>
      <div id="div2">
         <div class=menuheader><b>Autocross menu</b></div>
          <div class=menuitem>Menu items uit database</div>
          </div>
       </div>   
      </div>
pi_70978161
Waarom staat je content nou dan ineens weer vóór je menu?
—o—
pi_70978238
Ohja sorry, ik was allang aan het trial en erroren.
Zal het weer even terug zetten.
pi_70978286
doe eens
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18		<div id="container" >
  <div id="Menu">
      <div id="div1">
        <div class=menuheader><b>Karting menu</b></div>
          <div class=menuitem>Menu items uit database</div>
          <br>
          </div>
      <div id="div2">
         <div class=menuheader><b>Autocross menu</b></div>
          <div class=menuitem>Menu items uit database</div>
          </div>
       </div>   
      <div id="div3"><div class=menuheader>
        <div class=contentitemheader>test</div>
          <div class=contentitem></div>
       </div></div>

      </div>

1
2		#menu {float: left; width: 32%; background:red;}
#div3 {width:65%; background:green;}

en verder niets.
Niet getest maar kan haast niet fout gaan.
—o—
pi_70978784
"en verder niets"

Maak eens een testcase, anders kom je nergens.
—o—
pi_70978869
Ja, dat werkt goed.
pi_70979358
Ben hem overnieuw aan het opbouwen, alleen krijg ook RSI kramp ofzo.
Zit al te lang achter de pc :p, ik kijk morgen weer even verder.

Bedankt voor de hulp Doppendoosch en Chanty87
  FOK!-Schrikkelbaas dinsdag 14 juli 2009 @ 22:54:06 #209
1972 Swetsenegger
Egocentrische Narcist
pi_70984318
waarom past webkit (safari en chrome) een background image met position bottom in de <col> tag toe op elke regel en niet, zoals het hoort, op de volledige kolom. En belangrijker... is er een workaround voor?
Betrouwbare juwelier met korting |  | FOK! Schrikkelbaasch | Koop een vakantiewoning!
pi_71114738
edit: opgelost.

[ Bericht 97% gewijzigd door DirkZz op 19-07-2009 12:48:14 ]
  woensdag 22 juli 2009 @ 01:16:40 #211
241594 iBolt
Lighting
pi_71202671
Vraagje...

Ik heb een div.

.abc{
padding:10px 7px;
border:1px solid #e8e8e8;
font-size:12px;
color:#777;
font-style:italic;
text-align:center;
background-color:#f3f3f3
}

<div class="abc">
<img scr=".../plaatje.jpg" />
</div>

Nu is het zo dat mijn div zich over de hele breedte uitstrekt ik wil echter dat hij zo breed wordt als het plaatje... hoe doe ik dit?

[ Bericht 0% gewijzigd door iBolt op 22-07-2009 02:11:22 ]
pi_71202891
Geen div gebruiken maar een span.

Maar:
a) waarom uberhaupt een extra element om de afbeelding heen? sorry zitten nog wat paddings in zie ik
b) beetje onoverzichtelijk om je classes namen te geven die ook standaard HTML-elementen zijn lijkt me...
—o—
  woensdag 22 juli 2009 @ 02:11:04 #213
241594 iBolt
Lighting
pi_71203279
quote:
Op woensdag 22 juli 2009 01:32 schreef doppendoosch het volgende:
Geen div gebruiken maar een span.

Maar:
a) waarom uberhaupt een extra element om de afbeelding heen? sorry zitten nog wat paddings in zie ik
b) beetje onoverzichtelijk om je classes namen te geven die ook standaard HTML-elementen zijn lijkt me...
ja sorry class heet ook niet a maar had gewoon even snel getypt + copy past :p
pi_71204217
quote:
Op woensdag 22 juli 2009 01:32 schreef doppendoosch het volgende:
Geen div gebruiken maar een span.

Maar:
waarom uberhaupt een extra element om de afbeelding heen? sorry zitten nog wat paddings in zie ik
Die paddings zijn geen reden om een extra element om een img te zetten. Een img is gewoon een element en kun je als zodanig aanpassen, inclusief margin, padding achtergrondkleur en zelfs achtergrondafbeelding.
fokstok.nl
  woensdag 22 juli 2009 @ 11:08:20 #215
241594 iBolt
Lighting
pi_71207937
quote:
Op woensdag 22 juli 2009 07:18 schreef Light het volgende:

[..]

Die paddings zijn geen reden om een extra element om een img te zetten. Een img is gewoon een element en kun je als zodanig aanpassen, inclusief margin, padding achtergrondkleur en zelfs achtergrondafbeelding.
Klopt maar die box moet niet perse om een img kunnen ook andere elemente zijn video, tabel...

Span werkt trouwens niet

zal even me code geven....
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19		.wp-caption{ 
   padding:10px 7px; 
   border:1px solid #e8e8e8; 
   font-size:12px; 
   color:#777; 
   font-style:italic; 
   text-align:center; 
   background-color:#f3f3f3 
}
p.wp-caption-text{ 
   margin:10px 0 0 0 !important; 
   padding:0; 
   line-height:14px !important; 
}
.aligncenter, div.aligncenter{ 
   display:block; 
   margin-left:auto; 
   margin-right:auto; 
}


en bijvoorbeeld dan dit als input...

1
2
3
4		<div class="wp-caption aligncenter">
<img data-src="http://psplessen.hewejosplace.nl/Betty_Boop_plaatje.jpg" style="visibility:hidden;" />
<p class="wp-caption-text">Betty Boop</p>
</div>


[ Bericht 27% gewijzigd door iBolt op 22-07-2009 11:25:57 ]
pi_71208464
quote:
Op woensdag 22 juli 2009 @ 11:08 schreef iBolt het volgende:

[..]

Klopt maar die box moet niet perse om een img kunnen ook andere elemente zijn video, tabel...
En die kun je geen class geven omdat....?

-edit-
quote:
Op woensdag 22 juli 2009 @ 11:08 schreef iBolt het volgende:

[..]
Span werkt trouwens niet

zal even me code geven....
[ code verwijderd ]

en bijvoorbeeld dan dit als input...
[ code verwijderd ]
Nee allicht, als je die span display:block geeft heb je die heel effectief omgetoverd in een div
—o—
  woensdag 22 juli 2009 @ 12:11:00 #217
241594 iBolt
Lighting
pi_71210025
quote:
Op woensdag 22 juli 2009 11:26 schreef doppendoosch het volgende:

[..]

En die kun je geen class geven omdat....?

-edit-
[..]

Nee allicht, als je die span display:block geeft heb je die heel effectief omgetoverd in een div
Ja sorry ik ben noob met css iig heb nu weggehaald en doet het half... enigste wat ontbreekt is dat de span niet zo hoog wordt als het plaatje... hij trekt dus alleen een box om het onderste deel van 't plaatje...
pi_71216821
Heeft iemand hier ervaring mee? http://code.google.com/p/ie7-js/

Werkt het een beetje? Ik heb geen IE6, dus ik kan het helaas niet testen...
Trotse poster van het 37000000ste bericht ^O^
pi_71217120
Geen idee of het een beetje werkt, maar ik heb nogal mijn twijfels of je een script van 90KB moet willen toevoegen aan je site, om een paar incompatibility-fixes te doen die je met een klein beetje speurwerk ook wel zelf op kunt lossen.
—o—
pi_71217266
quote:
Op woensdag 22 juli 2009 15:37 schreef doppendoosch het volgende:
Geen idee of het een beetje werkt, maar ik heb nogal mijn twijfels of je een script van 90KB moet willen toevoegen aan je site, om een paar incompatibility-fixes te doen die je met een klein beetje speurwerk ook wel zelf op kunt lossen.
Ik snap alleen niet hoe ik mijn sites in IE6 moet testen als ik Vista draai. Die Virtual Machines lijken niet te werken op Vista...
Trotse poster van het 37000000ste bericht ^O^
pi_71217423
http://www.my-debugbar.com/wiki/IETester/HomePage
http://browsershots.org/

Verder zou ik er ook met zo'n scriptje niet zonder meer vanuit gaan dat je die browsers niet meer hoeft te testen.
—o—
pi_71217907
quote:
Op woensdag 22 juli 2009 15:44 schreef doppendoosch het volgende:
http://www.my-debugbar.com/wiki/IETester/HomePage
http://browsershots.org/

Verder zou ik er ook met zo'n scriptje niet zonder meer vanuit gaan dat je die browsers niet meer hoeft te testen.
Die IETester ziet er wel goed uit.. Zijn de resultaten ervan betrouwbaar?
Het lijkt weinig uit te maken of ik het script waar ik het net over had ingeschakeld heb of niet. Wat wel op viel is dat de volgende syntax wél werkt door het script:

1
2
3
4
5
6
7
8
9
10
11
12
13
14		table tr td {
  border-top: 1px solid #888;
  border-left: 1px solid #888;
  padding: 5px;
  width: 25%;
  text-align: left;
  vertical-align: bottom;
}
table tr:first-child td {
  border-top: 0;
}
table tr td:first-child {
  border-left: 0;
}


om een tabel te maken met alleen aan de binnenkant borders.

Selectors werken dus, waardoor je veel geavanceerdere CSS-technieken kan gaan gebruiken

edit: Voor IE5.5 maakt het wel een wereld van verschil, zie ik nu. Pagina ziet er veel meer uit zoals in Mozilla

[ Bericht 3% gewijzigd door daReaper op 22-07-2009 16:39:44 ]
Trotse poster van het 37000000ste bericht ^O^
pi_71218697
quote:
Op woensdag 22 juli 2009 15:41 schreef daReaper het volgende:

Ik snap alleen niet hoe ik mijn sites in IE6 moet testen als ik Vista draai. Die Virtual Machines lijken niet te werken op Vista...
http://finalbuilds.edskes.net/iecollection.htm
pi_71220857
quote:
Op woensdag 22 juli 2009 16:42 schreef Chanty87 het volgende:
http://mashable.com/2009/07/16/ie6-must-die/
http://www.techcrunch.com(...)internet-explorer-6/
http://www.techcrunch.com(...)ie6-support-goodbye/


Voor mijn eigen site wil ik best IE6 bannen, maar dit is voor een klant die een webshop in rusland wil draaien, en daar is internet nog niet overal zo ver ontwikkeld, dus zijn er nog een hoop IE6-gebruikers, die dan dus geen klant zullen zijn.
Trotse poster van het 37000000ste bericht ^O^
actieve topics nieuwe topics
abonnement Unibet Coolblue
[CSS] voor dummies - deel 12
Index

» digital corner

» development

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