[CSS] voor dummies #16

Index

» digital corner

» development

actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
  woensdag 8 juni 2011 @ 23:37:28 #241
230788 n8n
Pragmatisch
pi_97917548
p {display:inline; border-top: ~; border-bottom: ~;}
“Specialization is for insects”.—Robert Heinlein
pi_97919303
quote:
0s.gif Op woensdag 8 juni 2011 23:30 schreef Black-Hole het volgende:

[..]

Dan krijg ik dus een border rondom de div...en niet de p-text.
Dan is de vraag: "waarom gaat die boder rondom de div staan?"
en niet: "watvoor hack ga ik gebruiken zodat ik bovenstaande vraag niet hoef te beantwoorden?"
zcflevo.nl
  donderdag 9 juni 2011 @ 16:56:43 #243
87680 Mirel
Mirel wil een bongophone.
pi_97943574
Het n8n, het is uiteindelijk gelukt met m'n css. Uiteindelijk had ik dat float gedoe niet eens hoeven te doen omdat Wordpress posts zelf rangschikt: www.mirelmasic.nl De nieuwste staat dus helemaal links :)

Ik heb wel een probleempje: In Firefox en IE staat alles naar beneden zoals het moet, maar in Opera niet. Opera is mijn standaard browser en het zou handig zijn als ik het daar ook goed kan krijgen :)

edit: ineens is na een update alles naar de klote. Heb nog een backupje: http://1577359.huweb.nl

[ Bericht 6% gewijzigd door Mirel op 09-06-2011 17:01:45 ]
When all else fails, you always have delusion.
  donderdag 9 juni 2011 @ 16:59:26 #244
87680 Mirel
Mirel wil een bongophone.
pi_97943715
OK wtf, mijn hele layout is weg. :') Ik heb wel toevallig Wordpress net nog geupdate. Het vreemde is dat dit bij een klasgenoot vandaag ook gebeurd is. Hmm.

Edit: ineens weer terug.
When all else fails, you always have delusion.
  vrijdag 10 juni 2011 @ 17:17:31 #245
110933 F4T4L_3RR0R
R.I.P. webicon ;(
pi_97988253
Wat is de netste of correcte methode?

1: style achter scr, met ;
1<a href="www.bla.bla"><img src="plaatje.jpg" width="468" height="60" alt="" title="" style="border: 1px solid #000000;" /></a>

2: style achter scr, zonder ;
1<a href="www.bla.bla"><img src="plaatje.jpg" width="468" height="60" alt="" title="" style="border: 1px solid #000000" /></a>

3: style voor scr, met ;
1<a href="www.bla.bla"><img style="border: 1px solid #000000;" src="plaatje.jpg" width="468" height="60" alt="" title="" /></a>

4: style voor scr, zonder ;
1<a href="www.bla.bla"><img style="border: 1px solid #000000" src="plaatje.jpg" width="468" height="60" alt="" title="" /></a>
Een ballonvaarder die door de mand valt is nooit grappig...
pi_97988308
Het is allemaal om te huilen.

CSS hoort in een aparte stylesheet te staan. De enige reden waar ik inline CSS voor gebruik is voor bijv. dynamische achtergronden uit een CMS o.i.d. en eventueel via Javascript dingen aanpassen (hoewel ik dat indien het mogelijk is liever doe met het toevoegen van een class).
Nee.
  vrijdag 10 juni 2011 @ 17:20:00 #247
110933 F4T4L_3RR0R
R.I.P. webicon ;(
pi_97988379
Verklaar u nader.

Edit: je hebt je bericht al ge-edit met verklaring.
Een ballonvaarder die door de mand valt is nooit grappig...
  zaterdag 11 juni 2011 @ 00:56:03 #248
270782 Tazar_Yoot
Je moet wat.
pi_98011563
Vraagje, ik snap het niet meer.
ben sinds een kleine maand bezig met wat html5, css. Alleen ik snap niet waarom het volgende gebeurd: (getest in safari en chrome)

Het 'vlaggetje' moet gecentreerd op die grijze balk bovenaan.
Die 2 knoppen moeten gewoon netjes worden uitgelijnd op die grijze balk:
HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39		<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Area 007</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>

<div id="container">
    
    <div id="navigation">
    <img class="banner" src="../../../../../Desktop/flag.png" width="60" height="80" alt="banner">
<nav>
         <ul>
            <li><img src="img/bttn/spacer.gif">
            <li class="home"><a href="http://google.com"><img src="img/bttn/portfolio.jpg" width="150" height="50" alt="portfolio"></a>
            <li><img src="img/bttn/spacer.gif">
      <li class="portfolio"><a href="http://google.com"><img src="img/bttn/about.jpg" width="150" height="50" alt="about"></a>
            <li><img src="img/bttn/spacer.gif">
    </ul>
        </nav>
    </div>
    <div id="content">
    <header>
    <h1> Header Tekst </h1>
    </header>
  <section id="portfolio">
        <article> <h2> Article one. </h2> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pretium ipsum vitae tellus sollicitudin cursus. Proin ac odio nec quam auctor placerat vel et risus. Vestibulum quis sem vel neque venenatis tincidunt malesuada sed leo. Etiam quis eros vel orci euismod fermentum. Donec eu dignissim est. 
</article>
    </section>
    </div>
</div>

</nav>

</body>
</html>

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
74
75
76
77
78
79
80
81
82
83		@charset "UTF-8";
/* CSS Document */

body{
    background-image: url(img/bg.gif);
    margin:auto;
    font-family:Arial, Helvetica, sans-serif;
    margin:0px;
    padding:0px;
}

#container{
    width:800px;
    height:500px;
    background-color:#FFFFFF;
    margin-left:auto;
    margin-right:auto;
    margin-top:60px;

        -moz-box-shadow: 0 0 100px #888;
        -webkit-box-shadow: 0 0 100px#888;
        box-shadow: 0 0 100px #888;
}

#navigation{
    padding-top:150px;
    float:left;
    width:150px;
    background-color:#999999;
    background-image:url(img/navbg.png);
    background-repeat:repeat-y;
    height:350px;
    
    -webkit-box-shadow: inset -5px -0px 5px #000000;
    -moz-box-shadow: inset -5px -0px 5px #000000;
    box-shadow: inset -5px -0px 5px #000000;
    }

