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

dinsdag 28 november 2006 @ 00:56:33 #101

mrbombastic

Ok, ik heb de pagina even wat versimpeld. Hieronder de 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

<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN' 'http://www.w3.org/TR/html4/loose.dtd'>
<html>
<head>
  <title>Studiereis Hong Kong</title>
  <link href='style.css' rel='stylesheet' type='text/css'>
</head>

<body>
<div id='wrap'>
   <div id='clock'>";
   <img src='klokkie.jpg'>
   </div>

   <div id='weather'>";

   require("weather.php");

   echo "
   </div>

   <div id='header'>
      <img src='images/logo.jpg' alt=''><br><br>Hier komt het nieuws te staan
   </div>
</div>
</body>
</html>

En 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

/***********************************************/
/* Algemeen                                   */
/***********************************************/
/* Force firefox to always show a vertical scrollbar */
html {
   overflow: -moz-scrollbars-vertical;
}

body {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   background-color: rgb(194,202,252);
   margin-left: 0px;
   margin-top: 0px;
}

#wrap {
   margin:0 auto;
   width: 980px;
}

/******************** Header *******************/
#clock {
   width: 110px;
   float: left;
   margin: -15px 0 0 0;
}

#header {
   width: 709px;
}

#weather {
   width: 150px;
   float: right;
   margin: 45px 0 0 0;
}

/******************** Menu *********************/
#menu{
   float: left;
   width: 120px;
   background-color: #FFFFFF;
   border: 1px solid #2900cf;
   margin-bottom: 5px;
}

In FF gaat het nu nog steeds niet goed. Ik heb echt geen flauw idee waarom.

dinsdag 28 november 2006 @ 22:22:17 #102

AnGabhar

quote:
Op dinsdag 28 november 2006 00:56 schreef mrbombastic het volgende:
Ok, ik heb de pagina even wat versimpeld. Hieronder de code.
[ code verwijderd ]

En CSS:
[ code verwijderd ]

In FF gaat het nu nog steeds niet goed. Ik heb echt geen flauw idee waarom.

Het is wellicht nuttig even ergens door te nemen hoe floats (horen te) werken.
In het kort wat je op je pagina doet:
- Je maakt een links floatend element;
- Je maakt een rechts floatend element;

Wat je moet beseffen is dat floats geen ruimte innemen op de pagina, maar er als het ware 'boven zweven'.

Nu ga je een div met een vaste breedte van 709px plaatsen. De browser plaatst die div in de linker bovenhoek van het scherm (zonder rekening te houden met de float linksboven; die beïnvloedt de plaatsing van nieuwe niet-floatende divs immers niet). Nu wil je een afbeelding van 709px breed in die div plaatsen, maar de linkerbovenhoek van de div wordt al ingenomen door zwevende inhoud. Dus schuift de browser de inhoud (tekst of plaatjes) net zo lang naar beneden tot het wel past.

Wat je zou kunnen doen is de div#header een margin-left van 110px geven, zodat het blok niet overlapt met het klokje.

En ja: Internet Explorers ondersteuning van het floatmodel is kut. Vertrouw daar niet op.

dinsdag 28 november 2006 @ 23:28:06 #103

mrbombastic

quote:
Op dinsdag 28 november 2006 22:22 schreef AnGabhar het volgende:

[..]
Wat je zou kunnen doen is de div#header een margin-left van 110px geven, zodat het blok niet overlapt met het klokje.

Bedankt.

.

Ik zal er rekening mee houden bij de volgende keer dat ik floats gebruik.

vrijdag 22 december 2006 @ 10:31:04 #104

Chandler

Ik zit met een probleem.

Op een website van mij heb ik een pagina gemaakt met een tabel, echter krijg ik voor deze tabel een stuk white space die even groot is als het tabel en als ik vanaf het eerste stukje whitespace ga selecteren zie je ook de data in het tabel geselcteerd worden. Nu vraag ik me af hoe dit mogelijk is? alle margins en paddings staan op 0!

Voorbeeld images

en (lijkt het zelfde, maar net even iets meer geselecteerd)

Je kunt het vinden op Gesloten tijd voor bepaalde vissoorten

Ik heb mijn style sheet goed doorgekeken maar kan niets vinden dat wijst op iets fouts ivm height oid.. Iemand een idee?

Just say hi!

vrijdag 22 december 2006 @ 10:34:42 #105

super-muffin

ik kan het probleem ook niet zo 1 2 3 vinden, maar waarom geef je de margins en paddings op in punten?

Trouwens, de grijs-witte balk loopt niet door in FireFox.

Steam - SC2

vrijdag 22 december 2006 @ 10:36:02 #106

HuHu

Je moet alle <br /> weghalen tussen je tabellen.

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

<table width="80%" style="margin: 0; padding: 0"><br />
<tr style="margin: 0; padding: 0"><br />
     <td style="margin: 0; padding: 0">Snoek</td><br />
     <td style="margin: 0; padding: 0"><strong>1 maart</strong> tot en met <strong>30 juni</strong></td><br />

