Toon posts:

[CSS] Hoe .background veranderen?

Pagina: 1
Acties:

vrijdag 10 maart 2006 10:44

Acties:
  • Eusebius
  • Registratie: November 2001
  • Niet online

Eusebius

Topicstarter
Misschien een heel basic vraagje ... maar ik kom er niet uit!

Een template van Joomla! heeft een aantal blokken met een transparante achtergrond (voorbeeld hier van deze template). Nu is het middenblok ook transparant en dat is niet fijn. Foto's kijken is niet zo mooi, getuige de eerste foto op de FP. Hij ziet er een beetje grauw uit, maar dat is logisch omdat er een transparantie van .80 overheen gaat (of doorheen :p)

Nu heb ik de template op mijn localhost al zo ver gekregen dat ik de opacity in een aparte div heb gestopt en zo per block kan aanroepen. Het linker en rechter blok mogen wat mij betreft transparant blijven, maar de maincontent niet. Dat heb ik nu voor elkaar gekregen, maar de kleur van het middenblok is veel meer geel. Logisch, want het is niet transparant. Dus wil ik het middenblok een andere kleur geven.

Nu lukt het mij niet om de background kleur in het middenblock te resetten. Wat gebeurt er?
• De kleur (groen in dit geval) loopt in de hoeken boven en onder over de lijn heen
• De oorspronkelijke achtergrond wordt niet gereset

Voorbeeldje: Afbeeldingslocatie: http://www.wil-len.nl/got/screenstamsite2.jpg
Nu zijn er 2 dingen die ik wil weten:
• hoe kan ik ervoor zorgen dat de background niet over de border heen gaat?
• hoe kan ik de background resetten en een nieuwe background geven?

Nog wat code om het ook inzichtelijk te maken
Cascading Stylesheet:
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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

.xtop, .xbottom
{
    display:block;
    background:transparent;
    font-size:1px;
}
.yb0,.xb1, .xb2, .xb3, .xb4, .xb5, .xb6, .xb7, .xb8, .xb9, .xb10
{
    display:block;
    overflow:hidden;
    font-size:1px;
}
.xb1, .xb2, .xb3, .xb4, .xb5, .xb6, .xb7, .xb7, .xb9 
{
    height:1px;
}
.xb3, .xb4, .xb5, .xb6, .xb7, .xb8, .xb9, .xb10 
{
 background:rgb(255,255,153);  
border-left:1px solid rgb(227,43,0); 
border-right:1px solid rgb(227,43,0);
}
.yb0 {height: 4px; margin:0 11px; background:rgb(227,43,0);}
.xb1 {margin:0 11px; background:rgb(227,43,0);}
.xb2 {margin:0 8px; background:rgb(227,43,0);}
.xb3 {margin:0 7px; border-width:0 4px;}
.xb4 {margin:0 5px; border-width:0 4px;}
.xb5 {margin:0 4px; border-width:0 3px;}
.xb6 {margin:0 3px; border-width:0 3px;}
.xb7 {margin:0 3px; border-width:0 2px;}
.xb8 {margin:0 2px; border-width:0 2px;}
.xb9 {margin:0 1px; border-width:0 3px;}
.xb10 {height:2px; margin:0 1px; border-width:0 2px;}

/* main content */
.xboxcontent 
{
  height: 100%;
  display:block;  
  background:rgb(255,255,153);
  border-left: 0px; 
  border-right: 0px;
  margin: 0px;
  padding:1px 5px;
}

.xboxcontent_inner
{
  width: 100%;
}

.opacity {
  filter: alpha(opacity=80);
  opacity: .80;
}
.colorwithoutopacity{
background: rgb(0,255,102);
}

en een deel uit de index.php waar het linker blok wordt opgebouwd
PHP:
1
2
3
4
5
6
7
8
9
10

  <div class="nav">
  <div class="opacity">
<!-- start rounded corner TOP -->
          <b class="xtop">
            <b class="xb1"></b>
            <b class="xb2"></b>
            <b class="xb3"></b>
            <b class="xb4"></b>
            <b class="xb5"></b>
etc...

Natuurlijk wordt opacity weer netjes afgesloten.

[ Voor 4% gewijzigd door Eusebius op 10-03-2006 10:44 ]

==
hoi

Reageer