[CSS] voor dummies

FOK!forum / Digital Corner / [CSS] voor dummies - deel 12

Roy_T

dinsdag 24 maart 2009 @ 12:35

Vorige delen:

[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

Game on

PiRANiA

dinsdag 24 maart 2009 @ 12:36

.forumpost{
tvp:true;
}

Roy_T

dinsdag 24 maart 2009 @ 12:37

quote:
Op dinsdag 24 maart 2009 12:23 schreef Nashje het volgende:

Ben weer aanbeland bij een nieuw raadsel. Zal vast mogelijk zijn, maar weet niet hoe... Een zoeksysteem binnen je site, die niet gaat zoeken in tables oid, nee, stuk tekst waarop je hebt gezocht wordt geselecteerd op de site. Dus zonder PHP ofzo.

Off-topic hier, maar dat zou met JS kunnen. Vraag me wel af waarom, want dat gaat fucking zwaar zijn (client op de achtergrond alle pagina's binnen laten trekken en kijken of je zoekstring erin voorkomt).

LordNemephis

dinsdag 24 maart 2009 @ 13:04

quote:
Op dinsdag 24 maart 2009 12:37 schreef Roy_T het volgende:

[..]

Off-topic hier, maar dat zou met JS kunnen. Vraag me wel af waarom, want dat gaat fucking zwaar zijn (client op de achtergrond alle pagina's binnen laten trekken en kijken of je zoekstring erin voorkomt).

Inderdaad, zou toch een databeest gebruiken daarvoor.

Nashje

dinsdag 24 maart 2009 @ 13:31

quote:
Op dinsdag 24 maart 2009 12:34 schreef Roy_T het volgende:
Off-topic hier, maar dat zou met JS kunnen. Vraag me wel af waarom, want dat gaat fucking zwaar zijn (client op de achtergrond alle pagina's binnen laten trekken en kijken of je zoekstring erin voorkomt).

Alle pagina's? Ik wil gewoon de inhoud van één pagina doorzoeken, dus hoeven niet meerdere pagina's te worden doorzocht.

Roy_T

dinsdag 24 maart 2009 @ 14:37

Ah, ik dacht dat je echt een site-wide zoekmachine zocht

Maar dan nog zou ik het niet client-side doen

Nashje

dinsdag 24 maart 2009 @ 14:41

Hoe zou je het dan doen? Er wordt verder nog niets in een database geschreven of uberhaupt gedaan.

Roy_T

dinsdag 24 maart 2009 @ 14:47

Beginnen met wél in een database schrijven

Het probleem met client-side is dat je alleen door de content wilt zoeken, en niet door de hele code (neem ik aan). Je zult dan in je script aan moeten geven binnen welke elementen je wél wilt zoeken en dit vervolgens doen met een regex ofzo. Het kan wel, maar het is een pokkewerk, terwijl een database hiervoor gemaakt is (bijv. door een FULLTEXT index te gebruiken in MySQL). Maar hoe je het ook doet, het heeft nooit iets met [CSS] voor dummies - deel 12 te maken

msnk

dinsdag 24 maart 2009 @ 14:50

quote:
Op dinsdag 24 maart 2009 12:36 schreef PiRANiA het volgende:
.forumpost{
tvp:true;
}

RM-rf

dinsdag 24 maart 2009 @ 14:52

quote:
Op dinsdag 24 maart 2009 13:31 schreef Nashje het volgende:

[..]

Alle pagina's? Ik wil gewoon de inhoud van één pagina doorzoeken, dus hoeven niet meerdere pagina's te worden doorzocht.

ik had er ooit een javascriptje voor... nog in de tijd van Netscape4/explorer4 deed dat het ook...
de vraag is echter eerder of je dat wil, browsers bieden zelf een veel betere eigen standaard functionaliteit voor : CTRL-F en dan heeft het eerder weinig zin om zelf met brakke scriptjes goed functionerende browser-functionaliteiten te 'simuleren'.

edit: was niet eens zo moeilijk te vinden:
http://javascript.internet.com/miscellaneous/search-the-page.html

Nashje

dinsdag 24 maart 2009 @ 15:23

Hmm okay.

[quote]Op dinsdag 24 maart 2009 14:52 schreef RM-rf het volgende:

[..]%

[ Bericht 37% gewijzigd door Nashje op 24-03-2009 15:55:41 ]

Roy_T

dinsdag 24 maart 2009 @ 15:38

quote:
Op dinsdag 24 maart 2009 15:23 schreef Nashje het volgende:
Verbinding onderbroken

De verbinding met de server werd geherinitialiseerd tijdens het laden van de pagina.

Nashje

dinsdag 24 maart 2009 @ 15:40

Hmm Fok doet raar, krijg m'n bericht niet geedit.

Chandler

dinsdag 24 maart 2009 @ 22:39

Weet iemand of er al een fix / work around voor dit probleem:
http://www.adobe.com/cfusion/communityengine/index.cfm?event=showdetails&postId=3821&productId=1

Zou erg fijn zijn

Roy_T

dinsdag 24 maart 2009 @ 22:41

De workaround die ik eerder gaf: een div met die achtergrond ter grootte van de textarea, textarea erin renderen met background: transparent.

Chandler

woensdag 25 maart 2009 @ 13:56

Ja, maar dus nog geen andere workaround dus.. heb je ook nog een link naar artikel van die workaround?

Roy_T

woensdag 25 maart 2009 @ 14:05

Nee, want ik heb hem zelf verzonnen en er geen artikel over geschreven

Maar zo moeilijk is het niet toch

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

<div class="textarea_wrap"><textarea>bla</textarea></div>

div.textarea_wrap,
textarea {
   width: 200px;
   height: 200px;
}

div.textarea_wrap {
   background: url(bg.gif);
}

textarea {
   background: transparent;
}

Chandler

woensdag 25 maart 2009 @ 14:16

Ik zou er dan toch eens een artikeltje aan wijden

want er is blijkbaar veel vraag naar

krijg deze vraag vaker per MSN en zeg dan altijd dat het onmogelijk is

Roy_T

woensdag 25 maart 2009 @ 14:27

Dat is het ook, strict gezien: je hebt een extra semantisch gezien nutteloos element nodig

Nashje

woensdag 25 maart 2009 @ 15:18

Hmm, ik heb een ul li lijstje. En daardoor gaat dus de tekst in een lijstje staan, die wat naar rechts verschuift, as usually bij een li item. Is er een mogelijkheid dat ik deze ruimte weg kan schoppen en wel alles strak naar links kan plaatsen?

Roy_T

woensdag 25 maart 2009 @ 15:42

quote:
Op woensdag 25 maart 2009 15:18 schreef Nashje het volgende:
Hmm, ik heb een ul li lijstje. En daardoor gaat dus de tekst in een lijstje staan, die wat naar rechts verschuift, as usually bij een li item. Is er een mogelijkheid dat ik deze ruimte weg kan schoppen en wel alles strak naar links kan plaatsen?

Iets met de margin/padding doen. Als je alles links wilt hebben zonder list-style (bolletjes) is het simpel ("margin: 0; padding: 0; list-style: none" op de <ul>), anders moet je even opzoeken hoe de verschillende browsers zich gedragen; de ene gebruikt namelijk padding en de andere margin voor hun default rendering.

amvrosios

donderdag 26 maart 2009 @ 07:02

als het mogelijk is gebruik dan:

padding:0;
margin:0;

Niet perfect,maar werkt wel!

Chandler

donderdag 26 maart 2009 @ 07:45

quote:
Op woensdag 25 maart 2009 14:27 schreef Roy_T het volgende:
Dat is het ook, strict gezien: je hebt een extra semantisch gezien nutteloos element nodig

Nou zie het eerder als een fout van de browser op zich, je zou een achtergrond toch gewoon fixed moeten kunnen plaatsen

hello_moto1992

maandag 30 maart 2009 @ 19:47

'k hoop dat ik hier aan het goede adres ben.

Ik heb een vlak (div) met daarin een lijstje met namen (li). Daarnaast is gewoon ruimte. In die ruimte zou ik graag een foto willen laten door middel van een mouse-over. Iemand een ideetje?

RM-rf

maandag 30 maart 2009 @ 22:11

quote:
Op maandag 30 maart 2009 19:47 schreef hello_moto1992 het volgende:
'k hoop dat ik hier aan het goede adres ben.

Ik heb een vlak (div) met daarin een lijstje met namen (li). Daarnaast is gewoon ruimte. In die ruimte zou ik graag een foto willen laten door middel van een mouse-over. Iemand een ideetje?

je wil een lijst, dat is dus altijd een UL of OL... géén DIV (die tag kies je als je gen andere optie hebt)

wat je wilt is gewoon heel simpel te doen door datgene wat je nu verteld in code op te schrijven:

1
2
3
4
5

en dan de CSS-code

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

UL {
  position: relative; /* positioning in normale flow, maar zodat de afbeelding erbinnen gepositioneerd kan worden */
  width: 100%;
}
UL LI A IMG {
  display: none; /* verberg afbeelding */
  position: absolute; / positioneer afbeelding */
  top: 10px; right: 10px;
}
UL LI A:hover IMG {
  display: block ; /* toon afbeelding bij hover */
}

[ Bericht 0% gewijzigd door RM-rf op 31-03-2009 01:44:19 ]

Roy_T

maandag 30 maart 2009 @ 22:14

Maar dan zonder die hoofdletters voor ELEMENTEN in je CSS

RM-rf

dinsdag 31 maart 2009 @ 01:54

quote:
Op maandag 30 maart 2009 22:14 schreef Roy_T het volgende:
Maar dan zonder die hoofdletters voor ELEMENTEN in je CSS

wat bedoel je daarmee?
dat is gewoon een kwestie van coding conventies en het gebruik van full-caps in CSS om elementen aan te geven is nu juist zeer wijd verbreid (omdat meestal classnames sowieso undercast zijn en id-selectors enkel met een hofodletteer beginnen kun je goed het onderscheid aangeven daarmee)

we hebben het hier over HTML en niet case-sensitive XML of dat nutteloze XHTML (dat sowieso een doodlopend pad geworden is op het WWW)

er stond wel een foutje in mn code... ik had .hover staan ipv :hover, dus een dubbele punt

n8n

dinsdag 31 maart 2009 @ 02:11

Er wordt naar mijn weten bij namen van elementen, id's en classes altijd aangeraden alles met onderkast letters te schrijven. Dat staat naar mijn opinie ook een stuk netter.

tevens TerugVindCss

Roy_T

dinsdag 31 maart 2009 @ 08:13

quote:
Op dinsdag 31 maart 2009 01:54 schreef RM-rf het volgende:

wat bedoel je daarmee?
dat is gewoon een kwestie van coding conventies en het gebruik van full-caps in CSS om elementen aan te geven is nu juist zeer wijd verbreid (omdat meestal classnames sowieso undercast zijn en id-selectors enkel met een hofodletteer beginnen kun je goed het onderscheid aangeven daarmee)

Het is juist een conventie om nooit caps te gebruiken. Ik ken tenminste niemand die het doet (en ik ken best veel front-enders

RM-rf

dinsdag 31 maart 2009 @ 10:11

quote:
Op dinsdag 31 maart 2009 08:13 schreef Roy_T het volgende:

[..]

Het is juist een conventie om nooit caps te gebruiken. Ik ken tenminste niemand die het doet (en ik ken best veel front-enders ).

tech is er geen enkele plicht ... ik heb die gewoonte al heel lang en in de CSS1 spec wordt het ook heel consequent toegepast : http://www.w3.org/TR/CSS1/#contextual-selectors ... in de CSS2 specificatie ook: http://www.w3.org/TR/CSS2/selector.html#type-selectors (in latere versies van de CSS-specificatie staat soms een mengeling, vreemd genoeg worden soms kapitalen voor elementen gebruikt en soms undercast... er staat wel in dat CSS zelf en selectoren case-insensitive zijn)

Het grootste voordeel voor mij is de duidelijke afscheiding tussen verschillende soort selectoren..
zelf prefereer ik ook zoveel mogelijk via element-selectoren te definieren en pas als dat niet lukt terug te vallen op classnames en/of id's als selectoren ...

ik neem aan dat je ook erkent dat er geen geldige reden is het niet te doen behalve dan een persoonlijke voorkeur.

Roy_T

dinsdag 31 maart 2009 @ 10:50

quote:
Op dinsdag 31 maart 2009 10:11 schreef RM-rf het volgende:

ik neem aan dat je ook erkent dat er geen geldige reden is het niet te doen behalve dan een persoonlijke voorkeur.

Klopt, voorkeur en conventie. Ik moedig mensen over het algemeen aan om de conventies zoveel mogelijk te volgen, maar da's ook persoonlijk.

hello_moto1992

dinsdag 31 maart 2009 @ 15:09

quote:
Op maandag 30 maart 2009 22:11 schreef RM-rf het volgende:

[..]

je wil een lijst, dat is dus altijd een UL of OL... géén DIV (die tag kies je als je gen andere optie hebt)

wat je wilt is gewoon heel simpel te doen door datgene wat je nu verteld in code op te schrijven:
[ code verwijderd ]

en dan de CSS-code
[ code verwijderd ]

Dit werkt prima, bedankt

. Maar de foto komt nu steeds ten hoogte van de naam. Kan die foto ook op een vaste plaats?

RM-rf

dinsdag 31 maart 2009 @ 15:46

quote:
Op dinsdag 31 maart 2009 15:09 schreef hello_moto1992 het volgende:

[..]

Dit werkt prima, bedankt . Maar de foto komt nu steeds ten hoogte van de naam. Kan die foto ook op een vaste plaats?

ja hoor... daarvoor kun je de positionering verder met behulp van CSS 'stylen'....

wil je dat 'fine-tunen' kun je bv de elementen (UL, LI of de IMG ) 'border: 1px solid green;' (of andere kleuren) toewijzen zodat je precies ziet hoe groot elemente precies zijn en waar ze precies staan..
de IMG's worden nu op basis van de breedte van de UL gepositioneerd (doordat dit het bovenliggende element met een 'position' is) relatief afhankelijk van de 'top' en rechterzijde...

dat is echter allemaal via CSS aan te passen/ te stylen.

Chanty87

dinsdag 31 maart 2009 @ 18:37

Halp please! Ik heb een lijst genest in een div van ~200px. In die lijst staat weleens een lange link en die wordt in Firefox gewoon netjes afgebroken zodat het in de div blijft. In IE7 echter niet

Die laat de link gewoon uit de div lopen zonder het af te breken. Valt dit te fixen?

Chandler

woensdag 1 april 2009 @ 08:53

Ik heb een poll gemaakt middels html/css, echter krijg ik de footer niet precies op de juiste plek en heb werkelijk geen idee waarom deze naar rechts verspringt.

Ik heb al clear:both geprobeerd,margins, padding,left, etc maar niets werkt.

voorbeeld

Live voorbeeld:
http://htmlpoll.testertje.nl/pollview.php?code=6a6fa00b

HTML code:

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

        <div id="poll">
            <h1 id="poll-header">1234567890123</h1>
            <dl id="poll-content">
            <dt><a href="http://htmlpoll.testertje.nl/vote/6a6fa00b-1.html">dit is een test vraag</a></dt>
            <dd class="bar" style="width: 0%;">%</dd>
            <dd class="votes">0 x</dd>
            <dt><a href="http://htmlpoll.testertje.nl/vote/6a6fa00b-2.html">dit is een 123 vraag</a></dt>
            <dd class="bar" style="width: 0%;">%</dd>
            <dd class="votes">0 x</dd>
            </dl>
            <br style="clear:both;" />
            <ul id="poll-footer">
                <li id="votes">Aantal stemmen: 0</li>
                <li id="views">Keer bekeken: 13</li>
                <li id="advertisement">Maak ook een gratis poll op <a href="http://www.htmlpoll.nl">htmlpoll.nl</a></li>
            </ul>
        </div>

Css code:

#poll {
    width: 400px;
    border: 2px solid black;
}

/* header */
#poll-header {
    background: gray;
    height: 40px;
    color: #FFF;
    margin: 0px 0px 10px 0px;
    padding:10px 0px 0px 10px;
    font-size: 24px;
    float:none;
}

/* content */

#poll-content {
    padding:0;
    margin:0;
}

#poll-contenta,
#poll-content a:link,
#poll-content a:active {
    color: gray;
    text-decoration: none;
}

#poll-content a:hover {
    text-decoration: underline;
}

#poll-content dt {
    clear: both;
}

#poll-content dd.bar {
    text-indent: -90000px;
    background: #000;
    float: left;
    height: 18px;
    line-height: 0;
    width: 300px;
}
#poll-content dd.votes {
    float: right;
    padding-right: 10px;
}

/* footer */
#poll-footer {
    background: gray;
    height: 55px;
    margin: 0;
    padding: 10px 5px 5px 10px;
    clear:both;
    left:0;
}

#poll-footer li {
    list-style-type: none;
}

#poll-footer a,
#poll-footer a:link,
#poll-footer a:active {
    color: white;
    text-decoration: none;
}

#poll-footer #votes
{
    float: left;
}

#poll-footer #views {
    float: right;
    text-align: right;
}

#poll-footer #advertisement {
    clear: both;
    margin-top: 10px;
}

Hopelijk kan iemand mij vertellen wat ik fout doe!

Roy_T

woensdag 1 april 2009 @ 09:00

Wat op die URL staat lijkt nog niet bijna op je screenshot?

Nashje

woensdag 1 april 2009 @ 11:04

Hoe kan ik een container automatisch laten meerekken met de content? Content is bijvoorbeeld op de home-pagina minder groot dan op de info-pagina.

Chandler

woensdag 1 april 2009 @ 11:45

