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

maandag 25 juli 2005 @ 20:45:09 #211

MrDoegewoon

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

<div id="header">
   blabla.nl
  </div>
  <div id="tussen">
   <a href="./index.php">Home</a> <> <a href="./webhosting/index.php">Webhosting</a> <> link 3
   </div>

/* CSS Document */

body {
background-color:#FFFFFF;
}

#header {
background-color:#EEEEEE;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:36px;
border-width:1;
border-color:#000000;
border-style:dotted;
}

#tussen {
width:100%;
margin-top:5px;
padding:0px 0px 0px 10px;
background-color:#EEEEEE;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
border-width:1;
border-color:#000000;
border-style:solid;
}

Ik heb nu dit, ik wil dat de links van links iets meer weg staan maar nu wordt #tussen groter dan header terwijl ze beide op 75% staan. Wat doe ik fout

Is er trouwens een goede liefst Nederlandse website met tutorial hoe je een website opbouwt in css

West Ham supporters, check: Dutchirons
Dutch Football Manager Site!
Determined to deliver, destined to dominate. - The Third Movement

maandag 25 juli 2005 @ 21:03:50 #212

SuperRembo

Sinds 1998

Wat bedoel je met "iets meer weg staan" en wat staat op 75%? (ik zie nergenes 75%)

Vervang <> door <>, anders is je html niet geldig.
Het lijkt me handiger om de font-family bij de body te zetten, dan hoef je dat niet overal te herhalen.

maandag 25 juli 2005 @ 21:07:22 #213

MrDoegewoon

quote:
Op maandag 25 juli 2005 21:03 schreef SuperRembo het volgende:
Wat bedoel je met "iets meer weg staan" en wat staat op 75%? (ik zie nergenes 75%)

Vervang <> door <>, anders is je html niet geldig.
Het lijkt me handiger om de font-family bij de body te zetten, dan hoef je dat niet overal te herhalen.

Ik bedoel breder en width

voorbeeld:
http://www.dutchfootballmanagersite.nl/jmsystems/

css file:
http://www.dutchfootballm(...)ms/css/standaard.css

Ik wil nu toch eens CSS beter gaan leren ipv steeds met tabellen werken

West Ham supporters, check: Dutchirons
Dutch Football Manager Site!
Determined to deliver, destined to dominate. - The Third Movement

maandag 25 juli 2005 @ 21:34:03 #214

SuperRembo

Sinds 1998

Gooi je html eens door een HTML Validator en je css door een CSS Validator.

Html en css die niet volgens de regels zijn opgesteld kunnen voor onvoorspelbare resultaten leiden. Dat maakt het zoeken naar fouten in je layout erg lastig.

Validators zijn niet heilig, maar wel een goede hulp.

maandag 25 juli 2005 @ 21:51:17 #215

MrDoegewoon

Hmmz heb ze er door heen gehaald en was bij de html idd de charset vergeten en bij de css een maat vergeten op te geven bij border-width:1; maar het probleem blijft...

West Ham supporters, check: Dutchirons
Dutch Football Manager Site!
Determined to deliver, destined to dominate. - The Third Movement

maandag 25 juli 2005 @ 22:05:25 #216

SuperRembo

Sinds 1998

Het verschil zit in de padding-left van #tussen.

maandag 25 juli 2005 @ 22:08:44 #217

MrDoegewoon

quote:
Op maandag 25 juli 2005 22:05 schreef SuperRembo het volgende:
Het verschil zit in de padding-left van #tussen.

Hmmz ik wil dus dat de tekst vanaf links iets naar binnen gaat (die 5px) maar dat houd in dat er rechts 5px bijkomt dus??

Sorry ben nog maar net bezig met CSS

West Ham supporters, check: Dutchirons
Dutch Football Manager Site!
Determined to deliver, destined to dominate. - The Third Movement

maandag 25 juli 2005 @ 22:36:19 #218

SuperRembo

Sinds 1998

Ja.

Je kan het oplossen door om beide divs een div te zetten met width:75%. #header en #tussen geef je geen width.

Je kan het ook oplossen door er voor te zorgen dat er tussen de div#tussen en de links een extra container zit. Dat kan een div of een p zijn, maar ook een list (ul). Op die container kan je dan die extra paddin zetten.

maandag 25 juli 2005 @ 22:41:04 #219

MrDoegewoon

Jij ruled

thnx

