[CSS] voor dummies #15

FOK!forum / Digital Corner / [CSS] voor dummies #15

Light

dinsdag 3 augustus 2010 @ 22:10

[CSS] voor dummies.
[CSS] voor dummies - Deel 2
[CSS] voor dummies - Deel 3
[CSS] voor dummies - Deel 4
[CSS] voor dummies - Deel 5
[CSS] voor dummies - deel 6
[CSS] voor dummies - Deel 7
[CSS] voor dummies - Deeltje 8
[CSS] voor dummies - deel 9
[CSS] voor dummies - deel 10
[CSS] voor dummies - deel 11
[CSS] voor dummies - deel 12
[CSS] voor dummies - deel 13
[CSS] voor dummies #14

Light

dinsdag 3 augustus 2010 @ 22:13

Uit het vorige topic:

quote:
Op dinsdag 3 augustus 2010 20:22 schreef Black-Hole het volgende:

[..]

Laat eens wat van je code zien, cross browser compatability is een bitch soms.

Het begint altijd bij de basis: declareer een doctype. Daar gaat het al mis.

PimD

dinsdag 3 augustus 2010 @ 22:33

Waarom is HTML/CSS toch iets geworden dat iedere gebruiker met een computer denkt te moeten kunnen zonder enige relevante research te doen? Ik ga toch ook niet een tafel in elkaar timmeren zonder daar op z'n minst een boek over te lezen of research over te doen

Black-Hole

woensdag 4 augustus 2010 @ 10:00

quote:
Op dinsdag 3 augustus 2010 22:13 schreef Light het volgende:
Het begint altijd bij de basis: declareer een doctype. Daar gaat het al mis.

Met HTLM5 is dat nu ontzettend simpel

1	<!doctype HTML>

Gitaarmat

woensdag 4 augustus 2010 @ 10:39

Dit is 'm dus, in Firefox ziet hij er netjes uit, niks geen pro website ofzo maar voor ons is het goed genoeg. Als jullie 'm in Firefox openen ziet hij er dan ook redelijk uit? Ik bedoel, rechte stukjes tekst en geen blauwe lijnen om de afbeeldingen heen?

Scorpie

woensdag 4 augustus 2010 @ 10:40

Pom pom

PimD

woensdag 4 augustus 2010 @ 17:39

Bij mij in Firefox 3.6 op de Mac lijkt hetnaar behoren te werken.

Black-Hole

woensdag 4 augustus 2010 @ 20:55

quote:
Op woensdag 4 augustus 2010 10:39 schreef Gitaarmat het volgende:
Dit is 'm dus, in Firefox ziet hij er netjes uit, niks geen pro website ofzo maar voor ons is het goed genoeg. Als jullie 'm in Firefox openen ziet hij er dan ook redelijk uit? Ik bedoel, rechte stukjes tekst en geen blauwe lijnen om de afbeeldingen heen?

Je laatste alinea is twee keer zichbaar hier in FF, loopt hele maal door van links naar rechts achter je main content om. Ook in Chrome is je laatste alinea niet goed gecentreerd. Hij neemt de hele pagina in beslag.

PimD

woensdag 4 augustus 2010 @ 20:57

Wel mooie Mystery Meat Navigation trouwens, chapeau!

Gitaarmat

donderdag 5 augustus 2010 @ 11:24

quote:
Op woensdag 4 augustus 2010 20:55 schreef Black-Hole het volgende:

[..]

Je laatste alinea is twee keer zichbaar hier in FF, loopt hele maal door van links naar rechts achter je main content om. Ook in Chrome is je laatste alinea niet goed gecentreerd. Hij neemt de hele pagina in beslag.

En nu dan? Bij mij ziet het er nu zo uit:

Pakspul

donderdag 5 augustus 2010 @ 16:37

Waarom werkt tekst transparantie in de volgende situatie niet?

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

Zoals te zien is dat bij de eerste div situatie de tekst gewoon mooi wit is, maar bij de twee is de tekst ineens roodachtig ook al zou je anders verwachten

mstx

donderdag 5 augustus 2010 @ 16:51

quote:
Op donderdag 5 augustus 2010 16:37 schreef Pakspul het volgende:
Waarom werkt tekst transparantie in de volgende situatie niet?
[ code verwijderd ]

Zoals te zien is dat bij de eerste div situatie de tekst gewoon mooi wit is, maar bij de twee is de tekst ineens roodachtig ook al zou je anders verwachten

Als je een div (half)transparant maakt geldt dat voor alles daar binnen in, ookal maak je dat weer 100% zichtbaar.
Dat die bovenste tekst wel mooi wit is komt omdat de achtergrond daar ook wit is, wit+wit blijft altijd wit. Daaronder echter zit alles in een container die een rode achtergrondkleur heeft. Wit+rood = roze.

Pakspul

donderdag 5 augustus 2010 @ 16:54

quote:
Op donderdag 5 augustus 2010 16:51 schreef mstx het volgende:

[..]

Als je een div (half)transparant maakt geldt dat voor alles daar binnen in, ookal maak je dat weer 100% zichtbaar.
Dat die bovenste tekst wel mooi wit is komt omdat de achtergrond daar ook wit is, wit+wit blijft altijd wit. Daaronder echter zit alles in een container die een rode achtergrondkleur heeft. Wit+rood = roze.

Ok en hoe kan ik er voor zorgen dat in de onderste situatie de tekst 100% wit is?

mstx

donderdag 5 augustus 2010 @ 17:00

quote:
Op donderdag 5 augustus 2010 16:54 schreef Pakspul het volgende:

[..]

Ok en hoe kan ik er voor zorgen dat in de onderste situatie de tekst 100% wit is?

- Halftransparante PNG als achtergrond nemen en geen opacity instellen
- Tekst in een aparte div er absoluut/relatief overheen plaatsen

PimD

donderdag 5 augustus 2010 @ 18:25

Of gewoon rgba-kleuren gebruiken.

Black-Hole

donderdag 5 augustus 2010 @ 22:25

quote:
Op donderdag 5 augustus 2010 11:24 schreef Gitaarmat het volgende:

En nu dan? Bij mij ziet het er nu zo uit:

Nu ziet het er prima uit, zowel in FF als Chrome.

Gitaarmat

vrijdag 6 augustus 2010 @ 13:17

quote:
Op donderdag 5 augustus 2010 22:25 schreef Black-Hole het volgende:

[..]

Nu ziet het er prima uit, zowel in FF als Chrome.

Toch in IE blijven er vage dingen, de tekst staat niet geheel in het midden, het lettertype van de agenda is ook ineens groter. Echt vage dingen.

Light

vrijdag 6 augustus 2010 @ 13:25

quote:
Op vrijdag 6 augustus 2010 13:17 schreef Gitaarmat het volgende:

[..]

Toch in IE blijven er vage dingen, de tekst staat niet geheel in het midden, het lettertype van de agenda is ook ineens groter. Echt vage dingen.

Dan moet je eerst zorgen dat je pagina's (de frameset en ook de achterliggende pagina's) valide html zijn. Met doctype. Het heeft geen zin om problemen op te willen lossen als de basis niet goed is.

Gitaarmat

vrijdag 6 augustus 2010 @ 13:30

quote:
Op vrijdag 6 augustus 2010 13:25 schreef Light het volgende:

[..]

Dan moet je eerst zorgen dat je pagina's (de frameset en ook de achterliggende pagina's) valide html zijn. Met doctype. Het heeft geen zin om problemen op te willen lossen als de basis niet goed is.

Daar begrijp ik het al niet.

Light

vrijdag 6 augustus 2010 @ 13:58

quote:
Op vrijdag 6 augustus 2010 13:30 schreef Gitaarmat het volgende:

[..]

Daar begrijp ik het al niet.

Hier staat meer informatie: http://www.w3.org/QA/2002/04/valid-dtd-list.html

Black-Hole

vrijdag 6 augustus 2010 @ 14:09

quote:
Op vrijdag 6 augustus 2010 13:30 schreef Gitaarmat het volgende:

[..]

Daar begrijp ik het al niet.

Zie mijn eerste post im dit topic, dat bovenaan je html file zetten is genoeg.

Light

vrijdag 6 augustus 2010 @ 14:34

quote:
Op vrijdag 6 augustus 2010 14:09 schreef Black-Hole het volgende:

[..]

Zie mijn eerste post im dit topic, dat bovenaan je html file zetten is genoeg.

Maar daarmee wordt de html gegarandeerd niet valide.

SPOILER
De font-tag bestaat niet in html5

Black-Hole

vrijdag 6 augustus 2010 @ 14:42

quote:
Op vrijdag 6 augustus 2010 14:34 schreef Light het volgende:

[..]

Maar daarmee wordt de html gegarandeerd niet valide.
SPOILER
De font-tag bestaat niet in html5

Fonts stijl je toch met css? Ik zie het probleem niet.

Light

vrijdag 6 augustus 2010 @ 15:22

quote:
Op vrijdag 6 augustus 2010 14:42 schreef Black-Hole het volgende:

[..]

Fonts stijl je toch met css? Ik zie het probleem niet.

De link die Gitaarmat gaf, gaat naar een frameset. Daar wordt dan 1 pagina geladen: http://ageless.nu/andthegodsmadecoffee/index.html . Die pagina is niet html4, niet xhtml1 en zeker niet html5.

Black-Hole

maandag 9 augustus 2010 @ 21:23

Vraagje over hoe jullie dit zouden aanpakken.

Voor de site die ik aan het bouwen ben ga ik gebruik maken van horizontale lijnen die de gedeeltes van de pagina's moeten scheiden. hiervoor gebruik ik een png-file van 1px die ik over de hele breedte wil herhalen. Alleen lukt het me niet goed om dit voor elkaar te krijgen aangezien de div die ik hiervoor gebruik verder leeg is. De volgende opmaak werkt wel maar is dus niet zichtbaar vanwege de lege div.

1
2
3
4

#lijn{
margin-top: 30px;
background: url('../images/line.png') repeat-x;
}

Werken met borders is geen optie aangezien de png-file bestaat uit 2 kleuren zodat de lijn een soort schaduweffect meekrijgt.

Hoe zouden jullie dit oplossen?

PimD

maandag 9 augustus 2010 @ 21:29

1
2
3
4
5

#lijn {
background:url(../images/line.png) repeat-x;
display:block;
height:1px;
}

Zou moeten werken. Overigens raad je ik aan om hier het horizontal rule element voor te gebruiken (<hr />), aangezien het daarvoor bedoeld is en die dan een background e.d. geven. Wel zo netjes

Black-Hole

maandag 9 augustus 2010 @ 21:44

quote:
Op maandag 9 augustus 2010 21:29 schreef PimD het volgende:

[ code verwijderd ]

Zou moeten werken. Overigens raad je ik aan om hier het horizontal rule element voor te gebruiken (<hr />), aangezien het daarvoor bedoeld is en die dan een background e.d. geven. Wel zo netjes

Dat werkt inderdaad

Nadeel van de <hr> tag is dat ik hm niet goed gestyled krijg en heel de ruimte inneemt en dat terwijl ik nog wat margins nodig heb links en rechts.

Light

maandag 9 augustus 2010 @ 22:05

quote:
Op maandag 9 augustus 2010 21:44 schreef Black-Hole het volgende:

[..]

Dat werkt inderdaad

Nadeel van de <hr> tag is dat ik hm niet goed gestyled krijg en heel de ruimte inneemt en dat terwijl ik nog wat margins nodig heb links en rechts.

Wat margins links en rechts kan toch gewoon?

1
2
3
4
5
6
7

hr {
    height: 2px;
    margin: 0 50px;
    background-color: #f00;
    border: 0;
    border-bottom: 1px solid #00f;
}

Black-Hole

maandag 9 augustus 2010 @ 22:29

quote:
Op maandag 9 augustus 2010 22:05 schreef Light het volgende:

[..]

Wat margins links en rechts kan toch gewoon?
[ code verwijderd ]

De styling ervan zorgt voor problemen in IE als ik ga werken met een background image, wat je weer kan verhelpen met een div maar dat maakt het allemaal nog complexer.

PimD

maandag 9 augustus 2010 @ 22:56

Maar wel semantisch correct.

Light

maandag 9 augustus 2010 @ 23:07

Ik heb hier zo geen IE om mee te testen

Maar volgens mij moet het gewoon met een hr zonder div kunnen. Ook in IE.

F4T4L_3RR0R

woensdag 18 augustus 2010 @ 06:02

Ik heb 2 div'jes naast elkaar in een andere div (container) staan.

Als ik de container bijvoorbeeld een rode background-color meegeef, dan is de container rood.

Float ik het linker div'je naar links dan werkt alles nog goed.
Float ik het rechter div'je naar rechts, dan verdwijnt de rode achtergrond in de container.

Wit is pagina.
Rood is container.
Groen is linker div.
Blauw is rechter div.

PimD

woensdag 18 augustus 2010 @ 07:17

Je moet de container "overflow:hidden" geven om de floats te clearen. Of de clearfix gebruiken (Googlen op clearfix) als je de bulletproof oplossing wilt gebruiken.

RenRen-

woensdag 18 augustus 2010 @ 11:47

Hoi,

Ik heb een menu, en als je over een link hovert, komt er een achtergrondafbeelding boven de link. Die afbeelding is 165 px ongeveer, kleiner zou gewoon misstaan.

Het punt is echter dat sommige menuitems veel smaller zijn dan 165 px, en dat de afbeelding wordt afgesneden. Hoe krijg ik het hokje waar een item in zit breder, zodat de afbeelding erin past?

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

#menu ul{

    display:inline-block;
    padding: 0;
    margin: 0;
    white-space: no-wrap;
}

#menu ul li{
    display: inline;
    list-style-type: none;
    float:left;
}

#menu ul li a{
    display:block;
    font-family: Arial, Helvetica, sans-serif;
    text-decoration: none;
    color:#000000;
    padding:10px 0px 10px 0px;
    text-indent:0px;
    font-size:15px;
    font-weight:bold;
    margin-right:30px;
    margin-left:60px;

}

#menu ul li a:hover{
    background-image:url(img/linkhovermenu.png);
    background-repeat:no-repeat;
    background-position:center;

}

Light

woensdag 18 augustus 2010 @ 11:52

Gewoon een breedte opgeven bij de links:

1
2
3

#menu ul li a {
width: 165px;
}

RenRen-

woensdag 18 augustus 2010 @ 11:54

Bedankt!

F4T4L_3RR0R

woensdag 18 augustus 2010 @ 15:07

quote:
Op woensdag 18 augustus 2010 07:17 schreef PimD het volgende:
Je moet de container "overflow:hidden" geven om de floats te clearen. Of de clearfix gebruiken (Googlen op clearfix) als je de bulletproof oplossing wilt gebruiken.

Div 1(wat eigenlijk eigenlijk een UL is wat ook een blokelement is) en div 2 zitten in de container die niet wordt gepositioneerd d.m.v. een float, maar door text-align: center.

Als ik de de floats in de container ga clearen, gebeurt er dit:

Voor de zekerheid de code zoals het nu is:

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

<?php
<div id="container">
  <ul id="menu">
    <li><a href="cam1.html">CAMERA 1</a></li>
    <li class="active"><a href="cam2.html">CAMERA 2</a></li>
    <li><a href="cam3.html">CAMERA 3</a></li>
    <li><a href="cam4.html">CAMERA 4</a></li>
  </ul>
  <div id="camera">
    
  </div>
</div>
?>

En de CSS opmaak:

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

<?php
* {
    margin: 0;
    padding: 0;
}

body {
    text-align: center;
    font-family: Verdana;
}

#container {
    margin: 0 auto 0 auto;
    width: 800px;
    heigth: auto;
    background-color: #FF0000;
}

ul#menu {
    float: left;
    margin: 0 auto 0 auto;
    list-style-type: none;
}

ul#menu li {
    margin: 0 0 10px 0;
}

ul#menu li a {
    display: block;
    color: #28549E;
    font-size: 14px;
    font-weight: bold;
    background-color: #FFFFFF;
    border: solid 2px #28549E;
    width: 125px;
    padding: 0.3em 0.2em 0.3em 0.3em;
    text-decoration: none;
}

ul#menu li a:hover {
    background-color: #E6EEF9;
}

ul#menu li.active a {
    color: #FFFFFF;
    background-color: #28549E;
}

ul#menu li.active a:hover {
    color: #28549E;
    background-color: #E6EEF9;
}

#camera {
    float: right;
    margin: 0 auto 0 auto;
    border: solid 1px #000000;
    width: 640px;
    height: 480px;
}
?>

[ Bericht 44% gewijzigd door F4T4L_3RR0R op 18-08-2010 15:15:06 ]

Light

woensdag 18 augustus 2010 @ 15:14

quote:
Op woensdag 18 augustus 2010 15:07 schreef F4T4L_3RR0R het volgende:

[..]

Div 1 en 2 zitten in de container die niet wordt gepositioneerd d.m.v. een float, maar door text-align: center.

Een div positioneren met text-align? Text-align is bedoeld voor tekst, niet voor divs. Dus hoe je dat wilt gebruiken, snap ik niet.

Het zou kunnen dat het in een enkele browser wel werkt, maar da's dan geen browsers die je moet willen gebruiken voor het ontwikkelen van een site. Hooguit op het laatst, om te kijken of alles daar ook goed staat.

F4T4L_3RR0R

woensdag 18 augustus 2010 @ 15:19

Ik zie nu dat ik de container toch heb gepositioneerd met: margin: 0 auto 0 auto;

Ik heb ook de code toegevoegd aan mijn vorige bericht.

ZwarteSteen

vrijdag 20 augustus 2010 @ 20:04

Welke tut raden jullie een complete noob aan? Vroegah een beetje geklooid met frontpage maar dat is verschrikkelijk. Ik neem aan dat ik genoeg heb aan dreamweaver?

PimD

vrijdag 20 augustus 2010 @ 20:26

Tutorials heb je vrij weinig aan naar mijn idee. Boeken als Handcrafted CSS, Transcending CSS of CSS Mastery geven je een veel beter beeld van WAAROM je iets doet, iets wat bij veel tutorials vaak niet of nauwelijks wordt gedaan naar mijn idee.

CSS is niet iets dat je even erbij leert van een tutorial. Goede HTML en CSS zijn een vak apart, zeker nu we steeds vaker voor verschillende soorten media ontwikkelen (iPad en andere mobiele devices). Het is vooral een kwestie van veel doen, proberen en lezen IMO.

Black-Hole

vrijdag 20 augustus 2010 @ 23:34

quote:
Op vrijdag 20 augustus 2010 20:04 schreef ZwarteSteen het volgende:
Welke tut raden jullie een complete noob aan? Vroegah een beetje geklooid met frontpage maar dat is verschrikkelijk. Ik neem aan dat ik genoeg heb aan dreamweaver?

Dit is een erg handige video guide die wel alle basics uitlegt (wel betaald) http://net.tutsplus.com/t(...)mplete-video-series/

Sowieso is net.tutsplus.com een erg goede site met veel tutorials, heb er zelf erg veel aan gehad als complete noob

wobbel

woensdag 25 augustus 2010 @ 17:41

Hoe heet die techniek waarmee je met 1 background plaatje de hele div kan vormgeven?

Gaat om een plaatje met daarin alle borders maar de div die wisselt steeds van afmetingen

PimD

woensdag 25 augustus 2010 @ 18:09

CSS sprites is bedoeld om zoveel mogelijk decoratieve elementen in 1 image te doen. Of dit is wat jij bedoelt vraag ik me echter af. Voor bijv. een box met ronde hoeken e.d. zul je toch meerdere div's moeten nesten. Of je moet gebruik maken van multiple backgrounds / border images natuurlijk, maar dat werkt nog niet echt cross-browser.

InTrePidIvity

woensdag 1 september 2010 @ 14:09

CSS kan toch niet de functionaliteit van een HTML-element wijzigen?

Met deze code werkt m'n search-bar namelijk niet:

1	.mini-search { position:absolute; bottom:0px; left:47px; width:300px; height:28px; }

Maar zo werkt het wel:

1	.mini-search { position:absolute; top:115px; right:0px; width:300px; height:28px; }

Nadeel is echter dat hij dan niet staat op de plaats waar ik het wil

Hoe kan dit (opgelost worden)?

PimD

woensdag 1 september 2010 @ 18:00

Geen idee, klinkt als een z-index probleem. Kun je ook je HTML online zetten?

InTrePidIvity

woensdag 1 september 2010 @ 18:03

quote:
Op woensdag 1 september 2010 18:00 schreef PimD het volgende:
Geen idee, klinkt als een z-index probleem. Kun je ook je HTML online zetten?

Het is al opgelost, het stond inderdaad niet goed in de HTML

RenRen-

zondag 5 september 2010 @ 23:10

Goh, ben ik weer. Ik probeer een footer aan de onderkant van mijn pagina te zetten. Dit werkt echter niet. Iemand had me al de tip gegeven mijn container een positie te geven, dit hielp echter niet. Ik krijg gewoon geen footer te zien.

Waar mis ik iets?

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

#container{
    width:820px;
    min-height:400px;
    margin:0 auto;
    background-color:#FFF;
    padding-top:30px;
    position:relative;

}
#footer{
    width:790;
    height:11px;
    background-image:url(img/bottomswirls.png);
    background-repeat:no-repeat;
    position: absolute;
    bottom:0;
}

Edit: Als ik er text in tik, in de footer, wordt hij een vierkantje van ca 30 bij 30 met de text erin. W�l aan de onderkant van de pagina.

Light

maandag 6 september 2010 @ 06:51

Staat de footerdiv wel in de containerdiv?

donroyco

vrijdag 17 september 2010 @ 01:02

Ik wil graag een footer die buiten de wrap omgaat (er na dus), die een eigen achtergrond-afbeelding heeft die 100% width heeft. Bij mijn probeerselen houd ik aan beide kanten (en onderkant) nog pixels over. Als body-achtergrond meegeven is geen optie, gezien de mogelijk variabele content. Iemand een oplossing?

Sitethief

vrijdag 17 september 2010 @ 08:33

quote:
Op vrijdag 17 september 2010 01:02 schreef donroyco het volgende:
Ik wil graag een footer die buiten de wrap omgaat (er na dus), die een eigen achtergrond-afbeelding heeft die 100% width heeft. Bij mijn probeerselen houd ik aan beide kanten (en onderkant) nog pixels over. Als body-achtergrond meegeven is geen optie, gezien de mogelijk variabele content. Iemand een oplossing?

Kijk eerst even met Firebug of een andere tool welke eigenschappen allemaal van toepassing zijn op de footer. Misschien ontdek je dan wat de boosdoener is.

donroyco

vrijdag 17 september 2010 @ 09:01

quote:
Op vrijdag 17 september 2010 08:33 schreef Sitethief het volgende:

[..]

Kijk eerst even met Firebug of een andere tool welke eigenschappen allemaal van toepassing zijn op de footer. Misschien ontdek je dan wat de boosdoener is.

Heeft tot nu toe geen nut gehad. Is er geen andere oplossing?

PimD

vrijdag 17 september 2010 @ 09:30

Gooi eens een voorbeeld online dan? In principe zou dat geen enkel probleem moeten zijn, dus wellicht zit er inderdaad iets anders in je code wat voor een probleem zorgt. Ik neem aan dat je net zoiets bedoelt als op mijn website?

donroyco

vrijdag 17 september 2010 @ 09:47

quote:
Op vrijdag 17 september 2010 09:30 schreef PimD het volgende:
Gooi eens een voorbeeld online dan? In principe zou dat geen enkel probleem moeten zijn, dus wellicht zit er inderdaad iets anders in je code wat voor een probleem zorgt. Ik neem aan dat je net zoiets bedoelt als op mijn website?

Precies, zoiets als jouw website (tof met Last.fm integratie!). Zie: http://www.bringindoorback.com/test Thanks alvast

PimD

vrijdag 17 september 2010 @ 10:13

Je moet wel een CSS-reset gebruiken he, dat je body geen margin meer heeft. Dan werkt het bij mij in Firefox prima

donroyco

vrijdag 17 september 2010 @ 10:35

quote:
Op vrijdag 17 september 2010 10:13 schreef PimD het volgende:
Je moet wel een CSS-reset gebruiken he, dat je body geen margin meer heeft. Dan werkt het bij mij in Firefox prima

Thanks, even proberen.
^{Als het internet meewerkt}

Light

vrijdag 17 september 2010 @ 10:52

quote:
Op vrijdag 17 september 2010 10:13 schreef PimD het volgende:
Je moet wel een CSS-reset gebruiken he, dat je body geen margin meer heeft. Dan werkt het bij mij in Firefox prima

Je kunt ook gewoon de volgende code toevoegen aan het css-bestand:

1
2
3
4

html, body {
margin: 0;
padding: 0;
}

Om daar nou een css reset voor te gaan laden, is wat overkill.

PimD

vrijdag 17 september 2010 @ 10:55

Ja dat kan ook. Maar ik gok dat je dan nog op 100 andere plekken margin:0 en padding:0 gaat krijgen. Ik gebruik persoonlijk gewoon de reset van Eric Meyer als een op zich zelf staande file, maar als je het in je main CSS-file gooit werkt het natuurlijk ook prima.

donroyco

vrijdag 17 september 2010 @ 11:02

Ik ga wat aanklooien, thanks beiden

Tuvai.net

vrijdag 17 september 2010 @ 11:45

CSS Resets moet je sowieso vermijden als de pest, en alleen gebruiken als het �cht niet op een andere manier kan. Je lost ��n probleem op, maar cre�ert er weer 2 voor latere scenario's.

Daarbij, ik heb in al de jaren dat ik al met CSS klooi, nog n��it een CSS reset hoeven te gebruiken. Wel heb ik in templates/websites moeten werken waar men dat w�l gedaan had, en dat was verschrikkelijk kan ik je vertellen.

Light

vrijdag 17 september 2010 @ 12:11

quote:
Op vrijdag 17 september 2010 10:55 schreef PimD het volgende:
Ja dat kan ook. Maar ik gok dat je dan nog op 100 andere plekken margin:0 en padding:0 gaat krijgen. Ik gebruik persoonlijk gewoon de reset van Eric Meyer als een op zich zelf staande file, maar als je het in je main CSS-file gooit werkt het natuurlijk ook prima.

Ik heb die reset css eens bekeken en ik zie alleen maar een hoop problemen ontstaan die achteraf weer moeten worden opgelost.

Tuvai.net

vrijdag 17 september 2010 @ 12:46

quote:
Op vrijdag 17 september 2010 12:11 schreef Light het volgende:

[..]

Ik heb die reset css eens bekeken en ik zie alleen maar een hoop problemen ontstaan die achteraf weer moeten worden opgelost.

Ik vind sommige 'standaard' stylen van bepaalde elementen juist handig. Denk aan marges bij bijvoorbeeld (un)ordered lists, paragrafen, kopjes, enzovoorts. Ik heb aan websites gewerkt waar een CSS reset was toegepast, en moest daar naderhand pagina's toe gaan voegen met bijvoorbeeld lijsten aan nieuwsberichten. Vre-se-lijk irritant om dan achteraf weer voor elk element een hele stijl op te gaan bouwen.

Beter maak je gewoon, in zoverre dat mogelijk is, je layout schaalbaar/flexibel zodat deze er tegen kan dat sommige elementen onder omstandigheden kunnen verschillen qua afmetingen, marges en uitlijning. Dan hou je ook nog eens beter rekening met dingen als groter ingestelde lettertypen e.d.

Semmm

zaterdag 16 oktober 2010 @ 00:45

Even een vraagje, ik wil als ik met m'n muis over een woord ga dat er dan een Textbox opent, soort van dropdown menu dus maar dan niet met linkjes en met een hele tekst ipv korte zinnetjes.

Alvast bedankt

donroyco

zaterdag 16 oktober 2010 @ 00:48

quote:
Op zaterdag 16 oktober 2010 00:45 schreef Semmm het volgende:
Even een vraagje, ik wil als ik met m'n muis over een tekst ga dat er dan een Textbox opent, soort van dropdown menu dus maar dan niet met linkjes en met een hele tekst ipv korte zinnetjes.

Alvast bedankt

http://jackosborne.co.uk/(...)-the-pseudo-element/

Semmm

zaterdag 16 oktober 2010 @ 01:08

quote:
Op zaterdag 16 oktober 2010 00:48 schreef donroyco het volgende:

[..]

http://jackosborne.co.uk/(...)-the-pseudo-element/

Bedankt voor de snelle reactie, dit is inderdaad wat ik bedoel maar ik krijg het niet voor elkaar om meerdere regels onderelkaar te zetten, het wordt 1 lange regel die uiteindelijk buiten beeld valt. Iemand nog idee�n?

donroyco

zaterdag 16 oktober 2010 @ 01:10

quote:
Op zaterdag 16 oktober 2010 01:08 schreef Semmm het volgende:

[..]

Bedankt voor de snelle reactie, dit is inderdaad wat ik bedoel maar ik krijg het niet voor elkaar om meerdere regels onderelkaar te zetten, het wordt 1 lange regel die uiteindelijk buiten beeld valt. Iemand nog idee�n?

Mag JavaScript ook?

Dan kan dit van toepassing zijn:
http://www.bosrup.com/web/overlib/

PimD

zaterdag 16 oktober 2010 @ 09:36

Je kunt het :after element toch gewoon een breedte geven. Volgens mij worden de regels dan gewoon keurig afgebroken.

Semmm

zaterdag 16 oktober 2010 @ 11:13

quote:
Op zaterdag 16 oktober 2010 09:36 schreef PimD het volgende:
Je kunt het :after element toch gewoon een breedte geven. Volgens mij worden de regels dan gewoon keurig afgebroken.

Ja inderdaad, daar kwam ik later ook achter. Ik zit nu met een ander probleempje, de tekst wordt nu 2x weergegeven, 1x zoals in het tekstvak wat ik wil, en 1x als naam van de tekst zegmaar

Hoe haal ik die 2e weg zodat ik alleen het tekstvak heb.

Light

zaterdag 16 oktober 2010 @ 11:36

quote:
Op zaterdag 16 oktober 2010 09:36 schreef PimD het volgende:
Je kunt het :after element toch gewoon een breedte geven. Volgens mij worden de regels dan gewoon keurig afgebroken.

Dat wordt alsnog een probleem als je bij de rechterkant van het (browser)scherm komt. Met een beetje pech komt je :after-element alsnog buiten het scherm.

Light

zaterdag 16 oktober 2010 @ 11:36

quote:
Op zaterdag 16 oktober 2010 11:13 schreef Semmm het volgende:

[..]

Ja inderdaad, daar kwam ik later ook achter. Ik zit nu met een ander probleempje, de tekst wordt nu 2x weergegeven, 1x zoals in het tekstvak wat ik wil, en 1x als naam van de tekst zegmaar
[ afbeelding ]

Hoe haal ik die 2e weg zodat ik alleen het tekstvak heb.

Dan zal de tekst ook wel twee keer in de html-broncode staan. Daar moet het dus 1 keer uit.

Semmm

zaterdag 16 oktober 2010 @ 11:37

quote:
Op zaterdag 16 oktober 2010 11:36 schreef Light het volgende:

[..]

Dat wordt alsnog een probleem als je bij de rechterkant van het (browser)scherm komt. Met een beetje pech komt je :after-element alsnog buiten het scherm.

Nee, ik heb de Margin-Left op ongeveer -100 staan zodat het textvak niet buiten de site valt.

Semmm

zaterdag 16 oktober 2010 @ 11:39

quote:
Op zaterdag 16 oktober 2010 11:36 schreef Light het volgende:

[..]

Dan zal de tekst ook wel twee keer in de html-broncode staan. Daar moet het dus 1 keer uit.

Nee, dat is het niet, hier is de code.

1 2	<a name="Beschrijving"><span title="Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test " class="tooltip" >Beschrijving </span>

Light

zaterdag 16 oktober 2010 @ 12:21

quote:
Op zaterdag 16 oktober 2010 11:39 schreef Semmm het volgende:

[..]

Nee, dat is het niet, hier is de code.
[ code verwijderd ]

Dat lichte vlak met donkere tekst komt door het title-attribuut. Waarom die tekst dan twee keer verschijnt, kan ik niet zien aan die halve regel html. Kun je de hele zooi (html/css/javascript) ergens online zetten?

Semmm

zaterdag 16 oktober 2010 @ 12:28

quote:
Op zaterdag 16 oktober 2010 12:21 schreef Light het volgende:

[..]

Dat lichte vlak met donkere tekst komt door het title-attribuut. Waarom die tekst dan twee keer verschijnt, kan ik niet zien aan die halve regel html. Kun je de hele zooi (html/css/javascript) ergens online zetten?

html: http://codeviewer.org/view/code:12c0
css: http://codeviewer.org/view/code:12c1

Light

zaterdag 16 oktober 2010 @ 13:14

quote:
Op zaterdag 16 oktober 2010 12:28 schreef Semmm het volgende:

[..]

html: http://codeviewer.org/view/code:12c0
css: http://codeviewer.org/view/code:12c1

Ah, de title wordt door de browser netjes weergegeven (donkere tekst op lichte achtergrond) zoals de bedoeling is bij een title-attribuut. De tweede versie (lichte tekst op donkere achtergrond) komt door css.

