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

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

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

[CSS] voor dummies - Deel 2

» digital corner

» digital corner