section {
padding:30px;

}
#content{
    float:left;
    width:650px;
    
}

header {
    background-color:#FFFFFF;
    padding:10px 0px 0px 30px;
}

nav{
    padding:0px;
    margin:0px;
    float:left;
}

a {
    color:#7f7f7f;
    text-decoration:none;
    }

a:hover 
{
    color:#494949;
    text-decoration:none;
}

ul 
{
    list-style-type:none;
    float:left;
}

li 
{
} 

.banner{
padding:10px 5px 200px 50x;
}

Wie snapt hem ;) ?

(Sorry voor de rommelige code. en wie ziet van welke Mac App deze layout komt ;)?)

[ Bericht 0% gewijzigd door Tazar_Yoot op 11-06-2011 01:13:40 ]
  zaterdag 11 juni 2011 @ 09:48:40 #249
87680 Mirel
Mirel wil een bongophone.
pi_98016953
Probeer het vlaggetje in een div te zetten ipv een img src tag. Die houden zich niet altijd aan de regels. Die div margin 0 auto geven.

When all else fails, you always have delusion.
  zaterdag 11 juni 2011 @ 09:49:10 #250
87680 Mirel
Mirel wil een bongophone.
pi_98016959
3 divs in de sidebar dus
When all else fails, you always have delusion.
  zondag 12 juni 2011 @ 16:20:52 #251
230788 n8n
Pragmatisch
pi_98067975
quote:
0s.gif Op donderdag 9 juni 2011 16:56 schreef Mirel het volgende:
Het n8n, het is uiteindelijk gelukt met m'n css.
nice

