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

dinsdag 1 november 2005 @ 14:05:55 #76

ALTF4

Ik hoor niets, heeft niemand een idee?
Inmiddels heb ik de reclame maar even linksbovenaan gezet, dat lukte wel...

En toen was het verhaaltje uit...

woensdag 2 november 2005 @ 11:42:17 #77

Nevermind

(-_-)

In Opera en Firefox werkt het horizontale menu prima, maar in Internet Explorer niet... waar ligt dit aan?

GTA San Andreas Multiplayer: Las Venturas Playground Doe mee met FOK! Whatpulse en typ FOK! naar de 1e plaats!!

woensdag 2 november 2005 @ 13:34:16 #78

SuperRembo

Sinds 1998

Dat ligt aan het verschil in het box model tussen FireFox en Internet Explorer.
In FF wordt de border wel bij de breedte gerekend, in IE wordt de border niet bij de breedte gerekend. Daardoor worden de listitems te breed.

Vreemd dat je een wel een list gebruikt voor het menu, maar dat je verder taballen gebruikt voor de layout.

woensdag 2 november 2005 @ 15:41:21 #79

Nevermind

(-_-)

Daar heb je helemaal gelijk in

Ik heb het wederom eens compleet in css geprobeerd, maar ik word ontzettend moe van de onderlinge verschillen tussen browsers. Vooral als het in de grote drie browsers bij elke er compleet anders uit ziet. Dan ga ik toch liever voor de makkelijke manier die het wel prima doet in elke browser. Ik weet dat je ontzettend veel ervaring hebt met css, maar ik denk dat je je ook wel kunt voorstellen hoe de beginnende of gemiddelde (daar reken ik mezelf onder

) 'webdesigner' er wel moeite mee kan hebben.

Maar ik zal me even verdiepen in het box model hack, wederom bedankt

GTA San Andreas Multiplayer: Las Venturas Playground Doe mee met FOK! Whatpulse en typ FOK! naar de 1e plaats!!

woensdag 2 november 2005 @ 18:46:47 #80

SuperRembo

Sinds 1998

Je kan je verdiepen in allerlei hacks om alles op de pixel precies gelijk te krijgen.

Je kan ook je layout zo aanpassen dat het niet uit maakt als iets een pixeltje meer of minder breed is.

woensdag 2 november 2005 @ 21:38:07 #81

pandinus

quote:
Op vrijdag 23 september 2005 15:51 schreef Onnib het volgende:
Zo zijn er nog wel wat dingen die niet werken in FF en wel in IE:

Horizontale balk is een 1px grijze streep in IE maar in FF niet

Probeer dit eens, werkt zowel in FF als in IE

1	hr {color: #3064a0; background-color: #3064a0; height: 1px; border: 0; }

dinsdag 8 november 2005 @ 13:51:37 #82

gtjw

HELP!!
Ik zit met een select - Z-index probleem.

Ik weet dat je een Iframe moet maken onder de Div om ervoor te zorgen dat de select objecten er niet voor komen.
Nu zit ik met het probleem dat alle oplossingen die op internet te vinden zijn allemaal met UL->LI werken of met vage javascript inhoud.

Ik ben op zoek naar een javascript dat op een moment dat ik op de layer klik (deze wordt dan namelijk vergroot) een iframe eronder getekent wordt.

dinsdag 8 november 2005 @ 17:33:08 #83

SuperRembo

Sinds 1998

Bedoel je dit? http://superrembo.com/dhtml/coverdropdown.html

donderdag 10 november 2005 @ 20:08:06 #84

Stephan4kant

Waarschijnlijk een bekend probleem, alleen niets kunnen vinden. Ook oplossingen jatten van andere websites is me niet gelukt

Ik heb een simpele tabel voor o.a. een forum (let niet op de kleuren, just for testing). In IE ziet het er goed uit, maar o.a. met FireFox krijgen de rijen maarliefst 48 pixels hoogte (in IE zo'n 18). Hoe fix ik dit?

Nog een probleempje: iemand die in IE en FF kijkt, ziet het waarschijnlijk al. De lichtblauwe achtergrond doet het wel in IE, maar niet in FF. Iemand een idee?overflow: visible; ==> auto

[ Bericht 3% gewijzigd door Stephan4kant op 10-11-2005 20:10:22 (Tweede probleem al opgelost :P) ]

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

donderdag 10 november 2005 @ 21:04:25 #85

SuperRembo

Sinds 1998

In IE en FF (1.5) zijn de rijen 20px hoog.

vrijdag 11 november 2005 @ 01:26:33 #86

DionysuZ

Respect my authority!

ik ben bezig met een klein administratiepaneeltje voor op een site. Heel simpel, links menu, rechts de inhoud. Dit heb ik gedaan door 2 divjes te specificeren, 1 voor het menu en 1 voor de contents. Dit is de CSS:

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

  * { margin: 0; padding: 0; }
  body, html { height: 100%; }
  #menu {
    position: relative;
    width: 158px;
    _height: 100%;
    min-height: 100%;
    float: left;
  }
  #contents {
    margin: 20px 20px 20px 20px;
    _height: 100%;
    min-height: 100%;
  }

