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

maandag 2 mei 2005 @ 20:16:51 #71

DionysuZ

Respect my authority!

met scrolling="auto" ipv scrolling="yes" werkt het wel

□ 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

maandag 2 mei 2005 @ 20:32:57 #72

SuperRembo

Sinds 1998

position: relative weghalen werkt ook, en/of width en height weg halen.

dinsdag 3 mei 2005 @ 21:21:11 #73

SuperRembo

Sinds 1998

Weet iemand hoe je een pagina 100% hoogte geeft MET een border?

Ik heb hier een uitgekleed voorbeeld staan.
Als er veel content is (meer dan de hoogte van het window), dan ziet het er goed uit.
Maar als er weinig content is (klik op content voor demo), dan heb je zo'n irritante scrollbar

dinsdag 3 mei 2005 @ 23:43:00 #74

DionysuZ

Respect my authority!

ik heb het idee dat het aan de margins ligt. 100% hoogte en dan nog eens de margins erbij zorgt voor een scrollbartje

□ 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

woensdag 4 mei 2005 @ 08:21:04 #75

SuperRembo

Sinds 1998

quote:
Op dinsdag 3 mei 2005 23:43 schreef DionysuZ het volgende:
ik heb het idee dat het aan de margins ligt. 100% hoogte en dan nog eens de margins erbij zorgt voor een scrollbartje

Ja dat klopt. Maar hoe los ik dat op?

woensdag 4 mei 2005 @ 13:55:21 #76

DionysuZ

Respect my authority!

je #wrap <div> al geprobeerd in een andere div te zetten met 100% hoogte die geen margins heeft? Dus zeg maar n div met hoogte 100% zonder borders, met daarin je div MET borders met hoogte 100% en een bepaalde margin. Body uiteraard margin:0; geven dan.

□ 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

maandag 9 mei 2005 @ 22:04:51 #77

BaggerUser

ModderFokker!

ik heb 2 divs:

<div id="div1"></div>
<div id="div2"></div>

nu moet div2 onder de border van div 1 zitten
ik heb relatief gepositioneerd en top: -1;

maar omdat div2 later dan div1 komt wordt div2 over div1 heengezet
hoe kan ik zorgen dat div1 boven div2 zit ?..

De enige echte BaggerUser!
Riemen
fiets kopen

maandag 9 mei 2005 @ 22:44:24 #78

Roonaan

Strictly

style="z-index:nummertje"

maandag 9 mei 2005 @ 23:22:43 #79

BaggerUser

ModderFokker!

http://img52.echo.cx/img52/8740/gek5gg.jpg

ik word geeeeeeek

de linker lukt me wel.. maar die rechter totaal niet...
100% neemt ie 100% van het scherm.. niet 100 procent van het overige etc

maar 100%-150 werkt ook niet in ie was het me gelukt... firefox niet

hoe is dit voor melkaar te krijgen ik wordt gek

De enige echte BaggerUser!
Riemen
fiets kopen

maandag 9 mei 2005 @ 23:40:19 #80

BaggerUser

ModderFokker!

ik geef het op

stylesheet.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
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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117

html {
    height: 100%;
}

body {
   font-family: Arial, Helvetica, sans-serif;
    text-align: left;
   background-color:#F9F9F9;
   margin-top: 0px;
   margin-left: 0px;
   margin-right: 0px;
    margin-bottom: 0px;
    height: 100%;
}

#content {
   width: 100%;
   background-color:#F9F9F9;
}

#content_bottom {
   position: relative;
   top: 5px;
   height: 30px;
   background-color:#FFFFFF;

   border-top-width: 1px;
   border-right-width: 0px;
   border-bottom-width: 1px;
   border-left-width: 1px;
   border-top-style: solid;
   border-right-style: none;
   border-bottom-style: solid;
   border-left-style: solid;
   border-top-color: #FABD23;
   border-right-color: #FABD23;
   border-bottom-color: #FABD23;
   border-left-color: #FABD23;
}

#content_center {
   height: auto;
   background-color:#FFFFFF;

   border-top-width: 1px;
   border-right-width: 0px;
   border-bottom-width: 1px;
   border-left-width: 1px;
   border-top-style: solid;
   border-right-style: none;
   border-bottom-style: solid;
   border-left-style: solid;
   border-top-color: #999999;
   border-right-color: #999999;
   border-bottom-color: #999999;
   border-left-color: #999999;
}

#content_top {
   background-color:#F9F9F9;
}

.font_navigatie {
font-size:11px;
}

#main_left {
   width: 150px;
   background-color:#F9F9F9;
   float: left;
}