West Ham supporters, check: Dutchirons
Dutch Football Manager Site!
Determined to deliver, destined to dominate. - The Third Movement

donderdag 28 juli 2005 @ 17:54:23 #220

MrDoegewoon

Nu heb ik het volgende probleem:

Ik wil een header maken, daaronder een tussenbalkje en daaronder de content en daaronder weer een footer met copyright meuk.

Nu lukt de header en het tussenbalkje maar bij de content gaat het fout, er moeten daar twee gedeeltes naast elkaar komen een met een soort van menu en de andere met de tekst enzo, nu heb ik ze via een tutorial naast elkaar gekregen (float:left;) maar vallen ze uit de box die ik eromheen gemaakt hebt terwijl dit bij de header en de tussen wel goed gaat de box daarom heen wordt gewoon wel vergroot.

Zie het voorbeeld hier
CSS file hier: hier

Edit:
De gedeelte waarin de tekst moet komen is nu ook onder de menu box komen te staan (wel er naast maar niet dezelfde hoogte

)

West Ham supporters, check: Dutchirons
Dutch Football Manager Site!
Determined to deliver, destined to dominate. - The Third Movement

donderdag 28 juli 2005 @ 18:51:53 #221

SuperRembo

Sinds 1998

Je moet de floats "clearen" om ze binnen de box te houden. Daarvoor heb je een (leeg) element nodig na de floats;

1
2
3
4
5

   <div id="content">
      Lorem ipsum dolor sit amet...
   </div>
    <div class="clear"></div>
</div>

css:

1
2
3

.clear {
clear: both;
}

Verder kan je beter de float en width weglaten voor #content.

donderdag 28 juli 2005 @ 20:52:31 #222

MrDoegewoon

Thnx staat nu goed, heb je toevallig een website of een boek dat je kan aanraden over het opmaken van een website met CSS (dus zonder tabellen enzo)

West Ham supporters, check: Dutchirons
Dutch Football Manager Site!
Determined to deliver, destined to dominate. - The Third Movement

donderdag 28 juli 2005 @ 21:56:15 #223

SuperRembo

Sinds 1998

De referenties
http://www.w3.org/TR/CSS21/ W3C CSS
http://www.w3.org/TR/html401/ W3C HTML
http://www.mozilla.org/docs/dom/domref/ Gecko DOM Reference
http://msdn.microsoft.com(...)ce/css_ref_entry.asp MSDN CSS Reference

http://home.parse.nl/~michiel/semantiek.html Semantiek - Waarom zou je?
http://www.w3schools.com/ heeft wel handige basic tutorials
http://www.alistapart.com/ allerlei artikelen over css
http://www.quirksmode.org/ een site met veel info over bugs en eigenaardigheden van verschillende browsers.
http://www.glish.com/css/ een aantal css layouts

maandag 1 augustus 2005 @ 21:51:04 #224

MrDoegewoon

Thnx

.

Ben nu bezig om m'n eigen website van tabellen over te knallen naar CSS en lukt goed. Werkt trouwens echt veel beter dan tabellen dat CSS

West Ham supporters, check: Dutchirons
Dutch Football Manager Site!
Determined to deliver, destined to dominate. - The Third Movement

dinsdag 2 augustus 2005 @ 17:51:46 #225

MrDoegewoon

Hmmz ik heb nu het volgende probleem, een groot gedeelte van de lay-out van m'n site is overgezet naar CSS. Maar nu gaat in Firefox de Footer direct tegen de content aan staan (terwijl er een margin-top van 10px; is ingesteld). Zet ik een border (niet hidden of none) om de content heen doe gaat ie er wel 10px vanaf, in IE werkt het wel goed overigens:

De CSS:
http://www.dutchfootballmanagersite.nl/temp/css.txt

En de HTML
http://www.dutchfootballmanagersite.nl/temp/html.txt

West Ham supporters, check: Dutchirons
Dutch Football Manager Site!
Determined to deliver, destined to dominate. - The Third Movement

dinsdag 2 augustus 2005 @ 22:40:31 #226

SuperRembo

Sinds 1998

Je kan bijvoorbeeld de clear div een hoogte van 1px geven.

Lees trowens ook het stuk Semantiek - Waarom zou je?, een goede css layout is veel meer dan een verzameling divjes.
De <center> hoort er eigenlijk ook niet in te staan.

