[CSS] voor dummies - Deeltje 8

Index

» digital corner

actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
pi_56574415
quote:
Op dinsdag 5 februari 2008 10:19 schreef Tarabass het volgende:
Als je php hebt draaien kan je het met een variable oplossen, waarbij je het aantal plaatjes in een dir telt en dan de width uitrekent en die als breedte meegeeft. Wat je ook kan doen is alles in een table gooien:
[ code verwijderd ]
het is inderdaad een oplossing maar helaas niet de gene die ik zoek maar toch tnx!

Verder zit ik met iets vaags, ik heb de volgende code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15		<div style="margin: 5px 10px; height: 280px;width: 420px; float: left;"> 
     
    <a href="#" class="border: 1px solid #464444; width: 130px; height: 130px; text-align: center; display: block;"><img src="/thumb.php?cat=animals&photo=1" border="0" onClick="preview('animals', '1');"></a> 
     
    <a href="#" class="border: 1px solid #464444; width: 130px; height: 130px; text-align: center; display: block;"><img src="/thumb.php?cat=animals&photo=11" border="0" onClick="preview('animals', '11');"></a> 
     
    <a href="#" class="border: 1px solid #464444; width: 130px; height: 130px; text-align: center; display: block;"><img src="/thumb.php?cat=animals&photo=12" border="0" onClick="preview('animals', '12');"></a> 
     
    <a href="#" class="border: 1px solid #464444; width: 130px; height: 130px; text-align: center; display: block;"><img src="/thumb.php?cat=animals&photo=14" border="0" onClick="preview('animals', '14');"></a> 
     
    <a href="#" class="border: 1px solid #464444; width: 130px; height: 130px; text-align: center; display: block;"><img src="/thumb.php?cat=animals&photo=2" border="0" onClick="preview('animals', '2');"></a> 
     
    <a href="#" class="border: 1px solid #464444; width: 130px; height: 130px; text-align: center; display: block;"><img src="/thumb.php?cat=animals&photo=3" border="0" onClick="preview('animals', '3');"></a> 
     
</div> 


en krijg dit als uitkomst



maar wil 3x een blok naast elkaar van 130px breed en 130px hoog waarin de afbeelding gecentreerd staat, echter worden de afbeeldingen weer gegeven in een blok met de eigen grote!? wat doe ik fout?

[ Bericht 10% gewijzigd door Chandler op 07-02-2008 10:20:05 ]
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_56578357
Dummytijd: Is het af te raden om naast tekst ook objecten in een header te zetten? Ik wil hetzelfde als Wikipedia doen, een onderstreepte H2 met compleet rechts op de lijn een [edit] tekst. Wikipedia lost dit op met een constructrie als "<h2><span>[edit]</span>Title</h2>", maar is dit wel zoals het hoort? Krijg ik hier geen accessibility issues mee?
  donderdag 7 februari 2008 @ 11:37:04 #35
12880 CraZaay
prettig gestoord
pi_56579032
quote:
Op donderdag 7 februari 2008 11:05 schreef Geqxon het volgende:
Dummytijd: Is het af te raden om naast tekst ook objecten in een header te zetten? Ik wil hetzelfde als Wikipedia doen, een onderstreepte H2 met compleet rechts op de lijn een [edit] tekst. Wikipedia lost dit op met een constructrie als "<h2><span>[edit]</span>Title</h2>", maar is dit wel zoals het hoort? Krijg ik hier geen accessibility issues mee?
Zou geen probleem mogen geven, zo gebruik ik het ook (alleen dan achter de eigenlijk kop ipv ervoor).
pi_56579328
Het liefst doe ik het ook erachter, maar dan is de float niet meer mogelijk. In een text-based browser ziet dit er volgens mij wel fatsoenlijk uit.
pi_56580397
quote:
Op donderdag 7 februari 2008 11:05 schreef Geqxon het volgende:
Dummytijd: Is het af te raden om naast tekst ook objecten in een header te zetten? Ik wil hetzelfde als Wikipedia doen, een onderstreepte H2 met compleet rechts op de lijn een [edit] tekst. Wikipedia lost dit op met een constructrie als "<h2><span>[edit]</span>Title</h2>", maar is dit wel zoals het hoort? Krijg ik hier geen accessibility issues mee?
Zo doet wiki dat niet. Wiki doet dit:
1<h2><span>[edit]</span><span>Title</span></h2>
  donderdag 7 februari 2008 @ 12:48:14 #38
