[css-d] div height in IE
http://www.buzzjeske.com/untitled-1.htm I have a centered div mainBlock that contains a div leftNav that is floated left. I need leftNav to be the same size as mainBlock . If I give leftNav a height of 100%, it kind of works in Firefox, although it appears to push bottom of leftNav into the footer div. In IE however, the height is not effected at all with a percentage value. I read on some other posts that the html and body containing blocks need their heights to be set in order to give the div some percentage to go off of. But setting them to 100% still has no effect. On a similar note, I read in an Eric Meyer book that the containing block always has to have it's height set, otherwise the nested block will default to auto. Setting mainBlock to 100% still has no effect on IE, but in FF it pushs the footer div past the bottom of the viewport causing a scroll. Any ideas on how to implement this? his? __ 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] div height in IE
I think what you need to do is to contain the floated leftNav in mainBlock. Try this: http://positioniseverything.net/easyclearing.html HTH, Prabhath http://nidahas.com On 5/27/05, Terry Jeske [EMAIL PROTECTED] wrote: http://www.buzzjeske.com/untitled-1.htm I have a centered div mainBlock that contains a div leftNav that is floated left. I need leftNav to be the same size as mainBlock . If I give leftNav a height of 100%, it kind of works in Firefox, although it appears to push bottom of leftNav into the footer div. In IE however, the height is not effected at all with a percentage value. I read on some other posts that the html and body containing blocks need their heights to be set in order to give the div some percentage to go off of. But setting them to 100% still has no effect. On a similar note, I read in an Eric Meyer book that the containing block always has to have it's height set, otherwise the nested block will default to auto. Setting mainBlock to 100% still has no effect on IE, but in FF it pushs the footer div past the bottom of the viewport causing a scroll. Any ideas on how to implement this? his? __ 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/
[css-d] Trouble with Mozilla and IE6
I am still a newbie to CSS and I am in the process of trying to build my first small site for a band. I have run into two problems : 1. On Mozilla browsers, the rounded image that is below the nav and the masthead, does not appear. 2. The layout is destroyed in IE / Win. The layout utilizes two floats, to which I have applied the display: inline feature and the child selector to attempt to correct the 3px bug. Nothing has solved the issue. Please help! thanks for taking the time to help a newbie out of a hole. the page is at : http://handoff.solidhex.com/ the css file is at : http://handoff.solidhex.com/c/c05.css note: the yellow colors are markers so I could see what the heck I was doing, and are not part of the design :) -patrick _ Dont just search. Find. Check out the new MSN Search! http://search.msn.click-url.com/go/onm00200636ave/direct/01/ __ 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] Website Stats
Hi there, Well, this is a non-coldfusion related question but since we have so many webmasters here, perhaps you know how to help. I am looking for a very simple tool, (i.e. it could be a toolbar on our web browser) which will calculate some basic statistics for the websites we are currently browsing. The most important one is the exact size of the current page, including HTML code, CSS, JS, images and any other media. I have searched every corner of the web (hehe not really possible) with no luck! any ideas? Giorgoc __ 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] def list :: pcIE fix?
The problem is in your br. You have put clear=all inside the tag. You need to style it as BR style=clear:all; font-size:1px Actually in CSS it is clear:both not clear:all. http://www.sitepoint.com/blog-post-view?id=238086 -- 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/
[css-d] Re: alt tag in CSS?
On 5/27/05, Bruce Gilbert [EMAIL PROTECTED] wrote: I don't suppose there is a way to give an image an alt tag There is no alt tag. Perhaps you mean the alt attribute? when you are calling the image as a background in CSS is there? Background images are background, i.e. presentational and not part of the content. As they are not content, it would be pretty pointless being able to specify alternative content for them. So - no, there isn't. -- David Dorward http://dorward.me.ukhttp://blog.dorward.me.uk __ 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] Re: Base font size
On 5/26/05, Mike Davies [EMAIL PROTECTED] wrote: I would like to know if it is possible to set the base font size using css so that the text is rendered the same size by all browsers and is still resizeable, ie not defined in pixels. No, it isn't. I suggest sticking to a base size of 100% and trust that your user's are happy with their own preferences. -- David Dorward http://dorward.me.ukhttp://blog.dorward.me.uk __ 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] Re: link style question
On 5/26/05, Barbara Dozetos [EMAIL PROTECTED] wrote: Does a:visited override a:hover? The two selectors you list both consist of a pseudo-class and an element name. This means they have the same specificity. As a result it is the order they appear in the style sheet that decides which overrides the other. The selector specified last overwrites any properties already specified in the former. http://www.w3.org/TR/CSS21/cascade.html#specificity -- David Dorward http://dorward.me.ukhttp://blog.dorward.me.uk __ 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] alt tag in CSS?
jack fredricks wrote: in general, layout and decorative (by this i mean no real content) images shouldnt have an alt tag (to be more precise, their alt tag should be alt= [no space]). Background images are pretty much always decorative. Or rather, if they're not decorative, then they shouldn't be background images, and shouldn't be specified in CSS either. __ 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] alt tag in CSS?
Bruce Gilbert wrote:
I don't suppose there is a way to give an image an alt tag when you
are calling the image as a background in CSS is there? div
id=image/div or is the rule of thumb, if the image requires an
alt tag, specify in the html??
TIA
it's no good way but you can try
div class=image01span class=altAlternative text/span/div
div#image01 {background-image: url(your_image.png);}
div#image01 span.alt {display: none;}
it'll behave in simmilar way to alt atribute of the img tag in text
browsers...
luci
--
:. :.: ::: :
luciash d' being aka luci alias Lukas Masek
__
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] Trouble with Mozilla and IE6
Patrick, On May 27, 2005, at 2:20 AM, Patrick Jackson wrote: I am still a newbie to CSS and I am in the process of trying to build my first small site for a band. I have run into two problems : 1. On Mozilla browsers, the rounded image that is below the nav and the masthead, does not appear. the page is at : http://handoff.solidhex.com/ the css file is at : http://handoff.solidhex.com/c/c05.css You have this background: transparent url(/img/logoban.gif) top-left no-repeat ; change it to this background: transparent url(/img/logoban.gif) left top no-repeat; I removed the dash between top and left, and i reversed the order because I have trained to always put the horizontal number first. It is obvious which is which when using keywords, and either way will work. However, when using numbers, the only way to know which is which is by their order. hth 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] Website Stats
Quoting George: Hi there, Well, this is a non-coldfusion related question but since we have so many webmasters here, perhaps you know how to help. I am looking for a very simple tool, (i.e. it could be a toolbar on our web browser) which will calculate some basic statistics for the websites we are currently browsing. The most important one is the exact size of the current page, including HTML code, CSS, JS, images and any other media. I have searched every corner of the web (hehe not really possible) with no luck! any ideas? Giorgoc If you wish to analyse a page by size and much more, try the following tool: http://www.websiteoptimization.com/services/analyze/ To judge the size of a domain, you can use: http://www.yourcache.com/ which provides results rather fast. For a reliable count of IBL's and PR updates, the following is useful: http://www.mcdar.net/Q-Check/datatool.asp I don't see how your question relates to CSS though. You got the wrong number... try NNTP: alt.html or alt.www.webmaster or alt.internet.search-engines. Hope it helps, Roy -- Roy S. Schestowitz http://Schestowitz.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] Base font size
On 26/05/05, Mike Davies [EMAIL PROTECTED] wrote: Hi all, I would like to know if it is possible to set the base font size using css so that the text is rendered the same size by all browsers and is still resizeable, ie not defined in pixels. Try this article on font sizing with ems at clagnut.com: http://www.clagnut.com/blog/348/ __ 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] alt tag in CSS?
Christian Heilmann wrote: it's no good way but you can try div class=image01span class=altAlternative text/span/div damn, sorry, it has to be with id: div id=image01span class=altAlternative text/span/div In fact, it is a horrible way, as display:none might not be read by some screen readers. Check screenreader visibility on the Wiki. ah, i didn't know this. thanks. but he could still use it in style sheet intended for screen media as written there (http://css-discuss.incutio.com/?page=ScreenreaderVisibility) luci -- :. :.: ::: : luciash d' being aka luci alias Lukas Masek __ 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] Website check please - problems on windows?
On 5/27/05, Luca Balboni [EMAIL PROTECTED] wrote: Hi all, I am completing a website and I am not able to check it on Windows configurations. It seems to work fine on Mac, but on windows IE6 seems to lose the white background of the main container,. Also, thewho we are menu on the top seem to stretch all the width of the page when active. Can anyone please confirm this? The address is: http://www.worldadventurer.net Nice site. Did the background-as-divider thing not work? C __ 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] Always learning something new...
It looks very much like an XML command. I think it does something like importing XML data information. I didn't know it could actually be used in/as a style sheet as such. Arno style type=text/css media=screen /*![CDATA[*/ data /*]]*/ /STYLE __ 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] Always learning something new...
I have seen this technique used several times now: style type=text/css media=screen /*![CDATA[*/ data /*]]*/ /STYLE I thought I was pretty knowledgeable in CSS but have no clue what this is used for. Can someone point me to where I can read up on this technique and it's purpose? It is what you need to do to embed scripts or styles in XHTML documents: http://www.w3.org/TR/xhtml1/#h-4.8 However, it is much cleaner to keep the CSS in a separate file when creating XHTML. -- 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/
[css-d] page check before I move on
Hi, I would really like some feedback on this page http://mouseriders.dk/test/dynatest.php before I move on with rest of the site. Thanks you and have a nice weekend Kim __ 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] alt tag in CSS?
luciash wrote:
Bruce Gilbert wrote:
I don't suppose there is a way to give an image an alt tag when you
are calling the image as a background in CSS is there? div
id=image/div or is the rule of thumb, if the image requires an
alt tag, specify in the html??
TIA
it's no good way but you can try
div class=image01span class=altAlternative text/span/div
div#image01 {background-image: url(your_image.png);}
div#image01 span.alt {display: none;}
it'll behave in simmilar way to alt atribute of the img tag in text
browsers...
This is NOT effective! Why go to all the effort of adding alt text in a
non-standard way, and then hide it from the tools that need it most?
Screen readers will hide the material marked display:none, defeating the
effort.
See: http://css-discuss.incutio.com/?page=ScreenreaderVisibility
Also: http://www.access-matters.com/screen-reader-test-results/
The best answer is this. If the image is important to the content, and
therefore requires ALT text, make it an HTML IMG and don't try to do
fake things with CSS background images and unnecessary spans.
--
Bob Easton
Accessibility Matters: http://access-matters.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] Re: Always learning something new...
On 5/27/05, Rick Clark [EMAIL PROTECTED] wrote: style type=text/css media=screen /*![CDATA[*/ data /*]]*/ /STYLE I thought I was pretty knowledgeable in CSS but have no clue what this is used for. In XHTML script and style blocks containg PCDATA instead of CDATA (IIRC XML DTDs can't specify CDATA). As a result any character with special meaning (such as or ) would have to be written as lt; or amp; since PCDATA is processed for character references. The ![CDATA[ block marks some content as CDATA explicitly. The CSS comments are a hack to deal with the issue that in HTML, style blocks ARE CDATA and XHTML served as text/html is supposed to be treated as tag soup HTML and not as XHTML. So you have to comment out the CDATA markers since they aren't allowed in CSS. What makes this even more impressive is that CSS never uses the characters or (unless someone slaps them in a comment), so you don't need to mark the block as CDATA in XHTML anyway! I find explicitly CDATA markers nasty at best and much prefer to link or script src=.../script my styles and scripts - thus avoiding the whole issue. -- David Dorward http://dorward.me.ukhttp://blog.dorward.me.uk __ 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] alt tag in CSS?
it's no good way but you can try div class=image01span class=altAlternative text/span/div damn, sorry, it has to be with id: div id=image01span class=altAlternative text/span/div In fact, it is a horrible way, as display:none might not be read by some screen readers. Check screenreader visibility on the Wiki. -- 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] alt tag in CSS?
Hey Luci, that's a really neat idea. The nav system I devised when quite new to CSS has spacer GIFs with alt attributes, but I've never been completely happy with it. Your way is better. How so? Because it can fail in more than one scenario? The alternative text is there to - explain what is going on when no images are available - explain what is going on when the image cannot be loaded None of the solutions mentioned here yet do cater for both scenarios. Let's please not repeat the whole what is the best image replacement technique again... http://www.mezzoblue.com/tests/revised-image-replacement/ -- 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/
[css-d] Text Just to Right of Centered Image
Hello, I would like to add a copyright symbol just to the right of a logo which is centered horizontally on the page. I would also like the top of the copyright symbol aligned with the top of the image. Here is the table equivalent of what I am trying to do (but am trying to learn how to do things the right way): table width=100% tr td/td td align=centerimg src=logo.png/td td valign=top(c)/td /tr /table Another thing which I can do easily with tables is evenly space X items across a page (e.g. 5 images). Is there a way to do this with CSS? Thanks, Chris __ 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] Styling text input boxes question
I have done some testing on input type=text box styling and am a bit
troubled that I cannot find a good solution to my problem.
Say we have a text box:
input type=text size=2 maxlength=2 name=whatever /
If I use a style like this (on a windows machine):
input {
font-family: sans-serif;
font-size : 9pt;
border:1px solid gray;
padding-top:0px;
padding-bottom:0px;
margin-top:1px;
margin-bottom:0px;
}
The result is a text box that is about 3 times as wide as it should be.
I have substituted different font names in place of sans-serif and it
seems that Arial is the culprit (Verdana gets it closer to the right size).
What can I modify in the style to make this box be an actual width of 2
characters?
Thank you.
--
Chester
[EMAIL PROTECTED]
Don't make waves and you won't drown. You won't reach land either...
__
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] Re: advice for complex background image?
On 5/27/05, Theodore Serbinski [EMAIL PROTECTED] wrote: i have a new design comp of a new layout for our website here: http://www.washsq.com/layouyt01.jpg i'm playing around with the XHTML/CSS but i'm not sure what is the best and simplest method for cutting up that graphic and displaying as either some BG or even some absolutely placed div on top. You've got a border down the left, which can be applied to the body, and a network cable blending into a grid which can be applied to the div containing the main content, and a logo/heading image which should go in the foreground in an h1. All the rest is plain colour (although you might want to use some 1x1 background images to get exact pixel colour matching) and text. -- David Dorward http://dorward.me.ukhttp://blog.dorward.me.uk __ 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: advice for complex background image?
http://www.washsq.com/layouyt01.jpg You've got a border down the left, which can be applied to the body, and a network cable blending into a grid which can be applied to the div containing the main content, and a logo/heading image which should go in the foreground in an h1. All the rest is plain colour (although you might want to use some 1x1 background images to get exact pixel colour matching) and text. Well the border part I've figured out... I just have a 1 x 768px image that is set as the bg for the body this creates the shadow effect perfectly. I agree with the title image graphic being an h1 as well no problems there. But that graphic of the cable, whew still having trouble figuring out the best bet for that image. The hard part is that it fades into the blue and black bars. Either I take this an entire big image and have it on top of the blue and black bars with the content on top of that (the text) or I cut it up into 3 slices, one for the bg of the black bar, blue bar, and the white content area. Thoughts? ted __ 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: advice for complex background image?
Theodore Serbinski wrote: Well the border part I've figured out... I just have a 1 x 768px image that is set as the bg for the body this creates the shadow effect perfectly. I agree with the title image graphic being an h1 as well no problems there. But that graphic of the cable, whew still having trouble figuring out the best bet for that image. The hard part is that it fades into the blue and black bars. Either I take this an entire big image and have it on top of the blue and black bars with the content on top of that (the text) or I cut it up into 3 slices, one for the bg of the black bar, blue bar, and the white content area. Thoughts? ted __ 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/ The problem with putting the shadows in the body is it makes the layout fixed (you can't position with anything but pixels). I suggest using 3 divs there; make all 3 relatively positioned, and shift the first one to the left the width of the left shadow, the second one to the right the width of the left shadow plus the right shadow, then shift the third one back the width of the right shadow. Then just give the first div the left shadow background with a background position of top left, then second div the right shadow background with a background position of top right, and the middle one a white background with black borders (or you can merge the black borders into the shadow pictures). As mentioned, the title should be an h1. For the cables, I suggest surrounding the rest of the content minus the h1 at the top in a div, make that div relatively positioned with no offset, then slice the cables starting just before the fade (so the left side of the graphic contains the right side of the blue bars). Then absolutely position a div with the cable graphic as a background image, in the top right. Then simply give the rest of the elements a right margin large enough to prevent the text from flowing under the cable graphic. You might have to experiment here, because putting the right margin on the element containing the bars will likely screw up the effect. It might be better to mark up the text inside (probably with an h2 for the first bar, and a ul for the second bar), give them both no backgrounds, and put the margins on them. You could also add padding to the outer div that surrounds everything, but this will have the same problems as adding the margins to all child elements. The advantage of doing it this way is that the size of the padding is in one place, making it easier to adjust. You'll have to experiment to find the right way. Sorry if this is a bit confusing, if you don't quite follow it, I can explain with examples and/or diagrams. -- http://www.mozilla.org/products/firefox/ - Get Firefox! http://www.mozilla.org/products/thunderbird/ - Reclaim Your Inbox! __ 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: advice for complex background image?
Theodore Serbinski wrote:
Hi Kelly,
The entire website is going to be fixed width at 768px ... I know
pros/cons to this but it seems to the most reliable method to date and
all of the top CSS designers switched back to fixed design. But thanks
for the tip for using it as liquid.
As for the graphic of the cables, I think I'm in agreement (although
slightly confused as to what you mean).
What I am thinking... I make the blue and black bars their own divs,
with a content div below that.
I then slice up that cable image into 3 rows and put those
respectively in the black, blue, content divs as the background-image
(since the background image will be ABOVE the background color of
blue, black, white).
Seems simple enough, although I'm wondering if there is a more elegant approach.
Make sense?
ted
Yes. Actually, there is a more elegant solution. I used to slice my
background images up, but it's easier and technically better to simply
use an absolutely positioned div with the image in the background
instead. Here, I'll give an example:
div id=wrap
divThis is the first line of text./div
divThis is the second line of text./div
divContent.../div
/div
That's about the structure, right? I would make this adjustment:
div id=wrap
div id=cables/div
divThis is the first line of text./div
divThis is the second line of text./div
divContent.../div
/div
Then try this:
div#wrap{position: relative; (rest of styles...)}
div#cables{position: absolute; top: 0; right: 0; background-image:
url(cable background image); width: (width of image); height: (height of
image)}
Then you just have to give the other three div's margins equal to that
image's width (don't make them shorter than that image, though; if you
want the text to stop before the cable image, use padding). That frees
up the backgrounds of the div's for whatever else you want, and the
plus is that you don't have to slice the image up at all. As long as
you get enough of the graphic that the entire fade is part of the
graphic, then it'll line up. Even better than this, use an h2 for the
first line of text (since it's a secondary header), and use an
unordered list (ul) for the links below that. Then you don't have to
use div's at all (div is technically only supposed to be for
situations where no other element makes sense. Here, an h2 and a ul
make more semantic sense, though you have to float the li's to make it
horizontal).
Oh, and about that one pixel line between the first and second div.
If your background is white (and it looks like it is), you can enforce
that with 1 pixel of margin on either the top of the second div or the
bottom of the first div instead of using a border ;)
--
http://www.mozilla.org/products/firefox/ - Get Firefox!
http://www.mozilla.org/products/thunderbird/ - Reclaim Your Inbox!
__
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: advice for complex background image?
On 5/27/05, Christie Mason [EMAIL PROTECTED] wrote: Is this true? all of the top CSS designers switched back to fixed design. I hope not, but if it is true is it because of the difficulties in creating liquid CSS designs, or is there some other reason? From all of my research/examples it seems fixed-width design is back to the norm. Liquid was good but then with screen resolutions of 1600x1200 websites were just getting too big. Sure you could come up with a nifty Javascript solution for keeping a site in a range of widths but it seems fixed widths are common place. 744 and 768px widths seem to be the ideal numbers as well. ted __ 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] CSS - Looking Down the Road....
From: Syntactic: Jim Wilkinson [EMAIL PROTECTED] I am curious to pick the brains of some of you CSS gurus out there about something. Without going into too much detail, are there facets of CSS that are coming down the pipe in the not so distant future that excite you? I'm no guru, but I'm looking forward to being able to use background images as borders (CSS3). That sounds purely aesthetic, and so it is on one level, but on the other hand, the fact of the matter is that developers often resort to some sort of extra HTML in order to create the illusion of image borders. It's another step toward separation of structural markup from presentation. Moreover, it will be a lot easier to use border images on fluid layouts (since at present probably the easiest way to create a border image is to do a repeat-y of an image which is the full width of the container, which can only be done with a fixed width). tim Tim Gallant http://www.pactumgroup.com Basic tutorials: http://www.pactumgroup.com/tutorials/ Web dev FAQs: http://www.pactumgroup.com/tutorials/faq.php Techblog: http://www.pactumgroup.com/techblog ** __ 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: advice for complex background image?
You do know z-index only applied to positioned elements, right? But regardless, in this case, if you'd managed to get the text over the image, the image would have disappeared (because the text and the white background are on the same level). If you give the text a right margin, you can get it to wrap before the image. Just, if you don't want the text to wrap right where the image ends, use margin for the image and padding between the image and the text (if you don't, any background images on the elements won't line up). -- http://www.mozilla.org/products/firefox/ - Get Firefox! http://www.mozilla.org/products/thunderbird/ - Reclaim Your Inbox! __ 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] CSS Form Problem
I believe the text between the two text boxes: To needs to be contained within a label tag. It is at present a tag without text. I'm not sure exactly what that means to the browser, but it seems to affect the float that you are looking for. Joel Goldstick www.columbuswebmakers.com Christopher Harris wrote: The problem: I have a form, and everything is lining up properly except one line. It's the line with Square Feet: [Text Box] To [Text Box]. The problem is that I can't get them to line up on the same line. __ 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] CSS Form Problem
On 5/28/05, Christopher Harris [EMAIL PROTECTED] wrote: I know it's because the labels and the boxes have display: block Why do the inputs need to be floated (or display:block, for that matter)? Putting float:left: on only the labels seems to work fine in Firefox. __ 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/
[ADMIN - OT] Re: [css-d] do H tag levels matter in Search engines?
[EMAIL PROTECTED] wrote: I had a general question about H tags (H1 , H2, H3 etc). Does the level of H tag matter when it comes to Search engine visibility? This is not a CSS related question. It would be better asked in the web design list. http://webdesign-l.com/ -- Bob Easton Accessibility Matters: http://access-matters.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] CSS Form Problem
I thought about that - but there is a way to do it without as much typing. I have it fixed now. Gunlaug Sorten replied to me and gave the answer I was looking for. Basically, one mandatory CSS line and an optional one regarding the vertical alignment of the word To. I figure - the less you have to type, the more efficient it is. Kind of like using recursive funtions. A..laziness. - Chris From: [EMAIL PROTECTED] [EMAIL PROTECTED] To: Christopher Harris [EMAIL PROTECTED] CC: css-d@lists.css-discuss.org Subject: Re: [css-d] CSS Form Problem Date: Fri, 27 May 2005 18:01:27 -0400 I believe the text between the two text boxes: To needs to be contained within a label tag. It is at present a tag without text. I'm not sure exactly what that means to the browser, but it seems to affect the float that you are looking for. Joel Goldstick www.columbuswebmakers.com Christopher Harris wrote: The problem: I have a form, and everything is lining up properly except one line. It's the line with Square Feet: [Text Box] To [Text Box]. The problem is that I can't get them to line up on the same line. _ Dont just search. Find. Check out the new MSN Search! http://search.msn.click-url.com/go/onm00200636ave/direct/01/ __ 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] Trouble with Mozilla and IE6
2. The layout is destroyed in IE / Win. The layout utilizes two floats,
to
which I have applied the display: inline feature and the child selector to
attempt to correct the 3px bug. Nothing has solved the issue. Please
help!
Hi, try this...
div#globalnav {
float:right;
border-left: 2px solid #aeaeae ;
padding: 0;
margin:0;
width: 107px ;
}
I simply floated the element
maybe you don't need to change the width of #globalnav with a child
selector.. i've tested with IE6
Gianni - www.getidea.it
__
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] Bullets are foobarred!!
Scott Blanchard wrote: Please take a look at this screenshot (JPEG): http://v5.octane8.com/destin/images/x8webtop_images/picture1.jpg Notice how the bullet images in the sitemap menu on the left are all mangled? Here's the actual URL to the page, can anyone else see the mangled bullets? http://activeinternational.com/activeLanding2.asp?id=113 Scott, I don't see the problem viewing with latest Firefox or IE 6 on WinXP Pro, 1024 by 768 resolution. Pat __ 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: advice for complex background image?/Liquid vs Fixed
Christie Mason wrote: Thanks Gunlaug Sørtun, that was somewhat reassuring. As a ending comment, I would like to say to all those that are going in the fixed direction (CSS or table or hybrid) that, as a site guest, I REALLY dislike the trend. Christie Mason __ 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/ It's true, though. My last big web design project I did liquid with CSS, and it wasn't that hard. The trick is to use relative values for the text, so people at high resolutions can raise the text size if necessary. -- http://www.mozilla.org/products/firefox/ - Get Firefox! http://www.mozilla.org/products/thunderbird/ - Reclaim Your Inbox! __ 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] 3 column layout problem
luciash wrote: cifroes wrote: Hi, thanks for the quick reply. I tried putting a large image in the center column in that design. Right col and center column (and scrollbars) works nicely, as i wanted... the problem is that the left column has a strange behaviour dancing around when you resize the window in IE 6.0 and Firefox 1.0.4... If I could fix that, maybe that's my solution... dunno how you put it there but when i try to put the next inside the div class=content it works very well in my FF 1.0.4: divimg src=http://www.skinbase.org/files/zoom/1-A_Month_of_Sundays.jpg; width=1024 height=768 //div (the dancing starts only when i shrink the window to very very small size) luci yes, i forgot to surround my img with div tags Now it works in firefox but doesn't work in IE 6.0 Windows thanks again for your time __ 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] Win IE absolute positioning not working on only one element
Marc Wolfgram wrote:
The css positioning for the header elements on this site is working
on Mac and Win for all browsers except IE under windows.
ref: http://www.elmbrooklifebuilders.org/
One element is a horizontal img placed just like all the other img
stuff:
!-- main/secondary divider bar --
div id=e20 img src=main/images/e20.jpg width=406
height=8 alt= /div
Relative css:
div#e20 {
position:absolute;
left:370px;
top:126px;
width:406px;
height:8px;
}
Under Win IE 6 it draws the element below its specified position
(somewhere around 134?) and it is then overdrawn by the button art
positioned below it at 134.
So what did I screw up? It used to work before the client had me
change the header elements above it (e10-e13, all top 94, height 32).
--
Dear Marc,
As far as I can see, the problem you are having is due to the blank spaces
left on the code between /a and /div tags.
/a /div
As you didn't set a font-size for the PAGE div, and the default font size
differs from browser to browser, this blank has a different size depending
on the browser.
You can verify this by changing the font size on the browser. you will see
that your image moves.
Hope to be of help.
Gonzalo Arin
__
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] Website check please - problems on windows?
You also need to put width:100% on your container div to make the white background show in IE. Regards Graham Cook -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Luca Balboni Sent: Friday, 27 May 2005 12:28 PM To: css-d css-d Subject: [css-d] Website check please - problems on windows? Hi all, I am completing a website and I am not able to check it on Windows configurations. It seems to work fine on Mac, but on windows IE6 seems to lose the white background of the main container,. Also, thewho we are menu on the top seem to stretch all the width of the page when active. Can anyone please confirm this? The address is: http://www.worldadventurer.net Thanks, Luca __ 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] Non-Tables layout help
Oh, and sorry for not including this in my other email, but upon looking over
the code quickly, I just want to throw this in:
Non-table design does not work exactly like table based design. For example,
that top graphic was three slices in a table, but in CSS, it can be a single
image.
Yep the top graphic is 3 images, as that is how the original was when I
took over the project.
That top row of buttons really ought to be in a list. It doesn't HAVE to be
(what you have works), but semantically it probably would work better as a list.
I agree with the list item. I actually use lists in all of my layouts
that flow like this, but I wanted to get the layout to look good.
Eventually it will all be pulled from a database, so the list is where
we are headed.
In fact, I would just basically toss all the Imageready code entirely and try
marking it up from scratch. It seems like an insane route to go, but
Imageready is treating it as if it were a table-based layout.
The Imageready code is still there as I wanted to get something onine
before I left work, so I could get all of your opinions, it will be
stripped soon enough.
The sheer number of div's with {position: relative; float: left} suggests that it
would be much better just to go div {position: relative; float: left} and override it for
div's that don't need it.
I agree on this point. I still have a few divs in the css document that
I have not gotten to eliminate yet. I was going to start from scratch
but decided to use their GoLive CSS output and after halfway realized it
would have been faster to go from scratch.
snipped
Also, I will remove that space. I never noticed it. I have noticed
that a space would cause all kinds of problems. I will see what I can
find out.
Thanks for your help, I hope I get the go ahead to set up the database
and the list items for this.
Zonjai
--
zonjai.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/
