| Background image and Text
Not staying together |
Exodus_AU
msg:4532313 | 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.
|
Exodus_AU
msg:4532314 | 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>
|
Exodus_AU
msg:4532315 | 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, "Times New Roman", 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, "Times New Roman", Times, serif;
font-size: 36px;
font-weight: bold;
color: #13869b;
text-align: left;
position:relative;
top:10px;
left:370px;
}
h2 {
font-family: Georgia, "Times New Roman", 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;
}
|
lucy24
msg:4532415 | 2:55 am on Jan 2, 2013 (gmt 0) |
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.
|
|
|
