Welcome to WebmasterWorld Guest from 54.197.171.28

Forum Moderators: not2easy

Message Too Old, No Replies

Background image and Text

Not staying together

   
7:52 am on Jan 1, 2013 (gmt 0)



Hi,

Very new to CSS and im position text and navigation menu over a png background image.

I can get all the alignment ok and as soon as i restore my browser they no longer align.

How can i get this to stay aligned to the background image regardless of Resolution or size of browser?

I can submit code if required.
8:07 am on Jan 1, 2013 (gmt 0)



HTML Code:


<!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" />
<title>Make IT Work Computers</title>
<link href="Style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<h1 class="pos_right">Make IT Work</h1>
<h1 class="sml">Computers</h1>
<div id="logo"></div>
<div id="navigation" class="nav_position">
<a href="#">Home</a>|
<a href="#">About Us</a>|
<a href="#">Services</a>|
<a href="#">Shop</a>|
<a href="#">Contact Us</a>
</div>
<p><h2>Welcome</h2></p>
</body>
</html>
8:08 am on Jan 1, 2013 (gmt 0)



CSS:

/* Background, font and general customisations */
body {
margin:110px 500px;
font-size:1em;
font-family: "Myriad Pro", "Trebuchet MS", Arial;
font-size:14px;
background: url(images/background.png);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
background-color:#000000;
}
p {
padding-top:-125px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;
}

a:hover { text-decoration:underline;}

p { padding: 0 10px 5px 10px; }

/* Headers and List */
h1 {
font-family: Georgia, &quot;Times New Roman&quot;, Times, serif;
font-size: 36px;
font-weight: bold;
color: #13869b;
text-align: left;
padding:3px 0 0 10px;
}
h1.pos_right
{
position:relative;
left:220px;
top:45px;
}
h1.sml
{
font-family: Georgia, &quot;Times New Roman&quot;, Times, serif;
font-size: 36px;
font-weight: bold;
color: #13869b;
text-align: left;
position:relative;
top:10px;
left:370px;
}
h2 {
font-family: Georgia, &quot;Times New Roman&quot;, Times, serif;
font-size: 16px;
font-weight: bold;
color: #ffffff;
border-bottom: 1px solid #ffffff;
}
li {
list-style-type: none;
line-height: 150%;
list-style-image: url(images/list.png);
}
li a:link {
color: #13869b;
text-decoration: none;
font-weight: bold;
}
li a:hover {
display: block;
color: rgb(0, 96, 255);
padding-bottom: 5px;
font-weight: bold;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #169ab2;
}
li a:visited {
color: #13869b;
text-decoration: none;
font-weight: bold;
}

/* Navigation */
#navigation {
font-family: "Myriad Pro", "Trebuchet MS", Arial;
font-size: 26px;
font-weight: bold;
width:700px;
height:50px;
margin: 0 auto;
clear:both;
/* border:1px
solid #169ab2; */
text-align:center;
color:#fff;
padding-top:4px;}
#navigation.nav_position
{
position:relative;
left:150px;
top:-215px;
}
#navigation a {
color:#fff;
text-transform:uppercase;
font-size:14px;
font-weight:bold;
text-decoration:none;
margin:0 20px;
margin-top:3px;}
#navigation a:hover{ color:#169ab2}

/* Images and Logo */
#logo {
text-decoration:none;
border:0;
width : 269px;
height : 207px;
margin : 0;
padding : 0;
background : url(images/logo.png) no-repeat 0 0;
position:relative;
left:-50px;
top:-120px;
}


/* Links */
a:link {
color: #13869b;
text-decoration: underline;
font-weight: bold;
}
a:visited {
color: #13869b;
text-decoration: underline;
font-weight: bold;
}
a:hover {
color: #169ab2;
padding-bottom: 5px;
font-weight: bold;
text-decoration: underline;
}
a:active {
color: rgb(255, 0, 102);
font-weight: bold;
}
2:55 am on Jan 2, 2013 (gmt 0)

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month



Ouch. Is every single item in that CSS relevant to the problem, so if you delete any one thing the problem disappears?

If so, you're on your own :)

The usual starting point for CSS issues is to get rid of the whole CSS and then add items one by one until the display breaks. Don't even think about the rest of the page; just work on the part that isn't behaving as intended. For example, if you have a problem with header alignment, it is very unlikely that the color of the footer text will make any difference.
 

Featured Threads

Hot Threads This Week

Hot Threads This Month