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

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

vrijdag 25 november 2005 @ 22:15:15 #101

FlowDesign

OMG IT SPINS!

Misschien dat een van jullie het misschien weet:

Ik heb zeg maar onderstaande indeling van een webpagina opgebouwd met CSS.
De lichtblauwe achtergrond is een DIV (layer) met vaste plek (margin: 0 auto) zodat deze in het midden wordt uitgelijnd.
De andere zijn ook DIV's (met vaste plek).
Alleen het menu is "Floating: left".
De height staat niet vast, de margins en de paddings wel.
Echter wat er nu gebeurd is dat wanneer er te weinig tekst in het menu of in de content layer staan, de footer te hoog op de pagina komt waardoor de achtergrond weer te zien is.
Ik vraag mij dus af: Is het mogelijk om te zorgen dat de footer altijd dusdanig ver onderaan de pagina komt te staan zodat de achtergrond niet meer te zien is.

Age of fruity enlightenment!

vrijdag 25 november 2005 @ 22:15:19 #102

Chandler

Bedankt AnGabhar, alleen krijg ik daaruit toch nog niet een duidelijke oplossing...

zal wel aan mij liggen denk ik

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

vrijdag 25 november 2005 @ 22:53:49 #103

Quarks

little Eiffel! little Eiffel!

quote:
Op vrijdag 25 november 2005 22:15 schreef FlowDesign het volgende:
Misschien dat een van jullie het misschien weet:

Ik heb zeg maar onderstaande indeling van een webpagina opgebouwd met CSS.
De lichtblauwe achtergrond is een DIV (layer) met vaste plek (margin: 0 auto) zodat deze in het midden wordt uitgelijnd.
De andere zijn ook DIV's (met vaste plek).
Alleen het menu is "Floating: left".
De height staat niet vast, de margins en de paddings wel.
Echter wat er nu gebeurd is dat wanneer er te weinig tekst in het menu of in de content layer staan, de footer te hoog op de pagina komt waardoor de achtergrond weer te zien is.
Ik vraag mij dus af: Is het mogelijk om te zorgen dat de footer altijd dusdanig ver onderaan de pagina komt te staan zodat de achtergrond niet meer te zien is.

Alistapart.com kan het beter uitleggen

* 11:15, restate my assumptions: 1. Mathematics is the language of nature. 2. Everything around us can be represented and understood through numbers. 3. If you graph these numbers, patterns emerge. Therefore: There are patterns everywhere in nature.*

vrijdag 25 november 2005 @ 23:41:31 #104

Chandler

en wie kan mij die andere uitleg beter uitleggen?

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

zaterdag 26 november 2005 @ 16:14:15 #105

FlowDesign

OMG IT SPINS!

quote:
Op vrijdag 25 november 2005 22:53 schreef Quarks het volgende:

[..]

Alistapart.com kan het beter uitleggen

Tnx man

Ik heb het helemaal gelezen, maar dat stuk voor MAC ondersteuning ga ik niet gebruiken. Ik gebruik de pure-CSS oplossing (aangezien de desbetreffende website dan toch wel compatible is voor 99,9% van de bezoekers).

Age of fruity enlightenment!

zaterdag 26 november 2005 @ 18:14:54 #106

FlowDesign

OMG IT SPINS!

quote:
Op zaterdag 26 november 2005 16:14 schreef FlowDesign het volgende:

[..]

Tnx man

Ik heb het helemaal gelezen, maar dat stuk voor MAC ondersteuning ga ik niet gebruiken. Ik gebruik de pure-CSS oplossing (aangezien de desbetreffende website dan toch wel compatible is voor 99,9% van de bezoekers).

Hmmzz... nu werkt het wel in FireFox, maar in IE (6) zet ie die footer weer niet onderaan.
Zie: http://eggsplosion.com/drupal/

De CSS-code

Zoals je momenteel ook kunt zien, valt op pagina's waar heel weinig tekst in het rechter deel van de pagina staat, heel de searchbox weg onder de footer

[ Bericht 12% gewijzigd door FlowDesign op 26-11-2005 18:44:56 ]

Age of fruity enlightenment!

maandag 28 november 2005 @ 16:33:05 #107

Chandler

Weet iemand of het mogelijk is om zulke borders met alleen CSS te genereren?

zou mooi zijn namelijk

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

maandag 28 november 2005 @ 16:44:35 #108

DionysuZ

Respect my authority!

http://www.w3schools.com/css/pr_border-style.asp
je hebt de volgende borderstyles:

none Defines no border

hidden The same as "none", except in border conflict resolution for table elements

dotted Defines a dotted border. Renders as solid in most browsers

dashed Defines a dashed border. Renders as solid in most browsers

solid Defines a solid border

double Defines two borders. The width of the two borders are the same as the border-width value

groove Defines a 3D grooved border. The effect depends on the border-color value

ridge Defines a 3D ridged border. The effect depends on the border-color value

inset Defines a 3D inset border. The effect depends on the border-color value

outset Defines a 3D outset border. The effect depends on the border-color value

□ 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 28 november 2005 @ 16:55:27 #109

Chandler

maar je houdt zwarte randen

hoe kom je daar vanaf....

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

