Re: [css-d] 3 column layout w/ L/R columns being the same height as middle column?
Greg Wilker skrev: Hello Everyone, I am looking for a solid header/footer w/ 3 column layouts where the background for all three columns will be the full height of the longest column. I found this: http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks If you can copy the code without being too distracted by the Danish language explanation I have this example: http://webdesign101.dk/www/layout/eks/eksempel_6.html http://webdesign101.dk/www/layout/eks/eksempel_7.html is an axtension of the same example, and demonstrates how a user can switch between different layouts. Note the 3 item menu, Højrestillet artikel is right aligned article, Midtstillet artikel is centered article og Venstrestillet artikel is left aligned article. Best regards Jørgen Farum Jensen http://webdesign101.dk __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Before after
Various places I've seen these pseudo-elements ::before and ::after. What's the difference between these and :before and :after? -- Best regards Jørgen Farum Jensen Håndbog i webdesign: http://webdesign101.dk/wwwbog/udgave2/ Webdesign med stylesheets: http://webdesign101.dk/cssbog/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Font-color issue
Ib Jensen skrev: Thats what I meant to do, going back to the original stylesheet(s) thats more or less followed whith the template. It's from a book : Modernes Webdesign, by Manuela Hoffmann, http://pixelgraphix.de She should know something about it . I do, too, and have written a couple of well thought of books about it in your native language, ref. my signature. Includes lots of well documented templates and explanations of the whys and wherefores. A whole chapter on best practice typography as regards web pages. Also available at local Public Libraries, if it's not on loan to someone. That happens a lot. -- Med venlig hilsen Jørgen Farum Jensen Håndbog i webdesign: http://webdesign101.dk/wwwbog/udgave2/ Webdesign med stylesheets: http://webdesign101.dk/cssbog/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] CSS table layout
I'm working my way thru Kevin Yank's and Rachel Andrews' book, Everything you know about CSS is wrong. That's not entirely true, but that aside I do have a serious problem with the premier example in the book. This example is pretty fairly replicated on this page: http://webdesign101.dk/fv/ The problem is the small amount of background coloring that shows above the first link in the menu. I've put a background color on the headers to illustrate that these cells have the samme amount of padding? margin? cellpadding? whatsit? The book example displays the same problem, but less visibly because of a less demanding coloring scheme. For now as viewed in Firefox 3.0.5, Opera 9, Chrome. Safari/Win shows a small deviation in the news column. A helping hand would be appreciated. Best to you all -- Jørgen Farum Jensen http://webdesign101.dk __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS table layout
Gunlaug Sørtun skrev:
Jørgen Farum Jensen wrote:
http://webdesign101.dk/fv/
The problem is the small amount of background coloring that shows
above the first link in the menu.
Add...
#nav {vertical-align: top;}
...to get the alignment you want without a gap. Same in the other
table-cells if you want their content to line up that way.
regards
Georg
Of course, and thank you.
Just as if it really was a HTML-table.
It's been well on 8 years since I've
been on that wagon.
--
Med venlig hilsen
Jørgen Farum Jensen
Håndbog i webdesign: http://webdesign101.dk/wwwbog/udgave2/
Webdesign med stylesheets: http://webdesign101.dk/cssbog/
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Footer at bottom of page/viewport
I have created an example page with the intent of demonstrating how you can have a footer at the bottom of the viewport, when the page has less content that the viewport alllows for, or, if there is more content than the viewport allows for, the footer is displayed at the bottom of the page. http://webdesign101.dk/cssbog/kildekode/figur17-19en.html Works nicely except in Opera. Why is that? -- Regards Jørgen Farum Jensen http://www.webdesign101.dk __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] CSS dropdown in Safari
I have encountered a problem with a CSS-driven dropdown navbar in Safari 3 beta for both Win and OSX. The problem is visible and described in a test page: http://webdesign101.dk/cssmenu/ I would dearly like a CSS hack that passes style declarations to Safari only. Best regards Jørgen Farum Jensen http://webdesign101.dk Find din nye laptop på kelkoo.dk. Se de gode tilbud her - http://dk.yahoo.com/r/pat/mm __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] CSS dropdown in Safari
I have created a CSS-driven dropdown navbar, sample page: http://webdesign101.dk/cssmenu/dropdown.html Please notice that the level 2 submenus have a 1 pixel overlap to the level 1 menu. I have introduced that because Safari 3 on both Windows and OSX systems otherwise puts the menu 1 pixel below the bottom of the level 1 menu. This is not a satisfactory solution, but I am at a loss to explain why this is necessary and what else can be done. Jorgen Farum Jensen http://webdesign101.dk --- Jørgen Farum Jensen http://www.webdesign101.dk Trænger du til at se det store billede? Kelkoo giver dig gode tilbud på LCD TV! Se her http://dk.yahoo.com/r/pat/lcd __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS dropdown in Safari
--- David Laakso [EMAIL PROTECTED] skrev: Where did it go? Switched browsers and got a different page with a heading title Sidehoved. Best, ~dL Nowhere... My testpage at http://webdesign101.dk/cssmenu/dropdown.html is perfectly visible to me in IE6, IE7, Firefox 2, Safari Beta 3 Opera 9. The page header is a graphic with the white text superimposed on the graphic. The navbar is just below it, but purposely shown fully unfolded. Below that is some unimportant text. -- Jorgen Farum Jensen http://webdesign101.dk Audi, Fiat, Peugeot, Skoda, Porsche, Toyota, Ford - Kelkoo har brugte biler til en hver smag! Klik her for at sammenligne priser.(http://dk.yahoo.com/r/pat/mmb) __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] IE Bug - but which?
Test page: http://www.webdesign101.dk/x/usenet/cssmenu2.html This pages suffers from a curious effect, which is, when viewed in IE6, all of the content shifts to the left when hovering over the menu the first time. --- Jørgen Farum Jensen http://www.webdesign101.dk __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Universal selector
Is there any difference at all between
* #leftcol {font-family:arial,sans-serif;}
and
#leftcol * {font-family:arial,sans-serif;}
--
Med venlig hilsen
Jørgen Farum Jensen
http://www.webdesign101.dk
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Submenu width in list navbar
I'm trying to create a version of the dropdown navbar Eric Meyer describes in his book More Eric Meyer on CSS. My aim is to have a greater width on the submenus than the width of the parent elements. My sample page is at http://www.webdesign101.dk/www/cssmenu/dropdownmenu/eks14.html It works as intended in IE, but not in more standards compatible browers like Firefox and Opera. I wonder if it is at all possible, or if I'm just unable to see thru the maze of descendant elements? Best regards Jørgen Farum Jensen www.webdesign101.dk __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE6 and hover - csshover.htc problems
Diane Tomlins wrote: Christian, Yes, I've tried double quotes, single quotes, and no quotes - - none of it makes the slightest difference. :( I did manage to load the problem page up on my personal web space. The whole thing is a mock-up so there are a lot of comments in the html and the css, but that'll be cleaned up later. The test page is here: http://home.comcast.net/~drt603/dallas/index4.htm Diane - your page has a lot of Dreamweaver crap, can it be a question of some sort of Jscript error? In your place I would try my .htc fil in a real simple page to establish whether its a page construction problem or some sort of server problem. Hope you find a solution, it's a nice page. Best regards Jørgen Farum Jensen www.webdesign101.dk __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Width of floats
Derek de Jong wrote: Internet Explorer is including the margin *inside the box width*, while This is what I did'nt know. W3C-spec browsers (rightly) are not. This is why you're getting different results. Carmen would be correct if *both* boxes had a 2% margin, but because only one does (#colright), so this should sum to 100%. The escape character is handy What you can do is add: width: 51%; margin: 2%; w\idth: 49%; Thanks for this and other suggestions. I know about the various hacks (or IE CSS filters to use a nicer phrase), but of course you have to identify what behavior it is that must be corrected. Best regards Jørgen Farum Jensen www.webdesign101.dk __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Width of floats
I have a problem with the following css:
#colleft {
text-align:justify;
width:49%;
float:left;}
#colright {
text-align:justify;
width:49%;
float:left;
margin-left:2%;}
This a two-column layout which works well in for example Firefox, but not
so well in Internet Explorer, which insists on a sum of the widths which is
smaller than 100 percent.
This makes it impossible to get the floated columns to line up with header
and footer, se example page at
http://www.webdesign101.dk/x/cssdiscuss/ex1.html
It would be nice to have some sort of explanation for this behavior,
perhaps even a better remedy than the one I have used, to pass a smaller
margin width to IE?
Best regards
Jørgen Farum Jensen
www.webdesign101.dk
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Nyhedsbrev nr. 23, oktober 2005
--- Nyhedsbrev nr. 23 - oktober 2005 --- Du får denne meddelelse, fordi du har tegnet abonnement på mit nyhedsbrev. Info og mail- adresser i bunden af denne tekst. -- * Annonce * * Du får det bedste udbytte af disse nyhedsbreve * og af mit websted Webdesign 101, hvis du også * læser mine bøger Webdesign – illustreret håndbog * og Webdesign med XHTML. Bøgernes fås i * boghandelen og direkte hos forlaget Globe A/S. * +++ + Webdesign - illustreret håndbog er nu udkommet + + i en stærkt revideret, opdateret 2. udgave. + + Læs om ændringerne på websiden om den nye + + udgave: + + http://www.webdesign101.dk/wwwbog/udgave2/ + +++ *** ALFAFILTER *** En læser har gjort mig opmærksom på, at den efterhånden meget populære Firefox-browser fortolker CSS3-egenskaben *opacity*. Jeg kigger på sagen i artiklen: http://www.webdesign101.dk/showcase/opacity/index.html *** NYE NOTER OM CSS-MENUER *** Jeg har i tidens løb skrevet adskillige håndfulde artikler om anvendelsen af HTML-lister som basis for konstruktionen af menuer, såvel flade menuer som dynamiske menuer. Jeg har nu gjort mig selv og forhåbentlig mine læsere den tjeneste at kondensere stoffet i 3 artikler: Introduktion til stylesheet-formaterede menuer: http://www.webdesign101.dk/www/cssmenu/index.php CSS dropdown menu og menubar: http://www.webdesign101.dk/www/cssmenu/dropdownmenu.php Dynamiske menuer med HTML-lister: http://www.webdesign101.dk/www/cssmenu/dynamiske_menuer.php *** DANSKSPROGET FIREFOX HJEMMESIDE *** Den er ikke let at finde, men der findes en fin dansksproget hjemmeside for Firefox-browseren med en gennemgang: http://www.mozilla-europe.org/da/products/firefox/start/central.html *** FIND TIPS OG TRICKS I MIN SANDKASSE *** http://www.webdesign101.dk/showcase/index.php *** TEKST I FLERE KOLONNER *** Jeg bliver af og til spurgt om dette emne, og har hidtil henvist til den manuelle metode. Webstedet A List Apart har imidlertid nu offentliggjort artiklen Introducing the CSS3 Multi-Column Module: http://www.alistapart.com/articles/css3multicolumn med en guide til hvorledes du ved hjælp af noget JavaScript kan lave få browseren til at tolke de CSS3-egenskaber, der per automatik inddeler din tekst i et vilkårligt antal spalter med et vilkårligt spaltemellemrum. Du kan ikke sende e-mails til denne liste, så brug af svar- eller reply-knappen i dit e-mail program kan du godt opgive. Vil du fortælle mig noget eller stille et spørgsmål, må du skrive til nedenstående adresse. Nyhedsbrevets arkiv: http://www.freelists.org/archives/webdesign101/ Arkiv over nyhedsbreve 2002-2004: http://www.webdesign101.dk/w/gen/newsletter.php Nyhedsbrevets RSS newsfeed: http://www.freelists.org/archives/webdesign101/feed.rss Webdesign 101 e-mail nyhedsbrev. Hvad det er for en størrelse, forklares på websiden http://www.webdesign101.dk/w/gen/newsletter.php. Abonner ved at sende en e-mail til mailto:[EMAIL PROTECTED] med ordet 'subscribe' (uden anførselstegn) som emne. Opsig abonnementet ved at sende en e-mail til mailto:[EMAIL PROTECTED] med ordet'unsubscribe' (uden anførselstegn) som emne. - Dette nyhedsbrev er udsendt 5. oktober 2005 til 231 abonnenter. Med venlig hilsen Jørgen Farum Jensen http://www.webdesign101.dk mailto:[EMAIL PROTECTED] __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Nyhedsbrev nr. 23, oktober 2005
Jørgen Farum Jensen wrote: --- Nyhedsbrev nr. 23 - oktober 2005 --- Du får denne meddelelse, fordi du har tegnet abonnement på mit nyhedsbrev. Info og mail- adresser i bunden af denne tekst. -- Terribly sorry, sent my newsletter til the wrong list manager. Please disregard. Best regards and abject apologies Jørgen Farum Jensen www.webdesign101.dk __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Borders on link in focus
I'm concerned with the small dotted border around a link element in focus. I wish to format the link with the :focus pseudo class, and the browser-generated border tends to destroy the design effect I want. Is there any way to suppress this effect? Best regards Jørgen Farum Jensen http://www.webdesign101.dk __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Borders on link in focus
Christian Heilmann wrote: I'm concerned with the small dotted border around a link element in focus. No, except for JavaScript, and that defeats is purpose. The ugly dotted borders do help a lot of users. Thanks for the answers. My point was that I wanted to provide a clearer indication of the element in focus that I feel the dotted borders provide. I have no wish to use the Javascript method, since it detracts from the accessibility of the web page. Best regards Jørgen Farum Jensen www.webdesign101.dk __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Background overlapping in float layout
I'm having a problem with an example page I've constructed, http://www.webdesign101.dk/x/cssdiscuss/eksempel_8.html The problem is confined to IE, which displays a band of background color in the right hand column on window resize. I'm at a loss to explain what is happening. Any help would be appreciated. Jørgen Farum Jensen __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