@Roy_T: klopt idd, zat een ( te veel in de CSS import

Roy_T

woensdag 1 april 2009 @ 12:08

quote:
Op woensdag 1 april 2009 11:04 schreef Nashje het volgende:
Hoe kan ik een container automatisch laten meerekken met de content? Content is bijvoorbeeld op de home-pagina minder groot dan op de info-pagina.

Een div bedoel je? Gewoon geen height geven

Nashje

woensdag 1 april 2009 @ 12:23

quote:
Op woensdag 1 april 2009 12:08 schreef Roy_T het volgende:

[..]

Een div bedoel je? Gewoon geen height geven

Ja dat had ik al geprobeerd. Zal het even schetsen:

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

home pagina

<div class="container">
   <div class="content">
      <div class="welkom"></div>
   </div>
</div>

info pagina

<div class="container">
   <div class="submenu"></div>
   <div class="content">
      <div class="div1"></div>
      <div class="div2"></div>
      <div class="div3"></div>
   </div>
</div>

Home pagina is een klein stukje tekst. Op de info pagina heb ik dus 3 divs, maar daardoor wordt het een stuk langer dan op de home pagina. Nu moet de container dus automatisch naar beneden gaan door die 3 divs.

Roy_T

woensdag 1 april 2009 @ 12:43

Dat doet 'ie ook standaard, tenzij je zaken uit de natuurlijke flow gehaald hebt met "float" bijvoorbeeld.

Nashje

woensdag 1 april 2009 @ 13:05

Dat doet ie standaard als je hem geen height geeft dus?

Ik gebruik inderdaad floats.. Dus dit is niet te fixen wanneer je floats gebruikt?

Chandler

woensdag 1 april 2009 @ 13:20

@Roy_T; ik heb het voorbeeld, nu moet de output wel duidelijk zijn

met de padding/margin fout

Roy_T

woensdag 1 april 2009 @ 13:26

quote:
Op woensdag 1 april 2009 13:05 schreef Nashje het volgende:
Dat doet ie standaard als je hem geen height geeft dus?

Ik gebruik inderdaad floats.. Dus dit is niet te fixen wanneer je floats gebruikt?

Je kunt het eens proberen door géén height te gebruiken, en "overflow: auto" op je container te zetten.

Nashje

woensdag 1 april 2009 @ 14:36

Je bent een held

. Ik was al bezig om alles opnieuw te gaan maken, fucking hell zeg. Was al bang dat dat niet kon als je floats gebruikt.

Enige fucked up probleem is nu dat Bill Gates met zijne IE zegt dat het toch niet helemaal de bedoeling is

. JEZUS, ik word gek van die browserbattles

Nashje

woensdag 1 april 2009 @ 15:03

Hmm ik heb een discussie met m'n collega over positions of floats. Ik gebruik áltijd floats om alles neer te zetten, en hij gaat voor positions. Is er ergens een brede uitleg te vinden over wat nu het beste is?

Roy_T

woensdag 1 april 2009 @ 15:42

Als je je container kunt floaten zonder de boel te breken, dan kun je die overflow weghalen en werkt het in iedere browser.

Over float of position: kwestie van smaak denk ik. Ik gebruik ook altijd float, omdat er dan tenminste een flow in zit en elementen kunnen schalen. Als je position gebruikt is dat imo vaak een stuk lastiger.

hello_moto1992

woensdag 1 april 2009 @ 15:52

1
2
3
4
5
6
7
8
9
10

Dit heb ik nu dus. Zoals je ziet staat er bij top: 30px; en right: 50px;. Maar als ik dit zie op mijn website is het helemaal buiten de DIV waarin ik het wil hebben. De inhoud staat dus in contentmid, waar ik de afbeelding ook graag wil hebben. Iemand een idee

Nashje

woensdag 1 april 2009 @ 16:09

quote:
Op woensdag 1 april 2009 15:42 schreef Roy_T het volgende:
Als je je container kunt floaten zonder de boel te breken, dan kun je die overflow weghalen en werkt het in iedere browser.

Die overflow weghalen heeft wel goede gevolgen ja

. Super. Alleen in IE is het nog een bende.

Om mijn container (waar alles in staat) te centeren gebruik ik::
body, html { margin: 0px, padding: 0px } en in de .container { margin: 0 auto; }

FF doet het goed, IE niet. En als ik een nieuw html bestandje aanmaak met alleen deze 2 dingen, en dus verder geen divs of elementen, staat ie wel gecentreerd

Roy_T

woensdag 1 april 2009 @ 16:22

quote:
Op woensdag 1 april 2009 15:52 schreef hello_moto1992 het volgende:

Maar als ik dit zie op mijn website is het helemaal buiten de DIV waarin ik het wil hebben. De inhoud staat dus in contentmid, waar ik de afbeelding ook graag wil hebben. Iemand een idee ?

"position: relative" op het element zitten ten opzicht van wat je wilt positioneren.

Nashje

woensdag 1 april 2009 @ 16:50

Hmm.... Ik heb een aantal includes:

1
2
3
4
5
6
7
8
9
10
11

<?php
include ("top.php");
?>

<?php
include ("home.php");
?>

<?php
include ("bottom.php");
?>

Heb er een css aan gehangen, die dus de boel al automatisch centreert. In FF doet ie het prima, in IE niet. Zet ik boven de eerste include een <center> en sluit ik die onderaan af, centreert ie wel alles in IE :').

Sjonge jonge.

Nashje

woensdag 1 april 2009 @ 16:59

Oplossing gevonden voor de geinteresseerden:

1
2
3
4
5
6
7
8

body {
text-align: center; /* for IE */
}

#container {
margin: 0 auto; /* align for good browsers */
text-align: left; /* counter the body center */
}

hello_moto1992

woensdag 1 april 2009 @ 17:02

quote:
Op woensdag 1 april 2009 16:22 schreef Roy_T het volgende:

[..]

"position: relative" op het element zitten ten opzicht van wat je wilt positioneren.

Sorry, maar ik snap het even niet

.

Ik heb een div, genaamd contentmid. Daarin staat dus die lijst met namen.

HTML:

1
2
3
4
5

CSS:

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

#contentmid ul li a img {
  display: none; /* verberg afbeelding */
  position: fixed; / positioneer afbeelding */
position:fixed;
top:30px;
right:50px;
}
#contentmid ul li a:hover img {
  display: block ; /* toon afbeelding bij hover */
}

#contentmid {
padding-left:25px;
padding-right:25px;
padding-bottom:25px;
padding-top:5px;
margin-left:5px;
}

EDIT:

Nog een vraagje:
Is het ook mogelijk dat de foto 'vast' blijft staan na een klik?

[ Bericht 4% gewijzigd door hello_moto1992 op 01-04-2009 17:36:39 ]

Nashje

woensdag 1 april 2009 @ 17:32

quote:
Op woensdag 1 april 2009 16:09 schreef Nashje het volgende:

[..]

Die overflow weghalen heeft wel goede gevolgen ja . Super. Alleen in IE is het nog een bende.

Bug gevonden!!! Ligt waarschijnlijk aan paddings. Morgen even uitdokteren. Voel me wel al een stuk relaxer, hehe.

Nashje

donderdag 2 april 2009 @ 10:22

Gaat goed. Nog een vraagje:

Hoe kan ik deze 2 vakken centreren in de container? Ik kan de margin-pixels wel uitrekenen, maar dat is zo'n gepiel...

Roy_T

donderdag 2 april 2009 @ 11:17

Hoe centreren? Dat plaatje maakt niet echt iets duidelijk

Nashje

donderdag 2 april 2009 @ 19:18

De 2 vakken moeten zoveel mogelijk in het midden van de container komen te staan. Tussen de 2 vakken moet een margin van ongeveer 20 pixels komen... Snaps?

Banzaiaap

donderdag 2 april 2009 @ 19:28

quote:
Op donderdag 2 april 2009 19:18 schreef Nashje het volgende:
De 2 vakken moeten zoveel mogelijk in het midden van de container komen te staan. Tussen de 2 vakken moet een margin van ongeveer 20 pixels komen... Snaps?

Mja, als je de exacte formaten weet, zou ik gewoon floaten en margins gebruiken.

Roy_T

donderdag 2 april 2009 @ 20:37

Ja, zo zou ik het ook doen.

Nashje

vrijdag 3 april 2009 @ 11:48

Oke dus toch wel. Dank u.

Chandler

vrijdag 3 april 2009 @ 11:56

Roy_T: kun je mij uit de band helpen.

het wil namelijk nog steeds niet lukken m.b.t. mijn poll

http://htmlpoll.testertje.nl/pollview.php?code=97ec6f2b (fout)
http://htmlpoll.testertje.nl/pollview.php?code=97ec6f2b&no=true (goed)

het probleem zit um in de CSS van mijn site zelf, en het komt door dit element
#content ul {margin-left: 1.8em;}

alleen geef ik aan in mijn CSS code, dat ik daar geen margin wil gebruiken.

1
2
3
4
5
6
7
8

.htmlPollContainer ul {
    background: gray;
    height: 40px;
    margin: 10px 0px 0px 0px;
    padding: 10px 5px 5px 10px;
    clear:both;
    left:0;
}

nu snap ik dus niet waarom deze toch nog de margin-left: gebruikt :{ anyone?

RM-rf

vrijdag 3 april 2009 @ 12:04

quote:
Op vrijdag 3 april 2009 11:56 schreef Chandler het volgende:
Roy_T: kun je mij uit de band helpen.

het wil namelijk nog steeds niet lukken m.b.t. mijn poll

http://htmlpoll.testertje.nl/pollview.php?code=97ec6f2b (fout)
http://htmlpoll.testertje.nl/pollview.php?code=97ec6f2b&no=true (goed)

het probleem zit um in de CSS van mijn site zelf, en het komt door dit element
#content ul {margin-left: 1.8em;}

alleen geef ik aan in mijn CSS code, dat ik daar geen margin wil gebruiken.
[ code verwijderd ]

nu snap ik dus niet waarom deze toch nog de margin-left: gebruikt :{ anyone?

vermoedelijk omdat de 'cascading' waarde een hogere waarde toewijst aan een propertie die toegekend wordt adhv een ID-selector:

(de term 'cascading' in CSS staat voor 'overlappen'... mbhv CSS kun je elementen 'overlappende' waardes toewijzen die dan aan kinderen doorgegeven 'kunnen 'worden)

er zijn verschillende methodes dit te voorkomen... bv de selector zelf wat uitgebreider maken:

1	#content .htmlPollContainer ul { margin-left: 0; }

of, meestal een beetje meer 'quick-and-dirty', het toewijzen van de waarde '!important':

1	.htmlPollContainer ul { margin-left: 0 !important; }

ik zou je wel aanraden te kijken of het probleem niet deels kan onstaatn door een té gefragmentariseerd gebruik van selectoren in je CSS ... of het 'opschonen' hiervan dit al niet kan voorkomen.

Chandler

vrijdag 3 april 2009 @ 12:34

!important deed het! maaruh dat hoef ik dan toch niet voor alle elementen op te geven? want deze poll moet er in iedere site goed uit zien, zonder dirty hacks te gebruiken

want deze poll wil ik gaan gebruiken voor heel veel andere sites en daarvan kan ik de CSS niet beinvloeden!

RM-rf

vrijdag 3 april 2009 @ 12:50

quote:
Op vrijdag 3 april 2009 12:34 schreef Chandler het volgende:
!important deed het! maaruh dat hoef ik dan toch niet voor alle elementen op te geven? want deze poll moet er in iedere site goed uit zien, zonder dirty hacks te gebruiken want deze poll wil ik gaan gebruiken voor heel veel andere sites en daarvan kan ik de CSS niet beinvloeden!

!important is een beetje een lelijke overrule declaratietje dat je per propertie waarde zelf kunt aangeven (stamt oorspronkleijk vanuit het idee dat stylesheets zowel vanuit de aanbiederskant geleverd kunnen worden alswel gebruikers zelf ook lokaal hun eigen stylesheets kunnen verwenden: 'important' was een poging om bepaalde waarde's te definieren als 'niet te overrrullen')

je moet het iddee per proertie-waarde paar moeten aangeven. maar als je bv de selector juist kiest hoeft dat weinig te doen...
echter, bedenk wel dat ik je aanraad hier niet te makkelijk op terug te vallen en eerder te overwegen je CSS op te ruimen, en een betere structuur aan te brengen in hoe overlappend je welke waarde toewijst:

zeker als je iets maakt dat zeer generiek en breed inzetbaar zal moeten zijn, heeft dat veel meer nut dan enkel een lokaal 'plakbandje' als oplossing ergens op te plakken.

n8n

vrijdag 3 april 2009 @ 12:56

ipv !important schrijf ik in zo'n geval meestal de selector volledig uit, elementen en namen van id's en classes hebben een 'waarde', hoe hoger de waarde, des te hoger de prioriteit voor de inhoud. html body div ul#menu li a:hover weegt zodoende bijvoorbeeld veel zwaarder dan #menu a:hover.

Chandler

vrijdag 3 april 2009 @ 13:16

@RM-fr; het probleem is dus dat mijn polls in welke site dan maar ook geplaatst kunnen worden bv

via iframes, javascript, php get etc.

Vooral met de laatste heb ik dan een probleem aangezien deze dan juist die style gaat gebruiken die de website gebruikt... hier moet ik dus een workaround op vinden. en is die !important best handig

Nashje

vrijdag 3 april 2009 @ 13:37

Hmmz, is er een alternatief voor padding?

Ik wil tekst flink wat van de kant laten pushen, omdat er een plaatje voor staat. Nu geef ik dus een flinke padding op, en staat alles scheef, dat corrigeer ik weer door de width te verkleinen. Maar in IE zorgt padding niet voor een verschuiving, en in FF wel. Dus als ik de width verander, is het in FF wel goed, maar in IE gaat ie ook daadwerkelijk op die width reageren.

Nashje

vrijdag 3 april 2009 @ 13:59

Overigens ziet FF een h1 wel, en IE niet. Ook handig als je iets goed wil zetten in een kolom mbv padding. Dat zal namelijk nooit kloppen, omdat h1 sowieso al voor ruimte zorgt.

Roy_T

vrijdag 3 april 2009 @ 14:39

Maak eens een testcase Nashje en zet die online

Padding werkt prima in IE namelijk, dus het ligt aan jou

Nashje

vrijdag 3 april 2009 @ 14:59

Menu zoals het is:

Na een padding-top: 10px krijg ik dit in FF:

En na die padding krijg ik dit in IE:

Ik probeer dat te corrigeren door de toegevoegde padding pixels, van de height af te halen. Resultaat in FF:

En in IE:

Code:

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

.menu {
width: 1004px;
height: 39px;
float: left;
background: #ffffff;
}

.menuhome {
margin-right: 1px;
width: 200px;
height: 29px;
float: left;
background: #b8b8b8;
text-align: center;
font: 12px Arial, Helvetica, sans-serif;
color: #fff;
padding-top: 10px;
}

Naast de menuhome zijn er dus ook nog menuzakelijk etc. Maar ik ben nu alleen menuhome aan het uittesten.

Roy_T

vrijdag 3 april 2009 @ 15:11

Welk doctype gebruik je in je HTML? Mijn gok: geen. En dan krijg je dit

Goed doctype gebruiken, en ze doen allemaal hezelfde (padding wordt dan zoals in FF bij de height geteld, dus daar moet je mee rekenen).

Nashje

vrijdag 3 april 2009 @ 16:06

Roy_T

Echt, je bent een held. Niet eens dit menu, maar voor mijn submenu gebruikte ik een javascriptje, en die werkte ook niet. In de HTML-versie wel (!!), en toen ik alles ging omzetten naar php dmv includes werkte het niet meer. Doctype dus.... Ik ben blij

. Nu even dat menu testen.

Roy_T

vrijdag 3 april 2009 @ 16:08

Nashje

donderdag 9 april 2009 @ 12:00

Wazijg. Ik heb al m'n a menuitems een styling gegeven, en dan neemt ie de styling over van de a die ik voor de content heb ingesteld

Roy_T

donderdag 9 april 2009 @ 12:12

Specificity.

Nashje

donderdag 9 april 2009 @ 13:13

Hmm oke. Maar snap even niet hoe je de a's dan niet-conflicterend kan maken.

Roy_T

donderdag 9 april 2009 @ 13:43

Laat de relevante CSS eens zien

Nashje

donderdag 9 april 2009 @ 14:57

Haha, ik heb het gefixed. Vraag me niet hoe, maar het werkt. En geeft geen fouten.

Nashje

woensdag 22 april 2009 @ 11:48

edit; is inmiddels al gelukt..

[ Bericht 83% gewijzigd door Nashje op 22-04-2009 12:24:01 ]

Lastpost

vrijdag 24 april 2009 @ 16:59

Hier ook even een vraagje op css-noob gebied.

Ik was heerlijk aan het kloten met wat divs om de layout te krijgen die ik graag wilde en ik ben een eind gekomen qua indeling, enkel wil het rechtse 'tekst' divje (geen breedte opgegeven) binnen m'n hoofd-div niet náast m'n linker div-je blijven staan die wel een vaste breedte heeft.

Dus qua indeling is het zo:

div pagina (100% breedte)
div zijmenu (links gefloat, vaste breedte)
div blok (tekstmenu, geen vaste breedte, moet gewoon de overgebleven ruimte invullen aan de rechterzijde)

Iemand enig idee hoe je dit voor elkaar krijgt, nu pakt ie dus gewoon automatisch (rechtermenu blok) de 100% breedte omdat er niets is opgegeven en zodoende gooit ie 'm onder het zijmenu op de volledige breedte van de div pagina.
Procenten aangeven zorgt er wel voor dat ie daar past, enkel veranderd dan de afstand bij verschillende resoluties en dat wil ik dus niet.

DorentuZ

vrijdag 24 april 2009 @ 17:20

De makkelijkste manier is om het menu te floaten en het content blok een linker-margin mee te geven die een waarde heeft die gelijk is aan (of iets breder is dan) de breedte van het menu.

Hukkie

vrijdag 24 april 2009 @ 20:49

Ik ben een absolute noob op css gebied en daarom loop ik tegen een probleempje aan. Ik ben bezig om een nieuwe site te bouwen en daarvoor wil ik css gebruiken, ben me dus aan het inlezen en aan het oefenen met css. Maar mijn probleem is dat ik een interne stylesheet wil omzetten naar een externe. Dit omdat ik achteraf nog wat pagina's wil toevoegen aan mn site en dat niet per pagina wil doen.

Het gaat om Deze.

Kan het uiteindelijk ook wel zelf uitvissen, maar dat duurt momenteel te lang want ik wil graag nu verder met mn site, en op WW3Schools ea wordt ik niet veel wijzer.

Is er iemand die een snelle link heeft om dit te doen?
Mijn dank is groot.

Lastpost

vrijdag 24 april 2009 @ 21:03

Je hebt geen header bestand of iets in die trend?
Gewoon je gehele style opslaan in een bestandje (willekeurigenaam.css) en deze includen in je header en/of het head-gedeelte van de pagina's zelf indien je geen header hebt.

<link rel="stylesheet" type="text/css" href="linknaarstylesheet/stylesheet.css" />
Bovenstaand toevoegen in het head-gedeelte en dan kun je de gekozen elementen uit je stylesheet ook gewoon aanroepen zonder probleem.
Als dat niet is wat je bedoelde hoor ik het natuurlijk graag.
Hiermee kun je de boel natuurlijk ook extern benaderen/gebruiken, gewoon met het complete http://www.linkje.nl/stylesheet.css erin.

Hukkie

vrijdag 24 april 2009 @ 21:15

Probleem is dus dat ik (nog) niet weet welke elementen ik mee moet nemen in de externe stylesheet. Met als gevolg dat als ik de stylesheet aanroep, er biezonder weinig gebeurt.

Roy_T

zaterdag 25 april 2009 @ 00:05

quote:
Op vrijdag 24 april 2009 21:15 schreef Hukkie het volgende:
Probleem is dus dat ik (nog) niet weet welke elementen ik mee moet nemen in de externe stylesheet. Met als gevolg dat als ik de stylesheet aanroep, er biezonder weinig gebeurt.

Dus? Je kunt je stylesheet later gewoon aanpassen, waarna de aanpassingen op iedere pagina zichtbaar zijn (waar je de stylesheet include).

Flaccid

zaterdag 25 april 2009 @ 20:03

Welke lettertypes mag je allemaal gebruiken? Ik gebruik vaak de verdana family, maar welke mag je nog meer gebruiken.

Lastpost

zaterdag 25 april 2009 @ 20:07

quote:
Op zaterdag 25 april 2009 20:03 schreef Flaccid het volgende:
Welke lettertypes mag je allemaal gebruiken? Ik gebruik vaak de verdana family, maar welke mag je nog meer gebruiken.

http://www.w3.org/Style/Examples/007/fonts
Overigens gebruik ik zelf een optie om via een php-bestandje de tekst om te zetten naar het lettertype dat ik zelf mooi vind.
Font opslaan op je server, daarheen verwijzen en de kleur (enz.) bepalen in het php bestandje en dan de boel aanroepen.
Logischerwijs enkel voor bepaalde locaties, gaat anders nogal ten kosten van de snelheid van je website.

Roy_T

zaterdag 25 april 2009 @ 20:39

quote:
Op zaterdag 25 april 2009 20:03 schreef Flaccid het volgende:
Welke lettertypes mag je allemaal gebruiken? Ik gebruik vaak de verdana family, maar welke mag je nog meer gebruiken.

http://en.wikipedia.org/wiki/Web-safe_fonts

Roy_T

zaterdag 25 april 2009 @ 20:40

quote:
Op zaterdag 25 april 2009 20:07 schreef Lastpost het volgende:

Overigens gebruik ik zelf een optie om via een php-bestandje de tekst om te zetten naar het lettertype dat ik zelf mooi vind.
Font opslaan op je server, daarheen verwijzen en de kleur (enz.) bepalen in het php bestandje en dan de boel aanroepen.
Logischerwijs enkel voor bepaalde locaties, gaat anders nogal ten kosten van de snelheid van je website.

Tip van de dag: doe het client side met typeface.js of cufón.

Nashje

dinsdag 28 april 2009 @ 13:07

Vraag:

Ik heb een list-item menu. Werkt in Mozilla perfec.t Ziet er strak uit, maar in IE duwt ie het eerste lijstje naar het 2e menu kopje. Hoe kan ik dit fixen?

1
2
3
4
5
6
7
8
9
10

CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

#nav, #nav ul {
padding: 0;
margin: 0;
list-style: none;
}

#nav li {
float: left;
width: auto;
}

#nav ul {
position: absolute;
width: 175px;
left: -1000px;
background: #fff;
margin-top: 27px;
opacity: 0.80;
filter: alpha(opacity=80);
-moz-opacity: 0.80;

font: 12px Verdana, Geneva, sans-serif;
color: #006699;
line-height: 17px;
padding: 10px;
}

