Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 11
  1. #1
    Senior Member rosland's Avatar
    Join Date
    Jul 2003
    Location
    Norway
    Posts
    1,944
    Member #
    2096
    I have a layout, where I want to put a content container below the div's holding banner and navigation

    Disregard the banner and its nav-buttons, and look at the content field.

    The content field is a div, with a left and right repetable small image (the white and grey tone at it's extremes.)
    I've placed an image inside this div. That image expands the content div (with the white and grey shadow elements) in such a way that these elements repeates themselves to accomodate the height of the image automatically.

    However, if I add a text-containing-div inside those divs, the "mother-frame(content)" seems to ignore that, and shuts off repetition of the margin elements (described above) at the end of the image, ignoring the continued text below.

    The fact that the text block (so far without styling and picture inserts), continues beyond/below the the stretched mainframe (container/div), and leaves the text container without visual support below the bacground picture, makes for an unintended disaster.

    How to fix that?
    S. Rosland

  2.  

  3. #2
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,717
    Member #
    5580
    Liked
    718 times
    Create another white image like the one with the dog, but only
    10 pixels tall and as wide as the dog picture ... it would all be white.

    Then, starting with this paragraph, "Vi samarbeider også med SR-Automation, ..."
    create another <div> with that new background image repeated down the page.

    The only thing that would wreck it, is if the content in the dog picture changed.
    I of course don't even know what it says. I do know that having that text over
    the image is hard to read, no matter what language it is.

    It's actually too much text on one page. Maybe make the font size smaller,
    narrower paragraph, justified text ... create strategic white space and take that photo
    away from the background. Place the photo (smaller size) in the upper left and wrap the
    text around it (float the photo).


  4. #3
    Senior Member rosland's Avatar
    Join Date
    Jul 2003
    Location
    Norway
    Posts
    1,944
    Member #
    2096
    Quote Originally Posted by mlseim
    It's actually too much text on one page. Maybe make the font size smaller,
    narrower paragraph, justified text ... create strategic white space and take that photo
    away from the background. Place the photo (smaller size) in the upper left and wrap the
    text around it (float the photo).
    Don't worry about that. It's not near completion in any way yet. The text will be broken up, pictures inserted, etc.

    The problem now is nuts and bolts.
    The div holding the picture, is nested inside the div holding the left and right mini images (creating the left white/gray-gradient, and the right grey shadow through repeat).
    Code:
    <div style="background: url('images/rightMarg.jpg') repeat-y right top">
    	<div style="background: url('images/hvitMarg.png') repeat-y left top; padding: 5px">
    If I removed the image, the outer div would collapse to 10px high but the same width as now. The two border images combined, makes for a complete white background edge to edge.
    The repeat functions fine when I insert the image in its own div inside the "border image div" as described above.
    However, when I insert the text div (also nested inside the outer "border-div", but on top of the image-div) the outer div ignores the text div, and only stretches to accomodate the content of the image div.

    Why?
    S. Rosland

  5. #4
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,717
    Member #
    5580
    Liked
    718 times
    Is this intentional ( height.1500px; ) ?

    #tekst{
    position:absolute;
    top:0px;
    left:0;
    padding:20px;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    text-align:left;
    width: auto;
    height:1500px;
    }


    EDIT:
    Also look at #7 on this list:
    http://www.yongfook.com/items/view/8...lopment-tricks

    That might be related to your situation.
    At least it's a good thing to know for all of the CSS doers out there.


    .


  6. #5
    Senior Member rosland's Avatar
    Join Date
    Jul 2003
    Location
    Norway
    Posts
    1,944
    Member #
    2096
    Quote Originally Posted by mlseim
    Is this intentional ( height.1500px; ) ?


    EDIT:
    Also look at #7 on this list:
    http://www.yongfook.com/items/view/8...lopment-tricks

    That might be related to your situation.
    At least it's a good thing to know for all of the CSS doers out there.


    .
    No, I have no idea where that came from, I've removed it (didn't do anything though).

    Interesting article, I'll experiment a bit with it.

    To simplify my question, here are the main outlines:

    I have an absolutely positioned DIV called "PARENT".
    I have two nested DIVs inside that one, called "CHILD 1" and "CHILD 2".

    If I fill "CHILD 1" with content, then "PARENT" will stretch to accomodate. Same happens when I fill "CHILD 2" with content.
    I can position the Children in relation to each other using float or other positioning tools. However, if I want to stack them on top of each other (the children that is) I have to use absolute positioning.

    I want their absolute positioning to relate to the PARENT div, and not to the screen.
    If I use:
    Code:
    position:absolute;
    top: 0px;
    left: 0px;
    ...on CHILD 2, then it will slide to the top left corner of the PARENT div, regardless of "PARENTs" position on screen. It will also ignore CHILD 1, already resting in the top left corner of PARENT.

    However, only CHILD 1 (without the positioning attribute), will expand the PARENT div!
    Even though CHILD 2 is anchored inside PARENT, it doesn't affect it in any way.

    In my previous post you saw the text floating on top of an image (never mind contrast and readability for now, that will be fixed). The text continued down the page, but the parent div ignored it.
    If I swapped DIVs, so that the image rested inside the absolutely positioned DIV, and let the text rest in the non-postioned nested DIV, then it all behaved properly with one exception:
    The image was positioned correctly, as was the text, but floated on top of the text, blocking it out.
    For some reason, z-indexing the different DIVs didn't do squat!
    Regardless of what stunts I performed, the image insisted on stacking on top of everything else. If I posistion both child DIVs with absolute positioning related to the parent, then z-indexing worked, but now none of them expanded the parent, causing the repeating border images to collapse.
    S. Rosland

  7. #6
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,717
    Member #
    5580
    Liked
    718 times
    darn, you took off the link to your site.
    I wanted to look at something again.


  8. #7
    Senior Member rosland's Avatar
    Join Date
    Jul 2003
    Location
    Norway
    Posts
    1,944
    Member #
    2096
    Here it is.
    S. Rosland

  9. #8
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,717
    Member #
    5580
    Liked
    718 times
    This is the best I could come up with:

    http://www.catpin.com/oss/


  10. #9
    Senior Member rosland's Avatar
    Join Date
    Jul 2003
    Location
    Norway
    Posts
    1,944
    Member #
    2096
    Hi again!

    I'm sorry I'm a little bit on and off here at the moment (I try to log out each time I'm unavailable to indicate I'm not present and therefore unresponsive)

    Is your only alteration this?
    Code:
    <div style="width:800px; background-color:transparent; padding-left:30px;">
    If you follow my original link, you'll see I have achieved almost the same by altering:
    Code:
    #tekst{
    	position:absolute;
    	top:0px;
    	left:0;
    	padding:20px;
    	font-family:Verdana, Arial, Helvetica, sans-serif;
    	text-align:left;
    	width: auto;
    }
    
    To this:
    
    #tekst{
    	position:relative;
    	top:0px;
    	left:0;
    	padding:20px;
    	font-family:Verdana, Arial, Helvetica, sans-serif;
    	text-align:left;
    	width: auto;
    }
    I still need to move the text up over the picture (it will only cover the lower part of the image eventually), and I'm working on a fix.
    I've made a simplified version of it where I eventually got it to work by placing the image in a "position:absolute" box, and adding "position:relative" to the text. By adding "position" in both div declarations, the z-index started working again.

    Problem I'm having now, is that everytime I make a minor alteration to the image div, the WHOLE page falls apart. Haven't figured out why yet, but working on it.
    S. Rosland

  11. #10
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,717
    Member #
    5580
    Liked
    718 times
    OK, now I have it right ...

    http://www.catpin.com/oss

    Some big changes:
    This image "venstreAlmenn.jpg" is now a wide image with the gray
    on each end. One image.
    http://www.catpin.com/oss/venstreAlmenn.jpg

    This file has changed:
    http://www.catpin.com/oss/omoss.css

    And of course "index.html" has changed.

    main.css has some changes too, but I can't remember if those
    changes affected anything.

    You almost have to copy and compare to see what I changed.
    I had to change paths to the images because I don't have my
    directories structured the same way as you.

    darn!
    I created another problem by moving the content over the photo...
    It now makes the bottom blank (a bunch of blank page).

    EDIT AGAIN:
    Now it looks OK on IE6, but I don't have a FireFox browser right now.
    Not sure if it crashes now with FF and Safari.




    .



Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 08:57 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com