donderdag 4 augustus 2005 @ 00:37:00 #227

The_Cyberspace

Ook ik zit met een probleem.

Heb een simpel voorbeeld gemaakt, de site die het probleem heeft is makkelijk aan te passen als ik de fout gevonden heb. Het gaat me nu alleen puur om de lay-out.

Hier de htm file: http://www.freriks6.demon.nl/layout/main.htm

Hier de css file: http://www.freriks6.demon.nl/layout/layout.css

Open de htm file nu eens in Internet Explorer en in FireFox.. In IE word hij weergegeven zoals het moet en FF "vergeet" de onderste balk.

Ik heb al verschillende dingen geprobeerd maar ik kan de fout echt niet vinden. Ik weet wel dat FireFox net ff iets anders omgaat met htm files dan IE

Wie ziet de fout?

donderdag 4 augustus 2005 @ 07:40:50 #228

SuperRembo

Sinds 1998

Je moet je floats "clearen". Zie bijv Clearing floats. Een paar post naar boven staat er ook wat over.

donderdag 4 augustus 2005 @ 13:13:56 #229

The_Cyberspace

Prolbleem is al opgelost door ergens nog een float: left; te plaatsen... maar bedankt voor het meedenken

donderdag 4 augustus 2005 @ 20:27:56 #230

The_Cyberspace

Gmbrl, nu zit ik met een ander probleem

Heb de site even aangepast daarvoor:

Htm file

CSS file

Ik heb even als test 1 vlak helemaal vol gepropt met tekst en nu komt het. In Internet Explorer kan ik scrollen en "springt" de tekst aan de bovenkant, zijkanten en onderkant netjes in door een margin van 15px. Maar in FireFox "vergeet" hij de onderkant en kan ik ook niet scrollen. Wat ik trouwens ook raar vind is dat het voorbeeld bij een ander wel scrolt in FireFox en bij mij nie

En ook bij hem laat FireFox te tekst niet netjes "inspringen" door die margin van 15px.

Ik las op diverse sites trouwens dat FF geen kleur toepast op een scrollbar wat IE dan weer wel doet. (ik weet dat dit officieel niet als CSS word goedgekeurd)
Is dit ook te verhelpen of moet ik het in FireFox doen met die grijze saaie kleur?

donderdag 4 augustus 2005 @ 21:31:36 #231

SuperRembo

Sinds 1998

Dat het scroolen met 't scrollwieltje niet werkt is een (irritante) bug in Firefox.

De layout vind ik maar niks eerlijk gezegd. Het werkt klote op lagere resoluties en ziet er niet uit op hoge resoluties. Het is ook een verzameling divjes zonder logica (zie http://home.parse.nl/~michiel/semantiek.html).

Onder XP met de XP layout werken de css-kleuren op de scollbar ook niet als ik 't goed heb.

vrijdag 5 augustus 2005 @ 00:48:31 #232

The_Cyberspace

quote:
Op donderdag 4 augustus 2005 21:31 schreef SuperRembo het volgende:
Het is ook een verzameling divjes zonder logica (zie http://home.parse.nl/~michiel/semantiek.html).

Wat is dan wel de juiste manier? Ik kan op die site niet echt een duideljik voorbeeld vinden dat de manier die ik gebruik fout zou zijn?

Of ik met verkeerd gekeken hebben...

vrijdag 12 augustus 2005 @ 20:39:29 #233

Flying

Net ff mijn css-file door de validator gesleurt.. err
http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.substruction.com%2Fcss.css&warning=no&profile=css2&usermedium=all
Iemand enige hulp/tips? CSS heb ik nog niet onder de knie.

vrijdag 12 augustus 2005 @ 20:54:14 #234

SuperRembo

Sinds 1998

Je gebruikt properties die niet bestaan. Als je een lengte of hoogte op geeft, dan hoort er een eenheid bij, dus bijv. 601px in plaats van 601. Alleen als de lengte 0 is dan mag je de eenheid weglaten.

zondag 14 augustus 2005 @ 15:31:07 #235

Brilaap

Snel verveeld

*Snel tvp neerzet*

woensdag 17 augustus 2005 @ 15:32:58 #236

Stephan4kant

http://www2.flashywebtools.nl/

Waarschijnlijk hoef ik al niet meer te vertellen

Ik wil de drie divjes naast elkaar hebben (150px-450px-150px). Ik heb al wat geprobeerd met floats en clears, maar ik krijg het niet voor elkaar. Iemand een idee?

"We hebben nooit domme dingen gedaan van onze uitkering, en waren nooit te beroerd om er wat bij te verdienen" (F. Jacobse)

woensdag 17 augustus 2005 @ 15:50:18 #237

Rolie

float: left voor sidebar1 en float: right voor sidebar2 zou het toch moeten doen hoor. Mits je natuurlijk die grote margin's weghaalt. En nergens clearen.

woensdag 17 augustus 2005 @ 21:30:00 #238

Brilaap

Snel verveeld

Weet iemand een goede, gratis (x)html/css editor?

woensdag 17 augustus 2005 @ 22:41:58 #239

DionysuZ

Respect my authority!

notepad?

□ 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 17 augustus 2005 @ 23:05:33 #240

SuperRembo

Sinds 1998

quote:
Op woensdag 17 augustus 2005 21:30 schreef Brilaap het volgende:
Weet iemand een goede, gratis (x)html/css editor?

TopStyle, de lite versie is gratis.

woensdag 17 augustus 2005 @ 23:06:46 #241

Brilaap

Snel verveeld

quote:
Op woensdag 17 augustus 2005 22:41 schreef DionysuZ het volgende:
notepad?

Voorspelbare kutnewbie

.

woensdag 17 augustus 2005 @ 23:07:35 #242

Brilaap

Snel verveeld

quote:
Op woensdag 17 augustus 2005 23:05 schreef SuperRembo het volgende:

[..]

TopStyle, de lite versie is gratis.

Ik zal hem gaan proberen. Dank

.

donderdag 18 augustus 2005 @ 00:46:15 #243

DionysuZ

Respect my authority!

quote:
Op woensdag 17 augustus 2005 23:06 schreef Brilaap het volgende:

[..]

Voorspelbare kutnewbie .

que? newbie?

□ 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 18 augustus 2005 @ 10:44:12 #244

Brilaap

Snel verveeld

Topstyle werkt handig. Thnx voor de top

.

maandag 22 augustus 2005 @ 14:12:27 #245

Brilaap

Snel verveeld

Even het volgende, ik wil een background-image hebben. Het is een klein .gifje, etc we kennen het vast allemaal maar. Nu ben ik bezig met die stylesheet en ik was even benieuwd hoe die url er uit moet zien? Ik heb in mijn puplic_html een map genaamd image. Bestaandsnaam van .gifje is page-bg.gif. Hier mijn stylesheet:

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

body {
   background-color: #95b7cd;
   color: #666666;
   font-family: Verdana, Helvetica, Ariel, sans-serif;
   font-size: 1em;
   background-image: image/page-bg.gif;
}
h1 {
font-size: 1.2em;
}
h2{
font-size: 1.1em;
}
p{
font-size: .8em
}

Check in body de bacground-image tag. Dit werkt dus niet. Iemand een idee? Alvast bedankt! Als ik het antwoord weer kan ik weer verder met mijn tutorial

.

maandag 22 augustus 2005 @ 14:17:28 #246

Leshy

Held met sokken.

1	background-image: url('image/page-bg.gif');

maandag 22 augustus 2005 @ 14:34:30 #247

Brilaap

Snel verveeld

quote:
Op maandag 22 augustus 2005 14:17 schreef Leshy het volgende:

[ code verwijderd ]

Ik heb nu:

1	background-image: url(http://fatguyslim.nl/image/page-bg.gif);

Dat was hem! Even wat google en zo en ik kan weer verder

. Dank je wel Leshy voor je post

.

dinsdag 23 augustus 2005 @ 12:52:16 #248

Brilaap

Snel verveeld

Ik loop weer ergens tegenaan. Maar ja alles wat je moet leren komt niet zo maar vanzelf. Hier de 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

/*This stylesheet is only for CSS the tutorial*/

body {
   background-color: #95b7cd;
   color: #666666;
   font-family: Verdana, Helvetica, Ariel, sans-serif;
   font-size: 1em;
   background-image: url(http://fatguyslim.nl/image/page-bg.gif);
   margin: 0;
}
h1 {
   font-size: 1.2em;
   text-align: right;
   font-style: italic;
   letter-spacing: 5px;
}
h2 {
   font-size: 1.1em;
   text-decoration: underline;
}
p {
   font-size: .8em;
   text-align: justify;
   line-height: 1.7em;
}
p.footer {
   font-size: .5em;
   text-align: center;
}
a:link {
   color: #666666;
   background-color: #95b7cd;
   text-decoration: none;
}
a:visited {
   color: #666666;
   background-color: #95b7cd;
   text-decoration: none;
}
a:hover {
   background-color: #aaddee;
}
a:active {
   background-color: #3cc7f0;
}
#header {
   background-color: #ffffff;
   border-bottom: 1px #000000 solid;
}
#content {
}
#navbar {
}
#main-text {
}

