[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

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.

donderdag 9 juni 2005 @ 14:59:38 #141

DionysuZ

Respect my authority!

quote:
Op woensdag 8 juni 2005 18:58 schreef SuperRembo het volgende:
Er is een css hack voor mac ie 5:
[ code verwijderd ]

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

jah ben bekend met de mac ie hack

maar wist niet waar ik dat zou moeten gebruiken. Ik heb een oplossing gevonden op het groene vlak: de PNG met 40% alpha channel moest een formaat hebben van minstens 64x64, vond ik via google. Na de resize werkt het opeens 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 9 juni 2005 @ 21:55:47 #142

curry684

Windowshippie

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?

Als je deze vraag durft te stellen snap je de nadelen ervan niet

Nadelen: je semantiek klopt niet, mensen met een niet-PC-screen browser kunnen je site niet gebruiken, searchengines kunnen je site niet fatsoenlijk indexeren, printen werkt niet fatsoenlijk, maintainability is nul, je HTML is 3 keer te groot, opmaak wijzigen is enorme kutklus.

Voordelen: noone knows, maar helaas wordt 90% van de websites op het internet niet door webdesigners maar door omhooggevallen prutsers met een boek 'HTML 2.0 for dummies' uit 1995 gemaakt. En dus zijn er veel tablebased sites.

Omines.

donderdag 9 juni 2005 @ 22:06:24 #143

Nietmachine

Ik niet.

quote:
Op donderdag 9 juni 2005 21:55 schreef curry684 het volgende:

[..]

Als je deze vraag durft te stellen snap je de nadelen ervan niet

Nadelen: je semantiek klopt niet, mensen met een niet-PC-screen browser kunnen je site niet gebruiken, searchengines kunnen je site niet fatsoenlijk indexeren, printen werkt niet fatsoenlijk, maintainability is nul, je HTML is 3 keer te groot, opmaak wijzigen is enorme kutklus.

Voordelen: noone knows, maar helaas wordt 90% van de websites op het internet niet door webdesigners maar door omhooggevallen prutsers met een boek 'HTML 2.0 for dummies' uit 1995 gemaakt. En dus zijn er veel tablebased sites.

De nadelen snappen is niet moeilijk. Snappen waarom er dan alsnog zoveel gebruik van gemaakt wordt is lastiger. Als ik in de bron van veeeeel sites (en dan niet de standaard huis/tuin en keuken sites natuurlijk) kijk zie ik dus dat die gewoon gebruik maken van tables, vandaar mijn vraag dus.

Een dag niet gelachen is een dag niet geleefd.

donderdag 9 juni 2005 @ 23:14:30 #144

Roonaan

Strictly

quote:
Op donderdag 9 juni 2005 21:55 schreef curry684 het volgende:
Voordelen: noone knows, maar helaas wordt 90% van de websites op het internet niet door webdesigners maar door omhooggevallen prutsers met een boek 'HTML 2.0 for dummies' uit 1995 gemaakt. En dus zijn er veel tablebased sites.

Lichtelijk overdreven maar de main line klopt wel. Overigens hebben programma's als dreamweaver en consorten ook geen positief effect op het flowed designs.

vrijdag 10 juni 2005 @ 14:30:22 #145

curry684

Windowshippie

quote:
Op donderdag 9 juni 2005 22:06 schreef Nietmachine het volgende:

[..]

De nadelen snappen is niet moeilijk. Snappen waarom er dan alsnog zoveel gebruik van gemaakt wordt is lastiger. Als ik in de bron van veeeeel sites (en dan niet de standaard huis/tuin en keuken sites natuurlijk) kijk zie ik dus dat die gewoon gebruik maken van tables, vandaar mijn vraag dus.

Voor mensen die HTML/CSS niet snappen is het ook een logischer manier van werken: je hebt een browser enerzijds en een plaatje met gewenste layout anderzijds, dan is het het handigste voor de leek om het gewoon in blokjes op te snijden en zo te bouwen.

Dat zijn echter zoals ik zeg de leken die onterecht beweren verstand te hebben van webdesign. En daar zijn er veel te veel van, helaas ook hier en daar met veel te dikke salarissen.

Omines.

vrijdag 10 juni 2005 @ 16:07:31 #146

sop

ahum

Je winst om een site te ontwikkelen met een layout zonder tables, pak je eigenlijk ook pas zodra je onderhoud op je site gaat plegen.

vrijdag 10 juni 2005 @ 20:02:53 #147

Leshy

Held met sokken.

quote:
Op vrijdag 10 juni 2005 16:07 schreef sop het volgende:
Je winst om een site te ontwikkelen met een layout zonder tables, pak je eigenlijk ook pas zodra je onderhoud op je site gaat plegen.

Of uit de bandbreedte die je bespaart, alhoewel dat uiteraard pas een argument wordt bij grotere pagina's met veel bezoekers.

vrijdag 10 juni 2005 @ 20:50:18 #148

DutchBlood

Ik ben ook weer aan het cssen.
Het gaat om deze site: http://matthijs.info/rmrt/

Ik heb 2 div's naast elkaar. #vakjes en #content, ik krijg alleen de grijze lijn in IE niet weg.

Padding: 0xp;
Opgeven heeft geen nut.

Iemand enig idee hoe ik dit oplos, behalve nog een andere div er achter te maken met dezelfde achtergrond?

vrijdag 10 juni 2005 @ 23:20:33 #149

Nietmachine

Ik niet.

Ik ben nu zelf ook wat gaan spelen aan de hand van wat ik hier tegen gekomen ben o.a..

Nu heb ik een vraag mbt dit:

1
2
3
4
5
6
7
8
9

#content_splitter {
  width: 768px;
  min-height: 230px;
  background-color: #C9C9C9;
  display: block;
}
* html #content_splitter {
  height: 230px;
}