#main_right {
   width:auto;
   background-color:#F9F9F9;
   float: right;
}

#menu_top {
   width: 100%;
    height: 100px;
   background-color:#F9F9F9;
}

#menu_center {
   width: 100%;
    height: auto;
   background-color:#FFFFFF;

   border-top-width: 1px;
   border-right-width: 1px;
   border-bottom-width: 1px;
   border-left-width: 1px;
   border-top-style: solid;
   border-right-style: solid;
   border-bottom-style: solid;
   border-left-style: solid;
   border-top-color: #999999;
   border-right-color: #999999;
   border-bottom-color: #999999;
   border-left-color: #999999;
}

#menu_navigatie_head {
   position:relative;
   left:5px;
}

#top {
   width: 95%;
   background-color:#F9F9F9;
    text-align: right;
}

#wrapper {
   width: 100%;
}

index

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title>-</title>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <link href="stylesheet.css" type="text/css" rel="stylesheet" />
</head>

<body>

<div id="top">login</div>
<div id="wrapper">
  <div id="main_left">
    <div id="menu_top"></div>
   <div id="menu_navigatie_head"><font class="font_navigatie">navigatie</font></div>
    <div id="menu_center">A</div>
  </div>
  <div id="main_right">
    <div id="content">
     <div id="content_top">
         <div class="menu_top_selected">selected</div>
     </div>
     <div id="content_center">kkk</div>
       <div id="content_bottom">kkk</div>
   </div>
  </div>
</div>

</body>
</html>

De enige echte BaggerUser!
Riemen
fiets kopen

maandag 9 mei 2005 @ 23:43:47 #81

SuperRembo

Sinds 1998

CSS Layout Generator

maandag 9 mei 2005 @ 23:53:36 #82

BaggerUser

ModderFokker!

quote:
Op maandag 9 mei 2005 23:43 schreef SuperRembo het volgende:
CSS Layout Generator

ja dat werkt ook niet voor mijn probleem

en ik ben zo dichtbij maar dat laatste stukje lukt niet

in ie is het goed in firefox nog niet...

De enige echte BaggerUser!
Riemen
fiets kopen

dinsdag 10 mei 2005 @ 11:33:33 #83

BaggerUser

ModderFokker!

kickje

De enige echte BaggerUser!
Riemen
fiets kopen

dinsdag 10 mei 2005 @ 12:47:27 #84

SuperRembo

Sinds 1998

Hieraan heb je genoeg om #main_left en #main_right naast elkaar te krijgen. Ik weet niet wat je verder nog wil.

1
2
3
4
5
6
7

#main_left {
   float: left;
   width: 150px;
}
#main_right {
   margin-left: 150px;/* groter of gelijk aan #main_left:width */
}

dinsdag 10 mei 2005 @ 15:23:19 #85

BaggerUser

ModderFokker!

ja nee zo wil ik het

alleen nu klop thet in interne texplorer nog niet, want de content zit onder de navigatie (vergelijk het maar eens met hoe het er uitziet in FF ) en hij gaat als het menu langer wordt nog verder omlaag
in firefox is het nu wel goed

De enige echte BaggerUser!
Riemen
fiets kopen

dinsdag 10 mei 2005 @ 16:36:31 #86

BaggerUser

ModderFokker!

en dat is dus op te lossen door float: right; aan #main_right toe te voegen maar dan wekrt het in firefox niet meer ...dilemma

De enige echte BaggerUser!
Riemen
fiets kopen

dinsdag 10 mei 2005 @ 19:21:08 #87

BaggerUser

ModderFokker!

opgelost soort van

* html #main_right {
float: right;
margin-left: 3px;/* groter of gelijk aan #main_left:width */
}

De enige echte BaggerUser!
Riemen
fiets kopen

donderdag 12 mei 2005 @ 13:26:13 #88

SqueaK

"Pis nooit tegen de wind

ik heb dus een lap tekst maar ik wil dat die regels niet te dicht op elkaar staan... hoe zorg ik ervoor dat er een kleine ruimte tussen die regels komt... een hele <br> is iets te veel...

donderdag 12 mei 2005 @ 15:40:49 #89

DionysuZ

Respect my authority!

pleur in je css line-height, daar kun je de hoogte van de regels mee bepalen. Voorbeeldje:

1
2
3

body {
line-height: 1.6em;
}

□ 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

zondag 15 mei 2005 @ 14:07:06 #90

GSMboy

:-)

http://dev.treinenplace.nl. Iemand een idee wat er fout aan is als je van resoutie veranderd of browser inkrimpt dat alles overelkaar overlapt?
Iemand een idee?

