[CSS] voor dummies - Deeltje 8

Index

» digital corner

actieve topics nieuwe topics
abonnement Unibet Coolblue
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
Just say hi!
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.
pi_56661772
quote:
Op zondag 10 februari 2008 23:31 schreef CraZaay het volgende:

[..]

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.
Bedankt, ik heb er nu een div van gemaakt en met nog wat wijzigingen staat dit nu wel goed.

Nu heb ik nog een probleem, zie www.kraket.nl. Ik heb een maindiv class waar ik een linkermarge van 19px wil hebben. Dit lukt wel in IE6, maar in FF springen alle menu items weer terug.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20		.mainDiv
{
  width:260px;
  margin-left: 19px;
}

.item
{
  font: bold 12px tahoma,verdana,arial,sans-serif;
  letter-spacing: 0;
  background: url("afbeeldingen/no-arrow.gif") no-repeat 0 0;
  background-position: center center;
  background-repeat: no-repeat;
  width: 245px;
  height: 25px;
  cursor: pointer;
  text-indent: 15px;
  text-align: left;
  line-height: 21px;
}
  maandag 11 februari 2008 @ 16:20:07 #66
38298 Leujel
Citroen C2 1.4i VTR SensoDrive
pi_56667088
Ik heb het volgende probleem.

Ik heb een stuk tekst op een pagina staan waarvan de source te vergelijken is met het volgende:

1
2		<strong><p>Dit is dikke tekst</p></strong>
<p>Dit is normale tekst</p>


Nu zit ik alleen met het probleem dat ik met geen mogelijkheid die strong tag gestyled krijg. Ik krijg de inhoud zelf (inclusief html formatting) vanuit een CMS waar ik geen wijzigingen in kan aanbrengen.

Hoe kan ik ervoor zorgen dat ik bijvoorbeeld de lettergrootte van de tekst binnen de <strong> tags kan aanpassen?

Alvast dank
Gretsch fan
pi_56667297
Iets als:

1
2
3		strong p{
font-weight: 700;
}


?

Geen flauw idee of dat gaat werken...
  maandag 11 februari 2008 @ 16:45:48 #68
38298 Leujel
Citroen C2 1.4i VTR SensoDrive
pi_56667453
quote:
Op maandag 11 februari 2008 16:35 schreef Geqxon het volgende:
Iets als:
[ code verwijderd ]

?

Geen flauw idee of dat gaat werken...
Dit heb ik inderdaad ook al geprobeert, maar dat werkt niet... de styling van de <p> tag lijkt altijd de voorkeur te krijgen boven de styling van de <strong> tag
Gretsch fan
  maandag 11 februari 2008 @ 17:03:36 #69
12880 CraZaay
prettig gestoord
pi_56667676
Mag een <p> überhaupt binnen een <strong>? Een <p> is een block level element en een <strong> een inline element. Wat vindt de validator ervan?
  maandag 11 februari 2008 @ 17:07:25 #70
12880 CraZaay
prettig gestoord
pi_56667721
quote:
Op maandag 11 februari 2008 11:25 schreef mrbombastic het volgende:

[..]

Bedankt, ik heb er nu een div van gemaakt en met nog wat wijzigingen staat dit nu wel goed.

Nu heb ik nog een probleem, zie www.kraket.nl. Ik heb een maindiv class waar ik een linkermarge van 19px wil hebben. Dit lukt wel in IE6, maar in FF springen alle menu items weer terug.
Probeer eens padding ipv margin? Btw: de letter-spacing is default al 0.
pi_56675987
quote:
Op maandag 11 februari 2008 17:07 schreef CraZaay het volgende:

[..]

Probeer eens padding ipv margin? Btw: de letter-spacing is default al 0.
Bedankt. Padding werkt inderdaad wel.

Verder heb ik nog 2 probleempjes. In IE6 krijg ik een horizontale scrollbar. Daarvoor heb ik nu
1overflow-x:hidden;

gebruikt, maar mss zijn er betere alternatieven.

Verder vraag ik me af of het drop-down menu, zie www.kraket.nl, ook links uitgelijnd kan worden ipv rechts wat ie standaard doet.

[ Bericht 3% gewijzigd door mrbombastic op 11-02-2008 23:44:39 ]
pi_56676008
dubbelpost

[ Bericht 98% gewijzigd door mrbombastic op 11-02-2008 23:43:28 ]
  dinsdag 12 februari 2008 @ 08:55:00 #73
12880 CraZaay
prettig gestoord
pi_56678516
quote:
Op maandag 11 februari 2008 23:35 schreef mrbombastic het volgende:

Verder heb ik nog 2 probleempjes. In IE6 krijg ik een horizontale scrollbar. Daarvoor heb ik nu
[ code verwijderd ]
gebruikt, maar mss zijn er betere alternatieven.
Ja, zorgen dat je content binnen de viewport past in de breedte, dan heb je er geen last van Is het te smal, omdat iemand op een lage resolutie kijkt, dan zullen ze horizontaal moeten scrollen.
pi_56681681
quote:
Op dinsdag 12 februari 2008 08:55 schreef CraZaay het volgende:

[..]

Ja, zorgen dat je content binnen de viewport past in de breedte, dan heb je er geen last van Is het te smal, omdat iemand op een lage resolutie kijkt, dan zullen ze horizontaal moeten scrollen.
Daar heb je inderdaad gelijk in. De problemen zijn inmiddels opgelost. Het bleek dat ergens bovenin mn code nog <div align="center"> stond .
pi_56703887
Iemand een simpel ontwerp slicen?
ne okuyon, bokmu var?
actieve topics nieuwe topics
abonnement Unibet Coolblue
[CSS] voor dummies - Deeltje 8
Index

» digital corner

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