4 Replies - 1572 Views - Last Post: 21 February 2013 - 06:45 AM

#1 DkSnowdon  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 128
  • Joined: 31-October 12

Stop image from moving when resize

Posted 15 February 2013 - 06:41 PM

hi, its been a while since i have used html and css and cant seem to get my header bar to stop changing when i resize the image

does anyone have a clue what i did wrong or is there a way to stop their from happening


header html code
<body style="background-color:#CCC">
    	<div id="header">
       		<div id="header_logo">
            	<!-- start of the tier 1 division -->
           	  <div class="tier1">
                	KEVIN
                </div>
                <!-- start of the tier 2 division -->
              <div class="tier2">
                	SNOWDON
                </div>
                <!-- start of tier 3 division -->
              <div class="tier3">
                	Building Services
                </div>
                <!-- start of tier 4 division -->
                <div class="tier4">
                	<p><img class="header_logo_phone" src="images/header_right_phone.png" width="35" height="43" alt="Phone Now on 07710761766" />07710761766</p>
                </div>
            </div>
             <div id="main_montage"><img src="images/main_motage.jpg" width="851" height="123" /></div>
        </div>



css code for main and header
@charset "UTF-8";
/* CSS Document */

#main_content{
	margin-right:auto;
	margin-left:auto;
	width:1051px;
}#left{
	width:50%;
	float:left;
	background-color:#999;
}#right{
	width:50%;
	float:right;
	background-color:#999;
}#right_container{
	width:96%;
	float:right;
	margin-left:10px;
}#main_img_desc{
	border: #000 thin;
	height: 200px;
	margin-top:10px;
	border: thin solid #666;
}#header{
	width:95%;
	margin-right:auto;
	margin-left:auto;
	height:123px;
	max-width:1051px;
}.title_bar{
	height:30px;
	width:100%;
	background-image: url(../images/smooth_button.jpg);
	background-repeat: repeat-x;
}#contact{
	margin-top:10px;
	border: thin solid #666;
}
	

@charset "UTF-8";
/* CSS Document */


#header_logo{
	height:123px;
	width:200px;
	float:left;
	overflow:hidden;
}#header_logo .tier1{
	width:100%;
	height:25%;
	text-align:center;
	font-size:32px;
}
#header_logo .tier2{
	width:100%;
	height:25%;
	text-align:center;
	font-size:32px;
}
#header_logo .tier3{
	width:100%;
	height:10%;
	text-align:center;
	font-size:18px;
}#header_logo .tier4{
	width:100%;
	height:40%;
	text-align:left;
	font-size:24px;
}
img.header_logo_phone 
{
	vertical-align:middle;
	float:left;
	margin-top:auto;
	margin-bottom:auto;
}
#main_montage {
	}




Posted Image
Posted Image


any feedback is appreciated
Thanks dale

Is This A Good Question/Topic? 0
  • +

Replies To: Stop image from moving when resize

#2 Ladymusicc  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 15-February 13

Re: Stop image from moving when resize

Posted 15 February 2013 - 11:52 PM

maybe you could try to recode the header? Change where it margins too and the size of it. Even though the size hasn't changed, it may help to better position it. I would have to put this thing in a file where I could see it live to better understand it. Looking at it like this, I'm afraid the advice I just gave you is all I got. Best of luck.
Was This Post Helpful? 0
  • +
  • -

#3 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3465
  • View blog
  • Posts: 11,755
  • Joined: 12-December 12

Re: Stop image from moving when resize

Posted 16 February 2013 - 02:13 AM

Your description is a little confusing as images don't (naturally) resize, it is block-level elements (DIVs, Ps etc.) that resize to the width of the browser window, or their containing element. If you use floated elements and there isn't sufficient width to contain them, then they will drop below other elements.

I think you should investigate css layouts. You have to decide on the overall layout of your page, and how you want it to behave. That is, do you want a fixed-layout, or a liquid-layout that expands or shrinks when the browser is resized.
Was This Post Helpful? 0
  • +
  • -

#4 FerretHolmes  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 41
  • View blog
  • Posts: 167
  • Joined: 12-November 12

Re: Stop image from moving when resize

Posted 17 February 2013 - 05:12 PM

Andrew has sound advice. I looked through the code and can probably help you through your issue, but honestly it would be redundant. You have way to many div's going on. Check out Andrewsw's site, he has some good information on layouts and element positioning.
Andrewsw Site
Also, check into the differences between id and class here,
Css-Tricks
Was This Post Helpful? 0
  • +
  • -

#5 bobjob5  Icon User is offline

  • New D.I.C Head

Reputation: 3
  • View blog
  • Posts: 25
  • Joined: 21-January 13

Re: Stop image from moving when resize

Posted 21 February 2013 - 06:45 AM

Is it auto? If its "auto" in your CSS then you need to change it from width pixels, to width percentage.

See, when it shrinks, it shrinks by percentage, instead of pixel. If the pixels are set, then the picture will look really wonky.

I'm not 100% sure if your header is "auto" or not, but if it is, try a % instead of pixel size. This should fix your problem.

BJ
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1