creativefelli Posted November 26, 2013 Share Posted November 26, 2013 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 More sharing options...
creativefelli Posted November 26, 2013 Author Share Posted November 26, 2013 Also, my site URL is http://creativefelli.com Link to comment Share on other sites More sharing options...
rootKID Posted November 27, 2013 Share Posted November 27, 2013 (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 ) 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 November 27, 2013 by rootKID Link to comment Share on other sites More sharing options...
davej Posted November 27, 2013 Share Posted November 27, 2013 (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 November 28, 2013 by davej Link to comment Share on other sites More sharing options...
creativefelli Posted November 30, 2013 Author Share Posted November 30, 2013 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 Can someone help me out? Link to comment Share on other sites More sharing options...
davej Posted November 30, 2013 Share Posted November 30, 2013 Before you get too far remember that this is supposed to also be usable on smart phones. Link to comment Share on other sites More sharing options...
creativefelli Posted November 30, 2013 Author Share Posted November 30, 2013 I'm not sure how to do that... :/ Link to comment Share on other sites More sharing options...
rootKID Posted December 2, 2013 Share Posted December 2, 2013 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 More sharing options...
davej Posted December 21, 2013 Share Posted December 21, 2013 (edited) The most important tool is the use of @media css conditional blocks such as... @media screen and (min-width:400px) and (max-width:799px) {.myClass1{float:left;}} https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries Edited December 21, 2013 by davej Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now