CSS (2/4)

   

En de master website waar je echt alles kunt vinden : w3schools.com.

Als je stylesheet in dezelfde map staat als die index file kun je gewoon dit gebruiken :


<link rel="stylesheet" type="text/css" href="/style.css">

Ik had mijn vraag even gesteld op html-site.nl en daar zeiden ze dat ik inplaats van ' -> " moest gebruiken. Nu heb ik dit gedaan en het werkt.

Had ik gewoon helemaal niet bij stilgestaan.

Een ongeluk zit in een klein hoekje

Dat is altijd zo met het bouwen van websites...
daarom raad ik je aan om een editor als Notepad++ te gebruiken, dan wordt je code gekleurd... dit soort foutjes heb je dan minder.

Ik moet zeggen het geeft geen goeg gevoel als je iets nieuws heb geleerd. Ik begrijp (als het goed is :P)  CSS nu. De basis dan denk ik zo.

Nu ben ik wat aan het proberen geweest met divs. En nu wilde ik het voor elkaar krijgen zoals djresource het heeft gedaan met de pagina. Als je je browser verkleint zie je de hele webpagina naar links verschuiven, maar de tekst en kolommen etc verkleinen niet. Hoe doe je dat of is dat zeer ingewikkeld?

Hij wordt gewoon zoveel mogelijk in het midden uitgelijnd denk ik... daar kun je de div tag <d i v align="center">hier je hele opmaak reutemeteut, tabellen e.d.</d i v>

Niet de nette manier or Nvie..

Je zet een div om je complete inhoud, en die geef je de class container mee:

<div class="container">
Je inhoud
</div>

Vervolgens doe je dit in css

div.container {
margin: 0px auto;
}


en tadaa: alles gecentreerd :D

Dus je kunt ook divs in divs zetten?

<div class="container">

<div id="menu"> link 1 link 2 link3
</div>

<div id="laag1"> test1
</div>

<div id="laag2"> test2
</div>

Ik heb nu dit. Maar er gebeurt nog niet wat ik wil?



</div>

Divs mogen in divs ja.
Wat werkt er niet?

Oke ik heb een filmpje gemaakt van wat ik bedoel.

Http://www.crazycor.nl/test/djr.htm

Het grijze gedeelte krimt. Maar met het menu en de inhoud gebeurt niets.
Opeens stop het grijze gedeelte met krimpen en dan blijft het menu en de inhoud gewoon netjes staan.

Het probleem wat ik heb is dat mijn inhoud gaat verspringen en onderelkaar komt te staan.

Ik weet dat ik het een beetje raar omschrijf met het begrip krimpen, maar ik weet er geen betere verwoording voor haha.

Poster: ceesietopc
Niet de nette manier or Nvie..

Je zet een div om je complete inhoud, en die geef je de class container mee:


Je inhoud


Vervolgens doe je dit in css

div.container {
margin: 0px auto;
}


en tadaa: alles gecentreerd :D

 
Kan ook, ik gebruik alleen div centre :P

@nvie
Opmaak doe je in css, op jou manier doe je het in html, en dat is niet de bedoeling.

@ccc
mn voorbeeldje doet precies wat jij wilt.
Kan je je broncode ff online zetten?

http://www.crazycor.nl/test/test.html en http://www.crazycor.nl/test/test2.css  heb ik de bestanden gezet.

Alvast bedankt.

Je moet de breedte vastzetten van je container.
zet er 800px bij, en het werkt. of 600px;

You are the man! :p

Mooi man hij doet het :D.
Het is altijd leuk om iets nieuws te leren.

Bedankt voor de hulp.

Ik heb nu een simpele website gebouwt met o.a. divs en een css bestand.

http://www.crazycor.nl/school/

Nu heb ik een vraag. In FireFox laat hij alles goed zien. Het logo div links boven en de header div midden, staan in FireFox gewoon mooi naast elkaar. In Internet Explorer is de header een beetje lager dan het logo.

Bij de menu items is er in IE ruimte tussen elke knop en bij FF is dit niet.

Is er iemand die weet hoe ik dat kan oplossen?

Ook heb ik een footer gemaakt zoals beneden te zien is.
Dat is ook een div. Hoe krijg ik voor elkaar dat de tekst rechts in de footer komt te staan?

Alvast bedankt.

Voor de footer:
text-align: right;

Internet Explorer zuigt, maar met de nieuwe versie valt het wel mee. Heb je de nieuwe versie al? als dat niet zo is, eerst downloaden. Het is zo veel moeite om al je css te tweaken dat het ook op css werkt Ik ga ff voor je kijken, voor het geval het in IE7 nog het geval is...

edit:
probeer is:

img{
border: none;
margin: 0px 0px 0px 0px;
}


en in je header div dit erbij:
margin: 0px 0px 0px 0px;

is niet helemaal de nette manier, met 4* 0px. Ff kijken of het gewoon 0 kan of none.

edit:
kan ook gewoon met margin: 0;

Nee ik gebruik nog steeds 6 als ik het al gebruik. Ik zal zo even de site op IE 7 checken hoe het daar op is.

