Imaging floating when resizing browser window

Question

Imaging floating when resizing browser window

118 Views Asked by Oscar Kasil At 18 June 2015 at 01:42

been trying to get my logo which is a .gif to float on my header image and stick there even when resizing page almost had it, then i resized my window. Am i wasting my time because i actually give up been trying for hours with no luck.

    <head>
    <meta charset="utf-8" />
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
        <title>B.13 DJ Hire</title>
            <link rel="stylesheet" type="text/css" 
            href="http://yui.yahooapis.com/2.8.0r4/build/reset/reset-min.css">

                    <link rel="stylesheet" type="text/css" media="screen" href="bubba.css"/>
    </head>

    <body>

     <div id="box">
     <div id="header">
    <a href="index.html" class="banner">
         <img src="images/banner.jpg">
      </a>

      <a href="index.html" class="logo">
         <img src="images/logo.gif">
      </a>



</div>
     <h1>B13. DJ Equipment Hire</h1>
     <nav>
        <ul id="mainnav">
            <li class="home"><a href="index.html">Home</a></li>
            <li class="mixers"><a href="mixers.html">Mixers</a></li>
            <li class="turntables"><a href="turntables.html">Turntables</a></li>
            <li class="mp3"><a href="mp3.html">MP3 Media Players</a></li>
            <li class="headphones"><a href="headphones.html">Headphones</a></li>
            <li class="contact"><a href="contact.html">Contact Us</a></li>
        </ul>
      </nav>
      <h2> Our Equipment Range<h2>
         <br><br>
<p> we are a equipment hire company..</p>



      <br>

     <p id="footer">45 Marsh Grass Ln. &#8226; Marble, MN 55764 &#8226; (218) 555-5253</p>
     </div>
     </body>

Here is my CSS code

body {
    padding: 0;
    margin: 0;
    font-family: tahoma, arial, helvetica, sans-serif;
  }
h1, h2 {
    text-align: center;
    font-family:  georgia, "times new roman", times, serif;
    }
h1 {
    margin: 0;
    font-size: 2em;
    color: white;
    background: #585858;
    line-height: 1.90em;
    width: auto;
    text-align: centre;
    background-position: center;
    text-shadow: 2px 2px 4px #000000;
    border-radius: 0.30em;
    }

h2 {
    font-size: 1.5em;

    }

#box {
    border-style: none;
    width: 70em;
    padding: 0em;
    margin-left: auto; 
    margin-right: auto;
    background: #C2C2C2;
    }

#header{

    }

.banner img{
    position: relative;
    float: left;
    height:206px;
    width:1120px;
    z-index: 1;
    display:block;
    }

.logo img  {
    position: absolute;
    float:right;
    margin-top: 0px;
    margin-left: 0px;
    z-index: 2; 
    height:290px;
    width:712px;
    bottom:335px;
    right:50px;

    }
#footer {
    background: #A6A6A6;
    text-align: right;
    padding: 0.25em;
    margin: 0;
    }

.callout {
    font-weight: bold;  
    }

#mainnav {
    text-align: center;
    background: #A6A6A6;
    padding: 0.75em;
    margin: 0;
    position: relative;
    border-radius: 0.5em;
    }

#mainnav li {
  display: inline-block;
  list-style-type: none;
  padding: 0;
  background: A6A6A6;
  color: #A6A6A6;
  }

#mainnav a:link{
    color:black;
    background-color: transparent;
    text-decoration: none;
    }

#mainnav a:hover{
    color: blue;
    background-color:#C2C2C2;
    text-decoration: underline;
    text-shadow: 8px 12px 12px blue;
    }

#mainnav a:visited {
    color: black;
    }

#mainnav li.home a{
    color: black;
    padding: 10px 20px;
    border-top: 2px solid #A6A6A6;
    border-bottom: 2px solid #A6A6A6;
    }

#mainnav li.home a:hover {
    color: black;
    background-color:#C2C2C2;
    padding: 10px 20px;
    }

#mainnav li.mixers a{
    color: black;
    padding: 10px 20px;
    border-top: 2px solid #A6A6A6;
    border-bottom: 2px solid #A6A6A6;
    }