</tr><br />
<tr style="margin: 0; padding: 0"><br />
     <td style="margin: 0; padding: 0">Barbeel, kopvoorn, serpeling, sneep, winde en de vlagzalm</td><br />
     <td style="margin: 0; padding: 0"><strong>1 april</strong> tot en met <strong>mei</strong></td><br />
</tr><br />
<tr style="margin: 0; padding: 0"><br />
     <td style="margin: 0; padding: 0">Snoekbaars en baars</td><br />
     <td style="margin: 0; padding: 0"><strong>1 april</strong> tot de laatste zaterdag in <strong>mei</strong></td><br />

</tr><br />
<tr><br />
     <td style="margin: 0; padding: 0">Beekforel, beekridder en bronforel</td><br />
     <td style="margin: 0; padding: 0">1 oktober t/m 31 maart</td><br />
</tr><br />
</table><br />

Die <br /> dingen mogen daar niet staan. Als ze er wel staan zorgen ze er voor dat er per <br /> een witregel boven de tabel verschijnt.

vrijdag 22 december 2006 @ 10:36:52 #107

HuHu

Heeft dus niets met het CSS te maken

.

vrijdag 22 december 2006 @ 11:07:15 #108

Chandler

OMG!! die br's zijn me niet eens opgevallen

-edit-
Jullie hebben helemaal gelijk, moet toch maar eens een WYSIWYG editor inbouwen

Just say hi!

vrijdag 22 december 2006 @ 11:16:31 #109

HuHu

quote:
Op vrijdag 22 december 2006 11:07 schreef Chandler het volgende:
OMG!! die br's zijn me niet eens opgevallen

-edit-
Jullie hebben helemaal gelijk, moet toch maar eens een WYSIWYG editor inbouwen

Je site ziet er overigens niet goed uit in Firefox 2. In IE is het geen probleem, maar in Fx loopt het niet echt lekker.

vrijdag 22 december 2006 @ 11:29:53 #110

Chandler

Nee, ik weet het. Maar heb helaas geen idee hoe ik de fouten oplos, heb mijn best gedaan op het menutje (linkerkant). Ook voor het laten doorlopen van het grijze menu balkje heb ik geen oplossing gevonden.

Echt lekker loopt de site niet in FF zoals je al zei, maar nogmaals krijg het zelf niet gefixt. Heb al aardig wat CSS kennis maar dit gaat me te boven

Just say hi!

woensdag 3 januari 2007 @ 16:43:35 #111

beerten

Vraagje:

ik wil <a name=""tekst">tekst</a> opmaken.
Ik heb hier invloed op met a:link{}
Maar is er ook iets waarmee uitsluitend <a name=""> mee kan opmaken? Het verschijnt nu als link in de browser en dat wil ik niet.
Hoe flik ik dat?

woensdag 3 januari 2007 @ 16:46:59 #112

Desdinova

Olaa

<a name="tekst" class="namedanchor">tekst</a>

vervolgens in je css:
a.namedanchor:link {}

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

woensdag 3 januari 2007 @ 16:51:55 #113

Desdinova

Olaa

quote:
Op vrijdag 22 december 2006 11:29 schreef Chandler het volgende:
Nee, ik weet het. Maar heb helaas geen idee hoe ik de fouten oplos, heb mijn best gedaan op het menutje (linkerkant). Ook voor het laten doorlopen van het grijze menu balkje heb ik geen oplossing gevonden.

Echt lekker loopt de site niet in FF zoals je al zei, maar nogmaals krijg het zelf niet gefixt. Heb al aardig wat CSS kennis maar dit gaat me te boven

zorg dat je de elementen body en html een height geeft van 100%. Standaard zijn deze elementen niet groter dan nodig is.

Voor firefox gebruik je min-height: 100%; voor een 100% vullend block-element (let op dat hij alleen hetgene waar hij in staat 100% vult! een div met 100% min-height in een div met height:50px resulteert dus in 50px hoog).

In IE6 zal dit niet werken, daar heb je height: 100% voor nodig. Echter is het aangeven van een hoogte volgens de specificaties volledig vast, dat houdt dus in dat firefox (de browser die volgens specificaties werkt (IE6 dus absoluut niet (belangrijk punt!

))) het betreffende element altijd en nooit iets anders dan 100% hoog is.

dus wat moet je doen, een hackje toepassen.
zet
height: auto !important;
height: 100%;
min-height: 100%;

IE6 doet niks met important dus houdt de laatst opgegeven waarde aan, alle andere browsers onthouden de important. IE6 wordt 100% hoog, en de rest gedraagt zich zoals normaal (en tevens zou horen).
door de min-height worden ook de andere browsers geattendeerd op een minimale hoogte.

alle browsers rekken nu uit naarmate de content groter wordt dan de opgegeven 100%.

Vergeet niet dat 100% altijd 100% van het parent-element is. Dat betekent dus als je een element met de hoogte van 100% bijvoorbeeld 50px; van de bovenkant afzet, hij ook 50px langer door zal lopen. de hoogte blijft altijd gelijk.

mzo

ga maar experimenteren.

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