12880 CraZaay
prettig gestoord
pi_56580692
quote:
Op donderdag 7 februari 2008 12:36 schreef Tarabass het volgende:

[..]

Zo doet wiki dat niet. Wiki doet dit:
[ code verwijderd ]
Is exact hetzelfde principe toch?
pi_56580860
quote:
Op donderdag 7 februari 2008 12:48 schreef CraZaay het volgende:

[..]

Is exact hetzelfde principe toch?
Dat, en ik vind de tweede span niet correct, en vooral onhandig als je een keer geen extra optie-tekst hebt. Daarnaast moet je in dit geval met diverse classes te werk gaan, en ook dat is bij mij geen favoriet.
pi_56581129
quote:
Op donderdag 7 februari 2008 12:48 schreef CraZaay het volgende:

[..]

Is exact hetzelfde principe toch?
Nee. De h2-tag staat er in dit geval omheen om zo zoekmachines etc. beter hun werkt te laten doen qua indexeren. De span-tags krijgen de stijlen mee via css-classes. Dit is imo netter en de h2 is beter her te gebruiken. Maar het uiteindelijke resultaat zal inderdaad hetzelfde zijn, dus eigenlijk ook niet iets om druk over te maken..
pi_56581562
Maar zal een bot als google de twee inhouden dan niet gelijk wegen? Dat de inhoud van allebei de span-tags even zwaar is, in plaats van mijn eerdere voorbeeld waar de daadwerkelijke inhoud van de H2 zwaarder weegt dan de span-tag die ernaast staat?
  donderdag 7 februari 2008 @ 13:51:43 #42
