I hope I am in the right form to be asking these questions?
This is my first time in using the forum.
Just starting to learn css from always using tables.
This is what I'm trying to do.
Create a web site so that it sits in the centre of a browser window,
whether they are using 800x600 or 1024x768
My web site is 775x800
Position my layers so that they all stay centre relative to each other
I've slice up all my images in psh cs 2, save for web "psh to CSS
setting"
created new site in DW 8.
All my layers (which are jpegs) are tight up to each other with no
overlaps.
I then in the first layer style sheet (#Table_01) which includes all
the other layers I added the following code to centre the whole page,
no matter what the users screen size is.
I added the following code to the existing code in #Table_01
position:relative;
margin-top: auto; (Don't know if this is necessary or right)
margin-right: auto;
margin-left: auto;
to create this style sheet
#Table_01 {
position:relative;
left:0px;
top:0px;
width:775px;
height:800px;
margin-top: auto;
margin-right: auto;
margin-left: auto;
}
I then unchecked "prevent overlap of layers"
Selected the layer
<div id="IVD-bodytxt_">
and draw a new layer just inside the box of
<div id="IVD-bodytxt_">
<img id="IVD_bodytxt" src="images/IVD_bodytxt.jpg" width="653"
height="301" alt="bodytxt" /></div>
I then pasted some text into the new layer <div class="bodytxt"
id="home_txt">
So now I have text on top of a jpeg. (Layers overlapping)
The style sheet for the new text layer is:
.bodytxt {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1em;
line-height: 1.2em;
color: #FFCC00;
font-weight: bold;
width: auto;
position: absolute;
font-style: normal;
}
Question: how can I attach a style sheet so that text layer <div
class="bodytxt" id="home_txt">
is also centre on top of the <div id="IVD-bodytxt_"> (which is jpeg)
Right now the text layer is always justified to the left, which
overlaying up my menu bar.
The only way I seem to be able to move it is by dragging it into
position. with in the box of <div id="IVD-bodytxt_">
But that create a new problem in that the text layer moves depending on
what browser I use.
I'm working on a Mac, OS X 10.3.9
In safari the top of the text layer is in alignment with the top of the
menu bar.
In Explorer the text layer has moved up about 10 pixels
Also in Explorer when I added the extra coding to centre the page, when
the page loads in Explorer, the top is no-longer flush to the top of
the browser. It's drop down about 20 pixels.
I've tried padding, but changes the looks in all browsers.
Is there a way of locking the text layer (<div class="bodytxt"
id="home_txt">)
it to the under lying layer (<div id="IVD-bodytxt_">) so it doesn't
move, no matter what browser is being used.
When I added the centering code to #Table_01, Explorer drown down 20
pixels from the top.
It didn't do that prior to adding the centering code. Is there a fix
for that?
Question 2 I'm doing all this so that the user can zoom up the size of
the text.
I'm also trying to create a web template for all the other pages, so
that the only change is in the text layer.
(different content for different web pages)
But for my menu bar, I'm using jpeg images for my menu bar & roller
overs.
If I use a CSS style sheet, then both my menu bar & my main text zooms
up, which screw up the placement of the menu text with in their jpegs.
So I've gone back to swapping images with rollover images.
What I would be doing is again drawing new frames with in each jpeg
image, assigning my menu text i.e. home, contact etc and use CSS style
sheets to create the rollovers and links
Question: Is there a way to crete a style sheet for menu text that will
not zoom with the rest of the text on the page.
I've tried doing all sorts of things, Position - absolute, fixed, but
nothing seem to stop any text that is assign a style sheet from zooming
with all the rest of the text on the page.
May-be I'm trying to do something that CSS wasn't meant to do.
I hope I'm being clear here in my problem & question.
Sorry for being no long winded
Thank you in advance.
XHTML coding
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
<html xmlns="http://www.w3.org/1999/xhtml";>
<head>
<title>IVD-80</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"
/>
<!-- ImageReady Styles (IVD-80.psd) -->
<style type="text/css">
<!--
#Table_01 {
position:relative;
left:0px;
top:0px;
width:775px;
height:800px;
margin-top: auto;
margin-right: auto;
margin-left: auto;
}
#IVD-logo_ {
position:absolute;
left:0px;
top:0px;
width:360px;
height:186px;
}
#IVD-helping-to-bring-vision-to-light_ {
position:absolute;
left:360px;
top:0px;
width:415px;
height:186px;
}
#IVD-bodytxt_ {
position:absolute;
left:122px;
top:186px;
width:653px;
height:301px;
}
-->
</style>
<!-- End ImageReady Styles -->
<script type="text/javascript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if
((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight;
onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH)
location.reload();
}
MM_reloadPage(true);
//-->
</script>
<link href="IVD Styles/bodytxt.css" rel="stylesheet" type="text/css" />
<!--<!--.bodytxt {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1em;
line-height: 16px;
color: #FFCC00;
font-weight: bold;
width: auto;
position: absolute;
}
--> -->
<style type="text/css">
<!--
body {
background-color: #000000;}
-->
</style>
</head>
<body style="">
<!-- ImageReady Slices (IVD-80.psd) -->
<div id="Table_01">
<div id="IVD-logo_">
<img id="IVD_logo" src="images/IVD_logo.jpg" width="360" height="186"
alt="inno-vision design" /></div>
<div id="IVD-helping-to-bring-vision-to-light_">
<img id="IVD_helping_to_bring_vision_to_light"
src="images/IVD_helping-to-bring-vision.jpg" width="415" height="186"
alt="helping to bring your vision to light" /></div>
<div id="IVD-bodytxt_">
<img id="IVD_bodytxt" src="images/IVD_bodytxt.jpg" width="653"
height="301" alt="bodytxt" /></div>
<!-- End ImageReady Slices -->
<div class="bodytxt" id="home_txt">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, set
eiusmod tempor incidunt et labore et dolore magna aliquam. </p>
<p>Ut enim ad minim veniam, quis nostrud exerc. </p>
<p>Irure dolor in reprehend incididunt ut labore et dolore magna
aliqua. </p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.</p>
</div>
</body>
</html>
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
