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

woensdag 15 maart 2006 @ 20:43:11 #251

DutchBlood

Ik heb een div, die een container is voor twee andere divs. Nu wil ik de achtergrond van het geheel zwart krijgen. In IE werkt het als ik de container zwart maak, maar in Firefox gebeurd er niks. Ik definineer de achtergrond van de twee andere div's dus niet.

woensdag 15 maart 2006 @ 21:54:24 #252

SuperRembo

Sinds 1998

Ik gok dat je de divs in de container een float of position absolute hebt gegeven. Dan zitten er dus geen elementen meer in de container die de hoogte bepalen, de hoogte wordt dus 0. Dat kan je ook zien als je er een border op zet (of met de DOM inspector natuurlijk).
Als je floats hebt gebruikt dan zal je een element met clear:both moeten toevoegen.

woensdag 15 maart 2006 @ 22:22:15 #253

Chandler

Sr, weet jij misschien een site die een soortement van windows achtige CSS style layout? dat lijkt op windows schermen oid? maar dan zonder images?

weet dat het een pittige vraag is

Just say hi!

woensdag 15 maart 2006 @ 22:24:13 #254

qu63

..de tijd drinkt..

quote:
Op woensdag 15 maart 2006 22:22 schreef Chandler het volgende:
Sr, weet jij misschien een site die een soortement van windows achtige CSS style layout? dat lijkt op windows schermen oid? maar dan zonder images? weet dat het een pittige vraag is

http://desktop.trovster.com/desktop/ zoiets?

It's Time To Shine
[i]What would life be like without rhethorical questions?[/i]

donderdag 16 maart 2006 @ 06:13:24 #255

ChOas

** Warning: Choking hazard **

quote:
Op woensdag 15 maart 2006 22:22 schreef Chandler het volgende:
Sr, weet jij misschien een site die een soortement van windows achtige CSS style layout? dat lijkt op windows schermen oid? maar dan zonder images? weet dat het een pittige vraag is

OS X beginnetje : http://choas.smdc-network.org/test

Niet gemaakt voor IE

"I contend that we are both atheists. I just believe in one fewer god than you do.
When you understand why you dismiss all the other possible gods, you will understand why I dismiss yours."
[Stephen Roberts]

donderdag 16 maart 2006 @ 08:27:27 #256

Chandler

qu63 eb ChOas: ik bedoel eingelijk meer van windows schermen (meer in de zin van een applicatie)..

Just say hi!

donderdag 16 maart 2006 @ 11:22:51 #257

SuperRembo

Sinds 1998

Als je geen plaatjes wil gebruiken, dan blijven er dus alleen kleuren, borders en fonts over. Dat is vrij simpel om te maken.

donderdag 16 maart 2006 @ 12:15:07 #258

the_disheaver

quote:
Op donderdag 16 maart 2006 06:13 schreef ChOas het volgende:
Niet gemaakt voor IE

+ Opera

donderdag 16 maart 2006 @ 19:16:06 #259

Chandler

quote:
Op donderdag 16 maart 2006 11:22 schreef SuperRembo het volgende:
Als je geen plaatjes wil gebruiken, dan blijven er dus alleen kleuren, borders en fonts over. Dat is vrij simpel om te maken.

Dat zou je zeggen inderdaad, maar helaas geld dat voor mij niet

Ik wil iets hebben waarin ik mijn PHP2HEX stap voor stap kan zetten... maar goed... ik blijf zoeken.

Just say hi!

donderdag 16 maart 2006 @ 20:55:27 #260

blieblie

Ik heb een div vraagje.
Mag je niet in DIV's 1 variabele veranderen uit de stylesheet?
Ik heb:

quote:
<div id="dayoverview" align="center" style="left:30;">235px<hr></div>

En in de stylesheet staat

quote:
#dayoverview
{
position:absolute;
top:160px;
width:200px;
z-index:5;
background-color: #EEEEEE;
}

De reden waarom ik de "left" apart heb staan is omdat ik em elke keer met 205 pixels op wil hogen.
Helaas gebeurd er niets in FF en IE

. In de bron staat het goed, maar in de browser zelf gebeurd er niets.

Audioscrobbler _O_
Poezel

