[CSS] voor dummies - deel 9 | Digital Corner (DIG/DEV)

FOK!-Schrikkelbaas dinsdag 29 april 2008 @ 22:15:30 #51

Swetsenegger

Egocentrische Narcist

Ik zie nergens een form tag. heb je daar alle paddings en margins al uitgehaald?

Betrouwbare juwelier met korting |  | FOK! Schrikkelbaasch | Koop een vakantiewoning!

dinsdag 29 april 2008 @ 23:08:29 #52

CraZaay

prettig gestoord

quote:
Op dinsdag 29 april 2008 21:09 schreef Xcalibur het volgende:
Ik ben toch echt geen dummy, maar ik heb nu iets waar ik niet uitkom....

Kun je dit ergens online zetten? Kunnen we met Firebug realtime editen

dinsdag 29 april 2008 @ 23:21:12 #53

Light

quote:
Op dinsdag 29 april 2008 16:47 schreef Chandler het volgende:

[..]

Iemand tips?

text-indent: -999;
-999 wat? appels? peren?

En footer mag wel een clear: both;

Ik ga nog even verder kijken

fokstok.nl

woensdag 30 april 2008 @ 00:30:56 #54

Light

Try this:
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

@CHARSET "UTF-8";
html, body {
   background-color: #d8d0bd;
}
.box {
   width: 635px;
}
.box:hover, .ebhover {
   background-color: #b4a78d;
}
.header {
   height: 11px;
}
.box:hover .header, .ebhover .header {
   background-image: url(http://www.bruggema.nl/2/h1header.png);
}
.content {
   padding: 5px;
   width: 625px;
}
.footer {
   height: 11px;
   clear: both;
}
.box:hover .footer, .ebhover .footer {
   background-image: url(test);
}
.cleft, .cright {
   float: left;
   width: 50%;
}

HTML

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Test opzetje</title>
<link rel="stylesheet" style="text/css" href="hovertest2.css"/>
<meta http-equiv="Content-Type" content="text/xhtml; charset=iso-8859-15"/>
</head>
<body id="mybody">
<div class="box">
   <div class="header"></div>
   <div class="content">
      <div class="cleft">
         <img src="map.png" class="map" alt="map" />Test<br />
         <img src="pointer.png" class="pointer" alt="pointer" /> Korte omschrijving
      </div>
      <div class="cright">
         <select name="woei"><option>Sorteren op ABC</option><option>Sorteren op CBA</option></select>
      </div>
   </div>
   <div class="footer"></div>
</div>
<div class="box">
   <div class="header"></div>
   <div class="content">
      "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
   </div>
   <div class="footer"></div>
</div>
<div class="box">
   <div class="header"></div>
   <div class="content">
      non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
   </div>
   <div class="footer"></div>
</div>
<script type="text/javascript">
ebHover = function() {
   var ebEls = document.getElementById("mybody").getElementsByTagName("div");
   var regex = new RegExp('box');
   for (var i=0; i<ebEls.length; i++) {
      if(regex.test(ebEls[i].className)) {
         ebEls[i].onmouseover=function() {
            this.className+=" ebhover";
         }
         ebEls[i].onmouseout=function() {
            this.className=this.className.replace(new RegExp(" ebhover\\b"), "");
         }
      }
   }
}
if (window.attachEvent) window.attachEvent("onload", ebHover);
</script>
</body>
</html>

(De javascriptcode is een licht aangepaste versie van de code hier. Ik heb die code niet getest, zit hier ook zonder IE6. Kan dus ook niet garanderen dat het gaat werken.)

fokstok.nl

woensdag 30 april 2008 @ 08:38:50 #55

Chandler

@Light, jou hover is inderdaad fijner dan die van mij

maar ik heb die van mij gisteren reeds aangepast (en vandaag ook weer een beetje)

http://www.bruggema.nl/2/hovertest4.html (net even gespiekt bij jou codes) en dit er van gemaakt!

Maar nu als ik een item uit een pulldown wil selecteren en buiten het kader komt schiet mij box gelijk terug naar het orgineel, hoe kan ik dit oplossen?

Just say hi!

woensdag 30 april 2008 @ 09:51:40 #56

Xcalibur

quote:
Op dinsdag 29 april 2008 22:15 schreef Swetsenegger het volgende:
Ik zie nergens een form tag. heb je daar alle paddings en margins al uitgehaald?

De form tag staat sowieso buiten de table, dus die zou sowieso geen invloed moeten hebben op de ruimte in de TD?

Ik heb em hier online gezet: http://test.dubbelepunt.com/table_input.html
Ik ga zo Koninginnedag vieren, dus ik weet niet wanneer ik dit topic weer check

woensdag 30 april 2008 @ 14:49:37 #57

JJasperO

Goedemidkoninginnedag,

Enkel in IE6 blijft een div element onderin hangen

.

1
2
3

  <div id="navigatieDiv">
        <div id="linksDiv"><a href="index.html">SCHILDERIJEN</a><a href="beaottink.html">BEA OTTINK</a><a href="index.html">KUNSTMARKTEN</a><a href="index.html">CONTACT</a></div>
  </div>

1
2
3
4
5
6

#navigatieDiv {
   height: 515px;
   width: 110px;
   background-color: #333333;
   padding-top: 100px;
}

