[CSS] voor dummies - Deel 3

Index

» digital corner

actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
pi_31747844
Okee, ik heb het aangepast:

<html>
<head>
<title>Zwevende elementen</title>
<link rel="stylesheet" href="H12_voorbeeld_7.css" type="text/css">
</head>

<body>
<div class="deel1">Zwevend blok nr.1</div>
<div class="deel2">Zwevend blok nr.2</div>
</body>
</html>


<style type="text/css">

/* CSS Hoofdstuk 12 voorbeeld 7 */

.deel1 {
float:left;
width: 75px;
height: 100px;
color:yellow;
background:green;
}
.deel2 {
margin-left: 75px;
width: 150px;
height: 150px;
color:yellow;
background:red;
}

</style>


Maar nog steeds doet alleen blok twee wat ie moet doen. Net als bij de andere opdrachten en oefeningen: de eerste selector (deel1 in dit geval) slaat ie consequent over.

@ SuperRembo: bedoelde je het plaatsen van code tussen vierkante haken, ipv tussen < deze > ?

@rekenwonder: dank! Die ga ik eens uitproberen.
Kortom, the usual.
pi_31750652
quote:
Op vrijdag 28 oktober 2005 10:00 schreef Pokkehontas het volgende:
@ SuperRembo: bedoelde je het plaatsen van code tussen vierkante haken, ipv tussen < deze > ?
Nee, alleen om leesbare code hier op FOK! te maken:

1
2
3
4
5
6
7
8
9
10		<html>
<head>
<title>Zwevende elementen</title>
<link rel="stylesheet" href="H12_voorbeeld_7.css" type="text/css">
</head>
<body>
<div class="deel1">Zwevend blok nr.1</div>
<div class="deel2">Zwevend blok nr.2</div>
</body>
</html>


Het je die <style type="text/css"> in je .css file staan? Dat moet niet.

Maar wat wil je dat er met het eerste blok gebeurt? Het is het meest links blok, dus van float:left zal je geen effect zien.
Wil iedereen die in telekinese gelooft nu mijn hand op steken?
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
pi_31764375
quote:
Op vrijdag 28 oktober 2005 12:10 schreef SuperRembo het volgende:

Het je die <style type="text/css"> in je .css file staan? Dat moet niet.
Yessss! Dat was 'm dus!! Ik vermoedde al dat er iets in het cursusboek helemaal niet klopte, maar kon -als absolute beginner- de fout niet vinden. Ik heb die <style> dingen eruit gehaald en nu doet ie precies wat ie doen moet. Bedankt Rembo!
Kortom, the usual.
pi_31794810
Heeft er iemand een idee hoe je de inputfields veranderd in plaatjes? Om het even duidelijker te maken:
http://www.substruction.com/salsapassion/admin/form.html

Die submit knop werkt al. Wat ik nu zou willen is dat mensen hun naam en wachtwoord op die plaatjes kunnen plakken. Als je die lelijke windows submitknoppen kunt veranderen in een plaatje moet dat voor input fields ook wel lukken met css. Als het niet mogelijk is met css graag dan HTML code ofzo
pi_31794980
Kolere wat een ranzige bende die html

"naam en wachtwoord op die plaatjes kunnen plakken" vage omschrijving, maar ik neem aan dat je gewoon een achtergrondplaatje op het invoerveld wil zetten. Dat is ook wat je zal moeten doen: achtergrondplaatje gebruiken en de border van het invoerveld weghalen.
Wil iedereen die in telekinese gelooft nu mijn hand op steken?
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
pi_31802489
quote:
Op zaterdag 29 oktober 2005 23:02 schreef SuperRembo het volgende:
Kolere wat een ranzige bende die html

"naam en wachtwoord op die plaatjes kunnen plakken" vage omschrijving, maar ik neem aan dat je gewoon een achtergrondplaatje op het invoerveld wil zetten. Dat is ook wat je zal moeten doen: achtergrondplaatje gebruiken en de border van het invoerveld weghalen.
Ja en ga jij me zeggen hoe ik dat doe? Heb al gegoogled al wat ik vond was een pagina met halve info..
pi_31802539
Erm, het past niet helemaal bij CSS, ik weet het, maar toch mijn vraag;

Jaren geleden bouwde ik mijn websites allemaal door gebruik te maken van tabellen. Dit is nu grootendeels vervangen, maar ik wil weer iets met tabellen doen voor de layout. Ik word namelijk een beetje gestoord van alle verschillen tussen de browsers.

Maar nu zit ik met het volgende probleem: Ik wil een <TD> alle overgebleven ruimte laten innemen.