In #content_splitter staat dus min-height: 230px;, als je dat er neer zet zonder

* html #content_splitter {
height: 230px;
}

wordt de hoogte geen 230px. Met bovenstaande * html... is dat wel het geval. Ook als je min-height: 230px; weghaalt en * html... laat staan.

Nu ik erbij nadenk lijkt het me een methode om cross browser te werken?

Een dag niet gelachen is een dag niet geleefd.

zaterdag 11 juni 2005 @ 13:17:15 #150

Leshy

Held met sokken.

quote:
Op vrijdag 10 juni 2005 23:20 schreef Nietmachine het volgende:
Nu ik erbij nadenk lijkt het me een methode om cross browser te werken?

Ik neem aan dat je gebruik maakt van Internet Explorer. Moderne browsers zoals Opera, Safari en Mozilla ondersteunen wel degelijk netjes de min-height property en zullen het blok dus 230px hoog maken als de inhoud kleiner is.

Internet Explorer doet dat echter niet, en dan moet je dus via bijvoorbeeld * html werken, wat incorrecte CSS is omdat je hiermee zegt: "alles binnen het element html, wat een kind is van welk ander element dan ook", wat per definitie fout is omdat html het root element is, daar zit niets meer boven. Ook hier is Internet Explorer weer de enige browser die dit niet negeert, zoals zou moeten, maar deze regel wel toepast.

Met andere woorden:

min-height: 230px;
Mozilla, Opera, Safari: Ok, het blok moet minimaal 230 pixels hoog worden, geregeld.
Internet Explorer: Huh? Watte?

* html [...] height: 230px;
Mozilla, Opera, Safari: Erm, * html kan helemaal niet. Dit is fout, dus negeren we dit.
Internet Explorer: Durrr. Hoogte 230 pixels. Okay! Durrr.

zaterdag 11 juni 2005 @ 22:16:00 #151

SuperRembo

Sinds 1998

quote:
Op zaterdag 11 juni 2005 13:17 schreef Leshy het volgende:
[...] * html werken, wat incorrecte CSS is omdat je hiermee zegt: "alles binnen het element html, wat een kind is van welk ander element dan ook", wat per definitie fout is omdat html het root element is, daar zit niets meer boven.[...]

* html is geen foute css, er zijn alleen geen elementen die er aan voldoen.

Hier vond ik een mooi overzicht van alle css hacks.

zaterdag 11 juni 2005 @ 22:19:45 #152

Leshy

Held met sokken.

quote:
Op zaterdag 11 juni 2005 22:16 schreef SuperRembo het volgende:
* html is geen foute css, er zijn alleen geen elementen die er aan voldoen.

Syntactisch is de CSS mogelijk correct, maar aangezien de html-tag per definitie nooit een parent element kan hebben, is het gebruik ervan wel degelijk fout

zaterdag 11 juni 2005 @ 22:40:44 #153

SuperRembo

Sinds 1998

Het is echt correcte css. Het enige wat fout is, is dat IE wel elementen denkt te vinden die er aan voldoen.

quote:
In valid HTML and XHMTL documents html is always the root element and body is always a child of the root element, and never a grandchild (or great grandchild). Therefore, the first 3 CSS selectors above should not match any element. Nonetheless, they are valid selectors.

bron (de ontdekker van deze bug)

dinsdag 14 juni 2005 @ 13:43:05 #154

DutchBlood

quote:
Op vrijdag 10 juni 2005 20:50 schreef DutchBlood het volgende:
Ik ben ook weer aan het cssen.
Het gaat om deze site: http://matthijs.info/rmrt/

Ik heb 2 div's naast elkaar. #vakjes en #content, ik krijg alleen de grijze lijn in IE niet weg.

Padding: 0xp;
Opgeven heeft geen nut.

Iemand enig idee hoe ik dit oplos, behalve nog een andere div er achter te maken met dezelfde achtergrond?

Anyone?

dinsdag 14 juni 2005 @ 17:01:44 #155