164509 Banzaiaap
Tony Rocky Horror
pi_56581956
Ik had dit ook al op tweakers gepost, maar misschien weten jullie ook een oplossing
quote:
Ik ben bezig met een site voor een vriend van mij, die een site nodig heeft waar hij zijn muziek kan laten horen, en waar informatie over optredens en dergelijke te vinden is. Heel simpel zou je zeggen.. Ik heb de site ontworpen in Photoshop, stukken eruit geslicet en daarna opgebouwd met XHTML en CSS. Echter, nou ziet de site er heel anders uit in Firefox dan in IE7 (Ik heb vanuit Firefox gebouwd, omdat dat mijn standaard browser is, maar nu blijkt het toch makkelijker geweest om de site eerst in IE te checken. De layout klopt totaal niet meer in IE7, terwijl het er in FF prima uitziet.

Ik heb even een testversie [url="http://www.dje-rik.nl/test/DJERIK/index.html"]hier[/url] geupload, het is nog niet af, maar het was meer om de layout te testen.

Kan iemand me uitleggen wat ik verkeerd doe? (Ik ben nog maar een klein half jaar hier mee bezig, dus reken me aub niet te hard af )
  donderdag 7 februari 2008 @ 14:02:57 #43
12880 CraZaay
prettig gestoord
pi_56582216
quote:
Op donderdag 7 februari 2008 13:09 schreef Tarabass het volgende:

[..]

Nee. De h2-tag staat er in dit geval omheen om zo zoekmachines etc. beter hun werkt te laten doen qua indexeren. De span-tags krijgen de stijlen mee via css-classes. Dit is imo netter en de h2 is beter her te gebruiken. Maar het uiteindelijke resultaat zal inderdaad hetzelfde zijn, dus eigenlijk ook niet iets om druk over te maken..
In Geqxon's voorbeeld staat de H2 er ook omheen toch?
  donderdag 7 februari 2008 @ 14:04:43 #44
12880 CraZaay
prettig gestoord
pi_56582251
quote:
Op donderdag 7 februari 2008 13:51 schreef Banzaiaap het volgende:
Ik had dit ook al op tweakers gepost, maar misschien weten jullie ook een oplossing
Begin met die 32 HTML errors (zie validator), en daarna praten we verder
  donderdag 7 februari 2008 @ 14:16:41 #45
164509 Banzaiaap
Tony Rocky Horror
pi_56582479
quote:
Op donderdag 7 februari 2008 14:04 schreef CraZaay het volgende:

[..]

Begin met die 32 HTML errors (zie validator), en daarna praten we verder
Sorry klopt, is gedaan
pi_56582632
quote:
Op donderdag 7 februari 2008 00:47 schreef Chandler het volgende:

[..]

het is inderdaad een oplossing maar helaas niet de gene die ik zoek maar toch tnx!

Verder zit ik met iets vaags, ik heb de volgende code
[ code verwijderd ]

en krijg dit als uitkomst

[ afbeelding ]

maar wil 3x een blok naast elkaar van 130px breed en 130px hoog waarin de afbeelding gecentreerd staat, echter worden de afbeeldingen weer gegeven in een blok met de eigen grote!? wat doe ik fout?
Anyone? zie ik nou gewoon wat over het hoofd?
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_56583153
quote:
Op donderdag 7 februari 2008 14:25 schreef Chandler het volgende:

[..]

Anyone? zie ik nou gewoon wat over het hoofd? :D
Ik heb het voor de grap eens `from scratch´ gedaan:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24		ul.imageblock{
   width: 402px;
   height: 402px;
   
   margin: 0;
   padding: 0;
   
   border: 1px #000 solid;
}

   ul.imageblock li{
      width: 130px;
      height: 130px;
      float: left;
      
      padding: 0;
      margin: 1px;
      
      text-align: center;
      line-height: 130px;
      
      list-style-type: none;
      border: 1px #AAA solid;
   }


1
2
3
4
5
6
7
8
9
10		<ul class="imageblock">
   <li><a href="#">baz</a></li>
   <li><a href="#">baz</a></li>
   <li><a href="#">baz</a></li>
   <li><a href="#">baz</a></li>
   <li><a href="#">baz</a></li>
   <li><a href="#">baz</a></li>
   <li><a href="#">baz</a></li>
   <li><a href="#">baz</a></li>
</ul>


Zoiets doet het hier prima.
pi_56583230
quote:
Op donderdag 7 februari 2008 14:25 schreef Chandler het volgende:

[..]

Anyone? zie ik nou gewoon wat over het hoofd?
Heb je een doc-type staan? Anders eens style="" in de tag plaatsen
  donderdag 7 februari 2008 @ 15:59:23 #49
164509 Banzaiaap
Tony Rocky Horror
pi_56584350
quote:
Op donderdag 7 februari 2008 13:51 schreef Banzaiaap het volgende:
Ik had dit ook al op tweakers gepost, maar misschien weten jullie ook een oplossing

Ik ben bezig met een site voor een vriend van mij, die een site nodig heeft waar hij zijn muziek kan laten horen, en waar informatie over optredens en dergelijke te vinden is. Heel simpel zou je zeggen.. Ik heb de site ontworpen in Photoshop, stukken eruit geslicet en daarna opgebouwd met XHTML en CSS. Echter, nou ziet de site er heel anders uit in Firefox dan in IE7 (Ik heb vanuit Firefox gebouwd, omdat dat mijn standaard browser is, maar nu blijkt het toch makkelijker geweest om de site eerst in IE te checken. De layout klopt totaal niet meer in IE7, terwijl het er in FF prima uitziet.

Ik heb even een testversie [url="http://www.dje-rik.nl/test/DJERIK/index.html"]hier[/url] geupload, het is nog niet af, maar het was meer om de layout te testen.

Kan iemand me uitleggen wat ik verkeerd doe? (Ik ben nog maar een klein half jaar hier mee bezig, dus reken me aub niet te hard af )
Iemand?

Edit: Ik heb het nu tijdelijk opgelost met de volgende code.

1
2
3
4
5
6
7
8
9		      
<!--[if IE]>
   <style>
      #main 
      {   
         top:33px;
      } 
   </style>
<![endif]-->


[ Bericht 12% gewijzigd door Banzaiaap op 07-02-2008 16:44:41 ]
pi_56585398
quote:
Op donderdag 7 februari 2008 14:53 schreef Geqxon het volgende:

[..]

Ik heb het voor de grap eens `from scratch´ gedaan:
[ code verwijderd ]


[ code verwijderd ]

Zoiets doet het hier prima.
Die van jou is inderdaad veel beter, is er ook een optie ipv links floaten dat het gecentreerd staat.. Stel ik heb maar 2 plaatjes dat deze dan in het midden van het kader komen te staan? ik heb dit zelf al geprobeerd maar helaas
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_56585612
quote:
Op donderdag 7 februari 2008 16:59 schreef Chandler het volgende:

[..]

Die van jou is inderdaad veel beter, is er ook een optie ipv links floaten dat het gecentreerd staat.. Stel ik heb maar 2 plaatjes dat deze dan in het midden van het kader komen te staan? ik heb dit zelf al geprobeerd maar helaas
Edit: Eens even kijken...
pi_56585620
quote:
Op donderdag 7 februari 2008 16:59 schreef Chandler het volgende:

[..]

Die van jou is inderdaad veel beter, is er ook een optie ipv links floaten dat het gecentreerd staat.. Stel ik heb maar 2 plaatjes dat deze dan in het midden van het kader komen te staan? ik heb dit zelf al geprobeerd maar helaas
Dat kan alleen op het parent element door align/text-align
pi_56586045
quote:
Op donderdag 7 februari 2008 17:12 schreef Tarabass het volgende:
Dat kan alleen op het parent element door align/text-align
Ik ben zo'n leek, kun je dit eens voor Chandler N00bie gemakkelijker uitleggen
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_56586121
quote:
Op donderdag 7 februari 2008 17:34 schreef Chandler het volgende:

[..]

Ik ben zo'n leek, kun je dit eens voor Chandler N00bie gemakkelijker uitleggen
Onder de categorie "et moet en zal met CSS", mijn prachtige meesterwerk:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22		<ul class="imageblock">
   <li>
      <ul class="three">
         <li><a href="#">baz</a></li>
         <li><a href="#">baz</a></li>
         <li><a href="#">baz</a></li>
      </ul>
   </li>
   <li>
      <ul class="three">
         <li><a href="#">baz</a></li>
         <li><a href="#">baz</a></li>
         <li><a href="#">baz</a></li>
      </ul>
   </li>
   <li>
      <ul class="two">
         <li><a href="#">baz</a></li>
         <li><a href="#">baz</a></li>
      </ul>
   </li>
</ul>


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		   ul.imageblock{
      width: 402px;
      
      padding: 0;
      
      border: 1px #000 solid;
   }
   
      ul.imageblock li{
         height: 134px;
      
         list-style-type: none;
      }
   
         ul.imageblock li ul{         
            margin: 0 auto;
            padding: 0;
         }
         
         ul.imageblock li ul.one{
            width: 132px;
         }
         
         ul.imageblock li ul.two{
            width: 268px;
         }
         
         ul.imageblock li ul.three{
            width: 402px;
         }
         
            ul.imageblock li ul li{
               float: left;
               width: 130px;
               height: 130px;
               
               margin: 1px;
               
               text-align: center;
               line-height: 130px;
               
               border: 1px #AAA solid;
            }


Ik ben denk ik wat doorgeschoten. Maar het werkt wel!
pi_56591050
ik heb een probleempje met mijn css verhaal. om het overzichtelijk te houden ff de style elementen in de html gehouden. het zijn een beetje geneste divjes. nu werkt het in IE wel goed en FF hapert er weer op. Het omvattende divje gaat niet mee met de hoogte die door de binnen gelegen divjes wordt aangegeven. Hier mijn code
1
2
3
4
5
6
7
8
9
10
11		<div style="margin: auto; width: 780px; height: 100%; background-color:#FFFFFF;">
   <!-- Grote foto en tekst -->
   <div style="width: 390px; float:left;">
      <!-- Foto -->
      <div style="width: 390px; height: 390px; background-color:#99FF00">Foto</div>
      <!-- Tekst links -->
      <div style="width: 390px; background-color:#FF66CC;">Tekst links</div>
   </div>
   <!-- Tekst rechts -->
   <div style="width: 390px; background-color:#FF0000; float: right;">Tekst rechts</div>
</div>


Hoe kan het nou weer dat FF dat niet goed op pakt?
Amsterdam, stad van hash en coke,
Waar de vrouwen zich vrouwelijk gedragen..
En de mannen ook..
  donderdag 7 februari 2008 @ 21:58:26 #56
12880 CraZaay
prettig gestoord
pi_56591501
Welke div moet precies met welke div's meeschalen? Geef ze even id's en leg het aan de hand daarvan uit. Dit is onleesbaar zo.

Ik gok overigens dat je ergens iets uit de flow haalt en verwacht dat een gefloat element binnen een niet-gefloat element ervoor zorgt dat de tweede meeschaalt.
pi_56591760
quote:
Op donderdag 7 februari 2008 21:58 schreef CraZaay het volgende:
Welke div moet precies met welke div's meeschalen? Geef ze even id's en leg het aan de hand daarvan uit. Dit is onleesbaar zo.

Ik gok overigens dat je ergens iets uit de flow haalt en verwacht dat een gefloat element binnen een niet-gefloat element ervoor zorgt dat de tweede meeschaalt.
ok ik heb het even anders gedaan
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15		<style type="text/css">
#content{margin: auto; width: 780px; background-color:#FFFFFF; float:inherit;}
#left{width: 390px; float:left;}
#left_foto{width: 390px; height: 390px; background-color:#99FF00;}
#left_text{width: 390px; background-color:#FF66CC;}
#right{width: 390px; background-color:#FF0000; float: right;}
</style>

<div id="content">
   <div id="left">
      <div id="left_foto">Foto</div>
      <div id="left_text">Tekst links</div>
   </div>
   <div id="right">Tekst rechts</div>
</div>


begrijp je zo wat ik bedoel? er is een grote div content
daarbinnen zitten twee divjes naast elkaar, left en right
binnen left zitten twee divs boven elkaar.

de div waar de foto in komt, links boven, is al op hoogte, bij wijze van test.
de div content gaat niet mee in hoogte met de andere divs als deze in height groter worden. hoe zorg ik er voor dat deze dat wel doet? tenminste in FF. in IE werkt het wel zoals ik zou willen.
Amsterdam, stad van hash en coke,
Waar de vrouwen zich vrouwelijk gedragen..
En de mannen ook..
  donderdag 7 februari 2008 @ 22:40:25 #58
12880 CraZaay
prettig gestoord
pi_56592415
Als je #content "float: left" geeft ipv inherit, wat gebeurt er dan?
pi_56592447
quote:
Op donderdag 7 februari 2008 22:40 schreef CraZaay het volgende:
Als je #content "float: left" geeft ipv inherit, wat gebeurt er dan?
dan gaat de content div wel mee naar de hoogte van de andere divs.. maar staat ie helemaal links in het scherm.. das ook weer niet de bedoeling. Het hele boeltje staat gecentreerd..
Amsterdam, stad van hash en coke,
Waar de vrouwen zich vrouwelijk gedragen..
En de mannen ook..
pi_56592477
Ik heb er nog een divje om heen gelegd, ook gecentreerd net als de rest van de site. En dat gaat wel goed. Thnx!
Amsterdam, stad van hash en coke,
Waar de vrouwen zich vrouwelijk gedragen..
En de mannen ook..
  donderdag 7 februari 2008 @ 23:30:11 #61
12880 CraZaay
prettig gestoord
pi_56593620
quote:
Op donderdag 7 februari 2008 22:43 schreef markiemark het volgende:
Ik heb er nog een divje om heen gelegd, ook gecentreerd net als de rest van de site. En dat gaat wel goed. Thnx!
Haal dat divje eens weg en geef #content geen float, maar "overflow: auto" (geen hoogte definieren!). Zou moeten werken
pi_56652994
Het menu van een bepaalde site ziet er in IE6 goed uit, maar in FF niet.
Het probleem is dat in FF de linkermarge niet op 19px wordt gezet en dat de tekst niet 23px inspringt.

1
2		<head><link rel="stylesheet" type="text/css" href="style.css"></head>
<span class="topMenu"><span class="menuItemHome"><a href="index.php">Home</a></span>


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22		.topMenu
{
  margin-left: 19px;
  font: bold 12px tahoma,verdana,arial,sans-serif;
  letter-spacing: 0;
  background-position: center center;
  background-repeat: no-repeat;
  border: none;
  cursor: pointer;
  text-align: left;
  line-height: 2;
  text-decoration: none;
}

.menuItemHome
{
  margin-left: 0px;
  background: url("afbeeldingen/home.gif") no-repeat 0 0;
  width: 70px;
  height: 16px;
  text-indent:23px;
}
pi_56655000
quote:
Op zondag 10 februari 2008 21:46 schreef mrbombastic het volgende:
Het menu van een bepaalde site ziet er in IE6 goed uit, maar in FF niet.
Het probleem is dat in FF de linkermarge niet op 19px wordt gezet en dat de tekst niet 23px inspringt.
[ code verwijderd ]


[ code verwijderd ]
Klopt je html wel? Ik die 2 regels zie ik 2x een <span> en maar 1 </span>
fokstok.nl
  zondag 10 februari 2008 @ 23:31:34 #64
12880 CraZaay
prettig gestoord
pi_56656239
quote:
Op zondag 10 februari 2008 21:46 schreef mrbombastic het volgende:
Het menu van een bepaalde site ziet er in IE6 goed uit, maar in FF niet.
Het probleem is dat in FF de linkermarge niet op 19px wordt gezet en dat de tekst niet 23px inspringt.
Volgens mij wil je wat properties gebruiken die alleen geschikt zijn voor block-level elementen, terwijl een span een inline element is. Ik vraag me overigens af of een element zonder een duidelijke semantische betekenis (span) het meest geschikt is in deze situatie, maar dat terzijde.
actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
[CSS] voor dummies - Deeltje 8
Index

» digital corner

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