#nav ul a, a:active, a:visited {
color: #006699;
text-decoration: none;
}

#nav ul a:hover {
text-decoration: underline;
}

#nav li:hover ul {
left: auto;
}

Roy_T

dinsdag 28 april 2009 @ 14:50

URL?

Nashje

dinsdag 28 april 2009 @ 16:45

Hmm is op de een of andere manier gelukt.

Roy heb jij verstand van maskerdivs?

Mirel

dinsdag 28 april 2009 @ 18:11

edit: in het php topic geplaatst

[ Bericht 83% gewijzigd door Mirel op 28-04-2009 18:35:08 ]

Roy_T

dinsdag 28 april 2009 @ 18:54

quote:
Op dinsdag 28 april 2009 16:45 schreef Nashje het volgende:

Roy heb jij verstand van maskerdivs?

Van wat

Ik loop al aardig wat jaren mee in dit wereldje, maar wat is dat in hemelsnaam?

Mirel

dinsdag 28 april 2009 @ 19:01

divs met een masker

Roy_T

dinsdag 28 april 2009 @ 19:50

Goh, echt?

Lastpost

dinsdag 28 april 2009 @ 19:52

quote:
Op dinsdag 28 april 2009 18:54 schreef Roy_T het volgende:

[..]

Van wat Ik loop al aardig wat jaren mee in dit wereldje, maar wat is dat in hemelsnaam?

Hehe.

Ik heb ook geen idee wat hiermee bedoeld wordt, gebruik zelf weleens div's om zodoende zaken te maskeren (bijvoorbeeld het youtube logo in embedded filmpjes)

Nashje

woensdag 29 april 2009 @ 08:58

Oke

.

Een maskerdiv is toch een div die je over een andere div kan zetten? Stel ik heb een vierkant plaatje en die verander ik vaak, maar de hoeken moeten wel steeds afgerond zijn en ik heb geen zin om dat elke keer te moeten fixen. Dan gebruik ik een maskerdiv zodat die hoek bij wat voor plaatje dan ook afgerond is. Dat terwijl er dus eigenlijk een vierkant plaatje staat.

Nashje

woensdag 29 april 2009 @ 10:42

quote:
Op dinsdag 28 april 2009 14:50 schreef Roy_T het volgende:
URL?

Hmm werkt toch weer niet

. Kak.

Kun jij je PM inbox aanzetten? Kan ik je ff een linkje passen.

Roy_T

woensdag 29 april 2009 @ 14:01

quote:
Op woensdag 29 april 2009 08:58 schreef Nashje het volgende:

Een maskerdiv is toch een div die je over een andere div kan zetten?

Geen idee, het is geen industrieterm iig

Maar ja, ik heb uiteraard ervaring met het principe (maar dan niet per definitie met div's, soms heb je andere elementen beschikbaar).

Nashje

woensdag 29 april 2009 @ 15:45

quote:
Op woensdag 29 april 2009 14:01 schreef Roy_T het volgende:

[..]

Geen idee, het is geen industrieterm iig

Maar ja, ik heb uiteraard ervaring met het principe (maar dan niet per definitie met div's, soms heb je andere elementen beschikbaar).

Hmm oke. Welke andere elementen? En is dit mbv css moeilijk te maken? Of is het gewoon slechts div in div gooien en zorgen voor een stukje transparante achtergrond?

Roy_T

woensdag 29 april 2009 @ 17:36

Ja, dat is de manier. Maar het is heel afhankelijk van de situatie en hoe je HTML eruit ziet.

cablegunmaster

woensdag 6 mei 2009 @ 01:37

vraagje hoe los je het op dat de losse helften links en rechts naar beneden doorgaan?
ik krijg het niet voor elkaar. height: 100%; is het niet. en een vast aantal pixels kan niet want de midden inhoud kan verschillen van lengte.

Opgelost:

float: absolute;
margin-left:130px;

[ Bericht 23% gewijzigd door cablegunmaster op 06-05-2009 02:24:30 ]

Light

woensdag 6 mei 2009 @ 06:45

quote:
Op woensdag 6 mei 2009 01:37 schreef cablegunmaster het volgende:
[ afbeelding ]

vraagje hoe los je het op dat de losse helften links en rechts naar beneden doorgaan?
ik krijg het niet voor elkaar. height: 100%; is het niet. en een vast aantal pixels kan niet want de midden inhoud kan verschillen van lengte.

Zoek eens op faux columns.

quote:
Opgelost:

float: absolute;
margin-left:130px;

"absolute" is geen geldige waarde voor "float". Je hebt de keuze uit "left", "right", "none" en "inherit". Heel leuk dat het werkt, maar er is geen enkele garantie dat je een cross-browser oplossing hebt.

Nashje

donderdag 7 mei 2009 @ 15:26

quote:
Op woensdag 29 april 2009 17:36 schreef Roy_T het volgende:
Ja, dat is de manier. Maar het is heel afhankelijk van de situatie en hoe je HTML eruit ziet.

Het is inmiddels gelukt. Best wel wreed geworden

.

Ik nu heb een mooi dropdown menutje. Ziet er strak uit in FF, maar in IE is het minder mooi... Heb geen flauw idee waar het aan kan liggen.

Menu is hier te vinden.

SpeedyGJ

zaterdag 16 mei 2009 @ 11:19

Is het mogelijk om in .css het menu te beheren?
Heb nogal een lijst van 32 html bestanden, en het wordt een gedoe als ik dit 1 voor 1 moet aanpassen omdat er iets veranders moet worden of iets toe te voegen.

n8n

zaterdag 16 mei 2009 @ 11:28

quote:
Op donderdag 7 mei 2009 15:26 schreef Nashje het volgende:

[..]

Het is inmiddels gelukt. Best wel wreed geworden .

Ik nu heb een mooi dropdown menutje. Ziet er strak uit in FF, maar in IE is het minder mooi... Heb geen flauw idee waar het aan kan liggen.

Menu is hier te vinden.

In Safari & Opera ziet het er prima uit, het ligt dus (zoals meestal) in ieder geval aan IE, verder zou ik de afbeeldingen in het menu met de css regelen daar de afbeeldingen ('>'-pijlen) geen onderdeel van de content maar van de opmaak zijn, de site laadt tevens weer wat sneller.

edit, voorbeeld voor de pijlen:

1
2
3

ul#nav li ul li {
list-style: url(../images/menu_bullet.jpg) inside;
}

quote:
Op zaterdag 16 mei 2009 11:19 schreef SpeedyGJ het volgende:
Is het mogelijk om in .css het menu te beheren?
Heb nogal een lijst van 32 html bestanden, en het wordt een gedoe als ik dit 1 voor 1 moet aanpassen omdat er iets veranders moet worden of iets toe te voegen.

Gewoon met een externe .css, en met hele basic php kan je ook de html centraal houden voor als je dat aan moet passen, scheelt bakken met werk.

[ Bericht 2% gewijzigd door n8n op 16-05-2009 11:36:34 ]

SpeedyGJ

zaterdag 16 mei 2009 @ 12:26

Ik heb dit gedaan echter gebeurd er maar weinig.
Klik hier

Ik heb eerst een test pagina gemaakt voor ik de hele website ombouw.

Light

zaterdag 16 mei 2009 @ 12:30

quote:
Op zaterdag 16 mei 2009 12:26 schreef SpeedyGJ het volgende:
Ik heb dit gedaan echter gebeurd er maar weinig.
Klik hier

Ik heb eerst een test pagina gemaakt voor ik de hele website ombouw.

MIsschien is het handig om test.html te hernoemen naar test.php

SpeedyGJ

zaterdag 16 mei 2009 @ 13:02

Helemaal vergeten!
Het werkt, echter krijg ik de text er niet in.

<div class="column_two_section">
<h1>Welkom op de website van Weerstation Holwerd</h1>
<div class="post_info">

Dit staat dus in de header.php
Daarna zou er dus dit moeten komen staan:
<a href="images/ligging.jpg" rel="lightbox"title=""><img src="images/ligging.jpg" width="150" height="100" alt="" /></a><br>
De pijltjes geven aan waar het weerstation staat.

________________
Wat doe ik nu fout? of wat moet er nog gebeuren?

jemoeder125

zaterdag 16 mei 2009 @ 13:20

http://www.weerstation-holwerd.nl/test.php wat is er precies mis mee?

SpeedyGJ

zaterdag 16 mei 2009 @ 13:28

De inhoud staat er niet, iig hier niet. Normaal zou je dit moeten zien:
Klik hier

jemoeder125

zaterdag 16 mei 2009 @ 13:31

Mja de inhoud staat er wel, maar op de verkeerde plek. Maar in de broncode staat'ie ook op de verkeerde plek. Je doet dus serverside nog iets fout.

-edit-
wel eens van wordpress gehoord trouwens?

SpeedyGJ

zaterdag 16 mei 2009 @ 13:39

Yup maar is deze skin daar ook in te krijgen dan?
Ik heb een tijdje met PHP Fusion gedraaid, toch als je kijkt naar de hackers die de website plat gooien, geeft me niet echt een lekker gevoel daarom dus html.

Euhm voor de rest lijkt alles goed te staan, hij verdubbelt alleen die content, beetje vreemd gezien deze helemaal niet dubbel staat.

jemoeder125

zaterdag 16 mei 2009 @ 14:08

quote:
Op zaterdag 16 mei 2009 @ 13:39 schreef SpeedyGJ het volgende:
Yup maar is deze skin daar ook in te krijgen dan?
Ik heb een tijdje met PHP Fusion gedraaid, toch als je kijkt naar de hackers die de website plat gooien, geeft me niet echt een lekker gevoel daarom dus html.

Euhm voor de rest lijkt alles goed te staan, hij verdubbelt alleen die content, beetje vreemd gezien deze helemaal niet dubbel staat.

In de bron zie ik het gewoon twee keer staan.

En ja alles is te maken.

SpeedyGJ

zaterdag 16 mei 2009 @ 19:57

Edit:

Dubbel is opgelost, probleem is nu dat ik de onderstaande waar de text inkomt onderaan staat. Deze vak moet dus gewoon naast het menu staan.

test.php
<?php include("header.php"); ?>
<div id="content_column_two">

<div class="column_two_section">
<h1>Test</h1>
<div class="post_info">
Test
<div class="post_comment">
<br><a href="#"><span class="comment">Geplaatst op 30 April 2009</span></a>
</div>
</div>

</div>

</div> 
<?php include("footer.php"); ?>

In de header staat de rest.."zie broncode"
http://www.weerstation-holwerd.nl/header.php

[ Bericht 86% gewijzigd door SpeedyGJ op 16-05-2009 20:14:50 ]

jemoeder125

zaterdag 16 mei 2009 @ 20:23

dit heeft totaal geen zin zo. Ten eerste heeft dit niets met css te maken. Ten tweede, zolang we niet kunnen zien wat je scripts doen, kunnen we je ook niet helpen.

Als het alleen om simpele includes gaan, ligt het gewoon aan je HTML-opbouw.

Flaccid

zondag 17 mei 2009 @ 17:25

Hoe kan je een bepaalde div hiden alleen in IE6?

met javascript iets van if brwoser=ie6 {getelementbyid.divnaamblaat.display=none}

Light

zondag 17 mei 2009 @ 18:56

quote:
Op zondag 17 mei 2009 17:25 schreef Flaccid het volgende:
Hoe kan je een bepaalde div hiden alleen in IE6?

met javascript iets van if brwoser=ie6 {getelementbyid.divnaamblaat.display=none}

Conditional comments gebruiken.

1
2
3

Flaccid

zondag 17 mei 2009 @ 19:48

quote:
Op zondag 17 mei 2009 18:56 schreef Light het volgende:

[..]

Conditional comments gebruiken.
[ code verwijderd ]

Is dit css, t is toch geen javascript?

Chanty87

zondag 17 mei 2009 @ 20:14

quote:
Op zondag 17 mei 2009 19:48 schreef Flaccid het volgende:

[..]

Is dit css, t is toch geen javascript?

HTML.

Flaccid

zondag 17 mei 2009 @ 20:48

quote:
Op zondag 17 mei 2009 20:14 schreef Chanty87 het volgende:

[..]

HTML.

Hij doet het al

Mirel

maandag 18 mei 2009 @ 11:27

http://www.presikharmonie.nl/index.php?option=com_eventlist&view=categoryevents&id=1&Itemid=39 (joomla site, eventlist component alleen, geen module)

Er staan een aantal stippellijnen in de tabel onderaan, en ik heb geen idee waar ik dat kan veranderen. Ik zie nergens dotted staan als ik ctrl-f in het bestand eventlist.css, en ook niet in de template.css. Iemand die dit kent van het Eventlist component?

Roy_T

maandag 18 mei 2009 @ 11:37

quote:
Op maandag 18 mei 2009 11:27 schreef Mirel het volgende:

Er staan een aantal stippellijnen in de tabel onderaan, en ik heb geen idee waar ik dat kan veranderen.

Zoek eens op "url(../images/dot.gif)"

En installeer Firebug, dan had je het zo gevonden.

Chanty87

maandag 18 mei 2009 @ 12:26

Firebug? Webdeveloper Toolbar

Mirel

maandag 18 mei 2009 @ 13:00

Ja ik heb Opera dragonding, Firefox firebug, en webdeveloper voor IE.

ik dacht gewoon dat het een echte lijn was ipv een afbeelding

Roy_T

maandag 18 mei 2009 @ 14:55

quote:
Op maandag 18 mei 2009 12:26 schreef Chanty87 het volgende:
Firebug? Webdeveloper Toolbar

Die ook, maar die kan echt niet tippen aan Firebug. Daarmee had ik dit iig niet in 30 seconden gevonden.

Chanty87

maandag 18 mei 2009 @ 16:58

quote:
Op maandag 18 mei 2009 14:55 schreef Roy_T het volgende:

[..]

Die ook, maar die kan echt niet tippen aan Firebug. Daarmee had ik dit iig niet in 30 seconden gevonden.

CSS > View Style Information > selecteer de cel van de tabel met de stippellijn. 5 sec.

Hukkie

maandag 18 mei 2009 @ 17:06

Ik heb de volgende code:

quote:
Body {
width:750px;
margin:0 auto;
margin-top:15px;
}

#header {
width:750px;
height:150px;
background-color:#ffffff;
border: 2px solid #CCCCCC;
font-weight: bold;
color: #666666;
background: url(Pics/FP-moving-gif2.gif) no-repeat center center ;

}