Walltaping.... Dé nieuwste rage in Nederland? Nieuwsgierig? Kijk hier!

zondag 15 mei 2005 @ 14:08:20 #91

Roonaan

Strictly

je hebt position absolute gebruikt neem ik aan?

zondag 15 mei 2005 @ 14:13:39 #92

GSMboy

:-)

Jep..

Walltaping.... Dé nieuwste rage in Nederland? Nieuwsgierig? Kijk hier!

zondag 15 mei 2005 @ 20:01:55 #93

SuperRembo

Sinds 1998

Als je absoluut positioneert in combinatie met relatieve breedtes en hoogtes, dan krijg je dat.

zondag 15 mei 2005 @ 23:20:49 #94

wijsneus

Radicaal Democraat

Het centreren van de site:

Zorg dat je in standards mode bent door een doctype declaratie.

body
{
/*IE 5 en 5.5 vertellen dat de box in het midden moet*/
text-align:center;
}

#contatiner
{
/*Voor IE6 FF opera en al het andere*/
margin-left: auto;
margin-right: auto;
/*Helaas hebben we ook nog een text-align geerft van <body>*/
text-align:left;
width: 670px;
}

Werkt altijd - overal

Siamo Tutti Antifascisti!

woensdag 18 mei 2005 @ 18:24:18 #95

DionysuZ

Respect my authority!

ok mensen, deze vraag zal wel al meerdere keren langs zijn gekomen, maar goed. Tijdje op google gezocht maar niet gevonden wat ik nodig heb.

Ik ben nu een site aan het maken en die is zeg maar gecentreerd met breedte 780. Nu wil ik hem ook verticaal centreren met hoogte 520, hoe krijg ik dat voor elkaar met divjes?

□ 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

woensdag 18 mei 2005 @ 20:22:28 #96

Berkery

Fat bastard

http://gilbert.quickhost.nl/temp/div-gecentreerd.html

En dan de getallen aanpassen

No Dukes of Hazzard in the classroom

donderdag 19 mei 2005 @ 00:26:26 #97

DionysuZ

Respect my authority!

ja ja, heel mooi, het werkt ook nog. Alleen krijg ik nu een probleem als het venster kleiner wordt dan de grootte van mijn div.

Mijn div is 520 hoog, dus een margin-top van -260px. Als ik het venster nu kleiner maak dan de DIV hoog is, krijg ik wel scrollbalken, maar slechts om mee naar beneden te scrollen. Het midden van de DIV blijft altijd in beeld, de bodem van de div kan ik naartoe scrollen, maar de top van de div valt weg.

Kan ik dit op een of andere manier oplossen?

□ 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

donderdag 19 mei 2005 @ 00:47:39 #98

DionysuZ

Respect my authority!

laat maar heb al n hack gevonden. Een div eromheen met als min-height de hoogte van de gecentreerde div.

edit:
nee dus. Het werkt nu niet goed in Internet Explorer en _height gebruiken werkt ook niet goed. Grrrrr.. in firefox werkt het perfect nu.

[ Bericht 44% gewijzigd door DionysuZ op 19-05-2005 01:01:05 ]

□ 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

donderdag 19 mei 2005 @ 02:02:08 #99

curry684

Windowshippie

Kan niet portable.

Omines.

donderdag 19 mei 2005 @ 17:29:52 #100

DionysuZ

Respect my authority!

er is dus geen enkele css mogelijkheid om een DIV een hoogte van 100% te geven met een minimale hoogte van x pixels?

□ 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

donderdag 19 mei 2005 @ 17:47:24 #101

SuperRembo

Sinds 1998

quote:
Op donderdag 19 mei 2005 17:29 schreef DionysuZ het volgende:
er is dus geen enkele css mogelijkheid om een DIV een hoogte van 100% te geven met een minimale hoogte van x pixels?

en dat alles ook nog verticaal gecentreerd?

donderdag 19 mei 2005 @ 17:49:19 #102

DionysuZ

Respect my authority!

verticaal gecentreerd heb ik al. Probleem daarmee was dat als ik mijn venster verkleinde dat het bovenste deel wegviel. Dus ik heb die DIV in een andere DIV geplaatst en die zou ik graag een minimum hoogte geven, en voor de rest 100% hoogte.

□ 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

donderdag 19 mei 2005 @ 17:51:38 #103

DionysuZ

Respect my authority!

het zit dus ongeveer zo

1
2
3
4
5

met css

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

  #container {
    height: 100%;
    min-height: 520px;
  }

  #alignment {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -260px;
    margin-left: -370px;
  }