De navigatieDiv is ondergebracht in een containerDiv, heeft oorspronkelijk geen positioning eigenschappen meegekregen en is de parent div voor een child div dat linkjes bevat, zoals je in de html code hierboven kunt zien. Alle andere parent divs in de containerDiv hebben de eigenschap float right meegekregen en staan in de code allemaal voor de navigatieDiv zodat de navigatieDiv als vanzelf linksbovenin moet komen te staan zonder dat het de float right div elementen naar beneden drukt (hoewel dat volgens mij alleen gebeurt als je de navigatieDiv ook een float meegeeft). Dat gebeurt ook, behalve in IE6. Een float left haalt niks uit.

Ideeen?

Concept website. De links aan de linkerkant van het zwarte midden staan dus in de linksDiv welke is ondergebracht in de navigatieDiv waar we het hier over hebben.

woensdag 30 april 2008 @ 15:05:05 #58

CraZaay

prettig gestoord

Hey JJasperO, ook hier?

woensdag 30 april 2008 @ 15:54:58 #59

JJasperO

quote:
Op woensdag 30 april 2008 15:05 schreef CraZaay het volgende:
Hey JJasperO, ook hier?

correct

donderdag 1 mei 2008 @ 13:36:44 #60

Hmail

Ha, help

Ik heb een pagina die niet helemaal mee wil werken. Al met al heb ik door te doen al aardig wat geleerd, en tot nu toe lijkt het ook aardig goed te gaan, alleen heb ik in de huidige situatie even geen enkel idee hoe ik dit moet oplossen.
Probleem: http://geensite.nl/boxed/boxed.html
Zoals je ziet is het de bedoeling dat de div main_center doorloopt, stretcht. Alleen zou het prettig wezen als aan de linker-, en rechterkant de rest van de pagina ook mee loopt, in plaats van dat het halverwege ophoudt. Van de linkerkant snap ik het wel, daar heb ik (nog) overal fixed heights opgegeven, maar ik focus me nu eerst even op de rechterkant. Iemand enig idee hoe ik er voor zorg dat de div main_right net zo lang is als main_center?

Alvast bedankt

edit: Dit is dus wat ik bedoel: http://geensite.nl/boxed/stretch.html -> Hoe zorg ik dat div3 net zo lang word als div2?
edit2: Inmiddels allang opgelost

[ Bericht 7% gewijzigd door Hmail op 02-05-2008 00:59:20 ]

donderdag 1 mei 2008 @ 19:05:44 #61

Chandler

Crazzaaaaay? vergeet je mijn gevalideerd documentje niet?

Just say hi!

vrijdag 2 mei 2008 @ 11:54:43 #62

Xcalibur

quote:
Op woensdag 30 april 2008 09:51 schreef Xcalibur het volgende:
Ik heb em hier online gezet: http://test.dubbelepunt.com/table_input.html

Schopje

Ik heb dus een pixel ruimte tussen de TD en de INPUT, de vraag is hoe ik die weg krijg

zaterdag 3 mei 2008 @ 09:50:59 #63

Chandler

Heb je de border van de input al op 0 gezet? (hoop dat dat gaat werken hoor, niet getest)

Just say hi!

zaterdag 3 mei 2008 @ 09:54:52 #64

