homepage Welcome to WebmasterWorld Guest from 54.161.246.212
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#: 4532311 posted 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#: 4532311 posted 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#: 4532311 posted 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

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



 
Msg#: 4532311 posted 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