Nu wil ik het plaatje dus bepaalde afmetingen geven, zodat ie netjes in de header past.
Maar als ik die maten invoer dan worden de afmetingen van de header aangepast en niet die van het plaatje. Weet iemand wat ik fout doe?

n8n

maandag 18 mei 2009 @ 17:16

quote:
Op maandag 18 mei 2009 17:06 schreef Hukkie het volgende:
Ik heb de volgende code:
[..]

Nu wil ik het plaatje dus bepaalde afmetingen geven, zodat ie netjes in de header past.
Maar als ik die maten invoer dan worden de afmetingen van de header aangepast en niet die van het plaatje. Weet iemand wat ik fout doe?

Met css kan je (nog) niet de afmetingen van een achtergrondafbeelding bepalen, je zult dus de afbeelding zelf aan moeten passen naar de juiste afmetingen.

1
2
3
4

Body {
width:750px;
margin: 15px auto 0;
}

Volgens mij werkt dit trouwens ook, scheelt weer een regel.

Hukkie

maandag 18 mei 2009 @ 17:20

quote:
Op maandag 18 mei 2009 17:16 schreef n8n het volgende:

[..]

Met css kan je (nog) niet de afmetingen van een achtergrondafbeelding bepalen, je zult dus de afbeelding zelf aan moeten passen naar de juiste afmetingen.
[ code verwijderd ]

Volgens mij werkt dit trouwens ook, scheelt weer een regel.

Jawel hoor dat gaat prima, als ik van een los plaatje de afmetingen ingeef dan gaat dat prima, alleen dus niet bij het plaatje wat ik in de header wil zetten.

Chanty87

maandag 18 mei 2009 @ 17:25

quote:
Op maandag 18 mei 2009 17:20 schreef Hukkie het volgende:

[..]

Jawel hoor dat gaat prima, als ik van een los plaatje de afmetingen ingeef dan gaat dat prima, alleen dus niet bij het plaatje wat ik in de header wil zetten.

Omdat dat in je header een background is dus dan kan dat (nog) niet.

Hukkie

maandag 18 mei 2009 @ 17:31

quote:
Op maandag 18 mei 2009 17:25 schreef Chanty87 het volgende:
Omdat dat in je header een background is dus dan kan dat (nog) niet.

Maar what about deze methode?

quote:
div#afbeelding{
background: #D3E6CF url(../_img/para.jpg) no-repeat 0 0;
height: 300px;
width: 225px;
border: 5px solid #618059;
}

Zou moeten werken, maar ik krijg het niet aan de praat , vandaar dat ik het op bovenstaande manier probeer.
Als ik dit in de header zet dan is het hele plaatje weg.

Of werkt dat in zijn geheel niet voor headers?

Chanty87

maandag 18 mei 2009 @ 17:51

quote:
Op maandag 18 mei 2009 17:31 schreef Hukkie het volgende:

[..]

Maar what about deze methode?
[..]

Dat is positionering

Met CSS2 is het niet mogelijk om achtergronden te schalen. Je zult toch echt zelf het plaatje moeten verkleinen

Hukkie

maandag 18 mei 2009 @ 18:06

Oke, dank voor de info, ff photoshop opstarten dan.

markiemark

donderdag 21 mei 2009 @ 10:32

Ik wil children options in een select box een indent geven. Dit gaat niet met padding(-left) of margin(-left). Hoe kan ik dit doen in IE? Firefox doet het wel gewoon..

markiemark

donderdag 21 mei 2009 @ 11:14

quote:
Op donderdag 21 mei 2009 10:32 schreef markiemark het volgende:
Ik wil children options in een select box een indent geven. Dit gaat niet met padding(-left) of margin(-left). Hoe kan ik dit doen in IE? Firefox doet het wel gewoon..

Hetzelfde geldt eigenlijk voor optgroup, die blijft in IE maar bold en italic.

Hier mijn CSS

1
2
3

optgroup{background-color:#09F; color:#000; font-weight: bold; font-style:normal;}
option.option_category_0 {background-color:#09F; color:#000;}
option.option_category_1 {padding-left: 25px;}

Light

donderdag 21 mei 2009 @ 11:23

quote:
Op donderdag 21 mei 2009 10:32 schreef markiemark het volgende:
Ik wil children options in een select box een indent geven. Dit gaat niet met padding(-left) of margin(-left). Hoe kan ik dit doen in IE? Firefox doet het wel gewoon..

Een beetje zoals hier onder aan de pagina (Selecteer forum)? Daar zit de padding met & nbsp; in de html-code.

Light

donderdag 21 mei 2009 @ 11:32

quote:
Op donderdag 21 mei 2009 11:14 schreef markiemark het volgende:

[..]

Hetzelfde geldt eigenlijk voor optgroup, die blijft in IE maar bold en italic.

Hier mijn CSS
[ code verwijderd ]

Als ik deze pagina bekijk, kan het nog wel eens lastig worden om een <option> of een <optgroup> te stylen. Je hebt ook te maken met browsers die alles zelf bepalen. Er valt natuurlijk ook wel wat voor te zeggen dat een standaardcomponent van het besturingssysteem altijd op dezelfde manier wordt getoond, en dat het dus geen browserding is.

Nashje

maandag 25 mei 2009 @ 09:55

Wat is nou de meest makkelijke en beste manier om de a van een class te stijlen? Ik heb steeds het probleem dat de link uiteindelijk een andere a overneemt.

Voorbeeldje:
h1 is gestyled
.test a, a:active, a:visited en a:hover zijn gestyled

In <div class="test"> wil ik dus niet dat die daar de h1 gaat gebruiken. Dit gebeurt uiteindelijk wel. Hoe kan ik de classes apart stijlen zodat dat wel lukt?

Roy_T

maandag 25 mei 2009 @ 10:14

Code graag, want hier kan niemand iets van maken Nashje

Nashje

maandag 25 mei 2009 @ 10:16

Er hoeft ook niets van te worden gemaakt. Gaat gewoon om een stukje uitleg.

Hoe stijl jij jouw links in een div?

Lastpost

maandag 25 mei 2009 @ 10:34

quote:
Op maandag 25 mei 2009 10:16 schreef Nashje het volgende:
Er hoeft ook niets van te worden gemaakt. Gaat gewoon om een stukje uitleg.

Hoe stijl jij jouw links in een div?

Ik doe het meestal zo:
Pak de standaard a/h1/hr/ul enz. en die geef ik een basiskleur/afmeting/border en alle andere ongein die je kunt bedenken.
Daarbuiten heb ik nog datzelfde verhaal voor bepaalde delen op de site waarbij die zaken afwijken van de rest van de site en daarbij werk ik dan weer met de div-verwijzing voor de a/h1 enz. enz.

body, img, h1, h2, h3, p, hr, ul
a:link, a:visited, a:active, a:hover enz.

En dan bijvoorbeeld voor mijn div MenuInhoud (onderdeel van een 'grotere' div) die een andere h1 opmaak heeft dan de standaard h1 die eerder in de stylesheet staat:
.MenuInhoud h1 { font-size: 1.3em; }
.MenuInhoud a { color:#000000 ;text-decoration:none; }

En zo weer verder.

Vast niet de makkelijkste en/of beste manier, ben ook maar beginner.

Roy_T

maandag 25 mei 2009 @ 11:13

quote:
Op maandag 25 mei 2009 10:16 schreef Nashje het volgende:
Er hoeft ook niets van te worden gemaakt. Gaat gewoon om een stukje uitleg.

Ik snap niets van wat jouw h1 ermee te maken heeft

quote:
Hoe stijl jij jouw links in een div?

div.classname a {
...
}

tim2308

maandag 1 juni 2009 @ 16:32

Hoe krijg ik de footer helemaal onder de pagina op http://www.yeuxmarrons.com/ (in Firefox) en op http://www.yeuxmarrons.com/theme/disney/ ? Ik heb de verschillende onderdelen met DIV'jes onderverdeeld maar de footer begint zelfs al tussen de bovenste menuopties. (globalnav)

De CSS staat hier http://www.yeuxmarrons.com/new/yeuxmarrons.css

jemoeder125

maandag 1 juni 2009 @ 18:17

quote:
Op maandag 1 juni 2009 @ 16:32 schreef tim2308 het volgende:
Hoe krijg ik de footer helemaal onder de pagina op http://www.yeuxmarrons.com/ (in Firefox) en op http://www.yeuxmarrons.com/theme/disney/ ? Ik heb de verschillende onderdelen met DIV'jes onderverdeeld maar de footer begint zelfs al tussen de bovenste menuopties. (globalnav)

De CSS staat hier http://www.yeuxmarrons.com/new/yeuxmarrons.css

gewoon de float clearen?

tim2308

maandag 1 juni 2009 @ 18:25

Dank je he! Het werkt. p {clear: both;} aan de css toegevoegd en een lege <p></p> boven de footer gezet. (gevonden op http://www.flashfocus.nl/forum/archive/index.php/t-43103.html , onderaan)

Ook nog een handige site lijkt me:http://css.maxdesign.com.au/floatutorial/

jemoeder125

maandag 1 juni 2009 @ 21:25

waarom niet gewoon op de footer zelf dan?

grofweg alle P-tags clearen kan ook ongewenste effecten hebben...

Roy_T

maandag 1 juni 2009 @ 23:06

Een lege <p>, dat is lekker semantisch correct zullen we zeggen

Hang die clear idd gewoon aan de footer en klaar.

Met alle respect, de meeste mensen op FlashFocus hebben geen totaal benul van wat ze doen in HTML & CSS. Die moeten het gewoon bij Flash houden.

Light

maandag 1 juni 2009 @ 23:26

quote:
Op maandag 1 juni 2009 21:25 schreef jemoeder125 het volgende:
waarom niet gewoon op de footer zelf dan?

Dat lijkt me idd beter.

quote:
grofweg alle P-tags clearen kan ook ongewenste effecten hebben...

Ik kan me ook niet echt voorstellen dat het nodig is. Als je iets heb dat je voor alle P-tags wilt instellen, dan zijn het margins en paddings. Font-dingen stel je op een hoger niveau in (html of body) en dan ben je eigenlijk al klaar.

tim2308

dinsdag 2 juni 2009 @ 02:28

Merci heren, ook het clear in de footer zetten werkt ook. Je moet het allemaal net weten, ik spreek ook krom spaans. het werkt, je krijgt wat je wilt (cq. mijn gasten krijgen wat ze willen) maar mooi is het niet. Zo ook mijn kennis van CSS. Nogmaals bedankt...

Flaccid

zondag 7 juni 2009 @ 11:25

1px Offset

Ik heb nu iets irritants. Ik heb een bg, die gecentered word door background-position:center (het is in de body, zodat ik een height: 100% heb). Ook heb ik een top van een vlak, met rounded corners, gecentered doormiddel van margin: 0 auto; . Als ik mijn firefox/ie/w/ever (het komt overal voor) resize, laat het ding 2 situaties zien. De goede:

en dan de slechte, als ik mijn venster resize:

Hoe ga ik dit tegen?

cablegunmaster

zondag 7 juni 2009 @ 11:27

ik neem aan dat je bovenste ding uit 1 plaatje bestaat ? je kan een min-length of min-width instellen

zodat hij niet kleiner word dan dat plaatje wat je boven aan hebt gebruikt

1	min-width: 800px;

dit ter behoeve aan de breedte kijk hoe breed het plaatje is en stel het in

?

hierdoor heb je altijd de gewenste grootte is het beweegbaar in de breedte als het langer word.
maar houd het een absolute waarde aan als het kleiner is dan 800px.

vertel het me als het zo is opgelost

[ Bericht 50% gewijzigd door cablegunmaster op 07-06-2009 11:38:54 ]

Flaccid

zondag 7 juni 2009 @ 11:45

quote:
Op zondag 7 juni 2009 11:27 schreef cablegunmaster het volgende:
ik neem aan dat je bovenste ding uit 1 plaatje bestaat ? je kan een min-length of min-width instellen
zodat hij niet kleiner word dan dat plaatje wat je boven aan hebt gebruikt
[ code verwijderd ]

dit ter behoeve aan de breedte kijk hoe breed het plaatje is en stel het in ?

hierdoor heb je altijd de gewenste grootte is het beweegbaar in de breedte als het langer word.
maar houd het een absolute waarde aan als het kleiner is dan 800px.

vertel het me als het zo is opgelost

Dat is t probleem niet denk ik. Zelfs als het scherm groot zat is doet het een beetje raar. Demo op http://joristimes.nl/kutje/

cablegunmaster

zondag 7 juni 2009 @ 11:51

quote:
Op zondag 7 juni 2009 11:45 schreef Flaccid het volgende:

[..]

Dat is t probleem niet denk ik. Zelfs als het scherm groot zat is doet het een beetje raar. Demo op http://joristimes.nl/kutje/

merk er niks van in FF

*test in IE *

Flaccid

zondag 7 juni 2009 @ 12:01

quote:
Op zondag 7 juni 2009 11:51 schreef cablegunmaster het volgende:

[..]

merk er niks van in FF
*test in IE *

Huh? Tijdens dat je je schermpje resizen zie ik mijn top ding niet align met mn body bg

cablegunmaster

zondag 7 juni 2009 @ 12:14

quote:
Op zondag 7 juni 2009 12:01 schreef Flaccid het volgende:

[..]

Huh? Tijdens dat je je schermpje resizen zie ik mijn top ding niet align met mn body bg

/* ignore 2 plaatjes kunnen niet in 1 div class
weet ik , probeer de top en middle eens in 1 div te doen

?
je kan het makkelijk in 1 css gedeelte maken

*/

Oplossing 1:
https://developer.mozilla.org/en/CSS/-moz-border-radius

zie voorbeeld

je kan het makkelijk zelf na maken

Oplossing 2:
maar om het probleem in IE op te lossen eens kijken

wat ik meestal doe is :
container maken Deze zet je in het midden neer en daar komt je webpagina in

1
2
3
4
5
6

De CSS:
Container : in het midden centreren
Contenttop: (zit al in het midden door container) + plaatje
body: plaatje

?

[ Bericht 12% gewijzigd door cablegunmaster op 07-06-2009 12:25:59 ]

Flaccid

zondag 7 juni 2009 @ 12:23

quote:
Op zondag 7 juni 2009 12:14 schreef cablegunmaster het volgende:

[..]

weet ik , probeer de top en middle eens in 1 div te doen ?
je kan het makkelijk in 1 css gedeelte maken

https://developer.mozilla.org/en/CSS/-moz-border-radius

zie voorbeeld
je kan het makkelijk zelf na maken

Met middle bedoel je het witte vlak? Dat zit vast aan de body, vanwege 100% height.

cablegunmaster

zondag 7 juni 2009 @ 12:24

quote:
Op zondag 7 juni 2009 12:23 schreef Flaccid het volgende:

[..]

Met middle bedoel je het witte vlak? Dat zit vast aan de body, vanwege 100% height.

negeer dat maar even, je hebt 2 verschillende plaatjes , dan komt dat niet goed uit.
oplossing 1:
borders recreeren met kleuren en stylen en er een randje aangeven met CSS
oplossing 2:
je vak in een container stoppen (andere klasse)
en de container centreren. en in de container alle andere divs instoppen.

Flaccid

zondag 7 juni 2009 @ 12:28

quote:
Op zondag 7 juni 2009 12:24 schreef cablegunmaster het volgende:

[..]

negeer dat maar even, je hebt 2 verschillende plaatjes , dan komt dat niet goed uit.
oplossing 1:
borders recreeren met kleuren en stylen en er een randje aangeven met CSS
oplossing 2:
je vak in een container stoppen (andere klasse)
en de container centreren. en in de container alle andere divs instoppen. ^O^

Dat 2e komt in de buurt. van wat ik wil, maar nog niet helemaal. Ik heb besloten om de onderkant ook maar een randje te geven, zodat de 100% height niet per sé hoeft. Nog een kort css vraagje:

Ik heb nu deze code, ik dacht slim te zijn:

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

#contentend{
margin: 0 auto;
width: 800px;
height: 17px;
background-repeat:no-repeat;
}

#top{
background-image:url(img/contenttop.png);
}

#bottom{
background-image:url(img/contentbottom.png)
}

En dat ik dan de bovenste div 2 id's gaf, maar dat kan niet ofwel? Hoe moet het dan?

cablegunmaster

zondag 7 juni 2009 @ 12:30

quote:
Op zondag 7 juni 2009 12:28 schreef Flaccid het volgende:

[..]

Dat 2e komt in de buurt. van wat ik wil, maar nog niet helemaal. Ik heb besloten om de onderkant ook maar een randje te geven, zodat de 100% height niet per sé hoeft. Nog een kort css vraagje:

Ik heb nu deze code, ik dacht slim te zijn:
[ code verwijderd ]

En dat ik dan de bovenste div 2 id's gaf, maar dat kan niet ofwel? Hoe moet het dan?

welke html code gebruikte je?

kun je verduidelijken wat je bedoelt?

want Classes kun je herhaalt gebruiken en ID's niet

Flaccid

zondag 7 juni 2009 @ 12:37

quote:
Op zondag 7 juni 2009 12:30 schreef cablegunmaster het volgende:

[..]

welke html code gebruikte je?
kun je verduidelijken wat je bedoelt?

want Classes kun je herhaalt gebruiken en ID's niet

Dat dus. Classes werken nu:)

cablegunmaster

maandag 8 juni 2009 @ 23:31

http://cablegunmaster.nl/test/index.html

Eigen vraag ik heb 2 plaatjes hoe krijg je het wit gedeelte er tussen weg

?
ik kan de spatie / wit nsb gedoe niet vinden.

Light