Light

quote:
Op vrijdag 2 mei 2008 11:54 schreef Xcalibur het volgende:

[..]

Schopje
Ik heb dus een pixel ruimte tussen de TD en de INPUT, de vraag is hoe ik die weg krijg

Nou, in ieder geval niet met inline styles. Of wel, maar je maakt het jezelf niet makkelijker en ik kan ook niet snel even wat testen.

fokstok.nl

maandag 5 mei 2008 @ 21:26:43 #65

Xcalibur

De inline styles zijn voor test-doeleinden, zodat ik het hier wat gemakkelijker kon posten

De border van de input op 0 helpt ook niet, en die staan hier ook voor test-doeleinden aan....

dinsdag 6 mei 2008 @ 08:40:07 #66

Tuvai.net

quote:
Op woensdag 30 april 2008 09:51 schreef Xcalibur het volgende:

[..]

De form tag staat sowieso buiten de table, dus die zou sowieso geen invloed moeten hebben op de ruimte in de TD?

Ik heb em hier online gezet: http://test.dubbelepunt.com/table_input.html
Ik ga zo Koninginnedag vieren, dus ik weet niet wanneer ik dit topic weer check

Ik zou sowieso eens beginnen met je apostrophes te vervangen voor aanhalingstekens.

Wat het probleem zelf betreft, probeer eens alles een margin en padding van 0 mee te geven, en de border van je inputs uit te schakelen.

EDIT: Dit werkt voor mij. Heb effe de <table> 1px cellspacing en een bgColor meegegeven zodat je de grijze achtergrond van deze table ziet. Door de <input>s op display:block te zetten ging de rare marge weg.

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
   <title>Table input</title>
</head>

<style type="text/css">
input{
   display:block;
}
</style>

<body>

<form action="" style="margin: 0; padding: 0;">
   <table cellspacing="1" cellpadding="0" style="background-color:#aaaaaa;">
      <tr>
         <td><input style="border-width:0; background-color: #FFBFBF;" /></td>
         <td><input style="border-width:0; background-color: #FFBFBF;" /></td>
      </tr>
      <tr>
         <td><input style="border-width:0; background-color: #FFBFBF;" /></td>
         <td><input style="border-width:0; background-color: #FFBFBF;" /></td>
      </tr>
      <tr>
         <td><img src="http://i.fokzine.net/pm_media/swtb_no_pm.png" width="15" height="15" border="0" /></td>
         <td><img src="http://i.fokzine.net/pm_media/swtb_no_pm.png" width="15" height="15" border="0" /></td>
      </tr>
   </table>
</form>

</body>
</html>

Maare, je weet dat je voor zulke dingetjes eigenlijk geen table moet gebruiken en dat een formulier in een <fieldset> hoort, toch?

[ Bericht 30% gewijzigd door Tuvai.net op 06-05-2008 08:48:38 ]

dinsdag 6 mei 2008 @ 11:09:25 #67

Xcalibur

quote:
Op dinsdag 6 mei 2008 08:40 schreef Tuvai.net het volgende:
Door de <input>s op display:block te zetten ging de rare marge weg.

Dat ga ik eens proberen dan

quote:
Op dinsdag 6 mei 2008 08:40 schreef Tuvai.net het volgende:
Maare, je weet dat je voor zulke dingetjes eigenlijk geen table moet gebruiken en dat een formulier in een <fieldset> hoort, toch?

Een normaal formulier gaat in een fieldset inderdaad, maar dit wordt een grid en is daarmee tabelvormig

Vandaar dat ik ook die gekke marge weg wil hebben, zodat ik de velden tegen elkaar kan zetten....

dinsdag 6 mei 2008 @ 19:28:25 #68

Xcalibur

Die display:block heeft bij mij geen enkel effect..... ?

zaterdag 24 mei 2008 @ 06:21:09 #69

DionysuZ

Respect my authority!

Ok vraagje, zit met een probleem en krijg deze niet opgelost.