1
2
3
4
5
6
7		<table>
  <tr>
    <td width="*"></td>
    <td width="700"></td>
    <td width="*"></td>
  </tr>
</table>


Het werkt prima, maar ik krijg toch een validatiefout

1line 29 column 3 - Warning: <td> attribute "width" has invalid value "*"


Is er een andere manier om dit wel te kunnen laten valideren?
GTA San Andreas Multiplayer: Las Venturas Playground Doe mee met FOK! Whatpulse en typ FOK! naar de 1e plaats!!
pi_31802635
quote:
Op zondag 30 oktober 2005 09:57 schreef Flying het volgende:

[..]

Ja en ga jij me zeggen hoe ik dat doe? Heb al gegoogled al wat ik vond was een pagina met halve info..
http://www.w3schools.com/css/css_background.asp
http://www.w3schools.com/css/css_border.asp
Wil iedereen die in telekinese gelooft nu mijn hand op steken?
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
pi_31802701
@Nevermind:

1
2
3
4
5
6
7
8		<table>
   <colgroup>
      <col width="1*">
      <col width="700">
      <col width="1*">
   </colgroup>
   <tr>
      ...


[/code]
Wil iedereen die in telekinese gelooft nu mijn hand op steken?
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
pi_31802707
quote:
Op zondag 30 oktober 2005 10:02 schreef Nevermind het volgende:
Erm, het past niet helemaal bij CSS, ik weet het, maar toch mijn vraag;

Jaren geleden bouwde ik mijn websites allemaal door gebruik te maken van tabellen. Dit is nu grootendeels vervangen, maar ik wil weer iets met tabellen doen voor de layout. Ik word namelijk een beetje gestoord van alle verschillen tussen de browsers.

Maar nu zit ik met het volgende probleem: Ik wil een <TD> alle overgebleven ruimte laten innemen.
[ code verwijderd ]

Het werkt prima, maar ik krijg toch een validatiefout
[ code verwijderd ]

Is er een andere manier om dit wel te kunnen laten valideren?
Als je in html verder wilt en je wil dat hij de volledig ruimte benut moet je dit gebruik:

1<td width="100%"></td>
pi_31802744
quote:
Op zondag 30 oktober 2005 10:15 schreef SuperRembo het volgende:
@Nevermind:
[ code verwijderd ]

[/code]
Ik kende die tags helemaal niet Dankje!
en ik leerde ook nog eens dat er geanimeerde favicons bestaan. dat heb ik nog nooit eerder gezien
GTA San Andreas Multiplayer: Las Venturas Playground Doe mee met FOK! Whatpulse en typ FOK! naar de 1e plaats!!
pi_31802793
quote:
Op zondag 30 oktober 2005 10:10 schreef SuperRembo het volgende:

[..]

http://www.w3schools.com/css/css_background.asp
http://www.w3schools.com/css/css_border.asp
Ik heb me even uitgeleefd
1<INPUT TYPE="text" NAME="name" maxlength="30" style="background-color:transparent;background-image: url(images/button_06.gif;">


De achtergrond is nu transparant maar toont mijn image nog niet. Doe ik wat fout? Met enkel background-image erin werkt het ook niet.
pi_31802818
Je mist een haakje in je url:
1background-image: url('images/button_06.gif');
GTA San Andreas Multiplayer: Las Venturas Playground Doe mee met FOK! Whatpulse en typ FOK! naar de 1e plaats!!
pi_31802992
quote:
Op zondag 30 oktober 2005 10:22 schreef Nevermind het volgende:
Je mist een haakje in je url:
[ code verwijderd ]
pi_31810869
Hallo,

ik heb een vraag aan de slimme mensen hier Op mijn website, www.gewoongertjan.nl, wil ik rechtsbovenaan reclame hebben. Deze wil ik tegen de rand van het blauwe vlak aan en tegen de top van dit gedeelte (in de header dus). De reclame moet niet verdrukt worden door de tekst (wat ik dus dacht te doen met z-index: 1;)
Het lukt me gewoon niet. Met position: absolute; kan ik hem precies plaatsen, maar bij verkleinen of vergroten van mijn browser loopt het dan weer in de soep.

Iemand advies?

Stylesheet: http://www.gewoongertjan.nl/wp-content/themes/blix/layout.css --> helemaal onderaan.

Grtz,

ALTF4
En toen was het verhaaltje uit...
pi_31866099
Ik hoor niets, heeft niemand een idee?
Inmiddels heb ik de reclame maar even linksbovenaan gezet, dat lukte wel...
En toen was het verhaaltje uit...
pi_31892132
In Opera en Firefox werkt het horizontale menu prima, maar in Internet Explorer niet... waar ligt dit aan?
GTA San Andreas Multiplayer: Las Venturas Playground Doe mee met FOK! Whatpulse en typ FOK! naar de 1e plaats!!
pi_31894852
Dat ligt aan het verschil in het box model tussen FireFox en Internet Explorer.
In FF wordt de border wel bij de breedte gerekend, in IE wordt de border niet bij de breedte gerekend. Daardoor worden de listitems te breed.

Vreemd dat je een wel een list gebruikt voor het menu, maar dat je verder taballen gebruikt voor de layout.
Wil iedereen die in telekinese gelooft nu mijn hand op steken?
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
pi_31898847
Daar heb je helemaal gelijk in Ik heb het wederom eens compleet in css geprobeerd, maar ik word ontzettend moe van de onderlinge verschillen tussen browsers. Vooral als het in de grote drie browsers bij elke er compleet anders uit ziet. Dan ga ik toch liever voor de makkelijke manier die het wel prima doet in elke browser. Ik weet dat je ontzettend veel ervaring hebt met css, maar ik denk dat je je ook wel kunt voorstellen hoe de beginnende of gemiddelde (daar reken ik mezelf onder ) 'webdesigner' er wel moeite mee kan hebben.

Maar ik zal me even verdiepen in het box model hack, wederom bedankt
GTA San Andreas Multiplayer: Las Venturas Playground Doe mee met FOK! Whatpulse en typ FOK! naar de 1e plaats!!
pi_31904402
Je kan je verdiepen in allerlei hacks om alles op de pixel precies gelijk te krijgen.

