SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Member
    Join Date
    Apr 2005
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Stretching Images help

    Well I'm kind of a css noob, and right now I am trying to make everything stretch so that it fits the text. This is the closest that I have gotten to begin right, but it still comes out very weird. The url to a page using this css is Http://www.davsstuff.com/compton.php?postid=3

    Code:
    <style type="text/css">
    <!--
    
    .content {
           position: absolute;
            left:15px;
    	top:10px;
    	font-size: 75%;
    }
    
    .title {
    	position: absolute;
    	left:18px;
    	top: 1px;
    	font-size: 100%;
    }
    
    .link1 {
    	position: absolute;
    	left:600px;
    	top: 4px;
    	font-size: 65%;
    }
    
    .link2 {
    	position: absolute;
    	left:670px;
    	top: 4px;
    	font-size: 65%;
    }
    
    .link3 {
    	position: absolute;
    	left: 737px;
    	top: 4px;
    	font-size: 65%;
    }
    
    body, html {
    height: 100%;
    }
    
    body {
    text-align: center;
    font-family: verdana;
    }
    
    div {
    text-align: left;
    }
    
    html>body #centered {
    height: auto;
    }
    
    #centered {
    width: 755px;
    height: 100%; 
    min-height: 100%; 
    margin: 0 auto; 
    }
    #Table_01 {
    	position:relative;
    	left:0px;
    	top:0px;
    	width:800px;
    	height:600px;
            text-align: left;
            margin: 0 auto;
    
    }
    
    #n2-01 {
    	background:url(images/n2_01.jpg);	
    	position: absolute;
    	left:0px;
    	top:0px;
    	width:800px;
    	height:100%;
    }
    
    #n2-02 {
    	background:url(images/n2_02.jpg);	
    	position:absolute;
    	left:0px;
    	top:75px;
    	width:102px;
    	height:100%;
    	background-repeat: repeat-y;
    }
    
    #n2-03 {
    	background:url(images/n2_03.jpg);
    	position:absolute;
    	left:102px;
    	top:75px;
    	width:604px;
    	height:100%;
    }
    
    #n2-04 {
    	background:url(images/n2_04.jpg);
    	position:absolute;
    	left:706px;
    	top:75px;
    	width:94px;
    	height:100%;
    }
    #n2-05 {
    	background:url(images/n2_05.jpg);
    	position:relative;
            left:102px;
    	top:95px;
    	width:604px;
            height:100%;
    }
    #n2-06 {
    	background:url(images/n2_06.jpg);
    	position:relative;
            width:604px;
    	left:102px;
    	top:577px;
    	height:100%;
    }

  2. #2
    SitePoint Guru DocType's Avatar
    Join Date
    Feb 2005
    Posts
    827
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If I'm enterpreting your problem correctly, you want the text to be centered vertically withing the lines of the background image.

    You might position the image so that the very first line sits right at the top of the containing div, then set the line-height on the text, so that it centers between the lines.

    That's a tricky design to work with, if the user resizes the text, it can get ugly.

    You might want to consider dropping that particular image, and place the text in plain box instead, with maybe a background color or light image that the text doesn't have to center on.

  3. #3
    SitePoint Member
    Join Date
    Apr 2005
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm sorry if I was not clear, but what I was trying to do with that is make it so the site was long enough vertically to fit in all the text from the php script.

  4. #4
    SitePoint Guru DocType's Avatar
    Join Date
    Feb 2005
    Posts
    827
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry, your title was misleading.

    I think the problem may be in that you're using absolute positioning, absolutely positioned elements are removed from document flow, so other elements will treat them as if they're not there at all.

    Try using relative positioning instead.

    If the image is tiled vertically, it will continue to tile as the div expands vertically for content.

  5. #5
    SitePoint Member
    Join Date
    Apr 2005
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    how do I make it so it is not tiled but streched?

    when I make the positions relative, it gets really messed up, how would i fix that?

    http://davsstuff.com/compton.php?postid=3

  6. #6
    SitePoint Addict DM3Dan's Avatar
    Join Date
    Sep 2004
    Location
    Albany, NY
    Posts
    204
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I had the same problem when I tried relative positioning once. Good luck with that Dav.

  7. #7
    SitePoint Guru DocType's Avatar
    Join Date
    Feb 2005
    Posts
    827
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm not sure exactly what you mean by stretched.

    You can give the image a height/width that's larger than the original image and it will stretch, but it'll likely look blured.

    It's best to use an image that will tile nicely.

    As for relative positioning, it depends on what you're trying to do really.

    If you could post a mock-up of what you want to do, it would make it much easier to find a solution.

  8. #8
    SitePoint Addict DM3Dan's Avatar
    Join Date
    Sep 2004
    Location
    Albany, NY
    Posts
    204
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    He means, if the text is larger than the image can handle, it expands to fit it; along with the other slices.

  9. #9
    SitePoint Guru DocType's Avatar
    Join Date
    Feb 2005
    Posts
    827
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by DM3Dan
    He means, if the text is larger than the image can handle, it expands to fit it; along with the other slices.
    Ahh, now I see.

    I think the key word is "slices".

    He'd have to have each post in seperate elements, with the image before and after(above and below) the text.

    When the text is larger it will force the bottom image down, creating the illusion a stretching image.

    I don't think you can do that with a background image without slicing it up, so that the lines are foreground images above and below the text, and the background is tiled, if the background is a solid color you could just use the foreground images, and set a background color for the elements.

    Or you might use JavaScript or some other scripting language, and load a scalable image.

    It would be complicated to say the least. A scalable vector graphic with a script to scale it might work, but that's a whole nother discussion forum.

    I think the end result of either method would look pretty much the same, so you're better off going with the simplest method.

    A forground image above and below the text in a stretching element with it's background color set or a tiled background image for the background.

    I think the text could actually be floated, and the bottom foreground image given a clear statement.

    Not a whole lot different from using a <hr> between page sections.

    You could actually use <hr> and give it a user defined background, that would allow you to set a height and width, by adding <hr class="stretch">.

    Believe it or not, <hr> is still a valid html tag, so theirs no reason you couldn't use it, and it doesn't require an end tag = less markup.

  10. #10
    SitePoint Member
    Join Date
    Apr 2005
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well first off i dont know one bit about javascript, so that is out of the question, but I think I might completely redesign without a background slice, and just make a header, and side bars.

  11. #11
    SitePoint Addict DM3Dan's Avatar
    Join Date
    Sep 2004
    Location
    Albany, NY
    Posts
    204
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If all else fails, fix your background image so you can overflow: auto; it.

  12. #12
    SitePoint Guru DocType's Avatar
    Join Date
    Feb 2005
    Posts
    827
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Not sure if this is the look you're going for, but it might give you some ideas.

    It uses a method called image-frames, you could replace the image with your text.

    Here's the link. http://www.bigbaer.com/css_tutorials...ame.styles.htm


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •