I have converted our new company home page from a table design to CSS. Getting a design change signed off here is particulalry difficult, so the number one thing is it must look almost identical to the existing page.
The existing page is: <!-- m --><a class="postlink" href="http://www.buildstore.co.uk/">http://www.buildstore.co.uk/</a><!-- m -->
In IE the user can't increase the text size at all, and needless to say I don't like the large animated gif on the home page.
As I said before, any changes have to be almost un-noticable. I changed the animated gif to a javascript slide show and the layout is entirely CSS now. With the CSS layout the text size can be changed in IE now but in FF the text is hidden behind other divs. How can I fix this? I have tried overflow:visible with no success.
<!-- m --><a class="postlink" href="http://www.buildstore.co.uk/divs/">http://www.buildstore.co.uk/divs/</a><!-- m -->
ThanksHave you tried changing your div widths/heights to percentages?
KDLAI am having the same problem with something i am doing.
One thing that confuses me tho...
say your main div is 820px by 500px and all of your content is within it, What would you change the main div percentage to? And what is the percentage relative to?
Thanks KDLA!
You have 2 div' with id="nav" These must be unique.
I don't see the 'hidden' text. Has the problem been fixed?The percentage is based on the screen's size.
I always figure it based on the smallest screen size - 800x600. That way, it will be functional no matter what size the user has.
When the divs expand to accommodate larger resolutions, usually the widths are what is affected, rarely the heights. So, make sure to test your layout on 800x600, 1024x768, and if possible a widescreen.
Good Luck -
KDLAtry setting the height and the width in ems, then when the text size is increased, the size of the div it sits in will also be increased
e.g.
.divname
{
width:10em;
height:4em;
font-size:1em;
}thanks for the quick replies guys.
That has made things much clearer
Firstly, sorry I haven't replied. I was sure last time I automatically received emails when a response was submitted but not this time.
Secondly, thanks for your replies.
hedlikeahole - I tried using ems and it's a slight improvement but text is still disappearing behind other divs as they don't expand enough, it's especially a problem with the navigation. I suppose I would have to use ems for width also for it to fit. Unfortunately this is a no-go, I had enough trouble convincing them to let me go ahead with converting it to CSS with no noticable difference.
(p.s. I'm a NIN fan myself)
KDLA - This is how I originally started but I remember oconverting to absolute heights because of white space problems. I tired it with percentages again and the resizing works great... but the white spaces are back.
I would also like the background of the div that contains the large animation to be the same blue colour as the search box but with the margins remaining white, any soltuion for this?
<!-- m --><a class="postlink" href="http://www.buildstore.co.uk/divs/divs_absolute/index.html">http://www.buildstore.co.uk/divs/divs_a ... index.html</a><!-- m -->
EDIT: Fang - The two nav sections use the exact same properties so I thought it would be OK for them to use the same DIV ID. Is this not the case? Also, were you viewing it in IE? It works fine in IE.The two nav sections use the exact same properties so I thought it would be OK for them to use the same DIV ID. IS this not the case? No id should be unique (<!-- m --><a class="postlink" href="http://www.w3.org/TR/REC-html40/struct/global.html#h-7.5.2">http://www.w3.org/TR/REC-html40/struct/ ... ml#h-7.5.2</a><!-- m -->), use classOK thanks, I will do that.
In the mean time does anyone have an idea of what I can do with the backgound color of the colums? I have tried ems and just get overlap, percentages and overflows don't seem to work and the background colour will still only fill as far as the text goes
The existing page is: <!-- m --><a class="postlink" href="http://www.buildstore.co.uk/">http://www.buildstore.co.uk/</a><!-- m -->
In IE the user can't increase the text size at all, and needless to say I don't like the large animated gif on the home page.
As I said before, any changes have to be almost un-noticable. I changed the animated gif to a javascript slide show and the layout is entirely CSS now. With the CSS layout the text size can be changed in IE now but in FF the text is hidden behind other divs. How can I fix this? I have tried overflow:visible with no success.
<!-- m --><a class="postlink" href="http://www.buildstore.co.uk/divs/">http://www.buildstore.co.uk/divs/</a><!-- m -->
ThanksHave you tried changing your div widths/heights to percentages?
KDLAI am having the same problem with something i am doing.
One thing that confuses me tho...
say your main div is 820px by 500px and all of your content is within it, What would you change the main div percentage to? And what is the percentage relative to?
Thanks KDLA!
You have 2 div' with id="nav" These must be unique.I don't see the 'hidden' text. Has the problem been fixed?The percentage is based on the screen's size.
I always figure it based on the smallest screen size - 800x600. That way, it will be functional no matter what size the user has.
When the divs expand to accommodate larger resolutions, usually the widths are what is affected, rarely the heights. So, make sure to test your layout on 800x600, 1024x768, and if possible a widescreen.
Good Luck -
KDLAtry setting the height and the width in ems, then when the text size is increased, the size of the div it sits in will also be increased
e.g.
.divname
{
width:10em;
height:4em;
font-size:1em;
}thanks for the quick replies guys.
That has made things much clearer
Firstly, sorry I haven't replied. I was sure last time I automatically received emails when a response was submitted but not this time.Secondly, thanks for your replies.
hedlikeahole - I tried using ems and it's a slight improvement but text is still disappearing behind other divs as they don't expand enough, it's especially a problem with the navigation. I suppose I would have to use ems for width also for it to fit. Unfortunately this is a no-go, I had enough trouble convincing them to let me go ahead with converting it to CSS with no noticable difference.
(p.s. I'm a NIN fan myself)
KDLA - This is how I originally started but I remember oconverting to absolute heights because of white space problems. I tired it with percentages again and the resizing works great... but the white spaces are back.
I would also like the background of the div that contains the large animation to be the same blue colour as the search box but with the margins remaining white, any soltuion for this?
<!-- m --><a class="postlink" href="http://www.buildstore.co.uk/divs/divs_absolute/index.html">http://www.buildstore.co.uk/divs/divs_a ... index.html</a><!-- m -->
EDIT: Fang - The two nav sections use the exact same properties so I thought it would be OK for them to use the same DIV ID. Is this not the case? Also, were you viewing it in IE? It works fine in IE.The two nav sections use the exact same properties so I thought it would be OK for them to use the same DIV ID. IS this not the case? No id should be unique (<!-- m --><a class="postlink" href="http://www.w3.org/TR/REC-html40/struct/global.html#h-7.5.2">http://www.w3.org/TR/REC-html40/struct/ ... ml#h-7.5.2</a><!-- m -->), use classOK thanks, I will do that.
In the mean time does anyone have an idea of what I can do with the backgound color of the colums? I have tried ems and just get overlap, percentages and overflows don't seem to work and the background colour will still only fill as far as the text goes