Overlapping (Full Version)

All Forums >> [Web Development] >> Microsoft FrontPage Help



Message


DianneM -> 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




jaybee -> RE: Overlapping (11/30/2004 7:04:49)

Welcome to Outfront Dianne.

It sounds like your blog is using cascading style sheets for formatting and sometimes the divisions overlap, depending on how the sheet has been set up.

If you have added some pictures or logos that were wider than those originally in the template then it may well cause it to shift.

It could also be that the people reporting this are using different browsers or screen resolutions.

I suggest you post a url here so that we can see the offending page for ourselves and make some suggestions but I would also advise that you ask people what browser they use and what screen resolution they're set at.




Larry M. -> 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!




Giomanach -> 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 -> 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 -> 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 -> 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 -> RE: Overlapping (12/1/2004 10:28:34)

quote:

Did he say, "percents?"
as in 60%, 80% etc..<smile>




Giomanach -> RE: Overlapping (12/1/2004 10:36:09)

Oi! Dan...stop stealing my limelight[:D][;)]

Dianne - Yup, percents. The design is currently at a fixed width from the edge of the browser window which is why you get the overlapping, you need to either eliminate that, or make it a certain percentage from the edge, and a certain percentage wide, so that when the user changes browser size, the web page expands/contracts to suit

Just be careful and make sure you don't visit the screw up fairy[;)]




dpf -> RE: Overlapping (12/1/2004 10:39:42)

quote:

Oi! Dan...stop stealing my limelight
NO ONE could do that, buddy!




DianneM -> RE: Overlapping (12/1/2004 10:57:33)


quote:

ORIGINAL: Giomanach

Dianne - Yup, percents. The design is currently at a fixed width from the edge of the browser window which is why you get the overlapping, you need to either eliminate that, or make it a certain percentage from the edge, and a certain percentage wide, so that when the user changes browser size, the web page expands/contracts to suit

Just be careful and make sure you don't visit the screw up fairy[;)]


Merci beaucoup! I do tend to need such things spelled out. The screw up fairy is a regular visitor. :)




Giomanach -> RE: Overlapping (12/1/2004 10:58:37)

Bienvenue[;)]

Come back if you need help




dpf -> 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>




Giomanach -> RE: Overlapping (12/1/2004 11:10:54)

[>:]





DianneM -> RE: Overlapping (12/2/2004 3:59:27)

Hello again

I'm back..I need help. :(

I'm not using Frontpage. Does this matter? I'm such a goofus. I only now realized this site was for Frontpage users. duh..

Looking at my template I only see positioning attributes for the title, quip and menus. Changing these doesn't seem to make a difference. I did manage to move my title to the center and promptly moved it back to the left. LOL

I'm lost.

Dianne

Picture of me totally bald coming soon. [sm=help.gif]




Giomanach -> RE: Overlapping (12/2/2004 4:08:56)

quote:

I'm not using Frontpage. Does this matter? I'm such a goofus. I only now realized this site was for Frontpage users. duh..

FrontPage? Where? Where?[:D]

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[;)]

OK, I'm gonna point out the problems:

quote:


.menu1box {
position: absolute;
left:0px;
top:80px;
margin-left: 50px;
width:200px;}


quote:

.menu2box {
position: absolute;
right:0px;
top:80px;
margin-right: 50px;
width:200px;}


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...




DianneM -> 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 -> 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>





Giomanach -> RE: Overlapping (12/2/2004 7:57:41)

I'm going bogg-eyed here...lol...all them margins...lack of positioning...[sm=unsure.gif]

lemme get back to you on that....




DianneM -> 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 -> 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 -> 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




Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.09375