[CSS] voor dummies #14

zondag 20 juni 2010 @ 22:08:48 #241

KomtTijd...

of deze: http://w3schools.com/css/css_reference.asp

zcflevo.nl

vrijdag 2 juli 2010 @ 15:01:34 #242

Black-Hole

Deep in my soul

Het lukt me maar niet om een formulier mooi op te maken in IE en FF terwijl de styling in Chrome en Safari het wel prima doet..... Wat er niet gebeurd in IE en FF is dat de input velden mooi uitgelijnd onder elkaar staan. Ze blijven zeg maar plakken achter de tekst die ervoor staat. Wie kan mij helpen?

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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

<div id="form">
<form name="contactform" method="post" action="send_form_email.php">
<fieldset>
<legend><p>Contact gegevens</p></legend>
<ol>
<li>
  <label for="first_name"><p>Naam *</label>
  <input  type="text" name="first_name" size="35">
</li>
<li>
  <label for="last_name"><p>Bedrijf</label>
  <input  type="text" name="last_name" size="35">
</li>
<li>
  <label for="email"><p>E-mailadres *</label>
  <input  type="text" name="email" size="35">
</li>
<li>
  <label for="telephone"><p>Telefoon</label>
  <input  type="text" name="telephone" size="35">
  </li>
</ol>
</fieldset>

<fieldset>
<legend><p>Aanvraag diensten</p></legend>
<ol>
<li>
<label for="dienst"><p>Gewenste dienst</label>
  <select name="dienst" name="dienst">
   <option>Nieuwe website</option>
   <option>Redesign bestaande website</option>
   <option>Anders, namelijk</option>
   </select>
</li>

<li>
<label for="markt"><p>Markt</label>
  <select name="markt" name="markt">
   <option>MKB</option>
   <option>Non-profit</option>
   <option>Particulier</option>
   </select>
</li>

<li>
  <label for="comments"><p>Bericht *</label>

  <textarea  name="comments" ></textarea>
</li>
</ol>

</fieldset>
  <input type="submit" value="Verstuur">

</form>
</div>

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

fieldset li {
padding: 5px;
display: inline;
}

form label {
float: left;
width: 10em;
margin-right: 1em;
}

fieldset li {
float: left;
clear: left;
width: 100%;
padding-bottom: 1em;
}

fieldset{
float: left;
clear: both;
width: 100%;
margin: 0 0 -1em 0;
padding: 0 0 1em 0;
}

form fieldset {
  border: 1px solid #1f6097;
  padding: 5px;
  margin: 10px;
}

textarea{
width: 250px;
height: 150px;
}

vrijdag 2 juli 2010 @ 15:11:10 #243

PimD

Nee.

Je kunt proberen het label een display:block te geven. Een label is normaal gesproken als ik me niet heel erg vergis een inline element, het geven van een width daaraan heeft geen zin tenzij je 'm als block-level element wil tonen.

Wel vreemd dat ie het volgens jou in Safari en Chrome wel doet, dat zou niet moeten kunnen volgens mij...

Nee.

vrijdag 2 juli 2010 @ 15:16:14 #244

Black-Hole

Deep in my soul

quote:
Op vrijdag 2 juli 2010 15:11 schreef PimD het volgende:
Je kunt proberen het label een display:block te geven. Een label is normaal gesproken als ik me niet heel erg vergis een inline element, het geven van een width daaraan heeft geen zin tenzij je 'm als block-level element wil tonen.

Wel vreemd dat ie het volgens jou in Safari en Chrome wel doet, dat zou niet moeten kunnen volgens mij...

Dat maakt geen verschil helaas. Het verschil is er echt, je kan de pagina in werking zien op www.nionwebdesign.com/dev/offerte.html

vrijdag 2 juli 2010 @ 15:25:05 #245

PimD

Nee.

Ja gast, vind je het gek als je

1	<label><p>Markt</label>

doet ipv

1	<label>Markt</label>

Je mist de </p> tag en hebt een block-level (p) element in een inline element (label) staan, wat de browser probeert op te lossen, door er

1	<label></label><p>Markt

van te maken.

Als je nette HTML doet en een label een display:block geeft werkt het prima.

Nee.

vrijdag 2 juli 2010 @ 21:20:24 #246