en op een of andere manier rendert hij hem NIET goed. De body ziet er ongeveer als volgt uit:

1
2
3
4
5
6
7

Wat hij fout doet zijn de margins van #contents. Als ik die weglaat dan rendert hij hem goed. Menu links, contents rechts. Echter wil ik de contents ook een stukje van de rand van het menu afhebben en een stukje van boven/onder en rechterkant. Als ik dan een margin instel, ziet het er goed uit in IE, maar niet in FF, dan voegt hij ruimte tussen bovenkant pagina en bovenkant menu/contents ter hoogte van de margin en voegt hij geen ruimte tussen menu en contents.

Iemand die weet waar ik de fout inga?

□ 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 11 november 2005 @ 21:17:05 #87

AnGabhar

quote:
Op vrijdag 11 november 2005 01:26 schreef DionysuZ het volgende:Wat hij fout doet zijn de margins van #contents. Als ik die weglaat dan rendert hij hem goed. Menu links, contents rechts. Echter wil ik de contents ook een stukje van de rand van het menu afhebben en een stukje van boven/onder en rechterkant. Als ik dan een margin instel, ziet het er goed uit in IE, maar niet in FF, dan voegt hij ruimte tussen bovenkant pagina en bovenkant menu/contents ter hoogte van de margin en voegt hij geen ruimte tussen menu en contents.

Iemand die weet waar ik de fout inga?

Een eerste stap is begrijpen wat een float is. Een float 'zweeft' boven de pagina. Niet-zwevende blokelementen (zoals je div#contents) zullen gewoon op de pagina worden geplaatst alsof de float er niet is. Beschouw de float als een luchtballon die erboven hangt.

Met andere woorden: als je op je div#contents een linkermarge van 20px definieert, betekent dat 20px van de linkerkant van het scherm. Als je 20px vanaf de rechterrand van je menu wilt hebben, zul je margin-left: 178px moeten gebruiken. Of een heel andere opzet, waarmee je bijvoorbeeld de inhoud ook float:left meegeeft, dan zal een marge wel werken. Of absolute positionering gebruiken. Al heeft dat ook weer allerlei nadelen.

Let er verder op dat als je height: 100% gebruikt op een element dat ook nog marge of padding heeft, het totale element hoger wordt dan het scherm en er dus schuifbalken ontstaan. Zie enige uitleg over het box-model.

vrijdag 11 november 2005 @ 21:47:46 #88

SuperRembo

Sinds 1998

De makkelijkste oplossing is om er een extra divje in te zetten waar je de padding op zet. Dan heb je geen last van de verschillen in IE en FF.

zaterdag 12 november 2005 @ 14:58:51 #89

DionysuZ

Respect my authority!

hartstikke bedankt! ik heb de contents div laten floaten en er een extra div ingezet en nu werkt het goed

□ 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 21 november 2005 @ 17:34:01 #90

DutchBlood

*kick*

Ik heb een div met een transparantie van 50% maar nu wil ik de tekst die daarin zit gewoon 100% hebben.

Ik heb het nu zo, schematisch.

1
2
3

<div style="opacity: 50%; background-color: #FFF;">
<div style="color: #000; ">De tekst
</div>

Maar nu neemt de tekst die 50% opacity van die andere div over, en dat wil ik niet. Hoe los ik dat op?
Die andere div een opacity van 100% geven helpt niet. Ook z-indexes halen niks uit.

-edit-
In IE is het me inmiddels gelukt met position: relative; geven aan de tekst, maar nog geen succes in FF.

[ Bericht 5% gewijzigd door DutchBlood op 21-11-2005 17:53:07 ]

maandag 21 november 2005 @ 20:07:43 #91

SuperRembo

Sinds 1998

Je kan zoiets doen:

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

#wrapper {
   position: relative;
}