Het gaat om regel 46 tm 48. Als ik regel 48 er niet neerschrijf is er niks aan de hand. Ik heb dan een header, background wit. Zodra regel 48 er komt te staan is er geen witte background meer en ik zie nergens een zwarte border-botttom. Hoe kan dit? Wat doe ik pcies fout? Als jullie meer info nodig hebben hoor ik het graag

. Alvast bedankt voor de hulp ennn goed topic dit

.

[ Bericht 0% gewijzigd door Brilaap op 23-08-2005 12:59:01 (Regel 47 gefixt.) ]

dinsdag 23 augustus 2005 @ 12:53:41 #249

Light

Er mist een puntkomma aan het eind van regel 47.

fokstok.nl

dinsdag 23 augustus 2005 @ 12:54:47 #250

Brilaap

Snel verveeld

Neee dat was het dus wel he?! Fuck ik ben er voor mezelf nog wel scherp op!!! Ff proberen...

dinsdag 23 augustus 2005 @ 12:55:55 #251

Brilaap

Snel verveeld

Ja dat is het idd

, dank je wel Light voor je licht

. Ik zal waarschijnlijk vandaag nog wel vaker terugkomen, er zijn een aantal dingen die het niet helemaal doen zoals ik het wil.

dinsdag 23 augustus 2005 @ 12:58:24 #252

Brilaap

Snel verveeld

Dit bijv: 'Give content a position of relative.' Zelfde sheet die hierboven staat. Hoe bedoelen ze dit en hoe doe je dat?

dinsdag 23 augustus 2005 @ 13:06:07 #253

Light

quote:
Op dinsdag 23 augustus 2005 12:54 schreef Brilaap het volgende:
Neee dat was het dus wel he?! Fuck ik ben er voor mezelf nog wel scherp op!!! Ff proberen...

Er zijn ook online CSS validators, zoals deze van w3.

fokstok.nl

dinsdag 23 augustus 2005 @ 13:12:06 #254

Brilaap

Snel verveeld

quote:
Op dinsdag 23 augustus 2005 13:06 schreef Light het volgende:

[..]

Er zijn ook online CSS validators, zoals deze van w3.

Ja klopt ik hem. Ik gebruik hem eigenlijk alleen als ik helemaal klaar ben, maar het is een goed idee om dat ook tussendoor te gebruiken.

dinsdag 23 augustus 2005 @ 22:12:53 #255

SuperRembo

Sinds 1998

quote:
Op dinsdag 23 augustus 2005 13:12 schreef Brilaap het volgende:

[..]

Ja klopt ik hem. Ik gebruik hem eigenlijk alleen als ik helemaal klaar ben, maar het is een goed idee om dat ook tussendoor te gebruiken.

Dat zijn eigenlijk dingen waar je naar zou moeten kijken voordat je je probleem hier post. Is mijn HTML en CSS wel valide? Het kan wel eens zijn dat je dingen doet waar de validator over klaagt, maar dan moet je wel weten waarom (bijvoorbeeld een CSS hack).

dinsdag 23 augustus 2005 @ 22:56:53 #256

Brilaap

Snel verveeld

quote:
Op dinsdag 23 augustus 2005 22:12 schreef SuperRembo het volgende:

[..]

Dat zijn eigenlijk dingen waar je naar zou moeten kijken voordat je je probleem hier post. Is mijn HTML en CSS wel valide? Het kan wel eens zijn dat je dingen doet waar de validator over klaagt, maar dan moet je wel weten waarom (bijvoorbeeld een CSS hack).

True. Goed punt ook, ik zal er even op letten

.

donderdag 25 augustus 2005 @ 15:04:26 #257

ikke_ook

1
2
3
4
5