Black-Hole

Deep in my soul

Dat was het inderdaad, nu werkt het perfect!

vrijdag 2 juli 2010 @ 22:39:07 #247

Mirel

Mirel wil een bongophone.

Vanwege dit soort foutjes vind ik dat mensen met Notepad++ moeten werken en niet iets zoals Dreamweaver. Notepad gaat veel beter om met begin en eindtags door ze te kleuren, strepen tussen elkaar te trekken, en het begin en eind highlighten als je erop klikt.

Dreamweaver doet wel iets met kleur maar met veel minder variatie.

When all else fails, you always have delusion.

vrijdag 2 juli 2010 @ 22:41:24 #248

lkb9000

quote:
Op vrijdag 2 juli 2010 22:39 schreef Mirel het volgende:
Vanwege dit soort foutjes vind ik dat mensen met Notepad++ moeten werken en niet iets zoals Dreamweaver. Notepad gaat veel beter om met begin en eindtags door ze te kleuren, strepen tussen elkaar te trekken, en het begin en eind highlighten als je erop klikt.

Dreamweaver doet wel iets met kleur maar met veel minder variatie.

Ik denk dat ik ook maar ga overstappen naar Notepad++.
Ik heb altijd wel een klein beetje gebruik gemaakt van de GUI van Dreamweaver maar bij m'n laatste website betrapte ik mezelf erop 100% alleen met de code bezig te zijn, dus het is wel tijd voor een overstap

vrijdag 2 juli 2010 @ 22:49:47 #249

Black-Hole

Deep in my soul

quote:
Op vrijdag 2 juli 2010 22:39 schreef Mirel het volgende:
Vanwege dit soort foutjes vind ik dat mensen met Notepad++ moeten werken en niet iets zoals Dreamweaver. Notepad gaat veel beter om met begin en eindtags door ze te kleuren, strepen tussen elkaar te trekken, en het begin en eind highlighten als je erop klikt.

Dreamweaver doet wel iets met kleur maar met veel minder variatie.

Zelf gebruik ik Coda (en had de code nog niet laten valideren)

vrijdag 2 juli 2010 @ 23:54:01 #250

Mirel

Mirel wil een bongophone.

edit

When all else fails, you always have delusion.

dinsdag 6 juli 2010 @ 13:54:05 #251

wobbel

Da WoBBeL King

Ik denk dat deze in CSS hoort

Hieronder een gedeelte van mijn layout:

Nu dient het volgende probleem zich aan, zodra ik de pagina oproep met een anchor #specificaties oid dan verspringt de hele boel in Firefox en IE8...

Dat gaat dus niet goed...bekend probleem?

Voorbeeld kun je hier vinden: http://v3.progenion.nl/sh(...)iltert-tot-25m2.html
Als je klikt op specificaties zie je het in IE8 en FF3 gebeuren.

Hosted VoIP SIP trunks Vast mobiel VoIP

dinsdag 6 juli 2010 @ 14:13:31 #252

Light

In progenion.css staat:

1	<!-- slide menu -->

Da's geen correcte css comment, dus een verbeterpunt.

En je html lijkt ook niet helemaal in orde te zijn. Er gaat iets mis met de nesting van de tags en/of er ontbreken sluit-tags. Best kans dat je daarmee het probleem al kunt oplossen.

fokstok.nl

zaterdag 17 juli 2010 @ 23:26:50 #253

Sabyo

hallooo!
ik heb een website gemaakt en ben al heel lang bezig om hem gecentreerd te krijgen, maar wat ik ook probeer het lukt niet en ik kan de fout niet ontdekken... Ik hoopte dat er hier iemand is die mij kan helpen om hem gewoon gecentreerd te krijgen. Bij voorbaat dank _O_

De 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
40
41
42
43
44
45
46
47
48

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>HorseVisual.nl Paardenfotografie & Foto-art</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="opmaak2.css" rel="stylesheet" type="text/css">
<meta name="description" content="Website Horsevisual.nl" />
</head>

<body>


<img src="boven.png">


<div class="menu">
<ul id="navbar">
  <li class="topitem"><a href="index.htm" class="active">HOME</a></li>
