centered and fixed on most browsers?...

User 2073490 Photo


Registered User
154 posts

I am trying to get my anatomical subjects and preceding line of text to stay put. Bigger screens and different browsers don't seem to like the tags I have tried from other sources (websites, books, etc.) I could be doing it wrong, but I just don't know. Here is a link to the page....
http://papillonmassage.com/what_hurts.html
This is the only page that I need to do this to. I don't really need it to go into a css file. I think I am trying to make things to complicated. Isn't there a simple solution?
Any takers?
User 187934 Photo


Senior Advisor
20,271 posts

I did notice that you have two body tags in your CSS.;)
body {
background-color: #F0F7D5;
height: 100%;
}
body {
font-family: Verdana,Geneva,Arial,sans-serif;
font-size: 12px;
margin: 0;
padding: 0 0 0;
text-align: center;
}
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 187934 Photo


Senior Advisor
20,271 posts

I would try to get rid of that absolute positioning for the #instruction div. Then adjust the CSS.:)
I thought this looked good for the #anterior map
#anterior {
position: relative;
top: -333px;
margin-left: 420px;

I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 187934 Photo


Senior Advisor
20,271 posts

Try moving the </div> for the <div id="bgstyle"> down to here then adjust your CSS for the instruction text.
<div class="c1" id="instruction">
<h4>Simply click on the area that you would like to learn about.</h4>
</div>
</div>
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 117361 Photo


Ambassador
6,076 posts

Eric...it is ok to have two (or even more) body tags so long as each of them is setting a different rule...and in this case they are. It makes life easier to contain them all in one place but not essential.

Esther, when you say that you want them to "stay put"...where do you want them to "stay put"?
Do you want them to remain within the light green background area?

If that is the case, they are going to have to be marked up within the same div which contains the central content area to make life easier.This way you can position them in relation to the outer div rather than trying to do absolute positioning on the page.

You can get a better idea of what I mean by looking at this screenshot I did for you where your divs are outlined...it is obvious which divs are contained within which...and which divs might actually be too large (such as the largest div).
venicedigital.com/cc/papillon.jpg

I suggest you download the addon for web developers from Firefox. It is very useful for all sorts of things, including the kind of use I just made of it to outline the elements in your page. Then using the outliner, try to isolate the divs in your code and readjust to fit everything neatly in the right boxes.

We are still here if you need us of course! :)

User 122279 Photo


Senior Advisor
14,649 posts
Online Now

Esther, try these changes that I did to your style sheet:

#posterior {float: left;
margin-right: 150px;
}

#anterior {float: left;
}

#instruction {margin: auto;
color:purple;
clear: left;
}


And make sure the two images of the body are exactly the same size. I first removed one pixel from the top of anatomypost.gif, then scaled it down to 300x322, which is the size of the other one. As it is now, the back view is sticking out a bit at the top.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 117361 Photo


Ambassador
6,076 posts

Were you seeing the right hand image sticking way out on the right also Inger?
Has your code resolved that?
User 122279 Photo


Senior Advisor
14,649 posts
Online Now

Yes, it was even further out than in the image you posted, probably because of my screen resolution.

I downloaded the two images of the body and compared them, then scaled them as described above. I also downloaded the code of the html and css files and tested, and the code I wrote above fixed it. It is often difficult just by seeing someone else's code to decide what is good or bad, so I prefer downloading and experimenting.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 117361 Photo


Ambassador
6,076 posts

I do that when I have the time to, but for the moment I am having to work very much on instinct! Ordered that book by the way on HTML5 and CSS3 by Sitepoint.
User 122279 Photo


Senior Advisor
14,649 posts
Online Now

Janys Hyde wrote:
Ordered that book by the way on HTML5 and CSS3 by Sitepoint.


That's great! Then we may help each other! :)
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com



Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.