#wrapper .background {
   position: absolute;
   opacity: 0.5;
   filter: alpha(opacity=50);
   background-color: #f00;
   width: 400px;
   height: 300px;
}

#wrapper .content {
   position: absolute;
   width: 400px;
   height: 300px;
   color: #000;
}

1
2
3
4
5
6
7
8

<div id="wrapper">
   <div class="background"></div>
   <div class="content">
      <p>
         Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse est turpis, aliquet a, auctor vel, bibendum elementum, urna. In ut lorem. Cras pretium lacinia urna. Etiam porttitor iaculis leo. Nam placerat, dolor congue accumsan condimentum, urna felis convallis odio, in convallis erat sapien at est. Maecenas risus nibh, rutrum interdum, pulvinar et, interdum eu, erat. Mauris sagittis, risus ac tristique facilisis, quam enim viverra pede, molestie tincidunt justo lectus a sapien. Cras porttitor. Mauris dapibus tincidunt risus. Maecenas in nisi id lorem ornare varius.
      </p>
   </div>
</div>

Het wordt alleen lastig als de grootte van de inhoud af moet hangen.

maandag 21 november 2005 @ 21:01:11 #92

DutchBlood

Had ik nog een vraagje.
Ik heb twee div's naast elkaar, de ene is 125px breed, en de andere moet de ruimte opvullen die overblijft van de andere div. Hoe doe ik dat?

maandag 21 november 2005 @ 21:04:13 #93

cyberstalker

Een krachtig neen!

quote:
Op maandag 21 november 2005 21:01 schreef DutchBlood het volgende:
Had ik nog een vraagje.
Ik heb twee div's naast elkaar, de ene is 125px breed, en de andere moet de ruimte opvullen die overblijft van de andere div. Hoe doe ik dat?

De div van 125px floaten.

Hope for the best, prepare for the worst.

maandag 21 november 2005 @ 21:14:37 #94

DutchBlood

quote:
Op maandag 21 november 2005 21:04 schreef cyberstalker het volgende:

[..]

De div van 125px floaten.

Ja, maar de overige div kan ik dan nog geen 100% width geven, dan zet ie 'm eronder.

maandag 21 november 2005 @ 21:18:03 #95

cyberstalker

Een krachtig neen!

quote:
Op maandag 21 november 2005 21:14 schreef DutchBlood het volgende:

[..]

Ja, maar de overige div kan ik dan nog geen 100% width geven, dan zet ie 'm eronder.

Hoeft toch niet. Een <div> is een block-element, die vullen standaard alles op.

Hope for the best, prepare for the worst.

vrijdag 25 november 2005 @ 17:54:23 #96

Chandler

Mensen ik zit nu met het volgende kleine probleempje (hoop ik)

Ik draai zelf al tijden Windows Commander en ben er helemaal weg van dat ik nu ook een Windows Commander online wil

oftewel webbased

nu zou je zeggen? waarom? er zijn toch al zoveel? yep maar niet door mij gemaakt, en het is voor mij weer een leuke leerweg... maar goed