<li class="topitem"><a href="nieuws.htm" class="menuitems">NIEUWS</a></li>
<li class="topitem"><a href="biografie.htm" class="menuitems">BIOGRAFIE</a></li>
<li class="topitem"><a href="partners.htm" class="menuitems">PARTNERS</a></li>
<li class="topitem"><a href="agenda.htm" class="menuitems">AGENDA</a></li>

  <li class="topitem"><a href="referenties.htm" class="menuitems">REFERENTIES</a></li>
<li class="topitem"><a href="contact.htm" class="menuitems">CONTACT</a></li>

</ul>
</div>


<div class="hoofd"><div class="hoofdtekst"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.

Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hendrerit fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia.

Nam pretium turpis et arcu. Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Sed aliquam ultrices mauris. Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Praes Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.

Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hendrerit fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia.

Nam pretium turpis et arcu. Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Sed aliquam ultrices mauris. Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Praes</div> </div>


<div class="footer"><img src="onder.png">

</div>

</div>
</body></html>

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

@charset "utf-8";
/* CSS Document */

body {
   margin:0px;
   background-color:#666;
   background-image:url(background.jpg);
   color: white;
   font-family: Verdana, Geneva, sans-serif;
   font-size: 11px;

}

.hoofd
{

   background:url(midden.png) repeat-y;
   margin-right: 0px;
   min-height: 700px;
   color:#FFF;
}

.hoofdtekst
{
   margin-right: 0px;
   color:#FFF;
   font-family:Tahoma, Geneva, sans-serif;
   margin-left: 115px;
   width: 770px;
   padding-top: 30px;
}

   .menu {
   position: absolute;
   top: 138px;
   left: 111px;
   width: 818px;
   font-weight: normal;
   height: 31px;
   }


/* menu */
.menuitems {
   color: #FFF;
   text-decoration: none;
}


.unnamed1 {
   text-decoration: underline;
}

body{
  padding: 0;
  margin: 0;
}

/* style unordered list */

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

/* style menu items */

li.topitem{
   float: left;
   position: relative;
   width: 86px;
   padding: 15px;
   font:10px Verdana, Arial, Helvetica, sans-serif;
   color:#FFF;
   font-weight: 300;
}

li > ul{
  top: auto;
  left: auto;
}

li a:hover {
  color: #999999;
}

/* display drop-down menu (add an 'over' class attribute to list items for IE */

li:hover ul,li.over ul{
  display: block;
}

#navbar li li a {
  font: normal 13px Verdana, Arial, Helvetica, sans-serif;
  color: #010E1E;
  padding: 2px;
  text-decoration: none;
}

#nav li:hover ul, #nav li.over ul { /* lists nested under hovered list items */
   display: block;
}

#navbar li li a:hover {
  color:#999999;
}

.active {
   COLOR: #999999;
   text-decoration: none;
}

zaterdag 17 juli 2010 @ 23:33:39 #254

KomtTijd...

quote:
Op zaterdag 17 juli 2010 23:26 schreef Sabyo het volgende:
hallooo!
ik heb een website gemaakt en ben al heel lang bezig om hem gecentreerd te krijgen, maar wat ik ook probeer het lukt niet en ik kan de fout niet ontdekken... Ik hoopte dat er hier iemand is die mij kan helpen om hem gewoon gecentreerd te krijgen. Bij voorbaat dank

De html;
[ code verwijderd ]

De css;
[ code verwijderd ]

www.w3schools.com
Ga eerst eens proberen te begrijpen wat je in hemelsnaam aan het doen bent.

Ik kan je het antwoord wel geven, maar ik denk eerlijk gezegd niet dat het je dan wel lukt:

1	margin: 0 auto;

zcflevo.nl

zaterdag 17 juli 2010 @ 23:34:03 #255

PimD

Nee.

Als je nou gewoon die boel even ergen online zet zodat ik er naar kan kijken.... Volgens mij moet je er gewoon een container omheen gooien met een width en een margin:0 auto; en klaar ben je...

Nee.

zondag 18 juli 2010 @ 00:27:48 #256

Mirel

Mirel wil een bongophone.

Maak een div om alle divs heen. Geef die div margin 0 auto. Zo'n allesomvattende div noem je een container.

When all else fails, you always have delusion.

zaterdag 24 juli 2010 @ 00:36:12 #257

Puala

Mijn main-div komt +- 10-20 px onder mijn browserbalk te staan (zie frontpage.girlzfora.nl) en ik wil dat niet. Hij moet gelijk helemaal vanaf boven perfect aansluiten

weet iemand welk regeltje ik in mijn div moet invoegen om dat voor elkaar te krijgen?

zaterdag 24 juli 2010 @ 00:37:31 #258

KomtTijd...

overflow:hidden

Dan collapst'ie met de margin van je H1 (of ander element met default margin)

zcflevo.nl

zaterdag 24 juli 2010 @ 00:41:08 #259

Puala

Het stukje is al wel verkleind maar nog niet helemaal weg?

zaterdag 24 juli 2010 @ 00:44:50 #260

Light

1
2
3
4

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

Of bedoel je die niet?

fokstok.nl

zaterdag 24 juli 2010 @ 00:54:52 #261

Puala

1
2
3
4
5
6
7
8

#main
{
overflow: hidden;
margin: 0px auto;
height: 1500px;
width: 1000px;
background-color: #fddada;
}

Dit is mijn div.

zaterdag 24 juli 2010 @ 01:12:17 #262

KomtTijd...

't gaat vooral om wat er omheen staat.
Heb je geen linkje naar een online voorbeeld/testcase?

zcflevo.nl

zaterdag 24 juli 2010 @ 01:17:32 #263

Puala

quote:
Op zaterdag 24 juli 2010 01:12 schreef KomtTijd... het volgende:
't gaat vooral om wat er omheen staat.
Heb je geen linkje naar een online voorbeeld/testcase?

frontpage.girlzfora.nl/

zaterdag 24 juli 2010 @ 01:17:59 #264

Light

quote:
Op zaterdag 24 juli 2010 00:54 schreef Puala het volgende:

[ code verwijderd ]

Dit is mijn div.

html en body krijgen standaard een margin en/of padding mee, dat zie je terug in de pagina's

fokstok.nl

zaterdag 24 juli 2010 @ 01:19:10 #265

KomtTijd...

Gaat het om dat roze balkje?

overflow:hidden op je #header.

zcflevo.nl

zaterdag 24 juli 2010 @ 01:20:34 #266

KomtTijd...

Waarom staan er in hemelsnaam twee stylesheet in de body

zcflevo.nl

zaterdag 24 juli 2010 @ 01:28:04 #267

Light

quote:
Op zaterdag 24 juli 2010 01:20 schreef KomtTijd... het volgende:
Waarom staan er in hemelsnaam twee stylesheet in de body

Hmm... ik zie er nog veel meer....
Er wordt ook iedere keer dezelfde stylesheet ingeladen, lijkt het. Niet echt nuttig.

fokstok.nl

zaterdag 24 juli 2010 @ 01:39:18 #268

Puala

oh shitjes, die staan er nog in. Ga zo eventjes aanpassen en dan slapen

zaterdag 24 juli 2010 @ 13:12:14 #269

InTrePidIvity

Looks like it's broken...

1	<input name="add-to-cart-button" class="add-to-cart-button" type="submit" onclick="setLocation('<?php echo $this->getAddToCartUrl($_product) ?>')">

1
2
3
4
5
6
7
8
9
10

input.add-to-cart-button {
    width:115px;
    height:35px;
    background: transparant url(../images/button_add_to_cart.png) no-repeat;
    outline:none;
    border:none;
    }
input.add-to-cart-button:hover {
    background:transparant url(../images/button_add_to_cart.png) no-repeat 0 -37px;
    }

Waarom lukt dit me niet?

Ik krijg gewoon een standaard 'Verzenden'-button, terwijl ik dus dat PNG-bestand wil gebruiken. Er gaat vast iets fout bij de HTML, maar ik snap er weinig van

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

zaterdag 24 juli 2010 @ 13:56:30 #270

shinydiscoball

Ik wil graag reacties toevoegen aan mijn blog maar weet niet precies waar. Ik heb deze code (weet ook niet of die juist is, ergens vandaan geplukt):

1

En dat moet waarschijnlijk hier ergens tussen:

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

Maar waar weet ik niet precies, het werkt iig niet. Weet iemand dat?

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

» digital corner

» development

» digital corner

» development