|
HTML - Need Set Of Eyes For Spacing Trouble
need the wrap to touch the bottom of the browser, not just the top... I've looked it over and I must be looking over something... a new set of eyes should do the trick, thanks to anyone who helps!
http://www.pzfantasyfootball.com html for homepage: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>PZ Productions Fantasy Football</title> <link href="style.css" type="text/css" rel="stylesheet" /> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> <meta name="keywords" content="fantasy football, nfl, sports, drafts, drafting, draft, rankings, awards, standings, leagues, players, teams, starters, " /> <meta name="description" content="Fantasy site made to help maximize your fantasy season as well as enhance your fantasy football experience." /> <meta http-equiv="Content-Language" content="EN" /> <meta name="author" content="PZ" /> <meta name="distribution" content="Global" /> <meta name="copyright" content="All content and images are copyright PZ Productions." /> <meta name="robots" content="FOLLOW,INDEX" /> </head> <body> <div id="wrap" class="cfx"> <div id="mid"> <div id="navigation"> <ul> <li>» <a href="index.shtml">HOME</a></li> <li>» <a href="latestnews.shtml">LATEST NEWS</a></li> <li>» <a href="fantasyinfo.shtml">FANTASY INFO</a></li> <li>» <a href="nflnews.shtml">NFL NEWS</a></li> <li>» <a href="chat.shtml">CHATROOM</a></li> <li>» <a href="helpfulsites.shtml">HELPFUL SITES</a></li> </ul> </div> <div id="sitenews"> <div class="newstext">PZ Productions fantasy football is a personal site used to keep track and add more depth to the fantasy season of leagues held by myself and my friends. As you can see there are two leagues... however they're not directly connected. This site will provide comparisons between the two leagues, but in no way are the leagues going to intertwine. Along with standings, depth charts, records, and the such for the fantasy leagues, I'll try to offer week by week analysis of the upcoming games, touch up on the latest football news, and basically anything else impacting the fantasy football season. I hope you all enjoy the new look and feel of the site. <p /><strong>Hot Info - Yahoo! Opens Fantasy Football Registration</strong> <br />Yahoo! has finally opened their fantasy football registration so let's get moving! It's time to hit up some drafts and see how the early goings get going. I love doing as many drafts as possible in order to give you all the best info on who's going when! In the next week come back to check up on players picked too early and players picked too late. You'll know exactly what to do come draft day, just stick with us! </div> </div> <div id="sitepoll"><div class="feedtext"> <script src="http://feeds.feedburner.com/pzpff?format=sigpro" type="text/javascript" ></script><noscript><p>Subscribe to RSS headline updates from: <a href="http://feeds.feedburner.com/pzpff"></a><br/>Powered by FeedBurner</p> </noscript> </div></div> </div> <div id="bot"> <div id="fantasy"> <table> <tr> <td><a href="/test/mwffl/standings.shtml">STANDINGS</a></td> <td><a href="#">SCORES</a></td> </tr><tr> <td><a href="#">RECORDS</a></td> <td><a href="#">SCHEDULE</a></td> </tr><tr> <td><a href="#">TEAMS</a></td> <td><a href="#">AWARDS</a></td> </tr> <tr> <td colspan="2"><a href="mwffl">OFFICIAL PAGE</a></td> </tr> </table> </div> <div id="gamers"> <table> <tr> <td><a href="#">STANDINGS</a></td> <td><a href="#">SCORES</a></td> </tr><tr> <td><a href="#">RECORDS</a></td> <td><a href="#">SCHEDULE</a></td> </tr><tr> <td><a href="#">TEAMS</a></td> <td><a href="#">AWARDS</a></td> </tr> <tr> <td colspan="2"><a href="#">OFFICIAL PAGE</a></td> </tr> </table> </div> <div id="fansites"> <table> <tr> <td><a href="#">STANDINGS</a></td> </tr><tr> <td><a href="#">RECORDS</a></td> </tr><tr> <td><a href="#">AWARDS</a></td> </tr><tr> <td><a href="#">OFFICIAL PAGE</a></td> </tr> </table> </div> </div> </div> </body> </html> The CSS: Code: * {margin: 0; padding: 0;}
p {margin-top: 10px}
html, body {
margin: 0;
padding: 0;
font: normal 12px "Century Gothic", tahoma, arial, trebuchet ms, verdana, times new roman;
color: #000;
background-color: #000;
}
.left {text-align: left;}
.center {text-align: center;}
.right {text-align: right;}
.justify {text-align: justify;}
.border {border: 1px solid #000;}
#wrap {
width: 1000px;
margin: 0 auto;
padding: 0;
background-color: #fff;
}
#top {
width: 100%;
height: 150px;
float: left;
}
#header {
width: 100%;
height: 150px;
background-image: url(/images/headertitle.jpg);
background-repeat: no-repeat;
z-index: 2;
}
#tomlinson {
width: 100%;
height: 149px;
text-align: right;
z-index: 1;
}
#mid {
width: 100%;
height: 400px;
float: left;
}
#navigation {
width: 200px;
height: 100%;
float: left;
background-image: url(/images/leftnav.gif);
background-repeat: no-repeat;
font-family: "Century Gothic", tahoma, arial;
}
#navigation ul {
margin: 60px 0 0 20px;
list-style-type: none;
}
#navigation li {
height: 20px;
font-size: 14px;
}
#navigation a, #navigation a:visited {
color: #000;
text-decoration: none;
}
#navigation a:active, #navigation a:hover {
color: #11628d;
text-decoration: none;
}
#sitenews {
width: 600px;
height: 400px;
background-image: url(/images/content.gif);
background-repeat: no-repeat;
float: left;
}
#chat {
width: 600px;
height: 400px;
background-image: url(/images/chatcontent.gif);
background-repeat: no-repeat;
float: left;
}
#sitenews ul {
margin: 10px 0 10px 20px;
}
.newstext {
width: 560px;
height: 265px;
margin: 60px 0 0 20px;
font-size: 12px;
color: #000;
line-height: 16px;
}
.infobox {
width: 164px;
height: 230px;
float: left;
border: 1px solid #ccc;
margin-left: 6px;
padding: 6px;
text-align: center;
background-image: url(/images/lightsilverbg.gif);
overflow: auto;
}
#sitepoll {
width: 200px;
height: 400px;
float: left;
background-image: url(/images/rightnav.gif);
background-repeat: no-repeat;
}
.feedtext {
width: 180px;
margin-top: 60px;
font-family: "Century Gothic", tahoma, arial;
text-align: center;
}
.feedtext a, .feedtext a:visited, .feedtext a:active {
color: #11628d;
text-decoration: none;
}
.feedtext a:hover {
color: #11628d;
text-decoration: underline;
}
.feedtext li {
padding-bottom: 3px;
text-align: left;
}
.feedtext ul {
list-style-type: none;
margin-left: 20px;
}
#bot {
width: 100%;
height: 250px;
float: left;
}
#fantasy {
width: 333px;
height: 100%;
float: left;
background-image: url(/images/wolfpacsec.gif);
background-repeat: no-repeat;
font-family: "Century Gothic", tahoma, arial;
}
#fantasy a, #fantasy a:visited {
color: #000;
text-decoration: none;
}
#fantasy a:active, #fantasy a:hover {
color: #a20707;
text-decoration: none;
}
#fantasy td {
text-align: center;
height: 30px;
font-size: 14px;
}
#fantasy table {
margin: 68px auto;
height: 120px;
width: 300px;
}
#gamers {
width: 333px;
height: 100%;
float: left;
background-image: url(/images/pzpfflsec.gif);
background-repeat: no-repeat;
font-family: "Century Gothic", tahoma, arial;
}
#gamers a, #gamers a:visited {
color: #000;
text-decoration: none;
}
#gamers a:active, #gamers a:hover {
color: #079017;
text-decoration: none;
}
#gamers td {
text-align: center;
height: 30px;
font-size: 14px;
}
#gamers table {
margin: 68px auto;
height: 120px;
width: 300px;
}
#fansites {
width: 333px;
height: 100%;
float: left;
background-image: url(/images/globalsec.gif);
background-repeat: no-repeat;
font-family: "Century Gothic", tahoma, arial;
}
#fansites a, #fansites a:visited {
color: #000;
text-decoration: none;
}
#fansites a:active, #fansites a:hover {
color: #90076e;
text-decoration: none;
}
#fansites td {
text-align: center;
height: 30px;
font-size: 14px;
}
#fansites table {
margin: 68px auto;
height: 120px;
width: 300px;
}
.cfx:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#footer {
width: 100%;
height: 50px;
float: left;
margin: 0;
padding: 0;
}
.cfx {display: inline-table;}
* html .cfx {height: 1%;}
.cfx {display: block;}
Similar Tutorialshi guys... here's a layout i'm working on and i just can't seem to be able to get rid of the spacing on the bottom of the cells where i have a link with my rollover images... here's the url: http://geocities.com/antigatez/school/index.html any help would be appreciated... Hello! I am so confused. I have built this page and it looks great in Firefox! But in Explorer 6 the border, my css container, is bigger than the table I have built to organize my information. I was wondering if someone would take a look at the code and help me identify what I might have done wrong. Here is the site address: https://maxwho.com/mm5/merchant.mvc?...S&Store_Code=M The CSS is embedded in the page so if you view source, you can see the code. On this page: http://billboardfamily.com/?page_id=2 the line above "Height 3'0" under "Layne Martin" in the BOTTOM LEFT table is missing. I can't see the error int he code causing this. Can anyone help me out? Thanks. Ok so I'm learning along the way by playing around with what my web designer started. I'm having trouble working out what part of the html does the spacing between my text and the input box. Here's what I'm stuck at: You can see how where it says 'click for more fonts' the box isn't in line with the others. Any help would be much appreciated.... I'm starting to go cross-eyed lol. Hello Everyone: I am a novice HTML user - I use it to create a Help file (for an MS/Access database), using HTML Help Workshop. My question concerns line spacing, using the following code: <b><u>Server:</u></b> <ul> <li>First List item...</li> </ul> Using this code, there will be a blank line between "Server" and "First List item...". Is it possible to eliminate this line and have the list start in the next line after "Server"? Thanks. . . Tony N. Alright i'm having a little trouble. When I add stuff to the side boxes, they are farther down then i want them to be, here is a pic: I'm wanting to move it up some, but I don't know how, I have been trying for a long time though. Here is the HTML Code: Code: <div class="box2 margin1"> <div class="tail-right"> <div class="corner-right-bottom"> <div class="corner-left-bottom"> <div class="corner-right-top"> <div class="corner-left-top"> <div class="indent"> <h3><span><span>Partners</span></span></h3> <div class="indent2"> <center><a href="http://www.elitepvpers.de"><img src="http://img230.imageshack.us/img230/2364/31421454.png" border="0"></a></center> <center><a href="http://www.4botters.com"><img src="http://img814.imageshack.us/img814/2599/88029646.png" border="0"></a></center> <div id="vent"><div style="font-weight: bold; font-size: 12px; text-align: center;"><a href="ventrilo://94.75.238.76:4696/servername=EQGVent" style="text-decoration: none;"></a></div></div> </div> </div> </div> </div> </div> </div> </div> </div> Here is the CSS: Code: .box2 {background:#bec2c5 url(images/box2-bottom-tail.gif) bottom repeat-x;}
.box2 .tail-right {background:url(images/box2-right-tail.gif) right repeat-y;}
.box2 .corner-right-bottom {background:url(images/box2-corner-right-bottom.gif) right bottom no-repeat;}
.box2 .corner-left-bottom {background:url(images/box2-corner-left-bottom.gif) left bottom no-repeat;}
.box2 .corner-right-top {background:url(images/box2-corner-right-top.gif) right top no-repeat;}
.box2 .corner-left-top {background:url(images/box2-corner-left-top.gif) left top no-repeat; width:100%;}
.box2 .indent {padding:4px 6px 6px 4px;}
.box2 .indent2 {padding:15px 12px 0px 6px;}
Any help will be greatly appreciated. Thank you. Hey folks... I've searched and searched for an answer for this, but with no luck. Probably because I don't know how to exactly describe my problem. Anyway, the issue is my page is displaying differently in IE and Firefox (surprise!). The spacing between the top image and the body divs are different. I'm not sure if it's an HTML issue or a CSS one. The page in question is: http://www.project-43.com/ The CSS file is he http://project-43.com/images/style.css It displays the way I want it too in Firefox. If you look at it in IE, you'll see the top image looks short, but that is because the spacing between the left menu area and the body on the right is too big. I appreciate any pointers that you might be able to offer. Thanks! Hi all, I'm having a problem with trying to get a table to have a tidy border. I want the border around one td cell to join the image in the cell above it, but because there is a border around the cell the border in the cell below isn't joining with the one above, there is a white gap between the two. This is the relevant code in the html file: <table class="core"> <tbody> <!-- menu --> <tr> <td width="200px"> <table class="menu"> <tbody> <tr> <td><img src="images\menuheading.jpg" alt="Mojo Menu" border="0"></td> </tr> <tr> <td class="menumain"> Link1<br> Link2<br> Link3<br> </td> </tr> </tbody> </table> </td> <!-- main body --> <td valign="top">Test Main</td> </tr> </tbody> </table> This is the code in the css file body { vertical-align: top; font-weight: normal; font-size: 12px; color: #000000; font-style: normal; font-family: Verdana; text-align: left; margin: 0; } table.headerfooter { background-color: #000066; vertical-align: top; text-align: left; border: #000066 0px solid; width: 100%; color: #FFFFFF; font-size: 10px; text-align: center; padding: 10px; } table.core { vertical-align: top; text-align: left; border: #000000 0px solid; background-color: #FFFFFF; width: 100%; padding: 10px; font-size: 12px; } table.menu { vertical-align: top; text-align: left; background-color: #FFFFFF; width: 100%; margin: 0px; padding: 0px; } td.menumain{ border-left: #000066 1px solid; padding-left: 10px; padding-right: 10px; padding-bottom: 10px; border-right: #000066 1px solid; border-bottom: #000066 1px solid; margin: 0px; padding-top: 0px; } td.headerfooter-left { text-align: left; } td.headerfooter-right { font-size: 10px; text-align: right; } p.menubody{ color: #FFFFFF; padding: 4px; border-left: #000066 1px solid; border-right: #000066 1px solid; } Any help would be appreciated as I'm stumped! So, I am working on a website for the final project for one of my classes, and while it looks fine in Firefox and Safari, there is some funky spacing in my divs/table set up with my inline frame in IE: (I have IE 7, but I would like this to work in all versions as I'm not sure what browser my professor has) http://grandmas.host-ed.net/ in IE, you will see there is a space below the top banner and another one between the footer and the border... how can I get rid of these? Here is my code (image map removed b/c it's long and unneeded for my question) Code: <html> <head> <title>Grandma Mae's Country Naturals</title> </head> <body background="bg.jpg" bgproperties="fixed"> <center> <table Cellpadding="0" Cellspacing="0" border="0"> <tr><td> <div style="border: solid 0 #a34c30; border-left-width:3px; border-right-width:3px; border-top-width:3px; padding-left:0ex padding-right:0ex padding-top:0ex padding-bottom:0ex"> <img src="gcn_nav2.jpg" usemap="#mymap" border="0"> </div></td></tr> <tr><td> <div style="border: solid 0 #a34c30; border-left-width:3px; border-right-width:3px; padding-left:0ex padding-right:0ex padding-top:0ex padding-bottom:0ex"> <IFRAME name="inlineframe" src="home.html" width=854 height=350 frameborder="0"></IFRAME> </div></td></tr> <tr><td> <div style="border: solid 0 #a34c30; border-left-width:3px; border-right-width:3px; border-bottom-width:3px; padding-left:0ex padding-right:0ex padding-bottom:0ex padding-top:0ex"> <img src="footer2.jpg"> </div> </td></tr></table> <font color="FFCC99" size="1" face="Georgia, Times New Roman, Times, serif"><b>This site is not affiliated with Grandma Mae's County Naturals</b></font> </center> </map> </body> </html> It's kind of improvised and I am no html expert so perhaps there is a better way to get the look I was going for? Also, I know there is some extra/unneeded code there, but it's all stuff I added when trying to fix the spacing (and it didn't work) and was too lazy to take away. haha Thanks a ton, Nathalie I am a flash developer and our client wants this site to be built using mainly html, I am pretty good with html but not even close to an expert. I have built a site with Flash vertical and horizontal nav bars above and beside my html content. In Firefox and Safari the site looks perfect, however in IE6 & IE7 there is about a 5 pixel gap between my vertical menu bar and the rest of my content. I have tried everything I know to correct this problem... Any Ideas? They would be greatly appreciated.... Site Link http://www.sacreative.com/education I am really new to learning html and I have just set up a form using formmail.pl. It works great but if the customer enters a carriage return it doesn't show up on my results. For example, if someone types this: Line1 Line2 I get it as Line1Line2. I'd like to be able to program it so I get it as it was originally posted. Here is my code: <form action="cgi-sys/formmail.pl" method="post"><input name="recipient"value="drmarie@askavetquestion.com" type ="hidden" enctype="text/plain"><font face="Arial"> Your first name: <input type="text" name="owner name" size="30" /> <br /> <br /> Pet's name: </font> <font face="Arial"><input type="text" name="name" size="30" /><br /> <br /> Your email address: (you will be sent an email with a link directing you to your answer)<br /> <input name="email" size="20" value=""type="text"/><br /><br /> How old is your pet?</font> <select name="age"> <option>Less than 3 months</option> <option>3-6 months</option> <option>6-12 months</option> <option>1-2 years</option> <option>2-5 years</option> <option>5-8 years</option> <option>8-11 years</option> <option>11-15 years</option> <option>More than 15 years</option></select><font face="Arial"><br /> <br /> What breed is your pet?<br /> </font><font face="Arial"><input type="text" breed="Breed" size="30" /><br /> <br /><br /> What is your question about your pet? <br /> </font> <textarea name="question" rows="25" cols="80"></textarea><br /> <font face="Arial"><br /> </font><font face="Arial"><input type="submit" value="Send Question" /><input type="reset" /></font></form> Thanks so much! Marie Alright, I have a DIV with this as the background image: I put two textboxes over them, the first one is aligned ok but the second one is too high. How do I space them out? When I try br it goes down way too far. Here is what it looks like right now: Should I use a table? more DIVs? Or, is there a css code I could use to bring it down? hey...hope i can sort this out quickly its only a small problem.. but if you look here ... http://anastaciadreams.com/layouttest/test.html youll notice on Internet explorer theres a space in the 2 parts of the banner area, how do i remove this? I have a couple of really small spacing problems. my website is www.betdemon.com you will see from the pic that the spacing 1# on the left hand side is different to the spacing 2# on the right hand side and looks uneven. I want spacing 2# to be the same as 1# - how do i do this? Also you will see there is a gap between banners (3#) but this doesn't appear when viewing in Firefox - How can I make the gap appear? Thanks in advance I've set up a <ul> with some breaks between each <li>. The spacing differs between FF and IE. It seems that the first <br> is ignored by IE, but not FF. Anyone know why, or a workaround? Thanks. Hi there. I am upkeeping a website in wordpess and one of the posts has links which always appear to be double-spaced. I want them to be single-spaced. I have tried changing around the html coding and such but it has not changed the spacing. I don't know much about html so my attempts have been experimentational. The html tags in there are ul, li and a href=. I've tried taking each out to no avail. What should I do? Thank you very much for your help. how to solve the problem? Hi there, I'm having a problem with spacing between rows n an html tabel. First let me stress that I am no expert and just know basics to get me by. I have been using this amazing bespoke platform for events websites and adding little bits of html in. The site in question is http://www.ffrp2.fatsoma.com/home.php. I'm sure that I am probably doing this the hard way but im a designer not a coder. My brother built the site builder but he's away skiing so cant ask him and a client wants his site down asap... Here's the code I have used <table width=960px border="0" cellspacing="0" cellpadding="0"> <tr height=332px><td width=960px> <img style="border:0px" src="http://www.fatsoma.com/sitebuilder/./sites/resources/976_resource_55.jpg"/></a> </td> </tr> <tr><td> <table width=960px border="0" cellspacing="0" cellpadding="0"> <tr height=447px> <td width=232px> <table border="0" cellspacing="0" cellpadding="0"> <tr height=232px><td> <a href="button.php"> <img style="border:0px" src="http://www.fatsoma.com/sitebuilder/./sites/resources/976_resource_56.jpg"/></a> </td></tr> <tr height=101px><td> <a href="button.php"> <img style="border:0px" src="http://www.fatsoma.com/sitebuilder/./sites/resources/976_resource_57.jpg"/></a> </td></tr> <tr height=90px><td> <a href="button.php"> <img style="border:0px" src="http://www.fatsoma.com/sitebuilder/./sites/resources/976_resource_58.jpg"/></a> </td></tr> </table> </td> <td width=218px> <table border="0" cellspacing="0" cellpadding="0"> <tr height=175px><td> <a href="button.php"> <img style="border:0px" src="http://www.fatsoma.com/sitebuilder/./sites/resources/976_resource_59.jpg"/></a> </td></tr> <tr height=101px><td> <a href="button.php"> <img style="border:0px" src="http://www.fatsoma.com/sitebuilder/./sites/resources/976_resource_60.jpg"/></a> </td></tr> <tr height=171px><td> <a href="button.php"> <img style="border:0px" src="http://www.fatsoma.com/sitebuilder/./sites/resources/976_resource_67.jpg"/></a> </td></tr> </table> </td> <td width=237px> <table border="0" cellspacing="0" cellpadding="0"> <tr height=90px><td> <a href="button.php"> <img style="border:0px" src="http://www.fatsoma.com/sitebuilder/./sites/resources/976_resource_62.jpg"/></a> </td></tr> <tr height=101px><td> <a href="button.php"> <img style="border:0px" src="http://www.fatsoma.com/sitebuilder/./sites/resources/976_resource_68.jpg"/></a> </td></tr> <tr height=85px><td> <a href="button.php"> <img style="border:0px" src="http://www.fatsoma.com/sitebuilder/./sites/resources/976_resource_64.jpg"/></a> </td></tr> <tr height=171px><td> <a href="button.php"> <img style="border:0px" src="http://www.fatsoma.com/sitebuilder/./sites/resources/976_resource_65.jpg"/></a> </td></tr> </table> </td> </tr> </table> </td> </tr> </table> many thansk in advance for any help offerd Mark I'm new to HTML/XHTML, so thanks for helping me understand the spacing rules that are applying he HTML: Quote: <div id="nav"> <ul> <li><a href="index.html">Main</a></li> <li><a href="resume.html">Resume</a></li> <li><a href="portfolio.html">Portfolio</a></li> <li><a href="contact.html">Contact and Networking</a></li> </ul> </div> CSS: Quote: #nav { height: 37px; text-align: center; background-color: #858585; } #nav ul { margin: 0; } #nav li { display: inline; } #nav a { padding: 9px 12px 9px 12px; line-height: 38px; border-left: 1px solid black; } Between every link in my horizontal navigation menu, there is a space (which I don't want). In order to get rid of this space, I have to change my HTML code to... Quote: <div id="nav"> <ul> <li><a href="index.html">Main</a></li><li><a href="resume.html">Resume</a></li><li><a href="portfolio.html">Portfolio</a></li><li><a href="contact.html">Contact and Networking</a></li> </ul> </div> ...which in turn sacrifices readability. This all seems very counter-intuitive to me, since I was under the impression that I could format my code readably without having to worry about its presentation. I can only guess that my line breaks (textual line breaks, not actual <br /> tags) are being interpreted as white space within my <ul>. If this is the case, my only other option would be to display my <li>s as block elements with zero margins, float them, and then use margins to push them to the middle (which is all WAY uglier than being able to center them with text-align). This is how I understand what's going on. If I am correct, does this mean I'm forced to sacrifice readability for functionality? I want to remove the space between the top frame and the main frame, but the div on the main frame doesn't start on the top of the frame... http://black1c3.awardspace.com how can i do it?? |
|||||||