[CSS] voor dummies - deel 12

Index

» digital corner

» development

actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
pi_72246880
quote:
Op donderdag 27 augustus 2009 22:33 schreef raaavi het volgende:
[ afbeelding ]

hier staat dus hoe ik een background img toevoeg.
maar wat nou als ik hem

1. niet herhalend
2. links midden uitgelijnd wil hebben

Hoe moet dat ?
  vrijdag 28 augustus 2009 @ 23:16:22 #277
82814 BBQ-kip
never say no to panda!
pi_72247116
quote:
Op vrijdag 28 augustus 2009 23:09 schreef raaavi het volgende:

[..]


Je "moet" nog even wat foto's neerplempen in je studentenkamer-topic
Kip, het meest veelzijjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjdige stukje kaas, panda!
pi_72247156
quote:
Op vrijdag 28 augustus 2009 23:16 schreef BBQ-kip het volgende:

[..]

Je "moet" nog even wat foto's neerplempen in je studentenkamer-topic
was net me camera aan het aansluiten
  vrijdag 28 augustus 2009 @ 23:18:23 #279
82814 BBQ-kip
never say no to panda!
pi_72247189
quote:
Op vrijdag 28 augustus 2009 23:17 schreef raaavi het volgende:

[..]

was net me camera aan het aansluiten
Ah top
Kip, het meest veelzijjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjdige stukje kaas, panda!
pi_72247377
quote:
Op vrijdag 28 augustus 2009 23:09 schreef raaavi het volgende:

[..]
Het is niet zo moeilijk als het misschien lijkt.

Er staat nu:
1background: url(/wp/wp-content/themes/atahualpa342/images/backgr.gif) repeat top left;


Als je dat verandert in
1background: url(/wp/wp-content/themes/atahualpa342/images/backgr.gif) no-repeat center left;

dan ben je er al. Moet je nog wel zorgen dat je het goede plaatje selecteert natuurlijk.
fokstok.nl
pi_72248178
quote:
Op vrijdag 28 augustus 2009 23:24 schreef Light het volgende:

[..]

Het is niet zo moeilijk als het misschien lijkt.

Er staat nu:
[ code verwijderd ]

Als je dat verandert in
[ code verwijderd ]

dan ben je er al. Moet je nog wel zorgen dat je het goede plaatje selecteert natuurlijk.
Ah geweldig, ik denk dat ik me toch maar moet gaan verdiepen in CSS. altijd handig bij die CMS's als je wilt editen

  FOK!-Schrikkelbaas maandag 31 augustus 2009 @ 21:48:36 #282
1972 Swetsenegger
Egocentrische Narcist
pi_72323199
1
2
3
4
5
6
7
8
9
10
11		<span style="display:block;text-align:right;height:30px;line-height:30px;">
Naam
<form style="padding:0;margin:0;" action="inloggen" method="post"> 
<input type="hidden" name="location" value=/klantGegevens.php />
<input type="submit" name="uitloggen" value="Uitloggen" />
</form>
<a href="cart" style="text-decoration:none;color:black">0 artikelen: <img src="image/cart.png" alt="winkelwagen" height="30px" width="20px" style="border:0;padding:0;vertical-align:middle" /></a>
    
<input type="text" size="20" style="background:url(image/searchbg.png) repeat-x;padding:0;border:1px solid #888" value="zoeken" />
<img src="image/search.png" alt="zoeken" height="30px" width="30px" style="padding:0;vertical-align:middle" />
</span>

Na de </form> krijg ik een newline waardoor de rest een regel eronder gepositioneerd wordt terwijl ik het naast elkaar wil. Iemand een simpele tip?
 | FOK! Schrikkelbaasch
pi_72323583
</form> ergens anders neerzetten?
—o—
  FOK!-Schrikkelbaas maandag 31 augustus 2009 @ 21:59:44 #284
1972 Swetsenegger
Egocentrische Narcist
pi_72323753


display:inline; in de form style does the trick.
 | FOK! Schrikkelbaasch
pi_72484804
Ben ik weer


Ik ben even een simpel html sitetje in elkaar aan het zetten voor mn school.
Vind het intranet van de HU maar moeilijk,, dus wil ik voor mn klas een beveiligde site in elkaar zetten.

http://i26.tinypic.com/adj51v.jpg

Hoe kan ik ervoor zorgen dat het middelste stuk zich automatisch uitrekt tot 100%, zelfs als er geen tekst in staat?

Dus dan heb je standaard, ongeacht de inhoud een witte balk in het midden:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16		<div id="container">
  <div id="header">
    <h1>Communicatie Management - D12 <a name="Atop"></a></h1>
  <!-- end #header --></div>
  <div id="mainContent">
    <h1> <a href="#sites">Sites</a> - <a href="#bestanden">Bestanden</a> </h1>
    <br />
<em>(Nieuwste bovenaan)</em>
    
   <!-- end #mainContent --></div>
  <div id="footer">
    <p><a href="#top">Top</a></p>
  <!-- end #footer --></div>
<!-- end #container --></div>
</body>
</html>