Je kan ook je layout zo aanpassen dat het niet uit maakt als iets een pixeltje meer of minder breed is.
Wil iedereen die in telekinese gelooft nu mijn hand op steken?
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
pi_31910505
quote:
Op vrijdag 23 september 2005 15:51 schreef Onnib het volgende:
Zo zijn er nog wel wat dingen die niet werken in FF en wel in IE:

  • Horizontale balk is een 1px grijze streep in IE maar in FF niet

    • Probeer dit eens, werkt zowel in FF als in IE

    1hr {color: #3064a0; background-color: #3064a0; height: 1px; border: 0; } 
    pi_32087056
    HELP!!
    Ik zit met een select - Z-index probleem.

    Ik weet dat je een Iframe moet maken onder de Div om ervoor te zorgen dat de select objecten er niet voor komen.
    Nu zit ik met het probleem dat alle oplossingen die op internet te vinden zijn allemaal met UL->LI werken of met vage javascript inhoud.

    Ik ben op zoek naar een javascript dat op een moment dat ik op de layer klik (deze wordt dan namelijk vergroot) een iframe eronder getekent wordt.
    pi_32092840
    Bedoel je dit? http://superrembo.com/dhtml/coverdropdown.html
    Wil iedereen die in telekinese gelooft nu mijn hand op steken?
    | Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
    pi_32157587
    Waarschijnlijk een bekend probleem, alleen niets kunnen vinden. Ook oplossingen jatten van andere websites is me niet gelukt

    Ik heb een simpele tabel voor o.a. een forum (let niet op de kleuren, just for testing). In IE ziet het er goed uit, maar o.a. met FireFox krijgen de rijen maarliefst 48 pixels hoogte (in IE zo'n 18). Hoe fix ik dit?

    Nog een probleempje: iemand die in IE en FF kijkt, ziet het waarschijnlijk al. De lichtblauwe achtergrond doet het wel in IE, maar niet in FF. Iemand een idee?overflow: visible; ==> auto

    [ Bericht 3% gewijzigd door Stephan4kant op 10-11-2005 20:10:22 (Tweede probleem al opgelost :P) ]
    "We hebben nooit domme dingen gedaan van onze uitkering, en waren nooit te beroerd om er wat bij te verdienen" (F. Jacobse)
    pi_32159560
    In IE en FF (1.5) zijn de rijen 20px hoog.
    Wil iedereen die in telekinese gelooft nu mijn hand op steken?
    | Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
      vrijdag 11 november 2005 @ 01:26:33 #86
    32768 DionysuZ
    Respect my authority!
    pi_32167873
    ik ben bezig met een klein administratiepaneeltje voor op een site. Heel simpel, links menu, rechts de inhoud. Dit heb ik gedaan door 2 divjes te specificeren, 1 voor het menu en 1 voor de contents. Dit is de CSS:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14    		  * { margin: 0; padding: 0; }
      body, html { height: 100%; }
      #menu {
        position: relative;
        width: 158px;
        _height: 100%;
        min-height: 100%;
        float: left;
      }
      #contents {
        margin: 20px 20px 20px 20px;
        _height: 100%;
        min-height: 100%;
      }

    en op een of andere manier rendert hij hem NIET goed. De body ziet er ongeveer als volgt uit:
    1
    2
    3
    4
    5
    6
    7    		<body>
      <div id="menu">
        ...
      </div>
      <div id="contents">
      </div>
    </body>


    Wat hij fout doet zijn de margins van #contents. Als ik die weglaat dan rendert hij hem goed. Menu links, contents rechts. Echter wil ik de contents ook een stukje van de rand van het menu afhebben en een stukje van boven/onder en rechterkant. Als ik dan een margin instel, ziet het er goed uit in IE, maar niet in FF, dan voegt hij ruimte tussen bovenkant pagina en bovenkant menu/contents ter hoogte van de margin en voegt hij geen ruimte tussen menu en contents.

    Iemand die weet waar ik de fout inga?
    □ Reality is merely an illusion,albeit a very persistent one-A.Einstein
    ■ Of ik ben gek of de rest van de wereld.Ik denk zelf de rest van de wereld-Rudeonline
    □ The war is not meant to be won.It is meant to be continuous-G.Orwell
    pi_32189994
    quote:
    Op vrijdag 11 november 2005 01:26 schreef DionysuZ het volgende:Wat hij fout doet zijn de margins van #contents. Als ik die weglaat dan rendert hij hem goed. Menu links, contents rechts. Echter wil ik de contents ook een stukje van de rand van het menu afhebben en een stukje van boven/onder en rechterkant. Als ik dan een margin instel, ziet het er goed uit in IE, maar niet in FF, dan voegt hij ruimte tussen bovenkant pagina en bovenkant menu/contents ter hoogte van de margin en voegt hij geen ruimte tussen menu en contents.

    Iemand die weet waar ik de fout inga?
    Een eerste stap is begrijpen wat een float is. Een float 'zweeft' boven de pagina. Niet-zwevende blokelementen (zoals je div#contents) zullen gewoon op de pagina worden geplaatst alsof de float er niet is. Beschouw de float als een luchtballon die erboven hangt.

    Met andere woorden: als je op je div#contents een linkermarge van 20px definieert, betekent dat 20px van de linkerkant van het scherm. Als je 20px vanaf de rechterrand van je menu wilt hebben, zul je margin-left: 178px moeten gebruiken. Of een heel andere opzet, waarmee je bijvoorbeeld de inhoud ook float:left meegeeft, dan zal een marge wel werken. Of absolute positionering gebruiken. Al heeft dat ook weer allerlei nadelen.

    Let er verder op dat als je height: 100% gebruikt op een element dat ook nog marge of padding heeft, het totale element hoger wordt dan het scherm en er dus schuifbalken ontstaan. Zie enige uitleg over het box-model.
    pi_32190818
    De makkelijkste oplossing is om er een extra divje in te zetten waar je de padding op zet. Dan heb je geen last van de verschillen in IE en FF.
    Wil iedereen die in telekinese gelooft nu mijn hand op steken?
    | Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
      zaterdag 12 november 2005 @ 14:58:51 #89
    32768 DionysuZ
    Respect my authority!
    pi_32205115
    hartstikke bedankt! ik heb de contents div laten floaten en er een extra div ingezet en nu werkt het goed
    □ Reality is merely an illusion,albeit a very persistent one-A.Einstein
    ■ Of ik ben gek of de rest van de wereld.Ik denk zelf de rest van de wereld-Rudeonline
    □ The war is not meant to be won.It is meant to be continuous-G.Orwell
    pi_32457088
    *kick*

    Ik heb een div met een transparantie van 50% maar nu wil ik de tekst die daarin zit gewoon 100% hebben.

    Ik heb het nu zo, schematisch.
    1
    2
    3    		<div style="opacity: 50%; background-color: #FFF;">
    <div style="color: #000; ">De tekst
    </div>


    Maar nu neemt de tekst die 50% opacity van die andere div over, en dat wil ik niet. Hoe los ik dat op?
    Die andere div een opacity van 100% geven helpt niet. Ook z-indexes halen niks uit.

    -edit-
    In IE is het me inmiddels gelukt met position: relative; geven aan de tekst, maar nog geen succes in FF.

    [ Bericht 5% gewijzigd door DutchBlood op 21-11-2005 17:53:07 ]
    actieve topics nieuwe topics
    abonnement Unibet Coolblue Bitvavo
    [CSS] voor dummies - Deel 3
    Index

    » digital corner

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