- This topic is empty.
-
AuthorPosts
-
June 24, 2011 at 12:27 pm #33256janethreadMember
Hi All,
I am brand new to CSS, and need some help with my new blog, that I’m creating using Weebly. I’ve been doing all of my work on a mac. When I view my page on the mac, it looks perfect; however, when I veiw it on a PC, it is totally off center–the background, header, text and navigation. I’ve looked at it on three different PCs, and it looks different on each one (all off center). I’m not sure what I’m doing wrong.
Can anyone help? I’m pasting the CSS code below. I would be forever grateful if someone could help me figure out what’s what!
Thanks in advance :)*|* {
margin:auto;
padding:auto;
}
body {
background-image:url(‘background redo 19.jpg’);
background-position: center-center;
background-attachment: fixed;
background-repeat: no-repeat;
margin: 0pt auto;
padding: auto;
min height: 100%;
min width: 1183pix;
max width: 1183pix;
}
p {
line-height:1.5;
}
h1, h2, h3{
line-height:1.5;
}
#wrapper {
width:100%;
margin:0pt auto;
}
#contents {
width:80%;
margin:0pt auto;
}
*html #contents {
width:1183px;
}
#header {
background-image:url(‘logo 100.png’);
float:center-center;
width:900px;
height:289px;
text-align:center;
margin:0pt auto;
}
#sitename {
position:relative;
float:left;
padding-top:25px;
font-family:”times new roman”,garamond, serif;
color:#333333;
font-size:2.5em;
text-align:center;
}
#navigation {
float:left;
background: transparent url(nav_background.jpg) no-repeat center top;
float:center;
width:960px;
height:40px;
margin:0 auto;
font-family:”lucida sans”, arial, sans-serif;
font-size:1em;
}
#navigation ul {
float:left;
padding-left:20px;
padding-top:12px;
margin-left:0px;
width:940px;
height:28px;
}
*html #navigation ul {
margin-left:-12px;
}
#navigation li {
float:left;
display:inline;
font-size:1em;
padding:12px 20px 13px 20px;
margin-top:-12px;
height:15px;
}
*html #navigation li {
margin-right:4px;
}
#active {
float:center;
background: transparent url(activetab_background.jpg) no-repeat center top;
color:#fff;
text-align:center;
}
#navigation a:link {
color:#fff;
text-decoration:none;
}
#navigation a:hover {
color:#fff;
text-decoration:none;
}
#navigation a:visited {
color:#fff;
text-decoration:none;
}
#active a:link {
color:#fff;
text-decoration:none;
}
#active a:hover {
color:#fff;
text-decoration:none;
}
#active a:visited {
color:#fff;
text-decoration:none;
}
a:link, a:hover, a:visited {
color:#198bef;
font-weight:normal;
text-decoration:underline;
}
#main {
clear:both;
width:920px;
min-height:400px;
height:auto !important;
height:400px;
padding:30px 20px 30px 20px;
}
img.image-left {
margin-right:15px;
float:left;
}
img.image-right {
margin-left:15px;
float:right;
}
#footer {
float:left;
width:960px;
border-top:1px solid #000000;
margin:0px 0 30px 0;
}
#footer-contents {
float:left;
color:#000000;
font-family:”lucida grande”, “lucida sans”, arial, sans-serif;
padding:15px 0 0 20px;
width:940px;
height:28px;
}
*html #footer-contents {
margin-top:-5px;
}
input {
background-color:#fff;
border:1px solid #999;
font-size:12px;
}
textarea {
background-color:#fff;
border:1px solid #999;
font-size:12px;
}June 24, 2011 at 1:35 pm #82306Historical Forums UserParticipantDo you have a link to the site?
June 24, 2011 at 2:00 pm #82307janethreadMemberhttp://www.janethread.com
Thanks so much, Abel!June 24, 2011 at 2:08 pm #82308janethreadMember@fordinary I don’t know what that is. elaborate please? thx!
June 24, 2011 at 2:40 pm #82313TheDocMemberA link to the website is perfect in this case.
For starters, I would look into these 31 errors.
To center your background you’ll need to change this:
background-position: center-center;
to this:
background-position: center center;
The dash in the middle is causing the positioning to fail.
June 24, 2011 at 2:42 pm #82315chrisburtonParticipantWhat’s this?
*|* {
margin:auto;
padding:auto;
}June 24, 2011 at 2:49 pm #82316janethreadMember@thedoc thank you so much! I took out the dash, but I can’t tell if it worked yet. The website always looks fine on my mac, so I need to look at it on a pc. 31 errors is a lot! Should I try to fix all of them? Will my website work if I don’t fix them?
Thank you for being so helpful!June 24, 2011 at 2:50 pm #82317janethreadMember@christopherburton–not really sure what it is :/
is it wrong? what should be there instead?June 24, 2011 at 2:50 pm #82318TheDocMemberThe website in most cases will work. Fixing the errors will give you a better understanding of how the code should look, what good practices are, etc.
June 24, 2011 at 2:54 pm #82319chrisburtonParticipant* { margin: 0; padding: 0; }
June 24, 2011 at 2:54 pm #82320janethreadMember@thedoc Got it! I will try fixing them as best I can. Thanks again for your help.
June 24, 2011 at 2:56 pm #82321janethreadMember@christopherburton I fixed it. thanks for pointing that out!
June 24, 2011 at 3:10 pm #82322deanpogniMemberHey, (first post!)
Here are some changes I would make to your site.
I noticed that the content isn’t centered to the background and scrolls at a different percentage than your content. change this:
#wrapper {
margin: 0 auto;
width: 100%;
}to
#wrapper {
margin: 0 auto;
width: 900px;
}also, this one is more a matter of preference but…
in the body area, make this change:
background-position: center center;
change it to
background-position: center top;
this will lock your background to the top so you don’t have that white border on top. which is happening to me on my 24 inch monitor. You might want consider a bigger background or something that repeats.
June 24, 2011 at 3:21 pm #82324janethreadMember@deanpogni Thanks for the input! I changed the position to center top. But when I changed the margin to 900px, it went off center again–at least on my screen it did. But maybe it is correct at 900px, as there never appears to be an issue when I’m on a mac, only pc.
June 24, 2011 at 3:48 pm #82323janethreadMemberHey virtual,
I mis-typed–I did in fact change the width, not margin, and that’s what caused it to be off center on my comp. I just had my sister send me a screen shot from her PC, and it was off center there too. The background is centered. Now it’s the header, body and navigation that are off.
I think I will try to download one of the programs that you recommended–I don’t want to annoy my sis by making her send me screenshots every 10 min :) -
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.