1 2	.tooltip:hover:after { content: attr(title);

Die eerste kun je niet voorkomen.

Overigens is je (x)html ook verre van valide, maar dat heeft in dit geval geen invloed op het probleem.

Semmm

zaterdag 16 oktober 2010 @ 14:01

quote:
Op zaterdag 16 oktober 2010 13:14 schreef Light het volgende:

[..]

Ah, de title wordt door de browser netjes weergegeven (donkere tekst op lichte achtergrond) zoals de bedoeling is bij een title-attribuut. De tweede versie (lichte tekst op donkere achtergrond) komt door css.
[ code verwijderd ]

Die eerste kun je niet voorkomen.

Overigens is je (x)html ook verre van valide, maar dat heeft in dit geval geen invloed op het probleem.

Kan ik de tekst lichte tekst op donkere achtergrond dan niet op een andere manier laten weergeven zodat de donkere text op lichte achtergrond niet komt of eventueel op een andere positie zodat die buiten beeld valt?

En dat de site niet valid is weet ik, is gemaakt in dreamweaver, ik haal de fouten er achteraf uit.

Semmm

zaterdag 16 oktober 2010 @ 14:10

quote:
Op zaterdag 16 oktober 2010 14:01 schreef Semmm het volgende:

[..]

Kan ik de tekst lichte tekst op donkere achtergrond dan niet op een andere manier laten weergeven zodat de donkere text op lichte achtergrond niet komt of eventueel op een andere positie zodat die buiten beeld valt?

En dat de site niet valid is weet ik, is gemaakt in dreamweaver, ik haal de fouten er achteraf uit.

Het is me gelukt,

heb in de css

1 2	.tooltip:hover:after { content: attr(title);

veranderd in

1 2	.tooltip:hover:after { content: attr(alt);

en in html de title ook vervangen door alt, nu werkt het prima

Dankje voor jullie hulp ook

Semmm

zondag 17 oktober 2010 @ 02:11

quote:
Op zaterdag 16 oktober 2010 14:10 schreef Semmm het volgende:

[..]

Het is me gelukt,

heb in de css
[ code verwijderd ]

veranderd in
[ code verwijderd ]

en in html de title ook vervangen door alt, nu werkt het prima

Dankje voor jullie hulp ook

Nu stuit ik op het volgende probleem, ik wil de regel zelf handmatig kunnen afbreken en naar de volgende gaan, is dit mogelijk?

Light

zondag 17 oktober 2010 @ 10:50

quote:
Op zondag 17 oktober 2010 02:11 schreef Semmm het volgende:

[..]

Nu stuit ik op het volgende probleem, ik wil de regel zelf handmatig kunnen afbreken en naar de volgende gaan, is dit mogelijk?

Hoe zou je dat in html doen, en heb je die oplossing al geprobeerd?

PimD

zondag 17 oktober 2010 @ 11:54

Het alt-attribuut wordt in IE trouwens volgens mij nog steeds getoond in zo'n gele ballon. Ik weet zo 1-2-3 niet of het ook nog in IE8 en IE9 is (zal wel niet), maar in IE6 en IE7 weet ik het vrij zeker.

Light

zondag 17 oktober 2010 @ 12:01

quote:
Op zondag 17 oktober 2010 11:54 schreef PimD het volgende:
Het alt-attribuut wordt in IE trouwens volgens mij nog steeds getoond in zo'n gele ballon. Ik weet zo 1-2-3 niet of het ook nog in IE8 en IE9 is (zal wel niet), maar in IE6 en IE7 weet ik het vrij zeker.

Dat doen die browsers dan fout. Maar het was al bekend dat IE zich niet altijd volledig aan de standaarden houdt.

PimD

zondag 17 oktober 2010 @ 12:05

Dat die browsers het verkeerd doen moge duidelijk zijn. Waar heb je die tooltips trouwens nu opzitten? Want alleen img's/area's mogen een ALt-attribuut hebben, dus een span/div/whatever niet.

Semmm

zondag 17 oktober 2010 @ 15:11

quote:
Op zondag 17 oktober 2010 12:05 schreef PimD het volgende:
Dat die browsers het verkeerd doen moge duidelijk zijn. Waar heb je die tooltips trouwens nu opzitten? Want alleen img's/area's mogen een ALt-attribuut hebben, dus een span/div/whatever niet.

kon hem veranderen in alles wat ik wil, heb hem nu maar "tekst"genoemd, het gaat me er nu even niet om of het wel of niet mag, maar of het werkt

De zin afbreken met <br /> werkt niet omdat het binnen een atribuut is. heb al geprobeerd heel vaak achter elkaar te zetten maar dan staat het wel goed in Google Chrome maar niet in IE en FF

Semmm

maandag 18 oktober 2010 @ 17:02

quote:
Op zondag 17 oktober 2010 15:11 schreef Semmm het volgende:

[..]

kon hem veranderen in alles wat ik wil, heb hem nu maar "tekst"genoemd, het gaat me er nu even niet om of het wel of niet mag, maar of het werkt

De zin afbreken met <br /> werkt niet omdat het binnen een atribuut is. heb al geprobeerd heel vaak achter elkaar te zetten maar dan staat het wel goed in Google Chrome maar niet in IE en FF

Iemand?

MrNiles

woensdag 27 oktober 2010 @ 14:39

Ik ben op zoek naar een eenvoudige photoviewer voor op een website, liefst helemaal CSS.
bestaat er iets op internet of een programmatje waar je foto's "inlaadt" en er code (en thumbnails) uit komt zodat ik weinig programmeer werk moet doen.
Als ik dan nog meer eisen mag stellen dan zou ik graag een thumbnail overzicht hebben van alle foto's en als je dan een foto aanklikt dat deze dan groter wordt getoont (midden op het scherm oid)

donroyco

woensdag 27 oktober 2010 @ 14:43

quote:
Op woensdag 27 oktober 2010 14:39 schreef MrNiles het volgende:
Ik ben op zoek naar een eenvoudige photoviewer voor op een website, liefst helemaal CSS.
bestaat er iets op internet of een programmatje waar je foto's "inlaadt" en er code (en thumbnails) uit komt zodat ik weinig programmeer werk moet doen.
Als ik dan nog meer eisen mag stellen dan zou ik graag een thumbnail overzicht hebben van alle foto's en als je dan een foto aanklikt dat deze dan groter wordt getoont (midden op het scherm oid)

Eerst:

Serieus: alleen CSS gaat niet werken. Zoek eens op Google naar jQuery Photo Viewer of iets dergelijks.

MrNiles

woensdag 27 oktober 2010 @ 14:54

quote:
Op woensdag 27 oktober 2010 14:43 schreef donroyco het volgende:

[..]

Eerst:

Serieus: alleen CSS gaat niet werken. Zoek eens op Google naar jQuery Photo Viewer of iets dergelijks.

Eerst:

maar goed...allemaal leuke voorbeelden maar ik kan niet vinden die voor mij de code "maakt"
Ik heb geen zin om voor heel veel foto's code te gaan zitten tikken

donroyco

woensdag 27 oktober 2010 @ 15:00

quote:
Op woensdag 27 oktober 2010 14:54 schreef MrNiles het volgende:

[..]

Eerst:

maar goed...allemaal leuke voorbeelden maar ik kan niet vinden die voor mij de code "maakt"
Ik heb geen zin om voor heel veel foto's code te gaan zitten tikken

Luie flikker

MrNiles

woensdag 27 oktober 2010 @ 15:16

quote:
Op woensdag 27 oktober 2010 15:00 schreef donroyco het volgende:

[..]

Luie flikker

klopt..liever lui dan moe!

PimD

woensdag 27 oktober 2010 @ 19:06

Gebruik dan gewoon flickr als je te lui bent om een paar regels code te schrijven

MrNiles

donderdag 28 oktober 2010 @ 11:40

quote:
Op woensdag 27 oktober 2010 19:06 schreef PimD het volgende:
Gebruik dan gewoon flickr als je te lui bent om een paar regels code te schrijven

luie flickr

en een luie flickr ben ik

maar dankzij de paar steekwoorden als jquery is het na 2dagen proberen gelukt
met galleria, mooie vloeiende overgangen...enne...dankzij een phpscriptje op een forun vd site kan ik nu jpg in het mapje pleuren en komen ze mooi op de site te staan
THANX

[ Bericht 28% gewijzigd door MrNiles op 28-10-2010 16:17:49 ]

Dalando

zondag 28 november 2010 @ 10:45

Jongens, ik heb hulp nodig...

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

body {
                background-color: #DDDDDD;
                text-align:center;
            }

            body, td, div, ul, button, textarea, input {
                font: 12px helvetica,arial,sans-serif;
            }

#header2 {
                background-color: #C90000;
            }
a.menubutton {
                display:inline;
                margin: 1px;
                background-color:#D80000  ;
                width:90px;
            }

            a.menubutton:hover {
                background-color:#C00000;
            }

1
2
3
4

Nu zouden de menuknopjes van .menubutton veranderen in width en height, maar dat doen ze dus niet. Help?

donroyco

zondag 28 november 2010 @ 12:15

quote:
Op zondag 28 november 2010 10:45 schreef Dalando het volgende:
Jongens, ik heb hulp nodig...
[ code verwijderd ]

[ code verwijderd ]

Nu zouden de menuknopjes van .menubutton veranderen in width en height, maar dat doen ze dus niet. Help?

dan moet je bij :hover wel de gewenste hoogte en breedte meegeven.

Dalando

zondag 28 november 2010 @ 13:13

quote:
Op zondag 28 november 2010 12:15 schreef donroyco het volgende:

[..]

dan moet je bij :hover wel de gewenste hoogte en breedte meegeven.

Doet niks...

Light

zondag 28 november 2010 @ 22:40

quote:
Op zondag 28 november 2010 13:13 schreef Dalando het volgende:

[..]

Doet niks...

Bij een inline element worden hoogte en breedte genegeerd. Je zou er display: block; of display: inline-block; van moeten maken.

Je kunt ook overwegen om alle menu-items dezelfde onderlinge afstand te geven, dat kan met margin en/of padding. En dat werkt ook bij inline elementen.

Overigens zie ik een menu als een lijst van linkjes:

1
2
3
4
5
6

Die kun je ook net zo stylen als je zelf wilt.

mschol

vrijdag 3 december 2010 @ 17:35

ik probeer de <dfn> tag te restylen zodat hij een gestippeld of gestreept (dotted/dashed) streepje weergeeft in rood onder de tekst...
ik gebruik nu

1
2
3
4
5

border-bottom-color: #FF0000;
border-bottom-style: dotted;
border-bottom-width: 1px;
color: #4D528C;
font-style:normal

dit komt echter te dicht op de volgende regel tekst te staan, ik kan e.v.t. kijken of ik de verticale ruimte tussen de tekst kan vergroten, maar het liefst zet ik het streepje op dezelfde plek als wanneer er een link is...

CSS3 heeft wel een mogelijkheid om de underline style aan te passen.., maar daar doe ik nog eff niet aan.
iemand tips hoe dit e.v.t. wel goed op te lossen is zonder de verticale ruimte tussen tekst aan te passen?

en als ik dan toch bezig ben:
ik heb een form knopje aangepast zodat er rond de knop een border verschijnt zodra er overheen gehovered wordt

1
2
3
4
5
6
7
8

.submitsearch{
    border:1px hidden;
    background-color:transparent;
}

.submitsearch:hover{
    border:1px solid;
}

in FF pakt hij hem vrijwel altijd goed (volgens mij 1x niet goed gegaan)
in IE8 pakt hij hem van boven, links en rechts zover ik gezien heb altijd goed.. echter pakt hij hem van onderen (lees: je komt met je muis op de button van onderen) bijna nooit, veel vaker niet dan wel iig. bugje in IE? of ligt het wellicht ergens anders aan? (omdat hij het immers een enkele keer in FF niet doet)

[ Bericht 34% gewijzigd door mschol op 03-12-2010 17:51:36 ]

RenRen-

zondag 5 december 2010 @ 20:26

Ik ben bezig een mobiele site te maken.

Ik heb een menu, daarin twee divjes. De informatie in beide divs moet in het midden zitten. Ik gebruik geen pixels of iets om alles te centreren, omdat de site schaalbaar moet zijn. Maar daardoor krijg ik niets in het midden.

Ik heb het geprobeerd door margin-left en -right op auto te zetten, float-left of -right en dan 100px, maar dan is de site niet meer schaalbaar en schiet de rechter url onder de andere url.

Iemand een idee hoe ik ze in het midden kan krijgen zonder gezeik te krijgen met schaalbaarheid?

(Door het schaalbaarheidverhaal kon ik de divs ook niet een breedte geven, waardoor een align in de html ook niet werkte)

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

#menuitems{

    float:left;
    margin-left:auto;
    margin-right:auto;
}

#menuitems2{
    float:right;
    margin-right:auto;
    margin-left:auto;

}
<div id="menu"><div id="menuitems"><a href="lost.html">Lost</a></div>
        <div id="menuitems2"><a href="found.html">Found</a></div>

donroyco

zondag 5 december 2010 @ 20:28

Je moet wel een breedte aangeven, anders weet ie niet waar ie op moet uitlijnen.

Probeer eens: width: 100%;

RenRen-

zondag 5 december 2010 @ 20:31

quote:
Op zondag 5 december 2010 20:28 schreef donroyco het volgende:
Je moet wel een breedte aangeven, anders weet ie niet waar ie op moet uitlijnen.

Probeer eens: width: 100%;

Hm, nu snapt hij het al helemaal niet meer, krijg ik gelijk dat ze onder elkaar gaan staan ipv naast elkaar

Wel een goede trouwens, even 50% proberen.

RenRen-

zondag 5 december 2010 @ 20:31

Dankje! 50/49 werkt wel, en is schaalbaar

donroyco

zondag 5 december 2010 @ 20:35

quote:
Op zondag 5 december 2010 20:31 schreef RenRen- het volgende:
Dankje! 50/49 werkt wel, en is schaalbaar

Cool.

Light

zondag 5 december 2010 @ 23:27

quote:
Op zondag 5 december 2010 20:31 schreef RenRen- het volgende:
Dankje! 50/49 werkt wel, en is schaalbaar

Als je ze allebei 49% maakt, zijn ze even breed en passen ze ook naast elkaar

Ik weet niet of het belangrijk is dat ze allebei even breed zijn, maar het kan leuker lijken.

RenRen-

zondag 5 december 2010 @ 23:29

quote:
Op zondag 5 december 2010 23:27 schreef Light het volgende:

[..]

Als je ze allebei 49% maakt, zijn ze even breed en passen ze ook naast elkaar Ik weet niet of het belangrijk is dat ze allebei even breed zijn, maar het kan leuker lijken.

Het stoort niet in ieder geval. Maar kan ik er geen kritiek op krijgen, dat is altijd positief.
Edit: Done

Tijn

zaterdag 18 december 2010 @ 00:05

Weet iemand of Opera 11 nu eindelijk ook CSS gradients ondersteunt?

tim2308

zondag 19 december 2010 @ 01:13

Hallo,

Op de pagina www.yepcheck.com/icharts/ heb ik volgende CSS

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

#links ul
{
padding:5px; margin:2px;color:#fff;font-family: arial, helvetica, sans-serif;
font-size:75%;list-style-type:none;
}

#links ul li { display: inline; }

#links li a
{padding:0.7em 0.7em 0.2em 0.7em; background:#6cf;
color:#000;text-decoration:none; border:1px solid #000;
}

#links li a:hover
{
background:#c80;color:#fff;
}

en de volgende HTML (verkort)

1
2
3

levert dit op

Maar hoe krijg ik het plaatje nu verticaal gecentreerd in het blokje? Hij blijft maar bovenin als ik de padding verhoog. Ik heb het idee dat het heel simpel is, maar ik kom er niet achter. (trouwens het twitterdingetje opmaken/positioneren is een vraag apart, waar ik nu even geen aandacht aan besteed)

PimD

zondag 19 december 2010 @ 11:10

Je zou kunnen proberen wat te klooien met vertical-align. Maar mooier zou IMO zijn om de afbeelding als background-image te gebruiken (en dan via CSS te centreren) en de tekst (bijv. "Google") met een negatieve text-indent buiten beeld te plaatsen. Google maar eens op image replacement.

Light

zondag 19 december 2010 @ 11:39

Ik zou juist de css aanpassen:

1
2
3
4
5
6
7
8
9

#links ul li {
    display: block;
    float: left;
    width: auto;
}
#links li a {
    display: block;
    width: auto;
}

En die rare <li> </li> in de broncode van de pagina hoort daar natuurlijk ook niet. Dat kun je met margins veel beter oplossen

PimD

zondag 19 december 2010 @ 11:54

En sowieso alles lowercase uiteraard, hoewel het in HTML5 weer gewoon mag zoals je zelf wilt... Ik blijf lekker XHTML strict-style coden

tim2308

maandag 20 december 2010 @ 02:41

Dank voor de antwoorden, met een beetje puzzelen (en valsspelen door twee <BR>'s toe te voegen - anders kreeg ik het opvolgende nummer meteen na het laatste plaatje en de lijn te hoog. Ik moet nog ergens display:block invoegen, maar waar?)

) is het gelukt!

Die <li> </li> was omdat ik alleen d��r een lege ruimte wil, maar is verandert nu

... Maar valt idd ook onder het kopje valsspelen. Ik moet me maar eens in de basiskennis duiken ipv alleen maar te kopieren/plakken

[ Bericht 11% gewijzigd door tim2308 op 20-12-2010 03:01:47 ]

BigSmurf

donderdag 23 december 2010 @ 21:23

Ik ben bezig met een website in XHTML en CSS, waarbij ik op de contact-pagina graag een formulier wil maken. Niet te moeilijk, gewoon een formulier met Voornaam, Achternaam, Telefoonnummer, E-mailadres, Onderwerp en daaronder een vak voor het bericht.

Nou wil ik dit verzonden hebben naar een e-mailadres, maar het schijnt dat onderstaande heel spam-gevoelig is?

<form method="post" action="Mailto:mail@mail.nl">

Is hier een "veiligere" oplossing voor zonder PHP te hoeven gebruiken, aangezien ik daar geen ervaring mee heb?

PimD

donderdag 23 december 2010 @ 21:25

Volgens mij werkt dat niet eens? Of ja, de mail zal dan in de outbox van je mailprogramma worden gezet - terwijl veel mensen bijv. GMail of Hotmail gebruiken en daardoor dus geen mailprogramma hebben ingesteld. Het beste kun je toch gewoon een server-side formulier maken lijkt me. Er zijn vast zat PHP (of wat dan ook) tutorials te vinden voor een simpel formuliertje.

BigSmurf

donderdag 23 december 2010 @ 21:30

quote:
Op donderdag 23 december 2010 21:25 schreef PimD het volgende:
Volgens mij werkt dat niet eens? Of ja, de mail zal dan in de outbox van je mailprogramma worden gezet - terwijl veel mensen bijv. GMail of Hotmail gebruiken en daardoor dus geen mailprogramma hebben ingesteld. Het beste kun je toch gewoon een server-side formulier maken lijkt me. Er zijn vast zat PHP (of wat dan ook) tutorials te vinden voor een simpel formuliertje.

Daar was ik dus al bang voor. Nou ja, dan toch maar wat gaan verdiepen in PHP. Is het met PHP wel mogelijk om de opmaak te behouden die ik heb gemaakt in CSS?

Light

donderdag 23 december 2010 @ 21:32

quote:
Op donderdag 23 december 2010 21:23 schreef BigSmurf het volgende:
Ik ben bezig met een website in XHTML en CSS, waarbij ik op de contact-pagina graag een formulier wil maken. Niet te moeilijk, gewoon een formulier met Voornaam, Achternaam, Telefoonnummer, E-mailadres, Onderwerp en daaronder een vak voor het bericht.

Nou wil ik dit verzonden hebben naar een e-mailadres, maar het schijnt dat onderstaande heel spam-gevoelig is?

<form method="post" action="Mailto:mail@mail.nl">

Is hier een "veiligere" oplossing voor zonder PHP te hoeven gebruiken, aangezien ik daar geen ervaring mee heb?

Misschien heeft je hoster wel een standaard cgi-scriptje dat je kunt gebruiken. Andere optie zou kunnen zijn dat je gewoon een linkje maakt van het mailadres en dat de bezoeker dan gewoon zelf in z'n mailprogramma het een en ander kan invullen. Maar dan heb je geen voorbedrukt formulier.

Light

donderdag 23 december 2010 @ 21:39

quote:
Op donderdag 23 december 2010 21:30 schreef BigSmurf het volgende:

[..]

Daar was ik dus al bang voor. Nou ja, dan toch maar wat gaan verdiepen in PHP. Is het met PHP wel mogelijk om de opmaak te behouden die ik heb gemaakt in CSS?

De uitvoer van een php-script is (over het algemeen) een html-pagina.

Voor je browser maakt het niet uit of die html uit een statische pagina of uit een php-script komt.

BigSmurf

donderdag 23 december 2010 @ 21:51

quote:
Op donderdag 23 december 2010 21:39 schreef Light het volgende:

[..]

De uitvoer van een php-script is (over het algemeen) een html-pagina. Voor je browser maakt het niet uit of die html uit een statische pagina of uit een php-script komt.

Dan ga ik me maar eens verdiepen in zo'n PHP-scriptje. Merci.

Black-Hole

vrijdag 24 december 2010 @ 01:01

quote:
Op donderdag 23 december 2010 21:51 schreef BigSmurf het volgende:

[..]

Dan ga ik me maar eens verdiepen in zo'n PHP-scriptje. Merci.

Helemaal kant en klaar en volledig aan te passen inclusief Catpcha voor $ 3,-. Gebruik hem zelf ook en het werkt fantastisch http://codecanyon.net/item/simple-php-contact-form/46679

KomtTijd...

vrijdag 24 december 2010 @ 01:17

quote:
Op vrijdag 24 december 2010 01:01 schreef Black-Hole het volgende:

[..]

Helemaal kant en klaar en volledig aan te passen inclusief Catpcha voor $ 3,-. Gebruik hem zelf ook en het werkt fantastisch http://codecanyon.net/item/simple-php-contact-form/46679

Hmm 3 euro? Zou ik toch even doorzoeken, er zijn zat gratis scriptjes te vinden.

Black-Hole

vrijdag 24 december 2010 @ 09:50

quote:
Op vrijdag 24 december 2010 01:17 schreef KomtTijd... het volgende:

[..]

Hmm 3 euro? Zou ik toch even doorzoeken, er zijn zat gratis scriptjes te vinden.

Ik heb zelf ook lang gezocht naar goed werkende scriptjes inclusief Captcha maar veel werkten niet, niet volledig of waren lastig te stijlen. Waarom dan moeilijk doen voor $ 3,-. Alle tijd die je bezig bent met zoeken kost eigenlijk ook geld dus dan is zo'n bedrag te verwaarlozen. Maar goed dat is allemaal off-topic.

Tegan

vrijdag 24 december 2010 @ 15:01

Hoe kan je de space tussen div's bepalen? Volgens mij is het sowieso niet mogelijk om ze helemaal weg te halen.