maandag 8 juni 2009 @ 23:34

quote:
Op maandag 8 juni 2009 23:31 schreef cablegunmaster het volgende:
http://cablegunmaster.nl/test/index.html

Eigen vraag ik heb 2 plaatjes hoe krijg je het wit gedeelte er tussen weg :P ?
ik kan de spatie / wit nsb gedoe niet vinden. :o

Verander

1 2	<a href="" ><img src="knop_1_test.png" alt ="HOME" ></a> <a href="" ><img src="knop_2_test.png" alt ="OVER MIJ"></a>

eens door

1	<a href="" ><img src="knop_1_test.png" alt ="HOME" ></a><a href="" ><img src="knop_2_test.png" alt ="OVER MIJ"></a>

cablegunmaster

maandag 8 juni 2009 @ 23:36

quote:
Op maandag 8 juni 2009 23:34 schreef Light het volgende:

[..]

Verander
[ code verwijderd ]

eens door
[ code verwijderd ]

met zijn 2en zo'n beginners fout niet kunnen uitvogelen

ik hem al helpen met zijn css voor de border

hij creert natuurlijk een wit spatie en na 1 witspatie negeert hij de komende

.

Hartelijk bedankt, iets om te lachen gevonden

Flaccid

vrijdag 26 juni 2009 @ 11:10

2 dingen.

1: Waarom is dit geen centraal topic? Ik moet m elke keer uit MyAt halen :(

2: Een simpel vraagje.

Ik heb een lijstje met tabs (een horizontal list)

SPOILER
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 #tablist{
color: #AC062C;
font-size: 24px;
font-family:Geneva, Arial, Helvetica, sans-serif;
font-weight: bold;
letter-spacing: -0.08em;
line-height: 3em;
}

#tablist li{
list-style: none;
display: inline;
margin: 0px;
}

#tablist li a{
text-decoration: none;
padding: 10px;
border: 1px solid #d4d4d4;
border-bottom: none;
background-color: white;
background-image:url(img/tabbg.png);
background-position:bottom;
background-repeat: repeat-x;
}

#tablist li a:hover{
color: #bf6479;
background-image: none;
}

En wat HTML code.

SPOILER
1
2
3
4
5 <ul id="tablist">
<li><a href="#">Link1</a></li>
<li class[s][/s]="active"><a href="#">Link2</a></li>
<li><a href="#">Link 3</a></li>
</ul>

Nu wil ik bij de active geen background-image hebben aan de onderkant. Een class meegeven met background-image: none werkt niet. Wat doe ik verkeerd?

Roy_T

vrijdag 26 juni 2009 @ 11:26

quote:
Op vrijdag 26 juni 2009 11:10 schreef Flaccid het volgende:

Nu wil ik bij de active geen background-image hebben aan de onderkant. Een class meegeven met background-image: none werkt niet. Wat doe ik verkeerd?

Probeer "background: transparent" eens? En anders even in Firebug kijken wat er mis gaat; iets met erven of specificity dan

Flaccid

vrijdag 26 juni 2009 @ 11:40

quote:
Op vrijdag 26 juni 2009 11:26 schreef Roy_T het volgende:

[..]

Probeer "background: transparent" eens? En anders even in Firebug kijken wat er mis gaat; iets met erven of specificity dan

Background color werkt ook niet. Het gaat hier om een gevalletje volgorde. Is nu opgelost.

donroyco

vrijdag 26 juni 2009 @ 13:18

tvp.

Nashje

woensdag 1 juli 2009 @ 16:33

Weet iemand of ik dmv een div een foutmelding aan een embed kan geven als de bezoeker geen Java heeft geinstalleerd?

doppendoosch

woensdag 1 juli 2009 @ 17:47

dmv een div een foutmelding aan een embed geven...

Verklaar u nader!

cablegunmaster

woensdag 1 juli 2009 @ 17:51

quote:
Op woensdag 1 juli 2009 16:33 schreef Nashje het volgende:
Weet iemand of ik dmv een div een foutmelding aan een embed kan geven als de bezoeker geen Java heeft geinstalleerd?

onmogelijk

ik denk dat je dan toch even je hoofd moet krabben en afvragen of je CSS wel snapt

.

Het is een opmaaktaal. geen waarchuwings taal of programmeertaal waarin je voorwaardes kan stellen die niet met de opmaak te maken hebben.

Css bemoeit zich niet met java of javascript

Nashje

vrijdag 3 juli 2009 @ 10:34

quote:
Op woensdag 1 juli 2009 17:51 schreef cablegunmaster het volgende:

[..]

onmogelijk ik denk dat je dan toch even je hoofd moet krabben en afvragen of je CSS wel snapt .

Het is een opmaaktaal. geen waarchuwings taal of programmeertaal waarin je voorwaardes kan stellen die niet met de opmaak te maken hebben.

Css bemoeit zich niet met java of javascript

. Dat zeg ik toch ook niet.

Op een van mijn andere sites gebruik ik een div om te laten zien als de bezoeker geen Flash gebruikt.

RM-rf

vrijdag 3 juli 2009 @ 10:50

quote:
Op vrijdag 3 juli 2009 10:34 schreef Nashje het volgende:

[..]

. Dat zeg ik toch ook niet.

Op een van mijn andere sites gebruik ik een div om te laten zien als de bezoeker geen Flash gebruikt.

dat heeft echter niks met CSS te maken...
maar is gewoon een eigenschap van HTML-rendering door je browser...

zo rendert bv een browser content die in een <NOSCRIPT> tag staat wél als iemand bv geen javascript heeft aanstaan...
tevens is het zo dat alle infor binnen een OBJECT (embed is geen HTML standaard tag) gebruikt wordt als een useragent de object-content zelf niet renderen kan en is specifiek bedoeld om informatie te geven aan UA#s die ddit dan als alternatieve content tonen (als het ware zoals een ALT-tag eigenlijk bedoeld is )
http://www.w3.org/TR/REC-html40/struct/objects.html#h-13.3.1

Nashje

vrijdag 3 juli 2009 @ 10:52

quote:
Op vrijdag 3 juli 2009 10:50 schreef RM-rf het volgende:

[..]

dat heeft echter niks met CSS te maken...

Dat zeg ik ook niet. Ik heb het over een div.

Er was/is geen topic over HTML.

RM-rf

vrijdag 3 juli 2009 @ 11:27

quote:
Op vrijdag 3 juli 2009 10:52 schreef Nashje het volgende:

[..]

Dat zeg ik ook niet. Ik heb het over een div.

Er was/is geen topic over HTML.

Zou het dan geen idee zijn om gewoon zelf een topic op te starten met zulk een vraag ... in plaats die vraag te platsen in een ander 'groot-vragen-topic' waar die eigenlijk geheel niet hoort (sowieso is dat al snel een nadeel van zulke grote vragen-topics, dat mensen niet zelf meer een topic durven op te starten met een legitiem vragje)

Overigemns, ik heb je vraag beantwoord maar snap niet waarom jij over een div begint als je het eigenlijk over een embed/object hebt... een div is een hele andere tag die er verder niks mee te maken heeft en dus er ook niks meer te zoeken heeft...

wil je bepaalde content enkel tonen als een zekere extren aangeroepe embedded content niet gerenderd kan worden, kun je die als inhoud binnn een OBJECT plaatsen, of als je zo nodig de proprietaire EMBED wilt gebruiken, bestat daarvoor een NOEMBED tag:
http://www.utoronto.ca/webdocs/HTMLdocs/NewHTML/embed.html (waarschuwing, verouderd e site, ik zou hun tip om geen object te gebruiken niet al te serieus nemen, dat is jaren en jaren terug geschreven)

daReaper

donderdag 9 juli 2009 @ 22:21

Is er een manier waarop ik dit effect: http://www.htmlcodetutorial.com/tables/index_famsupp_179.html met CSS kan bereiken?

Roy_T

donderdag 9 juli 2009 @ 23:49

quote:
Op donderdag 9 juli 2009 22:21 schreef daReaper het volgende:
Is er een manier waarop ik dit effect: http://www.htmlcodetutorial.com/tables/index_famsupp_179.html met CSS kan bereiken?

Je kunt cellen gewoon borders geven, dus: ja.

Flaccid

vrijdag 10 juli 2009 @ 13:40

quote:
Op donderdag 9 juli 2009 22:21 schreef daReaper het volgende:
Is er een manier waarop ik dit effect: http://www.htmlcodetutorial.com/tables/index_famsupp_179.html met CSS kan bereiken?

Elke cell een apparte class geven en dan border-top uitzetten etc...

daReaper

zaterdag 11 juli 2009 @ 12:47

quote:
Op vrijdag 10 juli 2009 13:40 schreef Flaccid het volgende:

[..]

Elke cell een apparte class geven en dan border-top uitzetten etc...

Probleem is dat ik alleen controle heb over de CSS, niet over de HTML-output... Hoeveel manieren blijven er dan nog over?

Flaccid

zaterdag 11 juli 2009 @ 13:03

quote:
Op zaterdag 11 juli 2009 12:47 schreef daReaper het volgende:

[..]

Probleem is dat ik alleen controle heb over de CSS, niet over de HTML-output... Hoeveel manieren blijven er dan nog over?

Dus hoe de tabel in elkaar zit heb jij totaal geen controle over? Slechts een css ding? mmm, lastig. Probeer dit eens:

1
2
3

table{
border: none;
}

Light

zaterdag 11 juli 2009 @ 13:04

quote:
Op zaterdag 11 juli 2009 12:47 schreef daReaper het volgende:

[..]

Probleem is dat ik alleen controle heb over de CSS, niet over de HTML-output... Hoeveel manieren blijven er dan nog over?

Dan zou je alle cellen een border (boven + links) kunnen geven. Vervolgens de cellen in de eerste rij geen border boven, en de eerste cel per rij geen border links.

1
2
3
4
5
6
7
8
9
10
11

table tbody tr td {
    border: 0;
    border-top: 1px solid red;
    border-left: 1px solid red;
}
table tbody tr:first-child td {
    border-top: 0;
}
table tbody tr td:first-child {
    border-left: 0;
}

Niet getest. Sowieso gaat het niet werken in IE6, die ondersteunt :first-child niet.

daReaper

zaterdag 11 juli 2009 @ 13:54

quote:
Op zaterdag 11 juli 2009 13:04 schreef Light het volgende:

[..]

Dan zou je alle cellen een border (boven + links) kunnen geven. Vervolgens de cellen in de eerste rij geen border boven, en de eerste cel per rij geen border links.
[ code verwijderd ]

Niet getest. Sowieso gaat het niet werken in IE6, die ondersteunt :first-child niet.

tof! Werkt in elk geval prima in IE7 en Moz, bedankt

Saboo

maandag 13 juli 2009 @ 14:25

hoi, ik ben een totale noob met CSS, maar ik dacht 'leuk laat ik eens een website maken' ... Gaat vrij makkelijk tot nog toe, alleen heb ik 1 probleempje wat wsl een heel stom iets is.

de HTML

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

De CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
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

a {
   font-size: 16px;
   color: #CCF;
}
a:link {
   text-decoration: none;
}
a:visited {
   text-decoration: none;
   color: #CCC;
}
a:hover {
   text-decoration: none;
}
a:active {
   text-decoration: none;
}
body{
margin: 0;
text-align: center;
}

div#main_container{
margin: 0 auto 0 auto;
width: 750px;
text-align: left;
}

div#box1{
float:left;
width: 213px;
height: 600px;
background:url(sitebasis%20copy.jpg);
}

div#box2{
position:relative;
float:none;
width: 156px;
height: 118px;
background-color:#6F0;
}

div#box3{
position:relative;
float:none;
width: 156px;
height: 142px;
background-color:#933;
}

div#box4{
position:relative;
float:none;
width: 156px;
height: 340px;
background-color:#00F;
}

div#box5{
position:relative;
left: 369px;
width: 384px;
height: 600px;
background-color:#C9C;
}

div#Menu{
position:relative;
float:left;
width: 384px;
height: 600px;
}

Het kan vast beter enzo, maar ik vond het zo vrij makkelijk gaan... Het probleem is echter dat de text van box 5, niet in de box zelf zit maar er onder. Wsl iets heel stoms :o
Wie o wie kan mij helpen?

bij voorbaat heel veel dank!

Chanty87

maandag 13 juli 2009 @ 14:38

Je wilt box 5 naast het menu hebben? Dan moet je box5 ook een float: left; geven

Als ie er dan nog onder gaat dan is de container te klein.

float: none; en position: relative; kunnen weg trouwens.

1
2
3
4
5
6
7
8
9
10
11

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

a {
   font-size: 16px;
   color: #CCF;
}

a:link {
   text-decoration: none;
}

a:visited {
   text-decoration: none;
   color: #CCC;
}

a:hover {
   text-decoration: none;
}

a:active {
   text-decoration: none;
}

body {
   margin: 0;
   text-align: center;
}

div#main_container {
   margin: 0 auto 0 auto;
   width: 750px;
   text-align: left;
}

div#box1 {
   float:left;
   width: 200px;
   height: 600px;
   background:url(sitebasis%20copy.jpg);
}

div#box2 {
   width: 150px;
   height: 118px;
   background-color:#66FF00;
}

div#box3 {
   width: 150px;
   height: 142px;
   background-color:#993333;
}

div#box4 {
   width: 150px;
   height: 340px;
   background-color:#0000FF;
}

div#box5 {
   float: left;
   width: 400px;
   height: 600px;
   background-color:#CC99CC;
}

div#Menu {
   float:left;
   width: 150px;
   height: 600px;
}

Levert dit op:

[ Bericht 20% gewijzigd door Chanty87 op 13-07-2009 14:44:24 ]

Saboo

maandag 13 juli 2009 @ 14:55

zo is hij beter idd

Hartstikke bedankt!

DirkZz

dinsdag 14 juli 2009 @ 14:20

Ik ben sinds kort ( paar dagen ) ook bezig met DIVjes, maar ik zit nu met een probleem.
Ik wil graag dat mijn DIVjes meeschijven als er tekst in staat, maar wat er nu gebeurt is dat alle tekst als het ware gewoon doorloopt.
Nu heb ik dit kunnen oplossen door gebruik te maken van overflow: hidden;
Maar dit is in mijn ogen niet de oplossing, het moet toch mogelijk zijn dat alles gewoon met de tekst meeschuift?

de code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
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

@charset "utf-8";

body {
font-family: Arial, serif;  font-size: 10pt;

}
A:visited {text-decoration: none; color: white}
A:link {text-decoration: none; color: white}
A:active {text-decoration: none; color: white}
A:hover {text-decoration: underline; color: lightgreen;}

.big-main {
    position: absolute;
    background-image: url(bg.jpg);
    background-repeat:repeat-x;
    height: 100%;
    width: 100%;
}

.topmain {

position:relative;
height:178px;
width:802px;
background-image: url('images/header.png');
border:thin #CCCCCC solid;
}

.menu {

position:relative;
border:thin #CCCCCC solid;
background-color:#1A1A1A;
font: Verdana;
height:37px;
width:802px;
background-image: url('images/menu/menubg.png');
background-repeat:repeat-x;
color: white;
text-align: right;

}

.menuheader {

  border:thin #CCCCCC solid;
  color: white;
  height: 28px;
  background-color:#1A1A1A;
  background-image: url('images/menu/menuheader.png');
  background-repeat:repeat-x;

}
.menuitem {

  color: white;
  text-align: left;
  height: 26px;
  background-color:#1A1A1A;
  background-image: url('images/menu/menuitem.png');
  background-repeat:repeat-x;

}

.contentitemheader {

  color: white;
  text-align: center;
  height: 26px;
  background-color:#1A1A1A;
  background-image: url('images/menu/menuitem.png');
  background-repeat:repeat-x;

}
.contentitem {

  color: white;
  text-align: left;
  height: 26px;
  background-color:#1A1A1A;

}

#container {
    width:802px;
    height: 80%;
    margin: 0;
}
#div1 {
    background: #000000;
    width: 32%;

    float: left;
    border:thin #CCCCCC solid;
background-color:#1A1A1A;
}

#div2 {
    background: #555555;
    width: 65%;
    height: 80%;
    float: right;
    border:thin #CCCCCC solid;
    background-color:#1A1A1A;
    overflow:hidden;

}

#div3 {
    background: #000000;
    width: 32%;
    float: left;
    border:thin #CCCCCC solid;
    background-color:#1A1A1A;
}

Als iemand op andere punten nog fouten ziet, of dingen die beter kunnen dan sta ik daar ook altijd open voor.

Roy_T

dinsdag 14 juli 2009 @ 16:23

quote:
Op dinsdag 14 juli 2009 14:20 schreef DirkZz het volgende:

Maar dit is in mijn ogen niet de oplossing, het moet toch mogelijk zijn dat alles gewoon met de tekst meeschuift?

Geen height definiëren

DirkZz

dinsdag 14 juli 2009 @ 16:54

quote:
Op dinsdag 14 juli 2009 16:23 schreef Roy_T het volgende:

[..]

Geen height definiëren

Had ik ook geprobeert, dan gaat div#3 flippen, en er onder staan.

1. Zonder height ingesteld:
http://i26.tinypic.com/4pv8z5.png

2. met height ingesteld:
http://i28.tinypic.com/19l9xj.png

doppendoosch

dinsdag 14 juli 2009 @ 17:27

quote:
Op dinsdag 14 juli 2009 @ 16:54 schreef DirkZz het volgende:

[..]

Had ik ook geprobeert, dan gaat div#3 flippen, en er onder staan.

1. Zonder height ingesteld:
http://i26.tinypic.com/4pv8z5.png

2. met height ingesteld:
http://i28.tinypic.com/19l9xj.png

Alles wat onder elkaar moet doe je samen nesten in een div.

Is semantischer ook.

Chanty87

dinsdag 14 juli 2009 @ 17:37

^ Yup, dus die 2 blokken links in één div stoppen en die een float: left; geven.

DirkZz

dinsdag 14 juli 2009 @ 17:37

1
2
3
4
5
6
7
8
9
10

<div id="container">
    <div id="div1">
    <div class=menuheader><b>Karting menu</b></div>
      <div class=menuitem>Menu items uit database</div>