Nu heb ik mezelf dit keer goed aan het werk gezet en niemand een vraag of whatever gevraagd, alles zelf opgezocht en veel geexpirmenteerd maar kom nu niet uit het volgende.

De volgende layout (http://www.bruggema.nl/mmenu.html) ziet er op zich aardig uit in IE maar als ik FF open mis ik opeens randen, etc etc etc... ik heb alles gemeten en het zou dus moeten willen... alles op basis van vaste maten... behalve de laatste buttons maar die hebben daar niets mee te maken!

Zou iemand me hier mee kunnen helpen, en het zal goed kunnen dat ik ook een doctype moet toevoegen maar helaas heb ik daar nog niet echt de kennis van

excuus daarvoor.

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

vrijdag 25 november 2005 @ 19:10:06 #97

DionysuZ

Respect my authority!

Het verschil ligt em erin dat de ene browser de randen meetelt bij de grootte, en de andere browser de randen nog erbij neemt.

De ene browser zal bij een box van 200px breed met een rand van 1px een box maken van 200px mét rand. De andere maakt er een box van 202px mét rand van.

□ 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 25 november 2005 @ 20:38:00 #98

Chandler

ow dat is lekker

maar hoe kunnen we dat oplossen? ik weet dat IE (width + border == lengte) ze er bij telt en dus nu ook dat FF ze bij de lengte voegt, maar hoe lossen we dat op, weer van die vieze hacks?

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

vrijdag 25 november 2005 @ 21:01:00 #99

McMarco

Argh

Ik kom niet uit het volgende kleine probleem. Ik ben geen n00b, maar 2 pixels drijven mij tot wanhoop

In een <td> wil ik een plaatje zetten, deze verticaal helemaal naar beneden uitlijnen maar ondanks dat staan er nog blijven er nog 2 pixels onder over.
- cellspacing en -padding van de tabel en de cel staan op 0
- valign naar bottom en baseline helpen niet genoeg
- marges op 0 helpt niet
- vspace rond plaatje op 0 biedt geen soelaas
- border van plaatje = 0

M'n ingekorte 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

BODY
{   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 10px;
    color: #FFFFFF;
   margin-top: 60px;
   margin-bottom: 0px;
}

Table.main
{   border: 0px;
   padding: 0px;
   width: 800px;
   background-color:#F8E600;
}

TD, TH
{   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 10px;
    color: #FFFFFF;
   vertical-align:top
}

tr.scheiding_header_concent /* blauwe balk bovenin */
{   background-color: #181747;
   height: 30px;
   padding: 0px;
   border: 0px;
}

td.tabbladen
{   text-align: right;
   padding-right: 20px;
   padding-bottom: 0px;
   margin: 0px;
   border-bottom: solid 0px #FFFFFF;
   vertical-align: bottom;
   border: 0px;
}

M'n verkorte HTML:

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

(header)
<body>
<table width="800" border="0" cellspacing="0" cellpadding="0" class="main" align="center">
  <tr>
    <td width="150" height="40"> </td>
    <td width="150" height="40" class="tabbladen">
      <img src="images/actief_links.gif" alt="" border="0">
      <a href="index.php"><b>Home</b></a>
      <img src="images/actief_rechts.gif" border="0" alt="">
   </td>
  </tr>
  <tr class="scheiding_header_concent">
    <td colspan="2"> </td>
  </tr>
</table>
</body>
</html>

Weet iemand raad?

vrijdag 25 november 2005 @ 21:52:09 #100

AnGabhar

quote:
Op vrijdag 25 november 2005 20:38 schreef Chandler het volgende:
ow dat is lekker maar hoe kunnen we dat oplossen? ik weet dat IE (width + border == lengte) ze er bij telt en dus nu ook dat FF ze bij de lengte voegt, maar hoe lossen we dat op, weer van die vieze hacks?

http://www.quirksmode.org/css/box.html

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

[CSS] voor dummies - Deel 3

» digital corner

» digital corner