CSS (3/4)

   

@Cyrille
hmm.. ik snap je niet helemaal.
Als je de menu div hebt, kan je het daar gewoon inzetten.
Stel:
Je hebt twee stukjes tekst volgens jouw. Twee divjes:

<div class="tekst1">
</div>
<div class="tekst2">
</div>

Daarin staat tekst, in de vorm van links en gewoon tekst.

<div class="tekst1">
    Dit is tekst 1. Deze tekst bestaat uit links en tekst.<br />
    <a xhref= "">Dit</a> is bijvoorbeeld een link.
</div>
<div class="tekst2">
    Dit is tekst 2. Deze tekst bestaat uit links en tekst.<br />
    <a xhref= "">Dit</a> is bijvoorbeeld een link.
</div>


Je wilt in de eerste tekst de links rood laten worden als je de muis er overheen doet, en in de tweede geel. Dan wordt je css

<style type="text/css">
div.tekst1 a:hover{
color: red;
}
div.tekst2 a:hover{
color: yellow;
}
</style>

tadaa :D

Ff in een nieuwe post, als ik edit zijn mn tags weg. :S

@ccc

Over positioning:
Je hebt absolute => Absolute positie. Je geeft dus mee => jouw linkerbovenhoek (daar gaat het om) is zoveel pixels van de bovenkant (top: 40px en zoveel pixels van de linkerzijkant af (left: 30px
Je hebt ook relative => relatieve positie.  Relatief tot de positie waar ie normaal zou staan. Als je een pagina centreert bijv, met "margin: 0px auto;" en je wilt je div iets laten zakken, doe je position: relative; top: 20px;
Je heb ook nog static en fixed, kijk maar eens op de mastersite :P hier
Wat ook handig is om te bekijken, is dit: hier

ennuh.. als het vrijdag af moet, probeer em dan ook te valideren. Staat zo stom als je code vol staat met errors. CSS & XHTML validator staan ook op w3schools. Mss een tip:
developer toolbar

@ceesietopc:
Ik zat veel te moeilijk te denken.. natuurlijk kan het gewoon met
#menu_header a:link{ font-size: ..px; color: #......; } etc..
Toch bedankt voor je reactie

Poster: ccc
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.

 

Je hoeft ook geen boek helemaal door te nemen, gewoon opzoeken als je wat moet weten. Daarnaast heb je niet eens een boek nodig, met behulp van Google is alles te vinden. Ik heb nog nooit een CSS boek of iets wat met webdesign te maken heeft gelezen en ik bouw websites bij de vleet in CSS.

Ik zal heel eerlijk zijn ik weet niet wat position absolute betekent, waarom niet omdat ik het gewoon op geen enkele website vind :S.

 

Zoals ik al zei, Google is je grootste vriend, klik

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.

 

Laat dat gewoon doen door een CSS template generator en ga daarna met die basis aan de slag. Ik heb ook verschillende basis sites liggen met een standaard CSS die ik simpelweg aan pas naar iets anders. Dat is nou het voordeel van CSS, basis kan van 10 sites hetzelfde zijn maar ze kunnen er allemaal anders uit zien.

Klik hier voor een CSS template generator

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

 

Alles wat er nu staat is zo'n beetje door mensen uit dit topic aan je door gegeven. Op zich niet erg maar je leert er geen *** van. Gewoon zelf aan gaan kloten werkt het beste en nogmaals, google is je beste vriend als je het even niet meer snapt.

anders moet je even op www.leejoo.nl kijken daar staan ook wat handig scripts
moet je naar javascripts gaan en dan css

suc6

http://www.anouksweb.nl hier kan je ook wat dingen vinden, ze zijn de site nu aan het verbouwen dus je kan er nu even niks vinden maar het is wel handig. ( als ie optijd weer goed is)

Poster: Cyrille
@ceesietopc:
Ik zat veel te moeilijk te denken.. natuurlijk kan het gewoon met
#menu_header a:link{ font-size: ..px; color: #......; } etc..
Toch bedankt voor je reactie

 

Ongeloofelijk maar waar.. de hover en active stoppen ermee op de een of andere manier. Ontzettend vaag. Ik heb een deel van het script opnieuw in een nieuwe file gezet en daar deed ie het de eerste keer wel (active en hover). Daarna ook niet meer. Iemand eeenig idee?

* het gaat bijv. om dit stuk code dat niet werkt:
HTML:

	<div id="header"><img src="portfoliosite_header_01.jpg" />
	 	<div id="menu_header">
			<a href="http://www.google.nl">.home </a>&nbsp;&nbsp;&nbsp;&nbsp;
			<a href="http://www.google.nl">.personal </a>&nbsp;&nbsp;&nbsp;&nbsp;
			<a href="http://www.google.nl">.portfolio </a>

		</div>	
	</div>

GELINKT AAN CSS ( <link type="text/css" href="style.css" media="screen" rel="stylesheet"  /> :

#menu_header { position: absolute; top: 65px; left: 55px }
#menu_header a:link{ font-size: 24px; color: #FFFFFF; text-decoration: none }
#menu_header a:hover{ font-size: 24px; color: #c9abc9; text-decoration: none }
#menu_header a:active{ font-size: 24px; color: #c9abc9; text-decoration: none }
#menu_header a:visited{ font-size: 24px; color: #FFFFFF; text-decoration: none }

bvd, Cyrille

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

 


Goed ik heb nu op verschillende sites gekeken en vind het probleem niet.

www.runnersonly.nl/maarten

Dit is even een test pagina die ik heb gemaakt. In FF staat hij wel netjes in het midden, maar in IE6 niet. Ligt dit aan IE 6 of doe ik wat fout? En is er iemand toevallig met IE 7 doet hij het daar wel goed in?

Alvast bedankt.

Ff je link goed maken...
probeer je padding s ff overal op 0px te zetten. Mss hlept dat.

De link is correct alleen DJR doet het fout.

IK zal even de padding checke.

De link begint niet met http://. Dit probleem komt voor als je de url intikt en niet maakt met de editor...

Ik had hem toegevoegd met dat Link toevoegd knopje. Ik heb knippen plakken gedaan, dus kan zijn dat ik dat http:// weg geplakt had.
Foutje van mij dus :p

Maaruh.. werkt ie nou?

Dat van padding 0 was eigenlijk ook al gezegd in dit topic, maar je hebt het niet toegepast in je site.

Nee nog niet. Uiteraard heb ik eerst padding 0 gezet. Zo heb ik hem nu ook even geupload. Het probleem is dan dat de header helemaal boven aan gaat staan.

Ook zit ik met het probleem, dat de div.bodytext die ik ingesteld heb op height:400; niet groter wordt.(Dat is het vakje met de stippellijnen).

Op w3schools heb ik niets gevonden waarom de height niet zou werken. :S

Wat ik mij ook afvroeg, werkt CSS beter in combinatie met HTML of beter met bijv. php/asp? Of maakt dat totaal geen verschil?

HTML heb je nodig, klaar. ASP en PHP produceren weer HTML (moet je zelf doen via die talen).

Dan zet je de padding op 0, en de padding van de header zo dat ie weer iets naar beneden schuift. Ik ga ff kijken naar de height. :D

Poster: ccc
Op w3schools heb ik niets gevonden waarom de height niet zou werken. :S

 

Omdat je wel moet aangeven of deze pixels of procenten moet zijn.... anders weet je browser niet wat ie er mee moet en doet ie niets. Daarnaast is height een eigenschap die slecht ondersteund/geinterperteerd word door verschillende browsers.

Ik heb vanalles geprobeerd , px, %, auto. De andere divs werken wel gewoon.

Je hebt height verkeerd geschreven. Dat is het gewoon :P
Ik ben nog eens voor je gaan spelen.

1. Je moet consequenter zijn in hoe je code, anders wordt het een rommeltje. Gebruik of classes, of id's.

2. Probeer de code kort te houden. jouw color div was nutteloos, je kon de color ok gewoon in de container zeten.

3. Het is color, niet font-color. De standaard kleur is trouwens zwart, dus die had je niet vast hoeven te zetten. De validator heeft trouwens liever van wel. :P

4. Je hoeft de afmetingen van je plaatje er niet bij te zetten, als je het plaatje gewoon op ware grootte wil weergeven.

Dus.. dit kwam er bij mij uit, niet perfect, maar ik heb geen tijd meer. Moet gaan eten.

style.css
   
div.container {
    margin: auto;
    width: 560px;
    background:#FFFFFF;

}
div.header {
    width:    auto;
    height: 100px;
    border: 1px solid gray;
   
    margin: 20px 20px 0px 20px;
   
    }
   
div.menu {
   
    margin: 10px 50px 20px 50px;
    width:    auto;
    border: 1px solid gray;
    font-size: 12px;
    color: black;
    font-family:Verdana, Arial, Helvetica, sans-serif;
   
    }
   
   
div.bodytext{
   
    width: auto;
    height: 400px;   
    margin: 0px 20px 400px 20px;   
    border:dotted;
    border-width:2px;
   
  
    }
   
div.footer {   
    width: auto;
    height: 50px;
    color:#0033FF;
    border: 1px solid gray;
    margin-top: 10px;
    }   
   
body {
    background-color:#000000;
    }
   
En je index.html

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Menu</title>
<link rel="stylesheet" type="text/css" xhref="style.css">
</head>

<body>

<div class="container">

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

<div class="menu">
<p class="bold"><img xsrc="buttonhome2.jpg" width="70" height="23"><img xsrc="buttonlinks.jpg" width="70" height="23"><img xsrc="buttondownloads.jpg" width="70" height="23"><img xsrc="buttoncontact.jpg" width="70" height="23"></p> 
</div>

<div class="bodytext">test

test


</div>

<div class="footer"></div>

</div>

</body>

</html>

Soms is het wel handig de height en width van een plaatje te geven. Vooral als je met transparent PNG's werkt en deze d.m.v. een scriptje IE6 proof maakt.

Poster: ceesietopc
Je hebt height verkeerd geschreven. Dat is het gewoon :P
Ik ben nog eens voor je gaan spelen.

1. Je moet consequenter zijn in hoe je code, anders wordt het een rommeltje. Gebruik of classes, of id's.

2. Probeer de code kort te houden. jouw color div was nutteloos, je kon de color ok gewoon in de container zeten.

3. Het is color, niet font-color. De standaard kleur is trouwens zwart, dus die had je niet vast hoeven te zetten. De validator heeft trouwens liever van wel. :P

4. Je hoeft de afmetingen van je plaatje er niet bij te zetten, als je het plaatje gewoon op ware grootte wil weergeven.

Dus.. dit kwam er bij mij uit, niet perfect, maar ik heb geen tijd meer. Moet gaan eten.

 Haha zoveel moeite had je niet hoeven doen, maar super bedankt.
Hij deed het even niet en toen heb ik hem door de html validator gedaan en nu wel.
Ik zie dat je ove al een X voor hebt gezet zoals bij de href van de stylesheet link en de img src. Heeft dit een bepaalde reden? Want niets doet het daardoor. Zodra ik de X weg haal doet de pagina het wel.
Maar het gaat erom dat de site in het midden staat!.
Ik ga nu even de css vergelijken met mijn css zodat ik kan zien wat ik fout heb gedaan.
Nogmaals bedankt.

Ohja, en dat van dat height was gewoon stom. Maar het was al laat. :p

Nog een vraag ik zal ook even kijken op w3schools,
div.header {
    width:    auto;
    height: 100px;
    border: 1px solid gray;
  
    margin: 20px 20px 0px 20px;
  
    }
Ik heb hier ingesteld dat de header 20 van boven moet beginnen, 20 van rechts 0 van onder en 20 van links.

Links en rechts doet ie goed, maar boven doet ie niet.

De functie margin houdt in\: zoveel ruimte MOET er aan de bovenkant min vrij zijn. Jij gebruikt m nu om te positioneren.

ipv dit, kan je beter dit doen:

position: relative;
top: 20px;

en die margins zo:

margin-left: 20px;
margin-right: 20px;

Ik wil iedereen bedanken voor zijn hulp. Ik heb in ieder geval een hoop geleerd.

Mijn website is ingeleverd. Ik zal deze week de uiteindelijke versie online zetten.

Helaas ziet de website in IE anders uit dan in FF, maar ik ben tevreden.

Nu afwachten wat voor cijfer ik ervoor krijg .

Voorlopig stop ik even met CSS/website moet nog een hoop andere dingen doen.

Ik ben weer eens begonnen met een website.

Is alweer een anderhalf jaar geleden dat ik er het laatst mee heb gewerkt.

Ik zit met een probleem. Ik heb een tabel gemaakt.
Het volgende staat in die tabel:

<td width="147" class="kop">ONZE PRODUCTEN</td>

In mijn css file staat het volgende.

td.kop{

font-size: 14px;
font-weight:bold;
text-align:center;
font-family:Arial, Helvetica, sans-serif;
border: 5px #FFFFFF;

}

Hij doet alles. Alleen hij pakt de eigenschap border niet.
In dreamweaver geeft hij wel de witte rand weer, maar zodra ik hem publiceer krijg ik geen witte rand te zien. Zowel in IE als FF geeft hij niets weer.

Iemand enig idee wat ik fout doe?

Overruled de style van de TABLE deze eigenschap niet ?
Staat border wel gedefinieerd voor de tabel ?