donderdag 1 december 2005 @ 22:59:11 #110

DionysuZ

Respect my authority!

hm vraagje.

ik heb 2 divs, de een genest in de ander. De eerste heeft een hoogte van 100% van het scherm. De tweede is absoluut gepositioneerd in de eerste en heeft een variabele hoogte. Nu is het zo dat als de inhoud van de tweede erg veel wordt, er tekst gaat wegvallen omdat de buitenste div niet mee resized. hoe los ik dat op?

□ 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 1 december 2005 @ 23:11:57 #111

Quarks

little Eiffel! little Eiffel!

quote:
Op donderdag 1 december 2005 22:59 schreef DionysuZ het volgende:
hm vraagje.

ik heb 2 divs, de een genest in de ander. De eerste heeft een hoogte van 100% van het scherm. De tweede is absoluut gepositioneerd in de eerste en heeft een variabele hoogte. Nu is het zo dat als de inhoud van de tweede erg veel wordt, er tekst gaat wegvallen omdat de buitenste div niet mee resized. hoe los ik dat op?

Wat heb je bij height staan voor de tweede div?

* 11:15, restate my assumptions: 1. Mathematics is the language of nature. 2. Everything around us can be represented and understood through numbers. 3. If you graph these numbers, patterns emerge. Therefore: There are patterns everywhere in nature.*

vrijdag 2 december 2005 @ 07:53:51 #112

SuperRembo

Sinds 1998

Een element dat absoluut gepositioneerd is valt buiten de flow. Jouw binnenste div zal er dus nooit voor zorgen dat je buitenste div oprekt.
Als je een element een hoogte geeft, dan rekt het niet mee met de inhoud. Tenminste, dat zou niet mogen, maar IE doet het toch. Je moet de hoogte als min-height opgeven, alleen snapt IE dat weer niet.

1
2
3
4
5
6
7

#outer {
   min-height: 100%;/* W3C */
   _height: 100%;/* IE */
}
#inner {
   /* GEEN position: absolute */
}

zondag 4 december 2005 @ 11:24:57 #113

Chandler

Iemand die beked is met vele CSS sites? zoek eingelijk een voorbeeld van CSS als in een Office XP menu oid ennuh velden zoals windows programma's... eingelijk dus gewoon alles wat met windows te maken heeft in CSS (en voorbeeld natuurlijk)..

Iemand ideeen?

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

zondag 4 december 2005 @ 11:40:27 #114

SuperRembo

Sinds 1998

Het is geen CSS site, maar de luitjes van Component-Art hebben van al hun controls ook een demo in Windows XP stijl. Bijvoorbeeld een menu en een tree .

zondag 4 december 2005 @ 11:45:12 #115

Chandler

Tnx SuperRembo, maar bedoel meer de platte menu met vaste icons (zoals de bar bij winzip, add, extract, ennuh de korte tabs zoals in office

(excel etc)

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

zondag 4 december 2005 @ 12:54:45 #116

Quarks

little Eiffel! little Eiffel!

quote:
Op zondag 4 december 2005 11:45 schreef Chandler het volgende:
Tnx SuperRembo, maar bedoel meer de platte menu met vaste icons (zoals de bar bij winzip, add, extract, ennuh de korte tabs zoals in office (excel etc)

Hier staat vast wel tussen wat je zoekt.

* 11:15, restate my assumptions: 1. Mathematics is the language of nature. 2. Everything around us can be represented and understood through numbers. 3. If you graph these numbers, patterns emerge. Therefore: There are patterns everywhere in nature.*

zondag 4 december 2005 @ 12:58:21 #117

Chandler

die had ik ook al gezien

maar dat is net niet wat ik zoek... je moet het zien als de button bar van (tool bar) van internet explorer... de stijle van de achtergrond etc

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

zondag 4 december 2005 @ 13:07:44 #118

Quarks

little Eiffel! little Eiffel!

quote:
Op zondag 4 december 2005 12:58 schreef Chandler het volgende:
die had ik ook al gezien maar dat is net niet wat ik zoek... je moet het zien als de button bar van (tool bar) van internet explorer... de stijle van de achtergrond etc

Bedoel je zoiets?

* 11:15, restate my assumptions: 1. Mathematics is the language of nature. 2. Everything around us can be represented and understood through numbers. 3. If you graph these numbers, patterns emerge. Therefore: There are patterns everywhere in nature.*

zondag 4 december 2005 @ 13:16:06 #119

Chandler

dat is het bijna maar dan de grote versie er van

ofzo

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

zondag 4 december 2005 @ 13:29:30 #120

Quarks

little Eiffel! little Eiffel!

quote:
Op zondag 4 december 2005 13:16 schreef Chandler het volgende:
dat is het bijna maar dan de grote versie er van

[afbeelding]

ofzo

Waarom knip je niet gewooon die plaatjes uit en maak je het zelf; zo moeilijk is het niet.

* 11:15, restate my assumptions: 1. Mathematics is the language of nature. 2. Everything around us can be represented and understood through numbers. 3. If you graph these numbers, patterns emerge. Therefore: There are patterns everywhere in nature.*

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

[CSS] voor dummies - Deel 3

» digital corner

» digital corner