[html, css, js] met font tags :) #28

donderdag 13 september 2012 @ 09:20:43 #176

Catch22-

Ben je Blind?!

Ik zou gewoon een JSON paginaatje opzetten die niet anders doet dan wat JSON uitpoepen nav een request, dat is met javascript goed te parsen

Heel veel groetjes, Catch22
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?

woensdag 19 september 2012 @ 11:21:25 #177

InTrePidIvity

Looks like it's broken...

Ik wil graag dat de navigatielinks over de volledige hoogte van de header van kleur veranderen (en datzelfde gebied moet dus ook actief zijn als hover), maar hoe zet ik dat in CSS? Geef ik die eigenschap mee aan de ul, li of a? En hoe doe ik dat?

...it's rielie broken... It's rielie, rielie broken... Let's go wecycle!
[Tournament] Beste Remake

woensdag 19 september 2012 @ 12:35:25 #178

Catch22-

Ben je Blind?!

li:hover

en dan de Li de volledige hoogte geven, de A centreren met een padding of een line-height(hack)

Heel veel groetjes, Catch22
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?

woensdag 19 september 2012 @ 17:27:22 #179

McCandless

I'm supertramp

Ik kom net een site tegen waarin alle pagina's eindigen op .whtml. Weet iemand wat dat inhoudt?

woensdag 19 september 2012 @ 17:30:58 #180

Catch22-

Ben je Blind?!

