CSS solve-me-do

    First Previous
  • Deleted user 20 June 2008 17:28:39
    Making a few changes to my website and come across a problem that isn't really a problem but sort of is at the same time.

    Basically my pages are a series of divs inside each other - one that creates a border top and bottom (lets call him borderdiv), then one inside that that says "there will be text inside here" (lets call him textdiv) and then a couple more inside that which say "the text is made up of two columns and this is what they look like" (lets call them column1div and column2div).

    My problem is that I want the height of borderdiv (and therefore the appearance of the bottom border line) to adjust automatically depending on how much text I write in the columns.

    At the moment the only way I can get the bottom border to appear at the bottom of the screen under the text/columns is to set textdiv to a certain height and then make sure that the text in the columndivs doesn't go over that height - if it does I need to adjust the textdiv height to compensate, which causes problems because the divs are used across multiple pages. Some pages have more text on than others and so I can end up with a bottom border that's just right for one page but way too far down on another.

    Still following me?

    What's confusing me is that the single div that lies BELOW the borderdiv (which contains a line of copyright text) appears to go wherever the bottom border line goes. So if I for example delete the height of borderdiv and textdiv, for some reason the copyright text jumps up to the top with the border line, but the text remains exactly where it is, presumably due to the absolute and relative tags I've used in my textdiv and columndivs to make them position correctly.

    So, is something conflicting somewhere? How do I make the height of borderdiv automatically adjust to whatever is inside it?
  • lordofdeadside 20 Jun 2008 17:42:48 1,357 posts
    Seen 11 hours ago
    Registered 17 years ago
    Are the two columns using 'float' to position them next to each other? If they are you need to make the surrounding div recognise the height (length of text in this case). The best way to do this is to add a width and 'overflow:hidden;' to the div containing the two columns.

    It also sounds like you may have an extra div thats not needed, but i'n not sure quite what you are doing.
  • Deleted user 20 June 2008 17:45:33
    lordofdeadside wrote:
    Are the two columns using 'float' to position them next to each other? If they are you need to make the surrounding div recognise the height (length of text in this case). The best way to do this is to add a width and 'overflow:hidden;' to the div containing the two columns.

    It also sounds like you may have an extra div thats not needed, but i'n not sure quite what you are doing.

    you may also have to set the width of the div you use overflow:hidden on for it to work cross-browser (iirc IE6 wants this)
  • lordofdeadside 20 Jun 2008 17:50:57 1,357 posts
    Seen 11 hours ago
    Registered 17 years ago
    RedPanda wrote:
    lordofdeadside wrote:
    Are the two columns using 'float' to position them next to each other? If they are you need to make the surrounding div recognise the height (length of text in this case). The best way to do this is to add a width and 'overflow:hidden;' to the div containing the two columns.

    It also sounds like you may have an extra div thats not needed, but i'n not sure quite what you are doing.

    you may also have to set the width of the div you use overflow:hidden on for it to work cross-browser (iirc IE6 wants this)

    I did mention that! ;)

    MrED209: did you mean like this
  • Deleted user 20 June 2008 17:52:50
    I thought there may be a float in there somewhere but there's not.

    If it helps, here's a page demonstrating what I'm trying to do. There should be a line at the top under my navigation bar but above the text, and at the bottom between the text and the copyright info. As you can see, at the moment there's two 1px lines at the top, then the copyright info, then the text.

    Have a look at the source code - the div that creates the top and bottom borders is actually called 'flashemptypanel' (don't ask why!).

    Here's the CSS I'm using.
  • Deleted user 20 June 2008 17:53:25
    lordofdeadside wrote:
    RedPanda wrote:
    lordofdeadside wrote:
    Are the two columns using 'float' to position them next to each other? If they are you need to make the surrounding div recognise the height (length of text in this case). The best way to do this is to add a width and 'overflow:hidden;' to the div containing the two columns.

    It also sounds like you may have an extra div thats not needed, but i'n not sure quite what you are doing.

    you may also have to set the width of the div you use overflow:hidden on for it to work cross-browser (iirc IE6 wants this)

    I did mention that! ;)

    MrED209: did you mean like this
    Yes, exactly, but have a look at what I've done and see if you can see the problems.
  • lordofdeadside 20 Jun 2008 18:07:34 1,357 posts
    Seen 11 hours ago
    Registered 17 years ago
    At a quick glance:

    You don't need the textbox div, it doesn't do any thing and any targeting (of paragraphs and the like) can be done using your 'flashemptypanel' div.

    To fix the issue you are having i would take out the position:absolute stuff on the columns and use float, then you can use the overflow and width trick on 'flashemptypanel'

    I'd look into changing the headers into 'h' tags too. (h1, h2, h3 etc). And there's a closing forward slash missing from the img tag in the statcounter bit at the bottom.

    Here's your file with the columns fixed using the method above. (ive not done the headings though).
  • Deleted user 20 June 2008 18:12:22
    Okay, I'll look at that later - gotta go out now but cheers for the look at it, and if I get stuck I may call on you to go into a bit more depth about these things later, if that's okay?

    Cheers.
  • lordofdeadside 20 Jun 2008 18:13:32 1,357 posts
    Seen 11 hours ago
    Registered 17 years ago
    Aye, no bother. It's a premium rate number though!
  • Deleted user 20 June 2008 18:15:05
    Post deleted
  • Deleted user 20 June 2008 18:22:15
    Post deleted
  • Deleted user 20 June 2008 18:25:46
    Can you give me an idea of what I was doing with fonts that you disapproved of (not that I'm complaining!) and where I should be looking to change the body font size back?
  • lordofdeadside 21 Jun 2008 16:11:23 1,357 posts
    Seen 11 hours ago
    Registered 17 years ago
    no disaproval! just friendly advice!

    I would control the font size using ems units, start by setting your body font size to 100%, then set the font size on the wrapper round the wloe page to 62.5%. From then on 1em will equal 10px.

    See updated example for what i mean, and what i mean about 'h' tags.

    On the homepage of your site you should use a h1 tag round your logo (or site name). On subsequent pages the h1 tag should be used around the heading for that page (i.e. products).

    Sub headings should be h2 tags, headings inside each section headed by a h2 should be h3 etc.

    The h1, h2 or h3 tags sohuld be used instead of the div, and can be styled to look exactly the same (although it will have a default look, usually bigger and bold).
  • Deleted user 21 June 2008 16:27:12
    Okay - but my logo is a graphic, not text. Does that matter?

    I don't have page headings either - a page has a title, sure, but that's for the browser window. On my services page I don't have a bit at the top that says SERVICES, I just go straight into the page sub-sections (as you can see on the linked page above). I've made those subheadings h2 now due to the lack of a page headline - is that acceptable practice under the circumstances?

    Are h1 and h2 sacrosanct? They're always mentioned on CSS tutorial pages about headings, but h3 h4 h5 etc never are. It's okay to change their usage to fit my site, right?

    And is it okay to tweak the look of h1 and h2, which again seem to be set in stone unless I go into the CSS to adjust them. This was suggested in a CSS tutorial page so I went ahead and did it.

    I don't really follow how the changes you made to my code actually did what they did, but it all works and I'm really grateful for the help you gave me on that front. :)
  • lordofdeadside 21 Jun 2008 16:36:23 1,357 posts
    Seen 11 hours ago
    Registered 17 years ago
    Having the logo as a graphic is ok, there's a few tirkcs you cna do to improve this, bt its ok for now!

    Don't worry about not having headings for each page, just keep the site logo in the h1 for the whole site in this case.

    All your sub headings seem to be the same level in the hierachy so they should all be the same tag, a h2. If you were to add a sub section to portraits for example it's heading would be a h3. So always use them in order, to demonstrate the importance of the headings.

    Go ahead and change the look (via css) of any h tag, thats perfectly fine.
  • Deleted user 21 June 2008 16:41:02
    Okay - got headings stuff sorted in my head now. Can you briefly tell me a bit more about improving the site logo/graphic, please?

    I've cobbled the site together over the years by stealing bits of other people's code and tweaking it to fit my own look, then learning from CSS tutorial pages about ways of further customising, so it's highly likely to look very much like a bodge job to a pro like yourself, but I learn very quickly from example so this is all really valuable stuff!
  • lordofdeadside 21 Jun 2008 16:54:04 1,357 posts
    Seen 11 hours ago
    Registered 17 years ago
    ok, just one more tip.
    Any image inside a h1 should be applied with css as a background image.

    Set the width and height of the h1 to the dimensions of your image.

    Put the name of your site into the h1 tag in the html, and use text-indent:-9999px; in the css to hide the text.

    This is best practice, so it improves your site for search engines (and possibly for screen readers).
  • Deleted user 21 June 2008 16:56:56
    lordofdeadside wrote:
    RedPanda wrote:
    lordofdeadside wrote:
    Are the two columns using 'float' to position them next to each other? If they are you need to make the surrounding div recognise the height (length of text in this case). The best way to do this is to add a width and 'overflow:hidden;' to the div containing the two columns.

    It also sounds like you may have an extra div thats not needed, but i'n not sure quite what you are doing.

    you may also have to set the width of the div you use overflow:hidden on for it to work cross-browser (iirc IE6 wants this)

    I did mention that! ;)

    MrED209: did you mean like this

    so you did :) d'oh!
  • Deleted user 21 June 2008 20:02:34
    lordofdeadside wrote:
    ok, just one more tip.
    Any image inside a h1 should be applied with css as a background image.

    Set the width and height of the h1 to the dimensions of your image.

    Put the name of your site into the h1 tag in the html, and use text-indent:-9999px; in the css to hide the text.

    This is best practice, so it improves your site for search engines (and possibly for screen readers).
    Ah okay - that first bit is what I would have done anyway I reckon. Apart from the h1 bit, it's what I've done already - putting the actual graphic as the background for the div in the CSS.

    Cheers for the tips - I'm sure they'd have cost me a fortune in consultancy fees! ;)
  • burns 3 Sep 2008 13:42:59 1,138 posts
    Seen 1 month ago
    Registered 14 years ago
    so your trying to make a tabbed menu?
  • burns 3 Sep 2008 13:49:28 1,138 posts
    Seen 1 month ago
    Registered 14 years ago
    If your using css(which I would recommend), then [link=http://www.exploding-boy.com/images/cssmenus/menus.html">Here are a few examples.
  • Deleted user 13 November 2008 23:16:25
    Post deleted
  • Deleted user 13 November 2008 23:16:25
    Post deleted
  • Deleted user 25 November 2008 16:03:20
    NEW QUESTION!

    I've got a header div of height 64 pixels, to sit a div-based logo of the same size in. It's floated left. Floated right is a list-based navigation system, pure text, no graphics. I want the text to appear to line up with the bottom of the logo. At the moment it appears at the top of it's div (no matter the height). I know I can move the text down using padding or margins so it lines up, but is there a way of telling all text to line up at the bottom of a div rather than the top?
  • craigy Staff 25 Nov 2008 16:05:39 9,451 posts
    Seen 43 seconds ago
    Registered 13 years ago
    Give the vertical-align property a go.
  • Deleted user 25 November 2008 16:07:57
    Ta, will do. Is that IE-friendly?
  • Deleted user 25 November 2008 16:12:34
    Hmm, can't get it to affect the positioning of the text. If I make the navigation div that contains the text list the same height as the logo (64px), where should I apply vertical-align? The nav-div, the ul inside it, or the a tagged links themselves inside the ul? None of them affect the text. Something else or am I using this wrong?
  • burns 25 Nov 2008 16:20:15 1,138 posts
    Seen 1 month ago
    Registered 14 years ago
    If the menu is in its own div then you should be able to just remove float:left from the image div.

    A div is a block level element, so adding float:left removes it from the page flow I believe.
  • Deleted user 25 November 2008 16:22:43
    Nah, if I do that then the floated nav div stays on the right but drops down below the level of the logo div.

    I still don't understand floating :(
  • burns 25 Nov 2008 16:26:11 1,138 posts
    Seen 1 month ago
    Registered 14 years ago
    I thought thats what you wanted? You want the menu under the Logo?
  • First Previous
Log in or register to reply

Sometimes posts may contain links to online retail stores. If you click on one and make a purchase we may receive a small commission. For more information, go here.