SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Member eg_arnous's Avatar
    Join Date
    Jul 2006
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    plz need u help in that css code

    hi
    plz i have big problem in that bolck in attachment when i enter any text in it ..it should be extended by height i don;t know where the error from plz see the file and chk it ..and see the css file .......in attachment

    waiting u reply
    Attached Files Attached Files

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Welcome to Sitepoint

    The problem with your code is that you are trying something that isn't going to work. You can't specify 100% height for an element and expect it to keep track of other elements as CSS doesn't work like that. (Although that's not completely true as absolute elements will keep track of their parents height in all browsers except IE but is not much use to here). (See the FAQ on 100% height for more info on 100% height. Suffice to say that in normal usage you will never be using 100% height as it never does what you think).

    From the layout is seems you are trying to mimic the way you would slice and dice in a table but with css you have to change the way you do things.

    For your repeating blockm section you should simply include the blockl and blockr graphics onto the blockm image itself and then it will repeat all in one go with minimum effort. Of course you will need to make it wider and make it fit in that space.

    Don't call everything block# as that makes no sense and will ony cinfuse you later. Give things a nmore semntic meaning such as #header, #content #main #footer etc.

    You don't need to slice every little element if you can fit the image into the background of an element in one go.Don't add extra elements when you could use existing content elements to apply your images although for round corners you often have to add extra non-semantic mark up.

    So to recap your repeating section problem just make a new image that contains the left and right borders all in one wide image (223px wide) and then repeat that down your blockm element.

    e.g.
    Code:
    #blockm {width:223px ;background: url(images/lblock_m.gif) repeat-y; }
    Hope that helps
    [/code]

  3. #3
    SitePoint Member eg_arnous's Avatar
    Join Date
    Jul 2006
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi Paul O'B

    really i am very very glad to see u reply above and u were right in all u words but iam just newbie in css world so u words very very helpful and really work good thanks alot for u help and god bless u ...
    thanks alot for u help i was sad when I am searching about any body help me in that and u do the job good

  4. #4
    SitePoint Member eg_arnous's Avatar
    Join Date
    Jul 2006
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    but i have another question if i want to make the same idea extened with height, width how i can do that ??

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    but i have another question if i want to make the same idea extened with height
    You will need to explain exactly what you want but the fact of the matter is that nothing in css will base its height upon another element unless that element also has a fixed height which makes the method worthless for most cases.

    If you want matching border graphics then you simply need to repeat the whole thing on the parent container as I mentioned above. (The example I gave you above will repeat all the length of the content and will extend as required.)

    If you take a look at one of my demos here. You can see that all 3 columns including their borders are simply created in one go by repeating this image on the background of the parent container. The parent container is the only element that will always be as long as the columns themselves.

    You just need to follow that method wherever you want graphical elements to follow the content height and use nested elements to apply the images in cases where one image state can't be combined.

  6. #6
    SitePoint Member eg_arnous's Avatar
    Join Date
    Jul 2006
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks a lot paul i have see the answer and really do it correctly with u help ..thanks
    but i am speak about another matter if i have the same block or neat of it .. and need to make it extend with height, width too to suit the text content what the best way to slice it ...and what area i will repeat ..thanks a lot and really i appreciated u big help ..god bless u

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    and need to make it extend with height, width too to suit the text content what the best way to slice it ...
    It's probably best if you provide a drawing or example of what you want then we can talk specifically about it and look at ways that it can be done. It's hard to give an answer on an abstract question because the answer really does depend on the content.

    Once I see what you really want I can show you how I'd go about it (assuming its possible of course)

    If you have a design in mind or can show a small diagram or mock up it will make things easier

  8. #8
    SitePoint Member eg_arnous's Avatar
    Join Date
    Jul 2006
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok paul you are that the image or box that i need to be extended with height, width ...what the best way to slice it ??
    h t t p : / / f i l a t y . c o m /i/808/11562/box.gif
    plz remove the the spaces sorry for that but i can't put any links here

  9. #9
    SitePoint Member eg_arnous's Avatar
    Join Date
    Jul 2006
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I wish paul u see the image above ...

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I can see your image but I don't see anything that needs to expand vertically as the middle section is just a solid color. This is just a normal rounded box with a repeating gradient at top and bottom with round corners positioned into place.

    All you need do is nest a few elements so you can hang the images on as required. At the most basic and re-usable level I would do it most simply like this.

    http://www.pmob.co.uk/temp/eg-expanding-box.htm

    The box can expand vertically and horizontally as required.

  11. #11
    SitePoint Member eg_arnous's Avatar
    Join Date
    Jul 2006
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks a lot paul for u fast reply i see the page but actually i can't understand the css idea is there any simple code more that current

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I kept it simple for you and that's as simple as it gets I'm afraid

    This is css at it's most basic level and it would do you good to work your way though the example and to find out exactly what's happening. If you have a question about a specific aspect then fire away and I will explain.

    There is no point in asking for something more simple just because you don't understand how something works because this is the way it needs to be to work.

    The html is pretty straight forward:

    Code:
    <div class="outer">
    	<div class="inner">
    		<div class="top"><span></span></div>
    		<div class="content">
    			<p>Fluid content can go here : Fluid content can go here : Fluid content can go here : Fluid content can go here : Fluid content can go here : Fluid content can go here : Fluid content can go here : Fluid content can go here : Fluid content can go here : Fluid content can go here : Fluid content can go here : </p>
    			<p>Fluid content can go here : Fluid content can go here : Fluid content can go here : Fluid content can go here : Fluid content can go here : Fluid content can go here : Fluid content can go here : Fluid content can go here : Fluid content can go here : Fluid content can go here : Fluid content can go here : </p>
    			<p>Fluid content can go here : Fluid content can go here : Fluid content can go here : Fluid content can go here : Fluid content can go here : Fluid content can go here : Fluid content can go here : Fluid content can go here : Fluid content can go here : Fluid content can go here : Fluid content can go here : </p>
    			<p>Fluid content can go here : Fluid content can go here : Fluid content can go here : Fluid content can go here : Fluid content can go here : Fluid content can go here : Fluid content can go here : Fluid content can go here : Fluid content can go here : Fluid content can go here : Fluid content can go here : </p>
    		</div>
    		<div class="base"><span></span></div>
    	</di
    .outer - this holds the top repeating gradient
    .inner - this is nested inside the outer div and holds the bottom repeating gradient.

    .top - this holds the top left corner in the background of the div and the top right hand corner in the background of the nested span.

    .base - holds the bottom right corner in the background of the div and the bottom right corner in the background of the nested span.

    .content - this is not really necessary but just adds a bit of padding for the content and keeps the content nicely wrapped.

    I suggest you copy my page and grab the images I used and spend a couple of hours playing around with the code until you understand what's going on. If there's anything you don't understand then ask a question but you do really need to learn these techniques if you want to create layouts with css effectively.


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
  •