ff snel uit mijn hoofd

□ 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

donderdag 19 mei 2005 @ 18:08:27 #104

SuperRembo

Sinds 1998

Het verticaal centreren doe je met behulp van een margin-top die de helft is van de hoogte. Dat werkt alleen als de hoogte vast is.

donderdag 19 mei 2005 @ 18:12:45 #105

DionysuZ

Respect my authority!

jah dat heb ik. Verticaal centreren werkt perfect. Bovenstaande CSS is ook niet helemaal volledig.

ik heb zeg maar dit:

1
2
3
4
5
6
7
8
9

------------------------

         ______
         |  p  |
         |  a  |
         |  g  |
         |__e__|

------------------------

maar als ik het venster verklein krijg ik zeg maar dit:

1
2
3
4

------------------------
| a |
| g |
------------------------

met een scrollbalk waar ik wel naar beneden kan scrollen maar de contents wegvallen wat boven het midden staat.

Dit heb ik proberen op te lossen met die container div, die dan de hoogte van die gecentreerde div als minimum heeft en voor de rest hoogte 100% moet hebben

□ 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

donderdag 19 mei 2005 @ 18:44:38 #106

SuperRembo

Sinds 1998

Misschien dat 't met wat javascript erbij wel lukt. Maar is zie eigenlijk nog niet voor me wat je precies wil bereiken.

donderdag 19 mei 2005 @ 18:56:02 #107

DionysuZ

Respect my authority!

hier een stukje code wat ik bedoel.

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

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

  <head>
    <title>Voorbeeldje</title>
    <style type="text/css">
      body, html {
        height: 100%;
        margin: 0;
        padding: 0;
      }

      #alignment {
        position: relative;
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
        min-height: 522px;
        /* IE Hack */
        _height: 522px;
      }

      #container {
        position: absolute;
        background: #ff0000;
        border: 1px solid #000000;
        left: 50%;
        top: 50%;
        width: 760px;
        height: 522px;
        margin: 0px auto;
        margin-left: -380px;
        margin-top: -261px;
        text-align: center;
        color: #ffffff;
      }
    </style>
  </head>

  <body>
    <div id="alignment">
      <div id="container">
        Nu werkt het goed in Firefox, maar niet in IE.
      </div>
    </div>
  </body>
</html>

Als ik bij bovenstaande de "alignment" div weg haal, dan staat hij mooi gecentreerd in beide browsers, maar als ik dan mijn browserwindow verklein valt de tekst weg. Daarom voeg ik die div "alignment" toe, maar dan werkt het weer niet goed :S

□ 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

donderdag 19 mei 2005 @ 19:07:31 #108

SuperRembo

Sinds 1998

Met veel tekst gaat dat in FF niet goed.
Dat ie in IE niet goed werkt is logisch omdat je met _height: 522px de waarde height: 100% overschrijft.

donderdag 19 mei 2005 @ 19:18:57 #109

DionysuZ

Respect my authority!

daar komt ook zeg maar niet veel tekst in, dat is zeg maar de container waarin de site opgebouwd wordt met menu, titel en een scrollable div voor de contents zeg maar.

Ik wil hem mooi gecentreerd hebben, en wel zo dat als ik het scherm kleiner maak dat ik de top blijf zien. Dat het niet werkt met _height had ik al gezien

. Had op google gezocht en daar stond dat _height een IE hack was voor min-height, maar het werkt dus niet

. En ik wil het juist wel werkend hebben natuurlijk

maar weet niet hoe

□ 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

donderdag 19 mei 2005 @ 19:22:43 #110

SuperRembo

Sinds 1998

quote:
Op donderdag 19 mei 2005 19:18 schreef DionysuZ het volgende:
Had op google gezocht en daar stond dat _height een IE hack was voor min-height, maar het werkt dus niet .

2 dingen:
- IE behandeld height alsof het min-height is. Dat wil zeggen dat het element meegroeit met de inhoud.
- IE negeert underscores in properties, in plaats van _height ziet IE dus height, en gebruikt dan de waarde die er bij staat voor height. Andere browsers zien _height maar kennen die property niet en negeren 'm dus.

vrijdag 20 mei 2005 @ 17:11:13 #111

DionysuZ

Respect my authority!

maar is er een mogelijkheid om een DIV hoogte 100% te geven en een minimumhoogte van 250px bijvoorbeeld?

□ 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

vrijdag 20 mei 2005 @ 17:52:45 #112

SuperRembo

Sinds 1998

Hmm, je zou dit kunnen proberen

1
2
3