Leshy

Held met sokken.

quote:
Op zaterdag 11 juni 2005 22:40 schreef SuperRembo het volgende:
Het is echt correcte css.

Zoals ik al zei, syntactisch is het inderdaad correct

donderdag 16 juni 2005 @ 19:54:01 #156

markiemark

FR 1908

hoe maak ik text met css ook al weer met schaduw of anti alias of zo? is daar een reference voor?

Amsterdam, stad van hash en coke,
Waar de vrouwen zich vrouwelijk gedragen..
En de mannen ook..

donderdag 16 juni 2005 @ 20:03:49 #157

SuperRembo

Sinds 1998

quote:
Op donderdag 16 juni 2005 19:54 schreef markiemark het volgende:
hoe maak ik text met css ook al weer met schaduw of anti alias of zo? is daar een reference voor?

Ik denk dat je IE-filters bedoeld. Ik heb nooit zoiets gezien dat cross-browser werkt.

vrijdag 17 juni 2005 @ 01:07:22 #158

curry684

Windowshippie

quote:
Op donderdag 16 juni 2005 19:54 schreef markiemark het volgende:
hoe maak ik text met css ook al weer met schaduw of anti alias of zo? is daar een reference voor?

Antialiasing zit niet in CSS. Shadows zitten in CSS3 geloof ik, en werkt dus nergens. Je kunt met CSS2 of 2.1 selectors overigens shadows goed faken, maar die kent IE weer niet. Shadows zijn sowieso lilluk overigens

Omines.

vrijdag 17 juni 2005 @ 01:08:40 #159

curry684

Windowshippie

Zie overigens A List Apart voor alle bekende methodes om drop shadows te maken.

Omines.

vrijdag 17 juni 2005 @ 12:17:03 #160

wonko

Fap

Misschien is het al gevraagd maar kan ik het niet vinden. Een zeer goed boek of site om met CSS aan de slag te gaan? Basiskennis is aanwezig maar wil het veel verder uitdiepen.

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

vrijdag 17 juni 2005 @ 18:46:48 #161

SqueaK

"Pis nooit tegen de wind

quote:
Op vrijdag 17 juni 2005 12:17 schreef wonko het volgende:
Misschien is het al gevraagd maar kan ik het niet vinden. Een zeer goed boek of site om met CSS aan de slag te gaan? Basiskennis is aanwezig maar wil het veel verder uitdiepen.

ik zelf vind dit wel een fijne site: http://www.bitstorm.org/edwin/cursus/css.html

vrijdag 17 juni 2005 @ 18:48:39 #162

SqueaK

"Pis nooit tegen de wind

ik ben een site op aan het bouwen helemaal uit <div>

alleen wil ik in een bepaalde div een achtergrond image... daarvoor gebruik ik dan in de opmaak dit:

1	background: #0A7CB4 url(images/image.jpg) repeat-x fixed right;

in IE werkt het perfect, maar in FF niet echt.... hoe werkt het zodat in FF ook goed is..

vrijdag 17 juni 2005 @ 19:43:52 #163

SuperRembo

Sinds 1998

quote:
Op vrijdag 17 juni 2005 18:48 schreef SqueaK het volgende:
ik ben een site op aan het bouwen helemaal uit <div>

alleen wil ik in een bepaalde div een achtergrond image... daarvoor gebruik ik dan in de opmaak dit:
[ code verwijderd ]

in IE werkt het perfect, maar in FF niet echt.... hoe werkt het zodat in FF ook goed is..

In IE werkt het niet perfect, want IE kent geen background-position: fixed

Ik denk dat je "fixed" weg moet laten om te krijgen wat je wil.

zaterdag 18 juni 2005 @ 06:24:31 #164

SqueaK

"Pis nooit tegen de wind

quote:
Op vrijdag 17 juni 2005 19:43 schreef SuperRembo het volgende:

[..]

In IE werkt het niet perfect, want IE kent geen background-position: fixed
Ik denk dat je "fixed" weg moet laten om te krijgen wat je wil.

klopt idd...

nu het volgende ... :

ik heb zo 8 pagina's waar ik dit wel hebben, maar dan 8 keer met een verschillende image...

kan ik nu het beste 8 verschillende stylesheets maken waarin ik alleen steeds de naam van de image heb veranderd, of kan ik beter in 1 stylesheet 8 id's aanmaken ?

zaterdag 18 juni 2005 @ 10:13:08 #165

SuperRembo

Sinds 1998

8 verschillende id's. Je wil echt geen 8 verschillende stylesheets onderhouden.

Wat je ook kan doen is de body een id geven.

1
2
3
4
5
6
7
8
9
10
11

#title {
    background-color: #ccf;
    background-repeat: repeat-x;
    background-position: right;
}
#introPage #title {
    background-image: url(img/intro.jpg);
}
#someOtherPage #title {
    background-image: url(img/otherimage.jpg);
}