En wat betreft de footer, bedankt! Werkt perfect .

Naja.. kijk gelijk ff in de edits van de vorige post :D

Poster: ccc
Ik heb nu een simpele website gebouwt met o.a. divs en een css bestand.

http://www.crazycor.nl/school/

Nu heb ik een vraag. In FireFox laat hij alles goed zien. Het logo div links boven en de header div midden, staan in FireFox gewoon mooi naast elkaar. In Internet Explorer is de header een beetje lager dan het logo.

Bij de menu items is er in IE ruimte tussen elke knop en bij FF is dit niet.

Is er iemand die weet hoe ik dat kan oplossen?

Ook heb ik een footer gemaakt zoals beneden te zien is.
Dat is ook een div. Hoe krijg ik voor elkaar dat de tekst rechts in de footer komt te staan?

Alvast bedankt.

 

Heel simpel, in je CSS -> * {marging:0; padding:0;}

Met dat stukje code reset je alle paddings en margins die door browsers ZELF mee gegeven worden wanneer er geen waarde opgegeven is. Het is dus noodzakelijk dat je daarna alles van de juiste paddings en margins voorziet en natuurlijk liever niet met paddings EN margins werken in een div binnen een div.... om één of andere reden wil dat nooit helemaal werken zoals het echt moet (als je pixel precies werkt tenminste).

Poster: ceesietopc
Voor de footer:
text-align: right;

Internet Explorer zuigt, maar met de nieuwe versie valt het wel mee. Heb je de nieuwe versie al? als dat niet zo is, eerst downloaden. Het is zo veel moeite om al je css te tweaken dat het ook op css werkt Ik ga ff voor je kijken, voor het geval het in IE7 nog het geval is...

edit:
probeer is:

img{
border: none;
margin: 0px 0px 0px 0px;
}


en in je header div dit erbij:
margin: 0px 0px 0px 0px;

is niet helemaal de nette manier, met 4* 0px. Ff kijken of het gewoon 0 kan of none.

edit:
kan ook gewoon met margin: 0;

 

De oplossing om dan maar IE7 te gaan gebruiken is natuurlijk niet echt de juiste manier. Als je met CSS wil werken moet je ook zorgen dat je hem cross browser proof bouwt en geen browsers uit gaan sluiten/geen rekening mee houden. IE6 ondersteund deze basis CSS code overigens prima.

Je hebt gelijk.. ik had ook al oplossingen gegeven in mn edit om te zorgen dat ie ook in IE6 werkt

Ik heb nu de methode van ceesietopc gebruikt en die van Reind, maar beide werken niet?

Ik blijf het probleem houden. Uiteraard heb ik meerdere dingen geprobeert. Zoals in elke div dat margin 0 te zetten. Maar helaas werkt het dan nog steeds niet.

Is er misschien iets anders dat ik over het hoofd zie?

Ik zie de regel nergens staan in je CSS dus ,  * { margin: 0; padding: 0; }

Daarnaast is je website zowel qua code als qua CSS een zooitje, koop een goed boek of ga op zoek naar websites die het je stap voor stap uitleggen. Hoe kun je bijvoorbeeld nou voor alles een positie absolute gebruiken.... om maar een voorbeeld van slechte CSS te noemen en menu's zijn niet alleen < a xhref=" maar horen in een list te staan etc etc.

Linkjes,
http://www.intensivstation.ch/templates/
http://www.ibdjohn.com/csstemplate/
http://veerle.duoh.com/blog/comments/designing_a_css_based_template_part_i/

Veel plezier ermee, kun je je eigen huiswerk weer gaan maken in plaats van het anderen te laten doen

Ik heb ook even een korte vraag over CSS:

stel ik heb een divje met tekst. Dit zijn links dus ze moeten een bepaalde kleur krijgen bij active en hover. Hoe schrijf ik dit in het stukje CSS waar die div naar linkt?

*er zijn verschillende divjes met tekst die anders moeten reageren als link dus iets als dit in html is geen optie:

< style type="text/css">

  body{ background-color:#FFFFFF; color: #333333; font-family: Trebuchet MS, Arial; font-size:14px; }
  a:link{color: black; text-decoration: none}	
  a:visited{color: black; text-decoration: none}	
  a:active {color: #999999; text-decoration: none}	
  a:hover {color: #999999; text-decoration: none}
< /style>

Helaas heb ik geen tijd om een boek door te nemen. Als ik daar de tijd voor had deed ik het met plezier, maar ik moet het project vrijdag afhebben dus dat gaat me niet meer lukken.

De reden dat de regel er niet bij staat is omdat ik het bestand niet heb geupload, maar gewoon lokaal heb getest.

Ik zal heel eerlijk zijn ik weet niet wat position absolute betekent, waarom niet omdat ik het gewoon op geen enkele website vind :S.
Ik heb op een website een voorbeeld van een div gevonden. Heb die gekopieerd. Getest hoe het werkt, die weer gekopieerd om meerdere divs op mijn pagina te krijgen.

Ohja, ik laat anderen mijn huiswerk niet maken. Wat ik wel doe is hulp vragen als ik niet verder kom.