Center tag

Z

Zach

Wanting to have elements move in concert when maximising and minimising the
screen in a browser, I have used <center> on the first element and have
placed a subsequent elemet relative to that previously centered element.
This procedure does not work. How should I proceed to do what I want to do?

Zach.
 
J

Jonathan N. Little

Zach said:
Wanting to have elements move in concert when maximising and minimising
the screen in a browser, I have used <center> on the first element and
have placed a subsequent elemet relative to that previously centered
element. This procedure does not work. How should I proceed to do what I
want to do?
Click to expand...


Forget about CENTER element and use margins on block elements, so one
way is with a wrapper DIV with a width and left and right margins set to
auto:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>Use Margins</title>
<style type="text/css">
..wrapper {
width: 80%; margin-left: auto; margin-right: auto;
/* a litle color to show it off */
background-color: #eee;
}
</style>

</head>

<body>
<div class="wrapper">
<h1>Using a wrapper DIV</h1>
<p>As you can see this is one way to do it...</p>
</div>

</body>
</html>
 
J

Jukka K. Korpela

What am I doing wrong?
Click to expand...

You're not posting a URL. You're not even posting HTML code (but ASP
code expected to generate it). You're not explaining clearly what you
want. Intuitively, it seems that you have two blocks and you are
centering the latter one and wondering why the former doesn't get centered.

Oh, and you're using a forged From field. It doesn't matter much these
days, but it can be taken as an extra clue.
 
J

Jonathan N. Little

If I do this:

.Wrapper
{
width:80%;
margin-left:auto;
margin-right:auto;
}

.Panel
{
position:relative;
left:+0px;
top:+75px;
background-color:Yellow;
width:950px;
height:550px;
}

<asp:Image ID="Image" runat="server" ImageUrl="~/TopBand.png"
CssClass="Wrapper" />
<asp:panel ID="TopPanel" runat="server" Cssclass="Panel" ></asp:panel>

The top band isn't in the middle
and the panel doesn't locate relative to the TopBand.

What am I doing wrong?
Click to expand...

Not posting a URL so we can see the output HTML and not the ASP code
fragment...

But if I can speculate, since I do not do MS ASP, but Perl and PHP it
looks like your "Wrapper" is an IMAGE which is neither a block element
nor able to have descendant elements where the Wrapper rule would apply...
 
N

Neil Gould

Zach said:
If I do this:

.Wrapper
{
width:80%;
margin-left:auto;
margin-right:auto;
}
Click to expand...
This should be centered... is it?
.Panel
{
position:relative;
left:+0px;
top:+75px;
background-color:Yellow;
width:950px;
height:550px;
}
Click to expand...
This will not be centered... is it your "top band"? If so, what happens when
80% of the viewport window's width is less than 950px? Better to set width
of panel to the same units as the wrapper.
<asp:Image ID="Image" runat="server" ImageUrl="~/TopBand.png"
CssClass="Wrapper" />
<asp:panel ID="TopPanel" runat="server" Cssclass="Panel"

The top band isn't in the middle
and the panel doesn't locate relative to the TopBand.
Click to expand...
You have created two separate, unrelated items, a wrapper and a topband.
What you might want to do is include the topband *within* the wrapper,
rather than ouside of it.

All that said, this is pure conjecture, since I can't render the code you're
showing. Post a URL or at least HTML code.
 
Z

Zach

Jonathan N. Little said:
Forget about CENTER element and use margins on block elements, so one way
is with a wrapper DIV with a width and left and right margins set to auto:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>Use Margins</title>
<style type="text/css">
.wrapper {
width: 80%; margin-left: auto; margin-right: auto;
/* a litle color to show it off */
background-color: #eee;
}
</style>

</head>

<body>
<div class="wrapper">
<h1>Using a wrapper DIV</h1>
<p>As you can see this is one way to do it...</p>
</div>

</body>
</html>
Click to expand...


If I do this:

..Wrapper
{
width:80%;
margin-left:auto;
margin-right:auto;
}

..Panel
{
position:relative;
left:+0px;
top:+75px;
background-color:Yellow;
width:950px;
height:550px;
}

<asp:Image ID="Image" runat="server" ImageUrl="~/TopBand.png"
CssClass="Wrapper" />
<asp:panel ID="TopPanel" runat="server" Cssclass="Panel" ></asp:panel>

The top band isn't in the middle
and the panel doesn't locate relative to the TopBand.

What am I doing wrong?
Zach
 
Z

Zach

Neil Gould said:
Zach wrote:
Click to expand...
This will not be centered... is it your "top band"? If so, what happens
when
80% of the viewport window's width is less than 950px? Better to set width
of panel to the same units as the wrapper.
Click to expand...
<snipped>

That is true, however, there will be some items placed on the wrapped panel
that need the preset width, rather than a percentage.
You have created two separate, unrelated items, a wrapper and a topband.
What you might want to do is include the topband *within* the wrapper,
rather than ouside of it.
Click to expand...

Yes!!
Thank you.

Regards,
Zach.
 
Z

Zach

Jukka K. Korpela said:
You're not posting a URL. You're not even posting HTML code (but ASP code
expected to generate it). You're not explaining clearly what you want.
Intuitively, it seems that you have two blocks and you are centering the
latter one and wondering why the former doesn't get centered.

Oh, and you're using a forged From field. It doesn't matter much these
days, but it can be taken as an extra clue.
Click to expand...

Not sure if this helps. But thank you any way.
Zach.
 
J

Jonathan N. Little

Zach said:
You only suggested one procedure


Your only suggestion, and not three, appears to be the least preferred.
Click to expand...


In my reply to the email that you sent me I said what the members here
in this group would need to assist you in decreasing order of desirability:

"This as I said on Usenet is not very informative for debug HTML and
CSS. The output of server side code is what we need. Just like this
Perl is not helpful:

print header,html(head(title('foo')),body(h1('Simple page'),p('this is
pretty simple!'),ul(li([a({-href=>@ls},\@ts)]))));

You need to either setup up a temporary public ASP page that we can
access to see the resultant generated HTML and CSS (best).

Or access the sample page yourself and then make a static HTML document
from the generated source on a public server (okay)

Or post the source (not so good because it means someone has to paste
you code to some file of webserver of their own to debug)"


and you did the third and sent me the source. Unfortunately the source was:

....
<body>
<form id="form1" runat="server">
<asp:panel ID="Dummy" runat="server" CssClass="Wrapper1">
<asp:Image ID="Image1" runat="server"
ImageUrl="~/TopBand4.png" />
<asp:panel ID="BasePanel" runat="server"
Cssclass="BasePanel" ></asp:panel>
....

which is not the HTML output but the ASP code.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Hi, I am a webflow user. I am looking for CSS code that can KEEP ALL ELEMENTS POSITIONED in the SAME spot across all resolutions 0
Centering picture element for larger screen sizes 2
Positioning of DIV tag in center of the screen 20
center two inline elements 13
Incrementing getelementbyid 1
How to properly insert a landing page within same container beneath an image element? 0
Help with my responsive home page 2
Weird Behavior with Rays in C and OpenGL 4

Members online

Total: 56 (members: 3, guests: 53)
Robots: 422

Forum statistics

Threads
473,982
Messages
2,570,190
Members
46,740
Latest member
AdolphBig6

Latest Threads

Top