homepage Welcome to WebmasterWorld Guest from 54.167.138.53
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
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, &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;
}

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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved