[CSS] voor dummies - Deel 3 | Digital Corner (DIG)

woensdag 7 december 2005 @ 12:40:42 #126

Chandler

Ziet er mooi uit man.. Misschien ga ik er nog wat mee doen, ben al weer druk aan't puzzelen...

Ennuh die transparante PNG's die niet werken in IE... ach daarom werk ik nu gelukkig met PNGtjes die niet transparant zijn...

The people who lost my respect will never get a capital letter for their name again.
Like trump...

vrijdag 23 december 2005 @ 15:25:17 #127

ExCibular

Ik heb een vraag waarop ik het antwoord niet echt kan vinden. Ik wi een hover actie doen waarmee de achtergrond kleur van de hele layer verandert.Dus een layer die van kleur verandert bij een mouseover. Hovers met een hyperlink zijn geen probleem alleen dat is niet wat ik wil.het gaat hier specifiek om een hover voor de layer.

Kan dit met alleen css of moet ik hiervoor toch javascript gaan gebruiken?

Edit ik heb hem zelf al gevonden:

1
2
3
4
5
6
7

#button a:hover, #button a:active
{
display:block;
height:100%;
background-color:#EEEEEE;
text-decoration:none;
}

[ Bericht 19% gewijzigd door ExCibular op 23-12-2005 15:40:22 ]

vrijdag 23 december 2005 @ 16:26:41 #128

wonko

Fap

quote:
Op vrijdag 23 september 2005 07:44 schreef SuperRembo het volgende:

[..]

Bedoel je box-sizing?
[ code verwijderd ]

Zie ook Quirksmode.org over box model tweaking.

Bookmark!! Tanx

Geloven is zeker weten dat je het niet weet.
Geloven maakt meer kapot dan je lief is.
Vloeken is aangeleerd...geloven ook.

dinsdag 10 januari 2006 @ 23:06:21 #129

the_disheaver

Lijkt me best simpel, maar het wil niet...

een div'je met tekst erin die ik een bepaalde breedte wil geven. Maar hij vult hem voor de gehele breedte van de pagina.

html:

1
2
3

css:

1
2
3
4
5
6

div#content{
border: thin dotted #00FF00;
position: absolute;
top: 330px;
width: 550px;
}

Zou toch moeten werken?

dinsdag 10 januari 2006 @ 23:26:34 #130

DionysuZ

Respect my authority!

wat n fucking omweg die transparante pngtjes in dat artikel hierboven. Ik doe het als volgt:

ik laad mn standaard styles

ik voeg het volgende bijvoorbeeld toe onder aan mn header:

1
2
3
4
5
6
7
8

□ Reality is merely an illusion,albeit a very persistent one-A.Einstein
■ Of ik ben gek of de rest van de wereld.Ik denk zelf de rest van de wereld-Rudeonline
□ The war is not meant to be won.It is meant to be continuous-G.Orwell

dinsdag 10 januari 2006 @ 23:48:21 #131

the_disheaver

quote:
Op dinsdag 10 januari 2006 23:06 schreef the_disheaver het volgende:
Lijkt me best simpel, maar het wil niet...

een div'je met tekst erin die ik een bepaalde breedte wil geven. Maar hij vult hem voor de gehele breedte van de pagina.

html:
[ code verwijderd ]

css:
[ code verwijderd ]

Zou toch moeten werken?

opgelost.

Had ergens in het html '<dvi> ipv <div>

edit: hij is nu wel 800 pixel terwijl hij 550 moet zijn, maar het gaat de goede kant op

[ Bericht 12% gewijzigd door the_disheaver op 10-01-2006 23:53:31 ]

woensdag 11 januari 2006 @ 08:09:56 #132

SuperRembo

Sinds 1998

Je hebt toch wel id="content" staan en niet id "content"?

woensdag 11 januari 2006 @ 12:44:56 #133

the_disheaver

quote:
Op woensdag 11 januari 2006 08:09 schreef SuperRembo het volgende:
Je hebt toch wel id="content" staan en niet id "content"?

Nee, daar kwam ik ook veel te laat achter

Maar nu wel, en nu is ie echt 550 px! (genoeg wat nog niet goed is, maar goed)

vrijdag 13 januari 2006 @ 18:40:50 #134

Chandler

Ik zit met een klein probleem met betrekking tot spacing in FF.

Zie het verschil tussen IE en FF van de menu's die helemaal beneden staan..

http://gfxpoll.bruggema.nl/new/

Iemand een idee hoe dit op te lossen in FF?

The people who lost my respect will never get a capital letter for their name again.
Like trump...

vrijdag 13 januari 2006 @ 19:09:35 #135

the_disheaver

quote:
Op vrijdag 13 januari 2006 18:40 schreef Chandler het volgende:
Ik zit met een klein probleem met betrekking tot spacing in FF.

Zie het verschil tussen IE en FF van de menu's die helemaal beneden staan..

http://gfxpoll.bruggema.nl/new/

Iemand een idee hoe dit op te lossen in FF?

ik heb hier geen IE, maar volgens mij doet ie wat het zou moeten doen.

Ik neem aan dat de padding-left een aantal pixels moet zijn, maar ik zie het nergens aangeven in de stylesheet.

1
2
3
4
5
6

#menus ul {
list-style-type:none;
list-style-position: inside;
margin: 0;
padding: 0;
}

vrijdag 13 januari 2006 @ 20:49:55 #136

Chandler

Ik wel eingelijk

1
2
3
4
5
6
7
8
9

.menu_orange h3 {
   margin: 0;
   padding: 8px 0 0 35px;
   background: #C74700 url(images/menu_orange_top_bg.gif) no-repeat top left;
   height:22px;
   font-family: Tahoma;
   font-size: 10px;
   color:#ffffff;
}

daar zie je dat het 8 pixels van rechts moet staan en van boven 35... en in IE ziet dat er goed uit maar in FF dus niet dan pakt ie die pixels weer niet

The people who lost my respect will never get a capital letter for their name again.
Like trump...

vrijdag 13 januari 2006 @ 20:57:04 #137

Tijn

Powered by MS Paint

Wat zijn goeie fixed-width fonts die op alle systemen (Windows/Mac/*Nix) en in de meeste browsers er min of meer hetzelfde uitzien?

Verberg de nieuwsticker

vrijdag 13 januari 2006 @ 21:23:51 #138

the_disheaver

quote:
Op vrijdag 13 januari 2006 20:49 schreef Chandler het volgende:
Ik wel eingelijk
[ code verwijderd ]

daar zie je dat het 8 pixels van rechts moet staan en van boven 35... en in IE ziet dat er goed uit maar in FF dus niet dan pakt ie die pixels weer niet

Net anders om toch? 8 pixels boven, en 35 van rechts. Dat lijkt hij ook te doen. Zou je een screenshot in IE kunnen maken?

vrijdag 13 januari 2006 @ 21:30:04 #139

Chandler

ik maak een screenshot voor je van ie en ff

FireFox

en natuurlijk Internet Explorer

The people who lost my respect will never get a capital letter for their name again.
Like trump...

vrijdag 13 januari 2006 @ 21:42:45 #140

the_disheaver

1
2
3
4
5
6
7
8
9

.menu_orange h3 {
   margin: 0;
   padding: 8px 0 0 35px;
   background: #C74700 url(images/menu_orange_top_bg.gif) no-repeat top left;
   height:22px;
   font-family: Tahoma;
   font-size: 10px;
   color:#ffffff;
}

Deze code slaat alleen op de h3-tag, en dus niet op de <ul> list eronder. Deze zal dus volgens de
#menus ul {} een padding van 0 krijgen.

Het handigste lijkt mij deze padding op 0 0 0 35px; (oid) te zettten.

Of anders.menu_orange ul{} aanmaken.

zaterdag 14 januari 2006 @ 08:09:25 #141

Chandler

nu heb ik hetniet op ul gezet maar op li, want ul deed nix namelijk..

1
2
3

.menu_orange li, .menu_blue  li {
        padding: 0 0 0 8px;
}

alleen gaat het dan wel weer goed in FF maar dan heeft IE opeens de dubbele spacing vanaf links...

zie pix

The people who lost my respect will never get a capital letter for their name again.
Like trump...

zaterdag 14 januari 2006 @ 11:23:33 #142

SuperRembo

Sinds 1998

List-style-position: inside; eruit
Margin en padding op ul en li op 0. Alleen padding-left en padding-right op de ul.

zaterdag 14 januari 2006 @ 11:37:27 #143

Chandler

Je bent geweldig, het werkt namelijk nu in beide brouwers goed!! tnx.

The people who lost my respect will never get a capital letter for their name again.
Like trump...

zaterdag 14 januari 2006 @ 11:56:13 #144

SqueaK

"Pis nooit tegen de wind

ik ben net begonnen met een site te maken.. deze bestaat ui 6 pagina's ...

nu wil ik op elke pagina dezelfde tabel, maar met een andere kleur... dus op pagina 1 een oranje, op pagina 2 een blauwe etc.

moet ik dan 6 verschillende classes of divjes aanmaken ? of is er andere manier ?

zaterdag 14 januari 2006 @ 12:06:00 #145

SuperRembo

Sinds 1998

Je kan de tabellen toch een andere id of class geven? Dan verwijs je in de stylesheet naar die id/class.

zaterdag 14 januari 2006 @ 12:32:34 #146

SqueaK

"Pis nooit tegen de wind

dus dan maak ik zeg maar

.tabel_oranje {
eigenschappen
}

.tabel_geel {
eigenschappen
}

en dan zo 6 keer...

zaterdag 14 januari 2006 @ 13:02:53 #147

SuperRembo

Sinds 1998

Nee, ik zou het anders doen.
Geef de pagina's een id, dus een id in de body-tag. Bijvoorbeeld <body id="appels"> en <body id="bananen">.
Geef ook de tabel een id, bijvoorbeeld <table id="eigenschappen">.

1
2
3
4
5
6
7
8
9
10
11
12

/* algemene stijl die voor elke pagina geldt */
#eigenschappen {
   border: 1px solid #000;
}
/* stijl voor pagina appels */
#appels #eigenschappen {
   background-color: green;
}
/* stijl voor pagina bananen */
#bananen #eigenschappen {
   background-color: yellow;
}