#introPage en #someOtherPage zijn dan id's van de body op verschillende pagina's. Als je dan nog andere elementen per pagina wil aanpassen dan hoef je geen id's aan te passen.

zaterdag 18 juni 2005 @ 12:02:12 #166

SqueaK

"Pis nooit tegen de wind

quote:
Op zaterdag 18 juni 2005 10:13 schreef SuperRembo het volgende:
8 verschillende id's. Je wil echt geen 8 verschillende stylesheets onderhouden.

Wat je ook kan doen is de body een id geven.
[ code verwijderd ]

#introPage en #someOtherPage zijn dan id's van de body op verschillende pagina's. Als je dan nog andere elementen per pagina wil aanpassen dan hoef je geen id's aan te passen.

hmm dat verneukt heel de layout.... ziet er niet meer uit nu

zondag 19 juni 2005 @ 22:19:58 #167

curry684

Windowshippie

quote:
Op vrijdag 17 juni 2005 18:48 schreef SqueaK het volgende:
ik ben een site op aan het bouwen helemaal uit <div>

Jij hebt het dus niet gesnapt.

HTML met CSS is een manier om semantisch correct gebouwde sites mee te stylen waardoor semantiek en content enerzijds en presentatie en layout anderzijds strak gescheiden blijven. Enkel <div> gebruiken is dus gewoon pointless, en dan heb je het niet gesnapt.

KLIK VOOR VERPLICHT LEESVOER.

Omines.

zondag 19 juni 2005 @ 23:04:37 #168

SuperRembo

Sinds 1998

quote:
Op zaterdag 18 juni 2005 12:02 schreef SqueaK het volgende:

[..]

hmm dat verneukt heel de layout.... ziet er niet meer uit nu

Ik doe niets bijzonders. Als je 't goed toepast dan verneukt het zeker de layout niet.

maandag 20 juni 2005 @ 13:26:32 #169

SqueaK

"Pis nooit tegen de wind

quote:
Op zondag 19 juni 2005 23:04 schreef SuperRembo het volgende:

[..]

Ik doe niets bijzonders. Als je 't goed toepast dan verneukt het zeker de layout niet.

ik heb dit als code:

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

/********************************************* Basis */
body {
   margin-top: 10px;
   background-image: url(images/achtergrond_algemeen.jpg);
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 8.5pt;
   color: white;
   line-height: 16px;
   text-align: center;
}

h1 {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 8.5pt;
   color: white;
   font-weight: bold;
}

a {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 8.5pt;
   text-decoration:none;
   color: #EE9700;
}

a:hover {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 8.5pt;
   text-decoration:underline;
   color: #EE9700;
}

/********************************************* Content */
#container {
   width: 700px;
   text-align: left;
   margin: auto auto 30px auto;
   border: 0px;
   padding: 0px;
}

#kop {
   margin-left: auto;
   position: absolute;
   width: 700px;
   height: 80px;
   background-color: red;
}

#left_blank
{
   margin-left: 0px;
   margin-top: 80px;
   position: absolute;
   width: 10px;
   height: 100%;
}

#left_border
{
   margin-left: 10px;
   margin-top: 80px;
   position: absolute;
   width: 28px;
   height: 100%;
   background: url(images/side_left.jpg);
}

#middle
{
   margin-left: 38px;
   margin-top: 80px;
   position: absolute;
   width: 624px;
   background: #0A7CB4 no-repeat right;
}

.overpartybike #middle {
    background-image: url(images/image_overpartybike.jpg);
    height: 100%;
}

.prijzen #middle {
    background-image: url(images/image_prijzen.jpg);
    height: 100%;
}

#right_border
{
   margin-left: 662px;
   margin-top: 80px;
   position: absolute;
   width: 28px;
   height: 100%;
   background: url(images/side_right.jpg);
}

#right_blank
{
   margin-left: 690px;
   margin-top: 80px;
   position: absolute;
   width: 10px;
   height: 100%;
}

#onder {
   background: url(images/onder.jpg);
   margin-left: 10px;
   margin-top: 480px;
   width:680px;
   height: 22px;
   position: absolute;
}

en dan is dit het resultaat

maandag 20 juni 2005 @ 15:37:40 #170

curry684

Windowshippie

quote:
Op maandag 20 juni 2005 13:26 schreef SqueaK het volgende:
en dan is dit het resultaat

Dude, die <map> moet gewoon een <ul> van <li> elements zijn die je styled in de CSS zodat ze er als een horizontaal grafisch menu uitzien. Je bent nu namelijk alsnog grafische meuk in je HTML aan het zetten, en dan kun je net zo goed geen CSS gebruiken.

Ik zie ook aan je divs nu al dat je table-based gaat layouten maar dan met andere tags....

Omines.

maandag 20 juni 2005 @ 23:57:35 #171

markiemark

FR 1908