Tussen header, content en footer zit nu een lege regel (ook nog eens verschillend in grootte omdat bv. de footer een kleiner lettertype gebruikt. Ik wil dat al die lege regels allemaal bv. 20px zijn.

Ik kan het makkelijk door de header, content en footer padding te geven, maar dat is toch minder mooi vind ik.

1
2
3
4
5
6
7
8
9

KomtTijd...

vrijdag 24 december 2010 @ 15:02

Zit je wel in strict mode? Een div zou namelijk sowieso geen margin moeten hebben.

Tegan

vrijdag 24 december 2010 @ 15:05

Een div heeft toch de eigenschap om op de volgende regel pasdoor te gaan, er zit dus een lege regel tussen div's.

*googled strict mode*

KomtTijd...

vrijdag 24 december 2010 @ 15:08

Een div is niets anders dan een block-level element zonder enige semantische waarde of standaardopmaak. Alles wat je er aan margins en paddings aan wilt hebben moet je zelf defineren. Dus als het goed is zouden 2 opvolgende divs waar je niets aan gedaan hebt, gewoon met de boven- en onderkant tegen elkaar aan moeten staan.

Light

vrijdag 24 december 2010 @ 15:09

quote:
Op vrijdag 24 december 2010 15:05 schreef Tegan het volgende:
Een div heeft toch de eigenschap om op de volgende regel pasdoor te gaan, er zit dus een lege regel tussen div's.

Ik denk dat de ruimte tussen de div's niet komt door de div's maar door wat er in die div's zit. Headers en paragrafen zijn leuk wat dat betreft

KomtTijd...

vrijdag 24 december 2010 @ 15:10

quote:
Op vrijdag 24 december 2010 15:09 schreef Light het volgende:

[..]

Ik denk dat de ruimte tussen de div's niet komt door de div's maar door wat er in die div's zit. Headers en paragrafen zijn leuk wat dat betreft

Ohja. Margin-collapse, wie dat ooit verzonnen heeft, mogen ze van mij afschieten

Tegan

vrijdag 24 december 2010 @ 15:11

quote:
Op vrijdag 24 december 2010 15:09 schreef Light het volgende:

[..]

Ik denk dat de ruimte tussen de div's niet komt door de div's maar door wat er in die div's zit. Headers en paragrafen zijn leuk wat dat betreft

Dat dacht ik ook. Maar, als ik mijn verschillende div's een kleurtje geef krijg ik dit.

Zwart = BODY, wit = container, geel = header, blauw = content, rood = footer, paars = wrap.

Light

vrijdag 24 december 2010 @ 15:13

quote:
Op vrijdag 24 december 2010 15:10 schreef KomtTijd... het volgende:

[..]

Ohja. Margin-collapse, wie dat ooit verzonnen heeft, mogen ze van mij afschieten

Oplossing is overigens om die divs te laten floaten. Dan gaat het wel goed.

KomtTijd...

vrijdag 24 december 2010 @ 15:14

quote:
Op vrijdag 24 december 2010 15:13 schreef Light het volgende:

[..]

Oplossing is overigens om die divs te laten floaten. Dan gaat het wel goed.

Overflow defineren werkt ook dacht ik.

Light

vrijdag 24 december 2010 @ 15:14

quote:
Op vrijdag 24 december 2010 15:11 schreef Tegan het volgende:

[..]

Dat dacht ik ook. Maar, als ik mijn verschillende div's een kleurtje geef krijg ik dit.

[ afbeelding ]

Zwart = BODY, wit = container, geel = header, blauw = content, rood = footer, paars = wrap.

Dan moet er dus iets in die divs (header, content en footer) zitten. Of heb je die warp-divs zelf toegevoegd?

Light

vrijdag 24 december 2010 @ 15:16

quote:
Op vrijdag 24 december 2010 15:14 schreef KomtTijd... het volgende:

[..]

Overflow defineren werkt ook dacht ik.

Zou kunnen, ik ben meer een fan van float

Tegan

vrijdag 24 december 2010 @ 15:16

quote:
Op vrijdag 24 december 2010 15:14 schreef Light het volgende:

[..]

Dan moet er dus iets in die divs (header, content en footer) zitten. Of heb je die warp-divs zelf toegevoegd?

Wrap is een grote div waar header, content en footer inzitten. Maar padding is 0px. Anders zou je ook nog een rand om die drie heen zien. Maar die regels ertussen blijven wel

. Die wil ik weg.

KomtTijd...

vrijdag 24 december 2010 @ 15:18

quote:
Op vrijdag 24 december 2010 15:16 schreef Tegan het volgende:

[..]

Wrap is een grote div waar header, content en footer inzitten. Maar padding is 0px. Anders zou je ook nog een rand om die drie heen zien. Maar die regels ertussen blijven wel . Die wil ik weg.

Maak eens een testcase met de code zo kaal als je 'm hier beschrijft:

quote:
Op vrijdag 24 december 2010 15:01 schreef Tegan het volgende:
Hoe kan je de space tussen div's bepalen? Volgens mij is het sowieso niet mogelijk om ze helemaal weg te halen.

Tussen header, content en footer zit nu een lege regel (ook nog eens verschillend in grootte omdat bv. de footer een kleiner lettertype gebruikt. Ik wil dat al die lege regels allemaal bv. 20px zijn.

Ik kan het makkelijk door de header, content en footer padding te geven, maar dat is toch minder mooi vind ik.

[ code verwijderd ]

Eventjes alle divs een kleurtje geven en van de margins en paddings afblijven. Gaat het dan wel goed?

Tegan

vrijdag 24 december 2010 @ 15:22

quote:
Op vrijdag 24 december 2010 15:18 schreef KomtTijd... het volgende:

[..]

Maak eens een testcase met de code zo kaal als je 'm hier beschrijft:

[..]

Eventjes alle divs een kleurtje geven en van de margins en paddings afblijven. Gaat het dan wel goed?

Hm, dan wel. Even spelen.

Tegan

vrijdag 24 december 2010 @ 15:25

quote:
Op vrijdag 24 december 2010 15:22 schreef Tegan het volgende:

[..]

Hm, dan wel. Even spelen.

Ok, het komt door de <H1> en <P> enzo

KomtTijd...

vrijdag 24 december 2010 @ 15:26

quote:
Op vrijdag 24 december 2010 15:25 schreef Tegan het volgende:

[..]

Ok, het komt door de <H1> en <P> enzo .

Scroll terug naar <margin-collapse>

Tegan

vrijdag 24 december 2010 @ 15:29

quote:
Op vrijdag 24 december 2010 15:26 schreef KomtTijd... het volgende:

[..]

Scroll terug naar <margin-collapse>

Nou ok. Hoe fix ik dat?

KomtTijd...

vrijdag 24 december 2010 @ 15:29

quote:
Op vrijdag 24 december 2010 15:14 schreef KomtTijd... het volgende:

[..]

Overflow defineren werkt ook dacht ik.

Tegan

vrijdag 24 december 2010 @ 15:38

1
2
3
4

H1 {margin:0px;padding:0px;}
H2 {margin:0px;padding:0px;}
H3 {margin:0px;padding:0px;}
P {margin:0px;padding:0px;}

Hiermee zijn ze iig weg.

KomtTijd...

vrijdag 24 december 2010 @ 15:43

Ja, maar dan hebben je headings en paragrafen ook geen margins en paddings meer.

Tegan

vrijdag 24 december 2010 @ 15:44

Dat is wel jammer ja

Tegan

vrijdag 24 december 2010 @ 15:58

Alle div's op padding:1px ipv 0px werkt. Alleen dan nog hebben ze nog de top en bottom padding van de content, en niet een fixed grootte. Het was mooier als de eerste en laatste paragraaf in een div geen top danwel bottom padding hadden.

KomtTijd...

vrijdag 24 december 2010 @ 16:07

Laten we daar nou de psuedo-classes voor hebben? p:first-child en p:last-child

Tegan

vrijdag 24 december 2010 @ 16:08

quote:
Op vrijdag 24 december 2010 16:07 schreef KomtTijd... het volgende:
Laten we daar nou de psuedo-classes voor hebben? p:first-child en p:last-child

Beter

. Even kijken of dat werkt.

Tegan

vrijdag 24 december 2010 @ 16:18

1 2	H1:first-child, H2:first-child, H3:first-child, P:first-child {padding-top:0px;} H1:last-child, H2:last-child, H3:last-child, P:last-child {padding-bottom:0px;}

Werkt niet.

Dit moest het zijn.

1 2	H1:first-child, H2:first-child, H3:first-child, P:first-child {margin-top:0px;} H1:last-child, H2:last-child, H3:last-child, P:last-child {margin-bottom:0px;}

.

[ Bericht 39% gewijzigd door Tegan op 24-12-2010 16:47:19 ]

Tegan

vrijdag 24 december 2010 @ 16:54

Ok, mooi. Thanks voor alle hulp

. Nu is mijn content compleet apart van de weergave

Tegan

vrijdag 24 december 2010 @ 16:57

Ok, nog een ding.

Ik wil dat dat wit doorgaat tot onderaan de pagina ipv dat het stopt als er geen content meer is. Dit gaat automatisch goed als het scherm te klein is, maar anders dus niet.

KomtTijd...

vrijdag 24 december 2010 @ 17:04

Body en wrapper min-heigth: 100%

Footer eventueel absoluut positioneren in de wrapper, faux columns er tegenaan en voilla.

Tegan

vrijdag 24 december 2010 @ 17:10

quote:
Op vrijdag 24 december 2010 17:04 schreef KomtTijd... het volgende:
Body en wrapper min-heigth: 100%

Footer eventueel absoluut positioneren in de wrapper, faux columns er tegenaan en voilla.

Kan je iets specifieker zijn?

PimD

vrijdag 24 december 2010 @ 17:44

Faux columns is het gebruik van een achtergrond-afbeelding om kolommen te simuleren die tot onderaan het scherm doorlopen.

Light

zondag 26 december 2010 @ 20:56

quote:
Op vrijdag 24 december 2010 16:18 schreef Tegan het volgende:

[ code verwijderd ]

Werkt niet.

Dit moest het zijn.

[ code verwijderd ]

.

Alleen jammer dat last-child nog te weinig ondersteund wordt. IE8 snapt het ook niet.

PimD

zondag 26 december 2010 @ 21:00

Inderdaad. Ik gebruik zelf nog steeds vaak classes .first en .last. Erg jammer, goede support voor al die pseudo-classes maakt het werk zo veel makkelijker. Tuurlijk zijn er Javascript hacks die moderne CSS ook werkend maakt in IE6/7/8 - maar mijn ervaring is dat de performance van dat soort scripts nogal eens te wensen over laat.

KomtTijd...

zondag 26 december 2010 @ 21:22

Ik probeer meestal een combi van margins/paddings te verzinnen zodat het zowel boven- als onderaan gewoon goed uit komt. Meestal is dat wel te doen maar ik kan me idd wel situaties indenken waarin je daar niet mee weg komt.

mschol

zondag 26 december 2010 @ 22:20

ik probeer op een template (geleend uit Dreamweaver) een aanpassing te maken zodat de onderkant een x aantal pixels van de browser rand zit, zodat je dus de body background ziet..
alleen pakt hij om de 1 of andere wazige reden margin-bottom niet..
ik heb met firebug gekeken of hij wellicht werd overruled ofzo, maar daar komt bar weinig uit..
iemand die een zetje in de goede richting kan geven?
http://tinyurl.com/2v7r9zl <- een voorbeeld

het gaat mij dus om de #pagecel1 die ik een stukje van de browser rand wil hebben...
wat doe ik verkeerd?

KomtTijd...

zondag 26 december 2010 @ 22:23

Ding is absoluut gepositioneerd.... Dat kun je wel schudden dus!

mschol

zondag 26 december 2010 @ 22:27

quote:
Op zondag 26 december 2010 22:23 schreef KomtTijd... het volgende:
Ding is absoluut gepositioneerd.... Dat kun je wel schudden dus!

hmm oke, jammer dan

edit:
dit heeft me wel de goede richting op geduwd..
ik heb het element nu relative i.p.v. absoluut gepositioneerd
de top:109px weggehaald en
Margin-bottom:10px;
Margin-top:109px;
toegevoegd, wellicht is dit een erg smerige manier van doen, maar de site oogt zowel in FF als in IE nog zoals bedoeld, maar nu met een onderrandje...
ik weet echter niet wat er gebeurd als de content veranderd

(mocht dat toch problemen opleveren, draai ik het terug

[ Bericht 39% gewijzigd door mschol op 26-12-2010 22:48:11 ]

Tegan

maandag 27 december 2010 @ 00:00

quote:
Op zondag 26 december 2010 21:00 schreef PimD het volgende:
Inderdaad. Ik gebruik zelf nog steeds vaak classes .first en .last. Erg jammer, goede support voor al die pseudo-classes maakt het werk zo veel makkelijker. Tuurlijk zijn er Javascript hacks die moderne CSS ook werkend maakt in IE6/7/8 - maar mijn ervaring is dat de performance van dat soort scripts nogal eens te wensen over laat.

Maarja, dat is lastig als niet zeker is welke paragraaf de eerste en welke de laatste wordt.

PimD

maandag 27 december 2010 @ 00:09

Voor dat soort gevallen gebruik ik dan dus ook gewoon pseudoselectors. Dingen als de eerste alinea van een artikel dikgedrukt en iets groter tonen is dan iets wat mensen met een oude browser maar moeten missen. Voor essentiele dingen als menu's e.d. kun je dat echter niet maken IMO, dat bijv. een laatste menu item van het scherm valt omdat de browser :last-child/:last-of-type (nog) niet ondersteunt.

KomtTijd...

maandag 27 december 2010 @ 00:09

quote:
Op zondag 26 december 2010 22:27 schreef mschol het volgende:

[..]

hmm oke, jammer dan

edit:
dit heeft me wel de goede richting op geduwd..
ik heb het element nu relative i.p.v. absoluut gepositioneerd
de top:109px weggehaald en
Margin-bottom:10px;
Margin-top:109px;
toegevoegd, wellicht is dit een erg smerige manier van doen, maar de site oogt zowel in FF als in IE nog zoals bedoeld, maar nu met een onderrandje...
ik weet echter niet wat er gebeurd als de content veranderd (mocht dat toch problemen opleveren, draai ik het terug

Zo'n div uberhaupt absoluut positioneren is de smerige manier van doen. Maar in principe moet het zo gewoon goed gaan denk ik.

KomtTijd...

maandag 27 december 2010 @ 00:11

quote:
Op maandag 27 december 2010 00:09 schreef PimD het volgende:
Voor dat soort gevallen gebruik ik dan dus ook gewoon pseudoselectors. Dingen als de eerste alinea van een artikel dikgedrukt en iets groter tonen is dan iets wat mensen met een oude browser maar moeten missen. Voor essentiele dingen als menu's e.d. kun je dat echter niet maken IMO, dat bijv. een laatste menu item van het scherm valt omdat de browser :last-child/:last-of-type (nog) niet ondersteunt.

Inderdaad. Schijt hebben aan IE is steeds vaker ook mijn oplossing voor datsoort details.

http://dowebsitesneedtolookexactlythesameineverybrowser.com/

PimD

maandag 27 december 2010 @ 00:18

Precies. Nu de opdrachtgevers van mn baas er nog van zien te overtuigen. Gaat al steeds beter, IE6 is nauwelijks meer aandacht voor, maar men wil toch wel vaak graag een 1:1 replica zien van de statische PSD's die gemaakt zijn. Ik snap niet dat er nog steeds bedrijven zijn die websites tot op de pixel nauwkeurig uitwerken in Photoshop - en daarna uren bezig zijn om het pixel voor pixel na te maken. Heeft geen zin, is meestal niet haalbaar en levert naar mijn idee ook geen enkele meerwaarde op. Maar ja...

mschol

maandag 27 december 2010 @ 01:24

quote:
Op maandag 27 december 2010 00:09 schreef KomtTijd... het volgende:

[..]

Zo'n div uberhaupt absoluut positioneren is de smerige manier van doen. Maar in principe moet het zo gewoon goed gaan denk ik.

in IE7 viel de gehele navigatie balk bovenin de pagina weg, met wat aanpassen ziet hij er zo goed als hetzelfde uit in IE7/IE8/IE9, FF & Chrome
in IE6 ziet hij er wel hetzelfde uit, maar functioneert hij niet goed i.v.m. een CSS :hover die ik gebruik voor navigatie
dat ga ik alleen niet aanpassen.. geen zin in en het is redelijk nutteloos...

ursel

maandag 27 december 2010 @ 11:24

Hey hey.

Even een vraagje.
Ik heb nu de volgende site:

http://deridderbrandbeveiliging.nl/index_new.htm

Echter wil ik dat het logo vlak boven de paarse footer komt te staan in plaats van vlak onder het menu.

Alleen lukt het me niet.

PimD

maandag 27 december 2010 @ 11:27

Dat logo moet je dan absoluut positioneren, maar dit wordt lastig omdat je de kolommen ook relatief positioneert (tenzij je met een negatieve bottom-positionering gaat werken als de hoogte van de linkerkolom vast staat). Anders zou ik de #logo-div verplaatsen en die absolute positioneren van de onderkant.

Waarom je uberhaupt een logo onderaan het scherm zou willen is uiteraard een heel ander punt

ursel

maandag 27 december 2010 @ 11:30

quote:
Op maandag 27 december 2010 11:27 schreef PimD het volgende:
Dat logo moet je dan absoluut positioneren, maar dit wordt lastig omdat je de kolommen ook relatief positioneert (tenzij je met een negatieve bottom-positionering gaat werken als de hoogte van de linkerkolom vast staat). Anders zou ik de #logo-div verplaatsen en die absolute positioneren van de onderkant.

Waarom je uberhaupt een logo onderaan het scherm zou willen is uiteraard een heel ander punt

Mja, het logo had ik nu al klaar staan. Maar aan de rechterkant komt ook een image die hetzelfde zou moeten doen.

Bottom hoogte staat vast. Ga daar denk even mee stoeien. Tnx

Tegan

maandag 27 december 2010 @ 12:52

quote:
Op maandag 27 december 2010 00:09 schreef PimD het volgende:
Voor dat soort gevallen gebruik ik dan dus ook gewoon pseudoselectors. Dingen als de eerste alinea van een artikel dikgedrukt en iets groter tonen is dan iets wat mensen met een oude browser maar moeten missen. Voor essentiele dingen als menu's e.d. kun je dat echter niet maken IMO, dat bijv. een laatste menu item van het scherm valt omdat de browser :last-child/:last-of-type (nog) niet ondersteunt.

Idd. Het ging om de margin van de tekst, dat is niet echt heel storend als het fout gaat.

Peem

maandag 3 januari 2011 @ 16:21

Lieve schatten, kan iemand me even uit de brand helpen? Op ��n of andere manier maakt Chrome van mijn images/bg.jpg, word het css/images/bg.jpg. Dit doet het bij 2 images, de rest niet.. Anyone got a clue?

Thanks in advance,

Tegan

maandag 3 januari 2011 @ 16:23

Code?

donroyco

maandag 3 januari 2011 @ 16:24

quote:
Op maandag 3 januari 2011 16:23 schreef Tegan het volgende:
Code?

Peem

maandag 3 januari 2011 @ 16:31

Ik neem aan dat het verder niet veel met de code te maken heeft, maar misschien iets dat chrome in de cache onthoud of iets?

body {
background: url(images/bg.jpg);
}

word ineens
body {
background: url(file:///C:/Users/Marciano/Desktop/EMPEFINAL2/css/images/header.jpg);
}

Waar slaat dit op? =P

En ja, het plaatje bg.jpg bestaat wel en staat in de images map, voorheen deed hij het wel :/

Tegan

maandag 3 januari 2011 @ 16:47

En als je de hele url van bg.jpg invult?

Peem

maandag 3 januari 2011 @ 16:55

Dan gooit hij er weer de hele rits ervoor, en krijg ik 2x dezelfde zin.

waar die /css/ vandaan komt heb ik geen idee van, heb niet eens een css mapje aangemaakt in empefinal2 :s

Tegan

maandag 3 januari 2011 @ 16:56

Daar zit je fout iig. Zoek maar even na hoe je goed een plaatje linkt als background.

Peem

maandag 3 januari 2011 @ 16:58

Dat daar een fout zit snap ik ook. Zoals ik zei is het alleen bij 2 plaatjes het geval, en niet bij de anderen. Ik zie namelijk gewoon mijn images/mountains.png, mijn images/fish.png e.d alleen de header en bg wil hij niet laten zien.

Tegan

maandag 3 januari 2011 @ 16:59

Hoe link je die plaatjes in de css?

Peem

maandag 3 januari 2011 @ 17:37

Gewoon a la
#header {
background: url(images/header.jpg);
width:
height:
}

PimD

maandag 3 januari 2011 @ 17:46

Wat is je directorystructuur dan? Aan je CSS te zien zou het volgens mij:

quote:
/css
/css/images

moeten zijn, maar dat lijkt me vrij onlogisch:

quote:
/css
/images

is waarschijnlijker. Je moet dan de juiste paden gebruiken, door '../images/' te gebruiken. Als je 'images/' gebruikt zal dit volgens mij alleen werken op de homepage van je site, aangezien het pad dan nog wel klopt.

Of faal ik nu hopeloos?

Peem

maandag 3 januari 2011 @ 17:51

Omg

Er was opeens een mapje die /css/ heet, heb er helemaal overheen gekeken.. Toch vraag ik me af waarom hij daarnaar linkte, en dan pas images?

(had in m'n main directory een index.html een css mapje, images mapjes en js mapje)

Hij doet het in ieder geval nu weer, maar als iemand me het bovenste uit kan leggen ben ik dankbaar, het ligt in iedergeval aan Dreamweaver, aangezien het in alle browsers gebeurt (nog nooit eerder gehad trouwens)

Thanks Tegan & PimD

Tegan

maandag 3 januari 2011 @ 17:53

Daarom link ik altijd gewoon de hele url ipv alleen de filename.

Hij pakt zijn eigen pad. Dus als de css een level lager staat neemt hij die map gewoon mee en is het lastig om iets te linken wat een level hoger staat.

Tenminste, ik denk dat dat het probleem was.

Peem

maandag 3 januari 2011 @ 18:09

Hoe bedoel je, pakt zijn eigen pad? Hij zou toch gewoon moeten doen wat ik hem vertel te doen

PimD

maandag 3 januari 2011 @ 18:10

De hele URL linken... En wat doe je dan als je de site live zet? Ga je dan alles weer aanpassen naar de nieuwe URL? Als je gewoon een standaard directorystructuur voor al je projecten hebt zou er geen probleem moeten zijn hoor - waarom zou je je map met CSS-files willen verplaatsen...?

Tegan

maandag 3 januari 2011 @ 18:11

quote:
Op maandag 3 januari 2011 18:09 schreef Peem het volgende:
Hoe bedoel je, pakt zijn eigen pad? Hij zou toch gewoon moeten doen wat ik hem vertel te doen ?

Als je css in home/css/ wordt uitgevoerd en jij zegt dat een plaatje in /images/ zit pakt hij zijn eigen pad home/css/ + /images/ wordt home/css/images ipv wat jij wil home/images/. Als je het snapt.

Tegan

maandag 3 januari 2011 @ 18:13

quote:
Op maandag 3 januari 2011 18:10 schreef PimD het volgende:
De hele URL linken... En wat doe je dan als je de site live zet? Ga je dan alles weer aanpassen naar de nieuwe URL? Als je gewoon een standaard directorystructuur voor al je projecten hebt zou er geen probleem moeten zijn hoor - waarom zou je je map met CSS-files willen verplaatsen...?

Ja, maar vooral gooi ik css nooit in een eigen map.

Peem

maandag 3 januari 2011 @ 18:24

En mijn vraag is dus 'waarom' voert hij het uit via home/css, ik heb daar toch helemaal geen opdracht toe gegeven?

Tegan

maandag 3 januari 2011 @ 18:27

Omdat je css in die map staat.

Peem

maandag 3 januari 2011 @ 18:29

Oh, ok

Maargoed, dan snap ik waarom ik dat nog nooit eerder gehad heb, dankje

Tegan

maandag 3 januari 2011 @ 18:35

Hij pakt altijd zijn eigen pad + wat je opgeeft, anders kan hij ook niet ruiken waar hij het moet zoeken. Dit kun je dus tegengaan door gewoon de hele url op te geven

, maar dat vind niemand tof ofzo, of je moet je je pad beter opgeven, maar dat moet je zelf even uitzoeken

KomtTijd...

maandag 3 januari 2011 @ 18:37

quote:
Op maandag 3 januari 2011 18:35 schreef Tegan het volgende:
Hij pakt altijd zijn eigen pad + wat je opgeeft, anders kan hij ook niet ruiken waar hij het moet zoeken. Dit kun je dus tegengaan door gewoon de hele url op te geven , maar dat vind niemand tof ofzo, of je moet je je pad beter opgeven, maar dat moet je zelf even uitzoeken .

Of gewoon absolute paden gebruiken, dus beginnen met een /. Dan begint hij altijd in de hoogst mogelijke map (in het geval van een webserver dus de map die gekoppeld staat aan je domein).

-edit-
En even firebug installeren. Dan had je gewoon rechtermuis -> element inspecteren kunnen doen, en gelijk gezien dat het pad verkeerd was.

Peem

maandag 3 januari 2011 @ 18:49

@KomtTijd dat het pad verkeerd was wist ik, dat is ook wat ik aangaf in het begin. Ik vroeg me af waarom het gebeurde. Verder heb ik Firefox aan de kant geschoven, Chrome heeft deze optie er automatisch in

RenRen-

woensdag 5 januari 2011 @ 12:42

Ik wil op een site text verticaal centreren.
Nou had ik iemand gevonden, die deed het op een manier door de line-height even hoog te maken als de div. Opzich kan dit prima, als je maar 1 zin text hebt, of maar 1 afbeelding. Maar hoe is dit op te lossen als je een aantal aparte regels hebt?

KomtTijd...

woensdag 5 januari 2011 @ 13:04

Dat kan niet in div's (althans niet met css). Alleen in een table cell, met vertical-align: middle.
Gelukkig kun je een div wel met CSS ombouwen tot table cell met display:table-cell.

Beetje ranzig maar minder ranzig dan javascript-oplossingen...

RenRen-

woensdag 5 januari 2011 @ 13:20

Dus dan grofweg

1
2
3
4

#div{
display:table-cell;
vertical-align:middle;
}

Migue

woensdag 5 januari 2011 @ 13:28

Ik heb een noobvraag die hier hopelijk beantwoord kan worden:

In deze code wil ik de tekst 'Reageer' veranderen in de kleur zwart (deze is nu wit op een witte achtergrond, dat werkt dus niet):

<?php wp_list_comments(array('type'=>comment,'callback'=>mytheme_comment,'avatar_size'=>50, 'reply_text'=>__('Reageer','OnTheGo'))) ; ?>

Als iemand mij kan zeggen waar ik wat precies in moet voeren, stel ik dat zeer op prijs. De dingen die ik zelf al geprobeerd heb, resulteerden in het verdwijnen van de helft van mijn website

Dank.

donroyco

woensdag 5 januari 2011 @ 13:38

quote:
Op woensdag 5 januari 2011 13:28 schreef Migue het volgende:
Ik heb een noobvraag die hier hopelijk beantwoord kan worden:

In deze code wil ik de tekst 'Reageer' veranderen in de kleur zwart (deze is nu wit op een witte achtergrond, dat werkt dus niet):

<?php wp_list_comments(array('type'=>comment,'callback'=>mytheme_comment,'avatar_size'=>50, 'reply_text'=>__('Reageer','OnTheGo'))) ; ?>

Als iemand mij kan zeggen waar ik wat precies in moet voeren, stel ik dat zeer op prijs. De dingen die ik zelf al geprobeerd heb, resulteerden in het verdwijnen van de helft van mijn website

Dank.

[PHP/(My)SQL] voor dummies - Deel 85

KomtTijd...

woensdag 5 januari 2011 @ 13:38

quote:
Op woensdag 5 januari 2011 13:20 schreef RenRen- het volgende:
Dus dan grofweg
[ code verwijderd ]

?

Ja zoiets gok ik... Wel even goed testen in verschillende browsers!

quote:
Op woensdag 5 januari 2011 13:28 schreef Migue het volgende:
Ik heb een noobvraag die hier hopelijk beantwoord kan worden:

In deze code wil ik de tekst 'Reageer' veranderen in de kleur zwart (deze is nu wit op een witte achtergrond, dat werkt dus niet):

<?php wp_list_comments(array('type'=>comment,'callback'=>mytheme_comment,'avatar_size'=>50, 'reply_text'=>__('Reageer','OnTheGo'))) ; ?>

Als iemand mij kan zeggen waar ik wat precies in moet voeren, stel ik dat zeer op prijs. De dingen die ik zelf al geprobeerd heb, resulteerden in het verdwijnen van de helft van mijn website

Dank.

Zet er <font color="black"> voor en </font> achter?
Niet aan PHP code gaan zitten kloten als je er geen verstand van hebt. gebruik de templates.

RenRen-

woensdag 5 januari 2011 @ 13:46

quote:
Op woensdag 5 januari 2011 13:38 schreef KomtTijd... het volgende:

[..]

Ja zoiets gok ik... Wel even goed testen in verschillende browsers!

[..]

Zet er <font color="black"> voor en </font> achter?
Niet aan PHP code gaan zitten kloten als je er geen verstand van hebt. gebruik de templates.

Ja, moet eerst even ergens registreren, zit achter een mac. Maar komt goed

Dankje

RenRen-

woensdag 5 januari 2011 @ 14:04

In FF voor de appel doet hij in ieder geval niets...

Migue

woensdag 5 januari 2011 @ 14:14

quote:
Op woensdag 5 januari 2011 13:38 schreef donroyco het volgende:

[..]

[PHP/(My)SQL] voor dummies - Deel 85

Zie, daar ga ik al, denkend dat CSS en PHP hetzelfde is

Dankje!

KomtTijd... dat had ik al geprobeerd, met alle gevolgen van dien

Tegan

woensdag 5 januari 2011 @ 14:20

Je geeft te weinig info. Post even je hele code.

Migue

woensdag 5 januari 2011 @ 14:29

<?php
/**
* @package WordPress
* @subpackage Default_Theme
*/

// Do not delete these lines
    if (!empty($_SERVER['SCRIPT_FILENAME']) && 'comments.php' == basename($_SERVER['SCRIPT_FILENAME']))
        die (__('Please do not load this page directly. Thanks!','OnTheGo'));

    if ( post_password_required() ) { ?>

<p class="nocomments"><?php _e('Dit bericht is beveiligd.','OnTheGo'); ?></p>
<?php
        return;
    }
?>


<?php if ( have_comments() ) : ?>
    <div id="comment-section">
        <p id="comments"><?php comments_number(__('Er zijn geen reacties','OnTheGo'),  __('Er is één reactie','OnTheGo'), 'Er zijn % '.__('reacties','OnTheGo'));?></p>

    <?php if ( ! empty($comments_by_type['comment']) ) : ?>
        <ol class="commentlist">
            <?php wp_list_comments(array('type'=>comment,'callback'=>mytheme_comment,'avatar_size'=>50,  'reply_text'=>__('Reageer','OnTheGo'))) ; ?>
        </ol>
    <?php endif; ?>

        <div class="navigation">
            <div class="alignleft">
                <?php previous_comments_link() ?>
            </div>
            <div class="alignright">
                <?php next_comments_link() ?>
            </div>
        </div>

    <?php if ( ! empty($comments_by_type['pings']) ) : ?>
    <div id="trackbacks">
        <h3 id="pings"><?php _e('Trackbacks/Pingbacks','OnTheGo'); ?></h3>
        <ol class="pinglist">
            <?php wp_list_comments('type=pings&callback=list_pings'); ?>
        </ol>
    </div>
    <?php endif; ?>
<?php else : // this is displayed if there are no comments so far ?>
    <div id="comment-section" class="nocomments">
        <?php if ('open' == $post->comment_status) : ?>
            
        <?php else : // comments are closed ?>
            
                <div id="respond">
                    <p class="nocomments"><?php _e('Reageren op dit bericht is gesloten.','OnTheGo'); ?></p>
                </div> 
        <?php endif; ?>
<?php endif; ?>
<?php if ('open' == $post->comment_status) : ?>

    <div id="respond">
        <h3>
            <?php _e('Laat een reactie achter','OnTheGo'); ?>
        </h3>
        <div class="cancel-comment-reply"> <small>
            <?php cancel_comment_reply_link(); ?>
            </small> </div> 
        <?php if ( get_option('comment_registration') && !$user_ID ) : ?>
            <p><?php _e('Je moet zijn','OnTheGo'); ?> <a href="<?php echo get_option('siteurl'); ?>/wp-login.php?redirect_to=<?php echo urlencode(get_permalink()); ?>"><?php _e('ingelogd','OnTheGo'); ?></a> <?php _e('om te reageren.','OnTheGo'); ?></p>
        <?php else : ?>
            <form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform">
            <?php if ( $user_ID ) : ?>
                <p><?php _e('Je bent ingelogd als','OnTheGo'); ?> <a href="<?php echo get_option('siteurl'); ?>/wp-admin/profile.php"><?php echo $user_identity; ?></a>. <a href="<?php echo wp_logout_url(get_permalink()); ?>"><?php _e('Log uit »','OnTheGo'); ?></a></p>
            <?php else : ?>
                <p>
                    <input type="text" name="author" id="author" value="<?php echo $comment_author; ?>" size="22" tabindex="1" <?php if ($req) echo "aria-required='true'"; ?> />
                    <label for="author"><small><?php _e('Naam:','OnTheGo'); ?><?php if ($req) _e(' verplicht','OnTheGo'); ?></small></label>
                </p>
                <p>
                    <input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>" size="22" tabindex="2" <?php if ($req) echo "aria-required='true'"; ?> />
                    <label for="email"><small><?php _e('E-mail (wordt niet weergegeven):','OnTheGo'); ?> <?php if ($req) _e(' verplicht','OnTheGo'); ?></small></label>
                </p>
                <p>
                    <input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>" size="22" tabindex="3" />
                    <label for="url"><small><?php _e('Website','OnTheGo'); ?></small></label>
                </p>
            <?php endif; ?>
            
            <p>
                <textarea name="comment" id="comment" cols="60" rows="10" tabindex="4"></textarea>
            </p>
            <p>
                <input name="submit" type="submit" id="submit" tabindex="5" value="<?php _e('Reageer','OnTheGo'); ?>" />
                <?php comment_id_fields(); ?>
            </p>
            <?php do_action('comment_form', $post->ID); ?>
            </form>
        <?php endif; // If registration required and not logged in ?>
    </div> 
<?php else: ?>

<?php endif; // if you delete this the sky will fall on your head ?>
</div>

Tegan

woensdag 5 januari 2011 @ 14:30

En de css?

KomtTijd...

woensdag 5 januari 2011 @ 14:32

quote:
Op woensdag 5 januari 2011 14:29 schreef Migue het volgende:

[ code verwijderd ]

Juist, een template dus. Pas het daar in aan. Van die PHP-code moet je gewoon afblijven.

Tegan

woensdag 5 januari 2011 @ 14:36

Wat hij bedoelt is, je moet de css van de template aanpassen.

css is de stijl, php de content. Dus post even je css

RenRen-

woensdag 5 januari 2011 @ 14:39

quote:
Op woensdag 5 januari 2011 14:36 schreef Tegan het volgende:
Wat hij bedoelt is, je moet de css van de template aanpassen.

css is de stijl, php de content. Dus post even je css .

Php genereert de content, is weer heel wat anders. No offence

Maar voor hij denkt dat je content normaal blij kan aanpassen en hij aan de PHP gaat zitten.

PHP haalt eigenlijk je content ergens anders vandaan.

Tegan

woensdag 5 januari 2011 @ 14:42

quote:
Op woensdag 5 januari 2011 14:39 schreef RenRen- het volgende:

[..]

Php genereert de content, is weer heel wat anders. No offence Maar voor hij denkt dat je content normaal blij kan aanpassen en hij aan de PHP gaat zitten.

PHP haalt eigenlijk je content ergens anders vandaan.

Mierenneuken

KomtTijd...

woensdag 5 januari 2011 @ 14:43

quote:
Op woensdag 5 januari 2011 14:39 schreef RenRen- het volgende:

[..]

Php genereert de content, is weer heel wat anders. No offence Maar voor hij denkt dat je content normaal blij kan aanpassen en hij aan de PHP gaat zitten.

PHP haalt eigenlijk je content ergens anders vandaan.

Heb ik je dat even goed uitgelegd!

RenRen-

woensdag 5 januari 2011 @ 14:43

quote:
Op woensdag 5 januari 2011 14:42 schreef Tegan het volgende:

[..]

Mierenneuken .

Is een heel verschil hoor

Als ik tegen mijn leraar zei dat PHP content was, ging hij slaan.

RenRen-

woensdag 5 januari 2011 @ 14:44

quote:
Op woensdag 5 januari 2011 14:43 schreef KomtTijd... het volgende:

[..]

Heb ik je dat even goed uitgelegd!

Maar hij doet niets hoor, die dinges. Er een tablecell van maak.

KomtTijd...

woensdag 5 januari 2011 @ 14:45

quote:
Op woensdag 5 januari 2011 14:44 schreef RenRen- het volgende:

[..]

Maar hij doet niets hoor, die dinges. Er een tablecell van maak.

Ja testcases ga ik maken als ik weer thuis ben

Tegan

woensdag 5 januari 2011 @ 14:45

quote:
Op woensdag 5 januari 2011 14:43 schreef RenRen- het volgende:

[..]

Is een heel verschil hoor Als ik tegen mijn leraar zei dat PHP content was, ging hij slaan.

Ik weet echt wel wat php is, beter dan dat ik css ken

. Maar dat soort details hoef je een newbie niet mee te vervelen leek mij.

Migue

woensdag 5 januari 2011 @ 14:46

quote:
Op woensdag 5 januari 2011 14:36 schreef Tegan het volgende:
Wat hij bedoelt is, je moet de css van de template aanpassen.

css is de stijl, php de content. Dus post even je css .

Ah ok, dit is de CSS, maar ik kan er geen wijs uit worden waar ik een aanpassing moet doorvoeren

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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330

/*
Theme Name: OnTheGo
Theme URI: http://www.elegantthemes.com/gallery/onthego
Version: 1.1
Description: 2 Column theme from Elegant Themes
Author: Elegant Themes
Author URI: http://www.elegantthemes.com
*/

/*------------------------------------------------*/
/*-----------------[BASIC STYLES]-----------------*/
/*------------------------------------------------*/
html { background: #2d3940 url(images/bg.jpg); }
body { background: url(images/top-bg.png) repeat-x top left; text-align: center; line-height: 21px; font-family: Arial, Verdana, sans-serif; font-size: 12px; color: #5c5c5c; min-height: 25px; }

a { text-decoration: none; color: #5f5f5f; }
a:hover { text-decoration: underline; }
.clear { clear: both; }
.ui-tabs-hide { display: none; }
br.clear { margin: 0px; padding: 0px; }
h1, h2, h3, h4, h5, h6 { font-weight: bold; padding-bottom: 5px; color: #000000; letter-spacing: -1px; line-height: 1em; }
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: #000000; }
h1 { font-size: 30px; }
h2 { font-size: 24px; }
h3 { font-size: 22px; }
h4 { font-size: 18px; }
h5 { font-size: 16px; }
h6 { font-size: 14px; }
p { padding-bottom: 10px; line-height: 18px; }
strong { font-weight: bold; color: #1c1c1c; }
cite, em, i { font-style: italic; }
pre, code { font-family: Courier New, monospace; margin-bottom: 10px; }
ins { text-decoration: none; }
sup, sub { height: 0; line-height: 1; position: relative; vertical-align: baseline; }
sup { bottom: 0.8em; }
sub { top: 0.3em; }
dl { margin: 0 0 1.5em 0; }
dl dt { font-weight: bold; }
dd  { margin-left: 1.5em;}
blockquote  { margin: 1.5em; padding: 1em; color: #666666; background: #e6e6e6; font-style: italic; border: 1px solid #dcdcdc; }
    blockquote p { padding-bottom: 0px; }

input[type=text],input.text, input.title, textarea, select { background-color:#fff; border:1px solid #bbb; padding: 2px; color: #4e4e4e; }
input[type=text]:focus, input.text:focus, input.title:focus, textarea:focus, select:focus { border-color:#2D3940; color: #3e3e3e; }
input[type=text], input.text, input.title, textarea, select { margin:0.5em 0; }
textarea { padding: 4px; }

img#about-image { float: left; margin: 3px 8px 8px 0px; }

.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
    }
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

/*------------------------------------------------*/
/*---------------[MAIN LAYOUT INFO]---------------*/
/*------------------------------------------------*/

.container { text-align: left; width: 1007px; margin: 0 auto; position: relative; }

#header { background: url(images/menu-bg.png) no-repeat top left; height: 20px; padding: 3px 5px 0px 0px; }

#contentwrap { background: url(images/content-mainbg.jpg) repeat-y; position: relative; }
    #content { background: url(http://www.motorracingblog.nl/bandeau/bandeau.php) no-repeat top left; /*min-height: 1500px; */ }
        #logowrap { text-align: center; padding: 22px 0px 0px; }
        #manlayer { position: absolute; top: -5px; right: 254px; background: url(images/man.png) no-repeat; width: 169px; height: 0px; }

    #main-area { padding: 35px 75px 35px 61px; }

        #main-content { min-height: 316px; width: 527px; float: left; padding-left: 5px; }
        body.home #main-content { background: url(images/main-content-bg.png) no-repeat; padding: 35px 0px 0px 40px; width: 506px; }
        body.home #main-content.blogstyle { padding: 0px; width: 527px; background: none; }
            #main-content h2.title, h1#post-title { font-size: 20px; margin-bottom: 6px; }
            #main-content h2.title.page { background: url(images/h2-border-bg.png) repeat-x bottom left; }
            #main-content h2.title a:hover { color:#363636; text-decoration:none; }
            a.readmore { background: url(images/readmore-bg.png) no-repeat scroll 0 0; color: #000000 !important; display: block;
font-size: 11px; font-weight: bold; height: 34px; line-height: 34px; padding-left: 27px; float: right; }
                a.readmore span { background: url(images/readmore-bg.png) no-repeat scroll right top; display:block; padding-right:11px; }
            div.entry.category { margin-bottom: 20px; }
                #main-content a { color: #000000; }
                #main-content ul { list-style-type: disc; margin: 10px 0px 10px 20px; }
                #main-content ol { list-style-type: decimal; list-style-position: inside; margin: 10px 0px 10px 2px; }
                    #main-content ul li ul, #main-content ul li ol { margin: 2px 0px 2px 20px; }
                    #main-content ol li ul, #main-content ol li ol  { margin: 2px 0px 2px 35px; }
            h1#index { background: none; padding: 0px 0px 30px; font-size: 24px; letter-spacing: 0px; font-family: Georgia, serif; font-weight: normal; }

            .cat-meta-top { background:transparent url(images/cat-meta-topbg.png) no-repeat scroll 0 0; height:6px; width:527px; margin-top: 15px; }
            .cat-meta-bottom { background:transparent url(images/cat-meta-bottombg.png) no-repeat scroll 0 0; height:14px; margin-bottom:20px; width:527px; }
            p.post-meta { background:transparent url(images/cat-meta-bg.png) repeat-y scroll 0 0; line-height: 16px; padding:0 27px 2px 13px; color: #000000; }
                p.post-meta a { color: #000000; font-weight: bold; }
                p.post-meta span { background:transparent url(images/sidebar-bullet.png) no-repeat scroll left 9px; display: block; padding: 7px 0px 7px 20px; }
            img.thumbnail-post { border: 1px solid #bdbdbd; padding: 6px; background: #ededed; display:inline; float:left; margin-bottom:10px; margin-right:25px; margin-top:6px; }


/*------------------------------------------------*/
/*---------------[DROPDOWN MENU]------------------*/
/*------------------------------------------------*/

ul#top-menu li { margin: 0px 4px; }
    ul#top-menu > li.current_page_item, ul#top-menu > li:hover, ul#top-menu > li.current-cat { background: url(images/menu-active-sprite.png) no-repeat bottom right; }
        ul#top-menu li a { color: #FFFFFF; font-size: 15px; font-style: bold; font-weight: bold; }
        ul#top-menu > li { padding-right: 10px; }
        ul#top-menu > li > a { line-height: 33px; height: 36px; padding: 0px 0px 0px 12px; }
            ul#top-menu li a:hover { text-decoration: none; }
        ul#top-menu > li.current_page_item > a, ul#top-menu > li:hover > a, ul#top-menu > li.current-cat > a { color: #000000; background: url(images/menu-active-sprite.png) no-repeat top left; }

        ul#top-menu li ul { background: url(images/dropdown-top-bg.png) no-repeat; padding: 12px 0px 0px; top: 40px; display: none; }
            ul#top-menu li li ul { top: -11px; }
            ul#top-menu li ul  li { background: #ffffff url(images/dropdown-li-sep.png) no-repeat 7px 0px; margin: 0px; width: 188px; padding: 3px 7px 0px; }
                ul#top-menu li ul  li a { background: url(images/dropdown-link.png) no-repeat 12px 15px; color: #5c5c5c; font-size: 12px; display: block; width: 143px; padding: 10px 5px 10px 40px;}
                    ul#top-menu li ul  li a:hover { color: #000000; background: #efefef url(images/dropdown-link-hover.png) no-repeat 12px 15px; }
        ul#top-menu li ul li.dropdown-bottom { background: url(images/dropdown-bottom-bg.png) no-repeat; background-color: none; display: block; position: relative; left: 0px; width: 202px; height: 13px !important; }

/*------------------------------------------------*/
/*--------------[FEATURED SLIDER]-----------------*/
/*------------------------------------------------*/

#featured-slider { margin: 0px 0px 33px; position: relative; }
    #buildings { background: url(images/featured-buildings.png) no-repeat; width: 300px; height: 300px; position: absolute; top: -250px; right: -40px; z-index: 2; }
    #featured-area { background: url(images/slider-bg.jpg) no-repeat; width: 769px; height: 230px; margin-left: 11px; margin-top: 0px; padding: 31px 50px 0px 40px; position: relative;  }
        .featitem { height: 267px; }

        #featured-area a#prevlink, #featured-area a#nextlink { position: absolute; top: 97px; text-indent: -9999px; display: block; width: 20px; height: 46px; }
        #featured-area a#prevlink { left: 1px; }
        #featured-area a#nextlink { right: 1px; }

    ul#slider-control { height: 15px; padding-left: 13px; z-index: 3; position:relative; }
        ul#slider-control li { background: url(images/tab-bg.png) no-repeat top right; padding-right: 5px; float: left; margin-right: 2px; }
            ul#slider-control li a { background: url(images/tab-bg.png) no-repeat top left; display: block; text-transform: uppercase; font-size: 16px; color: #b3b3b3; }
            ul#slider-control li a:hover { text-decoration: none; }
                ul#slider-control li a span { background: url(images/arrow.png) no-repeat 13px center; display: block; padding: 10px 9px 10px 44px; }

        ul#slider-control li.active { background: url(images/tab-bg-active.png) no-repeat bottom right; }
            ul#slider-control li.active a { background: url(images/tab-bg-active.png) no-repeat bottom left; color: #1c1c1c; height: 42px; }
                ul#slider-control li.active a span { background: url(images/arrow-active.png) no-repeat 13px center; }

        .featitem { width: 769px; }
            .featured-image { background: url(images/featured-image-bg.png) no-repeat; width: 333px; height: 220px; float: left; }
                .featured-image img { margin: 10px 0px 0px 9px; }
            .featitem .description { float: right; width: 385px; margin: 20px 6px 0px 0px; }
                .featitem h2 { font-size: 18px; background: url(images/h2-border.png) repeat-x bottom left; margin-bottom: 9px; }

                    .featitem h2 a:hover { color: #363636; text-decoration: none; }
            .featitem a.readmore { position: right: 4px; bottom: 9px; color: #ffffff; font-size: 11px; font-weight: bold; background: url(images/more-featured-bg.png) no-repeat; display: block; height: 31px; padding-left: 27px; line-height: 31px; }
                .featitem a.readmore span { display: block; background: url(images/more-featured-bg.png) no-repeat top right; padding-right: 11px; }

/*------------------------------------------------*/
/*-------------------[COMMENTS]-------------------*/
/*------------------------------------------------*/

p#comments { font-size: 30px; font-weight: bold; color: #000000; letter-spacing: -1px; line-height: 1em; background: url(images/comments_number.png) no-repeat left 6px; padding: 0px 0px 6px 32px; }
ol.commentlist { background: url(images/main-content-bg.png) no-repeat top left; margin: 0px 0px 20px -15px !important; padding: 25px 0px 0px 40px; }
ol.commentlist, ol.commentlist ul.children { list-style-position:outside !important; list-style-type:none !important; }
    ol.commentlist li ul { margin: 0px !important; }
    ol.commentlist li ul.children { margin-bottom: -13px !important; }

    ol.commentlist li { padding: 19px 0px 13px 100px; background: url(images/comments-border.png) no-repeat bottom left; }
        div.comment-body { position: relative; }
            img.avatar { background: url(images/avatar_border.png) no-repeat; padding: 9px; position: absolute; top: 0px; left: -100px; }
            div.comment-wrap { padding: 0px 0px 10px; }
                .comment-author { margin-bottom: 12px; }
                    span.fn, .comment-wrap span.separator { font-size: 18px; font-weight: bold; color: #1f1e1e; letter-spacing: -1px; }
                    .comment-wrap span.separator, span.commentmetadata a { color: #9c9b9b !important; margin-left: 2px; font-weight: normal; }
                        span.commentmetadata a { font-size: 14px; }

                    div.reply-container { background: url(images/readmore-bg.png) no-repeat scroll 0 0; display:block; float:right; font-size:11px; font-weight:bold; height:34px; line-height:34px; padding-left:27px; }
                        div.reply-container a { background: url(images/readmore-bg.png) no-repeat scroll right top;
display:block; padding-right:11px; color:#FFFFFF !important; }
                            div.reply-container a:hover { text-decoration: none; }

                    ol.commentlist ul.children li { background: none; }

    div#respond, div.navigation { margin-left: 25px; }
        div#respond a#cancel-comment-reply-link { font-size: 11px; }
    li.comment div#respond { margin: 0px 0px 0px 0px; }
        li.comment div#respond textarea { width: 97%; }
        li.comment div#respond input[type=text] { width: 70%; }

    div.navigation { overflow: hidden; margin-bottom: 25px; position: relative; }

    #page-comments { margin-top: 30px; }

/*------------------------------------------------*/
/*---------------------[FOOTER]-------------------*/
/*------------------------------------------------*/

#footer-widgets-wrap  { background: url(images/footer-mainbg.png) repeat-y; }
    #footer-widgets { background: url(images/footer-top.jpg) no-repeat; padding: 60px 0px 0px 60px; position: relative; }

        #footer-widgets .widget { background: url(images/footer-widget-mainbg.png) repeat-y; width: 269px; float: left; margin: 0px 35px 20px 0px; }
            #footer-widgets .widget  .widgettop { background: url(images/footer-widget-top.png) no-repeat; }
                #footer-widgets .widget h4 { background: url(images/fwidget-separator.png) repeat-x bottom left; letter-spacing: 0px; color: #ffffff; font-size: 18px; padding: 18px 5px 0px 16px; margin: 0px 10px 0px 3px; }
                    #footer-widgets .widget h4 span { display: block; background: url(images/footer-arrow.png) no-repeat; padding: 2px 14px 10px 30px; }
                #footer-widgets .widget-content, #footer-widgets a { color: #b3bdc3; }
                    #footer-widgets a:hover { color: #ffffff; text-decoration: none; }

                #footer-widgets .widget-content { padding: 12px 16px 0px 20px; }
                    #footer-widgets ul li a { display: block; }
                    #footer-widgets .widget-content ul { margin: 0px -6px 0px -17px; }
                        #footer-widgets .widget-content ul li { background: url(images/fwidget-li-separator.jpg) no-repeat bottom left; }
                        #footer-widgets .widget-content > ul > li:first-child { margin-top: -8px; }
                        #footer-widgets .widget-content > ul > li:last-child { background: none; }
                            #footer-widgets .widget-content > ul > li:last-child a { margin-bottom: -10px; }
                            #footer-widgets .widget-content ul li a { background: url(images/footer-bullet.png) no-repeat 18px center; padding: 10px 4px 10px 40px; }

                        #footer-widgets .widget-content ul ul { margin: 0px 0px 0px 15px; }
                            #footer-widgets .widget-content ul ul li:first-child a { padding-top: 7px; margin-top: -7px; }

                .widgetbottom { background: url(images/fwidget-bottom.png) no-repeat; height: 23px; }
                .widgetrow { padding-bottom: 20px; }
                #sidebar .widget-content ul li.recentcomments a, #footer-widgets .widget-content ul li.recentcomments a { background: none; }

#footer { min-height: 20px; background: url(images/footer-bottom.png) no-repeat; font-size: 11px; color: #757a7d; }
    #footer a { color: #757a7d; }
    #footer p#copyright { text-align: right; padding: 1px 39px 0 0;}

/*------------------------------------------------*/
/*--------------------[SIDEBAR]-------------------*/
/*------------------------------------------------*/

#sidebar { float: right; width: 290px; }
#sidebar a { color: #4e606c; }
    #from-blog { background: url(images/sidebar-top-bg.png) no-repeat 3px top; padding: 0px 0px 0px; width: 286px; }
        #from-blog ul.control { float: left; width: 285px; display: inline; margin-left: 2px; }
            #from-blog ul.control li { float: left; }
                ul.control li a { display: block; color: #ffffff !important; text-transform: uppercase; font-size: 14px; font-weight: bold; text-align: center; width: 95px; height: 35px; line-height: 35px; text-shadow: 1px 1px 1px #000000; }
                    ul.control li.ui-state-active a { text-decoration: none; height: 30px; margin-top: 5px; }
                    ul.control li a:hover { text-decoration: none; }
                ul.control li.recent a { background: url(images/recent-bg.png) no-repeat; }
                ul.control li.popular a { background: url(images/popular-bg.png) no-repeat; }
                ul.control li.random a { background: url(images/random-bg.png) no-repeat; }
            #from-blog div.entries { float: left; width: 286px; background: url(images/widget-main-bg.png) repeat-y; padding: 0px 4px 0px 5px; }
                div.entries h3 { background: url(images/fromblog-top-bg.png) no-repeat; font-size: 18px; }
                    div.entries h3 span { display: block; padding: 14px 30px 7px 43px; background: url(images/widget-heading.png) no-repeat 14px 14px; }
                div.entries-bottom { background: url(images/widget-bottom.png) no-repeat; height: 5px; margin-left: -7px; }
                    div.entries-bottom.usual { margin-left: -1px; }
                div.tabcontent { padding: 0px 15px 4px 5px; }
                    .tabcontent .post { padding: 9px 0px 6px 6px; background: url(images/separator.png) no-repeat; }
                        .post .post-thumb { background: url(images/img-border.png) no-repeat; float: left; margin: 0px 12px 0px 0px; }
                        .post .description { float: left; }
                            .post .post-thumb a { display: block; }
                                .post .post-thumb img { margin: 7px; }
                        .post h4 { font-size: 14px; letter-spacing: 0px; padding: 5px 0px 0px; }

                        .post p.meta { background: url(images/sidebar-bullet.png) no-repeat 0px 6px; padding: 0px 0px 0px 18px; color: #4a4949; font-size: 11px; font-style: italic; }
                            .post p.meta a { color: #4a4949 !important; font-weight: bold; }
    .widget_wrap { background: url(images/widget-main-bg.png) repeat-y scroll 0 0; margin-bottom: 28px; }
        .widget_entries { background: url(images/sidebar-widget-top.png) no-repeat; padding: 30px 0px 0px; }
            .widget_entries h3 { font-size: 18px; background:transparent url(images/widget-heading.png) no-repeat scroll 14px 17px; display:block; padding:18px 30px 10px 43px; }
            #sidebar .widget-content { background: url(images/separator.png) no-repeat; margin: 0px 0px 0px 8px; width: 262px; padding: 15px 10px; }
                #sidebar .widget-content ul { margin: 0px 0px 0px -10px; }
                    #sidebar .widget-content ul li { background: url(images/separator.png) no-repeat bottom left; }
                        #sidebar .widget-content ul li a { display: block; background: url(images/sidebar-bullet.png) no-repeat scroll 13px center; padding: 8px 4px 8px 35px; }
                        #sidebar .widget-content > ul > li:first-child { margin-top: -8px; }
                        #sidebar .widget-content > ul > li:last-child { background: none; }
                            #sidebar .widget-content > ul > li:last-child a { margin-bottom: -10px; }
                                #sidebar .widget-content ul ul { margin: 0px 0px 0px 20px; }
                                    #sidebar .widget-content ul ul li:first-child a { padding-top: 7px; margin-top: -7px; }

/*------------------------------------------------*/
/*------------[CAPTIONS AND ALIGNMENTS]-----------*/
/*------------------------------------------------*/
div.post .new-post .aligncenter, .aligncenter { display: block; margin-left: auto; margin-right: auto; }
.wp-caption { border: 1px solid #ddd; text-align: center; background-color: #f3f3f3; padding-top: 4px; margin-bottom: 10px; }
.wp-caption.alignleft { margin: 0px 10px 10px 0px; }
.wp-caption.alignright { margin: 0px 0px 10px 10px; }
.wp-caption img { margin: 0; padding: 0; border: 0 none; }
.wp-caption p.wp-caption-text { font-size: 11px; line-height: 17px; padding: 0 4px 5px; margin: 0; }
.alignright { float: right; }
.alignleft { float: left }
img.alignleft { display:inline; float:left; margin-right:15px; }
img.alignright { display:inline; float:right; margin-left:15px; }


/*------------------------------------------------*/
/*---------------[DEFAULT DROPDOWN SETTINGS]---*/
/*------------------------------------------------*/

.nav ul { position:absolute; top:-999em; background-position: bottom; background-repeat: no-repeat; z-index: 10; }
.nav li { float:left; position:relative; }
.nav a { display:block; float: left; }
    .nav li:hover ul, ul.nav li.sfHover ul { left:0px; top:35px; }
    .nav li:hover li ul, .nav li.sfHover li ul { top:-999em; }
        .nav li li:hover ul, ul.nav li li.sfHover ul { left:203px; top:0px; }
    .nav li:hover ul, .nav li li:hover ul { top: -999em; }
    .nav li li {    display: block;    padding: 0px; float: left; height: auto !important; }
    .nav li ul { width: 202px; }
        .nav li li a:link, .nav li li a:visited {    display: block; height: auto; float: left; }
        .nav li:hover { visibility: inherit; /* fixes IE7 'sticky bug' */ }

/*------------------------------------------------*/
/*-----------------[WP CALENDAR]-----------------*/
/*------------------------------------------------*/
#wp-calendar { empty-cells: show; margin: 10px auto 0; width: 240px;    }
    #wp-calendar a { display: block; text-decoration: none; font-weight: bold; }
        #wp-calendar a:hover { text-decoration: underline; }
    #wp-calendar caption {    text-decoration: none; font: bold 13px Arial, Sans-Serif; }
    #wp-calendar td {    padding: 3px 5px; color: #9f9f9f; }
        #wp-calendar td#today { color: #ffffff; }
    #wp-calendar th {    font-style: normal;    text-transform: capitalize;    padding: 3px 5px; }
        #wp-calendar #prev a, #wp-calendar #next a { font-size: 9pt; }
        #wp-calendar #next a { padding-right: 10px; text-align: right; }
        #wp-calendar #prev a { padding-left: 10px; text-align: left; }

/*------------------------------------------------*/
/*-------------------[PAGE NAVI]------------------*/
/*------------------------------------------------*/
.pagination { overflow: hidden; padding: 15px 12px 0px; }

.wp-pagenavi { position: relative; }
.wp-pagenavi a, .wp-pagenavi a:link { padding: 5px 7px !important; margin: 2px; text-decoration: none; border:1px solid #E9E9E9 !important; color: #413f36; background-color: #fff; font-weight: normal !important; }
.wp-pagenavi a:visited { padding: 5px 7px; margin: 2px; text-decoration: none; border: 1px solid #e9e9e9; color: #413f36; background-color: #fff; }

.wp-pagenavi span.pages { padding: 5px 7px 5px !important; margin: 2px !important ; color: #000000; border:1px solid #E9E9E9 !important; color: #413f36; background-color: #fff; }
.wp-pagenavi span.current, .wp-pagenavi span.extend, .wp-pagenavi a:active, .wp-pagenavi a:hover { padding: 5px 7px !important; margin: 2px; font-weight: bold; background-color:#7798A6 !important; border:1px solid #618391 !important; color:#FFFFFF !important; }

a.readmore:hover, #sidebar div.custom-sidebar-block ul.control li a:hover, ul#cats-menu li a:hover, ul#page-menu li a:hover, div#slider-control div.featitem h2 a  { text-decoration: none; }

.js #feat-content, .js div#from-blog div.entries {display: none;}

.foursixeight { margin: 0px 0px 15px 84px;}
.fullwidth { width: 100% !important; }

#buildings {display:none;}

RenRen-

woensdag 5 januari 2011 @ 14:46

quote:
Op woensdag 5 januari 2011 14:45 schreef KomtTijd... het volgende:

[..]

Ja testcases ga ik maken als ik weer thuis ben

Ja pffff

Ik ga wel even met de rest kloten, want dat werkt ook nog niet naar behoren. Dankje als je wil gaan kijken.

RenRen-

woensdag 5 januari 2011 @ 14:48

quote:
Op woensdag 5 januari 2011 14:45 schreef Tegan het volgende:

[..]

Ik weet echt wel wat php is, beter dan dat ik css ken . Maar dat soort details hoef je een newbie niet mee te vervelen leek mij.

Neee, dat bedoel ik niet, maar voor iemand zegt dat hij gezellig de content aan moet gaan passen en hij denkt dat dat de PHP is en hij dat weer gaat verneuken...

quote:
Op woensdag 5 januari 2011 14:46 schreef Migue het volgende:

[..]

Ah ok, dit is de CSS, maar ik kan er geen wijs uit worden waar ik een aanpassing moet doorvoeren
[ code verwijderd ]

Er is toch een #comments? Daar moet je denk ik in gaan zoeken, gewoon proberen. Werkt het niet? Haal je het weer weg.

Migue

woensdag 5 januari 2011 @ 14:54

quote:
Op woensdag 5 januari 2011 14:48 schreef RenRen- het volgende:

[..]

Er is toch een #comments? Daar moet je denk ik in gaan zoeken, gewoon proberen. Werkt het niet? Haal je het weer weg.

Ik had verwacht dat de oplossing wat ingewikkelder zou zijn in de CSS dan dat, maar in de eerste poging al gevonden

Dank allen voor de hulp, het is voor elkaar!

Tegan

woensdag 5 januari 2011 @ 14:56

Mooi.

Heb je meteen geleerd wat er zo tof is aan css

RenRen-

woensdag 5 januari 2011 @ 15:02

quote:
Op woensdag 5 januari 2011 14:54 schreef Migue het volgende:

[..]

Ik had verwacht dat de oplossing wat ingewikkelder zou zijn in de CSS dan dat, maar in de eerste poging al gevonden Dank allen voor de hulp, het is voor elkaar!

Soms is het retemakkelijk en soms niet!

Ik vind het trouwens nog altijd raar dat in de css alles is "font-family" "text-align", en dat de kleur van je text opeens alleen "color" is.

Random brainfart, ik ga weer.

KomtTijd...

woensdag 5 januari 2011 @ 15:04

quote:
Op woensdag 5 januari 2011 15:02 schreef RenRen- het volgende:

[..]

Soms is het retemakkelijk en soms niet!

Ik vind het trouwens nog altijd raar dat in de css alles is "font-family" "text-align", en dat de kleur van je text opeens alleen "color" is.

Random brainfart, ik ga weer.

Klopt, ik typ in de haast nog weleens color, als ik background-color bedoel.
Maargoed text-color of color, scheelt toch weer 5 bytes

PimD

woensdag 5 januari 2011 @ 17:52

quote:
Op woensdag 5 januari 2011 13:38 schreef KomtTijd... het volgende:
Zet er <font color="black"> voor en </font> achter?

Echt waar, in een CSS-topic?

KomtTijd...

woensdag 5 januari 2011 @ 20:19

quote:
Op woensdag 5 januari 2011 17:52 schreef PimD het volgende:

[..]

Echt waar, in een CSS-topic?

Bekijk de vraag even, dan snap je het

RenRen-

donderdag 6 januari 2011 @ 09:24

Oke. Ik heb het nu getest met het alignen, en de helft werkt.
Bij de test heb ik deze code gebruikt:

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

#test{
    background-color:#fff;
    font-size:12px;
    height:100px;
    width:100px;
    display:table;
    position:absolute;
    left:0;
    top:0;

}

p.testtest{
        display:table-cell;
        vertical-align:middle;
}

Dit werkt.
In mijn werkelijke project heb ik het geprobeerd erin te gooien, dit is daarvan de code:

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

#contentleft{
    width:392px;
    height:307px;
    text-align:center;
    float:left;
    font-family:myriad pro;
    font-size:18px;
    display:table;
    position:absolute;
    left:0;
    top:0;

}
p.alignmiddle{
    display:table-cell;
    vertical-align:middle;
}

En wat er hier gebeurt, is dat al mijn text verdwenen is. Wtf? Halp?

Goed, de div met text is terecht. Hij is helemaal naar linksboven geschoven. Dit is nogal kut. Ik wil namelijk wel met margins werken, maar dat heeft geen nut als je een andere resolutie hebt lijkt me.

Maar de text is gecentreerd

[ Bericht 2% gewijzigd door RenRen- op 06-01-2011 09:31:58 ]

KomtTijd...

donderdag 6 januari 2011 @ 09:50

Waarom doe je position:absolute?

RenRen-

donderdag 6 januari 2011 @ 10:21

Omdat dat online stond.

RenRen-

donderdag 6 januari 2011 @ 10:29

Weet je wat? Ik ben het zat met die vertical align, ik ga met tabellen werken

KomtTijd...

donderdag 6 januari 2011 @ 10:41

Als dat werkt, moet een div met display:table-cell net zo goed werken.

RenRen-

donderdag 6 januari 2011 @ 10:48

quote:
Op donderdag 6 januari 2011 10:41 schreef KomtTijd... het volgende:
Als dat werkt, moet een div met display:table-cell net zo goed werken.

Het werkt, maar ik had toen ik dat tikte ook een probleem met een paragraph die niet helemaal goed wou centreren. Dus toen was ik het zat.

RenRen-

donderdag 6 januari 2011 @ 10:57

Weet jij toevallig waarom mijn td de hoogte lijkt te negeren?

1
2
3
4
5
6
7

td.logo{
    border:none;
    width:390px;
    height:200px;
    text-align:center;
    padding-top:60px;
}

Hierdoor verspringt alles continu namelijk.

KomtTijd...

donderdag 6 januari 2011 @ 11:44

Misschien doordat de padding + content groter is dan de hoogte?

Tables werken compleet anders met overflow enzo.

RenRen-

donderdag 6 januari 2011 @ 11:51

quote:
Op donderdag 6 januari 2011 11:44 schreef KomtTijd... het volgende:
Misschien doordat de padding + content groter is dan de hoogte?

Tables werken compleet anders met overflow enzo.

Hij verspringt altijd, alsof hij de hoogte gewoon negeert. Althans, hij staat in het midden, en de hoogte aan de bovenkant snapt hij, maar aan de onderkant niet.
Geen enkel plaatje is hoger dan 200px, dus dat zou niet mogen. Ook geen padding oid.

RenRen-

donderdag 13 januari 2011 @ 16:47

Ik maak een gradient in de achtergrond van een site op het moment, dmv CSS.

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

body{
    height:auto;

        background: #008800;
    background: -moz-linear-gradient(top, #5E5E5E, #000000);
    background: -webkit-gradient(linear,
                left top, right top, from(#5E5E5E), to(#000000));
    filter: progid:DXImageTransform.Microsoft.Gradient(
                StartColorStr='#5E5E5E', EndColorStr='#000000', GradientType=1);
  }

#container{
    width:900px;
    height:200px;
    margin: 0 auto;
    margin-top:200px;

}

Het rare waar ik tegenaan loop is dat de gradient niet doorloopt, maar ophoudt. De hoogte wordt overgenomen door de hoogte van de container, maar de gradient bevindt zich wel in de body.

Weet iemand waar dit aan ligt?

Ik zie wel dat het op te lossen is door de body een vaste hoogte te geven. Maar dit lijkt me niet slim om te doen, omdat mensen dan onnodig zullen scrollen. Of, bij mensen met een hoger beeldscherm dan 900px, zien weer de gradient opnieuw beginnen.

Light

donderdag 13 januari 2011 @ 16:58

quote:
Op donderdag 13 januari 2011 16:47 schreef RenRen- het volgende:

Het rare waar ik tegenaan loop is dat de gradient niet doorloopt, maar ophoudt. De hoogte wordt overgenomen door de hoogte van de container, maar de gradient bevindt zich wel in de body.

Weet iemand waar dit aan ligt?

De hoogte van de body is precies genoeg voor de site zelf. De rest van het scherm wordt opgevuld door html.

Ik gebruik meestal

1	html, body { ... }

Regel 2 uit het stukje wat je gepost hebt, voegt niets toe. Die kun je beter weglaten.

RenRen-

donderdag 13 januari 2011 @ 17:00

quote:
Op donderdag 13 januari 2011 16:58 schreef Light het volgende:

[..]

De hoogte van de body is precies genoeg voor de site zelf. De rest van het scherm wordt opgevuld door html.

Ik gebruik meestal

[ code verwijderd ]

Regel 2 uit het stukje wat je gepost hebt, voegt niets toe. Die kun je beter weglaten.

Die heb ik toegevoegd om te kijken of het werkte. Volgens mij mis je waar het over gaat

De gradient die ik in de body heb gestopt, neemt de hoogte van de container over. Dus elke 200 pixels begint de gradient opnieuw.

KomtTijd...

donderdag 13 januari 2011 @ 18:23

quote:
Op donderdag 13 januari 2011 17:00 schreef RenRen- het volgende:

[..]

Die heb ik toegevoegd om te kijken of het werkte. Volgens mij mis je waar het over gaat De gradient die ik in de body heb gestopt, neemt de hoogte van de container over. Dus elke 200 pixels begint de gradient opnieuw.

Geef je body min-height: 100%

Light

donderdag 13 januari 2011 @ 23:34

quote:
Op donderdag 13 januari 2011 17:00 schreef RenRen- het volgende:

[..]

Die heb ik toegevoegd om te kijken of het werkte. Volgens mij mis je waar het over gaat De gradient die ik in de body heb gestopt, neemt de hoogte van de container over. Dus elke 200 pixels begint de gradient opnieuw.

Nou, ik heb nooit met een gradient achtergrondkleur gewerkt maar ik heb wel vaak gezien dat de hoogte van html groter is dan die van body. Ik nam aan dat dat hier ook het probleem was. Ik had alleen geen kans om het te testen, dus ik heb als educated guess een mogelijke oplossing neergegooid. Helaas zat ik er deze keer naast

RenRen-

vrijdag 14 januari 2011 @ 09:16

quote:
Op donderdag 13 januari 2011 23:34 schreef Light het volgende:

[..]

Nou, ik heb nooit met een gradient achtergrondkleur gewerkt maar ik heb wel vaak gezien dat de hoogte van html groter is dan die van body. Ik nam aan dat dat hier ook het probleem was. Ik had alleen geen kans om het te testen, dus ik heb als educated guess een mogelijke oplossing neergegooid. Helaas zat ik er deze keer naast

Ohh, maar ik had eerst ook geen hoogte gegeven aan de body. Leek me useless, maar als hij zo doet ga ik ook maar wat doen. Kan gebeuren joh. Waarschijnlijk was ik ook niet zo clear.

quote:
Op donderdag 13 januari 2011 18:23 schreef KomtTijd... het volgende:

[..]

Geef je body min-height: 100%

Nop, nogsteeds doetie het verkeerd.

Light

vrijdag 14 januari 2011 @ 10:01

quote:
Op vrijdag 14 januari 2011 09:16 schreef RenRen- het volgende:

[..]

Ohh, maar ik had eerst ook geen hoogte gegeven aan de body. Leek me useless, maar als hij zo doet ga ik ook maar wat doen. Kan gebeuren joh. Waarschijnlijk was ik ook niet zo clear.

[..]

Nop, nogsteeds doetie het verkeerd.

Oplossing: kleurverloop op html, niet op body. En html ook min-height: 100% geven

RenRen-

vrijdag 14 januari 2011 @ 10:04

quote:
Op vrijdag 14 januari 2011 10:01 schreef Light het volgende:

[..]

Oplossing: kleurverloop op html, niet op body. En html ook min-height: 100% geven

Hoe zet ik code van CSS naar HTML dan?

Of gewoon boven de body zetten?

Light

vrijdag 14 januari 2011 @ 10:10

1
2
3
4
5
6
7
8

html, body {
    margin: 0;
    padding: 0;
}
html {
    background: -moz-linear-gradient(top, #5E5E5E, #000000);
    min-height: 100%;
}

RenRen-

vrijdag 14 januari 2011 @ 10:31

Ik heb nu ook die margin:0; en padding:0; erin gezet, geen effect.
Het rechter is FF.

Light

vrijdag 14 januari 2011 @ 10:35

De min-height op regel 12 hoort niet bij body maar bij html.

RenRen-

vrijdag 14 januari 2011 @ 10:46

quote:
Op vrijdag 14 januari 2011 10:35 schreef Light het volgende:
De min-height op regel 12 hoort niet bij body maar bij html.

Opgelost, dankje!

mschol

vrijdag 14 januari 2011 @ 13:38

ik gebruik voor een gradient achtergrond (ter vervanging van een plaatje dat geladen werd) de volgende stukje css:

1
2
3

background: -moz-linear-gradient(top, #e5e7e6, #eaeceb);
background: -webkit-gradient(linear,top,bottom,from(#e5e7e6),to(#eaeceb));
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#e5e7e6', EndColorStr='#eaeceb');

dit werkt prima in IE7/8/9 en FF3.6 (en bedankt RenRen- voor die laatste regel

)
echter probeer ik dit nu op een stuk css dat een <a href> aanpast en daar functioneert hij niet correct onder IE7, nou is dat niet echt een probleem maar ben ik wel benieuwd of iemand weet hoe dit komt

KomtTijd...

vrijdag 14 januari 2011 @ 13:42

quote:
Op vrijdag 14 januari 2011 13:38 schreef mschol het volgende:
ik gebruik voor een gradient achtergrond (ter vervanging van een plaatje dat geladen werd) de volgende stukje css:

[ code verwijderd ]

dit werkt prima in IE7/8/9 en FF3.6 (en bedankt RenRen- voor die laatste regel )
echter probeer ik dit nu op een stuk css dat een <a href> aanpast en daar functioneert hij niet correct onder IE7, nou is dat niet echt een probleem maar ben ik wel benieuwd of iemand weet hoe dit komt

DXImageTransform is gigantisch traag en buggy. Indien mogelijk zou ik gewoon een PNG blijven gebruiken, werkt over het algemeen stukken beter.

mschol

vrijdag 14 januari 2011 @ 14:11

quote:
Op vrijdag 14 januari 2011 13:42 schreef KomtTijd... het volgende:

[..]

DXImageTransform is gigantisch traag en buggy. Indien mogelijk zou ik gewoon een PNG blijven gebruiken, werkt over het algemeen stukken beter.

denk ik dat ik een mooi alternatief voor een plaatje heb gevonden... blijkt dat buggy te zijn

maar ach, dan maar terug naar het plaatje

[ Bericht 9% gewijzigd door mschol op 14-01-2011 14:21:25 ]

Donnis

zondag 16 januari 2011 @ 20:30

Is het handig om lappen tekst op een lay-out die je hebt gemaakt met Photoshop uit te printen? Of worden die letters dan heel lelijk?

donroyco

zondag 16 januari 2011 @ 20:34

quote:
Op zondag 16 januari 2011 20:30 schreef Donnis het volgende:
Is het handig om lappen tekst op een lay-out die je hebt gemaakt met Photoshop uit te printen? Of worden die letters dan heel lelijk?

Hoe bedoel je?

Wat heeft dit met CSS te maken?

Donnis

zondag 16 januari 2011 @ 20:40

Oh faal

Donnis

zondag 16 januari 2011 @ 20:46

Ik las CS5, en hoe je posts moet editten weet ik ook al niet meer te vinden met die nieuwe lay-out, lekker bezig.

Tegan

zondag 16 januari 2011 @ 21:18

Kan gebeuren

RenRen-

dinsdag 18 januari 2011 @ 10:28

Fu. Geen centraal htmltopic.

Maar misschien weten jullie wat.

Muziek op een site, is er een manier om ervoor te zorgen dat er muziek op iedere pagina is, maar dat hij niet elke keer opnieuw begint? E�n manier lijkt me om van de content een iframe te maken ofzo, en dan van een 'vast' element de muziek te maken. Maar ik weet dus niets van dat soort dingen af, vraag me af of het ook anders kan?

mstx

dinsdag 18 januari 2011 @ 10:46

quote:
Op dinsdag 18 januari 2011 10:28 schreef RenRen- het volgende:
Fu. Geen centraal htmltopic.

Maar misschien weten jullie wat.

Muziek op een site, is er een manier om ervoor te zorgen dat er muziek op iedere pagina is, maar dat hij niet elke keer opnieuw begint? E�n manier lijkt me om van de content een iframe te maken ofzo, en dan van een 'vast' element de muziek te maken. Maar ik weet dus niets van dat soort dingen af, vraag me af of het ook anders kan?

Frame, popupje (met daarin de player) of alle content met AJAX laden zijn de enige oplossingen denk ik zo. Ben eigenlijk van elke methode geen voorstander...

Light

dinsdag 18 januari 2011 @ 10:52

quote:
Op dinsdag 18 januari 2011 10:28 schreef RenRen- het volgende:
Fu. Geen centraal htmltopic.

Maar misschien weten jullie wat.

Muziek op een site, is er een manier om ervoor te zorgen dat er muziek op iedere pagina is, maar dat hij niet elke keer opnieuw begint? E�n manier lijkt me om van de content een iframe te maken ofzo, en dan van een 'vast' element de muziek te maken. Maar ik weet dus niets van dat soort dingen af, vraag me af of het ook anders kan?

Gewoon je eigen stereo op 10 zetten

Doe ik ook met mijn stereo als ik muziek wil horen, en dan zit ik niet te wachten op een site die daar doorheen komt toeteren

RenRen-

dinsdag 18 januari 2011 @ 10:56

quote:
Op dinsdag 18 januari 2011 10:52 schreef Light het volgende:

[..]

Gewoon je eigen stereo op 10 zetten Doe ik ook met mijn stereo als ik muziek wil horen, en dan zit ik niet te wachten op een site die daar doorheen komt toeteren

Sherlock, het is niet zo dat ik het wil, het moet

Dus ik moet een manier vinden.

RenRen-

dinsdag 18 januari 2011 @ 10:57

quote:
Op dinsdag 18 januari 2011 10:46 schreef mstx het volgende:

[..]

Frame, popupje (met daarin de player) of alle content met AJAX laden zijn de enige oplossingen denk ik zo. Ben eigenlijk van elke methode geen voorstander...

Frame is misschien een optie... Even op googlen, dankje

donroyco

dinsdag 18 januari 2011 @ 12:54

quote:
Op dinsdag 18 januari 2011 10:28 schreef RenRen- het volgende:
Fu. Geen centraal htmltopic.

Maar misschien weten jullie wat.

Muziek op een site, is er een manier om ervoor te zorgen dat er muziek op iedere pagina is, maar dat hij niet elke keer opnieuw begint? E�n manier lijkt me om van de content een iframe te maken ofzo, en dan van een 'vast' element de muziek te maken. Maar ik weet dus niets van dat soort dingen af, vraag me af of het ook anders kan?

Content inladen dmv jQuery?

RenRen-

dinsdag 18 januari 2011 @ 13:01

Mja, dan kan ik weer opnieuw beginnen met de hele site gok ik.

donroyco

dinsdag 18 januari 2011 @ 13:01

quote:
Op dinsdag 18 januari 2011 13:01 schreef RenRen- het volgende:
Mja, dan kan ik weer opnieuw beginnen met de hele site gok ik.

Soms moet je van tevoren bedenken hoe het moet.

RenRen-

dinsdag 18 januari 2011 @ 13:02

quote:
Op dinsdag 18 januari 2011 13:01 schreef donroyco het volgende:

[..]

Soms moet je van tevoren bedenken hoe het moet.

Soms gaat dat niet, omdat soms de klant na afloop nog even wat leuks bedenkt.

Ohja.

donroyco

dinsdag 18 januari 2011 @ 13:16

quote:
Op dinsdag 18 januari 2011 13:02 schreef RenRen- het volgende:

[..]

Soms gaat dat niet, omdat soms de klant na afloop nog even wat leuks bedenkt.

Ohja.

Als je het allemaal zo goed weet, waarom kom je nog dan in dit topic?

RenRen-

dinsdag 18 januari 2011 @ 13:17

quote:
Op dinsdag 18 januari 2011 13:16 schreef donroyco het volgende:

[..]

Als je het allemaal zo goed weet, waarom kom je nog dan in dit topic?

Hahaha, wat? Je maakt het wel heel gek. Ik weet het helemaal niet heel goed, ik weet alleen wel dat mensen soms -eigenlijk best vaak- op het einde opeens nog dingen erbij willen. Hoe ik het moet oplossen weet ik dus niet. Ik zit niet te wijsneuzen over CSS. Het enige wat ik goed weet is wat ik NIET en WEL moet doen om de kosten te beperken.

Ga ergens anders zeikstralen, dit is nutteloos.

donroyco

dinsdag 18 januari 2011 @ 13:23

quote:
Op dinsdag 18 januari 2011 13:17 schreef RenRen- het volgende:

[..]

Hahaha, wat? Je maakt het wel heel gek. Ik weet het helemaal niet heel goed, ik weet alleen wel dat mensen soms -eigenlijk best vaak- op het einde opeens nog dingen erbij willen. Hoe ik het moet oplossen weet ik dus niet. Ik zit niet te wijsneuzen over CSS. Het enige wat ik goed weet is wat ik NIET en WEL moet doen om de kosten te beperken.

Ga ergens anders zeikstralen, dit is nutteloos.

Ik zeikstraal niet, maar geef je alleen tips dat je op voorhand al zulke dingen in gedachten moet houden, wil je die niet aannemen, dan is dat jouw probleem.

RenRen-

dinsdag 18 januari 2011 @ 13:24

quote:
Op dinsdag 18 januari 2011 13:23 schreef donroyco het volgende:

[..]

Ik zeikstraal niet, maar geef je alleen tips dat je op voorhand al zulke dingen in gedachten moet houden, wil je die niet aannemen, dan is dat jouw probleem.

Ik kan op voorhand niet zulke dingen in gedachten houden, als die dingen niet in de planning stonden, dat schrijf ik net. Anders had ik echt wel wat anders bedacht voor de content en dergelijken, ik ben toch zeker niet achterlijk. Daarom zoek ik een oplossing die niet inhoudt dat ik de site helemaal opnieuw moet bouwen. Ik ga toch niet elke site zo bouwen dat er eventueel nog een keer ooit een muziekje onder kan, dat snap jij ook wel

En als jij dus niet goed wilt lezen, moet je mij daar niet mee lastig vallen.

KomtTijd...

dinsdag 18 januari 2011 @ 14:09

quote:
Op dinsdag 18 januari 2011 13:01 schreef RenRen- het volgende:
Mja, dan kan ik weer opnieuw beginnen met de hele site gok ik.

Gebruik je een CMS? Vaak bestaan daar AJAX-modules voor.

RenRen-

dinsdag 18 januari 2011 @ 14:11

quote:
Op dinsdag 18 januari 2011 14:09 schreef KomtTijd... het volgende:

[..]

Gebruik je een CMS? Vaak bestaan daar AJAX-modules voor.

Nee, het is een heel simpele site eigenlijk.

Light

dinsdag 18 januari 2011 @ 14:16

quote:
Op dinsdag 18 januari 2011 13:23 schreef donroyco het volgende:

[..]

Ik zeikstraal niet, maar geef je alleen tips dat je op voorhand al zulke dingen in gedachten moet houden, wil je die niet aannemen, dan is dat jouw probleem.

Je kunt niet alles in gedachten houden. Als je bij de buurman een vierkant terras van 4 x 4 meter gaat leggen en de buurman besluit, als je nog 3 tegels moet leggen, dat hij toch liever een rond terras met dezelfde oppervlakte heeft, kun je ook weer opnieuw beginnen.

minibeer

zondag 23 januari 2011 @ 02:38

eens

.
Ik zou een klein (misschien zelfs leeg, maar ik zou wel ergens een uit-optie inbouwen) framepje gebruiken. Dat kan denk ik nog wel makkelijk zonder heel veel aan alle pagina's aan te moeten passen.

KomtTijd...

zondag 23 januari 2011 @ 02:46

Frames hiervoor sowieso niet gebruiken. Been there, done that. Werkt echt vreselijk. AJAX zou dan een 200x betere oplossing zijn. Maar ik heb de betreffende website gezien en het enige verschil in de pagina's is een aantal afbeeldingen. Daar valt dus prima een js-functie van 2 regels voor te schrijven, ipv van pagina te wisselen.

Black-Hole

maandag 24 januari 2011 @ 23:12

Zit al de hele avond te klooien om een 3 column layout voor elkaar te krijgen met floats en het lukt maar niet om de recht kolom goed te krijgen zodat hij echt naast de middelste kolom komt in plaats van rechts ter hoogte van waar de middelste kolom is ge�indigd.

Dit is de (versimpelde) HTML code die ik gebruik:

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

<div id="wrapper">

<div id="left">

<p>Lorem ..... ultrices, orci.</p>

</div> 

<div id="middle">

<p>Lorem ...... placerat ultrices, orci.
</p>

</div> 

<div id="right">

<p>Lorem ....... ultrices, orci.</p>

<p>Pellentesque ...... felis.</p>

</div> 

</div>

en de CSS:

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

#wrapper{
width: 960px;
margin: auto;
}

#left {
float: left;
width: 260px;
background: red;
}

#middle {
margin: 0px 260px;
width: 440px;
background: green;
}

#right {
float: right;
width: 260px;
background: yellow;
}

Volgens mij is de oplossing zo simpel maar ik kom er nu echt niet uit

Light

maandag 24 januari 2011 @ 23:39

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

#left {
  float: left;
  width: 260px;
  background: red;
}
#middle {
  float: left;
  width: 440px;
  background: green;
}
#right {
  float: left;
  width: 260px;
  background: yellow;
}

minibeer

maandag 24 januari 2011 @ 23:43

quote:
Op zondag 23 januari 2011 02:46 schreef KomtTijd... het volgende:
Frames hiervoor sowieso niet gebruiken. Been there, done that. Werkt echt vreselijk. AJAX zou dan een 200x betere oplossing zijn. Maar ik heb de betreffende website gezien en het enige verschil in de pagina's is een aantal afbeeldingen. Daar valt dus prima een js-functie van 2 regels voor te schrijven, ipv van pagina te wisselen.

ok misschien is ajax ook wel een optie, maar waarom werken frames vreselijk?

Black-Hole

dinsdag 25 januari 2011 @ 06:40

quote:
Op maandag 24 januari 2011 23:39 schreef Light het volgende:

[ code verwijderd ]

Zo makkelijk dus

Thanks!

Nashje

dinsdag 25 januari 2011 @ 19:31

Ik wil 2 verschillende menu opties maken, eentje voor de actieve versie, de andere voor de niet-actieve versie.

Heb dit maar het wil niet vlotten:

1
2
3
4
5
6

    <div class="menu">
        <div class="active"><a href="index.html">Home</a></div>
        <div class="noactive"><a href="#">Over mij</a></div>
        <div class="noactive"><a href="portfolio.html">Portfolio</a></div>
        <div class="noactive"><a href="#">Contact</a></div>
    </div>

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

.menu {
float: left;
width: 100%;
height: 80px;
font: 12px Arial;
}

.active {
font: 12px Arial;
width: 90px;
height: 80px;
float: left;
color: #FFFFFF;
background: #410400;
text-decoration: none;
}

.active a:link, a:active, a:visited, a:hover { color: #FFFFFF; text-decoration: none; }

.noactive {
font: 12px Arial;
width: 90px;
height: 80px;
float: left;
color: #410400;
background: #fff;
text-decoration: none;
}

.noactive a:link, a:active, a:visited, a:hover { color: #410400; background: #fff; text-decoration: none }

Kan iemand me aub helpen?

KomtTijd...

dinsdag 25 januari 2011 @ 19:39

quote:
Op dinsdag 25 januari 2011 19:31 schreef Nashje het volgende:
Ik wil 2 verschillende menu opties maken, eentje voor de actieve versie, de andere voor de niet-actieve versie.

Heb dit maar het wil niet vlotten:

[ code verwijderd ]

[ code verwijderd ]

Kan iemand me aub helpen?

En wat gaat er dan precies mis? Zonder te testen kan ik al zeggen dat het probleem waarschijnlijk is dat je alleen onderscheid maakt in .active a:link en .noactive a:link. a:hover, a:visited en a:active worden gewoon volgens de regels van specificity gestijld.

En nog wat algemene opmerkingen:
- voor een menu gebruikt men doorgaans een unordered list (<ul>)
- een hele rij elementen dezelfde classname geven lijkt me een beetje overbodig.

Nashje

dinsdag 25 januari 2011 @ 20:11

Hmm okay, thanks for the advice. Dan begin ik even van vooraf aan met een unordered list.

Plaats ik de actieve link op deze manier goed?

1
2
3
4
5
6

    <ul id="menu">
            <li class="active"><a href="index.html">Home</a></li>
            <li><a href="#">Over mij</a></li>
            <li><a href="#">Portfolio</a></li>
            <li><a href="#">Contact</a></li>
    </ul>

E�n menuitem is 90px breed en 80px hoog. Hoe pas ik dat toe?

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

#menu {
    padding:0;
    margin:0;
    list-style-type: none;
}

#menu li {
    width: 90px;
    height: 80px;
    color: #410400;
    background: #fff;
    display: inline;
}

#menu li .active {
    color: #fff;
    background: #410400;
}

#menu li a:link, a:active, a:visited {
    color: #410400;
    background: #fff;
    text-decoration: none;
}

#menu li a:hover {
    color: #fff;
    background: #410400;
    text-decoration: none;
}

KomtTijd...

dinsdag 25 januari 2011 @ 22:01

quote:
Op dinsdag 25 januari 2011 20:11 schreef Nashje het volgende:
Hmm okay, thanks for the advice. Dan begin ik even van vooraf aan met een unordered list.

Plaats ik de actieve link op deze manier goed?

[ code verwijderd ]

ja dat is prima zo

quote:
E�n menuitem is 90px breed en 80px hoog. Hoe pas ik dat toe?

[ code verwijderd ]

inline-elementen vormen zich naar hun inhoud. Maak er inline-block elementen van. Of laat ze lekker block, en gebruik float:left om ze naast elkaar te krijgen.

verder snap ik nog steeds niet wat je hier mee wilt:

1
2
3
4
5

#menu li a:link, a:active, a:visited {
    color: #410400;
    background: #fff;
    text-decoration: none;
}

Maar het lijkt me gewoon een fout. Ik denk dat dat hele gedeelte eruit kan en dat je bovendien eens wat moet lezen over CSS selectors. Goeie startplaats zoals altijd: http://www.w3schools.com/css/default.asp

Nashje

woensdag 26 januari 2011 @ 14:55

Even mbv van een plaatje.

De actieve pagina moet dus zichtbaar zijn en wanneer je met de cursor over de overige knoppen gaat moet deze gemarkeerd worden. Dat is wat ik met die hover wil krijgen. Met die display:inline komen ze langs elkaar, maar ik wil elke item dezelfde grootte en breedte meegeven (90x80px).

Nashje

woensdag 26 januari 2011 @ 15:18

Tis me voor een gedeelte gelukt!

Heb nu:

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

#menu {
    padding:0;
    margin:0;
    list-style-type: none;
}

#menu li {
    width: 90px;
    height: 80px;
    color: #410400;
    background: #fff;
    float: left;
    display: block;
}

#menu li .active {
    color: #fff;
    background: #410400;
}

#menu li a { float: left; display: block; width: 90px; height: 80px; }

#menu li a:hover {
    color: #fff;
    background: #410400;
    text-decoration: none;
}

Alleen die class="active" op Home pakt ie niet. Hmmz.

Nashje

woensdag 26 januari 2011 @ 15:22

OMG, tis me gewoon gelukt.

Had:

1
2
3
4

#menu li .active {
color: #fff;
background: #410400;
}

Veranderd in:

1
2
3
4

#menu .active a {
color: #fff;
background: #410400;
}

Voila. Bedankt

donroyco

woensdag 26 januari 2011 @ 15:23

Gebruik je Web Dev Toolbar?

Light

woensdag 26 januari 2011 @ 22:18

Firebug is ook handig, naast die webdev toolbar.

PimD

woensdag 26 januari 2011 @ 23:03

Ik zou niet meer willen/kunnen leven zonder Firebug

cablegunmaster

donderdag 3 februari 2011 @ 11:46

vraagje ik zit nu met

1
2
3
4
5
6
7
8
9
10

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

#container{
    width:1000px;
    background: #ffffff;
    margin-left: auto;
    margin-right: auto;
}

#menu{
    float: left;
    width: 160px;
    height: 100%;
    font-size: 11px;
    min-height: 800px;
    padding: 5px 5px 5px 5px;
}
#content {
    float: left;
    width: 800px;
    height: 100%;
    font-size: 12px;
    padding-bottom:10px;
    padding-left:20px;
}

#footer{
    float: left;
    height: 120px;
    width: 990px;
    font-size: 11px;
    margin-left: auto;
    margin-right: auto;
}

Probleem is dat hij de container niet wil weergeven

.
het idee is een paar Divs met een witte achtergrond en dat lukt niet echt.

[ Bericht 0% gewijzigd door cablegunmaster op 03-02-2011 11:52:51 ]

RenRen-

donderdag 3 februari 2011 @ 11:47

Je hebt je containerdiv niet afgesloten.

cablegunmaster

donderdag 3 februari 2011 @ 11:53

quote:
Op donderdag 3 februari 2011 11:47 schreef RenRen- het volgende:
Je hebt je containerdiv niet afgesloten.

css die klopt wat ik heb gekopieerd de html is pseudo dus ja was een klein foutje

alsnog geen witte achtergrond.

RenRen-

donderdag 3 februari 2011 @ 11:55

Het is ook background-color

donroyco

donderdag 3 februari 2011 @ 11:57

quote:
Op donderdag 3 februari 2011 11:55 schreef RenRen- het volgende:
Het is ook background-color

background pakt ie ook

RenRen-

donderdag 3 februari 2011 @ 11:59

quote:
Op donderdag 3 februari 2011 11:57 schreef donroyco het volgende:

[..]

background pakt ie ook

In plaats dat je die gast helpt, let je liever op mij. Top!

donroyco

donderdag 3 februari 2011 @ 12:01

quote:
Op donderdag 3 februari 2011 11:59 schreef RenRen- het volgende:

[..]

In plaats dat je die gast helpt, let je liever op mij. Top!

Huilen doe je maar lekker ergens anders.

RenRen-

donderdag 3 februari 2011 @ 12:10

quote:
Op donderdag 3 februari 2011 12:01 schreef donroyco het volgende:

[..]

Huilen doe je maar lekker ergens anders.

Ja, boohoo, de grote Donroyco haat me. Boohoo.
Ga die gast helpen ipv altijd op mij te letten, je weet altijd alles toch zo goed?

KomtTijd...

donderdag 3 februari 2011 @ 12:14

footer clear:both meegeven ipv float:left.

cablegunmaster

donderdag 3 februari 2011 @ 12:27

het werkt niet en de rest van de css werkt wel

KomtTijd...

donderdag 3 februari 2011 @ 12:33

Dan maak je een typfout of je testcase komt niet overeen met wat je zelf probeert.

cablegunmaster

donderdag 3 februari 2011 @ 12:52

quote:
Op donderdag 3 februari 2011 12:33 schreef KomtTijd... het volgende:
Dan maak je een typfout of je testcase komt niet overeen met wat je zelf probeert.

W3 validator fixte het dankje

. het kwam door extra scriptjes die nog niet helemaal gevalideerd waren

. Dankje voor de aandacht. en kappen met bekvechten

ursel

vrijdag 18 februari 2011 @ 10:43

Ik heb een probleem met mijn textgrootte versus mijn achtergrond image.

Mijn image is op zijn smalste stuk 75px breed. Het is de bedoeling dat een aantal keywords verdeeld worden bovenop deze image. So fa so good. Alleen zijn sommige keywords een beetje lang, of meerdere worden. Meerdere worden gaat meestal nog wel goed gelukkig.

Ik heb mijn keywords div nu een breedte gegeven van 75 px. Het geheel staat aan de rechterkant van de site en heb er een float right en een textalign right aan meegegeven. Probleem is alleen dat mijn tekst als die groter is dan 75px, aan de rechterkant uit mijn div loopt.

Wat kan ik het beste doen? Links uit de div laten lopen (en hoe doe ik dat:P), Of zijn er mogelijkheden om worden af te kappen en de regel eronder verder te gaan?

KomtTijd...

vrijdag 18 februari 2011 @ 10:51

http://www.css3.info/preview/word-wrap/

ursel

vrijdag 18 februari 2011 @ 11:33

quote:
Op vrijdag 18 februari 2011 10:51 schreef KomtTijd... het volgende:
http://www.css3.info/preview/word-wrap/

Hmm, natuurlijk. Mja, niet zo heel erg tevree mee eigenlijk.

Krijg je van die rare woorden weer van.

Heb je ook nog een optie voor het aan de linkerkant uitlopen van een div?

KomtTijd...

vrijdag 18 februari 2011 @ 12:04

text-allign:right wellicht?

ursel

vrijdag 18 februari 2011 @ 12:11

quote:
Op vrijdag 18 februari 2011 12:04 schreef KomtTijd... het volgende:
text-allign:right wellicht?

Staat al zo

quote:
Op vrijdag 18 februari 2011 10:43 schreef ursel het volgende:

Het geheel staat aan de rechterkant van de site en heb er een float right en een textalign right aan meegegeven.

Light

vrijdag 18 februari 2011 @ 12:16

direction: rtl;
Maar ik denk dat die niet doet wat je wilt

KomtTijd...

vrijdag 18 februari 2011 @ 12:17

quote:
Op vrijdag 18 februari 2011 12:16 schreef Light het volgende:
direction: rtl;
Maar ik denk dat die niet doet wat je wilt

naalspo nerovetsrethca nedroow ej la nad ne heheW

RenRen-

vrijdag 18 februari 2011 @ 12:51

Ik loop zelf ook tegen een probleem aan.

In een site heb ik een div, bovenin, die heeft een achtergrondkleur. Die hebben we een position:absolute mee moeten geven, omdat anders de achtergrondkleur maar een klein stukje opvult.

Hierdoor heb ik problemen met andere divs, die gaan erachter zitten. Geen idee hoe ik het op kan lossen.
Help?

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

#imageheader {
    width:878px;
    height:auto;
    max-height:291px;
    background-color:#e8ded2;
    margin: 10px 0px 20px -5px;
    padding: 11px 11px 11px 11px;
    position:absolute;
}

#left {
    min-width:210px;
    max-width:210px;
    height:auto;
    float:left;
    background-color:#CCC;
    margin-left:6px;
}

KomtTijd...

vrijdag 18 februari 2011 @ 13:42

[Geen search nodig!] De oplossing voor alle problemen!

RenRen-

vrijdag 18 februari 2011 @ 13:46

quote:
Op vrijdag 18 februari 2011 13:42 schreef KomtTijd... het volgende:
[Geen search nodig!] De oplossing voor alle problemen!

Wat ik wil is dat die left onder de imageheader komt

KomtTijd...

vrijdag 18 februari 2011 @ 13:49

Nee het probleem is dat #imageheader iets niet goed doet met de achtergrond, en je workaround daarvoor zorgt voor een nieuw probleem. Kortom, bij de bron aanpakken. Wat gaat er mis met die achtergrond?