.whtml : If you would like to have a uniform set of web pages having a consistent look, then you can create wrappers around your html web page. This way you ensure that all your html web pages have the same scheme. The ME web page is an example of the use of wrappers (https://www.purdue.edu/ME)

maar waarschijnlijk niets. Je kan in principe elke extensie gebruiken.

Heel veel groetjes, Catch22
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?

woensdag 19 september 2012 @ 17:53:14 #181

PimD

Nee.

quote:
Op woensdag 19 september 2012 12:35 schreef Catch22- het volgende:
li:hover

Tuurlijk niet, dat werkt alleen met muis. Met andere vormen van navigatie (toetsenbord, touch) heb je dan geen hover-state meer. Gewoon op de a:href dus.

Bleuh.

woensdag 19 september 2012 @ 20:28:57 #182

Catch22-

Ben je Blind?!

dan gebruik je li:hover a voor het hovereffect en geef je de li een class voor een actief item.

Of ik snap niet wat hij wil, dat kan ook nog

Heel veel groetjes, Catch22
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?

woensdag 19 september 2012 @ 21:00:22 #183

PimD

Nee.

Dan nog heb je alleen een :hover effect op de parent. Dat gaat dus niet af met keyboardnavigatie e.d. Als je een hover-state hebt moet je m.i. ook op z'n minst een :focus state hebben. En eigenlijk gewoon een :focus, :hover, :active, :visited state natuurlijk.

Bleuh.

donderdag 20 september 2012 @ 12:55:15 #184

KomtTijd...

quote:
Op woensdag 19 september 2012 12:35 schreef Catch22- het volgende:
li:hover

en dan de Li de volledige hoogte geven, de A centreren met een padding of een line-height(hack)

Sowieso line-height gebruiken, anders krijg je glitches met verschillende fontrenderings of ontbrekende fonts.

zcflevo.nl

donderdag 20 september 2012 @ 13:20:12 #185

InTrePidIvity

Looks like it's broken...

Het werkt wel (in Chrome, heb nog geen andere dingen getest), maar ik heb zo'n vermoeden dat het qua CSS allemaal erg lelijk is

De rode pijl geeft weer waar de muis zich bevindt, het is de bedoeling dat dus de hele hoogte van het element klikbaar is.

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

.top-menu ul {
    height: inherit;
    margin-left: 8px;
}

.top-menu li {
    display: inline;
    list-style-type:none;
    padding: 10px 0 95px;
    -webkit-border-bottom-right-radius:.6em;
       -moz-border-bottom-right-radius:.6em;
    border-bottom-right-radius:.6em;
}

.top-menu li:hover {
    background-color: #fff;
    color: #223053;
}

.top-menu li a {
    font-weight: bold;
    font-size:15px;
    color: #fff;
    padding: 0 8px 95px;
}

.top-menu > li:first-child > a {
    border-left:none;
}

.top-menu li a:hover {
    color: #223053;

}

...it's rielie broken... It's rielie, rielie broken... Let's go wecycle!
[Tournament] Beste Remake

vrijdag 21 september 2012 @ 14:50:06 #186

Schnitzels

Met curry

Jongens, zouden jullie eens willen kijken of de live stream het bij jullie doet?
In chrome doet hij het wel, bij mijn zusje niet, en bij mij op Firefox ook niet.

SPOILER
Om spoilers te kunnen lezen moet je zijn ingelogd. Je moet je daarvoor eerst gratis Registreren. Ook kun je spoilers niet lezen als je een ban hebt.

Ik weet dat hij te breed is, maar dat is voor latere zorg.

Hmm ik zie eigenlijk niks vreemds in de scriptcode, heeft iemand enig idee waar het aan kan liggen dat hij het niet consequent doet.

1
2
3
4
5
6
7

- Met zuidelijke groet -

maandag 24 september 2012 @ 10:42:19 #187

-J-D-

Deze CSS-noob is wat aan het klooien met een code.
Op www.popkoor2000.nl/site kan je zien dat ik de 3 modules onderin naast elkaar wil hebben. Ze moeten in totaal net zo breed worden als het stuk erboven.
In index.php staat

1
2
3

In styles.css staat

1

#wrapper2 {margin:0 auto; width:300px ; height:160px; margin-top: 3px; text-shadow: none; position: relative; background-image: url('http://www.heartofstone.co.uk/HOS/UL/sesamed.JPG');border: 2px solid #FFFFFF;border-radius: 7px 7px 7px 7px;box-shadow: 0 0 0 1px rgba(0, 0, 2, 0.1), 0 1px 0 rgba(0, 0, 2, 0.15), 0 1px 1px rgba(0, 0, 2, 0.1);padding: 4px;text-shadow: 0 1px 0 #FDFDFF;}

en ook

1
2
3

.user1 { text-shadow: #fff 0 1px; color: #555; padding: 0px 10px 6px 30px; float: left; width: 250px; margin: 10px;}
.user2,{ text-shadow: #fff 0 1px; color: #555; padding: 0px 10px 6px 30px; float: center; width: 250px; margin: 10px;}
.user3 { text-shadow: #fff 0 1px; color: #555; padding: 0px 10px 6px 30px; float: right; width: 250px; margin: 10px;}

Ik zal vast een domme fout maken, aangezien ik hier weinig van snap. Ik heb al een paar uur gepuzzeld, ook door een % te nemen bij de user123 in de CSS. Helaas werkte dat ook niet.
Kan iemand me vertellen hoe ik die drie modules naast elkaar krijg, met een kleine ruimte er tussen?

I asked God for a bike, but I know God doesn't work that way.
So I stole a bike and asked for forgiveness.

maandag 24 september 2012 @ 10:45:43 #188

donroyco

dus niet Donroyco

Alledrie een float left meegeven.
Daarnaast de komma achter .user2, { verwijderen
<div id="wrapper2" > drie keer kan dus niet, maak daar een class van.

Op maandag 29 september 2008 11:45 schreef HostiMeister het volgende:
Dat is zeg maar de Nederlandse taal op een vuige keukentafel voorover buigen en hem dan zonder glijmiddel anaal verkrachten. :'(

maandag 24 september 2012 @ 10:51:21 #189

-J-D-

Dank je wel voor de reactie.
Ik heb ze alledrie float left gegeven en ook de komma weggehaald.
Dat derde onderdeel snap ik nog, aangezien ik nog geen kaas heb gegeten van class.

Ik zie echter dat de drie modules nu nog niet samen de gehele breedte van het middenstuk vormen. Als ik echter de getallen aanpas bij width van user1 en 2 en 3 wordt het niet breder.
Wat doe ik fout?

I asked God for a bike, but I know God doesn't work that way.
So I stole a bike and asked for forgiveness.

maandag 24 september 2012 @ 10:51:41 #190

boem-dikkie

Jedi Mind Baby!

Inderdaad. Class maken van wrapper 2. Die de stijl meegeven die bij alle drie de divs gelijk is. En vervolgens met .user1/2/3 specifieke stijl geven.

Voor de rest zoals donroyco al zegt, left floaten.

Ik weet niks van Hindoes. Wel van Samoerai en andere dingen.

maandag 24 september 2012 @ 10:56:50 #191

-J-D-

Volgens mij begin ik het te snappen.
Heb van #wrapper2 nu .wrapper2 gemaakt en

1	<div id="wrapper2" class="user1">

veranderd in [code]<div class="wrapper2">.
Heb ik dat zo goed begrepen?
De breedte klopt nog niet, maar misschien kan ik daar met wat gesleutel aan wat waarden verandering in brengen.

I asked God for a bike, but I know God doesn't work that way.
So I stole a bike and asked for forgiveness.

maandag 24 september 2012 @ 10:58:22 #192

KomtTijd...

Je hebt een fixed-width layout, dus je kunt gewoon even uitrekenen/testen hoeveel pixels margin je tussen die blokken moet hebben om ze precies uit te lijnen.

zcflevo.nl

maandag 24 september 2012 @ 11:03:20 #193

boem-dikkie

Jedi Mind Baby!

quote:
Op maandag 24 september 2012 10:56 schreef -J-D- het volgende:
Volgens mij begin ik het te snappen.
Heb van #wrapper2 nu .wrapper2 gemaakt en
[ code verwijderd ]

veranderd in [code]<div class="wrapper2">.
Heb ik dat zo goed begrepen?
De breedte klopt nog niet, maar misschien kan ik daar met wat gesleutel aan wat waarden verandering in brengen.

Je kunt er <div class="wrapper2 user2"> van maken. Dan kun je user 2 nog apart opmaken voor stijlen die je bij de andere divs met wrapper2 niet wil. Bijvoorbeeld je middelste blok, met een margin left en right, om zo ruimte te creëren.

Ik weet niks van Hindoes. Wel van Samoerai en andere dingen.

maandag 24 september 2012 @ 11:11:18 #194

-J-D-

Dank je, KomtTijd en boek-dikkie. Met beide tips ben ik aan de slag.
Heb net wrapperuser1 en 2 en 3 aangemaakt en alleen wrapperuser2 krijgt een margin.
Kom nog niet op de hele breedte uit en als ik het getal iets aanpas, springt het laatste blok naar de volgende regel.
Vind het nog wel raar, want ik heb alledrie de vakken 277 breed gemaakt en de middelste een margin van 3 gegeven.
3x277+3+3 = 837 en dat is minder dan de breedte van dat middenstuk (980 dacht ik).
Ergens maak ik een domme cijferfout.

I asked God for a bike, but I know God doesn't work that way.
So I stole a bike and asked for forgiveness.

maandag 24 september 2012 @ 11:20:59 #195

boem-dikkie

Jedi Mind Baby!

Heb je padding op je divs? Want als je een div van 277 breed hebt, met een padding van 20 px. Is hij dus als het ware 277 + 20 + 20 breed.

Ik weet niks van Hindoes. Wel van Samoerai en andere dingen.

maandag 24 september 2012 @ 11:24:49 #196

-J-D-

1
2
3

1
2
3

.wrapperuser1 {width:287px ; height:160px; margin-top: 3px;  position: relative; background-image: url('http://www.popkoor2000.nl/site/images/sesamed.JPG');border: 2px solid #FFFFFF;border-radius: 7px 7px 7px 7px;box-shadow: 0 0 0 1px rgba(0, 0, 2, 0.1), 0 1px 0 rgba(0, 0, 2, 0.15), 0 1px 1px rgba(0, 0, 2, 0.1);text-shadow: #fff 0 1px; color: #555; padding: 0px 10px 6px 10px; float: left;}
.wrapperuser2 {margin:3px; width:287px ; height:160px; margin-top: 3px;  position: relative; background-image: url('http://www.popkoor2000.nl/site/images/sesamed.JPG');border: 2px solid #FFFFFF;border-radius: 7px 7px 7px 7px;box-shadow: 0 0 0 1px rgba(0, 0, 2, 0.1), 0 1px 0 rgba(0, 0, 2, 0.15), 0 1px 1px rgba(0, 0, 2, 0.1);text-shadow: #fff 0 1px; color: #555; padding: 0px 10px 6px 10px; float: left;}
.wrapperuser3 {width:287px ; height:160px; margin-top: 3px;  position: relative; background-image: url('http://www.popkoor2000.nl/site/images/sesamed.JPG');border: 2px solid #FFFFFF;border-radius: 7px 7px 7px 7px;box-shadow: 0 0 0 1px rgba(0, 0, 2, 0.1), 0 1px 0 rgba(0, 0, 2, 0.15), 0 1px 1px rgba(0, 0, 2, 0.1);text-shadow: #fff 0 1px; color: #555; padding: 0px 10px 6px 10px; float: left;}

In de div zelf staat geen padding maar bij de wrapperuser123 wel, namelijk 2px.

[ Bericht 2% gewijzigd door -J-D- op 24-09-2012 11:31:52 ]

I asked God for a bike, but I know God doesn't work that way.
So I stole a bike and asked for forgiveness.

maandag 24 september 2012 @ 11:31:53 #197

boem-dikkie

Jedi Mind Baby!

Okay als alle blokken dezelfde stijl hebben maar hier en daar een extra padding of margin kun je het zo doen.

1
2
3

Je kunt dan de wrapper2 opmaken zoals voor elk blok gelijk:

1	.wrapper2 { width: 200px; height: 100px; }

En voor specifieke stijlen zoals bijvoorbeeld het middenste blok doormiddel van de user* class.

1	.user2 { margin: 0px 20px 0px 20px; }

Dat is het idee van meerdere classes gebruiken.

Je kunt dus in jouw geval een opmaak maken voor het blok met wrapper2, want die is voor elk blok hetzelfde. En voor het middenste blok, waar dus een margin moet, user2 opmaken.

Ik weet niks van Hindoes. Wel van Samoerai en andere dingen.

maandag 24 september 2012 @ 11:44:05 #198

-J-D-

Volgens mij heb ik nog ergens een verborgen padding staan, want de wrapperuser3 heeft nog een ruimte aan de rechterkant. Het is echter niet de padding: 0px 10px 6px 10px; volgens mij, want dat is de ruimte die de afstand van de inhoud tot de rand van die user3 aangeeft?

Ben nu met Chrome Web Developer aan het klooien om te kijken of ik een getal kan veranderen zodat de rechter ook tot rechts aansluit,.

I asked God for a bike, but I know God doesn't work that way.
So I stole a bike and asked for forgiveness.

maandag 24 september 2012 @ 12:55:03 #199

Catch22-

Ben je Blind?!

dat is nooit goed. Je moet altijd beredeneren waarom het mis gaat, anders schiet je er niets mee op.

Heel veel groetjes, Catch22
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?

maandag 24 september 2012 @ 13:04:18 #200

-J-D-

quote:
Op maandag 24 september 2012 12:55 schreef Catch22- het volgende:
dat is nooit goed. Je moet altijd beredeneren waarom het mis gaat, anders schiet je er niets mee op.

Dat snap ik, maar na een paar uur puzzelen zie je soms de oorzaak niet.

Ik ben al zover dat het niet in de eigenschappen van wrapperuser1, wrapperuser2 en wrapperuser3 zit.
Volgens Web Developer eindigt wrapperuser3 iets links van het einde, dus het gat dat daar zit ligt niet aan een marge van wrapperuser3, lijkt me.
Wat het wel is, is nog een raadsel.

I asked God for a bike, but I know God doesn't work that way.
So I stole a bike and asked for forgiveness.

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

» digital corner

» development

» digital corner

» development