list and image lineup
Regular
Posted: Wed, 2008-06-04 09:53
Here's my problem page.
http://shokka.net/inezb/wordpress/
You can see in the sidebar, it looks good to me in FF, but in IE 7 and Opera it gets all out of wack. I had to modify someone else's theme so I don't understand CSS at all really. It is a mess, yes but can't be helped.
I validated the code as much as I could understand.
The only thing I really want to fix is
a) putting a small space below the word "yoga"
b) making sure the text lines up with the little lips
c) making sure the search bar lines up with the rest of it and isn't longer/shorter
if there is some wrong way I've posted in this site let me know and I'll fix it.
html {
height: 100%;
}
body {
padding-left: 30px;
margin-left: 30px;
background: url(images/bg2.gif);
background-repeat: repeat-x;
margin: 0px;
height: 100%;
background-color: #99ffcc;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
}
#container {
text-align: left;
}
#header {
width: 995px;
height: 310px;
background: url(images/title.jpg) no-repeat;
}
#content {
width: 1200px;
margin-top: 10px;
margin-left:15px;
colour: #66cc99;
}
#footernote {
height: 30px;
margin-right: 80px;
margin-top: 80px;
margin-left: 20px
}
#title {
float: left;
width: 300px;
height: 65px;
margin-left: 50px;
color: #333333;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
}
#title a:link {
color: #003333;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
text-decoration: none;
}
#title a:visited {
color: #003333;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
text-decoration: none;
}
#title a:hover {
color: #003333;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
text-decoration: none;
}
#headerright {
float: right;
width: 450px;
height: 210px;
}
#headerleft {
float: left;
width: 480px;
height: 210px;
}
#search {
margin-top: 40px;
float: right;
width: 240px;
height: 12px;
margin-right: 0px;
text-align: right;
}
.searchbox {
border: 1px solid #ffffff;
background-color: #ffffff;
color: #003333;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
padding: 4px;
}
.textarea {
border: 0px solid #ffffff;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
padding: 4px;
background: #ffffff;
}
.searchbutton {
width: 64px;
height: 23px;
margin: 0;
padding: 0;
border: 0;
background: transparent url(images/search.gif) no-repeat center top;
text-indent: -1000em;
cursor: pointer; /* hand-shaped cursor */
cursor: hand; /* for IE 5.x */
}
top;
text-indent: -1000em;
cursor: pointer; /* hand-shaped cursor */
cursor: hand; /* for IE 5.x */
}
.submitcomment {
width: 119px;
height: 27px;
margin: 0px;
padding: 0px;
border: 0px;
background: url(images/sub-com.gif)no-repeat center top;
text-indent: -1000em;
cursor: pointer; /* hand-shaped cursor */
cursor: hand; /* for IE 5.x */
}
#comment-1 {
margin: 0px;
padding: 5px;
}
#comment-2 {
margin: 0px;
padding: 5px;
}
#sidebar {
float: right;
width: 530px;
}
#left {
float: left;
width: 229px;
border-left: 2px solid #002e2e;
list-style: none;
padding-left: 40px;
}
#left img {
float: left;
margin: 0px;
}
#left ul {
list-style: none;
margin: 0px;
padding: 0px;
}
#right {
float: left;
width: 240px;
padding-top: 20px
}
a:link {
color: #333333;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
text-decoration: none;
line-height: 20px;
}
a:visited {
color: #333333;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
text-decoration: none;
line-height: 20px;
}
a:hover {
color: #003333;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
text-decoration: none;
line-height:20px;
color: #333333;
}
.meta {
padding-left: 10px;
padding-right: 10px;
}
.feedback a {
display: block;
text-align: center;
padding-right: 10px;
background: url(images/h3.gif) no-repeat;
width: 230px;
line-height: 28px;
margin-bottom: 30px;
}
blockquote {
border-left: 4px solid #ffffff;
color: #003333;
}
blockquote p {
margin: 25px;
}
h2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
width: 229px;
height: 28px;
line-height: 25px;
background: url(images/h1.gif) no-repeat;
padding-left: 15px;
padding-right: 10px;
list-style-image: none;
font-weight: lighter;
color: #ffffff;
}
h3 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
width: 229px;
height: 28px;
line-height: 28px;
background: url(images/h3.gif) no-repeat;
padding-left: 15px;
padding-right: 10px;
list-style-image: none;
font-weight: lighter;
color: #ffffff;
}
.pagenav li {
list-style-image: url(images/lips.gif) ;
line-height: 14px;
margin-left: 45px;
}
.page_item ul {
margin-left: 5px;
padding: 0px;
}
.page_item li {
list-style-image: url(images/b3.gif) ;
margin-left: 15px;
padding: 0px;
}
#wp-calendar {
text-align: center;
padding-left: 20px;
}
::-moz-selection{
background:#ffffff;
color:#000000;
}
::selection {
background:#ffffff;
color:#000000;
}
code::-moz-selection {
background: #ffffff;
}
code::selection {
background: #ffffff;
}
#linkcat-1 ul {
list-style-image: url(images/lips.gif) ;
margin-left: 40px;
padding: 0px;
line-height: 14px;
}
.categories {
line-height: 18px;
list-style: none;
margin-left: 10px;
padding: 0px;
}
.categories ul {
list-style: none;
margin: 0px;
padding: 0px;
}
.categories a:link {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
padding-left: 25px;
display:block;
color: #333333;
background: url() no-repeat;
text-decoration: none;
border-width: 0px 0px 1px 0px;
border-spacing: 0px;
border-style: dotted dotted dotted dotted;
border-color: green green green green;
border-collapse: separate;
background-color: rgb(204, 255, 204);
padding:3px;
}
.categories a:visited {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
padding-left: 25px;
display:block;
background: url() no-repeat;
color: #333333;
text-decoration: none;
border-width: 0px 0px 1px 0px;
border-spacing: 0px;
border-style: dotted dotted dotted dotted;
border-color: green green green green;
border-collapse: separate;
background-color: rgb(204, 255, 204);
padding:3px;
}
.categories a:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
background: url() no-repeat;
background-position: 0px -18px;
text-decoration: none;
color: #333333;
background-color: #ffff99;
border-width: 0px 0px 1px 0px;
border-spacing: 0px;
border-style: dotted dotted dotted dotted;
border-color: green green green green;
border-collapse: separate;
background-color: rgb(204, 255, 204);
padding:3px;
}
.children a:link {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
padding-left: 25px;
background: url() no-repeat;
color: #333333;
}
.children a:visited {
padding-left: 25px;
display:block;
color: rgb(204, 255, 204);
background: url() no-repeat;
}
.children a:hover {
background-position: 0px -12px;
color: #333333;
background: url() no-repeat;
background-color: #ffff99;
}
.metaa {
text-align: left;
line-height: 15px;
list-style: none;
margin-left: 25px;
padding: 0px;
}
#post {
margin: 0px;
padding: 0px;
}
#center {
margin-top:8px;
border-width: 3px 3px 3px 3px;
border-spacing: 2px;
border-style: ridge ridge ridge ridge;
border-color: #003333 #003333 #003333 #003333;
border-collapse: separate;
background-color: rgb(255, 255, 255);
padding: 15px;
width: 590px;
float: left;
}
.archives {
display: block;
line-height: 18px;
list-style: none;
margin-left: 10px;
padding: 0px;
}
.archives ul {
list-style: none;
margin: 0px;
padding: 0px;
}
.archives li {
list-style: none;
margin: 0px;
padding: 0px;
}
.archives a:link {
width: 200px;
font-family: tahoma;
padding-left: 25px;
display:block;
color: #ffffff;
background: url(images/menu3.gif) no-repeat;
}
.archives a:visited {
width: 200px;
padding-left: 25px;
display:block;
color: #ffffff;
background: url(images/menu3.gif) no-repeat;
}
.archives a:hover {
width: 200px;
background: url(images/menu3.gif) no-repeat;
background-position: 0px -18px;
}
.floatright {float:right; padding: 12px; border: 0px;}
.floatleft {float:left; padding: 8px; border: 0px;}"you know you're a nerd when you try to shoo a fly away from your monitor with your mouse...it happened to me just now, it was scary..."
Moderator
Posts: 6662
Joined: 2004-05-01
Location: Brisbane
Don't use list-style-image
Posted: Wed, 2008-06-04 12:50
Don't use list-style-image as positioning is too hard. Use list-style: none and instead add the image as a background-image which you can then control with background-position.
How to get help
tags.
Post a link. If you can't post a link, post ALL your code, both HTML & CSS. No server-side code; just the code sent to the browser.
Use
My articles | CSS Reference
Regular
Posts: 28
Joined: 2008-06-04
brilliant...that seemed to
Posted: Wed, 2008-06-04 19:50
brilliant...that seemed to be working thanks very much, I had a problem with my wordpress just spitting the dummy all of a sudden, but I'll set you know how it pans out when I get it fixed. Oh you're in brisvegas? should visit our fishbowl down here at the goldie sometime and get some sun...then you wouldn't be so pale...and be growing horns... \
"you know you're a nerd when you try to shoo a fly away from your monitor with your mouse...it happened to me just now, it was scary..."
Moderator
Posts: 6662
Joined: 2004-05-01
Location: Brisbane
I head towards the GC plenty
Posted: Wed, 2008-06-04 21:35
I head towards the GC plenty of times; on my way to NSW.
How to get help
tags.
Post a link. If you can't post a link, post ALL your code, both HTML & CSS. No server-side code; just the code sent to the browser.
Use
My articles | CSS Reference
Regular
Posts: 28
Joined: 2008-06-04
nope won't let me do that
Posted: Fri, 2008-06-06 08:16
Ok I need the lips to sit next to each item on the list.
The id pagenav controls that, so that's where I've put my background image. However, it won't sit to the left of the list with positioning because there is no room. I've left the lips on repeat so you can see the line starts where the list does and there's no room for the image to sit on the left. But there is only 1 set of lips to show normally
}
.pagenav li {
list-style: none;
background-image: url(images/lips.gif) ;
line-height: 14px;
margin-left: 45px;
}
.page_item ul {
margin-left: 5px;
padding: 0px;
}
.page_item li {
list-style: none;
margin-left: 15px;
padding: 0px;
}
"you know you're a nerd when you try to shoo a fly away from your monitor with your mouse...it happened to me just now, it was scary..."
Moderator
Posts: 6662
Joined: 2004-05-01
Location: Brisbane
You need to add some padding
Posted: Fri, 2008-06-06 08:17
You need to add some padding left.
How to get help
tags.
Post a link. If you can't post a link, post ALL your code, both HTML & CSS. No server-side code; just the code sent to the browser.
Use
My articles | CSS Reference
Regular
Posts: 28
Joined: 2008-06-04
now the spaces
Posted: Fri, 2008-06-06 11:01
brilliant that worked...for some reason it didn't work the first few times I tried to add padding, thankyou very much. What about the lack-of space underneath the word yoga? I tried adding padding in the .page_item ul id but that didn't work. I don't know where to add the padding-bottom in my code for that one..interested to know where you find the time to design web pages and answer questions on this forum, I don't have time to do my own website let alone answer questions...
here's the code now
html {
height: 100%;
}
body {
padding-left: 30px;
margin-left: 30px;
background: url(images/bg2.gif);
background-repeat: repeat-x;
margin: 0px;
height: 100%;
background-color: #99ffcc;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
}
#container {
text-align: left;
}
#header {
width: 995px;
height: 310px;
background: url(images/title.jpg) no-repeat;
}
#content {
width: 1200px;
margin-top: 10px;
margin-left:15px;
colour: #66cc99;
}
#footernote {
height: 30px;
margin-right: 80px;
margin-top: 80px;
margin-left: 20px
}
#title {
float: left;
width: 300px;
height: 65px;
margin-left: 50px;
color: #333333;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
}
#title a:link {
color: #003333;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
text-decoration: none;
}
#title a:visited {
color: #003333;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
text-decoration: none;
}
#title a:hover {
color: #003333;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
text-decoration: none;
}
#headerright {
float: right;
width: 450px;
height: 210px;
}
#headerleft {
float: left;
width: 480px;
height: 210px;
}
#search {
margin-top: 40px;
float: right;
width: 240px;
height: 12px;
margin-right: 0px;
text-align: right;
}
.searchbox {
border: 1px solid #ffffff;
background-color: #ffffff;
color: #003333;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
padding: 4px;
}
.textarea {
border: 0px solid #ffffff;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
padding: 4px;
background: #ffffff;
;
}
.searchbutton {
width: 64px;
height: 23px;
margin: 0;
padding: 0;
border: 0;
background: transparent url(images/search.gif) no-repeat center top;
text-indent: -1000em;
cursor: pointer; /* hand-shaped cursor */
cursor: hand; /* for IE 5.x */
}
top;
text-indent: -1000em;
cursor: pointer; /* hand-shaped cursor */
cursor: hand; /* for IE 5.x */
}
.submitcomment {
width: 119px;
height: 27px;
margin: 0px;
padding: 0px;
border: 0px;
background: url(images/sub-com.gif)no-repeat center top;
text-indent: -1000em;
cursor: pointer; /* hand-shaped cursor */
cursor: hand; /* for IE 5.x */
}
#comment-1 {
margin: 0px;
padding: 5px;
}
#comment-2 {
margin: 0px;
padding: 5px;
}
#sidebar {
float: right;
width: 530px;
}
#left {
float: left;
width: 229px;
border-left: 2px solid #002e2e;
list-style: none;
padding-left: 40px;
}
#left img {
float: left;
margin: 0px;
}
#left ul {
list-style: none;
margin: 0px;
padding: 0px;
}
#right {
float: left;
width: 240px;
padding-top: 20px
}
a:link {
color: #333333;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
text-decoration: none;
line-height: 20px;
}
a:visited {
color: #333333;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
text-decoration: none;
line-height: 20px;
}
a:hover {
color: #003333;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
text-decoration: none;
line-height:20px;
color: #333333;
}
.meta {
padding-left: 10px;
padding-right: 10px;
}
.feedback a {
display: block;
text-align: center;
padding-right: 10px;
background: url(images/h3.gif) no-repeat;
width: 230px;
line-height: 28px;
margin-bottom: 30px;
}
blockquote {
border-left: 4px solid #ffffff;
color: #003333;
}
blockquote p {
margin: 25px;
}
h2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
width: 229px;
height: 28px;
line-height: 25px;
background: url(images/h1.gif) no-repeat;
padding-left: 15px;
padding-right: 10px;
list-style-image: none;
font-weight: lighter;
color: #ffffff;
}
h3 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
width: 229px;
height: 28px;
line-height: 28px;
background: url(images/h3.gif) no-repeat;
padding-left: 15px;
padding-right: 10px;
list-style-image: none;
font-weight: lighter;
color: #ffffff;
}
.pagenav li {
list-style: none;
background: url(images/lips.gif) no-repeat;
background-position: left;
padding-left: 45px;
line-height: 14px;
margin-left: 15px;
}
.page_item ul {
margin-left: 5px;
padding: 0px;
}
.page_item li {
list-style-image: url(images/b3.gif) ;
margin-left: 15px;
padding: 0px;
}
#wp-calendar {
text-align: center;
padding-left: 20px;
}
::-moz-selection{
background:#ffffff;
color:#000000;
}
::selection {
background:#ffffff;
color:#000000;
}
code::-moz-selection {
background: #ffffff;
}
code::selection {
background: #ffffff;
}
#linkcat-1 ul {
list-style-image: url(images/lips.gif) ;
margin-left: 40px;
padding: 0px;
line-height: 14px;
}
.categories {
line-height: 18px;
list-style: none;
margin-left: 10px;
padding: 0px;
}
.categories ul {
list-style: none;
margin: 0px;
padding: 0px
}
.categories a:link {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
padding-left: 25px;
display:block;
color: #333333;
background: url() no-repeat;
text-decoration: none;
border-width: 0px 0px 1px 0px;
border-spacing: 0px;
border-style: dotted dotted dotted dotted;
border-color: green green green green;
border-collapse: separate;
background-color: rgb(204, 255, 204);
padding:5px;
}
.categories a:visited {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
padding-left: 25px;
display:block;
background: url() no-repeat;
color: #333333;
text-decoration: none;
border-width: 0px 0px 1px 0px;
border-spacing: 0px;
border-style: dotted dotted dotted dotted;
border-color: green green green green;
border-collapse: separate;
background-color: rgb(204, 255, 204);
padding:5px;
}
.categories a:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
background: url() no-repeat;
background-position: 0px -18px;
text-decoration: none;
color: #333333;
background-color: #ffff99;
border-width: 0px 0px 1px 0px;
border-spacing: 0px;
border-style: dotted dotted dotted dotted;
border-color: green green green green;
border-collapse: separate;
background-color: rgb(204, 255, 204);
padding:5px;
}
.children a:link {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
padding-left: 25px;
background: url() no-repeat;
color: #333333;
}
.children a:visited {
padding-left: 25px;
display:block;
color: rgb(51, 153, 102);
background: url() no-repeat;
}
.children a:hover {
background-position: 0px -12px;
color: #333333;
background: url() no-repeat;
background-color: #ffff99;
}
.metaa {
text-align: left;
line-height: 15px;
list-style: none;
margin-left: 25px;
padding: 0px;
}
#post {
margin: 0px;
padding: 0px;
}
#center {
margin-top:8px;
border-width: 3px 3px 3px 3px;
border-spacing: 2px;
border-style: ridge ridge ridge ridge;
border-color: #003333 #003333 #003333 #003333;
border-collapse: separate;
background-color: rgb(255, 255, 255);
padding-left: 15px;
padding-right: 15px;
padding-bottom: 15px;
width: 590px;
float: left;
}
.archives {
display: block;
line-height: 18px;
list-style: none;
margin-left: 10px;
padding: 0px;
}
.archives ul {
list-style: none;
margin: 0px;
padding: 0px;
}
.archives li {
list-style: none;
margin: 0px;
padding: 0px;
}
.archives a:link {
width: 200px;
font-family: tahoma;
padding-left: 25px;
display:block;
color: #ffffff;
background: url(images/menu3.gif) no-repeat;
}
.archives a:visited {
width: 200px;
padding-left: 25px;
display:block;
color: #ffffff;
background: url(images/menu3.gif) no-repeat;
}
.archives a:hover {
width: 200px;
background: url(images/menu3.gif) no-repeat;
background-position: 0px -18px;
}
.floatright {float:right; padding: 12px; border: 0px;}
.floatleft {float:left; padding: 8px; border: 0px;}
"you know you're a nerd when you try to shoo a fly away from your monitor with your mouse...it happened to me just now, it was scary..."
Moderator
Posts: 6662
Joined: 2004-05-01
Location: Brisbane
You could do #left .pagenav
Posted: Fri, 2008-06-06 12:45
You could do #left .pagenav ul { padding-bottom: .... } You need to add #left in front of the rule because you've specified #left ul with padding 0 elsewhere in stylesheet.
(Also did you realise that #left is actually on the right and that #right is contained within #left?)
As far as time goes: I actually spend less time on here than I used to.
How to get help
tags.
Post a link. If you can't post a link, post ALL your code, both HTML & CSS. No server-side code; just the code sent to the browser.
Use
My articles | CSS Reference
Regular
Posts: 28
Joined: 2008-06-04
headache
Posted: Fri, 2008-06-06 17:20
}
#left.page_item ul {
margin-left: 5px;
padding-bottom: 50px;
}
doesn't have any effect. That doesn't really look right really??
and if I put the padding-bottom in the #left ul by itself, it puts the whole thing out of wack
yeass, I know left is right and right is left, it was three columns, I just did my very best with it because I didn't know what I was doing... Like an elephant stomping around a flower garden really. I'm getting a headache with all this left and right business
s'ok, I took another way around.....check it out. Not perfect, but finished...
"you know you're a nerd when you try to shoo a fly away from your monitor with your mouse...it happened to me just now, it was scary..."
Moderator
Posts: 6662
Joined: 2004-05-01
Location: Brisbane
fuzzy1234
Posted: Fri, 2008-06-06 21:42
That's because it's not right. Look back at what I typed; it's different from yours - there's s'posed to be a space between left and .page_item. What I've got refers to an element with a class of page_item inside #left; what you've got refers to an element with a class of page_item and an ID of #left.
How to get help
tags.
Post a link. If you can't post a link, post ALL your code, both HTML & CSS. No server-side code; just the code sent to the browser.
Use
My articles | CSS Reference
Regular
Posts: 28
Joined: 2008-06-04
tried both
Posted: Sat, 2008-06-07 09:54
I tried both, no effect.
"you know you're a nerd when you try to shoo a fly away from your monitor with your mouse...it happened to me just now, it was scary..."
Moderator
Posts: 6662
Joined: 2004-05-01
Location: Brisbane
Look back again (I didn't
Posted: Sat, 2008-06-07 12:20
Look back again (I didn't notice the second mistake first time either). You've got:
#left.page_item ul {margin-left: 5px;
padding-bottom: 50px;
}
And I had:
#left .pagenav ul { padding-bottom: .... }My code DOES work cos I've tested it.
How to get help
tags.
Post a link. If you can't post a link, post ALL your code, both HTML & CSS. No server-side code; just the code sent to the browser.
Use
My articles | CSS Reference
Regular
Posts: 28
Joined: 2008-06-04
Tyssen wrote:Look back again
Posted: Sat, 2008-06-07 13:25
"you know you're a nerd when you try to shoo a fly away from your monitor with your mouse...it happened to me just now, it was scary..."