ok ik heb twee problemen met mn tabel...

1. centreren.. ik kan mn tabel centreren (met <table align="center">), maar op het moment dat de pagina langer wordt dan in beeld past, komt er een scrollbalk waardoor de pagina een stukje naar links wordt geschoven... hoe voorkom ik dit???

2. max hoogte bepalen... heb mijn site gemaakt op basis van tabellen. nu is de frontpage niet zo heel groot, dus is niet zo groot verticaal gezien. als ik een subpagina oproep, wordt de pagina langer, en wordt dus langer dan het scherm aan kan zonder scrollbalken.. hoe kan ik de site verticaal maximaliseren, maar wel zo dat de site zich aanpast als de site langer is dan de verticale lengte??

Amsterdam, stad van hash en coke,
Waar de vrouwen zich vrouwelijk gedragen..
En de mannen ook..

dinsdag 21 juni 2005 @ 23:07:27 #172

WalfredGeesink

De vrachtwagenchauffeur.

dat centreren lukt mij niet altijd even goed met dat css. div's met een fixed width/height lukt prima maar nu heb ik er 1tje met een width/height die niet bekend is. dit is mijn html code:

1
2
3
4
5

<body>
<div>
<p>blabla</p>
</div>
</body>

de hoeveelheid tekst in p verschilt, dus de hoogte verandert ook steeds. ik wil die div steeds gecentreerd houden.

voor het horizontaal centreren bedacht ik als oplossing text-align: center; (bij body) dat werkt prima maar het verticaal centreren lukt niet. iemand een idee?

walfredgeesink.nl/fm

dinsdag 21 juni 2005 @ 23:29:15 #173

bartjeuh

Is het mogelijk om in de style.css ook de content van een div te veranderen?

Het maken van div's op men site lukt wel maar nu wil ik daar tekst in krijgen dmv een andere file...

1
2
3
4
5
6
7
8
9
10
11

#3 {
   margin-left: 4px;
   margin-top: 0px;
   margin-right: 4px;
   width: 250px;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 10px;
   color: #FFFFFF;
}

<div id="3">content</div>

Ik dacht dus aan dat maar werkt niet

[ Bericht 31% gewijzigd door bartjeuh op 21-06-2005 23:44:58 ]

woensdag 22 juni 2005 @ 09:07:05 #174

DutchBlood

quote:
Op dinsdag 21 juni 2005 23:29 schreef bartjeuh het volgende:

Is het mogelijk om in de style.css ook de content van een div te veranderen?

Het maken van div's op men site lukt wel maar nu wil ik daar tekst in krijgen dmv een andere file...
[ code verwijderd ]

Ik dacht dus aan dat maar werkt niet

Niet dmv (alleen) css.

De enige manier is wellicht de tekst in een achtergrondplaatje stoppen en dat dan via css setten.

woensdag 22 juni 2005 @ 09:08:26 #175

DutchBlood

quote:
Op dinsdag 21 juni 2005 23:07 schreef WalfredGeesink het volgende:
dat centreren lukt mij niet altijd even goed met dat css. div's met een fixed width/height lukt prima maar nu heb ik er 1tje met een width/height die niet bekend is. dit is mijn html code:
[ code verwijderd ]

de hoeveelheid tekst in p verschilt, dus de hoogte verandert ook steeds. ik wil die div steeds gecentreerd houden.

voor het horizontaal centreren bedacht ik als oplossing text-align: center; (bij body) dat werkt prima maar het verticaal centreren lukt niet. iemand een idee?

Geef de div vertical-align: middle; mee.
http://www.w3schools.com/css/pr_pos_vertical-align.asp

woensdag 22 juni 2005 @ 17:42:08 #177

curry684

Windowshippie

quote:
Op dinsdag 21 juni 2005 23:29 schreef bartjeuh het volgende:

Is het mogelijk om in de style.css ook de content van een div te veranderen?

Het maken van div's op men site lukt wel maar nu wil ik daar tekst in krijgen dmv een andere file...
[ code verwijderd ]

Ik dacht dus aan dat maar werkt niet

Wat is er mis met serverside includes, PHP, ASP of een andere scripting taal waarmee men dit altijd oplost?

Het kan overigens met CSS3 wel tot op zekere hoogte.

Omines.

woensdag 22 juni 2005 @ 17:55:00 #178

theDax

Breek los en leef

ik wil graag een EMBED tag van tevoren aangeven in CSS. Maar embed heeft geen ID's.. hoe kan ik dat doen ?
Ik wil namelijk een paar transparant DIV blokken hebben, met in elk een filmpje.

Daxydelict

woensdag 22 juni 2005 @ 18:02:23 #179

theDax

Breek los en leef

ik heb het al :|

Daxydelict

donderdag 23 juni 2005 @ 10:55:33 #180

bartjeuh

quote:
Op woensdag 22 juni 2005 17:42 schreef curry684 het volgende:

[..]

Wat is er mis met serverside includes, PHP, ASP of een andere scripting taal waarmee men dit altijd oplost?

Het kan overigens met CSS3 wel tot op zekere hoogte.

Het probleem is dat ik daar helemaal niks van ken, en een tutorial die net uitlegt wat ik nodig heb vind ik niet

maandag 27 juni 2005 @ 12:50:29 #181

KlappernootatWork

Tot mijn strot in het genot..

mag ik hier even voor de leken een scriptlose oplossing voor transparante png's deponeren?

Maak je .png in fotosjop en importeer die in flash (als je die hebt)
ga in flash naar de publish settings en verander die in windowless transparant.
sla je bestand op als flash image.
ga naar dreamweaver (als je deze ook hebt)
importeer dit flash bestand in dreamweaver.
ga in het properties menu naar de geavanceerde opties en voeg dit toe:
wmode
en in het veld er naast:
transparency

nu kun je in de preview mode zien dat je plaatje goed weergegeven word..

succes!

[ Bericht 2% gewijzigd door KlappernootatWork op 27-06-2005 13:01:35 ]

Shit! werken zuigt...
Op donderdag 22 november 2007 @ 12:42 schreef Neelis het volgende: Rabbelneuteaantwaark ?

maandag 27 juni 2005 @ 13:33:49 #182

sop

ahum

Transparante PNG's zijn ook niet echt het probleem. Het gebruik van PNG's met een alpha blend (een beetje transparant) gaan fout, daar helpt deze (overigens nogal bewerkelijke) manier niet bij.

maandag 27 juni 2005 @ 13:36:06 #183

DionysuZ

Respect my authority!

De enige die problemen heeft met alpha blend bij png is toch IE?

□ 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 27 juni 2005 @ 14:04:06 #184

Leshy

Held met sokken.

quote:
Op maandag 27 juni 2005 13:36 schreef DionysuZ het volgende:
De enige die problemen heeft met alpha blend bij png is toch IE?

Yup.

maandag 27 juni 2005 @ 14:29:39 #185

KlappernootatWork

Tot mijn strot in het genot..

quote:
Op maandag 27 juni 2005 13:33 schreef sop het volgende:
Transparante PNG's zijn ook niet echt het probleem. Het gebruik van PNG's met een alpha blend (een beetje transparant) gaan fout, daar helpt deze (overigens nogal bewerkelijke) manier niet bij.

je bedoeld een kleurenschaduw of een doorlatend stuk glas? ook hier lukt het bij

Shit! werken zuigt...
Op donderdag 22 november 2007 @ 12:42 schreef Neelis het volgende: Rabbelneuteaantwaark ?

maandag 27 juni 2005 @ 14:30:51 #186

KlappernootatWork

Tot mijn strot in het genot..

quote:
Op maandag 27 juni 2005 14:04 schreef Leshy het volgende:

[..]

Yup.

IE is altijd al zijn tijd vooruit geweest...

Shit! werken zuigt...
Op donderdag 22 november 2007 @ 12:42 schreef Neelis het volgende: Rabbelneuteaantwaark ?

maandag 27 juni 2005 @ 14:50:46 #187

DionysuZ

Respect my authority!

ik heb het opgelost als volgt (CSS). Dit is de code waar het om draait:

1 2	<div id="chapter_background"> </div>

met in mijn css file:

1
2
3
4
5
6
7
8

#chapter_background {
  background: transparent url(../px/alpha.png) 0% 0% repeat;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 494px;
  height: 447px;
}

vervolgens heb ik in de head van mijn pagina nog het volgende neergepleurd:

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

maandag 27 juni 2005 @ 17:36:02 #188

DionysuZ

Respect my authority!

is er een manier om <div>s met css overflow: hidden (of overflow: auto) scrollable te maken met de scrollwheel? er zijn veel mensen die zich irriteren aan het niet scrollbaar zijn van die divs met de scrollwheel :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

maandag 27 juni 2005 @ 17:42:54 #189

sop

ahum

quote:
Op maandag 27 juni 2005 17:36 schreef DionysuZ het volgende:
is er een manier om <div>s met css overflow: hidden (of overflow: auto) scrollable te maken met de scrollwheel? er zijn veel mensen die zich irriteren aan het niet scrollbaar zijn van die divs met de scrollwheel :S

Dat was toch een FF bug?

maandag 27 juni 2005 @ 17:50:22 #190

DionysuZ

Respect my authority!

jah inderdaad. Maar is er geen manier (desnoods met javascript) om een div met overflow: hidden scrollable te maken. Dat werkt ook niet in IE nl.

□ 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 27 juni 2005 @ 20:11:31 #191

AnGabhar

quote:
Op maandag 27 juni 2005 17:50 schreef DionysuZ het volgende:
jah inderdaad. Maar is er geen manier (desnoods met javascript) om een div met overflow: hidden scrollable te maken. Dat werkt ook niet in IE nl.

"Overflow: hidden" mag geen schuifmogelijkheid hebben; dat is nu eenmaal wat het betekent. Divs met een andere overflow-waarde die voor een schuifbalk zorgt zijn vzviw in de recentste versies van alle browsers met het wieltje rolbaar.

maandag 27 juni 2005 @ 21:27:42 #192

sop

ahum

quote:
Op maandag 27 juni 2005 20:11 schreef AnGabhar het volgende:

[..]

"Overflow: hidden" mag geen schuifmogelijkheid hebben; dat is nu eenmaal wat het betekent. Divs met een andere overflow-waarde die voor een schuifbalk zorgt zijn vzviw in de recentste versies van alle browsers met het wieltje rolbaar.

Die mag wel schuifmogelijkheid hebben, alleen geen scrollbars.

maandag 27 juni 2005 @ 23:02:23 #193

AnGabhar

quote:
Op maandag 27 juni 2005 21:27 schreef sop het volgende:
Die mag wel schuifmogelijkheid hebben, alleen geen scrollbars.

De css-specificatie meldt "no scrolling user interface should be provided to view the content outside the clipping region". Strict genomen hangt het van je definitie van 'user interface' af of er naast schuifbalken nog andere oplossingen mogelijk zijn, maar naar mijn mening behoort iedere mogelijkheid tot interactie met het programma - muis- en toetsenbordbediening, menu's en contextmenu's, weergave van opties op het scherm - tot de gebruikersinterface. Ik zie hier dus geen oplossing voor.

Iets anders dan schuifbalken om inhoud te verschuiven moet je trouwens niet eens willen. Het is uitermate on-standaard en leidt tot verwarring.

donderdag 30 juni 2005 @ 14:46:13 #194

DionysuZ

Respect my authority!

ik heb het gedeeltelijk opgelost. Met de onmousewheel event geplakt aan wat javascript. Het is Internet Explorer specifiek, dus de scrollwheel gebruiken in andere browsers lukt nog niet, daar moeten ze maar de andere scrollmogelijkheid gebruiken

. Een beetje oplossing is beter dan geen oplossing.

□ 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 7 juli 2005 @ 13:26:29 #195

Leonoor

Unter 32-16-8...

Ik heb problemen met het instellen van de lengte van mn body/bottom-margin.

In FireFox krijg ik wel de body over het gehele scherm, maar maakt hij geen bottom-margin.
I.E. maakt wel een mooie bottom-margin, maar die maakt hem ook gerust ergens midden in het scherm, als mn content niet het hele scherm beslaat. Ik wil dus gewoon dat de body helemaal doorloopt tot onderaan het scherm, hoe weinig content ik ook heb, en onderaan een bottom-margin.

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

body
{
   font-family:Verdana, Arial, Helvetica, sans-serif;
   font-size: 11px;
   color: #000000;
   margin: 16px 0px 16px 0px;
   text-align: center;
   background-image: url(images/achtergrond2.jpg);
}
div#main
{
   width: 700px;
   background-color=#FFFFFF;
   align : center;
   height : 100%;
}

div#body
{
        width: 100%;
   background-image: url(images/body.jpg);
        background-repeat: repeat-y;
        text-align: center;
   padding-top: 10px;
   min-height : 100%;
}

Iemand enig idee?

Nulla verba sed acta

donderdag 7 juli 2005 @ 21:39:57 #196

SHeqel

quote:
Op donderdag 7 juli 2005 13:26 schreef Leonoor het volgende:
Ik heb problemen met het instellen van de lengte van mn body/bottom-margin.

In FireFox krijg ik wel de body over het gehele scherm, maar maakt hij geen bottom-margin.
I.E. maakt wel een mooie bottom-margin, maar die maakt hem ook gerust ergens midden in het scherm, als mn content niet het hele scherm beslaat. Ik wil dus gewoon dat de body helemaal doorloopt tot onderaan het scherm, hoe weinig content ik ook heb, en onderaan een bottom-margin.

CSS:
[ code verwijderd ]

Iemand enig idee?

probeer iig

html, body {
height: 100%;
}

Minitokyo

vrijdag 15 juli 2005 @ 21:55:02 #197

Lkw

²³³³²³²³²³²³²³²³²²³²²

Ik heb een div #container gemaakt, die ongeacht de resolutie van een bezoeker in het midden van de pagina staat. Daarnaast een stuk of 6 andere div's die binnen deze 'container' vallen. Die verhuizen dus ook braaf mee en blijven in positie als de bezoeker z'n resolutie aanpast.

Tot zover alles mooi en aardig. Maar nu het probleem:

Ik krijg dit alleen voor elkaar als die andere div's een relative position hebben. Maar.... dan willen ze niet overlappen. En dat wil ik wel!

