Venice7
12-29-2007, 02:49 PM
Sigh. So I'm getting back into webdesign for the first time in a few years, and getting into CSS for the first time EVER. I managed to design and code the the layout fine on my own computer, off the internet, but once I tried to put it onto blogger... *shudder*. Everything went wonky, and after six hours or so there are a few things that refuse to happen correctly.
The Site (http://angelyngreye.blogspot.com)
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[/*
* Blogger Template Style
*
* Simple II
* by Jason Sutter
*/
/* Variable definitions
====================
<Variable name="bgcolor" description="Page Background Color"
type="color" default="#fff" value="#ffffff">
<Variable name="textcolor" description="Text Color"
type="color" default="#000" value="#000000">
<Variable name="pagetitlecolor" description="Blog Title Color"
type="color" default="#000" value="#000000">
<Variable name="titlecolor" description="Post Title Color"
type="color" default="#000" value="#000000">
<Variable name="footercolor" description="Date and Footer Color"
type="color" default="#555" value="#555555">
<Variable name="linkcolor" description="Link Color"
type="color" default="#58a" value="#ffffff">
<Variable name="visitedlinkcolor" description="Visited Link Color"
type="color" default="#999" value="#e6e6e6"> Used to be #969
<Variable name="bordercolor" description="Border Color"
type="color" default="#999" value="#999999">
<Variable name="bodyfont" description="Text Font"
type="font" default="normal normal 100% Georgia,Serif;" value="normal normal 100% Georgia,Serif;">
<Variable name="pagetitlefont" description="Blog Title Font"
type="font"
default="normal bold 200% Georgia,Serif" value="normal bold 200% Georgia,Serif">
<Variable name="startSide" description="Start side in blog language"
type="automatic" default="left" value="left">
<Variable name="endSide" description="End side in blog language"
type="automatic" default="right" value="right">
*/
body {
margin:0;
font:$bodyfont;
background:$bgcolor;
color:$textcolor;
}
a:link {
color:$linkcolor;
text-decoration:none;
}
a:visited {
color:$visitedlinkcolor;
text-decoration:none;
}
a:hover {
color:$titlecolor;
text-decoration:underline;
}
a img {
border-width:0;
}
html {
padding:0px;
margin:0px;
}
body
{ margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
background-color: #566D4D;
}
#header {
position: absolute;
left: 0;
height: 324px;
width: 100%;
background:url('http://img413.imageshack.us/img413/1808/headerfinalcopyit1.jpg')no-repeat top left;
}
#menu {
position: absolute;
padding: 5px;
width: 150px;
top: 165px;
left: 310px;
z-index: 1;
}
#content {
position: relative;
width: 608px;
background:url("http://img301.imageshack.us/img301/6817/backgroundlx9.jpg") repeat-y;
top: 304px;
padding-right: 10px;
padding-left: 10px;
}
#footer {
position: relative;
float: bottom;
background:url("http://img167.imageshack.us/img167/765/footertransparentzo0.png") no-repeat bottom left;
height: 56px;
width: 100%;
}
#comments {
padding-top:30px;
color:$textcolor;
padding-bottom:0px;
margin-bottom:0px;
font-weight:bold;
}
#comments .comment-footer {
font-size:1em;
font-weight:normal;
color:$footercolor;
margin-$endSide:10px;
display:inline;
}
.comment-author {
margin-top: 3%;
}
.comment-body {
font-size:1em;
font-weight:normal;
}
.deleted-comment {
font-style:italic;
color:gray;
}
.comment-link {
margin-$startSide:.6em;
}
.feed-links {
clear: both;
line-height: 2.5em;
}
#blog-pager-newer-link {
float: $startSide;
}
#blog-pager-older-link {
float: $endSide;
}
#blog-pager {
text-align: center;
}
.clear {
clear: both;
}
.profile-img {
float: $startSide;
margin-top: 0;
margin-$endSide: 5px;
margin-bottom: 5px;
margin-$startSide: 0;
}
]]></b:skin>
</head>
<body>
<div id='header'>
</div>
<div id='content'>
<b:section class='main' id='main' showaddelement='yes'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>
<div id='menu'>
<b:section class='menu' id='menu' showaddelement='yes'>
<b:widget id='Profile1' locked='false' title='About The Author' type='Profile'/>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
<b:widget id='Label1' locked='false' title='Labels' type='Label'/>
</b:section>
</div>
</body>
</html>
(that's probably a complete and utter mess, huh? Ick, this CSS stuff is so hard. I don't care what people say, I think I like tables better. x_x)
Firstly:
Is it just me being amateur, or does CSS behave completely RANDOMLY sometimes??? Sometimes, out of nowhere, my "content" div would just move 20 pixels down or so, and I'd have to adjust it's position to get it in the right place. Then it would just move back UP a bit later. Arg. And don't get me started on positioning the menu div... for some reason that I fail to understand at all, it seems to consider a pixel to be more than it is, if that's possible. I would move it 10 px to the right and it would move much more that it's supposed to. I have to guess to get it in the proper position and I still have no idea why what's happening is happening.
Secondly:
The padding for the content div. AHHHHHH!!! I really need some padding on the right side, but no matter what I do, it REFUSES.
Thirdly:
In IE, the top image won't show and I have absolutely no idea why whatsoever. None.
Fourthly:
I DID have a footer that I was trying to position, but I gave up on that pretty quickly. Even so, if anyone has some tips, that would be so great.
I know I have a lot of problems (heh, perhaps in more than one way :D ) but I will be eternally grateful to anyone that can help even one of these issues. Thanks so much!
The Site (http://angelyngreye.blogspot.com)
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[/*
* Blogger Template Style
*
* Simple II
* by Jason Sutter
*/
/* Variable definitions
====================
<Variable name="bgcolor" description="Page Background Color"
type="color" default="#fff" value="#ffffff">
<Variable name="textcolor" description="Text Color"
type="color" default="#000" value="#000000">
<Variable name="pagetitlecolor" description="Blog Title Color"
type="color" default="#000" value="#000000">
<Variable name="titlecolor" description="Post Title Color"
type="color" default="#000" value="#000000">
<Variable name="footercolor" description="Date and Footer Color"
type="color" default="#555" value="#555555">
<Variable name="linkcolor" description="Link Color"
type="color" default="#58a" value="#ffffff">
<Variable name="visitedlinkcolor" description="Visited Link Color"
type="color" default="#999" value="#e6e6e6"> Used to be #969
<Variable name="bordercolor" description="Border Color"
type="color" default="#999" value="#999999">
<Variable name="bodyfont" description="Text Font"
type="font" default="normal normal 100% Georgia,Serif;" value="normal normal 100% Georgia,Serif;">
<Variable name="pagetitlefont" description="Blog Title Font"
type="font"
default="normal bold 200% Georgia,Serif" value="normal bold 200% Georgia,Serif">
<Variable name="startSide" description="Start side in blog language"
type="automatic" default="left" value="left">
<Variable name="endSide" description="End side in blog language"
type="automatic" default="right" value="right">
*/
body {
margin:0;
font:$bodyfont;
background:$bgcolor;
color:$textcolor;
}
a:link {
color:$linkcolor;
text-decoration:none;
}
a:visited {
color:$visitedlinkcolor;
text-decoration:none;
}
a:hover {
color:$titlecolor;
text-decoration:underline;
}
a img {
border-width:0;
}
html {
padding:0px;
margin:0px;
}
body
{ margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
background-color: #566D4D;
}
#header {
position: absolute;
left: 0;
height: 324px;
width: 100%;
background:url('http://img413.imageshack.us/img413/1808/headerfinalcopyit1.jpg')no-repeat top left;
}
#menu {
position: absolute;
padding: 5px;
width: 150px;
top: 165px;
left: 310px;
z-index: 1;
}
#content {
position: relative;
width: 608px;
background:url("http://img301.imageshack.us/img301/6817/backgroundlx9.jpg") repeat-y;
top: 304px;
padding-right: 10px;
padding-left: 10px;
}
#footer {
position: relative;
float: bottom;
background:url("http://img167.imageshack.us/img167/765/footertransparentzo0.png") no-repeat bottom left;
height: 56px;
width: 100%;
}
#comments {
padding-top:30px;
color:$textcolor;
padding-bottom:0px;
margin-bottom:0px;
font-weight:bold;
}
#comments .comment-footer {
font-size:1em;
font-weight:normal;
color:$footercolor;
margin-$endSide:10px;
display:inline;
}
.comment-author {
margin-top: 3%;
}
.comment-body {
font-size:1em;
font-weight:normal;
}
.deleted-comment {
font-style:italic;
color:gray;
}
.comment-link {
margin-$startSide:.6em;
}
.feed-links {
clear: both;
line-height: 2.5em;
}
#blog-pager-newer-link {
float: $startSide;
}
#blog-pager-older-link {
float: $endSide;
}
#blog-pager {
text-align: center;
}
.clear {
clear: both;
}
.profile-img {
float: $startSide;
margin-top: 0;
margin-$endSide: 5px;
margin-bottom: 5px;
margin-$startSide: 0;
}
]]></b:skin>
</head>
<body>
<div id='header'>
</div>
<div id='content'>
<b:section class='main' id='main' showaddelement='yes'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>
<div id='menu'>
<b:section class='menu' id='menu' showaddelement='yes'>
<b:widget id='Profile1' locked='false' title='About The Author' type='Profile'/>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
<b:widget id='Label1' locked='false' title='Labels' type='Label'/>
</b:section>
</div>
</body>
</html>
(that's probably a complete and utter mess, huh? Ick, this CSS stuff is so hard. I don't care what people say, I think I like tables better. x_x)
Firstly:
Is it just me being amateur, or does CSS behave completely RANDOMLY sometimes??? Sometimes, out of nowhere, my "content" div would just move 20 pixels down or so, and I'd have to adjust it's position to get it in the right place. Then it would just move back UP a bit later. Arg. And don't get me started on positioning the menu div... for some reason that I fail to understand at all, it seems to consider a pixel to be more than it is, if that's possible. I would move it 10 px to the right and it would move much more that it's supposed to. I have to guess to get it in the proper position and I still have no idea why what's happening is happening.
Secondly:
The padding for the content div. AHHHHHH!!! I really need some padding on the right side, but no matter what I do, it REFUSES.
Thirdly:
In IE, the top image won't show and I have absolutely no idea why whatsoever. None.
Fourthly:
I DID have a footer that I was trying to position, but I gave up on that pretty quickly. Even so, if anyone has some tips, that would be so great.
I know I have a lot of problems (heh, perhaps in more than one way :D ) but I will be eternally grateful to anyone that can help even one of these issues. Thanks so much!