Jump to content

Issues Stretching Table to Window Height/Width

creativefelli

By creativefelli
in CSS

 Share

Recommended Posts

creativefelli Newbie

creativefelli

Posted
Posted

Hi there,

 

I have started coding my own website and I am by no means a professional at coding. The left table (with my logo inside) will not stretch to the height of the web browser. There's still a little 1 or 2px gap between the top and the bottom (there is not a gap on the left-hand side because I used CSS left-2px attribute). I was wondering if anyone can help me with the coding by any chance.

 

My HTML:

<!-- CSS & JAVASCRIPT LINKS --><link rel="stylesheet" type="text/css" href="/files/css/basiclayout.css"/><body><!-- SITE TITLE --><html><head><title>Creative Felli: Design and Artwork by Tiffany Harris</title></head></html><!-- MAIN TABLE --><table id="maintable" border="0"><tr><td class="sidetable" width="30%" height="100%"><img src="http://creativefelli.com/files/images/cf-logo-01.png" width="225px"></td><td valign="top" width="70%" height="100%"><h1 style="text-align:right;">Tiffany Harris</br>tiffany.harris.a@gmail.com</br>creativefelli@gmail.com</br></br></h1><center><!-- TABLE WITHIN MAIN TABLE --><table id="tableintable" border="0"><tr><td><img src="/files/images/blankimage.jpg"></td><td><img src="/files/images/blankimage.jpg"></td><td><img src="/files/images/blankimage.jpg"></td></tr><tr><td><img src="/files/images/blankimage.jpg"></td><td><img src="/files/images/blankimage.jpg"></td><td><img src="/files/images/blankimage.jpg"></td></tr><tr><td><img src="/files/images/blankimage.jpg"></td><td><img src="/files/images/blankimage.jpg"></td><td><img src="/files/images/blankimage.jpg"></td></tr></table></center></td></tr></table></body>

My CSS: 

/*BACKGROUND, FONT, COLOR, ALIGN, TABLE*/body {background-image:url('/files/images/BG.jpg');background-repeat:repeat-y, x;font-family:"ubuntu";color:636466;font-size:15px;width:100%; height:100%; position:relative; padding:0px; margin-top:0px;margin-left:0px;margin-bottom:0px;}h1 {color:#636466;font-size:20px;}#maintable {border:0;vertical-align: top;position:absolute;float:left;left:-3px;width:100%;height:100%;padding:0px; }#tableintable {border:0;vertical-align: center;}.sidetable {background-image:url("/files/images/Side-Grunge.jpg");background-repeat:repeat-x,y;background-color:black;background-position:center; height:100%;border-right-style:solid;border-width:5px;border-color:#0094a8;text-align: center;}

Any comments would be much appreciated :)

Link to comment
Share on other sites
rootKID Member

rootKID

Posted
Posted (edited)

First of all, the <link> attribute in the top of HTML. Please move that to right under <title> attribute code. (ALL CSS LINKING SHOULD BE DONE WITHINT THE <HEAD> TAGS).

 

Second. if you wish to divide the website into 2 colomn system (that is what i call it anyways :P) i would suggest replace your entire HTML code like so as an example:

<!-- CSS & JAVASCRIPT LINKS + SITE TITLE WITHIN <head> tags! --><html><head><title>Creative Felli: Design and Artwork by Tiffany Harris</title><link rel="stylesheet" type="text/css" href="/files/css/basiclayout.css"/></head><body><!-- MAIN TABLE (100% height+width to define what ground the table can cover, in this case basicly the whole area/ground of browser window!) --><table id="maintable" border="0" width="100%" height="100%"><tr><td>FIRST IMAGE/LOGO</td><td>SECOND HTML/IMAGE</td></tr></table></body></html>

just an example of what you could be doing! Keep in mind width are not usually placed on the actual <td> tags (i dont do that so much). I would suggest to place it like i did, on the table, and give it 100% of both ways. In that way you can use tr/td to cover the rest of the ground (for which now also are defined with the table with a 100% both ways, up and side-ways).

 

Hope you see what i mean, but as a start, i would suggest something simple, like first of all place <body> attribute and <html> in the end of HTML code. And setup like i did just above here, then you will get ALOT further than you are now ;)

 

Hope this helped a little bit :).

 

If interested, i can help you out a bit if needed. Just comment here and we can then speak :)

Edited by rootKID
Link to comment
Share on other sites
davej Devoted Member

davej

Posted
Posted (edited)

It looks quite nice but the code is pretty horrible. Here is my first crude attempt... but it isn't working right yet... so I guess it also qualifies as "horrible code..."

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>Creative Felli: Design and Artwork by Tiffany Harris</title><link rel="stylesheet" type="text/css" href="./files/css/basiclayout.cssxxx"/><style>*{padding:0;margin:0;}body {background-image:url('./files/images/BG.jpg');background-repeat:repeat-y, x;font-family:"ubuntu";color:#636466;font-size:15px;}#main{position:absolute;top:0;left:0;right:0;bottom:0;min-width:1095px;}#header{float:right;margin:3px 5px 40px 0;}#header h1 {color:#636466;font-size:20px;text-align:right;}#imgtable{float:right;width:70%;min-width:780px;/*max-width:850px;*/text-align:center;/*border:1px dotted red;*/}#imgtable img{}#side{float:left;width:28%; height:100%;background-image:url("./files/images/Side-Grunge.jpg");background-repeat:repeat-x,y;background-color:black;background-position:center; border-right-style:solid;border-width:5px;border-color:#0094a8;text-align: center;}#side img{margin-top:30%;}</style></head><body><div id="main"><div id="header"><h1>Tiffany Harris</br>tiffany.harris.a@gmail.com</br>creativefelli@gmail.com</h1></div><div id="side"><img src="./files/images/cf-logo-01.png" width="225" alt="logo"/></div><div id="imgtable"><img src="./files/images/blankimage.jpg" alt="img1"/><img src="./files/images/blankimage.jpg" alt="img2"/><img src="./files/images/blankimage.jpg" alt="img3"/><img src="./files/images/blankimage.jpg" alt="img4"/><img src="./files/images/blankimage.jpg" alt="img5"/><img src="./files/images/blankimage.jpg" alt="img6"/><img src="./files/images/blankimage.jpg" alt="img7"/><img src="./files/images/blankimage.jpg" alt="img8"/><img src="./files/images/blankimage.jpg" alt="img9"/></div></div></body></html>
Edited by davej
Link to comment
Share on other sites
creativefelli Newbie

creativefelli

Posted
  • Author
Posted

Alright! So I fixed a big hunk of the problem, but now there's another problem....

 

I finally got my tabbed tables to work, and I love them. Though it has issues. I would like the table to be fixed so the when you click on it, the tabs stay in the same place, but for some reason they want to vertically align to the middle of the page (hence, they move around, and it's annoying as crap). I've looked everywhere and I can't seem to find anything regarding vertical alignment, and I've also tried vertically aligning the table to the top, but it won't work. I also feel like there's an unnecessary amount of space in the top table. If you highlight the page, you get something that looks like a table on top of the tabs AND below them... I'm utterly confused xD Can someone help me out?

Link to comment
Share on other sites
rootKID Member

rootKID

Posted
Posted

actually, i must admit. I dont know how to make it able on SP (Smart-Phones) eitherl. But i did hear that i you had to write a <meta> tag of some sort to make it able to make it working on phones, am i wrong or half-past the way to the truth? lol x)?

Link to comment
Share on other sites
  • 3 weeks later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...