1
2
3
4
5
6		<?php
.oneColElsCtrHdr #mainContent {
    padding: 0 20px; 
    background: #FFFFFF;
}
?>


[ Bericht 21% gewijzigd door raaavi op 06-09-2009 14:03:37 ]
pi_72485334
quote:
Op zondag 6 september 2009 13:53 schreef raaavi het volgende:

Hoe kan ik ervoor zorgen dat het middelste stuk zich automatisch uitrekt tot 100%, zelfs als er geen tekst in staat?
min-height: 100%; ook al wil je eigenlijk helemaal niet dat die balk 100% hoog is
pi_72485701
quote:
Op zondag 6 september 2009 14:11 schreef Roy_T het volgende:

[..]

min-height: 100%; ook al wil je eigenlijk helemaal niet dat die balk 100% hoog is
werkt niet


**ik los het wel anders op

Nevermind
pi_72519602
Weet iemand een oplossing voor het probleem dat hier beschreven staat? http://www.codingforums.com/showthread.php?t=151562

Ik zit namelijk met precies hetzelfde probleem. In IE staan ze netjes naast elkaar, maar in FF3, Opera en Chrome staat de submit-button ongeveer 3 pixels hoger dan het text-veld.
Trotse poster van het 37000000ste bericht ^O^
pi_72615260
Weet iemand hoe ik een container tot onder kan laten doorlopen? Wat voor height moet ik deze meegeven? En wat moet ik met de heights doen van de divs die er in staan?

Dank alvast .
pi_72615411
Als je eerst eens uitlegt wat je wil? "container tot onder laten doorlopen" is nou niet echt een industrieterm ofzo
pi_72636781
Opbouw:

menu
div1 div3
div2 div3
footer

Alles staat in een container. De footer staat al vast onderaan. Als div2 óf heel div3 (contentdiv) veel tekst heeft moet de container automatisch meegaan. Deze moet dus géén vaste height krijgen. Hoe kan ik dit realiseren? Heb de html, body op 100% staan en de container ook 100% gegeven.. Maar als er dan meer tekst in staat dan in het beeld past loopt de container niet mee door. Footer overigens ook niet.

edit: hier de code, wel net zo makkelijk:
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		html, body {
background: url(images/achtergrond.jpg) center repeat-x;
background-color: #4a4a4a;
margin: 0px;
padding: 0px;
font: 12px Arial, Helvetica, sans-serif;
height: 100%;
}

.menubalk {
background: #2e3235;
width: 100%;
height: 50px;
float: left;
color: #fff;
font: 13px Geneva, Arial, Helvetica, sans-serif;
font-weight: bold;
}

.container {
background: url(images/achtergrond_content.png) repeat-y;
margin: 0 auto;
width: 976px;
height: 100%;
}

.links {
width: 303px;
float: left;
}

.plaatje {
background: url(images/foto.jpg);
width: 303px;
height: 239px;
float: left;
margin-left: 17px;
}

.logo {
background: url(images/logo.jpg);
width: 303px;
height: 143px;
float: left;
margin-left: 17px;
}

.tekst {
width: 303px;
float: left;
margin-left: 17px;
}

.content {
width: 673px;
}

.footer {
background: #2e3235;
float: left;
width: 945px;
height: 44px;
margin-left: 16px;
position: absolute;
bottom: 0;
}


HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17		<div class="menubalk">
   <div class="menu">
   <ul>
    <li><a href="#">Een</a></li>
    <li><a href="#">Twee</a></li>
    </ul>
    </div>
</div>
<div class="container">
    <div class="links">
       <div class="plaatje"></div>
        <div class="logo"></div>
        <div class="tekst">asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />asdf<br />
    <div class="content">
    </div>
</div>
<div class="footer"></div>


[ Bericht 42% gewijzigd door Nashje op 11-09-2009 11:21:31 ]
  maandag 14 september 2009 @ 02:48:52 #292
134533 donroyco
dus niet Donroyco
pi_72720953
-edit-

[ Bericht 96% gewijzigd door donroyco op 14-09-2009 03:38:23 ]
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. :'(
pi_72800900
quote:
Op vrijdag 11 september 2009 10:36 schreef Nashje het volgende:
Opbouw:

menu
div1 div3
div2 div3
footer

Alles staat in een container. De footer staat al vast onderaan. Als div2 óf heel div3 (contentdiv) veel tekst heeft moet de container automatisch meegaan. Deze moet dus géén vaste height krijgen. Hoe kan ik dit realiseren? Heb de html, body op 100% staan en de container ook 100% gegeven.. Maar als er dan meer tekst in staat dan in het beeld past loopt de container niet mee door. Footer overigens ook niet.

edit: hier de code, wel net zo makkelijk:
CSS
[ code verwijderd ]

HTML
[ code verwijderd ]
Zou niet wetn hoe 't moet :P maar misschien heb je hier wat aan... staat wat css code voor verschillende type layouts. http://matthewjamestaylor(...)olumn-liquid-layouts

Een vraagje van mij kant...