<ul>
   <li style="float:left;width:100px;">hier een stukje tekst</li>
   <li style="float:left;width:100px;">hier heel veel tekst dat breder wordt dan 100 pixels</li>
   <li style="width:100px;">tekst3</li>
</ul>

Hoe krijg ik het voor elkaar dat het middelste stukje tekst niet over tekst3 heen gaat maar gewoon netjes op een nieuwe regel verder gaat?

Vogelaars.nl

donderdag 25 augustus 2005 @ 15:29:00 #258

Roonaan

Strictly

Je moet hem display:block geven,

donderdag 25 augustus 2005 @ 15:39:25 #259

ikke_ook

quote:
Op donderdag 25 augustus 2005 15:29 schreef Roönaän het volgende:
Je moet hem display:block geven,

Dankje, dat werkt, en dan doe ik daaronder

1	<div style="clear:both;"></div>

Omdat anders de lijst eronder links naast die ander gaat floaten..
Is dat de beste oplossing met die <div> of kan dat beter?

Vogelaars.nl

donderdag 25 augustus 2005 @ 17:07:43 #260

Roonaan

Strictly

je kan toch gewoon het eerstvolgende element pakken?

donderdag 25 augustus 2005 @ 17:23:10 #261

Minos111

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<title>Clearing floats using ‘overflow’ - 003</title>
<style type="text/css">
div#sidebar{
  float:left;
  width:20em
}
div#content{
  _height:1%;
  overflow:auto;
  background:lime
}
</style>
<div id="content">
<div id="sidebar">
  tekst in een floating div, met een container div erachter die een kleurtje heeft. </div>
</div>

dinsdag 30 augustus 2005 @ 17:38:43 #262

ikke_ook

Ik wil dat mijn lijst minder ver inspringt. Dus ik heb :

1
2
3
4
5
6

.categorylist {
padding-left:15px;
}
<ul class="categorylist">
<li>Testje</li>
</ul>

Maar het lijkt er op dat IE zich hier te goed voor voelt, het werkt daar niet dus.
Gebruik ik iets verkeerd of is er een hack voor?

-edit-

Opgelost, in IE is het blijkbaar margin-left, terwijl het in FF padding-left moet zijn...

[ Bericht 5% gewijzigd door ikke_ook op 30-08-2005 17:44:05 ]

Vogelaars.nl

zaterdag 10 september 2005 @ 17:36:18 #263

onderjas

Eigenlijk een trui

quote:
Op zaterdag 10 september 2005 16:35 schreef onderjas het volgende:
Ik wil een half doorzichtige tabel maken, hoe doe ik dat?

En heeft iemand een tutorial voor van die ronde randen de plaatsen om een tabel.

zaterdag 10 september 2005 @ 17:42:18 #264

SuperRembo

Sinds 1998

Transparantie:

1
2
3
4
5

.transparent {
    opacity: 0.5;
    -moz-opacity: 0.5;
    filter: alpha(opacity=50);
}

Ronde hoeken:
http://www.alistapart.com/articles/customcorners

zaterdag 10 september 2005 @ 22:33:00 #265

onderjas

Eigenlijk een trui

quote:
Op zaterdag 10 september 2005 17:42 schreef SuperRembo het volgende:
Transparantie:

[ code verwijderd ]

Ronde hoeken:
http://www.alistapart.com/articles/customcorners

Dank u! Maar ik ben zo'n noob die niet weet hoe ik een css script in moet voeren.

Die tutorial lukt me denk ik wel maar de 1ste

.

[ Bericht 12% gewijzigd door onderjas op 10-09-2005 22:40:13 ]

zaterdag 10 september 2005 @ 23:13:58 #266

SuperRembo

Sinds 1998

Begin dan bij W3Schools ofzo.

maandag 12 september 2005 @ 16:12:37 #267

Bbfreak

coenm.nl

Een van de vele vragen over DIV en Scrollbars en IE maar ik kom er niet uit.
We hebben 2 applicaties. De 1 laat scrollbars zien en de andere niet.

Het CSS verschil zit hem dat degene die ze niet heeft met TABLE's werkt en ik met DIV.
Mijn DIV heeft een WIDTH van 100% en een position:absolute.
De TABLE heeft ook een WIDTH van 100%. Doet DIV dit anders of iets?
Overigens werkt het in FireFox wel. Overflow op visible zetten helpt niet.
De WIDTH 98% geven helpt ook niet, de balk wordt kleiner maar de scrollbars blijven.

