[css-d] converting a layout of buttons to tableless
Hi, I have been converting some old table-based, doctype-free pages to HTML 4.01 strict and with tableless layout and semantic markup. I am not free to make many visual changes since users are currently comfotable with the layout. I am stumped on what to do about laying out some horizontal rows of buttons as shown in this link. http://peter.michaux.ca/temp/buttons.html There can be one or several buttons in a row. The buttons are currently distributed somewhat evenly throughout the row. I don't think it looks great but I understand why it is layed out this way in the pages. I actually want to change these buttons to anchor elements since they really are links. Also anchor links can be dressed up to look like buttons. When I have tried this it is possible for the link to have a line brake in the middle of it which is not acceptable and I am hoping to avoid many between all the words. If you have any suggestions about how to make rows of buttons with tableless layout techniques I would really like to know about it. Thank you! Peter __ 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] how high can z-index be reliably?
Hi, I haven't seen a specification on how high I can set the z-index. Perhaps it is browser specific. Is going up to safe? What happens in browsers if the number is too high? Thank you, Peter __ 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] why reply doesn't default to list?
Hi, I subscribe to many mailing lists and when I click reply it goes to the list. However with this list it goes to the original poster and the message is not shared for the benifit of all. Why is this? Also I may only be able to help a little and not be able to continue a private email conversation. Thanks, Peter __ 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] absolute positioning items in self-contained blocks?
Hi,
I am trying to turn a definition list into an attractive tabbed pane.
The user clicks on one of the definition titles and the associated
definition is set to display:block by JavaScript. The CSS part is
causing me some grief.
In the example below, I would like the grey to contain all of the
green . If this is the case, then there would be grey in the
bottom left side of the output (below the blue). I have used absolute
positioning and don't know if it is possible to do what I want. I hope
there is a simple way without altering any of my markup. Any
suggestions greatly appreciated.
Thanks,
Peter
tabbed pane
.tabbedPane {background:grey; position:relative;}
.panel {margin:0; left:10em; background:lightgreen; position: absolute;}
.tab {width:10em; cursor: pointer; background: lightblue;
float:left; clear:left;}
One
Usually people put some Greek in places like
this.Usually people put some Greek in places like this.Usually people put some Greek in places like this.Usually
people put some Greek in places like this.Usually people put
some Greek in places like this.Usually people put some Greek in
places like this.Usually people put some Greek in places like
this.Usually people put some Greek in places like this.Usually people put some Greek in places like this.Usually
people put some Greek in places like this.Usually people put
some Greek in places like this.Usually people put some Greek in
places like this.Usually people put some Greek in places like
this.Usually people put some Greek in places like this.
Two
Definition 2
__
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/
Re: [css-d] CSS to format as tabbed pane
Hi Paul, Thanks for the reply. Interesting approach. Is there anyway to avoid this line? > top: #em; /* move it down below list of DT tabs */ The reason this causes some grief is I don't know how many rows of tabs might exist or maybe I don't want to add padding to the dt elements without recalculating the top offset for the dd elements. There must be some trick like floating all the dt's to the left and all the dd's to the right with some clever clearing or something. Peter __ 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] CSS to format as tabbed pane
Hi, I'd like to learn how to use CSS to display a definition list as a tabbed pane. I think this would be a nice way to relate the tab and the content in case the browser is not CSS or the document is being presented aurally. Any tips on how to do this might get me headed in the right direction. The definition list would be simple HTML like Coffee Black hot drink Milk White cold drink The tabbed pane have the tabs along the top and a content cell below. I imagine the various elements would just be overlapping. I will be activating this with JavaScript so really I'm just interested in how to position these items. Then the JavaScript can change the visibility or display of the possible content cell. - | Coffee | Milk | -- | | White cold drink | -- Any ideas? Thanks, Peter __ 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/
Re: [css-d] Font-weight problems
The k looks pretty good to me. It doesn't really look bold. To me it looks a little thicker because it is bigger but it doesn't look bold. (Mac OS X Firefox and Safari) I was playing with bold and bolder font weights a couple days ago. Made no difference since the font on my computer only had normal and bold weights. Bolder always rendered the same weight as bold. Probably the same thing with light and lighter (and their 100 300 or whichever equivilants). If you want to make the kFA look perfect you may have to create a little image and use it thoughout the website. You could set it's width to a value in em's so it will expand and contract as the user changes the browser font size. Peter On 3/13/06, [EMAIL PROTECTED] <[EMAIL PROTECTED]> wrote: > Hi, me again, still struggling with the finer points of CSS! > > Except I think this one should be simple... > > My client has a logo "kFA" in which she has the body of the k as > tall as the FA part. This is in some font which naturally achieves > this. She wants the same effect throughout her website. > > So first I tried simply putting a BIG tag around the k, which worked > fine for the sizing but it was heavier and in larger text sizes it > displayed as bold. > > So I created a class and put a SPAN around the k, which has > font-size: 1.3em and font-weight: 100 (although I have also tried > font-weight: lighter). > > It doesn't seem any different! > > Please have a look and tell me if you see the same thing, especially > in larger browser text sizes, and if you can help me make it right! > > http://www.wdam.co.uk/clients/kfa/index.shtml > > Any and all clues gladly accepted! > -- > Flash Wilson - Web Design & Mastery - 0870 401 4061 / 07939 579090 > -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- > Work: www.wdam.co.uk Personal: www.gorge.org > __ > 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-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] My CSS is wrong or it's Firefox?
Hi,
Below is an HTML file that shows a simple little popup menu (with the
popups visible.) In Safari 1.3.2 they look the same but in FIrefox
1.5.0.1 the red box for "beta" is only as wide as the word beta. I
think it should extend to the right across all the orange.
The second version of the menu is the same but some JavaScript
"repairs" the problem.
Am I making a CSS mistake or is it Firefox?
Thanks,
Peter
Bug?
.JMenuItem {background: red;}
.JMenu {background: blue;}
.JPopupMenu {background: orange;}
.JMenuBar {background: lightgreen;}
.JMenuBar > .JMenu {display: inline;}
.JMenuItem {position: relative;}
.JPopupMenu {position: absolute;}
.JPopupMenu {top: 100%; left:0;}
firstItemFirstItemFirstItemFirstItemFirstItem
alphaalphaalpha
beta
nextItem
alphaalphaalpha
beta
firstItemFirstItemFirstItemFirstItemFirstItem
alphaalphaalpha
beta
nextItem
alphaalphaalpha
beta
document.getElementById('id1').style.width =
window.getComputedStyle(document.getElementById('id1'),null).width;
__
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] My CSS is wrong or it's Firefox?
Hi,
Below is an HTML file that shows a simple little popup menu (with the
popups visible.) In Safari 1.3.2 they look the same but in FIrefox
1.5.0.1 the red box for "beta" is only as wide as the word beta. I
think it should extend to the right across all the orange.
The second version of the menu is the same but some JavaScript
"repairs" the problem.
Am I making a CSS mistake or is it Firefox?
Thanks,
Peter
Bug?
.JMenuItem {background: red;}
.JMenu {background: blue;}
.JPopupMenu {background: orange;}
.JMenuBar {background: lightgreen;}
.JMenuBar > .JMenu {display: inline;}
.JMenuItem {position: relative;}
.JPopupMenu {position: absolute;}
.JPopupMenu {top: 100%; left:0;}
firstItemFirstItemFirstItemFirstItemFirstItem
alphaalphaalpha
beta
nextItem
alphaalphaalpha
beta
firstItemFirstItemFirstItemFirstItemFirstItem
alphaalphaalpha
beta
nextItem
alphaalphaalpha
beta
document.getElementById('id1').style.width =
window.getComputedStyle(document.getElementById('id1'),null).width;
__
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] creating an overlay div
Hi, Suppose I have an inline div and I want an invisible but perfectly matching div overlaying it. How do I do this so that when I resize the window or scroll the two div's remain overlayed? The reason I ask is for detecting a dragging item over a drop zone. The drop zone won't respond to the mouse pointer unless the drop zone has a higher z-index. However I want the draggable to appear above the drop zone. My idea is to have the drop zone on the bottom, the draggable in the middle and then a clear div on top of the drop zone at the heightest layer. That way the clear drop zone can respond to a mouse over. Thanks, Peter __ 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] dtd strict is adding a space below a gif in a div
Hi,
In the example below there is a green area below the image. I don't want
this area. If I remove the dtd then the green area goes away and leaves me
with what I want. How can I get rid of the green area if I want to write a
strict html doc
Thanks,
Peter
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";>
body {
margin: 0;
padding: 0;
}
#header {
background: lightgreen;
width: 100%;
}
__
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] collapsing divs
Hi,
Probably this has been discussed before but I can't find an answer to my
question. I hope someone can help me figure out what is going on with this
aspect of divs.
In the example attached below why doesn't the green div extend at least as
far down the page as the blue div? It seems to me that if the green div
contains the blue div in the code then also the green div should appear to
contain the blue div in the rendered view. Why did the CSS standards folks
decide to make CSS work so the green section collapes up? How can I make it
so the green div extends at least as far down the page as the blue div?
Thanks!
Peter
body {
margin: 0;
padding: 0;
}
#green {
background: lightgreen;
}
#blue {
background: lightblue;
width: 30em;
float: left;
}
asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf
asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf
asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf
asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf
text in the green
__
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] feedback about CSS info web page
Hi, I'm new here and have been reading the archives and find the posts really interesting. I've been learning about CSS for about a month and a friend of mine wants to learn too. So I wrote a few things I've learned on a page. I'm new still new at all this so I hope I got it right. I don't want to teach anything about table layout methods. If anyone can give me feedback I would be very interested to read it http://members.shaw.ca/petermichaux/store/GettingStarted.html Thanks, Peter __ Do You Yahoo!? Tired of spam? Yahoo! Mail has the best spam protection around http://mail.yahoo.com __ 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/