donderdag 16 maart 2006 @ 21:08:27 #261

SuperRembo

Sinds 1998

Maak er eens "left:30px" van.

(Pas trouwens ook ff je usericon aan zodat ie echt 60x60px is. 72kb is een beetje veel voor 1 zo'n plaatje. Wel een mooie kat

)

[ Bericht 79% gewijzigd door SuperRembo op 16-03-2006 21:19:56 ]

donderdag 16 maart 2006 @ 23:06:02 #262

Litso

Interlectueel.

Mensen, ik heb een CSS probleempje.

Ik heb een pagina met daarop een vlak waar tekst komt te staan. Dit is een div met achtergrondkleur, en daarbinnen wil ik per alinea tekst een aparte div. Om en om komt er in elke alinea ofwel links ofwel rechts een plaatje te staan, die de betreffende kant op float.

Het probleem is alleen dat als de eerste alinea een plaatje heeft dat naar links float en de alinea niet helemaal tot onderaan het plaatje komt, de tweede alinea omhoog kruipt en ook al tegen het plaatje aan gaat zitten, ookal zijn het twee verschillende div's.

(voor als het niet duidelijk is, hier is het te zien: http://litso.com/school/geo/nieuw/h1_par2.htm )

De structuur is dus:

1
2
3
4
5
6
7
8
9
10
11

<div waar alle alinea's inkomen>
  <h1> (Titel)</h1>
  <div voor de eerste alinea>
      <plaatje dat naar links float>
      <p (eerste alinea)>tekst</p>
  </div>
  <div voor de tweede alinea>
      <plaatje dat naar rechts float>
      <p (tweede alinea)>tekst</p>
   </div>
</div>

En het ziet er zo uit:

1
2
3
4
5
6
7
8
9

[ Bericht 10% gewijzigd door Litso op 16-03-2006 23:15:06 ]

"Dat is echt ontzettend zielig" ©

vrijdag 17 maart 2006 @ 01:21:02 #263

Litso

Interlectueel.

Niemand?

"Dat is echt ontzettend zielig" ©

vrijdag 17 maart 2006 @ 04:40:06 #264

blieblie

quote:
Op donderdag 16 maart 2006 21:08 schreef SuperRembo het volgende:
Maak er eens "left:30px" van.

(Pas trouwens ook ff je usericon aan zodat ie echt 60x60px is. 72kb is een beetje veel voor 1 zo'n plaatje. Wel een mooie kat )

Oei

, en daar gewoon consistent overheen kijken

.

Audioscrobbler _O_
Poezel

vrijdag 17 maart 2006 @ 08:41:24 #265

SuperRembo

Sinds 1998

quote:
Op donderdag 16 maart 2006 23:06 schreef Litso het volgende:
Mensen, ik heb een CSS probleempje.
[...]

clear:both op de titel?

En wees geduldig

vrijdag 17 maart 2006 @ 09:21:59 #266

Litso

Interlectueel.

quote:
Op vrijdag 17 maart 2006 08:41 schreef SuperRembo het volgende:

[..]

clear:both op de titel?

En wees geduldig

Nee, helaas

Wat moet het doen dan?

"Dat is echt ontzettend zielig" ©

vrijdag 17 maart 2006 @ 10:21:09 #267

SuperRembo

Sinds 1998

Zo dus:
#textvak h2 { clear:both; }
Dat werkt.

In Firefox staan de afgeronde hoeken trouwens verkeerd.

vrijdag 17 maart 2006 @ 11:14:34 #268

mschol

quote:
Op dinsdag 14 maart 2006 11:52 schreef Roönaän het volgende:
style="width:100px;"

-r-

als ik dat doe staan me drop down lijstjes idd goed..
maar de <input type=text> velden die overlappen aan de rechterkant de border

ik kan een cell padding gebruiken of me wdth in die 2 kolommen naar 98% ziet er ook ok uit

dit probleem is trouwens in IE en FF zo ..

volgend vraagje:
ik heb een tabel met border, alleen ik krijg het niet voor elkaar om er een enkele lijn van te maken die ik een kleurtje geef
als ik namelijk border="1px" doe zie ik alsnog 2 lijnen :|
kan het wat ik wil of is dat gewoon niet mogelijk?

[ Bericht 23% gewijzigd door mschol op 17-03-2006 11:25:14 ]

vrijdag 17 maart 2006 @ 11:15:48 #269

Litso

Interlectueel.

quote:
Op vrijdag 17 maart 2006 10:21 schreef SuperRembo het volgende:
Zo dus:
#textvak h2 { clear:both; }
Dat werkt.

In Firefox staan de afgeronde hoeken trouwens verkeerd.

Die hoekjes werk ik nog aan idd

Ik zal het nog even proberen.

"Dat is echt ontzettend zielig" ©

vrijdag 17 maart 2006 @ 11:24:17 #270

Litso

Interlectueel.

Geweldig, bedankt

"Dat is echt ontzettend zielig" ©

vrijdag 17 maart 2006 @ 11:46:23 #271

wonko

Fap

Ik heb een menu

1
2
3
4
5
6
7
8
9

<div id="menu">
      <a class="rollmenu" href="index.html">Home</a>
        <a class="rollmenu" onmouseover="slidemenu.showMenu('menu1');" onmouseout="slidemenu.hideMenu('menu1');">Exterieur</a><br>
        <a class="rollmenu" onmouseover="slidemenu.showMenu('menu2');" onmouseout="slidemenu.hideMenu('menu2');">Interieur</a><br>
        <a class="rollmenu" onmouseover="slidemenu.showMenu('menu3');" onmouseout="slidemenu.hideMenu('menu3');">Hekwerkonderdelen</a><br>
       <a class="rollmenu" onmouseover="slidemenu.showMenu('menu4');" onmouseout="slidemenu.hideMenu('menu4');">Tuindecoratie</a><br>
         <a class="rollmenu" href="toeleveren.html">Toeleveren</a>
         <a class="rollmenu" href="contact.html">Contact</a>
     </div>

Met als menu:

1	#menu { margin: 0; padding: 0; width: 130px; float: left; clear: both; vertical-align: top }

En menu items:

1
2

a:link.rollmenu, a:visited.rollmenu { color: #eee; font-size: 10pt; font-family: Verdana, Arial, Georgia, Times; font-weight: normal; text-decoration: none; background-color: #298ca5; letter-spacing: -1px; display: block; padding: 4px; width: 130px; height: 22px; border: outset 1px #fff }
a:hover.rollmenu, a:active.rollmenu { color: #fbfdb5; font-size: 10pt; font-family: Verdana, Arial, Georgia, Times; font-weight: normal; text-decoration: none; background-color: #4ab5d6; letter-spacing: -1px; display: block; padding: 4px; width: 130px; height: 22px; border: solid 1px }

Ik krijg de menu items niet tegen elkaar aan onder elkaar. De eerste twee wel maar die met een mouseout of over houden een grote afstand onderling. Iemand een idee?

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

zaterdag 18 maart 2006 @ 17:54:41 #272

Castor

Obey the rules, miss the fun

Beetje vreemd menu... waarom geen unordered list?

Maar goed, is dit wat je bedoeld?
Zet "href" in je <a> en verwijder de <br> achter je <a>

1
2
3
4
5
6
7
8
9

<div id="menu">
      <a class="rollmenu" href="index.html">Home</a>
        <a href="#" class="rollmenu" onmouseover="slidemenu.showMenu('menu1');" onmouseout="slidemenu.hideMenu('menu1');">Exterieur</a>
        <a href="#" class="rollmenu" onmouseover="slidemenu.showMenu('menu2');" onmouseout="slidemenu.hideMenu('menu2');">Interieur</a>
        <a href="#" class="rollmenu" onmouseover="slidemenu.showMenu('menu3');" onmouseout="slidemenu.hideMenu('menu3');">Hekwerkonderdelen</a>
   <a href="#" class="rollmenu" onmouseover="slidemenu.showMenu('menu4');" onmouseout="slidemenu.hideMenu('menu4');">Tuindecoratie</a>
        <a class="rollmenu" href="toeleveren.html">Toeleveren</a>
        <a class="rollmenu" href="contact.html">Contact</a>
     </div>

Castor's Photostream op Flickr

zaterdag 18 maart 2006 @ 18:31:21 #273

wonko

Fap

quote:
Op zaterdag 18 maart 2006 17:54 schreef Castor het volgende:
Beetje vreemd menu... waarom geen unordered list?

Zover was ik nog niet. Euh...een voorbeeld of een tutorial?

quote:
Maar goed, is dit wat je bedoeld?
Zet "href" in je <a> en verwijder de <br> achter je <a>
[ code verwijderd ]

Bedankt...dat zocht ik ja.

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

maandag 20 maart 2006 @ 14:31:55 #274

The_Cyberspace

Ik zit ook weer met een probleempje. Ik ben een layout aan het maken via css maar dit wil niet helemaal lukken.

Hier de html en css file:
html file
css file

Het is de bedoeling dat de onderste groene balk altijd onderaan de pagina staat. Nu is het zo zodra ik em open met een resolutie van 1280x1024 hij netjes onderaan staat. Maar maak ik het scherm kleiner, 800x600 ofzo, dan staat de balk ook nog onderaan maar dan kan ik scrollen en als ik ga scrollen blijft de balk na het scrollen niet meer onderaan staan. Dit is zowel met Firefox 1.5.1 als met Internet Explorer 6.0

Iemand enig idee?

maandag 20 maart 2006 @ 15:19:41 #275

Desdinova

Olaa

in je content div een overflow:auto zetten en iets van height: 100%;

maar dat is buggy dacht ik onder browsers onderling.

wat bij mij dus weer de vraag oproept hoe je een div in elke browser gewoon de volledige hoogte krijgt?

_{wtf is er gebeurd met de layout}

As a rule, I never touch anything more sophisticated and delicate than myself.

maandag 20 maart 2006 @ 15:40:57 #276

qu63

..de tijd drinkt..

quote:
Op maandag 20 maart 2006 15:19 schreef Desdinova het volgende:
in je content div een overflow:auto zetten en iets van height: 100%;
_{wtf is er gebeurd met de layout}

[CSS] voor dummies - Deel 3

It's Time To Shine
[i]What would life be like without rhethorical questions?[/i]

maandag 20 maart 2006 @ 21:22:09 #277

Chandler

Wie ziet de FF fout!? want in IE ziet het er goed uit?

http://www.bruggema.nl/php2hex/test12312231.html

please!!!

ennuh min-width is voor FF maar dat boeit niet denk ik

Just say hi!

maandag 20 maart 2006 @ 21:41:16 #278

Roonaan

Strictly

Ik zou wat clearingdivs toevoegen.

maandag 20 maart 2006 @ 22:26:46 #279

Chandler

ok, tnx... ik ga ff spelen.

-edit: gespeeld..

helpt maar een beetje... lijkt wel of ik nog meer dingen fout doe.. maar morgen weer een nieuwe dag!

[ Bericht 80% gewijzigd door Chandler op 20-03-2006 23:10:50 ]

Just say hi!

dinsdag 21 maart 2006 @ 11:52:39 #280

Roonaan

Strictly

quote:
Op maandag 20 maart 2006 22:26 schreef Chandler het volgende:
ok, tnx... ik ga ff spelen.

-edit: gespeeld..

helpt maar een beetje... lijkt wel of ik nog meer dingen fout doe.. maar morgen weer een nieuwe dag!

Hij zit netjes nu toch?

dinsdag 21 maart 2006 @ 12:22:52 #281

Castor

Obey the rules, miss the fun

quote:
Op zaterdag 18 maart 2006 18:31 schreef wonko het volgende:

[..]

Zover was ik nog niet. Euh...een voorbeeld of een tutorial?
[..]

Zo zou ik het ongeveer doen, zonder javascript.

HTML:

1
2
3
4
5
6
7
8
9
10
11

<div id="nav">
<ul>
<li><a class="go" href="index.html">Home</a></li>
<li class="test"><a href="#">Exterieur</a></li>
<li><a href="#">Interieur</a></li>
<li><a href="#">Hekwerkonderdelen</a></li>
<li><a href="#">Tuindecoratie</a></li>
<li><a href="toeleveren.html">Toeleveren</a></li>
<li><a href="contact.html">contact</a></li>
</ul>
</div>

CSS:

1
2
3
4

#nav ul {list-style:none;margin:0;padding:0;}
#nav li {margin:0;padding:0;width:130px;border-bottom:1px solid white;}
#nav li a {color:white;text-decoration:none;display:block;width:127px;background-color:#298CA5;line-height:2em;vertical-align:middle;padding-left:3px;}
#nav li a:hover {background-color:#4AB5D6;}

Voor meer voorbeelden check: http://css.maxdesign.com.au/listamatic/

Castor's Photostream op Flickr

dinsdag 21 maart 2006 @ 15:07:04 #282

Tackleberry

.

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

* { box-sizing: border-box; -moz-box-sizing: border-box;
}

HTML { height: 100%;
}

BODY {
   font-family: tahoma;
   text-align: justify;
}

.content TABLE { padding: 10px;
}

.contentform TD { padding: 5px;
}

.tekst {
   font-size: 15px;
}

.tekstklein { font-size: 14px;
}

.onderschrift { font-size: 10px;
}

.titel { font-weight: bold;
font-size: 25px;
text-align: center;
margin: 5px;
}

.koptekst { font-weight: bold;
font-size: 20px;
text-align: center;
margin: 5px;
}

A:link { color: #0033CC;
font-weight: bold;
text-decoration: none;
}

A:visited { color: #FF3300;
font-weight: bold;
text-decoration: none;
}

A:hover { color: #0099CC;
font-weight: bold;
text-decoration: none;
}

UL, TD { font-family: tahoma;
font-size: 15;
list-style-type: disc;
list-style-position: outside;
margin-left: 10px;
padding-left: 10px;
}

CSS-newbie alert!

Ik was vandaag bezig om mijn CSS een beetje op te ruimen, er stonden heel eigenschappen in die via overerving meegenomen kunnen worden. Dus wilde ik aan body twee vaste eigenschappen (font-family en text-align) toekennen.

Als ik <p class="tekst"> gebruik, moet de text-align toch ook justify zijn, zoals in body is vastgesteld? Het resultaat is dat de tekst 'gewoon' wordt afgebeeld, dus NIET als justify.
Zie ik hier totaal iets over het hoofd? Staan er dingen totaal verkeerd in mijn stylesheet?

Nu kan ik best alle eigenschappen herhalen in mijn stylesheet, maar ik wil een nette stylesheet hebben.

.

dinsdag 21 maart 2006 @ 15:22:48 #283

Roonaan

Strictly

afhankelijk van je doctype is je css wel of niet case-sensitive.

Het kan dus zijn dat je
body {} moet gebruiken ipv BODY {}

-r-

dinsdag 21 maart 2006 @ 15:50:08 #284

Tackleberry

.

quote:
Op dinsdag 21 maart 2006 15:22 schreef Roönaän het volgende:
afhankelijk van je doctype is je css wel of niet case-sensitive.

Het kan dus zijn dat je
body {} moet gebruiken ipv BODY {}

-r-

Die had ik beide al (stom toevallig overigens) geprobeerd. Doctype had ik niet (foei, ik weet niet) toegevoegd in mijn HTML documenten. Onderstaande is nu toegevoegd.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
_{Hierdoor werd wel het centreren van de website opgeheven, maar dat was zo opgelost.}

Nu wordt alles weergegeven zoals ik het verwacht, thanks

Overigens, staan er nog stomme dingen in die stylesheet? Ik ben er nog niet helemaal in thuis namelijk.

[edit]
Hmm, nu is de inhoud van het IFRAME verneukt in IE... Firefox past zich aan de inhoud aan, maar Internet Explorer plant in fullscreen al horizontale en verticale scrollbalken in de IFRAME... Zodra de content in de hoogte niet in het IFRAME past, komt er een verticale scrollbalk. Hierdoor wordt de inhoud te breed (aangezien die scrollbalk erbij komt) en komt er ook een horizontale scrollbalk...

Mijn index.html (ja dit is het CSS topic, maar dit komt voort uit een CSS 'probleem')

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Stichting Van Zessen Klaar</title>
<LINK HREF="stylesheet.css" REL="stylesheet" TYPE="text/css">
</head>
<body>

<table align="middle" width="100%" height="100%">
  <tr>
    <td align="middle" valign="middle" width="100%">

   <table border="0" cellspacing="0" cellpadding="0">
     <tr valign="top">
       <td width="150" height="100"><img src="images/vzk-logo.gif" width="150" height="100"></td>
      <td width="650" height="100"><img src="images/vzk-banner.jpg" width="650" height="100"></td>
     </tr>
     <tr valign="top">
       <td width="150" height="*"><img width="150" src="images/menu_v3.png" height="400" USEMAP="#menu" border="0">
        <MAP NAME="menu">
      <AREA SHAPE="rect" COORDS="0,0,150,50" HREF="hoofdpagina.html" TARGET="content" TITLE="Hoofdpagina">
      <AREA SHAPE="rect" COORDS="0,51,150,100" HREF="stichting.html" TARGET="content" TITLE="De stichting">
      <AREA SHAPE="rect" COORDS="0,101,150,150" HREF="actueel.html" TARGET="content" TITLE="Actueel">
      <AREA SHAPE="rect" COORDS="0,151,150,200" HREF="samenwoners.html" TARGET="content" TITLE="Samenwoners">
      <AREA SHAPE="rect" COORDS="0,201,150,250" HREF="sponsoren.html" TARGET="content" TITLE="Sponsoren">
      <AREA SHAPE="rect" COORDS="0,251,150,300" HREF="locatie.html" TARGET="content" TITLE="Locatie">
      <AREA SHAPE="rect" COORDS="0,301,150,350" HREF="links.html" TARGET="content" TITLE="Links">
      <AREA SHAPE="rect" COORDS="0,351,150,400" HREF="contact.html" TARGET="content" TITLE="Contact">
      </MAP></td>
      <td width="650" height="447"><IFRAME SRC="hoofdpagina.html" WIDTH="650" HEIGHT=100%" frameborder="0" name="content">Foutmeldingstekst</IFRAME></td>
      </tr>
   </table>

    </td>
  </tr>
</table>

</body>
</html>

.

dinsdag 21 maart 2006 @ 19:33:03 #285

Chandler

quote:
Op dinsdag 21 maart 2006 11:52 schreef Roönaän het volgende:
Hij zit netjes nu toch?

Zie het verschil nu in IE / FF

dat vind ik weer niet zo netjes

Just say hi!

dinsdag 21 maart 2006 @ 20:53:36 #286

ikke_ook

Ik lees net op w3schools dat <u> en <s> deprecated elements zijn, terwijl <b> en <i> dat niet zijn....
Waarom is dat zo?En moet je underline en strike dan met css gaan toepassen?

Vogelaars.nl

dinsdag 21 maart 2006 @ 21:34:32 #287

Roonaan

Strictly

quote:
Op dinsdag 21 maart 2006 19:33 schreef Chandler het volgende:

[..]

Zie het verschil nu in IE / FF dat vind ik weer niet zo netjes

Enige verschil is de marge onder die foeilelijke kop toch?

dinsdag 21 maart 2006 @ 22:29:49 #288

Chandler

Ach er zit nu iets meer in, maar de kop vind je foeilelijk? heb je suggesties?

Just say hi!

woensdag 22 maart 2006 @ 09:27:49 #289

wonko

Fap

quote:
Op dinsdag 21 maart 2006 12:22 schreef Castor het volgende:

[..]

Zo zou ik het ongeveer doen, zonder javascript.

HTML:
[ code verwijderd ]

CSS:
[ code verwijderd ]

Voor meer voorbeelden check: http://css.maxdesign.com.au/listamatic/

Mijn dank!!
Ik gaat aan de slag.

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

woensdag 22 maart 2006 @ 15:24:42 #290

Tackleberry

.

De inhoud van een IFRAME is verneukt in IE... Firefox past zich aan de inhoud aan, maar Internet Explorer plant in fullscreen al horizontale en verticale scrollbalken in de IFRAME... Zodra de content in de hoogte niet in het IFRAME past, komt er een verticale scrollbalk. Hierdoor wordt de inhoud te breed (aangezien die scrollbalk erbij komt) en komt er ook een horizontale scrollbalk...

Mijn index.html (ja dit is het CSS topic, maar dit komt voort uit een CSS 'probleem / oplossing'')

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Stichting Van Zessen Klaar</title>
<LINK HREF="stylesheet.css" REL="stylesheet" TYPE="text/css">
</head>
<body>

<table align="middle" width="100%" height="100%">
  <tr>
    <td align="middle" valign="middle" width="100%">

   <center>
   <table border="0" cellspacing="0" cellpadding="0">
     <tr valign="top">
       <td width="150" height="100"><img src="images/vzk-logo.gif" width="150" height="100"></td>
      <td width="*" height="100"><img src="images/vzk-banner.jpg" width="650" height="100"></td>
     </tr>
     <tr valign="top">
       <td width="150" height="*"><img width="150" src="images/menu_v3.png" height="400" USEMAP="#menu" border="0">
        <MAP NAME="menu">
      <AREA SHAPE="rect" COORDS="0,0,150,50" HREF="hoofdpagina.html" TARGET="content" TITLE="Hoofdpagina">
      <AREA SHAPE="rect" COORDS="0,51,150,100" HREF="stichting.html" TARGET="content" TITLE="De stichting">
      <AREA SHAPE="rect" COORDS="0,101,150,150" HREF="actueel.html" TARGET="content" TITLE="Actueel">
      <AREA SHAPE="rect" COORDS="0,151,150,200" HREF="samenwoners.html" TARGET="content" TITLE="Samenwoners">
      <AREA SHAPE="rect" COORDS="0,201,150,250" HREF="sponsoren.html" TARGET="content" TITLE="Sponsoren">
      <AREA SHAPE="rect" COORDS="0,251,150,300" HREF="locatie.html" TARGET="content" TITLE="Locatie">
      <AREA SHAPE="rect" COORDS="0,301,150,350" HREF="links.html" TARGET="content" TITLE="Links">
      <AREA SHAPE="rect" COORDS="0,351,150,400" HREF="contact.html" TARGET="content" TITLE="Contact">
      </MAP></td>
      <td width="*" height="447"><IFRAME SRC="hoofdpagina.html" WIDTH="100%" HEIGHT=100%" frameborder="0" name="content">[knip errortekst]</IFRAME></td>
      </tr>
   </table>
   </center>

    </td>
  </tr>
</table>

</body>
</html>

Als dit met CSS op te lossen is, dit is mijn stylesheet:

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML LANG="nl">
<HEAD>
<TITLE>Stylesheet</TITLE>
<META HTTP-EQUIV="content-type" CONTENT="text/html; charset=ISO-8859-1">
<META HTTP-EQUIV="content-style-type" CONTENT="text/css">
<META NAME="robots" CONTENT="noindex, nofollow">

* { box-sizing: border-box; -moz-box-sizing: border-box;
}

HTML { height: 100%;
}

BODY {
   font-family: tahoma;
   text-align: justify;
}

.content TABLE { padding: 10px;
}

.tekst {
   font-size: 15px;
}

.tekstklein { font-size: 14px;
}

.onderschrift { font-size: 10px;
}

.titel { font-weight: bold;
font-size: 25px;
text-align: center;
margin: 5px;
}

.koptekst { font-weight: bold;
font-size: 20px;
text-align: center;
margin: 5px;
}

A:link { color: #0033CC;
font-weight: bold;
text-decoration: none;
}

A:visited { color: #FF3300;
font-weight: bold;
text-decoration: none;
}

A:hover { color: #0099CC;
font-weight: bold;
text-decoration: none;
}

UL, TD { font-family: tahoma;
font-size: 15;
list-style-type: disc;
list-style-position: outside;
margin-left: 10px;
padding-left: 10px;
}

</HEAD>
</HTML>

.

woensdag 22 maart 2006 @ 15:30:19 #291

DionysuZ

Respect my authority!

wat doet

1
2
3
4
5
6
7
8
9

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML LANG="nl">
<HEAD>
<TITLE>Stylesheet</TITLE>
<META HTTP-EQUIV="content-type" CONTENT="text/html; charset=ISO-8859-1">
<META HTTP-EQUIV="content-style-type" CONTENT="text/css">
<META NAME="robots" CONTENT="noindex, nofollow">
</HEAD>
</HTML>

in je stylesheet?

□ 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 22 maart 2006 @ 15:36:55 #292

Tackleberry

.

quote:
Op woensdag 22 maart 2006 15:30 schreef DionysuZ het volgende:
wat doet
[ code verwijderd ]

in je stylesheet?

Ik ben uitgegaan van al bestaande document, dus ik heb een verkeerd voorbeeld gebruikt.

Die code is nu verwijderd, maar dat maakt voor mijn probleem verder geen verschil. Bedankt voor de tip iig.

.

woensdag 22 maart 2006 @ 17:23:00 #293

DaFan

Is het mogelijk om de kleuren van Links/Alinks en Vlinks in CSS onder te brengen?

1	<body link="kleur" vlink="kleur" alink="kleur">

werkt wel, maar is pokkewerk.

Bvd.

woensdag 22 maart 2006 @ 17:27:16 #294

Desdinova

Olaa

<IFRAME SRC="hoofdpagina.html" WIDTH="100%" HEIGHT=100%" frameborder="0" name="content" scrolling="no">[knip errortekst]</IFRAME>

_{gvd die reageer knop zit verwarrend dicht bij het invoeren}

_{en wanneer wordt die layout gefixed}

As a rule, I never touch anything more sophisticated and delicate than myself.

woensdag 22 maart 2006 @ 17:29:39 #295

DaFan

Pas als bovenstaande code-verneukers hun reply aanpassen.
(Vooral Wonko)

woensdag 22 maart 2006 @ 17:40:15 #296

Desdinova

Olaa

a {
color: kleur;
}
a:visited {
color:kleur;
}
a:active {
color:kleur;
}

en
a:hover{
color: kleur;
}

is er ook nog

As a rule, I never touch anything more sophisticated and delicate than myself.

woensdag 22 maart 2006 @ 17:43:10 #297

DaFan

Hartelijk dank

woensdag 22 maart 2006 @ 17:54:09 #298

the_disheaver

quote:
Op woensdag 22 maart 2006 17:29 schreef DaFan het volgende:
Pas als bovenstaande code-verneukers hun reply aanpassen.
(Vooral Wonko)

_{Lang leve Opera met de 'Fit to window width'-functie Geen echte oplossing, maar ik heb er geen last van}

woensdag 22 maart 2006 @ 18:59:37 #299

Tackleberry

.

quote:
Op woensdag 22 maart 2006 17:27 schreef Desdinova het volgende:
<IFRAME SRC="hoofdpagina.html" WIDTH="100%" HEIGHT=100%" frameborder="0" name="content" scrolling="no">[knip errortekst]</IFRAME>

Dat is een oplossing, maar zorgt weer voor een ander probleem; je krijgt (logischerwijs) geen scrollbalk te zien. Maar de content is op sommige pagina's wel langer dan het iframe hoog is...

Andere oplossing? Toevoegingen?

.

woensdag 22 maart 2006 @ 23:15:32 #300

WebForce

Kijk mij nou!

Goedenavond! Ik heb een standaard pivot weblogje al een tijdje in beheer, maar nu kom ik er eigenlijk pas achter dat het helemaal niet lekker in elkaar zit met IE. In Firefox doet 'ie het prima...
Dit is de site. In FF ziet die er dus prima uit, maar als je in IE het venster kleiner maakt zie je dat de onderste twee kolommen (div) blijven ; staan'...

Alles zit 'in' een body, de rechter kolom heet heeft de div 'centercolumn', de rechter 'rightcolumn' en het plaatje/logo 'header'.

Zo zit een gedeelte van de css eruit:

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

body {
   padding: 0px;
   width: 807px;
   background: #DDD;
   margin: auto;
}

#centercolumn {
   padding: 6px 0px;
   position: absolute;
   width: 600px;
}

#rightcolumn {
   position: absolute;
   margin-left: 600px;
   width: 205px;
}

#header {
}

Ik heb lopen zoeken hoe dat precies zit met position etc., maar ik kom er niet uit

. Wie helpt?

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

[CSS] voor dummies - Deel 3

» digital corner

» digital corner