#mainnav li.mixers a:hover {
    color: black;
    background-color:#C2C2C2;
    padding: 10px 20px;
    }

#mainnav li.turntables a{
    color: black;
    padding: 10px 20px;
    border-top: 2px solid #A6A6A6;
    border-bottom: 2px solid #A6A6A6;
    }

#mainnav li.turntables a:hover {
    color: black;
    background-color:#C2C2C2 ;
    padding: 10px 20px;
    }

#mainnav li.mp3 a{
    color: black;
    padding: 10px 20px;
    border-top: 2px solid #A6A6A6;
    border-bottom: 2px solid #A6A6A6;
    }

#mainnav li.mp3 a:hover {
    color: black;
    background-color:#C2C2C2 ;
    padding: 10px 20px;
    }

#mainnav li.headphones a{
    color:#black;
    padding: 10px 20px;
    border-top: 2px solid #A6A6A6;
    border-bottom: 2px solid #A6A6A6;
    }

#mainnav li.headphones a:hover {
    color: black;
    background-color:#C2C2C2 ;
    padding: 10px 20px;
    }

#mainnav li.contact a{
    color: black;
    padding: 10px 20px;
    border-top: 2px solid #A6A6A6;
    border-bottom: 2px solid #A6A6A6;
    }

#mainnav li.contact a:hover {
    color: black;
    background-color:#C2C2C2 ;
    padding: 10px 20px;
    }

#slideshow {
    position:absolute;
    text-align: center;
    }

#pics {
    margin-left: auto;
    margin-right: auto;
    width: 50%;
    float: right;
    text-align: center;
    }

    #content {
    position: relative;
}
#content img {
    position: absolute;
    top: 0px;
    right: 0px;
    }


img {
    max-width: 120%;
    display: block;
    background-size: 100%;

}


img {
    max-width: 100%;
    display: block;
}

#slideshow {
wd

Original Q&A

There are 3 best solutions below

**Michael G** · Answer 1 · 2015-06-18T02:24:31.577000

You say you want to float your image, and you have float stated for the logo style, but you also have position:absolute stated as well. You need to use one or the other to achieve your goal my friend.

Also you are missing a few closing DIVs in your code. Can you share a URL to your issue? that may be easier than seeing the incomplete code.

**Sam B.** · Answer 2 · 2015-06-18T02:29:51.043000

Your CSS styling you have (position:absolute) is causing the problem. Along with the fact that you have it positioned exactly in a fixed spot on the page with your position properties like "top" "bottom" "left" and "right". You do not want this when you have a logo in a spot on the page that doesn't move around (like in your header). To fix this, you want to remove what you had under the CSS for ".logo img" and put the following:

.logo img  {
    height:200px;
    width:200px;
}

Here is an example of it: https://jsfiddle.net/Lp7fwm7a/. When you resize the window, the logo stays in the correct place like how you want it.

You might also want to look into the float property if you have two div's in your header. Here's a good article on it: https://css-tricks.com/all-about-floats/.

**khopsickle** · Answer 3 · 2015-06-18T03:05:58.257000

Using the position: absolute; attribute means that image is being positioned according to the browser window (because you don't have any other absolute positioned elements on the page).

Your top and bottom values are counting from the edge of the browser window, not from the edge of your image.

You can center it like by replacing .logo img with:

position: absolute;
left: 0;
right: 0;
margin: 0 auto 0;
height: 290px;
width: 712px;
z-index: 2;

Your logo is a lot taller than your header image. I noticed the top of the logo in your code was cut off, not sure if you meant to do that or not but if you edit that first 0 in margin, you can adjust the top margin. -100px or so should put it back where you had it.

Also just a comment about what the other answers say, you're not missing a closing div tag - there's just really inconsistent indentation making your HTML and CSS really difficult to read. You are missing a / in the closing h2 tag and you spelled 'center' as 'centre' in your h1, h2 CSS.

Here's a link to all the fixes (including indentation): http://codepen.io/anon/pen/KpXKVG

Imaging floating when resizing browser window

There are 3 best solutions below

Related Questions in HTML

Related Questions in CSS

Related Questions in CSS-FLOAT

Related Questions in MARGIN

Trending Questions

Popular # Hahtags

Popular Questions