height: 100%;/* FF */
min-height: 250px;/* FF */
_height: expression(document.body.clientHeight < 250 ? "250px" : "100%");/* IE */

(niet getest)

vrijdag 20 mei 2005 @ 18:02:15 #113

DionysuZ

Respect my authority!

het werkt \o/ eindelijk

dankjewel SuperRembo, had helemaal niet aan expression() gedacht.

□ 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 24 mei 2005 @ 19:49:26 #114

DionysuZ

Respect my authority!

Ik gebruik nu image swapping voor het menu (er staat nog meer css voor #menu a in, maar dat is niet relevant):

1
2
3
4
5
6

      a#menuitem1 {
        background-image : url(menu/test.gif);
      }
      a#menuitem1:hover {
        background-image : url(menu/test_selected.gif);
      }

En als ik nu bij het menu boven de link hover dan swapt hij mooi het plaatje. Probleem is dat hij het plaatje pas laadt als ik erboven hang. Moet ik hiervoor een javascript image preload script gebruiken of is daar ook nog iets voor?

□ 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 24 mei 2005 @ 21:19:02 #115

sop

ahum

Je kunt ook de 2 plaatjes naast elkaar plakken en m.b.v. CSS het background-image naar links of rechts verschuiven m.b.v. negatieve positionering, zoiets dus

1
2
3
4
5
6
7
8

      a#menuitem1 {
        background-image : url(menu/test.gif);
        background-position: -100px 0;
     }
     a#menuitem1:hover {
        background-image : url(menu/test.gif);
        background-position: 0 0;
     }

dit verhaal dus: http://wellstyled.com/css-nopreload-rollovers.html

[ Bericht 4% gewijzigd door sop op 24-05-2005 21:24:20 ]

woensdag 25 mei 2005 @ 01:39:48 #116

DionysuZ

Respect my authority!

tnx, dat werkt. Mooie oplossing zo

□ 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

woensdag 25 mei 2005 @ 02:40:00 #117

DionysuZ

Respect my authority!

FF een frustratie

Ik gebruik een ordered list:

1
2
3
4
5

<ol>
  <li>listitem 1</li>
  <li>listitem 2</li>
  <li>listitem 3</li>
</ol>

Nu is het resultaat:

1
2
3

1. listitem 1
2. listitem 2
3. listitem 3

Maar eigenlijk wil ik dat het resultaat is:

1
2
3

1 listitem 1
2 listitem 2
3 listitem 3

Dus zonder die punt. Die punt die irriteert me nu al een hele tijd. Is er een simpele manier om die punt weg te krijgen?

□ 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

woensdag 25 mei 2005 @ 08:46:16 #118

sop

ahum

er bestaan ook dingen als een numbered list

woensdag 25 mei 2005 @ 09:00:02 #119

SuperRembo

Sinds 1998

quote:
Op woensdag 25 mei 2005 08:46 schreef sop het volgende:
er bestaan ook dingen als een numbered list

Er is een ordered list (ol) en een unordered list (ul)

Dit zou je met css moeten kunnen doen, maar volgens mij werkt 't in FF en IE niet eens.

1
2
3

OL { counter-reset: item }
LI { display: block }
LI:before { content: counter(item) ". "; counter-increment: item }

donderdag 26 mei 2005 @ 14:25:03 #120

big_al

Ik heb meerdere links in me html bestandje zitten, de kleuren van links heb ik opgegeven tussen de style codes boven aan me pagina. Maar nu krijgen alle links die kleur, terwijl ik verschillende kleuren aan links wil geven. Hoe doe ik dat?

donderdag 26 mei 2005 @ 14:39:23 #121

DionysuZ

Respect my authority!

verschillende classes introduceren. Je kunt bijv. classes gebruiken voor links:

a.menulink { color: #ff0000; }
a.menulink:hover { color:#0000ff; }
a.mainlink { color: #00ff00; text-decoration: none; }

en dan in je code <a class="menulink" of <a class="mainlink" gebruiken.
Je kunt ook de classes van de parent veranderen, zeg dat je bijv. voor alle links in een div genaamd menu (<div id="menu">) een bepaalde kleur wilt hebben dan doe je:

#menu a {
color: #ff0000;
}

□ 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

vrijdag 27 mei 2005 @ 09:02:32 #122

big_al

dankjewel DionysuZ

vrijdag 27 mei 2005 @ 23:09:24 #123

gieling

Live from NYC

Gegevens:
URL pagina: http://www.statingtheobvious.nl/wed/
URL css: http://www.statingtheobvious.nl/wed/static/main.css

Probleem:

Ik wil dus graag dat #info naar de onderkant v/d pagina doorgaat. Dit lukt me echter niet en ik snap niet waarom, heb overal height: 100% geprobeert maar niks werkt (behalve bij #centreren maar die geeft vervolgens alleen de border aan óf de hele pagina (dus ook buiten de middelste tabel waar het moet) word een donkere kleur)). Heeft iemand enig idee hoe dit op te lossen zou zijn? Alvast heel erg bedankt

zaterdag 28 mei 2005 @ 18:48:19 #124

gieling

Live from NYC

Ok dit bovenstaande is opgelost, alleen is er met de oplossing een nieuw probleem ontstaan...

1. Zelfs zonder de bottom marge van 20px is loopt de .info class teveel door naar beneden.

2. De tekst in de .info staat in het midden van het donkergrijze veld (.info) deze hoort hier niet en hoort gewoon netjes bovenaan te staan. Ik kom er alleen niet uit waarom deze opeens in het midden van .info staan.

Iemand hier (wel) een oplossing voor? Alvast tnx

zaterdag 28 mei 2005 @ 19:50:47 #125

DionysuZ

Respect my authority!

2. je gebruikt tables. Standaard vertical align van een table cell (TD) is in het midden. je kunt dit oplossen door <td align="top"> te gebruiken of vertical-align op top te zetten voor de TD class. In je .main class dus: vertical-align: top pleuren

□ 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

maandag 6 juni 2005 @ 17:58:11 #126

Kamigot

Ff een hele domme vraag. Ten eerste moet ik me nog heel erg verdiepen in webdesign. Ik kan wel een site maken, maar meer met progsels als frontpage en dreamweaver

. Nu ben ik een site aan het bouwen in CSS. Ik heb een van de style sheets van Dreamweaver MX gebruikt. NU heb ik alles redelijk goed staan maar wil een bepaalde indeling maken. Vroeger werkte ik vooral met frames en tables maar nu heb je cells (??) in CSS.

Ik kan in links bovenin een targetframe aangeven. Moet ik nu zelf een nieuw frame creeeren in de cell of iets dergelijks. Ik wil dus gewoon dat het menubalkje op dezelfde plaats blijft en dat de textcontent van de cell verandert.

Hier is de opzet : http://www.omegamc.nl

Ik wil dus dat met het aanklikken van de bovenstaande links de content in het witte gedeelte onder ingeladen wordt. Wat moet ik aangeven als target bij die links ?

maandag 6 juni 2005 @ 18:06:28 #127

curry684

Windowshippie

quote:
Op maandag 6 juni 2005 17:58 schreef Kamigot het volgende:
Ff een hele domme vraag. Ten eerste moet ik me nog heel erg verdiepen in webdesign. Ik kan wel een site maken, maar meer met progsels als frontpage en dreamweaver . Nu ben ik een site aan het bouwen in CSS. Ik heb een van de style sheets van Dreamweaver MX gebruikt. NU heb ik alles redelijk goed staan maar wil een bepaalde indeling maken. Vroeger werkte ik vooral met frames en tables maar nu heb je cells (??) in CSS.

Wtf is een cell?

quote:
Ik kan in links bovenin een targetframe aangeven. Moet ik nu zelf een nieuw frame creeeren in de cell of iets dergelijks. Ik wil dus gewoon dat het menubalkje op dezelfde plaats blijft en dat de textcontent van de cell verandert.

Dat kan niet. Dat zijn nu net die frames die obsolete, deprecated, pointless, irritant en lelijk zijn.

quote:
Ik wil dus dat met het aanklikken van de bovenstaande links de content in het witte gedeelte onder ingeladen wordt. Wat moet ik aangeven als target bij die links ?

Gewoon een nieuwe pagina die wederom de code van de hele pagina bevat. Kijk maar eens hoe Fok en Tweakers.net en eigenlijk iedere grote site het doen. 95% van de professionele websites "can't be wrong"

Omines.

maandag 6 juni 2005 @ 18:14:04 #128

Kamigot

quote:
Op maandag 6 juni 2005 18:06 schreef curry684 het volgende:

[..]

Wtf is een cell?
[..]

Dat kan niet. Dat zijn nu net die frames die obsolete, deprecated, pointless, irritant en lelijk zijn.
[..]

Gewoon een nieuwe pagina die wederom de code van de hele pagina bevat. Kijk maar eens hoe Fok en Tweakers.net en eigenlijk iedere grote site het doen. 95% van de professionele websites "can't be wrong"

Ok dus ik moet voor elk linkje een compleet nieuwe pagina aanmaken ? dat vind ik niet echt efficient werken

Dus ik kan het niet zo maken dat als ik op een linkje klik, er in een bepaald gedeelte van de pagina andere text verschijnt ?

maandag 6 juni 2005 @ 18:15:10 #129

DionysuZ

Respect my authority!

ik heb nu een css file met valid css erin. Maar aangezien internet explorer het niet altijd goed doet, heb ik wat hacks voor IE erin moeten bouwen. Vervolgens is het niet meer w3c valid. Dit heb ik opgelost door de IE hacks uit de CSS file te halen en vervolgens in de head de IE specific css geplaatst hiertussen:

1
2
3

Wat ik me afvraag is of dit een beetje een valid methode is

□ 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 7 juni 2005 @ 13:19:01 #130

curry684

Windowshippie

quote:
Op maandag 6 juni 2005 18:14 schreef Kamigot het volgende:
[..]

Ok dus ik moet voor elk linkje een compleet nieuwe pagina aanmaken ? dat vind ik niet echt efficient werken

Daar heb je serverside scripting en serverside includes voor

Dan wordt het plots gruwelijk efficient juist

quote:
Dus ik kan het niet zo maken dat als ik op een linkje klik, er in een bepaald gedeelte van de pagina andere text verschijnt ?

Gelukkig niet. Hoe zouden mensen moeten deeplinken naar die pagina of bookmarken?

Voor enkel een andere tekst overigens kun je Javascript gebruiken, maar dat heeft ook niet iedereen.

Omines.

dinsdag 7 juni 2005 @ 13:20:21 #131

curry684

Windowshippie

quote:
Op maandag 6 juni 2005 18:15 schreef DionysuZ het volgende:
ik heb nu een css file met valid css erin. Maar aangezien internet explorer het niet altijd goed doet, heb ik wat hacks voor IE erin moeten bouwen. Vervolgens is het niet meer w3c valid. Dit heb ik opgelost door de IE hacks uit de CSS file te halen en vervolgens in de head de IE specific css geplaatst hiertussen:
[ code verwijderd ]

Wat ik me afvraag is of dit een beetje een valid methode is

Perfect valide: voor andere browsers is het gewoon HTML comment, en alleen IE snapt de equation die je uitvoert

Omines.

dinsdag 7 juni 2005 @ 13:46:58 #132

Kamigot

Ok bedankt voor de tips. Is het nu verstandig om eerst alle pagina's aan te maken (simpel html met alleen de naam) 1 standaard met alle links goed erin en die dan doorkopieren naar alle andere. Dan hoef ik alleen steedss de tekst te veranderen.

dinsdag 7 juni 2005 @ 14:04:55 #133

Kamigot

Sorry nog even een vraagje. Hoe maak ik zo'n uitklapmenutje net zoals ze op tweakers hebben ?

Ziet er nu zo uit

quote:
<div id="subglobal8" class="subglobalNav">
<a href="#">subglobal8 link</a> | <a href="#">subglobal8 link</a> | <a href="#">subglobal8
link</a> | <a href="#">subglobal8 link</a> | <a href="#">subglobal8 link</a> | <a href="#">subglobal8
link</a> | <a href="#">subglobal8 link</a>
</div>

[ Bericht 60% gewijzigd door Kamigot op 07-06-2005 14:33:12 ]

woensdag 8 juni 2005 @ 14:36:30 #134

curry684

Windowshippie

quote:
Op dinsdag 7 juni 2005 14:04 schreef Kamigot het volgende:
Sorry nog even een vraagje. Hoe maak ik zo'n uitklapmenutje net zoals ze op tweakers hebben ?

Ziet er nu zo uit
[..]

Doe gewoon View Source bij op Tweakers

En de DOM inspector van Firefox is ook erg handig om te ontdekken hoe anderen dingen doen

Omines.

woensdag 8 juni 2005 @ 14:39:35 #135

curry684

Windowshippie

quote:
Op dinsdag 7 juni 2005 13:46 schreef Kamigot het volgende:
Ok bedankt voor de tips. Is het nu verstandig om eerst alle pagina's aan te maken (simpel html met alleen de naam) 1 standaard met alle links goed erin en die dan doorkopieren naar alle andere. Dan hoef ik alleen steedss de tekst te veranderen.

Ik zou je HTML files gewoon als extensie .php geven en iedere file zo bouwen:

1
2
3
4
5
6

<?php require_once "include/pageheader.php"; ?>
<div id="feitelijkecontent">
<h1>Onderwerp van de pagina</h1>
<p>Wat toelichtende tekst</p>
</div>
<?php require_once "include/pagefooter.php"; ?>

Dan hoef je helemaal niets te kopieren, heb je feitelijk alleen de content per pagina uitgesplitst staan, ben je klaar voor een eventuele DB-koppeling later, hoef je de header en footer maar op 1 plek te wijzigen als je iets wil veranderen etc. etc. etc.

Copy/paste is evil, write code once and use it forever

Omines.

woensdag 8 juni 2005 @ 17:34:29 #136

DionysuZ

Respect my authority!

ok kom ik weer met een vraagje

. Ben bezig met een site en daarin heb ik een <div> geplaatst over een andere div heen en die moet een bepaalde alpha waarde krijgen (wit, 40% alpha). Dit had ik eerst opgelost met opacity, -moz-opacity en filter:alpha(opacity). Maar toen kreeg ik in sommige browsers (mac IE bijv.) een wit vlak ipv een 40% doorzichtig vlak. Deze wijze is dacht ik ook nog niet css valid en nog niet door veel browsers ondersteund (?).

Dus ik heb het op een andere manier opgelost. ik heb een .png gemaakt van 2px*2px die wit is en 40% doorzichtig. Dit is de CSS code in mijn css file:

1
2
3
4

#chapter_background {
background: transparent url(/px/alpha.png) 0% 0% repeat;
....
}

met de bijbehorende div:

Maar omdat Internet Explorer voor windows .png klote behandelt nog een aparte IE hack toegevoegd boven in de head van de index pagina:

1
2
3
4
5
6
7
8

dan werkt het allemaal mooi in IE voor windows etc. maar nu krijg ik een groen vlak als ik Mac IE gebruik :S. Wat doe ik fout of hoe kan ik dit beter oplossen?

□ 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

woensdag 8 juni 2005 @ 18:58:17 #137

SuperRembo

Sinds 1998

Er is een css hack voor mac ie 5:

1
2
3
4

#foo { background: red; }
/* commented backslash hack \*/
#foo { background: green; }
/* end hack */

Dan is #foo in mac ie 5 rood, in alle andere browsers groen.

woensdag 8 juni 2005 @ 21:20:14 #138

Nietmachine

Ik niet.

Ik heb net dit hele topic even doorgelezen en kwam het stukje over geen tabellen gebruiken voor de lay out dus ook tegen. Nu snap ik de nadelen er wel van natuurlijk, maar bij vrijwel (ben eigenlijk nog geen site tegengekomen waar het niet zo is) zie ik dat er voor de opmaak wel gewoon tabellen gebruikt worden en geen div's. Nu vraag ik me af waarom dat zo is

. Vallen de nadelen gewoon mee van tabellen als je je aan wat regels houdt of zijn div's gewoon teveel werk en/of te lastig?

Een dag niet gelachen is een dag niet geleefd.

donderdag 9 juni 2005 @ 13:04:39 #139

Berkery

Fat bastard

quote:
Op woensdag 8 juni 2005 21:20 schreef Nietmachine het volgende:
Ik heb net dit hele topic even doorgelezen en kwam het stukje over geen tabellen gebruiken voor de lay out dus ook tegen. Nu snap ik de nadelen er wel van natuurlijk, maar bij vrijwel (ben eigenlijk nog geen site tegengekomen waar het niet zo is) zie ik dat er voor de opmaak wel gewoon tabellen gebruikt worden en geen div's. Nu vraag ik me af waarom dat zo is . Vallen de nadelen gewoon mee van tabellen als je je aan wat regels houdt of zijn div's gewoon teveel werk en/of te lastig?

Dat div's teveel werk zou zijn is onzin, het levert juist minder werk op omdat je html veel simpeler wordt. Als je gewend bent om met tabellen te lay-outen dan vergt het wel een omschakeling in je denkwijze (je moet structuur en opmaak scheiden), en het vergt wat studie. Die omschakeling hebben nog lang niet alle webdesigners gemaakt.

No Dukes of Hazzard in the classroom

donderdag 9 juni 2005 @ 13:14:16 #140

Leshy

Held met sokken.

Bovendien gedragen tables zich iets consistenter in verschillende browsers dan divs dat doen. Dit komt met name omdat Internet Explorer op het gebied van CSS nog een jaar of vier achterloopt bij moderne browsers als Opera, Safari en Mozilla. Het vereist dus een klein beetje extra kennis en werk om een div-based layout cross-browser werkend te krijgen, en veel webdesigners laten zich hierdoor afschrikken.

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

[CSS] voor dummies - Deel 2

» digital corner

» digital corner