PHPhulp.nl PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact
k

css voor beginners

Door koh do op 24-04-2009 08:39
560 views
Ik ben dus sinds kort met css, begonnen. Ik heb wat dingen op het internet opgezocht maar het wil me toch nog niet lukken.

Ik heb dus gewoon maar wat in elkaar proberen te zetten, maar ik krijg niet wat ik graag zou willen.

in het volgende voorbeeld heb ik een pagina gemaakt waarin ik de achtergrond rood heb gemaakt en daar in een groene header zou willen hebben maar ik zie heel de header niet. Wat doe ik verkeerd?


<html>

<head>
<title>Nieuwe pagina 1</title>
<style type="text/css">

body {
 background: red;
}

container {
 width:75%;
}

header {
 background: green;
 height: 30px;
}

</style>

</head>

<body>
    <div class="container">
        <div class="header">
        </div>
    </div>
</body>

</html>


Omdat ik het mezelf meteen goed wil aan leren vraag ik me af hoe ik een css moet indelen. Ook zie ik vaak, dat er een # of . of helemaal niets voor een selector staat. Ik heb geen duidelijk antwoord kunnen vinden over deze vraag.

Alvast bedankt voor uw tijd
M
Mr.Moe
24-04-2009 08:53 

<html>

<head>
<title>Nieuwe pagina 1</title>
<style type="text/css">

body {
 background: red;
}

.container {
 width:75%;
}

.header {
 background: green;
 height: 30px;
}

</style>

</head>

<body>
    <div class="container">
        <div class="header">
        </div>
    </div>
</body>

</html>


Zoals jezelf al aanhaalde, je was de punt voor header, container vergeten.

. => duid aan dat het om een class gaat <div class="">
#=> duid aan dat het om een div gaat <div id="">
R
Robert Deiman
24-04-2009 08:59
een selector zonder een . of # staat voor een HTML element:
bijv (uit jou bovenstaande HTML):

body
div


een selector met een een . of # staat voor een HTML element met als class of id de waarde die achter de . of het # staat:
bijv:

.container
.header
/*Onderstaande is een voorbeeld van een id, maar die komt niet in je code voor*/
#container
#header


Een id gebruik je wanneer een element met een bepaalde opmaak maar 1 keer voorkomt. (zo zal je op een pagina maar 1 maal een div met als class of id "header" hebben. Je kan daarvoor dan beste een id gebruiken)

Wat vaak handig is is om in het eerste stukje van je CSS (is overigens persoonlijk) de globale opbouw van je pagina te doen, dus eigenlijk alleen het positioneren van de hoofdelementen, het algemene deel (vaak: header, content, footer, menu en de eventuele container + Natuurlijk de html/ body eigenschappen die voor de hele pagina gelden, zoals het lettertype) En daarna per "subdeel" van de pagina de interne opmaak.

Het is daarbij handig om commentaar voor een nieuw deel toe te voegen op de manier zoals die hierboven is gebruikt in het voorbeeld stukje over classes en id's. Dus te beginnen met /* en af te sluiten met */. Zet daartussen dan duidelijk wat er in het daaropvolgende stukje CSS komt te staan. (vb: /* Opmaak binnen div #header */)

Ten slotte is het handig om de stylesheet los te halen van je HTML pagina. Je kan gewoon de hele inhoud van tussen <style> en </style> kopiëren in een bestand en deze opslaan als style.css (hetgene voor .css mag je zelf bepalen)

Vervolgens laad je deze in met de onderstaande code welke je binnen de <head> en </head> van je HTML zet.:
<link rel="stylesheet" href="style.css" type="text/css" media="all">
M
Mr.Moe
24-04-2009 10:43
Nou, dat noem ik nu nog eens mooie staaltje hulp.
k
koh do
24-04-2009 12:06
Hartelijk dank ik ga er meteen mee aan de slag.
k
koh do
24-04-2009 12:06
Hartelijk dank ik ga er meteen mee aan de slag.
k
koh do
24-04-2009 13:14
Ik ben dus wat verder gegaan en nu loop ik tegen het volgende probleem aan.

Ik heb een plaatje waarvan ik alleen een bepaald gedeelte wil gebruiken. dat lukt me nog wel. ik doe het op deze manier.


 background:#000 url(image.jpg)
 background-repeat: repeat;
 background-position: -2px -2px;


maar nou wil ik het net iets anders doen. ik wil een klein gedeelte van een plaatje nemen en dat dan repeat-en. Ik heb dit geprobeerd: 


 background-position: -2px -2px -20px -20px;


alleen dit werkt niet,is er een oplossing voor dit probleem.


Gelieve Niet Bumpen:

Twee of meer keer achter elkaar in een topic posten heet bumpen. Bumpen is pas na 24 uur toegestaan en kan een reden zijn voor de admins en moderators om een topic te sluiten. Gebruik indien nodig de knop om je tekst aan te passen.

SanThe.

?
Onbekende gebruiker
24-04-2009 13:19
Dus je wilt van een plaatje, die 300 bij 300 is, een gebiedje nemen van 10 bij 10 met behulp van CSS en dan dat geselecteerd gebiedje vervolgens herhalen met CSS?

Dat zal niet gaan. Je kunt de repeat attribute niet toepassen op een position attribute. Je zult met een editor zoals Paint of Photoshop van dat stukje een apart plaatje maken en vervolgens dat plaatje repeaten.

Reageren

Inloggen om te reageren