[CSS] voor dummies #16

woensdag 8 juni 2011 @ 15:57:16 #226

PimD

Nee.

Op je container.

Bleuh.

woensdag 8 juni 2011 @ 17:14:19 #227

Nashje

Yes, tis gelukt! Hartelijk dank!

woensdag 8 juni 2011 @ 22:26:17 #228

Black-Hole

Deep in my soul

Hoe krijg ik het voor elkaar om paragraph text te voorzien van een border ter grootte van de text in een div met een vaste breedte en hoogte?

Als ik ze nu een border-bottom of border-top meegeef dan krijgt de div aan de boven- en onderkant een mooie border in plaats van de text.

woensdag 8 juni 2011 @ 22:31:20 #229

KomtTijd...

quote:
Op woensdag 8 juni 2011 22:26 schreef Black-Hole het volgende:
Hoe krijg ik het voor elkaar om paragraph text te voorzien van een border ter grootte van de text in een div met een vaste breedte en hoogte?

Als ik ze nu een border-bottom of border-top meegeef dan krijgt de div aan de boven- en onderkant een mooie border in plaats van de text.

wutwutwut?

Een paragraph een border ter grootte van de text in een div met vaste breedte en hoogte...

Dus:
- je hebt een paragraph (<p>) met tekst,
- je hebt een div,
- je wilt een border op de paragraph.
- De border komt op de div ipv op de paragraph.

Snap ik het zo goed?
Zo ja kom eens met een voorbeeld. En zo nee eigenlijk ook.

zcflevo.nl

woensdag 8 juni 2011 @ 22:34:45 #230

Black-Hole

Deep in my soul

Je snapt hem helemaal, hier een voorbeeld:

1
2
3
4
5
6

<div id="advert2text">

    <p>IK Oude straatjes vol leuke boetiekjes.<br>
        JIJToe aan 'n dagje uit. Datum prikken?</p>

</div>

1
2
3
4
5
6
7

#advert1text{
float: left;
width: 315px;
height: 94px;
margin-bottom: 22px;
background: url('../images/advertbg.jpg') no-repeat;
}

Heb al wat gevonden al werkt het niet helemaal, text-decoration: underline overline.

Edit: nu met CSS van de div. P is verder niet gestyled.

[ Bericht 10% gewijzigd door Black-Hole op 08-06-2011 22:49:15 ]

woensdag 8 juni 2011 @ 22:45:05 #231

KomtTijd...

We zitten in een CSS-topic, wat is de bijbehorende CSS-code?

zcflevo.nl

woensdag 8 juni 2011 @ 22:55:08 #232

Tegan

Wat is er mis met underline & overline dan?

woensdag 8 juni 2011 @ 23:02:06 #233

Black-Hole

Deep in my soul

quote:
Op woensdag 8 juni 2011 22:55 schreef Tegan het volgende:
Wat is er mis met underline & overline dan?

Er mag nog wat padding rondom te tekst nodig, stylen met line-height heeft helaas geen effect. Weet niet of dat effect heeft op een border-top/bottom eigenlijk...

woensdag 8 juni 2011 @ 23:04:24 #234

Tegan

Geef eens wat je probeerde met line-height?

woensdag 8 juni 2011 @ 23:07:42 #235

Black-Hole

Deep in my soul

1
2
3
4
5

#advert1text p{
padding: 18px 0px 0px 10px;
line-height: 30px;
text-decoration: underline overline;
}

woensdag 8 juni 2011 @ 23:08:38 #236

Tegan

1	line-height:200%;

woensdag 8 juni 2011 @ 23:11:00 #237

Black-Hole

Deep in my soul

quote:
Op woensdag 8 juni 2011 23:08 schreef Tegan het volgende:

[ code verwijderd ]

Helaas, geen effect. Kan het heel simpel oplossen met een plaatje maar daar heb ik geen zin in eigenlijk.

woensdag 8 juni 2011 @ 23:23:50 #238

KomtTijd...

Eerder: wat is er mis met simpelweg border-top en border-bottom op je p-element?

zcflevo.nl

woensdag 8 juni 2011 @ 23:27:08 #239

Tegan

Hij wil het toch op de tekst (iedere regel) en niet om de hele container (p of div) toch? Zo begrijp ik het iig...

woensdag 8 juni 2011 @ 23:30:42 #240

Black-Hole

Deep in my soul

quote:
Op woensdag 8 juni 2011 23:23 schreef KomtTijd... het volgende:
Eerder: wat is er mis met simpelweg border-top en border-bottom op je p-element?

Dan krijg ik dus een border rondom de div...en niet de p-text.

woensdag 8 juni 2011 @ 23:37:28 #241

n8n

Pragmatisch

p {display:inline; border-top: ~; border-bottom: ~;}

“Specialization is for insects”.—Robert Heinlein

donderdag 9 juni 2011 @ 00:04:12 #242

KomtTijd...

quote:
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

Mirel

Mirel wil een bongophone.

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

Mirel

Mirel wil een bongophone.

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

F4T4L_3RR0R

R.I.P. webicon ;(

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...

vrijdag 10 juni 2011 @ 17:18:27 #246

PimD

Nee.

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).

Bleuh.

vrijdag 10 juni 2011 @ 17:20:00 #247

F4T4L_3RR0R

R.I.P. webicon ;(

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

Tazar_Yoot

Je moet wat.

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