473,322 Members | 1,493 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,322 software developers and data experts.

css and borders

I've got two classes header and footer. They both have a 2px. border
to make it appear as a box on top and at the bottom of the page. They
both have a standard width (respecting the padding property).
Now I wanted the footer to always apear on the bottom of the page even
if there's a blank page with only header and footer.
So I set it to position:absolute; bottom:12px; moving it to the
bottom. But now the width of the footer isn't the same anymore but
just as big as the text it contains.
To go round this I set it's width property to 100%. But now it only
respects padding on the left side and not on the right.
Any suggestions?
Jul 20 '05 #1
5 1641
> I've got two classes header and footer. They both have a 2px. border
to make it appear as a box on top and at the bottom of the page. They
both have a standard width (respecting the padding property).
Now I wanted the footer to always apear on the bottom of the page even
if there's a blank page with only header and footer.
So I set it to position:absolute; bottom:12px; moving it to the
bottom.
I didn't know you could do that! I'm not sure that is widely supported.
But now the width of the footer isn't the same anymore but
just as big as the text it contains.
To go round this I set it's width property to 100%. But now it only
respects padding on the left side and not on the right.
Well, it's now absolutely positioned. That's a different kind of animal,
that margins don't apply to. The browser is implying a left: 0px, absolutely
positioned divs are, well, absolutely positioned. You'll have to style the
contents of that div. Perhaps another div inside of it.

Jeff

Any suggestions?

Jul 20 '05 #2
In article Malfunction wrote:
I've got two classes header and footer. They both have a 2px. border
to make it appear as a box on top and at the bottom of the page. They
both have a standard width (respecting the padding property).
Now I wanted the footer to always apear on the bottom of the page even
if there's a blank page with only header and footer.
So I set it to position:absolute; bottom:12px; moving it to the
bottom. But now the width of the footer isn't the same anymore but
just as big as the text it contains.
To go round this I set it's width property to 100%. But now it only
respects padding on the left side and not on the right.
Any suggestions?


Use this:

right:0;

You are in wrong group, use ciwa.stylesheets for CSS questions. And
google it before.

Also see
http://steve.pugh.net/test/test57a.html

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.

Jul 20 '05 #3
Sorry for being in the wrong group.
But right:0 doesn't do it. I want padding of 10 on either side. The
standard streches the box over the whole page until it reaches 10
pixel from the border.
Setting right:0 or 10 the box is aligned to the right but having only
the size of the containing text.

should look like this:

---------------------------------------------------
|...-------------------------------------------...|
|...| header with margin on both sides |...|
|...| but streched over the full remaining |...|
|...| width no matter how much text contained|...|
|...-------------------------------------------...|
|................................................. |
|................................................. |
|................................................. |
|................................................. |
|...-------------------------------------------...|
|...| should be the same as header but always |...|
|...| positioned to the bottom of the page |...|
|...-------------------------------------------...|
---------------------------------------------------
Lauri Raittila <la***@raittila.cjb.net> wrote in message news:<MP************************@news.cis.dfn.de>. ..
In article Malfunction wrote:
I've got two classes header and footer. They both have a 2px. border
to make it appear as a box on top and at the bottom of the page. They
both have a standard width (respecting the padding property).
Now I wanted the footer to always apear on the bottom of the page even
if there's a blank page with only header and footer.
So I set it to position:absolute; bottom:12px; moving it to the
bottom. But now the width of the footer isn't the same anymore but
just as big as the text it contains.
To go round this I set it's width property to 100%. But now it only
respects padding on the left side and not on the right.
Any suggestions?


Use this:

right:0;

You are in wrong group, use ciwa.stylesheets for CSS questions. And
google it before.

Also see
http://steve.pugh.net/test/test57a.html

Jul 20 '05 #4
On 12 Feb 2004 22:07:25 -0800, Malfunction <wl****@yahoo.de> wrote:
Sorry for being in the wrong group.
But right:0 doesn't do it. I want padding of 10 on either side.
10 ducks? 10 lira? 10 pins?
The
standard streches the box over the whole page until it reaches 10
pixel from the border.
Setting right:0 or 10 the box is aligned to the right but having only
the size of the containing text.

should look like this:


Should look like this:

width: 100%;
margin: 10px or 10em or whatever;
Jul 20 '05 #5
In article Neal wrote:
On 12 Feb 2004 22:07:25 -0800, Malfunction <wl****@yahoo.de> wrote:
The
standard streches the box over the whole page until it reaches 10
pixel from the border.
Setting right:0 or 10 the box is aligned to the right but having only
the size of the containing text.


Then use left:0 also.
width: 100%;
margin: 10px or 10em or whatever;


You never tested it, in standards mode? It causes horizontal scrolling,
or at least it should.

copy and f'ups set to ciwas.
--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.

Jul 20 '05 #6

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

2
by: Hostile17 | last post by:
I've been trying to figure out a good way to make a CSS layout with nice-looking 1-pixel borders around the table cells. The only broadly compatible way to do this I know of is to have * the...
2
by: Haines Brown | last post by:
This may seem a pointless question, but I'm trying work around an inconsistency between browsers. I have a template that contains a division that holds a text that sometimes exists and sometimes...
1
by: Melissa | last post by:
A form in my database has multiple subforms. If any subform has no data, the borders of the subform still display on screen and also are printed if I print the main form. Reports are different. If...
1
by: Melissa | last post by:
Sorry if this becomes a repeat! I am having trouble with my newsreader and don't know if this got posted yeserday or not or if anyone responded. A form in my database has multiple subforms. If...
1
by: Glen Vermeylen | last post by:
Hi, For a project at school we have to automate the assignment of seats in classrooms to students during the exams. The lady who previously did everything manually kept the layouts of the...
10
by: Matt Kruse | last post by:
See: http://www.mattkruse.com/temp/offsetleft.html It appears that the offsetLeft value in IE6 (other versions not tested) incorrectly ignores the border width on a DIV when there is a width:...
7
by: steve | last post by:
Hi All I urgently need help on setting datagridview cell borders at runtime I found some code on the web from Programming Smart Client Data Applications with .NET 2.0 by Brian Noyes See...
2
by: cbjewelz | last post by:
Hey. I'm creating a horizontal boxed CSS menu for my site using lists. I wish to achieve a main menu bar something like this: http://kurafire.net/log/ however when I add borders to my code it...
9
by: Michael Redbourn | last post by:
Hi, I just switched from FP to DW and am very very happy ! So whilst I'm mastering Dreamweaver (gonna be a while yet :-) - I thought that I'd try and find out how to add borders for browers...
2
by: nicstel | last post by:
Hello, I'm trying to find documentation about the xlwt (py_excelerator). I want to change the border of some cells. But the only types that I found is: double and dashed. How to do a simple line...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.