zondag 15 januari 2006 @ 23:54:54 #148

the_disheaver

Dit krijg ik te zien in IE
edit: een plaatje is wat duidelijker

Kortweg: de marker voor 'Milieu' moet voor 'milieu' staan, en niet ergens in het midden van die 2de list.

1
2
3
4
5

* niveau 1a
  niveau 1b
*   niveau 2a
    niveau 2b
* niveau 1c

En dit wil ik graag zien (en krijg ik wel te zien in FF en opera)

1
2
3
4
5

* niveau 1a
* niveau 1b
niveau 2a
niveau 2b
* niveau 1c

Niveau 2 heeft geen list-style-type. niveau 1 wel. item 1b heeft een list genest. Hierdoor wordt in IE de marker niet voor de tekst 'niveau 1b' geplaatst, maar ergens voor 'niveau 2a' (doordat het midden van de gebruikte hoogte door item 2b ongeveer daar ligt.

Kan dit door een element anders? (dat de vertical-aling van de marker op 'top' staat ingesteld)

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

ul.menulevel1{
list-style-image: url(list-pijl.gif);
list-style-type: square;
list-style-position: inside;
margin: 0;
padding: 0;
}
ul.menulevel2{
list-style-type: none;
margin: 0;
padding: 0;
}

ul.menulevel1 li.doc1 {
margin: 0;
padding: 5px 0px 3px 15px;
width: 200px;
border-bottom: 1px solid #73D300;

}
ul.menulevel2 li.doc2 {
margin: 0 0 0 5px;
padding: 2px 0px 2px 5px;
border-left: 3px solid #73D300;
}

html:

1
2
3
4
5

<ul class="menulevel1"><li class="doc1">>Milieu
<ul class="menulevel2"><li class="doc2"titel 1</li>
<li class="doc2">titel 2</li></ul>
</li>
<li class="doc1">Onderwijs</li></ul>

[ Bericht 3% gewijzigd door the_disheaver op 16-01-2006 00:00:00 ]

FOK!-Schrikkelbaas dinsdag 17 januari 2006 @ 22:00:09 #149

Swetsenegger

Egocentrische Narcist

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<table style="border-collapse:collapse;width:100%;">
  <tr style="color:black;font-weight:bold;background-image:url(../images/leeg.jpg);">
    <td style="border-style:solid;border-width:1px 0 1px 1px;border-color:rgb(160,166,176)">Order ID</td>
    <td style="border-style:solid;border-width:1px 0;border-color:rgb(160,166,176)">Status</td>
    <td style="border-style:solid;border-width:1px 1px 1px 0;border-color:rgb(160,166,176)">datum</td>
  </tr>
  <tr>
    <td>
    <form name="form" action="<?=$_SERVER['PHP_SELF'];?>" method="post">
    <select name="status" onChange="submit(this)">
    <option value="0"<?if($row['status']==0){?> selected="selected"<?}?>>0</option>
    <option value="1"<?if($row['status']==1){?> selected="selected"<?}?>>1</option>
    <option value="2"<?if($row['status']==2){?> selected="selected"<?}?>>2</option>
    <option value="3"<?if($row['status']==3){?> selected="selected"<?}?>>3</option>
    </select>
    <input type="hidden" name="order_id" value="<?=$row['order_id'];?>" />
    </form>
    </td>
  </tr>
</table>

Waarom zit er zoveel ruimte op mijn rijen ?
Ik heb ook select al een style met een height mee gegeven, de <tr> de <td>. Maakt onder IE niets uit en onder FF wordt de selectbox wel kleiner, maar de cel/rij blijft hoger dan noodzakelijk

 | FOK! Schrikkelbaasch

dinsdag 17 januari 2006 @ 22:49:40 #150

SuperRembo

Sinds 1998

Komt die ruimte niet door het form?
In FF zit daar in ieder geval standaard een margin-bottom: 1em op.

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

[CSS] voor dummies - Deel 3

» digital corner

» digital corner