Jump to content

Recommended Posts

Im using a background image in my #Logo div.  If i minimise my browser window #bannerright will overlap my image.

 

I dont want this to happen as the image is a logo that needs to be displayed all of the time. 

Is my only way around this to place the image in my html opposed to as a bg image in my css?

 

What is the usual practice when you want a website to look good in different monitor/browser sizes?

Ive used a 100% width in my banner as I want it to span the whole screen at all times, however things such as my google map have fixed widths.  Should I be combining % in one part of my page and then px in another.

 

Please any suggestions.  I have a test page www.1pw.co.uk/b.php. 

Any suggestions /constructive critisism welcome.

Many thanks from an amateur wanting to learn.

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="header.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="banner">
<div id="bannerleft"></div>
<div id="logo"></div>
<div id="bannerright"><div id="navbar" title="">	 
						 <div id="b1"><p class="centre"><a href="index.html">Directory</a></p></div>
    					 	 <div id="b2"><p class="centre"><a href="business.html">Add Your Business</a></p></div>
   						 	 <div id="b3"><p class="centre"><a href="contact.html">Contact Us</a></p></div>
    	</div><!-- end of navbar-->
</div><!--end of bannerright-->
</div><!-- end of banner-->

@charset "utf-8";
/* CSS Document */
body
{
color:#FFF;
font-family:Tahoma, Geneva, sans-serif;
}
#listhold 
{
width:1000px;
height:auto;
margin-left:auto;
margin-right:auto;
margin-top:20px;
background-color:#06F;
padding-left:10px;
}
#b1 {margin-right:70px; margin-left:70px; height:40px; float:left}
#b2 {margin-right:70px; height:40px; float:left}
#b3 {margin-right:70px; height:40px; float:left}
a:link {color: #FFF;text-decoration: none;}
a:visited {text-decoration: none;color: #FFF;}
a:hover {text-decoration: none;color: #CCC;}
a:active {text-decoration: none;color: #CCC;}
a.blue {color:#06F;}
p.centre {color:#FFF; margin-top:2px; text-align:center;}
#banner
{
height:80px;
width:100%;
margin-top:30px;
}
#bannerleft
{
background-color:#36F;
height:25px;
width:10%;
float:left;
margin-top:13px;
}
#logo 
{
height:80px;
width:22%;
background-image:url(i-stevenage.png);
background-repeat:no-repeat;
float:left;
overflow:visible;
}

#bannerright
{
background-color:#36F;
height:25px;
width:68%;
float:left;
margin-top:13px;
}

Link to comment
https://forums.phpfreaks.com/topic/239937-protecting-background-images/
Share on other sites

as you can see in your css you gave body a width of 100%. But since it is not wrapped in a div with a fixed width, it will use the window width as a reference. So if you make a window size of 10 px #banner will be 10pixels.

 

Now as i sneaky tried to tel in the sentence above you require a reference point when working with percentages. For instance a wrapper that has a fixed width. But another thing could be to assign a min-width to en element. That way it can increase in size, but when the window is resized and meets that min-width, it shows a scroll bar.

 

As far as making sure websites look the same in most browsers. Have a look at the sticky of the css forum and apply those 6 points. besides that make sure your markup and css is valid. This seems logical but most people fail to do so.

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.