1
2
3
4
5
6
7
8
9
10
11
12
13
14		tr:hover.tblhover {
   background-color: #ccc
}

<table>
   <tr class="tblhover">
      <td>cell 1</td>
      <td>cell 2</td>
   </tr>
   <tr class="tblhover">
      <td>cell 3</td>
      <td>cell 4</td>
   </tr>
</table>


Ik vroeg me af kan ik me css zo veranderen dat ik in feite i.p.v. 't bovenstaande ook dit zou kunnen doen

1
2
3
4
5
6
7
8
9
10		<table class="tblhover">
   <tr>
      <td>cell 1</td>
      <td>cell 2</td>
   </tr>
   <tr>
      <td>cell 3</td>
      <td>cell 4</td>
   </tr>
</table>
pi_72803451
Zelfs áls je CSS werkt, dan is dit netter:

1
2
3		tr.tblhover:hover {
   background-color: #ccc
}


En als je het wilt zoals je aangeeft:

1
2
3		table.tblhover tr:hover {
   background-color: #ccc
}
pi_73019769
Ik heb een pagina met 2 kolommen:

kolom HOOFD en kolom RECHTS

in kolom hoofd zitten óók twee kolommen, maar alléén op de voorpagina van de site. op alle andere pagina's is er maar 1 kolom. Kolom CONTENT en kolom FRONTPAGE

De hele pagina is 960px breed. Kolom RECHTS is 200px breed met 20px margin. Kolom FRONTPAGE is 430px breed.

Hoe zorg ik er nou voor dat kolom CONTENT de restruimte opvult. Oftewel, als er wel een frontpage is, is de breedte (automatisch) 310px en als er geen frontpage is, is de breedte 740px breed?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22		<div id="RECHTS"></div>
<div id="HOOFD">
  <div id="FRONTPAGE"></div>
  <div id="CONTENT"></div>
</div>

[code]
#HOOFD {
  width: 740px;
}
#RECHTS {
  float: right;
  width: 200px;
  margin-left: 20px;
}
#CONTENT {
  ???
}
#FRONTPAGE {
  float: right;
  width: 430px;
}
Trotse poster van het 37000000ste bericht ^O^
pi_73020666
quote:
Op dinsdag 22 september 2009 @ 21:25 schreef daReaper het volgende:


Hoe zorg ik er nou voor dat kolom CONTENT de restruimte opvult. Oftewel, als er wel een frontpage is, is de breedte (automatisch) 310px en als er geen frontpage is, is de breedte 740px breed?
[ code verwijderd ]
Waarom zou je in hemelsnaam die div #frontpage gebruiken op pagina's waar je hem niet nodig hebt
—o—
pi_73021042
quote:
Op dinsdag 22 september 2009 21:25 schreef daReaper het volgende:
Ik heb een pagina met 2 kolommen:

kolom HOOFD en kolom RECHTS

in kolom hoofd zitten óók twee kolommen, maar alléén op de voorpagina van de site. op alle andere pagina's is er maar 1 kolom. Kolom CONTENT en kolom FRONTPAGE

De hele pagina is 960px breed. Kolom RECHTS is 200px breed met 20px margin. Kolom FRONTPAGE is 430px breed.

Hoe zorg ik er nou voor dat kolom CONTENT de restruimte opvult. Oftewel, als er wel een frontpage is, is de breedte (automatisch) 310px en als er geen frontpage is, is de breedte 740px breed?
[ code verwijderd ]
Gewoon in je stylesheet zetten dat die div #content 740px breed moet zijn. En bij de frontpage een extra stylesheet laden (na de gewone stylesheet) met daarin de breedte van #frontpage (430px) en #content (310px).
fokstok.nl
pi_73021246
quote:
Op dinsdag 22 september 2009 21:46 schreef doppendoosch het volgende:

[..]

Waarom zou je in hemelsnaam die div #frontpage gebruiken op pagina's waar je hem niet nodig hebt
nja die div wordt ook niet geladen bij andere pags dan de frontpage, was ik er even vergeten bij te zetten
Trotse poster van het 37000000ste bericht ^O^
pi_73021962
quote:
Op dinsdag 22 september 2009 21:54 schreef Light het volgende:

[..]

Gewoon in je stylesheet zetten dat die div #content 740px breed moet zijn. En bij de frontpage een extra stylesheet laden (na de gewone stylesheet) met daarin de breedte van #frontpage (430px) en #content (310px).
Heb het maar zo opgelost. Hoopte eigenlijk dat er een echte css oplossing zou zijn, maar zo werkt het ook
Trotse poster van het 37000000ste bericht ^O^
pi_73024935
quote:
Op dinsdag 22 september 2009 21:54 schreef Light het volgende:

En bij de frontpage een extra stylesheet laden (na de gewone stylesheet) met daarin de breedte van #frontpage (430px) en #content (310px).
Beetje overkill om daar een extra HTTP-request voor te doen. Dat kan prima in 1 stylesheet.
actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
[CSS] voor dummies - deel 12
Index

» digital corner

» development

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