jammer dat dit niet kan ;(

1
2
3
4
5		body header:hover { 
    body {
        color: red;
    }
}
“Specialization is for insects”.—Robert Heinlein
pi_98069374
Met een tool als LESS kun je dat soort CSS wel schrijven. Ik heb het een tijdje op kantoor gebruikt, maar ben er toch van terug gekomen. Ja, het maakt de code die je schrijft wat compacter enzo, maar toch liep ik iedere keer tegen problemen aan met bijv. CSS3-properties en dingen die niet juist werden gemerged/geminified.
Nee.
  zondag 12 juni 2011 @ 16:56:48 #253
230788 n8n
Pragmatisch
pi_98069437
quote:
0s.gif Op zondag 12 juni 2011 16:55 schreef PimD het volgende:
Met een tool als LESS kun je dat soort CSS wel schrijven. Ik heb het een tijdje op kantoor gebruikt, maar ben er toch van terug gekomen. Ja, het maakt de code die je schrijft wat compacter enzo, maar toch liep ik iedere keer tegen problemen aan met bijv. CSS3-properties en dingen die niet juist werden gemerged/geminified.
is dat javascript? ik bedoel dat je effect uitoefent op een bovenliggend element door een binnengesloten element te gebruiken
“Specialization is for insects”.—Robert Heinlein
  zondag 12 juni 2011 @ 17:02:25 #254
87680 Mirel
Mirel wil een bongophone.
pi_98069683
quote:
7s.gif Op zondag 12 juni 2011 16:20 schreef n8n het volgende:

[..]

nice

jammer dat dit niet kan ;(
[ code verwijderd ]

Waarom zou ik dat doen :P Of was het het 2e onderwerp in je post afzonderlijk van de nice gericht naar mij? :P
When all else fails, you always have delusion.
pi_98069727
De nieuwe versie van LESS is wel Javascript-based ja, maar een oudere versie (die ik gebruikte) maakt gewoon op je systeem van een .less-file een .css-file.

1
2
3
4
5
6		body {
color:red;
 div {
color:blue;
}
}

werd dus

1
2		body { color:red; }
body div { color:blue; }
Nee.
pi_98069817
Oh nee wacht, ik zie nu pas wat je wilt bereiken. Dat kan inderdaad niet, en daar heb je inderdaad Javascript voor nodig.
Nee.
  maandag 13 juni 2011 @ 10:59:15 #257
270782 Tazar_Yoot
Je moet wat.
pi_98103844
quote:
0s.gif Op zaterdag 11 juni 2011 09:48 schreef Mirel het volgende:
Probeer het vlaggetje in een div te zetten ipv een img src tag. Die houden zich niet altijd aan de regels. Die div margin 0 auto geven.

[ afbeelding ]
Ik heb hem nu in een losse div staan. Ik krijg het alleen nog niet voor elkaar om hem helemaal bovenaan te krijgen in die navigation div.
  maandag 13 juni 2011 @ 11:00:38 #258
87680 Mirel
Mirel wil een bongophone.
pi_98103880
geef eens linkje
When all else fails, you always have delusion.
  maandag 13 juni 2011 @ 13:23:16 #259
87680 Mirel
Mirel wil een bongophone.
pi_98109017
Is er een manier om een fix te zetten in Google Chrome voor een css probleem? Als je background: 100%; doet dan scrollt Chrome erg langzaam. }:|

http://1586563.huweb.nl/ hier bij body{

De hele site is gedurende het ontwikkelen naar de klote gegaan in verschillende browsers. We hebben besloten om het in Chrome te presenteren maar dat scrollen doet dus erg irritant.
When all else fails, you always have delusion.
pi_98109172
Ik mis sowieso de "This website is best viewed with Google Chrome on a 1200x1024 or larger screen resolution" disclaimer op die website.
zcflevo.nl
  maandag 13 juni 2011 @ 13:47:19 #261
270782 Tazar_Yoot
Je moet wat.
pi_98110090
quote:
0s.gif Op maandag 13 juni 2011 11:00 schreef Mirel het volgende:
geef eens linkje
Hij stond nog nergens online :9
Nu wel.
klik
pi_98110191
quote:
7s.gif Op maandag 13 juni 2011 13:47 schreef Tazar_Yoot het volgende:

[..]

Hij stond nog nergens online :9
Nu wel.
klik
Geef #flag maar een negatieve margin-top, dan werkt het. Hoewel ik dit typisch een voorbeeld vind van iets wat ik absoluut zou positioneren.
Nee.
  maandag 13 juni 2011 @ 13:50:59 #263
270782 Tazar_Yoot
Je moet wat.
pi_98110234
quote:
0s.gif Op maandag 13 juni 2011 13:49 schreef PimD het volgende:

[..]

Geef #flag maar een negatieve margin-top, dan werkt het. Hoewel ik dit typisch een voorbeeld vind van iets wat ik absoluut zou positioneren.
Aangezien ik het liever gelijk goed wil doen dan, hoe positioneer ik hem absoluut :@ ?

edit: met margin-top:-150px; is het gelukt. alleen ben nu benieuwd naar hoe ik hem absoluut zou posioneren (link updated dus).
  maandag 13 juni 2011 @ 13:55:43 #264
87680 Mirel
Mirel wil een bongophone.
pi_98110423
quote:
0s.gif Op maandag 13 juni 2011 13:26 schreef KomtTijd... het volgende:
Ik mis sowieso de "This website is best viewed with Google Chrome on a 1200x1024 or larger screen resolution" disclaimer op die website.
Koop maar een groot scherm :6
When all else fails, you always have delusion.
  maandag 13 juni 2011 @ 13:58:51 #265
270782 Tazar_Yoot
Je moet wat.
pi_98110544
Ahh, een nieuw probleem. De shadow functie in css werkt dus niet op afbeeldingen. Nu kan ik die shadow handmatig toevoegen in photoshop. Of kan ik het ook op een of andere manier zo doen dat hij de shadow wel op de buttons werkt?

linkje
  maandag 13 juni 2011 @ 14:01:31 #266
87680 Mirel
Mirel wil een bongophone.
pi_98110644
shadows op een div (of een div eronder), en niet op het plaatje zelf?
When all else fails, you always have delusion.
  maandag 13 juni 2011 @ 14:06:28 #267
270782 Tazar_Yoot
Je moet wat.
pi_98110846
quote:
0s.gif Op maandag 13 juni 2011 14:01 schreef Mirel het volgende:
shadows op een div (of een div eronder), en niet op het plaatje zelf?
Hoe gooi ik er een div op? Ik ben nog niet zo heel ver kwa kennis van html/css eh :@
pi_98111051
Maar wel al met HTML5 aan de slag gaan :')
Nee.
  maandag 13 juni 2011 @ 14:48:22 #269
270782 Tazar_Yoot
Je moet wat.
pi_98112403
quote:
0s.gif Op maandag 13 juni 2011 14:10 schreef PimD het volgende:
Maar wel al met HTML5 aan de slag gaan :')
Worked out pretty neat so far right?
Ik weet wel het een en ander, maar dingen als div's over elkaar? shoot me.
Als ik het zou weten zou ik het niet vragen eh :D ?
so, can you help me?
pi_98112478
Al je content in een <nav> zou ik niet 'pretty neat' noemen.
Nee.
actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
[CSS] voor dummies #16
Index

» digital corner

» development

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