Probleem is als volgt: ik heb een containerdiv (#menu) van een bepaalde, vaste grootte. In die container zit een unordered list met daarin alle menu items. Dit menu moet rechtsonder aan de div uitgelijnd zijn. Dit heb ik opgelost door de UL position: absolute te geven en bottom: 0.

Allemaal goed en aardig, werkt mooi. Maar nu wil ik, dat als de gebruiker bijv. een bepaalde tekstgrootte kiest (alle tekst is volgens em maten opgebouwd voor accessibility voor slechtzienden), of er meer dan een bepaalde hoeveelheid menuitems worden aangemaakt (variabel), dat de containerdiv dus gaat scrollen.

Nu dacht ik dat even op te lossen met overflow: auto. Maar dat werkt dus niet. Zelfs bij overflow: scroll blijven de scrollbalken grijs als je de tekst zó groot maakt dat hij buiten de kaders valt.

De enige oplossing was om de UL een vaste grootte te geven, maar dan is het menu weer niet volledig aan de onderkant van #menu uitgelijnd.

Probleem dus.

Weet iemand een oplossing?

□ 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 24 mei 2008 @ 09:15:43 #70

CraZaay

prettig gestoord

Door de absolute positionering haal je het menu uit de flow, en komen er dus geen scrollbalken. Heb je een voorbeeld online staan?

zaterdag 24 mei 2008 @ 20:49:21 #71

DionysuZ

Respect my authority!

quote:
Op zaterdag 24 mei 2008 09:15 schreef CraZaay het volgende:
Door de absolute positionering haal je het menu uit de flow, en komen er dus geen scrollbalken. Heb je een voorbeeld online staan?

ik kan wel een voorbeeld laten zien, maar omdat het de toekomstige site van een klant betreft kan ik die niet zomaar hier posten. PM misschien?

□ 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 30 mei 2008 @ 19:14:32 #72

Irix

Ik heb nogal een vaag probleem met het opmaken van submit buttons dmv css.

De relevante css code

input[type="submit"]
{

background-color: #3399FF;
border:double;
font-family:Verdana, Arial, Helvetica, sans-serif;

}

select {

background-color:#3399FF;
font-family:Verdana, Arial, Helvetica, sans-serif;
border:double;
}

Dit werkt allemaal prima op de meeste pagina's. Bij een pagina werkt 't echter niet.
De code van deze pagina is (let niet op php):

<form action="changebet2.php" method="post">
<input name="who" type="hidden" value="<?php echo $who;?>"/>
<select name="select">
<option>
€0M
</option>
<?php

$counter = '1';

while ($counter <= $money)
{
echo "<option>";
echo "€";
echo $counter;
echo "M";
echo "</option>";
$counter = $counter +1;
}
?>
</select>
<input type="submit" value="Place bet." name="submit"/>
</form>

Het select-menu ziet eruit zoals opgegeven in de css. De submit-button heeft een dubbele rand, maar het font-type klopt niet!

Het gekke is dat als ik of het select menu weghaal, of de submit button in de code boven de code van het select menu plak, dat het dan wel klopt. Weet iemand waarom dit is?

zaterdag 31 mei 2008 @ 10:36:28 #73

CraZaay

prettig gestoord

Begin eens met de geparste PHP (oftewel: de HTML die naar de browser gaat) te posten en deze binnen [code] tags te zetten

Je weet overigens dat deze CSS 3 selectors niet in alle browsers werken (lees: IE6 bijvoorbeeld)?

zaterdag 31 mei 2008 @ 10:37:12 #74

CraZaay

prettig gestoord

quote:
Op zaterdag 24 mei 2008 20:49 schreef DionysuZ het volgende:

ik kan wel een voorbeeld laten zien, maar omdat het de toekomstige site van een klant betreft kan ik die niet zomaar hier posten. PM misschien?

Late reacte: je kunt toch gewoon een testcase zonder bedrijfsgegevens online zetten

zaterdag 31 mei 2008 @ 12:09:58 #75

Light

quote:
Op zaterdag 31 mei 2008 10:36 schreef CraZaay het volgende:
Begin eens met de geparste PHP (oftewel: de HTML die naar de browser gaat) te posten en deze binnen [code] tags te zetten

Je weet overigens dat deze CSS 3 selectors niet in alle browsers werken (lees: IE6 bijvoorbeeld)?

Ik zie er ook nog php in staan, dus het zou ook binnen [php] tags mogen

fokstok.nl

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

[CSS] voor dummies - deel 9

» digital corner

» development

» digital corner

» development