<div id="div3">
          <div class=menuheader><b>Autocross menu</b></div>
            <div class=menuitem>Menu items uit database</div>
          </div></div>

Heb het nu zo, maar nu verschijnt het 2e menu, in het eerste menu.

Chanty87

dinsdag 14 juli 2009 @ 17:39

Heb je de floats van div1 en div3 weggehaald?

doppendoosch

dinsdag 14 juli 2009 @ 17:40

quote:
Op dinsdag 14 juli 2009 @ 17:37 schreef DirkZz het volgende:

[ code verwijderd ]

Heb het nu zo, maar nu verschijnt het 2e menu, in het eerste menu.

Kijk eens naar de post hierboven van Chanty87 (met paint), en pak het op zo'n manier aan.

1
2
3
4
5
6
7
8

schematis is dit de structuur die je nodig hebt.

DirkZz

dinsdag 14 juli 2009 @ 17:42

Als ik dat doe heft het geen nut, dan staat echt alles door mekaar.

edit:

@hierboven

Ik zal er naar kijken.

Chanty87

dinsdag 14 juli 2009 @ 17:43

Deze post bedoelt DD neem ik aan

DirkZz

dinsdag 14 juli 2009 @ 17:48

weg

[ Bericht 84% gewijzigd door DirkZz op 14-07-2009 18:22:16 ]

DirkZz

dinsdag 14 juli 2009 @ 18:22

Dit is wat ik nu heb:
http://i32.tinypic.com/x9lps.png
http://i30.tinypic.com/2upwvmg.png

Maar het buigt allemaal nog steeds niet mee.

doppendoosch

dinsdag 14 juli 2009 @ 19:03

Ja je hebt nog steeds een vaste hoogte op de rechterkolom staan zo te zien.

Komop zeg een beetje trial-and-error kan geen kwaad! Je kunt niets verneuken wat ctrl-z niet op kan lossen!

DirkZz

dinsdag 14 juli 2009 @ 19:46

dan verschuift de hele boel weer.

DirkZz

dinsdag 14 juli 2009 @ 19:48

CSS:

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

#container {
    width:802px;
    height: 80%;
    margin: 0;
    }
#div1 {
    background: #000000;
    width: 32%;
    float:left;
    border:thin #CCCCCC solid;
    background-color:#1A1A1A;
    }

#div2 {
    background: #000000;
    width: 32%;
    float:left;
    border:thin #CCCCCC solid;
    background-color:#1A1A1A;
    }

#div3 {
    background: #555555;
    width: 65%;
    height: 80%;
    float: right;
    border:thin #CCCCCC solid;
    background-color:#1A1A1A;
    }

HTML:

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

<div id="container" >
      <div id="div3"><div class=menuheader>
        <div class=contentitemheader>test</div>
          <div class=contentitem></div>
       </div></div>
  <div id="Menu">
      <div id="div1">
        <div class=menuheader><b>Karting menu</b></div>
          <div class=menuitem>Menu items uit database</div>
          <br>
          </div>
      <div id="div2">
         <div class=menuheader><b>Autocross menu</b></div>
          <div class=menuitem>Menu items uit database</div>
          </div>
       </div>
      </div>

doppendoosch

dinsdag 14 juli 2009 @ 19:56

Waarom staat je content nou dan ineens weer vóór je menu?

DirkZz

dinsdag 14 juli 2009 @ 19:58

Ohja sorry, ik was allang aan het trial en erroren.
Zal het weer even terug zetten.

doppendoosch

dinsdag 14 juli 2009 @ 19:59

doe eens

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

<div id="container" >
  <div id="Menu">
      <div id="div1">
        <div class=menuheader><b>Karting menu</b></div>
          <div class=menuitem>Menu items uit database</div>
          <br>
          </div>
      <div id="div2">
         <div class=menuheader><b>Autocross menu</b></div>
          <div class=menuitem>Menu items uit database</div>
          </div>
       </div>
      <div id="div3"><div class=menuheader>
        <div class=contentitemheader>test</div>
          <div class=contentitem></div>
       </div></div>

      </div>

1 2	#menu {float: left; width: 32%; background:red;} #div3 {width:65%; background:green;}

en verder niets.
Niet getest maar kan haast niet fout gaan.

DirkZz

dinsdag 14 juli 2009 @ 20:10

http://i26.tinypic.com/27xjggk.png

doppendoosch

dinsdag 14 juli 2009 @ 20:13

"en verder niets"

Maak eens een testcase, anders kom je nergens.

DirkZz

dinsdag 14 juli 2009 @ 20:15

Ja, dat werkt goed.

DirkZz

dinsdag 14 juli 2009 @ 20:26

Ben hem overnieuw aan het opbouwen, alleen krijg ook RSI kramp ofzo.
Zit al te lang achter de pc :p, ik kijk morgen weer even verder.

Bedankt voor de hulp Doppendoosch en Chanty87

Swetsenegger

dinsdag 14 juli 2009 @ 22:54

waarom past webkit (safari en chrome) een background image met position bottom in de <col> tag toe op elke regel en niet, zoals het hoort, op de volledige kolom. En belangrijker... is er een workaround voor?

DirkZz

zondag 19 juli 2009 @ 12:42

edit: opgelost.

[ Bericht 97% gewijzigd door DirkZz op 19-07-2009 12:48:14 ]

iBolt

woensdag 22 juli 2009 @ 01:16

Vraagje...

Ik heb een div.

.abc{
padding:10px 7px;
border:1px solid #e8e8e8;
font-size:12px;
color:#777;
font-style:italic;
text-align:center;
background-color:#f3f3f3
}

<div class="abc">
<img scr=".../plaatje.jpg" />
</div>

Nu is het zo dat mijn div zich over de hele breedte uitstrekt ik wil echter dat hij zo breed wordt als het plaatje... hoe doe ik dit?

[ Bericht 0% gewijzigd door iBolt op 22-07-2009 02:11:22 ]

doppendoosch

woensdag 22 juli 2009 @ 01:32

Geen div gebruiken maar een span.

Maar:
a) ~~waarom uberhaupt een extra element om de afbeelding heen?~~ sorry zitten nog wat paddings in zie ik
b) beetje onoverzichtelijk om je classes namen te geven die ook standaard HTML-elementen zijn lijkt me...

iBolt

woensdag 22 juli 2009 @ 02:11

quote:
Op woensdag 22 juli 2009 01:32 schreef doppendoosch het volgende:
Geen div gebruiken maar een span.

Maar:
a) ~~waarom uberhaupt een extra element om de afbeelding heen?~~ sorry zitten nog wat paddings in zie ik
b) beetje onoverzichtelijk om je classes namen te geven die ook standaard HTML-elementen zijn lijkt me...

ja sorry class heet ook niet a maar had gewoon even snel getypt + copy past :p

Light

woensdag 22 juli 2009 @ 07:18

quote:
Op woensdag 22 juli 2009 01:32 schreef doppendoosch het volgende:
Geen div gebruiken maar een span.

Maar:
waarom uberhaupt een extra element om de afbeelding heen? sorry zitten nog wat paddings in zie ik

Die paddings zijn geen reden om een extra element om een img te zetten. Een img is gewoon een element en kun je als zodanig aanpassen, inclusief margin, padding achtergrondkleur en zelfs achtergrondafbeelding.

iBolt

woensdag 22 juli 2009 @ 11:08

quote:
Op woensdag 22 juli 2009 07:18 schreef Light het volgende:

[..]

Die paddings zijn geen reden om een extra element om een img te zetten. Een img is gewoon een element en kun je als zodanig aanpassen, inclusief margin, padding achtergrondkleur en zelfs achtergrondafbeelding.

Klopt maar die box moet niet perse om een img kunnen ook andere elemente zijn video, tabel...

Span werkt trouwens niet

zal even me code geven....

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

.wp-caption{
   padding:10px 7px;
   border:1px solid #e8e8e8;
   font-size:12px;
   color:#777;
   font-style:italic;
   text-align:center;
   background-color:#f3f3f3
}
p.wp-caption-text{
   margin:10px 0 0 0 !important;
   padding:0;
   line-height:14px !important;
}
.aligncenter, div.aligncenter{
   display:block;
   margin-left:auto;
   margin-right:auto;
}

en bijvoorbeeld dan dit als input...

1
2
3
4

<div class="wp-caption aligncenter">
<img src="http://psplessen.hewejosplace.nl/Betty_Boop_plaatje.jpg" />
<p class="wp-caption-text">Betty Boop</p>
</div>

[ Bericht 27% gewijzigd door iBolt op 22-07-2009 11:25:57 ]

doppendoosch

woensdag 22 juli 2009 @ 11:26

quote:
Op woensdag 22 juli 2009 @ 11:08 schreef iBolt het volgende:

[..]

Klopt maar die box moet niet perse om een img kunnen ook andere elemente zijn video, tabel...

En die kun je geen class geven omdat....?

-edit-

quote:
Op woensdag 22 juli 2009 @ 11:08 schreef iBolt het volgende:

[..]
Span werkt trouwens niet

zal even me code geven....
[ code verwijderd ]

en bijvoorbeeld dan dit als input...
[ code verwijderd ]

Nee allicht, als je die span display:block geeft heb je die heel effectief omgetoverd in een div

iBolt

woensdag 22 juli 2009 @ 12:11

quote:
Op woensdag 22 juli 2009 11:26 schreef doppendoosch het volgende:

[..]

En die kun je geen class geven omdat....?

-edit-
[..]

Nee allicht, als je die span display:block geeft heb je die heel effectief omgetoverd in een div

Ja sorry ik ben noob met css

iig heb nu weggehaald en doet het half... enigste wat ontbreekt is dat de span niet zo hoog wordt als het plaatje... hij trekt dus alleen een box om het onderste deel van 't plaatje...

daReaper

woensdag 22 juli 2009 @ 15:30

Heeft iemand hier ervaring mee? http://code.google.com/p/ie7-js/

Werkt het een beetje? Ik heb geen IE6, dus ik kan het helaas niet testen...

doppendoosch

woensdag 22 juli 2009 @ 15:37

Geen idee of het een beetje werkt, maar ik heb nogal mijn twijfels of je een script van 90KB moet willen toevoegen aan je site, om een paar incompatibility-fixes te doen die je met een klein beetje speurwerk ook wel zelf op kunt lossen.

daReaper

woensdag 22 juli 2009 @ 15:41

quote:
Op woensdag 22 juli 2009 15:37 schreef doppendoosch het volgende:
Geen idee of het een beetje werkt, maar ik heb nogal mijn twijfels of je een script van 90KB moet willen toevoegen aan je site, om een paar incompatibility-fixes te doen die je met een klein beetje speurwerk ook wel zelf op kunt lossen.

Ik snap alleen niet hoe ik mijn sites in IE6 moet testen als ik Vista draai. Die Virtual Machines lijken niet te werken op Vista...

doppendoosch

woensdag 22 juli 2009 @ 15:44

http://www.my-debugbar.com/wiki/IETester/HomePage
http://browsershots.org/

Verder zou ik er ook met zo'n scriptje niet zonder meer vanuit gaan dat je die browsers niet meer hoeft te testen.

daReaper

woensdag 22 juli 2009 @ 15:56

quote:
Op woensdag 22 juli 2009 15:44 schreef doppendoosch het volgende:
http://www.my-debugbar.com/wiki/IETester/HomePage
http://browsershots.org/

Verder zou ik er ook met zo'n scriptje niet zonder meer vanuit gaan dat je die browsers niet meer hoeft te testen.

Die IETester ziet er wel goed uit.. Zijn de resultaten ervan betrouwbaar?
Het lijkt weinig uit te maken of ik het script waar ik het net over had ingeschakeld heb of niet. Wat wel op viel is dat de volgende syntax wél werkt door het script:

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

table tr td {
  border-top: 1px solid #888;
  border-left: 1px solid #888;
  padding: 5px;
  width: 25%;
  text-align: left;
  vertical-align: bottom;
}
table tr:first-child td {
  border-top: 0;
}
table tr td:first-child {
  border-left: 0;
}

om een tabel te maken met alleen aan de binnenkant borders.

Selectors werken dus, waardoor je veel geavanceerdere CSS-technieken kan gaan gebruiken

edit: Voor IE5.5 maakt het wel een wereld van verschil, zie ik nu. Pagina ziet er veel meer uit zoals in Mozilla

[ Bericht 3% gewijzigd door daReaper op 22-07-2009 16:39:44 ]

Roy_T

woensdag 22 juli 2009 @ 16:16

quote:
Op woensdag 22 juli 2009 15:41 schreef daReaper het volgende:

Ik snap alleen niet hoe ik mijn sites in IE6 moet testen als ik Vista draai. Die Virtual Machines lijken niet te werken op Vista...

http://finalbuilds.edskes.net/iecollection.htm

Chanty87

woensdag 22 juli 2009 @ 16:42

http://mashable.com/2009/07/16/ie6-must-die/
http://www.techcrunch.com(...)internet-explorer-6/
http://www.techcrunch.com(...)ie6-support-goodbye/

daReaper

woensdag 22 juli 2009 @ 17:13

quote:
Op woensdag 22 juli 2009 16:42 schreef Chanty87 het volgende:
http://mashable.com/2009/07/16/ie6-must-die/
http://www.techcrunch.com(...)internet-explorer-6/
http://www.techcrunch.com(...)ie6-support-goodbye/

Voor mijn eigen site wil ik best IE6 bannen, maar dit is voor een klant die een webshop in rusland wil draaien, en daar is internet nog niet overal zo ver ontwikkeld, dus zijn er nog een hoop IE6-gebruikers, die dan dus geen klant zullen zijn.

Chanty87

woensdag 22 juli 2009 @ 17:33

Wat dacht je van een paar linkjes naar IE8 of Firefox? Doe ik ook

We kunnen niet voor eeuwig IE6 ondersteunen omdat sommigen nog in 2001 leven en te lui zijn om te updaten. Ik heb net voor het eerst een "nieuwe generatie" theme gemaakt voor Wordpress en het is heerlijk om niet constant IE6 in je achterhoofd te hoeven houden en achteraf PNG hacks, ie6fixes.css e.d. te moeten implementeren

daReaper

woensdag 22 juli 2009 @ 17:42

quote:
Op woensdag 22 juli 2009 17:33 schreef Chanty87 het volgende:
Wat dacht je van een paar linkjes naar IE8 of Firefox? Doe ik ook We kunnen niet voor eeuwig IE6 ondersteunen omdat sommigen nog in 2001 leven en te lui zijn om te updaten. Ik heb net voor het eerst een "nieuwe generatie" theme gemaakt voor Wordpress en het is heerlijk om niet constant IE6 in je achterhoofd te hoeven houden en achteraf PNG hacks, ie6fixes.css e.d. te moeten implementeren

De klant is koning, en als de koning lui is, dan moet ik me als winkelier daar maar op aanpassen

Chanty87

woensdag 22 juli 2009 @ 17:57

Youtube, Digg en 37signals dachten er ook zo over

Maar prima hoor, jouw keuze

Ik verspil mijn tijd niet meer aan IE6 (tenzij de klant echt zeker weten IE6 support wil voor een extra bedrag). Zeker niet nu de grote sites er ook mee kappen. Hoe meer designers/developers de ondersteuning laten vallen des te sneller we van die kutbrowser af zijn.

Roy_T

donderdag 23 juli 2009 @ 09:19

quote:
Op woensdag 22 juli 2009 17:13 schreef daReaper het volgende:

Voor mijn eigen site wil ik best IE6 bannen, maar dit is voor een klant die een webshop in rusland wil draaien, en daar is internet nog niet overal zo ver ontwikkeld, dus zijn er nog een hoop IE6-gebruikers, die dan dus geen klant zullen zijn.

Er zit een verschil tussen een site niet laten werken in IE6 en er iets anders uit laten zien in IE6. Nu is jouw geval wellicht anders, maar standaard zorg ik ervoor dat een site werkt in IE6. Ik vertel mijn klant vantevoren dat de site er misschien in details anders uit ziet (door het gebrek aan :last-child krijgt de laatste rij in een tabel tóch een randje eronder, etc). Wil je het pixel perfect in IE6: prima. Maar dan gaan we daar wel eerst een begroting voor maken

Roy_T

donderdag 23 juli 2009 @ 09:23

quote:
Op woensdag 22 juli 2009 17:33 schreef Chanty87 het volgende:
Wat dacht je van een paar linkjes naar IE8 of Firefox? Doe ik ook We kunnen niet voor eeuwig IE6 ondersteunen omdat sommigen nog in 2001 leven en te lui zijn om te updaten.

Da's niet echt waar, recent onderzoek toont aan dat van de IE6 gebruikers slechts ongeveer 14% thuisgebruikers zijn. De overige 86% zijn mensen die het op hun werk moeten gebruiken, en die kunnen niet upgraden. Dat die bedrijven niet upgraden, daar hebben ze een goede reden voor: ze hebben 8 jaar geleden web apps laten bouwen door prutsers, die alleen in IE6 werken. Als ze moeten kiezen tussen YouTube goed tonen, of hun app die een ton gekost heeft laten werken, dan is de keuze snel gemaakt. Zolang de pruts apps niet uitgefaseerd zijn blijft een groot deel van werkend Nederland IE6 gebruiken.

daReaper

donderdag 23 juli 2009 @ 10:27

quote:
Op donderdag 23 juli 2009 09:19 schreef Roy_T het volgende:

[..]

Er zit een verschil tussen een site niet laten werken in IE6 en er iets anders uit laten zien in IE6. Nu is jouw geval wellicht anders, maar standaard zorg ik ervoor dat een site werkt in IE6. Ik vertel mijn klant vantevoren dat de site er misschien in details anders uit ziet (door het gebrek aan :last-child krijgt de laatste rij in een tabel tóch een randje eronder, etc). Wil je het pixel perfect in IE6: prima. Maar dan gaan we daar wel eerst een begroting voor maken

Ahja, zoals het er nu uit ziet in IE6 ben ik op zich tevreden, hoewel het inderdaad niet perfect is. en :last-child werkt door dat script dus wèl

Roy_T

donderdag 23 juli 2009 @ 12:21

quote:
Op donderdag 23 juli 2009 10:27 schreef daReaper het volgende:

Ahja, zoals het er nu uit ziet in IE6 ben ik op zich tevreden, hoewel het inderdaad niet perfect is. en :last-child werkt door dat script dus wèl

Nee, :last-child werkt niet, maar dat zie je niet omdat dat script het gedrag van :last-child nadoet

Maar dan ben je nu opeens afhankelijk van JavaScript, of dat nou echt een beter alternatief is, daar kun je over discussiëren

Light

donderdag 23 juli 2009 @ 12:40

quote:
Op donderdag 23 juli 2009 09:19 schreef Roy_T het volgende:

(door het gebrek aan :last-child krijgt de laatste rij in een tabel tóch een randje eronder, etc). Wil je het pixel perfect in IE6: prima. Maar dan gaan we daar wel eerst een begroting voor maken

:last-child werkt ook niet in IE7, voor zover ik weet. En meeestal kun je het met :first-child ook wel oplossen (maar ook die werkt niet in IE6).

Chanty87

donderdag 23 juli 2009 @ 12:47

quote:
Op donderdag 23 juli 2009 09:23 schreef Roy_T het volgende:

[..]

Da's niet echt waar, recent onderzoek toont aan dat van de IE6 gebruikers slechts ongeveer 14% thuisgebruikers zijn. De overige 86% zijn mensen die het op hun werk moeten gebruiken, en die kunnen niet upgraden. Dat die bedrijven niet upgraden, daar hebben ze een goede reden voor: ze hebben 8 jaar geleden web apps laten bouwen door prutsers, die alleen in IE6 werken. Als ze moeten kiezen tussen YouTube goed tonen, of hun app die een ton gekost heeft laten werken, dan is de keuze snel gemaakt. Zolang de pruts apps niet uitgefaseerd zijn blijft een groot deel van werkend Nederland IE6 gebruiken.

Ik heb het ook niet alleen over thuisgebruikers

Door die bedrijven blijft het web constant steken. Het is de hoogste tijd om na 8 jaar IE6 met de volgende generatie te gaan werken ipv vernieuwing in de weg te blijven zitten omdat ze hun prutsapps niet willen updaten. Zolang iedere designer/developer IE6 blijft ondersteunen zal er nooit geupgradet worden omdat die noodzaak er niet is en dus sluit ik me maar al te graag aan bij YT, Digg en 37signals

Roy_T

donderdag 23 juli 2009 @ 16:52

quote:
Op donderdag 23 juli 2009 12:40 schreef Light het volgende:

:last-child werkt ook niet in IE7, voor zover ik weet

Jawel hoor

:nth-child niet.

Roy_T

donderdag 23 juli 2009 @ 16:57

quote:
Op donderdag 23 juli 2009 12:47 schreef Chanty87 het volgende:

Ik heb het ook niet alleen over thuisgebruikers Door die bedrijven blijft het web constant steken. Het is de hoogste tijd om na 8 jaar IE6 met de volgende generatie te gaan werken ipv vernieuwing in de weg te blijven zitten omdat ze hun prutsapps niet willen updaten. Zolang iedere designer/developer IE6 blijft ondersteunen zal er nooit geupgradet worden omdat die noodzaak er niet is en dus sluit ik me maar al te graag aan bij YT, Digg en 37signals

Van de bedrijven die je noemt is 37signals de enige die winst boekt uit verkopen van een dienst, en die hebben echt andere klanten dan de bedrijven die een paar ton aan een web app uitgeven. Dat is iets anders dan max 99$ voor Basecamp.

Ik ben het helemaal met je eens dat IE6 er zo snel mogelijk uit moet, en dat iedereen (ook bedrijven) zou moeten upgraden. Maar dat neemt niet weg dat ik heel goed begrijp waarom een TNT of een Rabobank dat niet doen. Een groot deel van hun processen valt stil als ze upgraden naar een browser waar hun apps niet mee werken. Het is, zeker nu, een stuk voordeliger om dan maar IE6 te houden ipv veel geld uit te geven aan nieuwe apps.

Light

donderdag 23 juli 2009 @ 17:14

quote:
Op donderdag 23 juli 2009 16:52 schreef Roy_T het volgende:

[..]

Jawel hoor :) :nth-child niet.

:last-child ook niet. Is trouwens een css3 ding, net als :nth-child.

Ik heb het getest met onderstaande html/css:

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Test</title>
<style type="text/css">
#test {
   color: red;
}
#test :last-child {
   color: green;
}
</style>
</head>
<body>
<div id="test">
   <p>Child 1</p>
   <p>Child 2</p>
   <p>Child 3</p>
</div>
</body>
</html>

Roy_T

donderdag 23 juli 2009 @ 22:24

quote:
Op donderdag 23 juli 2009 17:14 schreef Light het volgende:

:last-child ook niet. Is trouwens een css3 ding, net als :nth-child.

Je hebt gelijk. Ik was in de war met :first-child (wat weer CSS 2.1 is en wél werkt in IE7).

Likkende_Lassie

zondag 26 juli 2009 @ 22:22

Ik kom niet uit het volgende:

HTML:

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

<div class="topsteden">
   <div class="cities">
      <div class="city" id="1">
         <div class="image"><img src="/images/amsterdam.jpg" alt="Amsterdam" width="80" /></div>
         <div class="title"><a href="#">Amsterdam</a></div>
         <div class="rating"><img src="/images/star.png" alt="nvt" /></div>
         <div class="text">Amsterdam is de hoofdstad van Nederland en mag aanspraak maken op de titel "Wereldstad". Vele verschillende kanten van Nederland zie je hier in een stad. Oude gebouwen, moderne architectuur, natuur, musea en nog veel meer. <a href="#" style="font-size: 10px;" class="border"><i>(lees verder...)</i></a></div>
      </div>
      <div class="city" id="2">
         <div class="image"><img src="/images/den_haag.jpg" alt="Den Haag" width="80" /></div>
         <div class="title"><a href="#">Den Haag</a></div>
         <div class="rating"><img src="/images/star.png" alt="nvt" /></div>
         <div class="text">bsdfgh fdfg dsfgvbsdasdf lablabla</div>
      </div>
</div>

CSS:

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

/* topsteden */
.topsteden {}
.topsteden .menu { text-align: center;}
.topsteden .cities {position: relative; top: 15px;}
.topsteden .cities .city {position: relative; top: 10px; padding: 10px; height: 95px;}
.topsteden .cities .city .image {
   position: relative;
   float: left;
   width: 85px;
   height: 85px;
   border:1px solid gray;
   padding-left: 5px;
   padding-top: 5px;
   left: 5px;
}
.topsteden .cities .city .title {position: relative; left: 13px; float:left; font-weight: bold;}
.topsteden .cities .city .rating {position: relative; left: 130px;}
.topsteden .cities .city .text {position: absolute; left: 110px; top: 20px;font-size: 10px;}

Is mijn opbouw (css) goed zo? want ik heb het idee als ik in .topsteden .cities { } padding: 5px; doe, dat die voor alle andere ook geldt?

Roy_T

zondag 26 juli 2009 @ 22:33

Voor welke anderen?

Je HTML is verder redelijk ruk overigens

Divitis is net zo erg als tabellen

Waarom .text ipv <p>, waarom .title ipv <hn>?

LeNick

zondag 26 juli 2009 @ 22:38

tvp

Likkende_Lassie

zondag 26 juli 2009 @ 22:43

quote:
Op zondag 26 juli 2009 22:33 schreef Roy_T het volgende:
Voor welke anderen?

Je HTML is verder redelijk ruk overigens Divitis is net zo erg als tabellen Waarom .text ipv <p>, waarom .title ipv <hn>?

Voor topsteden .cities .city en topsteden .cities .city .images etc. bijvoorbeeld

Je hebt idd gelijkt betreffende die .text en .title :0

Light

zondag 26 juli 2009 @ 23:16

quote:
Op zondag 26 juli 2009 22:43 schreef Likkende_Lassie het volgende:

[..]

Voor topsteden .cities .city en topsteden .cities .city .images etc. bijvoorbeeld
Je hebt idd gelijkt betreffende die .text en .title :0

Je bedoelt dat .cities een lijst met steden is en .city een losse stad? Waarom dan niet <ul> en <li> gebruiken? Die zijn speciaal voor lijsten gemaakt

Roy_T

maandag 27 juli 2009 @ 10:03

Als je in ".topsteden .cities {position: relative; top: 15px;}" padding toevoegt, dan heeft dat alleen effect op de div met class="cities".

Likkende_Lassie

maandag 27 juli 2009 @ 10:41

quote:
Op maandag 27 juli 2009 10:03 schreef Roy_T het volgende:
Als je in ".topsteden .cities {position: relative; top: 15px;}" padding toevoegt, dan heeft dat alleen effect op de div met class="cities".

En niet op de gehele div .topsteden?

Light

maandag 27 juli 2009 @ 11:02

quote:
Op maandag 27 juli 2009 10:41 schreef Likkende_Lassie het volgende:

[..]

En niet op de gehele div .topsteden?

Nee. Alleen op de div .cities in de div .topsteden.

Roy_T

maandag 27 juli 2009 @ 11:08

quote:
Op maandag 27 juli 2009 10:41 schreef Likkende_Lassie het volgende:

En niet op de gehele div .topsteden?

Nee. Je bent niet in de war met margin ofzo? Niet dat het daarvoor wel geldt, maar dan is het op het eerste gezicht moeilijker om te zien of de ruimte door padding op de ouder of margin op het kind komt.

iBolt

dinsdag 28 juli 2009 @ 16:05

Ander dingetje... Ik heb zeg maar zo'n collapse/expand gevalletje wat er ongeveer zo uitziet...

1
2
3
4

<a href="#" onclick"toggle('id1')">Collapse 1</a><div id="id1" style="display:none;">Blaat 1</div>
<a href="#" onclick"toggle('id2')">Collapse 2</a><div id="id2" style="display:none;">Blaat 2</div>
<a href="#" onclick"toggle('id3')">Collapse 3</a><div id="id3" style="display:none;">Blaat 3</div>
<a href="#" onclick"toggle('id4')">Collapse 3</a><div id="id4" style="display:none;">Blaat 4</div>

Nu werkt het allemaal fijn alleen zit er zeg maar nu zo'n lelijke ruimte ruimte, witregel, tussen me links... en die wil ik weghebben... padding en margin veranderen helpt niet

(als div weg is is witregel ook weg ofcourse)

Flaccid

dinsdag 28 juli 2009 @ 16:23

quote:
Op dinsdag 28 juli 2009 16:05 schreef iBolt het volgende:
Ander dingetje... Ik heb zeg maar zo'n collapse/expand gevalletje wat er ongeveer zo uitziet...
[ code verwijderd ]

Nu werkt het allemaal fijn alleen zit er zeg maar nu zo'n lelijke ruimte ruimte, witregel, tussen me links... en die wil ik weghebben... padding en margin veranderen helpt niet (als div weg is is witregel ook weg ofcourse)

Lineheight aanpassen?

Roy_T

dinsdag 28 juli 2009 @ 16:55

quote:
Op dinsdag 28 juli 2009 16:05 schreef iBolt het volgende:
Ander dingetje... Ik heb zeg maar zo'n collapse/expand gevalletje wat er ongeveer zo uitziet...
[ code verwijderd ]

Nu werkt het allemaal fijn alleen zit er zeg maar nu zo'n lelijke ruimte ruimte, witregel, tussen me links... en die wil ik weghebben... padding en margin veranderen helpt niet (als div weg is is witregel ook weg ofcourse)

Wat wil je bereiken? Op het moment dat er geen div aan staat, is er ook geen witruimte en staan ze gewoon achter elkaar. Als er een div aan staat, dan staat er ook inhoud in neem ik aan?

Tunafish

zondag 2 augustus 2009 @ 14:21

Hallo Fokkertjes,

Ik ben hier bezig met een simpele website voor een radioprogramma, en zoals altijd gooit IE roet in het eten. De bedoeling is om een plaatje te floaten naar left en een menubalk daarnaast te laten zien. Daaronder dan weer een blokje met playlist en de gewone tekst.

Firefox laat het vrolijk zien, IE8 ook, IE7 waagt zich er niet aan. Het menu wordt naar beneden gedrukt, waardoor de hele layout naar de kloten gaat.Het is vast een heel dom foutje ergens die heel simpel is op te lossen, maar ik kan er niet opkomen.

De pagina staat op http://www.marktreffer.nl. Het ballonnenmannetje moet dus floaten, de rest ernaast.

Help

Light

zondag 2 augustus 2009 @ 14:27

Ik zou bij het menu ook float: left; zetten.

Tunafish

zondag 2 augustus 2009 @ 14:38

Dan verneukt Firefox hem ook, komt de tekst naast de ballon te staan en het menu onder de ballon.

Heb het nu opgelost door alle content behalve die ballon in een float:left te zetten en dan wat correctie met margins, dan werkt 'ie wel weer.

Light

maandag 3 augustus 2009 @ 13:56

Ik heb ook weer eens een probleempje. Ik wil iets te maken met rounded corners. Dat is op zich goed mogelijk, er zijn 1001 manieren om dat te doen. Probleem is alleen dat het vlak met de rounded corners half over een foto en/of flashanimatie komt, en ik dus geen vaste achtergrondkleur aan de buitenkant kan gebruiken.

Het moet ook werken in IE7, dus het zal iets moeten worden met plaatjes. Iemand een idee hoe ik dat het beste kan aanpakken, zonder dat er 10.000 div's nodig zijn?

Roy_T

maandag 3 augustus 2009 @ 15:00

Dat kan simpelweg niet, tenzij je hele rare dingen gaat doen met tig div's inderdaad. Screw IE, of pas het ontwerp aan. Sommige zaken kunnen nu eenmaal niet op een zinnige manier.

Light

maandag 3 augustus 2009 @ 15:13

Ik was er al bang voor. Dat wordt dus veel div's gebruiken. Ontwerp aanpassen is geen optie en IE laten vallen ook niet. Daar vindt de klant niet goed. Helaas.

Roy_T

maandag 3 augustus 2009 @ 16:50

quote:
Op maandag 3 augustus 2009 15:13 schreef Light het volgende:
Ik was er al bang voor. Dat wordt dus veel div's gebruiken. Ontwerp aanpassen is geen optie en IE laten vallen ook niet. Daar vindt de klant niet goed. Helaas.

Je kunt ook als internetprofessional zeggen dat er geen (fatsoenlijke) oplossing is

Light

maandag 3 augustus 2009 @ 17:01

quote:
Op maandag 3 augustus 2009 16:50 schreef Roy_T het volgende:

[..]

Je kunt ook als internetprofessional zeggen dat er geen (fatsoenlijke) oplossing is

Als er geen oplossing is, dan zeggen we dat ook wel

Roy_T

maandag 3 augustus 2009 @ 17:09

quote:
Op maandag 3 augustus 2009 17:01 schreef Light het volgende:

Als er geen oplossing is, dan zeggen we dat ook wel

Dit is een mooie kandidaat ervoor

Het is alleen te doen door te prutsen

Tunafish

woensdag 5 augustus 2009 @ 14:07

Kun je het niet gewoon doen met PNG's met transparante achtergrond?

Light

woensdag 5 augustus 2009 @ 14:18

quote:
Op woensdag 5 augustus 2009 14:07 schreef Tunafish het volgende:
Kun je het niet gewoon doen met PNG's met transparante achtergrond?

Ja, met de buitenrand transparant. Dat kan inderdaad, en zo heb ik het ook opgelost. Nadeel is dat ik dan 8 div's nodig heb waar ik normaal met 1 had toegekund.

Light

woensdag 5 augustus 2009 @ 14:20

quote:
Op maandag 3 augustus 2009 17:09 schreef Roy_T het volgende:

[..]

Dit is een mooie kandidaat ervoor Het is alleen te doen door te prutsen

Nee. Het is te doen, dus gaan we de klant niet lastig vallen met het feit dat het wat ingewikkelder is dan normaal.

Roy_T

donderdag 6 augustus 2009 @ 01:21

quote:
Op woensdag 5 augustus 2009 14:20 schreef Light het volgende:

Nee. Het is te doen, dus gaan we de klant niet lastig vallen met het feit dat het wat ingewikkelder is dan normaal.

Ik zou iig een klant geen oplossing verkopen die 8 extra div's omvat. Wij doen het gewoon niet. maar ieder zijn werkwijze

Stockton

donderdag 20 augustus 2009 @ 19:55

Vraag: Ik ben met de header bezig in een container:

quote:
#container {
width: 941px;
background: #FFF url(images/repeat.png) repeat-y;
text-align: left;
margin: 0 auto;
}

#headerleft{
width: 452px;
background-image: url(images/header.png);
height: 273px;
float: left;
}

#headerright{
float: right;
height: 273px;
width: 489px;
}

Headerright en HEaderleft zijn samen de gehele header, maar dit is apart langs elkaar omdat Headerleft één grote afbeelding bevat, en headerright aparte afbeeldingen die samen het menu vormen.
Nu is het eigenlijk simpel gezegt dat header right breder moet worden, breder dan de container. Een paar afbeeldingen steken er namelijk uit (mooi effect), en daarom moet breder.

Moet ik nu de container later laten beginnen, of kan ik het door enig of andere manier dat een afbeelding over de toegestaande breedte kan?

Ben zelf niet zo met CSS, daarom deze vraag. Via google krijg je wel honderden sites, maar niet echt een goede.

Alvast bedankt!

Light

donderdag 20 augustus 2009 @ 21:28

quote:
Op donderdag 20 augustus 2009 19:55 schreef Stockton het volgende:
Vraag: Ik ben met de header bezig in een container:
[..]

Headerright en HEaderleft zijn samen de gehele header, maar dit is apart langs elkaar omdat Headerleft één grote afbeelding bevat, en headerright aparte afbeeldingen die samen het menu vormen.
Nu is het eigenlijk simpel gezegt dat header right breder moet worden, breder dan de container. Een paar afbeeldingen steken er namelijk uit (mooi effect), en daarom moet breder.

Moet ik nu de container later laten beginnen, of kan ik het door enig of andere manier dat een afbeelding over de toegestaande breedte kan?

