responsive design help, wrapping divs

Question

Violet_82 89 Posting Whiz in Training

11 Years Ago

Hi chaps, I wonder if you can help me with something. I am looking into responsive design a bit, and I was testing something here http://antobbo.webspace.virginmedia.com/test/responsive/test.html
Now, if you try to resize the window the cnes logo gets pushed under the "this is an extra bit" div: what I would like to happen instead is - when the cnes logo touched the "extra bit" - the "extra bit" div to be positioned under the star logo but still within the black background: in other words, I'd like the black background to extend and accomodate the "extra bit" div when that gets pushed down by the cnes logo. How would I achieve that please? Here's my code:

<!DOCTYPE html>
<html>
    <head>
        <title>TEST</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>

    <body>
        <div id="wrapper">       
            <div id="page">      
                <div id="banner">

                    <div id="logo1">
                        <img src="small_LOGO.gif">                           
                    </div>
                    <div id="logoText">                  
                                <p>This is an extra bit</p>
                    </div>
                    <div id="cnes">  
                        <img src="cnes.jpg" >                                        
                    </div>
                </div><!-- banner-->
            </div><!-- page-->
        </div><!-- wrapper-->
    </body>

</html>

and the css:

#wrapper{
width:100%; 
border:1px solid red;   
min-height:43em;
    }

#page{
    width:75%;  
    border:1px solid magenta;
    height: 40em;
    margin:0 auto;
    }

#banner{
    background:url("banner.jpg") repeat-x 0 0;  

    height:65px;
    border:1px solid blue;
    }
    #logo1{
            border:1px solid red;
            float:left;
        }
        #logoText {
        width:350px;
            float:left;
        }
            #logoText p{
            border:1px solid blue;  
            color:white;

        }

        #cnes{          
            float:right;
            height:60px;
            border:1px solid yellow;
            }

I just can't get that to work!
thanks

web-design

3 Contributors
11 Replies
330 Views
2 Days Discussion Span
Latest Post 11 Years Ago Latest Post by AleMonteiro

LastMitch

11 Years Ago

I just can't get that to work!

Try to add either postions (meaning testing out those positions):

relative or absolute or fixed position in #cnes

to make it stop moving.

You are using fixed position?

Try to add fixed position in #wrapper

LastMitch

11 Years Ago

I will try, but bear in mind that then I will have to use some media queries to change the positions when the page shrink yeah?

Take it out media queries for now. When you design something you want it be organized so you can update and add stuff. I mean don't you feel like it's important fixed this issue you are having first than tackle on the media queries?

AleMonteiro 238 Can I pick my title?

11 Years Ago

I'm not sure, but maybe this will help you:

<!DOCTYPE html>
<html>
    <head>
        <title>TEST</title>

        <style type="text/css">
            /* Generated by F12 developer tools. This might not be an accurate representation of the original source file */
        #wrapper {
            border: 1px solid red; width: 100%; height: 43em;
        }
        #page {
            margin: 0px auto; border: 1px solid magenta; width: 75%; height: 40em;
        }
        #banner {
            background: #000; /* using image as background here must take care of repeat-y so when the browser resize and this banner height increase the background will also increase*/
            border: 1px solid blue; 
            min-height: 65px; /* use min-height instead of height so when the browser resize the banner can increase it's height to wrap the elements that break line */
            position: relative;
            min-width: 260px; /* min width so the cnes logo doesn't go on top of the other one */
        }
        #logo1 {
            border: 1px solid red; 
        }
        #logoText {
            width: 350px;
        }
        #logoText p {
            border: 1px solid blue; color: white;
        }
        #cnes {
            border: 1px solid yellow; top: 0px; height: 60px; right: 0px; position: absolute;
        }

        /*css style to make divs stay inline without the use of float*/
        .inline
        {
            position: relative;
            display: -moz-inline-stack;
            display: inline-block;
            zoom: 1;
            vertical-align: top;

            *display: inline;
        }

        </style>

    </head>

    <body>
        <div id="wrapper">       
            <div id="page">      
                <div id="banner">

                    <div id="logo1" class="inline">
                        <img src="http://antobbo.webspace.virginmedia.com/test/responsive/small_LOGO.gif">                           
                    </div>
                    <div id="logoText" class="inline">                   
                            <p>This is an extra bit</p>
                    </div>
                    <div id="cnes">  
                        <img src="http://antobbo.webspace.virginmedia.com/test/responsive/cnes.jpg" >                                        
                    </div>
                </div>
            </div>
        </div>
    </body>

