Re: [css-d] An unordered list as a navigation bar.
That looks rather like a lot of spaghetti CSS code. There must be a simpler way! Anyone know? On 6/7/05, Peter Hyde-Smith [EMAIL PROTECTED] wrote: http://webpages.charter.net/angusair/bayonehome6.html http://webpages.charter.net/angusair/bayonecss6.css 06/07/05 Robert: Check these pages out. This my version of what I think you're trying to do. Took for-ever to work this out. Good Luck. Cheers, Peter FF1.0.4, WinXP Home w/SP2 -- Robert P. J. Dumas [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] Retrieve margin-top value from other ids + example link
Thanks Roger for your reply.
I have build up a page to show you what i'm talking about
http://www.hablablow.com/fixedTest/css_d_page.htm
I imagine Js would give me the best control of what i try to achieve.
But i'd like to keep positions managed in css.
Logically:
nonFixedLayer{
margin-top: fixedLayer1+fixedLayer2;
}
To make things not easyer, and scalable, the second fixed layer doesn't
have a height defined
Isn't there a pure css solution for this simple calculus ? Such as
adding values with ancestors or parent nodes, inheritance...
The best step i'm into know: since 2 fixed layers are byh default
absolutely positioned have a greater z-index, i use an empty layer
called dummy ( containing a single ;nbsp ), with a line-height value,
to push the non fixed layer to its correct position from the top of the
window. But this breaks somehow when text in fixed layer just above
wraps on several lines.
A javascript solution added to the em based top margin would give yo
the best of both worlds.
Any ressource to point ?
Thanks.
Guillaume.
If you want to avoid javascript, you could set the margin-top of the
static part in ems. That way the top edge will be dependent on the
user's font settings. However, this method is inexact. A javascript
solution added to the em based top margin would give yo the best of
both worlds.
By the way, we could give much better advice if you could post the
page somewhere. Otherwise, all we can offer is generalizations.
Roger,
Roger Roelofs
Know what you value.
__
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] Re: A Photo Gallery/Online Journal with CSS
I don't think that this layout is particularly stunning, but so far, it's been getting the job done. I think each image I post should have a caption (though alt and title tags Do you mean alt and title attributes? might be good enough if I made sure to tell the visitors to my site that they should mouse over each picture for full effect) Which is rather problematical for users who don't use a mouse. And annoying for those who do. The alt attribute houses the text replacement for the images, the title attribute extra information. However, if your image does need extra information, a caption is a good idea. Sadly enough HTML has no out-of-the-box solution for that. -- Chris Heilmann Blog: http://www.wait-till-i.com Writing: http://icant.co.uk/ Binaries: http://www.onlinetools.org/ __ 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 DIV spacing bug
On 6/8/05, Holly Bergevin [EMAIL PROTECTED] wrote:
From: Matthew LaVelle [EMAIL PROTECTED]
http://test.cimediagroup.com/
Everything looks fine in all browsers except there's a small space/gap
between the hdr DIV and the body DIV in Internet Explorer 6 on Windows
machines.
Add {display: block;} or {vertical-align: bottom;} to the image in your div
with the class of hdr. Using a descendent selector/combinator should work
fine, and either one of those properties should clear up the gap in IE.
I second David's recommendation to increase the text zoom and see what you
think.
hth,
~holly
Changing
div class=hdr
img
src=http://test.cimediagroup.com/templates/052505/images/INDEX-nav-top.jpg;
alt= /
/div
so that it is all on one line will get rid of the gap.
Nairn
__
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] img w/id padding
is it possible to adjust padding to two different images within a td
as shown below?
td.img#imageone {padding: 4px;}
td.img#imagtwo {padding: 0px 4px 0px 2px;}
I'm drawing a blank right now.
Thanks,
Gerry
Certified Macromedia Flash Designer
www.thespikeranch.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/
Re: [css-d] IE6 DIV spacing bug
Thanks to Holly and David. Big thanks. I couldn't get rid of the
height on the body DIV since it has a background-image applied to it.
However, as soon as I applied display: block to the img in the hdr DIV
my problems were over. Thank you guys both very much!
-Matthew
On 6/7/05, Holly Bergevin [EMAIL PROTECTED] wrote:
From: Matthew LaVelle [EMAIL PROTECTED]
http://test.cimediagroup.com/
Everything looks fine in all browsers except there's a small space/gap
between the hdr DIV and the body DIV in Internet Explorer 6 on Windows
machines.
Add {display: block;} or {vertical-align: bottom;} to the image in your div
with the class of hdr. Using a descendent selector/combinator should work
fine, and either one of those properties should clear up the gap in IE.
I second David's recommendation to increase the text zoom and see what you
think.
hth,
~holly
__
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] Lighting Up Buttons when using XML
I have studied Eric Meyer's article on Navigational Styles which gives direction on how to highlight a menu item to indicate that's the page a user is on. It's a technique he uses on his Website here: http://meyerweb.com/eric/css/. The problem I have is that my site doesn't user server-side includes. It uses ASP.NET and XML. I have a header.aspx file where the constant text for every page is contained, which includes: HEAD, TITLE, and the beginning tag for BODY. It also has the elements for the menu, which are formatted with styles, not tables. I have put an ID on each menu item to uniquely identify it. For example: span id=home class=navbaritemA HREF=/Home/a/span Now the challenge is how to get the Home menu item to be formatted differently when the home page is rendered. It's rendered through XML and the body of the page is in the CDATA tag, so I can't get to the navbaritem. Can anyone think of a way to do this with styles? Thanks! Deb My __ 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] disappearing image
Hi Everyone, Two issues right now: 1. In IE, the image in the (currently yellow) div is being cut off, whereas in Mozilla it appears as I'd hoped. I've set a negative margin on the yellow div, to align that link with all the other links. What's the best way to accomplish this? I need the div with the blue outline to grow vertically to underneath the last button (Brand Manual Guidelines). Perhaps there's a way to include the last button in with the rest of the nav bar, but have it vertically aligned with the bottom of the blue div, instead of putting it in the blue div with the negative margin? 2. In Mozilla, my body text div is not centered in the div with the blue outline, but is in IE (I want it to be). Thanks so much for any help you can offer. I'm really stumped. Here's the link: http://dev.10plus1.com/TorontoUnlimited/template-02.htm Steve __ 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] Lighting Up Buttons when using XML
span id=home class=navbaritemA HREF=/Home/a/span Now the challenge is how to get the Home menu item to be formatted differently when the home page is rendered. It's rendered through XML and the body of the page is in the CDATA tag, so I can't get to the navbaritem. Can anyone think of a way to do this with styles? You'd need to set an ID on the body and use a contextual selector with that one. However, as you are using .NET, why don't you simply generate this navigation item differently? If this is the only navigation, then the current page should not be a link anyways. A navigation is crucial site functionality, not only a visual challenge. Personally I use PHP to generate the highlighted state and CSS to make it look different. http://www.onlinetools.org/tools/easynav/ -- Chris Heilmann Blog: http://www.wait-till-i.com Writing: http://icant.co.uk/ Binaries: http://www.onlinetools.org/ __ 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] Anyone can answer this...even noobs :) its about divs
[EMAIL PROTECTED] schrieb: What is the difference between float and absolute divs? At which point in the layout process did you encounter this matter? You may have found similarities between floating and positioning. Can you specify what observed behavior of these did make you unsure about if there is no difference? What book or manual, or what part of the specification are you referring to in asking this question? Is there a real life layout you could provide an URL for to show the problem an answer to your question would fix? Ingo __ 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] design decisions by the W3C?
Greetings all,
Several times lately, while reviewing various parts of CSS, I have
found myself saying why does it work like this? There are several
things that seem overly complex, or things that seem obvious to me
but aren't there. I'm new at this, and the guys at the W3C are very
smart, so I'm sure there's a reason--I would just like to know what
it is. Anyone have any thoughts?
Three things in particular:
1) For absolute positioning, wouldn't it make sense to allow the
author to specify the containing element/(positioning context)
directly in the CSS? Something like this:
/* Put the navbar near the top left corner, keep it fixed as
you scroll */
#navbar { position: 1em auto auto 1em viewport fixed; }
/* Put a dropshadow on the image (actually, it would be easier
to have an actual CSS keyword for dropshadows, but you get the idea */
#dropshadow { position: 5px 5px auto auto #image; }
2) A way to express units using mixed-unit expressions. For example,
maybe you want to have a menu where the individual items are indented
from their headings by 2em, and the menu has a 1px border around it.
When you hover over it, you would like the border to thicken up and
turn red, but you don't want the text to jump around. No problem:
#nav a {
padding-left: 1em;
border-left: 1px solid black;
}
#nav a {
padding-left: 1em - 4px;
border-left: 5px solid red;
}
In some cases, you could have problems with these expressions coming
out negative...although font size is the only one I can think of
offhand. The simple way to handle it is that, for the places where
it could be an issue, it clips to 1.
3) Some way to do columns straightforwardly:
div { display: column; }
div#first, div#last { width: 10%; }
div id=first
I will be 10% of the width of my parent element (probably
the body)
/div
div
I will be 80% of the width of my parent element (probably
the body)
/div
div id=last
I will be 10% of the width of my parent element (probably
the body)
/div
--Dks
__
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] Slowly reaching for the ammo to shoot myself in the foot....
You folks were so helpful the last time, I'm coming to you once again. Background: The site is being designed on the Domino platform in Lotus Notes. (I've been doing this quite successfully since 1996 without trying to completely employ CSS). Domino does toss in some stuff on it's own (the small bit of JavaScript at the top and crap in the Body tag). And it sometimes tosses in surprises (p and br mostly) where you don't want them... however, for the most part, this system works wonderfully. Sample Site: http://notesdev.cc.sunysb.edu/mbishop/newdoit.nsf CSS: http://notesdev.cc.sunysb.edu/mbishop/newdoit.nsf/doitheader.css http://notesdev.cc.sunysb.edu/mbishop/newdoit.nsf/doitmenu.css http://notesdev.cc.sunysb.edu/mbishop/newdoit.nsf/doitmain.css After your last bit of help, everything was going along smoothly, It looked great in IE, acceptable in Firefox, and acceptable on the mac, except for IE on the mac, (but screw it). All of a sudden, I have a gap at the top and left side that I can NOT get rid of. I am also having problems trying to create a box that will float inside #rightContainer in the top right corner and grow as needed, while having the text in #rightContainer neatly wrap around it. All attempts result in the box of text sitting on top of the text in #rightContainer. As if that weren't frustrating enough, when this happens, the content of #rightContainer pushes down on top of the footer in FireFox I have to present this tomorrow and I'm ready for the rubber room. Please share your wisdom. Thanks! Melissa Bishop University Web Developer Division of Information Technology SUNY at Stony Brook Good Morning is an oxymoron! - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Team Coast Guard -- America's Life Savers DISCLAIMER Disclaimers are useless. If I sent this to you by mistake, and it contained confidential information, I should be severely punished my email privileges revoked. I can't stop you from redistributing this anyway and no text between these lines will protect my fanny in a court of law. :-) __ 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] Anyone can answer this...even noobs :) its about divs
Good evening Gunlaug, It was foretold that on 8-6-2005 @ 04:35:07 GMT+0200 (which was 4:35:07 where I live) Gunlaug Sørtun would write: snipped a bit GS My whole response should be seen as a *serious* joke, which most older GS members on css-d took it as, I suppose. Lol i see that now. Indeed, css is fun !!! -- Best regards, Luc _ http://www.dzinelabs.com Need a website? http://www.w-orx.com Powered by The Bat! version 3.5.25 with Windows 2000 (build 2195), version 5.0 Service Pack 4 and using the best browser: Opera. Being idle is very hard work because everyone is against you. - Oscar Wilde __ 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] Argh - Help please!
Hey everybody! Got a couple of problems (what's new). This is the site in question. I've posted previously about this site, so it may look familiar. http://rathehun.beplaced.com/ This is the reference, table-based site, which I have to convert: http://cfl.in/ Problem 1: Vertical image centreing. The logo in the top left hand corner needs to be centred in the orange box. I know I've asked this before, but googling for it didn't help, so I'm back here. I did try and use one of the solutions - it's got Ingo Chaos name on it, but I'm guessing that I'm doing something wrong there. The CSS code is in the section marked /*Image Centreing */. Problem 2: When one hovers over one of the links in the left navigation bar, it is highlighted, using a lightish background. How does one extend the background, to make it one universal width, not dependant on the length of the text below? Problem 3: If you look at Landscaping Vardenahalli Interaction etc, I've used br / tags to space them out so that they look like they're in a straight line. I can't seem to think of how to do this using padding, as the text lengths are different. Validation-wise : I'm aware that it doens't validate, but that's because of the hosts ads. I'm working on acquiring a domain of my own, this site will probably pay for that :). Thanks, Cheers all, Rahul. -- . Rahul Gonsalves [EMAIL PROTECTED] + 91.98866 19365 . __ 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] 100% body height in FireFox
Hi,
I am attempting to make two black stripes down the height of the body
of a page. I have set one as a background image, which is properly
spanning the height of the page, even when scrolling. I have been
trying to set the other stripe by adding a border-right to the body
and defining its width. It works fine, however, in FireFox, once the
page scrolls, the border line is cut off at 100% of the initial screen
display and does not scroll past that point. I'm using CSS in XHTML
1.0 transitional. Here's a code snippet of the CSS:
html {height: 100%;}
body {height: 100%; width: 769px; background: url(borderBG.gif)
repeat-y 150px; border-right: solid #00 1px;}
Any thoughts on a better way to accomplish this without simply making
the two stripes as one background image...?
Thank you in advance,
Alexander Khost
http://www.deliciousdemon.com
201-709-1470
[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] Slowly reaching for the ammo to shoot myself in the foot....
[EMAIL PROTECTED] schrieb:
Sample Site: http://notesdev.cc.sunysb.edu/mbishop/newdoit.nsf
- you'll need a bg-image for a left faux-column
bg.png, width of 170px, color: your light blue;
#container { ... background: url(bg.png) repeat-y}
-zero the default margin/padding
body {... margin:0; padding:0;
-forget the height setting
#leftContainer { ... /*height: 600px;*/ }
-enable a min-height in your favourite browser
#rightContainer { ... /*height: 600px;*/
min-height:600px; _height:600px; }
-drop that non-sense
.quickLinks { /*position: relative; left: -35px; top: 10px; text-align:
left; width: 175px; background-color: transparent; z-index:
7;text-decoration: underline; */ }
-dito
#nav { /*left: 0px; width: 175px; background-color: transparent; */}
-again
ul.none li { ... /*left: 5px;*/ }
-and align the ul
ul.none {margin: 1em 0 0 1em; padding-left:0;}
Ingo
__
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] Curunir Hack -- New CSS hack?
At 01:20 PM 6/8/2005, Jasper Kuperus wrote:
When I was redesigning my homepage I found a CSS hack. Because I couldn't
find anything about this hack, it seemed to me that this hack isn't known
yet. So I named it after my homepage: The Curunir Hack.
http://shirmanos.student.utwente.nl/~jasper/index.php?id=5
Jasper, at first glance I thought this was very clever, but then I realized
that it only works when you're specifying {width: 100%;}. Your hack
{width: 100% -;} makes the width rule unparseable, so the browser renders
the div as though no width had been declared -- i.e., as wide as it can
make it, filling its container, automatically subtracting the margin,
padding, border width, etc.
Rather than insert a hyphen to break the width rule, why not simply
eliminate the width rule entirely, and enclose your div in a container of
the desired width?
Regards,
Paul
__
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] Argh - Help please!
Rahul Gonsalves wrote:
http://rathehun.beplaced.com/
Problem 1:
Vertical image centreing. The logo in the top left hand
corner needs to be centred in the orange box.
For that centering method to work, the wraptocenter div should have the
dimensions of the space where you want your image centered, not the
dimensions of the image. So you need something like:
.wraptocenter {
height: 175px;
width: 175px;
}
Problem 2:
When one hovers over one of the links in the left navigation
bar, it is highlighted, using a lightish background. How does one
extend the background, to make it one universal width,
Give your links display:block
.links a {
display: block;
}
And if you want to have the whole rectangular zone clickable in IE/Win you
should also add the Holly hack:
/*\*/
* html .links a {
height: 1px;
}
/**/
Problem 3:
If you look at Landscaping Vardenahalli Interaction
etc, I've used
br / tags to space them out so that they look like they're in a
straight line. I can't seem to think of how to do this using
padding, as the text lengths are different.
That's the most difficult one. The br/s do not fully solve the problem: if
you change the text size so that lines wrap differently the alignment is
lost.
A solution is to define four separate divs, two floated left, and two not
floated or floated right, and put a clearing element after the first two, so
to guarantee your desired alignment. Something like this:
- news1 (Excursions), floated left
- news2 (Mela), floated right
- clearing element
- news3 (Landscaping), floated left
- news4 (Varadenahalli Interaction), floated right
I haven't looked at the details, you can implement this in many variations.
Hope this helps a little,
Bruno
__
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] Curunir Hack -- New CSS hack?
Jasper Kuperus wrote: My question about this hack is, is this a real hack? And if it is, is it a new hack or is it a known hack? I may be wrong but the minus sign just kills the declaration. Doesn't it behave the same with no width at all? Thierry | http://www.TJKDesign.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/
[css-d] Displaying Data in Tabular Form - DIV vs. TABLE
I am working on some pages on a site in which I am trying to recreate tables using CSS with DIV's. I am having a hard time with this. Does anyone have any opinions about which is the best route to go? One of the pages I am working on is: http://www.trinityinfo.org/News/Weekly-Worship-Flier.php. As you can see the PDF images are larger than the text so the rows in the PDF column does not match up with the rows in the other two columns. Any help in this matter would be greatly appreciated. Steven A. Costello __ 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] 100% body height in FireFox
On Jun 8, 2005, at 3:25 PM, Alexander Khost wrote:
Hi,
I am attempting to make two black stripes down the height of the body
of a page. I have set one as a background image, which is properly
spanning the height of the page, even when scrolling. I have been
trying to set the other stripe by adding a border-right to the body
and defining its width. It works fine, however, in FireFox, once the
page scrolls, the border line is cut off at 100% of the initial screen
display and does not scroll past that point. I'm using CSS in XHTML
1.0 transitional. Here's a code snippet of the CSS:
How about this:
div id=barnbsp;/div
#bar {
background: black;
position: fixed;
top: 0;
right: 0;
left: 90%;
bottom: 0;
}
__
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] Displaying Data in Tabular Form - DIV vs. TABLE
I am working on some pages on a site in which I am trying to recreate tables using CSS with DIV's. I am having a hard time with this. Does anyone have any opinions about which is the best route to go? Yes, if it is tabular data, use a table. The main reason is that you do use the proper markup for the job and you can make your data accessible (you can connect the headers to each cell , something you cannot do with CSS). We all seem to agree that. h1Header/h1 is good and div class=headerHeader/div is bad, why is it so hard to do the same with tabular data? After all, you can style it: http://www.devarticles.com/c/a/HTML/HTML-CSS-and-tables-the-beauty-of-data/ my $.02, HTH Chris off to sleep to be fresh for @media. -- Chris Heilmann Blog: http://www.wait-till-i.com Writing: http://icant.co.uk/ Binaries: http://www.onlinetools.org/ __ 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] Displaying Data in Tabular Form - DIV vs. TABLE
Steven Costello wrote: I am working on some pages on a site in which I am trying to recreate tables using CSS with DIV's. I am having a hard time with this. Does anyone have any opinions about which is the best route to go? http://www.trinityinfo.org/News/Weekly-Worship-Flier.php. Why recreate a perfectly good table by using divs? It is _most often_ wrong to use tables as layout-tools for non-tabular content. It is _most often_ equally wrong to use divs as layout-tools for tabular content. Lists may sometimes work well as replacements for tables, but I see no reason for replacing or recreating the table you have (commented out) there now. regards Georg -- http://www.gunlaug.no __ 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] Displaying Data in Tabular Form - DIV vs. TABLE
Thanks Chris. Very nice informative and descriptive article. Steven Costello __ 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] consistent container height no matter the amount of content
Hello,
I am working on setting up a personal web site and I am testing on a
Mac in Mozilla. I have only tested briefly in other browsers, but one
problem I am noticing is the height of my container div only extends
to the amount of the content and not a fixed height. I want each page
to be the same height. I tried using height:100% on both the body and
container elements, but that doesn't work.
How can I accomplish this? I know JS is sometimes used to keep columns
all the same height and didn't know if that was also the only
solution for this problem or not. Anyway, to see what I am referring
to go to:
http://www.inspired-evolution.com/Resume.php
versus
http://www.inspired-evolution.com/Contact.php
I would want both these pages to have the exact same height...
CSS is at http://www.inspired-evolution.com/Gilbert.css
the divs in question are :
#wrapper_outer{/*wraps page*/
width:750px;
height:100%;
font-size:1em;
border-right: 5px solid #036;
border-left: 5px solid #036;
min-height:100%;
}
and
#wrapper_inner{/*creates wrapper div around textual content and footer*/
height:100%;
background-color:#036;
}
TIA for any assistance with this!
--
::Bruce::
__
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] css box positioning
yikes. I've been trying to redo a form without tables, and I'm really
struggling. Again, this is only for IE6.
Code to follow, also online at a
href=http://www.yomammashouse.com/css_effort_take23.htm;http://www.yomammashouse.com/css_effort_take23.htm/a
I have a container div (eventually will be two, equally sized, one
floated left, one right)...anyways, i'll let the code explain. It
looks really homemade, but i tried margins and padding uniform, but
this is the closest I could get it. It looks good on screen, but when
I print, or print preview it, the scale of the boxes are all screwy.
Any ideas?
Thanks in advance,
-D
!//
html
head
titlecss effort take 23/title
style type='text/css' media='all'
body { font-family:arial,sans-serif,serif;
font-size:10pt;
margin:50px;
padding:0px;
}
input { border:solid 1px #ccc;
font-size:12pt;
vertical-align:middle;
}
/style
/head
body
div id='containerBox' style='margin:0px; padding:5px; border:solid
5px red; position:relative; float:left; '
div id='vert_title' style='padding:0px; border:solid 5px blue;
float:left; width:1%; height:100px; writing-mode:tb-rl;
line-height:200%; text-align:center; '
TL/ Level 4:
/div
div id='form_items' style='padding:0px 5px 3px 0px; border:solid 5px
blue; border-left:0px; float:left; '
ul style='list-style-type:none; width:1%; text-align:right;
margin:0px; padding:0px; '
li style='width:20em; margin-bottom:3px;
margin-top:3px; '
label for='valid_name'Name/label
input type='text' id='valid_name'
style='margin:0px; ' //li
li style='width:20em; margin-bottom:3px; '
label for='valid_routing'Routing/label
input type='text' id='valid_routing' //li
li style='width:20em; '
label for='valid_ext'Extention/label
input type='text' id='valid_ext' //li
/ul
/div
/div
/body
/html
//-
__
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] validation problem
Hello everyone, Hope this isn't off-topic. I just finished a subsite as part of a larger redesign. The CSS validates but some pages won't validate as DOCTYPE XHTML 1.0 Transitional because of long URLs in navigation links. Is there anything I can do about this? I don't have any control over the actual URLs because they belong to external sites. Specific example: a href=https://asg.citp.uga.edu/alumni/index.asp?brand=gafundpage=makegiftaccntcat=75amount=250otheramt=0;UGA Secure Online Giving/a Any advice much appreciated. Regards, Jeanne Jeanne Prine, Webmaster University of Georgia College of Pharmacy [EMAIL PROTECTED] phone 706-542-5354 fax 706-542-5269 __ 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] consistent container height no matter the amount of content
I've seen the css attribute min-height work in some cases but then it
just dies in IE and won't work correctly. A functioning, albeit goofy,
workaround would be to just use a shim, but I'm sure somebody here
knows of a more graceful solution.
Jack Keller | cell7.org
On Jun 8, 2005, at 8:00 PM, Bruce Gilbert wrote:
Hello,
I am working on setting up a personal web site and I am testing on a
Mac in Mozilla. I have only tested briefly in other browsers, but one
problem I am noticing is the height of my container div only extends
to the amount of the content and not a fixed height. I want each page
to be the same height. I tried using height:100% on both the body and
container elements, but that doesn't work.
How can I accomplish this? I know JS is sometimes used to keep columns
all the same height and didn't know if that was also the only
solution for this problem or not. Anyway, to see what I am referring
to go to:
http://www.inspired-evolution.com/Resume.php
versus
http://www.inspired-evolution.com/Contact.php
I would want both these pages to have the exact same height...
CSS is at http://www.inspired-evolution.com/Gilbert.css
the divs in question are :
#wrapper_outer{/*wraps page*/
width:750px;
height:100%;
font-size:1em;
border-right: 5px solid #036;
border-left: 5px solid #036;
min-height:100%;
}
and
#wrapper_inner{/*creates wrapper div around textual content and
footer*/
height:100%;
background-color:#036;
}
TIA for any assistance with this!
--
::Bruce::
__
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-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] validation problem
The ampersands in the urls need to be escaped properly (amp;). Regards, Jachin Senior Web Developer InternetFiji.com On 6/9/05, Jeanne Prine [EMAIL PROTECTED] wrote: Hello everyone, Hope this isn't off-topic. I just finished a subsite as part of a larger redesign. The CSS validates but some pages won't validate as DOCTYPE XHTML 1.0 Transitional because of long URLs in navigation links. Is there anything I can do about this? I don't have any control over the actual URLs because they belong to external sites. Specific example: a href=https://asg.citp.uga.edu/alumni/index.asp?brand=gafundpage=makegiftaccntcat=75amount=250otheramt=0;UGA Secure Online Giving/a Any advice much appreciated. Regards, Jeanne Jeanne Prine, Webmaster University of Georgia College of Pharmacy [EMAIL PROTECTED] phone 706-542-5354 fax 706-542-5269 __ 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-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/