Ik weet het niet meer.

Mijn DVD Collectie /
Weblog

maandag 12 september 2005 @ 17:50:30 #268

Chandler

Weet iemand nu al hoe je iets precies kan centereren ongeacht de 'grote'?

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

maandag 12 september 2005 @ 18:03:52 #269

Roonaan

Strictly

quote:
Op maandag 12 september 2005 17:50 schreef Chandler het volgende:
Weet iemand nu al hoe je iets precies kan centereren ongeacht de 'grote'?

horizontaal? verticaal? grootte van wat? container? window?

maandag 12 september 2005 @ 20:59:15 #270

Chandler

haha, iets specifieker dus.. gecentreerd in het huidige scherm...

zowel horizontal als vertical dus gecentreerd in het midden van een pagina.

Stel je hebt een explorer scherm op 1280x1024 en daarin wil je een box van 800x800 helemaal vertical en horizontaal centreren? hoe doe je dat... en stel de box is iets groter? of kleiner?

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

maandag 12 september 2005 @ 21:03:21 #271

Roonaan

Strictly

horizontaal centeren is margin:0 auto.

verticaal centreren doe ik nooit eigenlijk.. geef gewoon een percentuele topmarge van iets van 5%-10% en dan oogt het meestal ook wel gecentreerd.

De methode met een top van 50% en dan een negatieve margin-top van de helft van de height vind ik zo lelijk als je het scherm klein maakt. Staat ook een beetje jammerlijk vind ik altijd.

maandag 12 september 2005 @ 23:37:08 #272

SuperRembo

Sinds 1998

quote:
Op maandag 12 september 2005 21:03 schreef Roönaän het volgende:
horizontaal centeren is margin:0 auto.

Voor IE4/5 moet je nog wat klooien met text-align: center.

woensdag 14 september 2005 @ 15:28:59 #273

DionysuZ

Respect my authority!

ik heb een probleem.

Ik ben een nieuwsbrief aan het maken, en in die nieuwsbrief moeten bepaalde links aan a:hover stijl hebben waarin ze van kleur veranderen. Nu zijn er toch een aantal mailclients (tot nu toe alleen webbased tegengekomen) die de <style> tags uit de head halen. Ik heb al geprobeerd om deze dan in de body te zetten, maar daar worden ze ook weggehaald.

Weet iemand hoe ik een a:hover uitvoer in de tag zelf? <a style="??">. Een mouseover event schrijven met onmouseover="this.style=" werkt niet zoals het zou moeten werken.

□ 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

zaterdag 17 september 2005 @ 16:15:29 #274

WheeleE

StrikeE

Ik zit met het volgende. Ik heb een graphic die ik als topbanner in de achtergrond zet, dat lukt. Die banner is een vaste breedte. Rechts daarvan wil ik opvullen met een ander achtergrondplaatje.
De css die ik gebruik:

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

#header {
   border-top: 0px;
   background: url(top.gif) no-repeat fixed top left;
   padding: 0px;
   position: absolute;
   left: 0px;
   width: 783px ;
   height: 85px;
   margin-top: 0px;
}
#rightheader {
   border-top: 0px;
   background: url(topright.jpg) repeat-x fixed top left;
   padding: 0px;
   position: relative;
   left: 783px;
   height: 85px;
   width: auto;
   margin-top: 0px;
}

De HTML:

1
2
3

Ik krijg het echter niet voor elkaar. Hoe krijg ik dat rechterplaatje zover dat het herhaald wordt tot de breedte van het venster, hoe breed dat ook is?

"...while I'm supposed to marry her brother, a renowned pillow biter." Cersei Lannister
"Float like a butterfly, sting like a bee, look ridiculous." Rory the Roman
"It's smaller on the outside." Clara Oswin Oswald

zaterdag 17 september 2005 @ 16:22:55 #275

Leshy

Held met sokken.

Sluit het rechterplaatje aan op het linkerplaatje? Ergo, moet de linkerrand van het rechterplaatje per se aan de rechter rand van het linker plaatje vast zitten, of maakt het niet uit waar de linker afbeelding de rechter overlapt?

zaterdag 17 september 2005 @ 16:59:49 #276

Chandler

@Roonaan: lijkt wel alsof het dus niet echt goed mogelijk is

gatsie

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

zaterdag 17 september 2005 @ 17:15:26 #277

Leshy

Held met sokken.