</html>

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Violet_82 89 Posting Whiz in Training · Answer 1 · 2013-02-16T20:32:22+00:00

I will try, but bear in mind that then I will have to use some media queries to change the positions when the page shrink yeah?

Violet_82 89 Posting Whiz in Training · Answer 2 · 2013-02-17T13:32:40+00:00

don't you feel like it's important fixed this issue you are having first than tackle on the media queries?

Yes you're totally right. I will test it and see how it goes. thanks

Violet_82 89 Posting Whiz in Training · Answer 3 · 2013-02-17T18:00:01+00:00

Ok, it is better now: http://antobbo.webspace.virginmedia.com/test/responsive/test.html
I gave #banner an absolute position and #cnes a relative one. SO now when I resize the cnes logo stays there. This is good, but I still have the issue with the #logoText that when resizing the windows ends up at the bottom of the banner, whereas I'd like it to be within the banner, so that the black background wraps around it. Is this still a positioning issue you reckon?

Violet_82 89 Posting Whiz in Training · Answer 4 · 2013-02-17T20:57:20+00:00

Hi AleMonteiro, haven't hear from you for a while : - )!
Thanks for the code. I had a good look at it and applied it to my css, it works as you said. Going through the code I have noticed that after having applied pretty much everything the page still wasn't doing what I wanted it to do, but after changing the background declaration, ie, removing the background image url("banner.jpg") repeat-x scroll 0px 0px transparent; and replacing it with background:#000; so just the colour. This seems to be the magic trick if you like, but then I wonder, what if I want to use an image like I attempted to do? You said in the comment

using image as background here must take care of repeat-y so when the browser resize and this banner height increase the background will also increase

what do you exactly mean? The image I was using had of course a hight of its own, and had a small gradient even if it wasn't clear from the page, so I wonder how much should I increase the height?
thanks

LastMitch · Answer 5 · 2013-02-17T21:20:19+00:00

I gave #banner an absolute position and #cnes a relative one. SO now when I resize the cnes logo stays there. This is good

Its good to heard that you got it fixed! Regarding about your second issue is that you need to create a 3 column with the center column.

In the future try create a top div where you can put the logo and nav. That will make life more easier for you.

So this time around try:

This is the CSS code:

  #left {
    float: left;
    width: 120px;
  }
  #center {
    margin-left: 120px;
    margin-right: 120px;
  }
  #right {
    float: right;
    width: 120px;
  }

This is how the div looks like:

<div id="wrapper">
<div id="page">
<div id="banner">

<div id="left">
<div id="logo1">
<img src="small_LOGO.gif">
</div>
</div>

<div id="center">
<div id="logoText">
<p>This is an extra bit</p>
</div>
</div>

<div id="right">
<div id="cnes">
<img src="cnes.jpg" >
</div>
</div>

</div>
</div>
</div>

I make some space to let you see how it looks like.

You can just adjust the margin to suit your design.

AleMonteiro 238 Can I pick my title? · Answer 6 · 2013-02-17T21:50:20+00:00

Violet, if it's an small image you can use repeat-y, but the result will depend much on kind of image, it could be ridiculous for some images with effects.

The other option is to make a bigger image so it will only show more or less of it. How much bigger depends on how much the banner area can increase.
The problem with this option is that with you use an vertical gradient, when the banner height is low the gradient won't show properly.

In my opnion, handling multiple size images background is not that simple. If it will be an fixed image you can try and sort things out. But if the idea is to make a dynamic image spot (change image every day i.e.) this will be really painful, I'd suggest to set an fixed size, or have multiple sizes of the image and change with JS according to the new size of the space.

Violet_82 89 Posting Whiz in Training · Answer 7 · 2013-02-18T13:25:15+00:00

HI thanks, yes the image won't change, it's fixed but the background has some gradient at the top and bottom. I might use just the background colour as you have indicated and then perhaps create the gradient with css3? WOuld that be better?
thanks

AleMonteiro 238 Can I pick my title? · Answer 8 · 2013-02-18T14:01:48+00:00

Yes, that'd better. The CSS gradient will ajust the effect when the div resizes.