[CSS] voor dummies #14

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?

zaterdag 24 juli 2010 @ 14:05:53 #271

Light

quote:
Op zaterdag 24 juli 2010 13:12 schreef InTrePidIvity het volgende:

[ code verwijderd ]

[ code verwijderd ]

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

Met <input type="submit" maak je een standaard verzenden-button. En dan kun je geen (achtergrond)plaatjes gebruiken.
Met <input type="image"> maak je ook een verzend-button, maar dan kun je wel een plaatje opgeven (en je krijgt geen tekst enzo). Bij een :hover het plaatje veranderen, kan wel eens lastig zijn.

Eigenlijk zijn die input-dingen dus gewoon ondingen.

fokstok.nl

zaterdag 24 juli 2010 @ 14:16:52 #272

InTrePidIvity

Looks like it's broken...

quote:
Op zaterdag 24 juli 2010 14:05 schreef Light het volgende:

[..]

Met <input type="submit" maak je een standaard verzenden-button. En dan kun je geen (achtergrond)plaatjes gebruiken.
Met <input type="image"> maak je ook een verzend-button, maar dan kun je wel een plaatje opgeven (en je krijgt geen tekst enzo). Bij een :hover het plaatje veranderen, kan wel eens lastig zijn.

Eigenlijk zijn die input-dingen dus gewoon ondingen.

Ik heb uiteindelijk 'transparant' weggehaald uit de CSS en value="" toegevoegd aan de HTML, dat werkt ook! Bedankt in elk geval

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

zaterdag 24 juli 2010 @ 14:34:03 #273

Light

quote:
Op zaterdag 24 juli 2010 14:16 schreef InTrePidIvity het volgende:

[..]

Ik heb uiteindelijk 'transparant' weggehaald uit de CSS en value="" toegevoegd aan de HTML, dat werkt ook! Bedankt in elk geval

Ah, volgens mij had ik het op die manier nog niet geprobeerd

fokstok.nl

zaterdag 24 juli 2010 @ 15:00:12 #274

InTrePidIvity

Looks like it's broken...

quote:
Op zaterdag 24 juli 2010 14:34 schreef Light het volgende:

[..]

Ah, volgens mij had ik het op die manier nog niet geprobeerd

Ik snap alleen niet waarom ik geen handje krijg, i.p.v. de normale pointer. Is dat omdat het geen link is maar een submit-eigenschap heeft?

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

zaterdag 24 juli 2010 @ 15:46:48 #275

Light

quote:
Op zaterdag 24 juli 2010 15:00 schreef InTrePidIvity het volgende:

[..]

Ik snap alleen niet waarom ik geen handje krijg, i.p.v. de normale pointer. Is dat omdat het geen link is maar een submit-eigenschap heeft?

Yep, 't is echt iets voor een link. Standaard dan. Met css kan veel

1	cursor: pointer;

fokstok.nl

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

» digital corner

» development

» digital corner

» development