Ben zelf niet zo met CSS, daarom deze vraag. Via google krijg je wel honderden sites, maar niet echt een goede.

Alvast bedankt!

Is het geen oplossing de container breder te maken? Anders kun je ook nog #headerleft een negatieve margin-left geven, en #headerright een negatieve margin-right.

Roy_T

vrijdag 21 augustus 2009 @ 11:05

De container breder maken inderdaad, en de header ook.

Eventuele content daaronder zou je in een tweede smallere container kunnen zetten.

Flaccid

maandag 24 augustus 2009 @ 21:02

Ik heb in de loop der jaren een aantal standaard dingen geleerd, een div in het midden uitlijnen kan dmv margin: 0 auto, maar hoe krijg ik een footer ook alweer minimaal tot de onderkant van de pagina?

Mirel

maandag 24 augustus 2009 @ 21:05

asdsawqeasdfe

[ Bericht 63% gewijzigd door Mirel op 24-08-2009 21:22:17 ]

de_DDoSwachter

maandag 24 augustus 2009 @ 21:34

quote:
Op maandag 24 augustus 2009 @ 21:02 schreef Flaccid het volgende:
Ik heb in de loop der jaren een aantal standaard dingen geleerd, een div in het midden uitlijnen kan dmv margin: 0 auto, maar hoe krijg ik een footer ook alweer minimaal tot de onderkant van de pagina?

Da's voor meerder uitleg vatbaar...

Wil je een fixed footer onderaan? zoja: position:fixex, en wat hacks voor IE.
Wil je een layout met 100% hoogte? min-height:100%, evt. wat combi's met faux columns, en de nodige IE-hacks.

http://www.google.nl/search?q=css+100%25+height
http://www.google.nl/search?q=css+fixed+footer

Flaccid

dinsdag 25 augustus 2009 @ 10:23

Heb nu 4 floats, maar die blijven niet binnen 1 div. Hoe kan ik dat toch goed hebben?

Roy_T

dinsdag 25 augustus 2009 @ 11:23

quote:
Op dinsdag 25 augustus 2009 10:23 schreef Flaccid het volgende:
Heb nu 4 floats, maar die blijven niet binnen 1 div. Hoe kan ik dat toch goed hebben?

Wat wil je, dat de parent mee schaalt met de div's die erin gefloat worden, of bedoel je iets anders?

de_DDoSwachter

dinsdag 25 augustus 2009 @ 11:42

quote:
Op dinsdag 25 augustus 2009 10:23 schreef Flaccid het volgende:
Heb nu 4 floats, maar die blijven niet binnen 1 div. Hoe kan ik dat toch goed hebben?

90% kans dat je er een element met clear:both onder moet gooien. Zo niet dan zul je toch wat meer moeite moeten doen om je probleem uit te leggen.

Roy_T

dinsdag 25 augustus 2009 @ 12:52

quote:
Op dinsdag 25 augustus 2009 11:42 schreef de_DDoSwachter het volgende:

90% kans dat je er een element met clear:both onder moet gooien

Of gewoon de parent div overflow:auto geven, en geen overbodige elementen toevoegen

Flaccid

dinsdag 25 augustus 2009 @ 12:53

Clear:both heeft gewerkt

thanks

Stockton

woensdag 26 augustus 2009 @ 20:31

quote:
Op donderdag 20 augustus 2009 21:28 schreef Light het volgende:

[..]

Is het geen oplossing de container breder te maken? Anders kun je ook nog #headerleft een negatieve margin-left geven, en #headerright een negatieve margin-right.

De container breder maken was niet echt een optie, omdat me gehele layout dan weer moest veranderen.
Ik heb het uitstekende gedeelte van de afbeelding afgeknipt, en die in een Div gezet en de div de plek van links boven gegeven. De afbeelding lijkt nu één, maar is eigenlijk uit twee delen.

Toch iedereen bedankt voor de hulp

raaavi

vrijdag 28 augustus 2009 @ 23:09

quote:
Op donderdag 27 augustus 2009 22:33 schreef raaavi het volgende:
[ afbeelding ]

hier staat dus hoe ik een background img toevoeg.
maar wat nou als ik hem

1. niet herhalend
2. links midden uitgelijnd wil hebben

Hoe moet dat ?

BBQ-kip

vrijdag 28 augustus 2009 @ 23:16

quote:
Op vrijdag 28 augustus 2009 23:09 schreef raaavi het volgende:

[..]

Je "moet" nog even wat foto's neerplempen in je studentenkamer-topic

raaavi

vrijdag 28 augustus 2009 @ 23:17

quote:
Op vrijdag 28 augustus 2009 23:16 schreef BBQ-kip het volgende:

[..]

Je "moet" nog even wat foto's neerplempen in je studentenkamer-topic

was net me camera aan het aansluiten

BBQ-kip

vrijdag 28 augustus 2009 @ 23:18

quote:
Op vrijdag 28 augustus 2009 23:17 schreef raaavi het volgende:

[..]

was net me camera aan het aansluiten

Ah top

Light

vrijdag 28 augustus 2009 @ 23:24

quote:
Op vrijdag 28 augustus 2009 23:09 schreef raaavi het volgende:

[..]

Het is niet zo moeilijk als het misschien lijkt.

Er staat nu:

1	background: url(/wp/wp-content/themes/atahualpa342/images/backgr.gif) repeat top left;

Als je dat verandert in

1	background: url(/wp/wp-content/themes/atahualpa342/images/backgr.gif) no-repeat center left;

dan ben je er al. Moet je nog wel zorgen dat je het goede plaatje selecteert natuurlijk.

raaavi

vrijdag 28 augustus 2009 @ 23:52

quote:
Op vrijdag 28 augustus 2009 23:24 schreef Light het volgende:

[..]

Het is niet zo moeilijk als het misschien lijkt.

Er staat nu:
[ code verwijderd ]

Als je dat verandert in
[ code verwijderd ]

dan ben je er al. Moet je nog wel zorgen dat je het goede plaatje selecteert natuurlijk.

Ah geweldig, ik denk dat ik me toch maar moet gaan verdiepen in CSS. altijd handig bij die CMS's als je wilt editen

Swetsenegger

maandag 31 augustus 2009 @ 21:48

1
2
3
4
5
6
7
8
9
10
11

<span style="display:block;text-align:right;height:30px;line-height:30px;">
Naam
<form style="padding:0;margin:0;" action="inloggen" method="post">
<input type="hidden" name="location" value=/klantGegevens.php />
<input type="submit" name="uitloggen" value="Uitloggen" />
</form>
<a href="cart" style="text-decoration:none;color:black">0 artikelen: <img src="image/cart.png" alt="winkelwagen" height="30px" width="20px" style="border:0;padding:0;vertical-align:middle" /></a>

<input type="text" size="20" style="background:url(image/searchbg.png) repeat-x;padding:0;border:1px solid #888" value="zoeken" />
<img src="image/search.png" alt="zoeken" height="30px" width="30px" style="padding:0;vertical-align:middle" />
</span>

Na de </form> krijg ik een newline waardoor de rest een regel eronder gepositioneerd wordt terwijl ik het naast elkaar wil. Iemand een simpele tip?

doppendoosch

maandag 31 augustus 2009 @ 21:56

</form> ergens anders neerzetten?

Swetsenegger

maandag 31 augustus 2009 @ 21:59

display:inline; in de form style does the trick.

raaavi

zondag 6 september 2009 @ 13:53

Ben ik weer

Ik ben even een simpel html sitetje in elkaar aan het zetten voor mn school.
Vind het intranet van de HU maar moeilijk,, dus wil ik voor mn klas een beveiligde site in elkaar zetten.

http://i26.tinypic.com/adj51v.jpg

Hoe kan ik ervoor zorgen dat het middelste stuk zich automatisch uitrekt tot 100%, zelfs als er geen tekst in staat?

Dus dan heb je standaard, ongeacht de inhoud een witte balk in het midden:

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

<div id="container">
  <div id="header">
    <h1>Communicatie Management - D12 <a name="Atop"></a></h1>
  </div>
  <div id="mainContent">
    <h1> <a href="#sites">Sites</a> - <a href="#bestanden">Bestanden</a> </h1>
    <br />
<em>(Nieuwste bovenaan)</em>

   </div>
  <div id="footer">
    <p><a href="#top">Top</a></p>
  </div>
</div>
</body>
</html>

1
2
3
4
5
6

<?php
.oneColElsCtrHdr #mainContent {
padding: 0 20px;
background: #FFFFFF;
}
?>

[ Bericht 21% gewijzigd door raaavi op 06-09-2009 14:03:37 ]

Roy_T

zondag 6 september 2009 @ 14:11

quote:
Op zondag 6 september 2009 13:53 schreef raaavi het volgende:

Hoe kan ik ervoor zorgen dat het middelste stuk zich automatisch uitrekt tot 100%, zelfs als er geen tekst in staat?

min-height: 100%; ook al wil je eigenlijk helemaal niet dat die balk 100% hoog is

raaavi

zondag 6 september 2009 @ 14:23

quote:
Op zondag 6 september 2009 14:11 schreef Roy_T het volgende:

[..]

min-height: 100%; ook al wil je eigenlijk helemaal niet dat die balk 100% hoog is

werkt niet

**ik los het wel anders op

Nevermind

daReaper

maandag 7 september 2009 @ 15:11

Weet iemand een oplossing voor het probleem dat hier beschreven staat? http://www.codingforums.com/showthread.php?t=151562

Ik zit namelijk met precies hetzelfde probleem. In IE staan ze netjes naast elkaar, maar in FF3, Opera en Chrome staat de submit-button ongeveer 3 pixels hoger dan het text-veld.

Nashje

donderdag 10 september 2009 @ 16:22

Weet iemand hoe ik een container tot onder kan laten doorlopen? Wat voor height moet ik deze meegeven? En wat moet ik met de heights doen van de divs die er in staan?

Dank alvast

Roy_T

donderdag 10 september 2009 @ 16:27

Als je eerst eens uitlegt wat je wil? "container tot onder laten doorlopen" is nou niet echt een industrieterm ofzo

Nashje

vrijdag 11 september 2009 @ 10:36

Opbouw:

menu
div1 div3
div2 div3
footer

Alles staat in een container. De footer staat al vast onderaan. Als div2 óf heel div3 (contentdiv) veel tekst heeft moet de container automatisch meegaan. Deze moet dus géén vaste height krijgen. Hoe kan ik dit realiseren? Heb de html, body op 100% staan en de container ook 100% gegeven.. Maar als er dan meer tekst in staat dan in het beeld past loopt de container niet mee door. Footer overigens ook niet.

edit: hier de code, wel net zo makkelijk:
CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66

html, body {
background: url(images/achtergrond.jpg) center repeat-x;
background-color: #4a4a4a;
margin: 0px;
padding: 0px;
font: 12px Arial, Helvetica, sans-serif;
height: 100%;
}

.menubalk {
background: #2e3235;
width: 100%;
height: 50px;
float: left;
color: #fff;
font: 13px Geneva, Arial, Helvetica, sans-serif;
font-weight: bold;
}

.container {
background: url(images/achtergrond_content.png) repeat-y;
margin: 0 auto;
width: 976px;
height: 100%;
}

.links {
width: 303px;
float: left;
}

.plaatje {
background: url(images/foto.jpg);
width: 303px;
height: 239px;
float: left;
margin-left: 17px;
}

.logo {
background: url(images/logo.jpg);
width: 303px;
height: 143px;
float: left;
margin-left: 17px;
}

.tekst {
width: 303px;
float: left;
margin-left: 17px;
}

.content {
width: 673px;
}

.footer {
background: #2e3235;
float: left;
width: 945px;
height: 44px;
margin-left: 16px;
position: absolute;
bottom: 0;
}

HTML

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

[ Bericht 42% gewijzigd door Nashje op 11-09-2009 11:21:31 ]

donroyco

maandag 14 september 2009 @ 02:48

-edit-

[ Bericht 96% gewijzigd door donroyco op 14-09-2009 03:38:23 ]

ReWout

woensdag 16 september 2009 @ 13:36

quote:
Op vrijdag 11 september 2009 10:36 schreef Nashje het volgende:
Opbouw:

menu
div1 div3
div2 div3
footer

Alles staat in een container. De footer staat al vast onderaan. Als div2 óf heel div3 (contentdiv) veel tekst heeft moet de container automatisch meegaan. Deze moet dus géén vaste height krijgen. Hoe kan ik dit realiseren? Heb de html, body op 100% staan en de container ook 100% gegeven.. Maar als er dan meer tekst in staat dan in het beeld past loopt de container niet mee door. Footer overigens ook niet.

edit: hier de code, wel net zo makkelijk:
CSS
[ code verwijderd ]

HTML
[ code verwijderd ]

Zou niet wetn hoe 't moet :P maar misschien heb je hier wat aan... staat wat css code voor verschillende type layouts. http://matthewjamestaylor(...)olumn-liquid-layouts

Een vraagje van mij kant...

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

tr:hover.tblhover {
   background-color: #ccc
}

<table>
   <tr class="tblhover">
      <td>cell 1</td>
      <td>cell 2</td>
   </tr>
   <tr class="tblhover">
      <td>cell 3</td>
      <td>cell 4</td>
   </tr>
</table>

Ik vroeg me af kan ik me css zo veranderen dat ik in feite i.p.v. 't bovenstaande ook dit zou kunnen doen

1
2
3
4
5
6
7
8
9
10

Roy_T

woensdag 16 september 2009 @ 14:55

Zelfs áls je CSS werkt, dan is dit netter:

1
2
3

tr.tblhover:hover {
background-color: #ccc
}

En als je het wilt zoals je aangeeft:

1
2
3

table.tblhover tr:hover {
background-color: #ccc
}

daReaper

dinsdag 22 september 2009 @ 21:25

Ik heb een pagina met 2 kolommen:

kolom HOOFD en kolom RECHTS

in kolom hoofd zitten óók twee kolommen, maar alléén op de voorpagina van de site. op alle andere pagina's is er maar 1 kolom. Kolom CONTENT en kolom FRONTPAGE

De hele pagina is 960px breed. Kolom RECHTS is 200px breed met 20px margin. Kolom FRONTPAGE is 430px breed.

Hoe zorg ik er nou voor dat kolom CONTENT de restruimte opvult. Oftewel, als er wel een frontpage is, is de breedte (automatisch) 310px en als er geen frontpage is, is de breedte 740px breed?

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

<div id="RECHTS"></div>
<div id="HOOFD">
  <div id="FRONTPAGE"></div>
  <div id="CONTENT"></div>
</div>

[code]
#HOOFD {
  width: 740px;
}
#RECHTS {
  float: right;
  width: 200px;
  margin-left: 20px;
}
#CONTENT {
  ???
}
#FRONTPAGE {
  float: right;
  width: 430px;
}

doppendoosch

dinsdag 22 september 2009 @ 21:46

quote:
Op dinsdag 22 september 2009 @ 21:25 schreef daReaper het volgende:

Hoe zorg ik er nou voor dat kolom CONTENT de restruimte opvult. Oftewel, als er wel een frontpage is, is de breedte (automatisch) 310px en als er geen frontpage is, is de breedte 740px breed?
[ code verwijderd ]

Waarom zou je in hemelsnaam die div #frontpage gebruiken op pagina's waar je hem niet nodig hebt

Light

dinsdag 22 september 2009 @ 21:54

quote:
Op dinsdag 22 september 2009 21:25 schreef daReaper het volgende:
Ik heb een pagina met 2 kolommen:

kolom HOOFD en kolom RECHTS

in kolom hoofd zitten óók twee kolommen, maar alléén op de voorpagina van de site. op alle andere pagina's is er maar 1 kolom. Kolom CONTENT en kolom FRONTPAGE

De hele pagina is 960px breed. Kolom RECHTS is 200px breed met 20px margin. Kolom FRONTPAGE is 430px breed.

Hoe zorg ik er nou voor dat kolom CONTENT de restruimte opvult. Oftewel, als er wel een frontpage is, is de breedte (automatisch) 310px en als er geen frontpage is, is de breedte 740px breed?
[ code verwijderd ]

Gewoon in je stylesheet zetten dat die div #content 740px breed moet zijn. En bij de frontpage een extra stylesheet laden (na de gewone stylesheet) met daarin de breedte van #frontpage (430px) en #content (310px).

daReaper

dinsdag 22 september 2009 @ 21:59

quote:
Op dinsdag 22 september 2009 21:46 schreef doppendoosch het volgende:

[..]

Waarom zou je in hemelsnaam die div #frontpage gebruiken op pagina's waar je hem niet nodig hebt

nja die div wordt ook niet geladen bij andere pags dan de frontpage, was ik er even vergeten bij te zetten

daReaper

dinsdag 22 september 2009 @ 22:16

quote:
Op dinsdag 22 september 2009 21:54 schreef Light het volgende:

[..]

Gewoon in je stylesheet zetten dat die div #content 740px breed moet zijn. En bij de frontpage een extra stylesheet laden (na de gewone stylesheet) met daarin de breedte van #frontpage (430px) en #content (310px).

Heb het maar zo opgelost. Hoopte eigenlijk dat er een echte css oplossing zou zijn, maar zo werkt het ook

Roy_T

dinsdag 22 september 2009 @ 23:29

quote:
Op dinsdag 22 september 2009 21:54 schreef Light het volgende:

En bij de frontpage een extra stylesheet laden (na de gewone stylesheet) met daarin de breedte van #frontpage (430px) en #content (310px).

Beetje overkill om daar een extra HTTP-request voor te doen. Dat kan prima in 1 stylesheet.

Light

dinsdag 22 september 2009 @ 23:40

quote:
Op dinsdag 22 september 2009 23:29 schreef Roy_T het volgende:

[..]

Beetje overkill om daar een extra HTTP-request voor te doen. Dat kan prima in 1 stylesheet.

Je kunt in een stylesheet niet iets opnemen als een breedte afhankelijk van of een ander element wel of niet aanwezig is. Dan zou je met een andere naam moeten werken voor de smallere div. En dan kan ook weer andere complicaties hebben waardoor je de stylesheet dan veel groter moet maken. Maar dat ligt ook aan de stylesheet en de verdere opbouw van de site.

Verder in [CSS] voor dummies - deel 13