vrijdag 12 januari 2007 @ 22:01:49 #114

MadGuy

Fever Ray

Ik ben nog stééds zo groen als wat op het gebied van CSS en dan loop je nogal eens tegen probleempjes aan.

Ik heb een opzetje voor mijn site hier staan. Voor het gemak heb ik mijn stylesheet hier opgeslagen.

Nu wil ik het volgende. In het navigatie gedeelte heb ik vier linkjes staan: Het begin, Over mij, Portfolio en Blog. Nu ben ik lekker eigenwijs en wil ik de drie laatsten - Over Mij, Portfolio en Blog - helemaal rechts hebben, zoals ze nu dus goed staan. Het begin wil ik echter helemaal links tussen de zwarte borders hebben staan. Nu is dat, zoals jullie zien, totaal mislukt. Ik kan er met mijn beperkte kennis even niet bij. Wie o wie kan mij helpen?

Overigens realiseer ik me dat er wellicht best wat rommel in de HTML of CSS kan staan of dat ik 't een en ander eigenlijk veel logischer kan aanpakken. Suggesties op dat gebied zijn ook van harte welkom, maar het gaat me met name om het navigatieprobleempje. De headers zijn en blijven plaatjes, no question about that.

Alvast bedankt.

last.fm
marksluymers.nl

vrijdag 12 januari 2007 @ 22:22:42 #115

HuHu

1
2
3

<span style="float:left;">Helemaal links</span>

<span style="float:right;">Dit staat helemaal rechts</span>

vrijdag 12 januari 2007 @ 22:23:23 #116

HuHu

En als de headers plaatjes blijven, doe er dan een alt attribuut bij.

vrijdag 12 januari 2007 @ 22:26:30 #117

MadGuy

Fever Ray

Dat van die alt attribuut was ik al van plan, maar dat is van later zorg.

Is het niet binnen CSS op te lossen, eigenlijk?

last.fm
marksluymers.nl

vrijdag 12 januari 2007 @ 22:30:20 #118

veldmuis

Ik heb ook een vraag!

.

Heb een div tagje gemaakt met daarin een plaatje, en nou wil ik dat divding en dus het plaatje in het midden van het browservenster hebben. Sowieso horizontaal, als het even kan ook verticaal. Het plaatje is 800x600, dus eigenlijk zou ik het op 50%-400pixels moeten zetten ofzo. Hoe doe je zoiets?

zaterdag 13 januari 2007 @ 11:49:32 #119

HuHu

1	<div style="margin:0px auto;">Horizontaal gecentreerd</div>

zaterdag 13 januari 2007 @ 11:55:02 #120

haaahaha

Je site verticaal en horizontaal uitlijnen (site heeft bv afmetingen 960x458pixels

css:

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

#wrapper {
height: 458px;
width: 960px;
position:absolute;
top: 50%;
margin-top: -229px;
left: 50%;
margin-left: -480px;
text-align: left;
}

#container {
width: 920px;
margin: 0em auto;
}

html:

1
2
3
4
5
6
7

<body>
<div id="wrapper">
<div id="container">
content
</div>
</div>
</body>

zaterdag 13 januari 2007 @ 11:57:12 #121

haaahaha

Zowel horizontaal als vertikaal centreren van een afbeelding in een DIV:

css:

1
2
3
4
5
6
7
8
9

div.afbeelding-container{
height:200px;
width:100px;
line-height:180px;
font-szie:180px;
}
div.afbeelding-container img{
vertical-align:middle
}

html:

1	<div class="afbeelding-container"><img src="afbeelding.gif" border="0" width="50" height="50"></div>

zaterdag 13 januari 2007 @ 11:59:16 #122

MysticBlue

I\'m mister blue

tvp

zaterdag 13 januari 2007 @ 13:34:42 #123

veldmuis

quote:
Op zaterdag 13 januari 2007 11:55 schreef haaahaha het volgende:
Je site verticaal en horizontaal uitlijnen (site heeft bv afmetingen 960x458pixels

css:

[ code verwijderd ]

html:

[ code verwijderd ]

Deze heb ik gebruikt, dat werkt prima.
Maar nu...als ik een 'layer' heb gemaakt met bovenstaande code, en ik wil daarop nog een layer leggen met tekst die bijvoorbeeld een stukje naar links staat, maar wel altijd daar, kan dat ook?
* veldmuis denkt dat-ie beter aan de flash kan :").

zaterdag 13 januari 2007 @ 14:02:58 #124

haaahaha

Je kan een layer absolute positioneren binnen een andere absoluut of relatief gepositioneerde layer. De binnenste layer zal dan het 0 punt van de layer daarbuiten nemen.

zaterdag 13 januari 2007 @ 15:25:00 #125

veldmuis

Ik denk dat ik toch meer hulp nodig heb :@.

1 2	<div id="wrapper"> <div id="container"><img src="back.jpg" width="800" height="600" border="0" /></div>

Dat heb ik nu van jou gekopieerd dus...maar hoe zet ik daarbinnen nou weer een ander ding? :P.

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

[CSS] voor dummies - Deel 5

» digital corner

» digital corner