Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > CSS and Positioning issues

Reply
Thread Tools

CSS and Positioning issues

 
 
nightstar@gmail.com
Guest
Posts: n/a
 
      08-11-2005
Here is a watered down version of the code including my css file, as i
am just trying to get the proper formatting:


PHP (HTML) File:


<?php include('frontend.php'); ?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<link href="statements.css" rel="stylesheet" type="text/css">
</head>

<body>


<div id="statement">
<div id="header"><?php dispheader(); ?></div> header displays
all three sections correctly
<div id="statementtitle"><?php statementtype(); ?></div>
statementtitle displays correctly
<div id="outputsection">
<div id="midsection">
<div id="col1">
Col1<br>
Col1<br>
Col1<br>
Col1<br>
Col1
</div>
<div id="col2">
Col2<br>
Col2<br>
Col2<br>
Col2
</div>
</div>
<div id="bottomsection">BOTTOM SECTION</div>
</div>
</div>


</body>
</html>


CSS File:


#statement {
position:absolute;
left:0px;
width:668px;



}


#header {
left:0px;
height:113px;
width:100%;


}


#topleft {
position:absolute;
text-align:left;
left:0px;
width:33%;


}


#topcenter {
position:absolute;
left:33%;
width:34%;


}


#topright {
position:absolute;
text-align:right;
left:67%;
width:33%;


}


#outputsection {
position:absolute;
left:0px;
width:100%;


}


#statementtitle {
position:relative;
padding:5px;
text-decoration:underline;
font:bold 1.2em serif;
text-align:center;
width:100%;
}


#midsection {
position:relative;
width:100%;


}


#col1 {
position:absolute;
left:0;
width:50%;


}


#col2 {
position:absolute;
left:50%;
width:50%;


}


#bottomsection {
width:100%;


}


In the HTML when I display bottom section it does not show up at the
very bottom, it displays overtop of where midsection begins. I need
help organizing this to make it display correctly based upon my first
message in the thread. Most likely the statement needs to look like
this

Header (fixed height based on height of graphic, but would be nice to
have a variable height)

Where I make a call to dispheader() in the PHP there three other
sections printed out here.
<div id="topleft">Stuff Here</div>
<div id="topcenter">Stuff Here</div>
<div id="topright">Stuff Here</div>

Where I make a call to statementtype() in PHP I have
<div id="statementtitle">Title/Type of Statment</div>

Mid Section (variable height)

Bottom Section (variable height)

Sorry about bad formatting with copy and paste.

I have looked over numerous sites with no prevail. Maybe some savvy
person with fresh eyes can find the dumb mistake I have with keeping in
mind IE and Firefox.

Thanks

 
Reply With Quote
 
 
 
 
Mark Parnell
Guest
Posts: n/a
 
      08-11-2005
Previously in alt.html, <(E-Mail Removed)> said:

> Here is a watered down version of the code including my css file, as i
> am just trying to get the proper formatting:


A URL is much more useful.

> In the HTML when I display bottom section it does not show up at the
> very bottom, it displays overtop of where midsection begins.


This is normal behaviour given the code in question. That is what
absolute positioning does - it removes the element from the flow of the
page, so anything following it acts as though that element was never
there in the first place.

> I need
> help organizing this to make it display correctly based upon my first
> message in the thread.


Um, this *is* the first message in the thread.[1]

<looks back through other threads>

Ah, you must be talking about this message:
<(E-Mail Removed). com> It seems that
(amongst other things) Google Groups is also dreadful at threading. If
at all possible, please do everyone a favour and get yourself a real
newsreader. Personally, I use 40tude Dialog -
http://www.40tude.com/dialog/ - but there are plenty of free ones
available. Even *cough* Outlook Express *cough* is preferable to Google.

> I have looked over numerous sites with no prevail. Maybe some savvy
> person with fresh eyes can find the dumb mistake I have with keeping in
> mind IE and Firefox.


You have misunderstood how absolute positioning works. Absolute
positioning should very rarely be used - there is certainly no need to
use it in this situation.

In this case, as mbstevens said in the other thread, a bank statement is
definitely tabular data, so use a table for the transactions. Just one
will suffice.


[1] Actually *this* is the second. The one I'm replying to is, of
course, the first.

--
Mark Parnell
http://www.clarkecomputers.com.au
alt.html FAQ :: http://html-faq.com/
 
Reply With Quote
 
 
 
 
mbstevens
Guest
Posts: n/a
 
      08-11-2005
Mark Parnell wrote:

> [1] Actually *this* is the second. The one I'm replying to is, of
> course, the first.


Pardon me, sir, but did you see a white rabbit in a waistcoat with a
watch go by here?



 
Reply With Quote
 
Mark Parnell
Guest
Posts: n/a
 
      08-11-2005
Previously in alt.html, mbstevens <(E-Mail Removed)> said:

> Pardon me, sir, but did you see a white rabbit in a waistcoat with a
> watch go by here?


No, but it's my unbirthday today.

--
Mark Parnell
http://www.clarkecomputers.com.au
alt.html FAQ :: http://html-faq.com/
 
Reply With Quote
 
mbstevens
Guest
Posts: n/a
 
      08-11-2005
Mark Parnell wrote:

>>Pardon me, sir, but did you see a white rabbit in a waistcoat with a
>>watch go by here?

>
>
> No, but it's my unbirthday today.
>


That must be why the party treacled down to this thread!
 
Reply With Quote
 
Toby Inkster
Guest
Posts: n/a
 
      08-11-2005
nightstar wrote:

> <div id="midsection">
> <div id="col1">
> Col1<br>
> Col1<br>
> Col1<br>
> Col1<br>
> Col1
> </div>
> <div id="col2">
> Col2<br>
> Col2<br>
> Col2<br>
> Col2
> </div>
> </div>


Why isn't this a table?

--
Toby A Inkster BSc (Hons) ARCS
Contact Me ~ http://tobyinkster.co.uk/contact

 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
box positioning issues and different version IE 6 problem chaser7016 HTML 3 01-03-2007 01:24 AM
css and positioning images repeating Peter HTML 2 03-26-2006 04:52 PM
IE 6.0 / Firefox 1.07 and CSS positioning differences Len Philpot HTML 2 12-24-2005 07:54 PM
Datalist and CSS positioning Eric ASP .Net 1 09-14-2005 03:38 PM
CSS positioning : relative, fixed, absolute and liquid layouts KatB HTML 8 02-14-2005 11:37 PM



Advertisments