Verticaal centreren is wel degelijk mogelijk, alleen werkt het zoals gewoonlijk niet in MSIE. Via display: table-cell; en vertical-align: center; kun je items verticaal centreren, omdat je dan gewoonweg een 100% hoogte <div> het gedrag van een table-cell kunt laten emuleren.

Je zult dan eventueel via CSS hacks een andere oplossing voor MSIE moeten aandragen, zoals het element op 50% laten beginnen, en dan een negatieve topmargin van de helft van de hoogte daarvan geven, zoals volgens mij al eerder vermeld is. Niet de mooiste oplossing, maar ja.

zaterdag 17 september 2005 @ 17:23:56 #278

WheeleE

StrikeE

quote:
Op zaterdag 17 september 2005 16:22 schreef Leshy het volgende:
Sluit het rechterplaatje aan op het linkerplaatje? Ergo, moet de linkerrand van het rechterplaatje per se aan de rechter rand van het linker plaatje vast zitten, of maakt het niet uit waar de linker afbeelding de rechter overlapt?

Ja, het moet aan de rechterkant zitten. Het rechterplaatje herhaalt zich, net zo vaak als nodig is om op te vullen tot de rand van het venster.
Zie www.rolstoelhockey.nl. Dat principe probeer ik te krijgen. De bovenste balk dus. Het rood/blauwe stukje herhaald zich tot de rand van het venster.

Ik hoop dat ik het duidelijk genoeg heb uitgelegd

.

[ Bericht 31% gewijzigd door WheeleE op 17-09-2005 17:45:07 ]

"...while I'm supposed to marry her brother, a renowned pillow biter." Cersei Lannister
"Float like a butterfly, sting like a bee, look ridiculous." Rory the Roman
"It's smaller on the outside." Clara Oswin Oswald

zondag 18 september 2005 @ 15:20:10 #279

HuHu

Ik probeer een tabel met DIV en SPAN tags te maken, maar het wil niet echt lukken. Kan iemand mij vertellen wat er fout gaat?

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

<div class="tabel">
<div class="tabel_header">
   <span class="item_1">Naam:</span>
   <span class="item_2">Code is erg lang:</span>
   <span class="item_3">Blok:</span>
   <span class="item_4">Niveau:</span>
   <span class="item_5">Nog iets:</span>
   <span class="item_6">En nog iets:</span>
</div>
<div>
   <span class="achtergrondkleur">
      <span class="item_1">De naam van iets</span>
      <span class="item_2">code</span>
   </span>
   <span class="item_3">1</span>
   <span class="item_4">1</span>
   <span class="item_5">10</span>
   <span class="item_6">7,5</span>
</div>
</div>

En de bijbehorende CSS:

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

.achtergrondkleur {background-color:#669900;}

.tabel {line-height:1.3em;}

.tabel_header{border-bottom: 2px solid gray; width:670px;}

.item_1 {float:left; width:200px; margin:0;}
.item_2 {border-left:1px solid gray; padding:1em; width:100px;}
.item_3 {border-left:1px solid gray; padding:1em; width:100px;}
.item_4 {border-left:1px solid gray; padding:1em; width:100px;}
.item_5 {border-left:1px solid gray; padding:1em; width:100px;}
.item_6 {border-left:1px solid gray; padding:1em; width:100px;}

Maar nu wil ik daar dus een mooi tabelletje van maken en nog meer rijen toevoegen dan de ene die er nu is. De eerste 2 kolommen van een rij moeten een achtergondkleur krijgen.

Het probleem is nu dat de items niet mooi op elkaar aansluiten. In de header is item 2 veel breder dan de inhoud van item 2 bij de eerste rij van de tabel. Nu begint item 3 dus ongelijk met het kopje wat erboven hoort. Het zit nu dus zo:

1
2
3

| | | | |
-------------------------------------
| | | | |

Dat ziet er niet netjes uit, maar het gekke is dat het width attribuut bij item 1 wel gepakt wordt, maar bij de rest niet.

zondag 18 september 2005 @ 15:49:41 #280

Berkery

Fat bastard

'Width' werkt normaal geproken niet op inline elementen zoals <span>, maar misschien dat het door de float: left wel werkt op .item_1.

Maar wat is precies het nut hiervan?

No Dukes of Hazzard in the classroom

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

[CSS] voor dummies - Deel 2

» digital corner

» digital corner