Weet iemand in CSS een oplossing voor de gebruikte constructie waarbij dus alles goed positioneerd blijft ongeacht de resolutie, maar waarbij toch overlap mogelijk tussen de verschillende div's???

Dank alvast!

Stop the world, I want to get out.

vrijdag 15 juli 2005 @ 22:08:07 #198

Lkw

²³³³²³²³²³²³²³²³²²³²²

Ik had me gek gegoogled naar de oplossing, en net nu ik bovenstaand bericht had ingetypt, dook op een ander forum het antwoord op

-> de 'container' krijgt als position de waarde 'relative' en de andere div's 'absolute'. Dit 'absolute' geldt dan niet tov het browser-window, maar ten opzichte van de 'container'.

En ja, ik had verzuimd om de container sowieso een position-waarde mee te geven

Opgelost dus

Stop the world, I want to get out.

vrijdag 15 juli 2005 @ 23:45:48 #199

Lkw

²³³³²³²³²³²³²³²³²²³²²

Voor degenen die met hetzelfde worstelen als ik, dit werkt prima in zowel Opera, FF als IE (centreert alleen horizontaal):

#container
{
top: 0;
position: absolute;
width: 773px;
margin-left: -386px;
left: 50%;
}

Andere 'inpandige' elementen krijgen dan overigens ook position 'absolute'.

PS Sorry voor deze 3 posts achter elkaar, maar ik had er even genoeg van en was erg toe aan hulp

[ Bericht 67% gewijzigd door Lkw op 16-07-2005 02:20:39 ]

Stop the world, I want to get out.

woensdag 20 juli 2005 @ 15:50:29 #200

Chandler

Omdat ik het topic niet kon vinden via google en fok.

weet iemand wat hier fout gaat!

Ik maak buttons voor bovenin (zie plaatje) alleen deze hebben een vaste breedte ennuh dat komt niet door in de layout? why?

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
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>vertically and horizontally centred</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style type="text/css">
body
{
  margin: 0;
  background-position: 0% 0%;
  scrollbar-face-color: white;
  background-attachment: fixed;
  scrollbar-highlight-color: white;
  scrollbar-shadow-color: #cccccc;
  scrollbar-arrow-color: #99cc99;
  scrollbar-track-color: white;
  scrollbar-darkshadow-color: white;
  scrollbar-base-color: #cccccc;
  scrollbar-3d-light-color: white;
  font-family: verdana;
  font-size: 8pt;

}

#center
{
  position: absolute;
  top: 5px; /* for IE-mac */
  left: 0;
}

/* Hide from IE-mac */
#center
{
  top: 50%;
  width: 100%;
  margin-top: -200px;
  text-align: center;
  min-width: 800px;
}
/* End hide from IE-mac */

#main
{
  width: 800px;
  height: 400px;
  margin: 0 auto;
  text-align: left;
  border: 1px solid black;
}

#top
{
  width: 100%;
  height: 50px;
}

#middle
{
  height: 350px;
  text-align: left;
  margin: 5px;
}

#middlecontainer
{
  height: 340px;
  width: 100%;
}

#left
{
  float: left;
  height: 100%;
  width: 383px;
  padding-left: 10px;
  overflow: auto;
  border: 1px solid #cccccc;
}

#right
{
  float: right;
  margin-left: 5px;
  height: 340px;
  width: 390px;
}

#righttop
{
  height: 95%;
}

#rightbottom
{
  height: 5%;
  text-align: left;
}

.button
{
  z-index: 9;
  width: 100px;
  margin: 5px;
  height: 25px;
  padding: 5px;
  color: green;
  background-color: A0C6F0;
  text-align: center;
  border: 1px solid red;
  underline: none;
  display: inline;
}
</style>
</head>

<body>
  <div id="center">
    <div id="main">
      <div id="top">
        <div class="button">1test</div>
        <div class="button">test</div>
        <div class="button">test</div>
        <div class="button">test</div>
        <div class="button">test</div>
        <div class="button">test</div>
        <div class="button">test</div>
        <div class="button">test</div>
        <div class="button">test</div>
        <div class="button">test</div>
        <div class="button">test</div>
        <div class="button">test1</div>
      </div>
      <div id="middle">
        <div id="middlecontainer">
          <div id="left"
><br /><br /><br /><strong>Left</strong><br /><br />Left<br />Left
<br />Left<br />Left<br />Left<br />Left<br />Left<br />Left<br />Left<br />Left
<br />Left<br />Left<br />Left<br />Left<br />Left<br />Left<br />Left<br />Left
<br />Left<br />Left<br />Left<br />Left<br />Left<br />Left<br />Left<br />Left
<br />Left<br />Left<br />Left<br />Left<br />Left<br />Left<br /></div>
            <div id="right">
               <div id="righttop">Top</div>
               <div id="rightbottom">Bottom</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

Meer foutjes gezien?! vertel ze graag!

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

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

[CSS] voor dummies - Deel 2

» digital corner

» digital corner