[CSS] voor dummies.

dinsdag 11 januari 2005 @ 22:31:57 #151

DutchBlood

Ik probeer met css een div met ronde hoeken te maken. Dit kan met deze techniek: http://www.456bereastreet(...)easer_box_revisited/

Ik snap die techniek alleen niet helemaal. De flexibele breedte, maar niet de flexibele lengte van de box. Want de 'zijkant' van het voorbeeld(http://www.456bereastreet.com/lab/teaser/flexible/tsr-l.gif) is maar 114px hoog.

Kan iemand mij uitleggen hoe dit werkt?

dinsdag 11 januari 2005 @ 23:22:05 #152

Leshy

Held met sokken.

quote:
Op dinsdag 11 januari 2005 22:31 schreef DutchBlood het volgende:
Kan iemand mij uitleggen hoe dit werkt?

De borders langs de zijkant en de bovenkant zijn gewoon CSS-borders die netjes met breedte en hoogte meegaan. Hij gebruikt vier elementen om de plaatjes voor de hoeken als achtergrond weer te geven:

De teaser-div (hoek linksboven)

De <h3> (hoek rechtsboven)

Een wrapper div (hoek linksonder)

Een link met display:block; (hoek rechtsonder)

woensdag 12 januari 2005 @ 02:56:35 #153

Heliospan

(-_-)

quote:
Op zondag 9 januari 2005 21:52 schreef Chandler het volgende:
Helio; ikheb een voorbeeldje gemaakt; kom echter niet zo verder

http://upload.bruggema.nl/files/helio.html

- wanneer ik #top aanpas verdwijnt me 'logo'.
- menutjes naast elkaar met spacing krijg ik niet voor elkaar.
- borders ook niet mooi (zijn weer weg gehaald)

Deze miste ik even, sorry.
Ik ben bang dat ik niet zo'n CSS-held ben. Over het algemeen kloot ik net zo lang door tot het in elke browser goed werkt. Ik heb even met je code gekloot, maar nu werken de menuutjes niet meer

. Het resultaat kun je hier zien, maar je hebt er waarschijnlijk niks aan, want het werkt voor geen meter. Sorry, maar ik hoop dat het je op een andere manier nog lukt. Ik ga weer verder met iets waar ik me wel in kan redden; PHP

» Help mee met DrugsMag.nl! «
Chillosophy, Gras is groen

woensdag 12 januari 2005 @ 10:59:42 #154

Chandler

No prob Helio; al ziet het resultaat er toch al best leuk uit vind ik zelf

The people who lost my respect will never get a capital letter for their name again.
Like trump...

zaterdag 22 januari 2005 @ 11:50:05 #155

Tomek

Take on the world!

Hier ook nog maar even posten dan. Aangezien het andere topic (terecht) dichtgesmeten is.

Chandler hier ben ik

Overigens heb ik nog geen oplossing gevonden. iemand vroeg of ik een doctype had, en ja die heb ik

Ik heb dus een mooi menu in elkaar geflanst met <ul> en <li> units

Wil ik alleen nog even de tekstkleur van een link in een actieve <li> aanpassen, op dezer wijze:

1
2
3
4

li:hover {background-color:#EAF0B8; color:#000000; z-index:15;}
li:hover a:link{color:#000000;}
li:hover a:visited{color:#000000;}
li:hover a:hover{color:#000000;}

Firefox geen probleem natuurlijk, maar internet explorer snapt er weer geen bout van

Of doe ik iets verkeerd

dan heb ik nog een vraag:
voor dat menu heb ik nu in mijn stylesheet allemaal van dit soort regels gebruikt:

1
2
3

ul {list-style:none; width:138px; background-color:#9AB77F;}

li {position:relative; padding:3px; background-color:#9AB77F; z-index:9;}

onder andere. maar als ik nu ergens een simpele opsomming wil maken, bijvoorbeeld:

1
2
3
4
5

dan gebruikt hij daar natuurlijk ook die stylesheets voor, dus komt het er net zo uit te zien als mijn menu

weet iemand hoe ik bovenstaand opsomming kan stylen naar default instelling zeg maar?

mijn dank zal groot zijn

zaterdag 22 januari 2005 @ 13:18:41 #156

Leshy

Held met sokken.

quote:
Op zaterdag 22 januari 2005 11:50 schreef Tomek het volgende:
Firefox geen probleem natuurlijk, maar internet explorer snapt er weer geen bout van

Internet Explorer herkent alleen :hover op een <a> element.

quote:
weet iemand hoe ik bovenstaand opsomming kan stylen naar default instelling zeg maar?

Het is eenvoudiger om je menu gewoon iets van <ul id='menu'> te maken, en de CSS voor het menu via ul#menu {...} te regelen

zaterdag 22 januari 2005 @ 13:53:57 #157

Tomek

Take on the world!

quote:
Op zaterdag 22 januari 2005 13:18 schreef Leshy het volgende:

[..]

Internet Explorer herkent alleen :hover op een <a> element.
[..]

daar gebruik ik dus een speciaal bestandje voor die er voor zorgt dat internet explorer het wel herkent.
hover werkt nu in internet explorer al wel over <li> bijvoorbeeld. maar ik zal daar nog eens naar kijken. dat bestandje heb ik niet zelf gemaakt, en snap er ook weinig van.

quote:
Het is eenvoudiger om je menu gewoon iets van <ul id='menu'> te maken, en de CSS voor het menu via ul#menu {...} te regelen

dat was ook mijn plan, ik wou het alleen andersom doen. maar weet jij toevallig welke css styles ik moet gebruiken om de <ul> en <li> weer als standaard te krijgen?

zaterdag 22 januari 2005 @ 14:29:39 #158

Maffioso

ff een vraagje:
Klopt het dat als je body { margin: 0; } gebruikt, dat dat hetzelfde is als marginwidth, marginheight, leftmargin en topmargin bij elkaar? En wordt dat door de meeste browsers ondersteunt?

zaterdag 22 januari 2005 @ 15:25:10 #159

Tomek

Take on the world!

quote:
Op zaterdag 22 januari 2005 14:29 schreef Maffioso het volgende:
ff een vraagje:
Klopt het dat als je body { margin: 0; } gebruikt, dat dat hetzelfde is als marginwidth, marginheight, leftmargin en topmargin bij elkaar? En wordt dat door de meeste browsers ondersteunt?

ja das hetzelfde, alleen opera doet er moeilijk over geloof ik.

zaterdag 22 januari 2005 @ 16:12:01 #160

Leshy

Held met sokken.

quote:
Op zaterdag 22 januari 2005 13:53 schreef Tomek het volgende:
daar gebruik ik dus een speciaal bestandje voor die er voor zorgt dat internet explorer het wel herkent.

In dat geval raakt MSIE misschien in de war omdat je twee :hover elementen gebruikt. Ik zou proberen gewoon li:hover te gebruiken met een speciale class voor de list items. Of, als je inderdaad de methode gebruikt om het menu een id te geven, dan kun je volstaan met ul#menu li:hover {...}.

quote:
dat was ook mijn plan, ik wou het alleen andersom doen.

Is nogal een omslachtige methode, maar voor de default CSS styles die je nodig hebt kun je misschien even hier kijken.

quote:
Op zaterdag 22 januari 2005 14:29 schreef Maffioso het volgende:
Klopt het dat als je body { margin: 0; } gebruikt, dat dat hetzelfde is als marginwidth, marginheight, leftmargin en topmargin bij elkaar?

Ja, en het wordt ondersteund door alle browsers, inclusief Opera.

Echter is Opera de enige browser voor zover ik weet, die in plaats van een margin op de body het meer correcte padding toepast, dus voor hetzelfde effect daar zul je body {margin: 0; padding: 0;} moeten gebruiken.

zaterdag 22 januari 2005 @ 16:18:53 #161

Tomek

Take on the world!

quote:
Op zaterdag 22 januari 2005 16:12 schreef Leshy het volgende:

Is nogal een omslachtige methode, maar voor de default CSS styles die je nodig hebt kun je misschien even hier kijken.

mja, nou het punt is. ik gebruik in mijn style ook dingen als :

1	li li, ul li

das om genestelde listitems bijvoorbeeld te verbergen. maar ik vermoed dat waneer ik die allemaal ga aanroepen met <li id="menu"> , en vervolgens li#menu{bladiebla} dat het dan niet meer werkt.
dan moet ik namelijk ook

1	li#menu li#menu, ul#menu li#menu

gaan gebruiken en ik betwijfel of dat gaat werken.

tis een beetje lastig uit te leggen

maar bedankt voor de link, ik ga daar eens kijken

zaterdag 22 januari 2005 @ 16:21:49 #162

Tomek

Take on the world!

Overigens Leshy, jij als Operah deskundige

Weet jij hoe het kan dat als ik het volgende in mijn <header> tags heb staan

1	<LINK REL="STYLESHEET" HREF="stylesheet.css" TYPE="text/css">

dat operah dan niet meer reageert op <center>

Ik weet het, het klinkt vreemd maar het is echt zo.
Doe ik dan iets als <center><table><tr><td></td></tr></table></tcenter> dan wordt dat dus niet gecentreerd. haal ik die stylesheet weg, dan weer wel

zaterdag 22 januari 2005 @ 16:22:05 #163

Leshy

Held met sokken.

Mja, dan geldt opnieuw, ondersteunde MSIE maar child selectors.

Anders kon je gewoon ul#menu>li gebruiken, heb je geen last van geneste list items

zaterdag 22 januari 2005 @ 16:23:37 #164

Tomek

Take on the world!

quote:
Op zaterdag 22 januari 2005 16:22 schreef Leshy het volgende:
Mja, dan geldt opnieuw, ondersteunde MSIE maar child selectors.

Anders kon je gewoon ul#menu>li gebruiken, heb je geen last van geneste list items

idd, maar mocht je er belang bij hebben. ik heb een bestandje die je moet includen die er vervolgens voor zorgt dat bijvoorbeeld die hovers ook allemaal werken in internet explorer.

zaterdag 22 januari 2005 @ 16:26:46 #165

Leshy

Held met sokken.

quote:
Op zaterdag 22 januari 2005 16:21 schreef Tomek het volgende:
dat operah dan niet meer reageert op <center>

Geen idee. Net even zelf een testbestandje gemaakt, maar leverde geen problemen op. Mogelijk staat er iets in je stylesheet wat het effect van <center> teniet doet, geen idee.

Overigens is <center> sowieso nutteloos, daar heb je CSS voor

zaterdag 22 januari 2005 @ 16:30:05 #166

Leshy

Held met sokken.

quote:
Op zaterdag 22 januari 2005 16:23 schreef Tomek het volgende:
idd, maar mocht je er belang bij hebben. ik heb een bestandje die je moet includen die er vervolgens voor zorgt dat bijvoorbeeld die hovers ook allemaal werken in internet explorer.

Ik ken het, het IE7 project. Op zich wel erg handig, mogelijk dat ik het nog eens ga gebruiken als ik het zelf nodig heb

zaterdag 22 januari 2005 @ 16:30:34 #167

Tomek

Take on the world!

quote:
Op zaterdag 22 januari 2005 16:26 schreef Leshy het volgende:

[..]

Geen idee. Net even zelf een testbestandje gemaakt, maar leverde geen problemen op. Mogelijk staat er iets in je stylesheet wat het effect van <center> teniet doet, geen idee.

Overigens is <center> sowieso nutteloos, daar heb je CSS voor

volgens mij had ik het zelfs met een lege stylesheet geprobeerd, maar dat weet ik niet zeker.
ik zal nog eens kijken of er inderdaad niet ergens iets staat dat overruled.

zaterdag 22 januari 2005 @ 17:42:01 #168

Chandler

Hulde voor Tomek

The people who lost my respect will never get a capital letter for their name again.
Like trump...

zaterdag 22 januari 2005 @ 20:27:20 #169

Roonaan

Strictly

quote:
Op zaterdag 22 januari 2005 16:21 schreef Tomek het volgende:
Overigens Leshy, jij als Operah deskundige

Weet jij hoe het kan dat als ik het volgende in mijn <header> tags heb staan
[ code verwijderd ]

dat operah dan niet meer reageert op <center>

Ik weet het, het klinkt vreemd maar het is echt zo.
Doe ik dan iets als <center><table><tr><td></td></tr></table></tcenter> dan wordt dat dus niet gecentreerd. haal ik die stylesheet weg, dan weer wel

Niet inline elementen kan je niet centreren met text-align:center;

Daarvoor heet het immers ook text-align.

Dit is btw ook in IE zo als je deze uit quirksmode haalt met een goede doctype.

Wil je block-type elementen centreren zul je margin-left:auto;margin-right:auto; moeten gebruiken of wanneer toepasselijk margin:0 auto;.

zaterdag 22 januari 2005 @ 20:30:06 #170

Roonaan

Strictly

quote:
Op zaterdag 22 januari 2005 16:22 schreef Leshy het volgende:
Mja, dan geldt opnieuw, ondersteunde MSIE maar child selectors.

Anders kon je gewoon ul#menu>li gebruiken, heb je geen last van geneste list items

Makkelijkste oplossing is om je li's een classname te geven.

-r-

zondag 23 januari 2005 @ 14:35:33 #171

Tomek

Take on the world!

Ok, ik ben dus nog steeds bezig met mijn menu. Het begint er al aardig op te lijken.
Maar nu is er nog 1 ding wat ik niet voor elkaar krijg. In zoverre, niet in internet explorer.
Het menu staat hier http://www.not-allowed.nl/menu/menu.html

en wat ik nog wil is het volgende:

als je met de muis over een kop heengaat, of over een sub dan wil ik dat dan de kleur van de tekst verandert. het klinkt eenvoudig maar het lukt me niet.

de style die je krijgt als je over kop of sub heengaat is li#head:hover en li#sub:hover

nu verander ik de kleur van de links op de volgende manier:

1	li#head:hover a:link, visited{color:red;}

dit werkt in firefox, maar niet in internet explorer. weet iemand hoe ik dit in internet explorer ook aan de gang kan krijgen? ik wil het eigenlijk niet met een javascript doen en zo de class veranderen, maar echt met css.

iemand?

zondag 23 januari 2005 @ 15:05:06 #172

Maffioso

Ik heb een achtergrond image gemaakt van 750px breed en 10px hoog. Hoe kan ik die met css zo gebruiken dat hoe hoog het browserwindow ook is die achtergrond image altijd totaan beneden doorgaat?

Vroeger kan dat in html gewoon door een table een hoogte van 100% mee te geven, maar dat mag helaas niet meer. Dus hoe doe ik dat in css?

zondag 23 januari 2005 @ 15:08:57 #173

Tomek

Take on the world!

quote:
Op zondag 23 januari 2005 15:05 schreef Maffioso het volgende:
Ik heb een achtergrond image gemaakt van 750px breed en 10px hoog. Hoe kan ik die met css zo gebruiken dat hoe hoog het browserwindow ook is die achtergrond image altijd totaan beneden doorgaat?

Vroeger kan dat in html gewoon door een table een hoogte van 100% mee te geven, maar dat mag helaas niet meer. Dus hoe doe ik dat in css?

http://www.w3schools.com/css/css_background.asp

nu mijn vraag weer

zondag 23 januari 2005 @ 15:57:25 #174

Roonaan

Strictly

quote:
Op zondag 23 januari 2005 15:08 schreef Tomek het volgende:

[..]

http://www.w3schools.com/css/css_background.asp

nu mijn vraag weer

1	<li id="head" onmouseover="this.className='hover';" onmouseout="this.className='';">

En zoek het verder zelf maar uit, want dat schijnt jouw houding ten opzichte van anderen ook te zijn

zondag 23 januari 2005 @ 17:56:43 #175

Maffioso

Ok ik ben nog steeds bezig met mijn achtergrond die ik altijd over de hele hoogte van het browservenster wil zien.
Ik heb dit in mijn css script staan:

1
2
3
4
5
6
7
8
9
10
11
12

body {
   margin: 0;
}
#maincontainer {
   position: absolute;
   width: 750px;
   height: 100%;
   top: 0px;
   left: 50%;
   margin-left: -375px;
   background-image: url(images/bg_main.gif);
}

In Firefox werkt het prima alleen in IE zie ik het plaatje maar 1 keer staan en gaat hij niet door naar beneden. Weet iemand hoe ik dat op kan lossen?

Zie hier resultaat: http://home.quicknet.nl/mw/prive/pjlammers/test/test.htm

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

» digital corner

» digital corner