|
| |
|
|
DianneM
Posts: 15
Joined: 11/30/2004
From: France
Status: offline
 |
Overlapping - 11/30/2004 5:35:23
This is my first post so let me say thanks right-off-hand. I can't believe I've actually found a place to ask my question.
My sidebars are overlapping the posts on my blog. As you re-size the window the sidebars move over or out. I hope I'm saying this in an understandable way. I don't get many complaints but now and again someone tells me, 'hey the edges of your post are covered by the sidebar.'
I have no idea where I originally got the template but I do remember being told it wasn't compatible with tblog...one of my blog sites is located here. But, I refused to listen and decided to work on things myself. I like the template and would like to keep it if I can fix this problem.
I will be glad to give any other information needed but am unsure just how much I should post here.
Thanks
Dianne
|
|
|
|
Larry M.
Posts: 2719
Joined: 2/20/2003
From: Greenville, South Carolina, USA
Status: offline
|
RE: Overlapping - 11/30/2004 7:14:57
Dianne,
Your quite interesting site, http://diannemaire.tblog.com/, looks fine in IE at 1024x768 but collapses on itself at 800x600. Since 40% or so of visitors still use the lower resolution it may mean replacing the template. Hopefully other Forum members will offer recommendations of a less drastic nature.
Welcome to OutFront!
_____________________________
Larry M.
Indecision is the Key to Flexibility.
| |
|
|
|
Giomanach
Posts: 6090
Joined: 11/19/2003
From: England
Status: offline
|
RE: Overlapping - 11/30/2004 7:22:33
<style type="text/css" media="all"> html, body {
margin: 0px;
padding: 0px;
font-family: arial, sans-serif;
background-color: #ffffff;}
img {border: 0px;}
.title {
font-size: 20px;
font-weight: bold;
font-family: arial, sans-serif;
text-align: center;
letter-spacing: 10px;
color: #727670;
position: absolute;
padding: 0px;
height: 50px;
left: 10px;
right: 10px;
top: 0px;
z-index: 4;
}
.quip {
border: 1px solid #C1C1C5;
background-color: #ECEFEE;
color: #666666;
position: absolute;
left: 10px;
right: 10px;
top: 30px;
z-index: 5;
padding: 5px;
font-weight: bold;
font-size: 11px;
font-family: arial, sans-serif;
text-align: center;
letter-spacing: 1px;}
.menu1box {
position: absolute;
left:0px;
top:80px;
margin-left: 50px;
width:200px;}
.menu2box {
position: absolute;
right:0px;
top:80px;
margin-right: 50px;
width:200px;}
.menutext {
margin: 0px;
color: #666666;
font-size: 11px;
padding: 5px;
font-family: arial, sans-serif;
letter-spacing: 0px;
line-height: 20px;
text-align: left;}
h5 {
font-size: 11px;
font-family: arial, sans-serif;
letter-spacing: 3px;
color: #6C6F79;
z-index: 6;
margin: 0px;
text-align: center;
padding: 0px;}
i { color: #727670; }
.divider{
text-align: center;
padding: 0px;
margin: 0px;
padding-bottom: 30px;
border-bottom: 1px solid #C1C1C5;
font-size: 11px;
font-family: arial, sans-serif; }
blockquote {
align: left;
text-align: justify;
padding: 5px;
border: 1px solid #C1C1C5;
background-color: #F5F5F5;
color: #000000;
font-family: arial, sans-serif;
font-size: 11px;
letter-spacing: 0px; }
li{
list-style-type: none;
list-style-image: url();
color: #666666;
padding: 0px;
margin: 0px 0px 0px 0px;}
ul, h6{
margin: 0px 0px 20px 0px;
padding: 0px 0px 0px 10px;
font-size: 11px;
border: 1px solid #C1C1C5;
font-weight: normal;
background-color: #ECEFEE;}
input,textarea,select {
background-color: #ECEFEE;
border: 1px solid #C1C1C5;
color: #666666; }
a:link {
color:#666699;
font-weight: bold;
font-family: arial, sans-serif;
font-size: 11px;
letter-spacing: 0px;
text-decoration: none;}
a:visited {
color:#333399;
font-family: arial, sans-serif;
font-size: 11px;
letter-spacing: 0px;
text-decoration: none;}
a:hover {
background: none;
font-weight: bold;
font-family: arial, sans-serif;
font-size: 11px;
letter-spacing: 0px;
color:#C1C1C5;
border-bottom: 1px dashed #C1C1C5;
}</style>
All of the CSS widths are absolute, they need to be altered to percents for the fluid design that you want.
It looks fine @ 1024x768 res plus, any lower than that and the layers overlap.
_____________________________
| |
|
|
|
DianneM
Posts: 15
Joined: 11/30/2004
From: France
Status: offline
|
RE: Overlapping - 12/1/2004 10:16:11
Thanks very much for your response.
The 3 vertical sections (left and right columns plus the center one where the blog contents are) overlap each other once the window is resized below a certain width. In fact all 3 colums are a fixed width, which means that when you stretch the window out really wide, you end with big gaps between the 3 columns. In this latter case, it's not a drama, it just looks crappy but it is still legible, whereas it's a real problem when you compress the window, because the blog contents become illegible as they are partly hidden by the left and right column contents. The complaints I've had are from users with low-res screens who can't stretch the window out sufficiently.
URL is: http://diannemaire.tblog.com/
Sometimes I actually do know what I'm doing.
| |
|
|
|
DianneM
Posts: 15
Joined: 11/30/2004
From: France
Status: offline
|
RE: Overlapping - 12/1/2004 10:19:39
Oh gosh, I know. I've been thinking I may have to replace the template. I was hoping there was some argument I could add that would fix things.
Thanks so much :)
Dianne
It just sounds like I know what I'm talking about.
| |
|
|
|
DianneM
Posts: 15
Joined: 11/30/2004
From: France
Status: offline
|
RE: Overlapping - 12/1/2004 10:27:04
Hi Dan...sorry folks that I haven't been quoting or calling you by your names. I don't frequent a lot of forums so have a bit to learn.
I will attempt to work on your suggestion today "CSS widths are absolute, they need to be altered to percents"
Don't go away guys, I may be back. :)
Dianne
Did he say, "percents?"
| |
|
|
|
dpf
Posts: 7121
Joined: 11/12/2003
From: India-napolis
Status: offline
|
RE: Overlapping - 12/1/2004 10:28:34
quote:
Did he say, "percents?" as in 60%, 80% etc..<smile>
_____________________________
Dan
| |
|
|
|
dpf
Posts: 7121
Joined: 11/12/2003
From: India-napolis
Status: offline
|
RE: Overlapping - 12/1/2004 10:39:42
quote:
Oi! Dan...stop stealing my limelight NO ONE could do that, buddy!
_____________________________
Dan
| |
|
|
|
dpf
Posts: 7121
Joined: 11/12/2003
From: India-napolis
Status: offline
|
RE: Overlapping - 12/1/2004 11:06:14
quote:
Come back if you need help says Dan to all the pretty girls..hehe
<edit>prettiest</edit>
_____________________________
Dan
| |
|
|
|
DianneM
Posts: 15
Joined: 11/30/2004
From: France
Status: offline
|
RE: Overlapping - 12/2/2004 4:23:45
quote:
ORIGINAL: Giomanach
Don't worry, there are many of us who don't use FP, the original intent of the web (back when Tom first started it), was to support FP, since, it has grown to Servers, DW, GoLive...etc etc etc...FP is just one of the many things supported here
Oh good!
quote:
OK, I'm gonna point out the problems:
There's also some classes that I can't seem to find, maybe someone else can...but I know I can't!..Where's a cuppa when you need one?
Need to alter the width etc....but I can't find them...you're blog host must be controlling them through something I can't find from my end...
You're right, in the original template which I dl somewhere I remember having problems with the content. So I deleted (stop laughing) this part and let tblog do the content. Toward the bottom of the template you will see a line that refers to tblog content.
I'm going to hunt around and see if I kept a copy of the original template. I'll be back..you can depend on it.
Dianne
| |
|
|
|
DianneM
Posts: 15
Joined: 11/30/2004
From: France
Status: offline
|
RE: Overlapping - 12/2/2004 4:31:14
Here is the original style sheet. I don't remember now what the effects were on my contents. I am going to throw it back into my editor and see what it looks like.
<style type="text/css" media="all"> html, body {
margin: 0px;
padding: 0px;
font-family: arial, sans-serif;
background-color: #ffffff;}
img {border: 0px;}
.title {
font-size: 20px;
font-weight: bold;
font-family: arial, sans-serif;
text-align: center;
letter-spacing: 10px;
color: #727670;
position: absolute;
padding: 0px;
height: 50px;
left: 10px;
right: 10px;
top: 0px;
z-index: 4;
}
.quip {
border: 1px solid #C1C1C5;
background-color: #ECEFEE;
color: #666666;
position: absolute;
left: 10px;
right: 10px;
top: 30px;
z-index: 5;
padding: 5px;
font-weight: bold;
font-size: 11px;
font-family: arial, sans-serif;
text-align: center;
letter-spacing: 1px;}
.menu1box {
position: absolute;
left:0px;
top:80px;
margin-left: 10px;
width:200px;}
.menu2box {
position: absolute;
right:0px;
top:80px;
margin-right: 10px;
width:200px;}
.entry {
color: #6C6F79;
font-size: 11px;
font-family: arial, sans-serif;
letter-spacing: 0px;
text-align: justify;
padding: 0px;
margin: 0px;}
.outside {
position: relative;
top: 80px;
left: 0px;
margin-left: 220px;
right: 0px;
margin-right: 220px;
z-index: 2;}
.menutext {
margin: 0px;
color: #666666;
font-size: 10px;
padding: 5px;
font-family: arial, sans-serif;
letter-spacing: 0px;
line-height: 20px;
text-align: left;}
h4 {
font-size: 16px;
font-family: arial, sans-serif;
color: #727670;
text-align: center;
letter-spacing: 1px;
margin: 0px;
padding: 0px;
z-index: 6;}
h5 {
font-size: 10px;
font-family: arial, sans-serif;
letter-spacing: 3px;
color: #6C6F79;
z-index: 6;
margin: 0px;
text-align: center;
padding: 0px;}
i { color: #727670; }
.divider{
text-align: center;
padding: 0px;
margin: 0px;
padding-bottom: 30px;
border-bottom: 1px solid #C1C1C5;
font-size: 10px;
font-family: arial, sans-serif; }
blockquote {
align: left;
text-align: justify;
padding: 5px;
border: 1px solid #C1C1C5;
background-color: #ECEFEE;
color: #666666;
font-family: arial, sans-serif;
font-size: 10px;
letter-spacing: 0px; }
li{
list-style-type: none;
list-style-image: url();
color: #666666;
padding: 0px;
margin: 0px 0px 0px 0px;}
ul, h6{
margin: 0px 0px 20px 0px;
padding: 0px 0px 0px 10px;
font-size: 10px;
border: 1px solid #C1C1C5;
font-weight: normal;
background-color: #ECEFEE;}
input,textarea,select {
background-color: #ECEFEE;
border: 1px solid #C1C1C5;
color: #666666; }
a:link {
color:#727670;
font-weight: bold;
font-family: arial, sans-serif;
font-size: 11px;
letter-spacing: 0px;
text-decoration: none;}
a:visited {
color:#727670;
font-family: arial, sans-serif;
font-size: 11px;
letter-spacing: 0px;
text-decoration: none;}
a:hover {
background: none;
font-weight: bold;
font-family: arial, sans-serif;
font-size: 11px;
letter-spacing: 0px;
color:#C1C1C5;
border-bottom: 1px dashed #C1C1C5;
}</style>
| |
|
|
|
DianneM
Posts: 15
Joined: 11/30/2004
From: France
Status: offline
|
RE: Overlapping - 12/2/2004 8:42:12
I'm not sure what bogg-eyed is but it doesn't sound good. :) I appreciate any help at all. I have given up on it for the moment.
Since most were complaining about the left side overlapping more than the right (I don't know why) I jammed the left column up against the edge of the window and added some cell padding to my center column. I hate all the whitespace but it allows for a bit more room before the overlapping begins. I know it's messy and doesn't make any sense but amazingly this is the only problem anyone has run into.
as always..thanks
Dianne
| |
|
|
|
Giomanach
Posts: 6090
Joined: 11/19/2003
From: England
Status: offline
|
RE: Overlapping - 12/3/2004 14:42:08
Sorry bout the delay on getting back to you...
I've looked it over and over and over, and fail to find a problem :S
What I'm gonna say you do, is, take the width of the left colum (+5 pixels) and the width of the right column (+5 pixels), and then, in respective order, make them the attributes of the positioning for the central column:
.left{
width: 150px;
}
.right{
width: 150px;
}
.middle{
left: 155px;
right: 155px;
}
Not quite like that, but you should get what I mean, that way, the middle column will resize to suit the browser window size ;)
_____________________________
| |
|
|
|
DianneM
Posts: 15
Joined: 11/30/2004
From: France
Status: offline
|
RE: Overlapping - 12/3/2004 15:08:10
I will tackle it tomorrow. I have adjusted some things, cleaned up the template a bit. I had left a lot of unnecessary code in because I was unsure of the effect if I removed it.
I do thank you very much for taking the time and trouble. Very nice. :)
Dianne
| |
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 
