| Author |
Making Table In Very Top Left Corner
|
|
| dutch90@gmail.com 2006-08-22, 6:40 pm |
| Hi
I want to make my header table (with the logo and nav menu) start at
0,0. I tried
body {margin-top: 0px; margin-right: 0px; margin-bottom: 0px;
margin-left: 0px; padding:0px;}
but I still have about a 3-5px border the color of my page background
when viewed in both IE and FF. How can I make it have NO border at
all? I've seen a ton of sites that achieve this look.
Thanks in advance
| |
|
| dutch90@XXXXXXXXXX wrote:
> Hi
>
> I want to make my header table (with the logo and nav menu) start at
> 0,0. I tried
>
> body {margin-top: 0px; margin-right: 0px; margin-bottom: 0px;
> margin-left: 0px; padding:0px;}
Did you set margin and padding to 0 for the <html> element?
--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/
Now playing: Annie Lennox - Why
| |
| Beauregard T. Shagnasty 2006-08-22, 6:40 pm |
| Els wrote:
> dutch90@XXXXXXXXXX wrote:
>
>
> Did you set margin and padding to 0 for the <html> element?
...or maybe even for the <table> element? :-)
[Begs the question: why is dutch using a <table> for non-tabular data?]
BTW, this is more efficient:
html, body, table { margin: 0; padding: 0; }
--
-bts
-Motorcycles defy gravity; cars just suck.
| |
| dutch90@gmail.com 2006-08-23, 3:42 am |
|
Beauregard T. Shagnasty wrote:
> Els wrote:
>
>
> ..or maybe even for the <table> element? :-)
>
> [Begs the question: why is dutch using a <table> for non-tabular data?]
>
> BTW, this is more efficient:
>
> html, body, table { margin: 0; padding: 0; }
>
> --
> -bts
> -Motorcycles defy gravity; cars just suck.
None of those solutions work. While they do bring the content closer
to the top left corner, there are still a few pixels between the edge
and the graphic.
How should I do my layout if not with tables?
| |
| Beauregard T. Shagnasty 2006-08-23, 3:42 am |
| dutch90@XXXXXXXXXX wrote:
> Beauregard T. Shagnasty wrote:
>
> None of those solutions work. While they do bring the content closer
> to the top left corner, there are still a few pixels between the edge
> and the graphic.
Ok, time for you to post a URL with a valid test case.
> How should I do my layout if not with tables?
Use CSS. Jump into the 21st century.
I don't have any pages with logos stuffed at the corner, but here are a
couple sites of mine where tables are only used for real tabular data.
http://countryrode.com/
http://freezeblock.com/
--
-bts
-Motorcycles defy gravity; cars just suck.
| |
| dutch90@gmail.com 2006-08-23, 3:42 am |
|
Beauregard T. Shagnasty wrote:
> Ok, time for you to post a URL with a valid test case.
At the moment, it's only available on my local machine. I'll upload it
sometime tomorrow -- it's late now.
What are the advantages of using CSS for layout? Seems like it'd be
MUCH harder to design the pages if you use CSS for your basic layout.
| |
| Beauregard T. Shagnasty 2006-08-23, 6:58 pm |
| dutch90@XXXXXXXXXX wrote:
> Beauregard T. Shagnasty wrote:
>
>
> At the moment, it's only available on my local machine. I'll upload
> it sometime tomorrow -- it's late now.
Ok. Let us know when it's ready.
> What are the advantages of using CSS for layout? Seems like it'd be
> MUCH harder to design the pages if you use CSS for your basic layout.
It is MUCH easier once you grasp the concept of CSS.
Here are some templates that I like:
<http://benmeadowcroft.com/webdev/cs...s/3-column.html>
--
-bts
-Motorcycles defy gravity; cars just suck.
| |
|
| dutch90@XXXXXXXXXX wrote:
>
> body {margin-top: 0px; margin-right: 0px; margin-bottom: 0px;
> margin-left: 0px; padding:0px;}
>
> but I still have about a 3-5px border the color of my page background
> when viewed in both IE and FF. How can I make it have NO border at
> all? I've seen a ton of sites that achieve this look.
{ margin: 0; padding: 0; border-spacing: 0; border-width: 0;
border-style: solid; border-color: yourchoice; }
These are apply to box tags such table, th, td, tbody, H1 to H6, etc.
| |
| Evertjan. 2006-08-23, 6:58 pm |
| RC wrote on 23 aug 2006 in comp.infosystems.www.authoring.stylesheets:
> { margin: 0; padding: 0; border-spacing: 0; border-width: 0;
> border-style: solid; border-color: yourchoice; }
>
if the border-width is 0, the color and style unnecessarily specified.
--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)
| |
| Christopher P. Winter 2006-08-24, 3:39 am |
| On 22 Aug 2006 20:11:43 -0700, dutch90@XXXXXXXXXX wrote:
>
>Beauregard T. Shagnasty wrote:
>
>None of those solutions work. While they do bring the content closer
>to the top left corner, there are still a few pixels between the edge
>and the graphic.
>
I start every table I use like this:
<TABLE CellSpacing=0 CellPadding=0>
I've found it avoids the kind of problem you mention. If I want to add white
space, colors or other formatting, I do that later with CSS.
| |
| dutch90@gmail.com 2006-08-26, 6:33 pm |
|
Christopher P. Winter wrote:
> I start every table I use like this:
>
> <TABLE CellSpacing=0 CellPadding=0>
>
Actually, I'm going to do a CSS layout now.
| |
| dutch90@gmail.com 2006-08-26, 10:38 pm |
| dutch90@XXXXXXXXXX wrote:
> Christopher P. Winter wrote:
>
>
> Actually, I'm going to do a CSS layout now.
Now I'm kind of stuck here. This is what I quickly threw together to
try to make a basic 3-column layout for testing purposes:
test.css:
-----
#panel-content {
position: absolute;
width: 30em;
left: 20;
}
#panel-left {
position: absolute;
width: 150px;
max-width: 150px;
left: 0;
}
#panel-right {
position: absolute;
width: 15em;
right: 0;
}
test.html
-----
<html>
<head>
<LINK href="test.css" rel="stylesheet" type="text/css">
</head>
<body>
<p
id="panel-left">asddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddfdasfdddddddddddddddddddddddddddddddddddddddddddddddddddddddgg</p>
</body>
</html>
-----
I was expecting it to wrap after the length reached 150 pixels. No
such luck. What gives? This destroys the layout...
Thx
| |
| Beauregard T. Shagnasty 2006-08-26, 10:38 pm |
| dutch90@XXXXXXXXXX wrote:
> I was expecting it to wrap after the length reached 150 pixels. No
> such luck. What gives? This destroys the layout...
Your unbroken string would do the same in a table cell. That wasn't a
good test. Use real words.
--
-bts
-Motorcycles defy gravity; cars just suck.
| |
| dutch90@gmail.com 2006-08-26, 10:38 pm |
|
Beauregard T. Shagnasty wrote:
> Your unbroken string would do the same in a table cell. That wasn't a
> good test. Use real words.
Hmmm. Guess you're right.
Sorry -- I'm new to CSS. I guess there is where overflow: hidden comes
in handy.
| |
| dutch90@gmail.com 2006-08-27, 3:30 am |
| dutch90@XXXXXXXXXX wrote:
> Actually, I'm going to do a CSS layout now.
*Sigh*. More problems. I'm trying to put together a simple login box
(something similar to
https://www.google.com/accounts/Log...ogle.com/&hl=en).
I want the boxes for username and password to be flush along the left
side. "No problem", I say. "I'll use absolute positioning!".
So I try this code:
..loginField {
position: absolute;
left: 80px;
}
and I make both text fields class="loginField". This seems to work,
except now the bottom of my password box spills out over the
"border-style: solid;" of my div.login box.
"No problem", I say. "I'll use the width and heigh properties!".
So I get it looking quite nice. Keep in mind I use firefox. I load it
up in IE and it looks terrible. How can I accomplish this effect
without tables in both IE and FF?? If it works in one, it doesn't work
in the other. I wish windows would ship with FF instead of IE.
CSS (no, wait, internet explorer) makes a fool of me again :P
|
|
|
|
| Copyright 2003 - 2008 forum4designers.com Software forum Computer Hardware reviews |