Webmaster Forum

Go Back   Webmaster Forum > Web Development > Coding Forum

Coding Forum Problems with your code? Discuss coding issues, including JavaScript, PHP & MySQL, HTML & CSS, Flash & ActionScript, and more.


Reply
 
Thread Tools Display Modes
Share |
  #1  
Old 12-25-2014, 11:38 AM
kickerplays kickerplays is offline
Contributing Member
 
Join Date: 08-26-12
Location: east coast
Posts: 60
iTrader: 0 / 0%
not sure why text is overlapping

I was under the impression(for some reason ) that my text wouldn't overlap but once I get to 8 middle articles they overlap into the footer area. I know im new to this but not sure why this is, anyway heres the code including css

HTML Code:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"/> <title>im so tired</title> <link rel="stylesheet" href="main.css"/> </head> <body> <div id="big_wrapper"> <header id="top_header"> <h1>Nerdy Poker=Money and Girls</h1> <h3>A Complete guide to crushing the 1-2 game</h3> </header> <div id="top_menu"> <ul> <li><a href="#"> Home</a></li> <li><a href="#"> Tells</a></li> <li><a href="#"> Charts</a></li> <li><a href="#"> Tools</a></li> <li><a href="#"> Videos</a></li> <li><a href="#"> Blog</a></li> </ul> </div> <div id="left"> <nav id="left"> <ul> <li> <a href="#">Bet Sizing</a> </li> <li><a href="#">Semi-Bluffing</a></li> <li><a href="#">Bluffing</a></li> <li><a href="#">Various Charts</a></li> <li><a href="#">Live Play Tips</a></li> <li><a href="#">SEARCH</a></LI> <li><a href="#">Products</a></li> <li><a href="#">About</a></li> <li><a href="#">Various Charts</a></li> <li><a href="#">Live Play Tips</a></li> <li><a href="#">Live Play Tips</a></li> </ul> </nav> </div> <section id="middle"> <div id="middle_header"> <article> <a href="#"> <header> <hgroup> <h1>starting hand charts</h1> <h2>what to play and when to play it</h2> </hgroup> </header> <footer> <p>your starting place of how to play poker</P> </footer> </a> </article> </div> <article> <a href="#"> <header> <hgroup> <h1>top 10 all time tips</h1> <h2>remember these tips to keep you in the game</h2> </hgroup> </header> <footer> <p>this will help you avoid stepping into traps</P> </footer> </a> </article> <article> <a href="#"> <header> <hgroup> <h1>top 10 all time tips</h1> <h2>remember these tips to keep you in the game</h2> </hgroup> </header> <footer> <p>this will help you avoid stepping into traps</P> </footer> </a> </article> <article> <a href="#"> <header> <hgroup> <h1>top 10 all time tips</h1> <h2>remember these tips to keep you in the game</h2> </hgroup> </header> <footer> <p>this will help you avoid stepping into traps</P> </footer> </a> </article> </article> <article> <a href="#"> <header> <hgroup> <h1>top 10 all time tips</h1> <h2>remember these tips to keep you in the game</h2> </hgroup> </header> <footer> <p>this will help you avoid stepping into traps</P> </footer> </a> </article> </article> <article> <a href="#"> <header> <hgroup> <h1>top 10 all time tips</h1> <h2>remember these tips to keep you in the game</h2> </hgroup> </header> <footer> <p>this will help you avoid stepping into traps</P> </footer> </a> </article> </article> <article> <a href="#"> <header> <hgroup> <h1>top 10 all time tips</h1> <h2>remember these tips to keep you in the game</h2> </hgroup> </header> <footer> <p>this will help you avoid stepping into traps</P> </footer> </a> </article> </article> <article> <a href="#"> <header> <hgroup> <h1>top 10 all time tips</h1> <h2>remember these tips to keep you in the game</h2> </hgroup> </header> <footer> <p>this will help you avoid stepping into traps</P> </footer> </a> </article> </article> <article> <a href="#"> <header> <hgroup> <h1>top 10 all time tips</h1> <h2>remember these tips to keep you in the game</h2> </hgroup> </header> <footer> <p>this will help you avoid stepping into traps</P> </footer> </a> </article> </article> </div> <div id="right"> <p>the side ads</p> </div> <div id="footer"> copywright guerrilla monkey boy cards. </div> </div> </body> </html>

and the css




Code:
*{ margin:0px; padding:0px; background: #100000 ; } #big_wrapper{ width:1000px; margin:0px; } #top_header{ border:1px solid red; text-align:center; float:right; color: #FFD700 ; background: #000000; margin:10px 5 5 5; width:100%; height:100px; } #top_menu{ background: #280000; color: #280000; border:1px solid red; } #top_menu li { display:inline-block; list-style:none; padding:8px; font:bold 14px tahoma; } #top_menu ul li { display:inline-block; list-style:none; padding:10px; font:bold 14px tahoma; border:1px outset #E80000; } #left{ float:left; color: #FFD700 ; background:#000000; margin:5px 15px 5px 0; border:1px solid black; width:110px; height:620px; } #left ul{ color: #FFD700 ; margin:0px; list-style-type:none; } #left ul li{ background-color:#000000 ; color: #FFD700 ; margin:5px; padding:10px; width:70px; border:3px outset #E80000; } #left ul li a{ display:block; width:75px; height:15x; text-align:center; text-decoration:none; line-height:15px; } a{ color: #ffffff; } #middle{ background: #280000; float:left; margin:10px 15px 10px 0; width:610px; height:630px; } #middle_header{ width:600px; text-align:center; background: #B8860B; border-bottom:40px solid darkred; padding:5px; margin:0 auto; margin-bottom:15px; } article { display:inline-block; width:280px; text-align:center; background: #000000 ; border:1px solid red; padding:10px; margin: 0 auto; margin-bottom:10px; width:45%; height:15%; } article footer { text-align:center; } #right{ float:right; background: #A0A0A0 ; margin:10px 15px 10px 0; width:200px; height:630px; } #footer{ background: #808080 ; color: #FFD700 ; clear:both; text-align:center; padding:15px; border-top:2px solid black; border-bottom:2px solid black; border-left:2px solid black; border-right:2px solid black; }

Last edited by J. H. Rasmussen; 12-25-2014 at 08:19 PM. Reason: Added HTML- and Code-wrappers.
 
Reply With Quote

Advertisement

Advertisement

  #2  
Old 12-30-2014, 02:36 PM
BrianJM BrianJM is offline
Junior Member
 
Join Date: 03-11-10
Posts: 24
iTrader: 0 / 0%
You'll get a better response if you put this in a jsFiddle (at the very least) or a live website.
 
Reply With Quote
  #3  
Old 01-10-2015, 12:07 PM
peppos peppos is offline
Junior Member
 
Join Date: 01-08-15
Posts: 2
iTrader: 0 / 0%
In main.css modify

height:620px;

in:

height:720px;
 
Reply With Quote
  #4  
Old 01-10-2015, 10:06 PM
F75's Avatar
F75 F75 is offline
Contributing Member
 
Join Date: 01-09-15
Posts: 85
iTrader: 0 / 0%
Quote:
Originally Posted by kickerplays View Post
I was under the impression(for some reason ) that my text wouldn't overlap but once I get to 8 middle articles they overlap into the footer area. I know im new to this but not sure why this is, anyway heres the code including css

HTML Code:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"/> <title>im so tired</title> <link rel="stylesheet" href="main.css"/> </head> <body> <div id="big_wrapper"> <header id="top_header"> <h1>Nerdy Poker=Money and Girls</h1> <h3>A Complete guide to crushing the 1-2 game</h3> </header> <div id="top_menu"> <ul> <li><a href="#"> Home</a></li> <li><a href="#"> Tells</a></li> <li><a href="#"> Charts</a></li> <li><a href="#"> Tools</a></li> <li><a href="#"> Videos</a></li> <li><a href="#"> Blog</a></li> </ul> </div> <div id="left"> <nav id="left"> <ul> <li> <a href="#">Bet Sizing</a> </li> <li><a href="#">Semi-Bluffing</a></li> <li><a href="#">Bluffing</a></li> <li><a href="#">Various Charts</a></li> <li><a href="#">Live Play Tips</a></li> <li><a href="#">SEARCH</a></LI> <li><a href="#">Products</a></li> <li><a href="#">About</a></li> <li><a href="#">Various Charts</a></li> <li><a href="#">Live Play Tips</a></li> <li><a href="#">Live Play Tips</a></li> </ul> </nav> </div> <section id="middle"> <div id="middle_header"> <article> <a href="#"> <header> <hgroup> <h1>starting hand charts</h1> <h2>what to play and when to play it</h2> </hgroup> </header> <footer> <p>your starting place of how to play poker</P> </footer> </a> </article> </div> <article> <a href="#"> <header> <hgroup> <h1>top 10 all time tips</h1> <h2>remember these tips to keep you in the game</h2> </hgroup> </header> <footer> <p>this will help you avoid stepping into traps</P> </footer> </a> </article> <article> <a href="#"> <header> <hgroup> <h1>top 10 all time tips</h1> <h2>remember these tips to keep you in the game</h2> </hgroup> </header> <footer> <p>this will help you avoid stepping into traps</P> </footer> </a> </article> <article> <a href="#"> <header> <hgroup> <h1>top 10 all time tips</h1> <h2>remember these tips to keep you in the game</h2> </hgroup> </header> <footer> <p>this will help you avoid stepping into traps</P> </footer> </a> </article> </article> <article> <a href="#"> <header> <hgroup> <h1>top 10 all time tips</h1> <h2>remember these tips to keep you in the game</h2> </hgroup> </header> <footer> <p>this will help you avoid stepping into traps</P> </footer> </a> </article> </article> <article> <a href="#"> <header> <hgroup> <h1>top 10 all time tips</h1> <h2>remember these tips to keep you in the game</h2> </hgroup> </header> <footer> <p>this will help you avoid stepping into traps</P> </footer> </a> </article> </article> <article> <a href="#"> <header> <hgroup> <h1>top 10 all time tips</h1> <h2>remember these tips to keep you in the game</h2> </hgroup> </header> <footer> <p>this will help you avoid stepping into traps</P> </footer> </a> </article> </article> <article> <a href="#"> <header> <hgroup> <h1>top 10 all time tips</h1> <h2>remember these tips to keep you in the game</h2> </hgroup> </header> <footer> <p>this will help you avoid stepping into traps</P> </footer> </a> </article> </article> <article> <a href="#"> <header> <hgroup> <h1>top 10 all time tips</h1> <h2>remember these tips to keep you in the game</h2> </hgroup> </header> <footer> <p>this will help you avoid stepping into traps</P> </footer> </a> </article> </article> </div> <div id="right"> <p>the side ads</p> </div> <div id="footer"> copywright guerrilla monkey boy cards. </div> </div> </body> </html>

and the css




Code:
*{ margin:0px; padding:0px; background: #100000 ; } #big_wrapper{ width:1000px; margin:0px; } #top_header{ border:1px solid red; text-align:center; float:right; color: #FFD700 ; background: #000000; margin:10px 5 5 5; width:100%; height:100px; } #top_menu{ background: #280000; color: #280000; border:1px solid red; } #top_menu li { display:inline-block; list-style:none; padding:8px; font:bold 14px tahoma; } #top_menu ul li { display:inline-block; list-style:none; padding:10px; font:bold 14px tahoma; border:1px outset #E80000; } #left{ float:left; color: #FFD700 ; background:#000000; margin:5px 15px 5px 0; border:1px solid black; width:110px; height:620px; } #left ul{ color: #FFD700 ; margin:0px; list-style-type:none; } #left ul li{ background-color:#000000 ; color: #FFD700 ; margin:5px; padding:10px; width:70px; border:3px outset #E80000; } #left ul li a{ display:block; width:75px; height:15x; text-align:center; text-decoration:none; line-height:15px; } a{ color: #ffffff; } #middle{ background: #280000; float:left; margin:10px 15px 10px 0; width:610px; height:630px; } #middle_header{ width:600px; text-align:center; background: #B8860B; border-bottom:40px solid darkred; padding:5px; margin:0 auto; margin-bottom:15px; } article { display:inline-block; width:280px; text-align:center; background: #000000 ; border:1px solid red; padding:10px; margin: 0 auto; margin-bottom:10px; width:45%; height:15%; } article footer { text-align:center; } #right{ float:right; background: #A0A0A0 ; margin:10px 15px 10px 0; width:200px; height:630px; } #footer{ background: #808080 ; color: #FFD700 ; clear:both; text-align:center; padding:15px; border-top:2px solid black; border-bottom:2px solid black; border-left:2px solid black; border-right:2px solid black; }
What is the url of the website with the problem you're asking? Maybe it would help if you provide the website for people to visit it to actually see what the problem is and help find a solution for ya?
 
Reply With Quote
  #5  
Old 01-12-2015, 06:37 AM
TechBuddy1 TechBuddy1 is offline
Contributing Member
 
Join Date: 11-04-14
Posts: 51
iTrader: 0 / 0%
Hi,

Use this code -
HTML Code:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"/> <title>im so tired</title> <style> *{ margin:0px; padding:0px; background: #100000 ; } #big_wrapper{ width:1000px; margin:0px; height:200px; } #top_header{ border:1px solid red; text-align:center; float:right; color: #FFD700 ; background: #000000; margin:10px 5 5 5; width:100%; height:100px; } #top_menu{ background: #280000; color: #280000; border:1px solid red; } #top_menu li { display:inline-block; list-style:none; padding:8px; font:bold 14px tahoma; } #top_menu ul li { display:inline-block; list-style:none; padding:10px; font:bold 14px tahoma; border:1px outset #E80000; } #left{ float:left; color: #FFD700 ; background:#000000; margin:5px 15px 5px 0; border:1px solid black; width:110px; height:620px; } #left ul{ color: #FFD700 ; margin:0px; list-style-type:none; } #left ul li{ background-color:#000000 ; color: #FFD700 ; margin:5px; padding:10px; width:70px; border:3px outset #E80000; } #left ul li a{ display:block; width:75px; height:15x; text-align:center; text-decoration:none; line-height:15px; } a{ color: #ffffff; } #middle{ background: #280000; float:left; margin:10px 15px 10px 0; width:610px; height:630px; } #middle_header{ width:600px; text-align:center; background: #B8860B; border-bottom:40px solid darkred; padding:5px; margin:0 auto; margin-bottom:15px; } article { display:inline-block; width:280px; text-align:center; background: #000000 ; border:1px solid red; padding:10px; margin: 0 auto; margin-bottom:10px; width:45%; height:15%; } article footer { text-align:center; } #right{ float:right; background: #A0A0A0 ; margin:10px 15px 10px 0; width:200px; height:630px; } #footer{ background: #808080 ; color: #FFD700 ; clear:both; text-align:center; padding:15px; border-top:2px solid black; border-bottom:2px solid black; border-left:2px solid black; border-right:2px solid black; } </style> </head> <body> <div id="big_wrapper"> <header id="top_header"> <h1>Nerdy Poker=Money and Girls</h1> <h3>A Complete guide to crushing the 1-2 game</h3> </header> <div id="top_menu"> <ul> <li><a href="#"> Home</a></li> <li><a href="#"> Tells</a></li> <li><a href="#"> Charts</a></li> <li><a href="#"> Tools</a></li> <li><a href="#"> Videos</a></li> <li><a href="#"> Blog</a></li> </ul> </div> <div id="left"> <nav id="left"> <ul> <li> <a href="#">Bet Sizing</a> </li> <li><a href="#">Semi-Bluffing</a></li> <li><a href="#">Bluffing</a></li> <li><a href="#">Various Charts</a></li> <li><a href="#">Live Play Tips</a></li> <li><a href="#">SEARCH</a></LI> <li><a href="#">Products</a></li> <li><a href="#">About</a></li> <li><a href="#">Various Charts</a></li> <li><a href="#">Live Play Tips</a></li> <li><a href="#">Live Play Tips</a></li> </ul> </nav> </div> <section id="middle"> <div id="middle_header"> <article> <a href="#"> <header> <hgroup> <h1>starting hand charts</h1> <h2>what to play and when to play it</h2> </hgroup> </header> <footer> <p>your starting place of how to play poker</P> </footer> </a> </article> </div> <article> <a href="#"> <header> <hgroup> <h1>top 10 all time tips</h1> <h2>remember these tips to keep you in the game</h2> </hgroup> </header> <footer> <p>this will help you avoid stepping into traps</P> </footer> </a> </article> <article> <a href="#"> <header> <hgroup> <h1>top 10 all time tips</h1> <h2>remember these tips to keep you in the game</h2> </hgroup> </header> <footer> <p>this will help you avoid stepping into traps</P> </footer> </a> </article> <article> <a href="#"> <header> <hgroup> <h1>top 10 all time tips</h1> <h2>remember these tips to keep you in the game</h2> </hgroup> </header> <footer> <p>this will help you avoid stepping into traps</P> </footer> </a> </article> </article> <article> <a href="#"> <header> <hgroup> <h1>top 10 all time tips</h1> <h2>remember these tips to keep you in the game</h2> </hgroup> </header> <footer> <p>this will help you avoid stepping into traps</P> </footer> </a> </article> </article> <article> <a href="#"> <header> <hgroup> <h1>top 10 all time tips</h1> <h2>remember these tips to keep you in the game</h2> </hgroup> </header> <footer> <p>this will help you avoid stepping into traps</P> </footer> </a> </article> </article> <article> <a href="#"> <header> <hgroup> <h1>top 10 all time tips</h1> <h2>remember these tips to keep you in the game</h2> </hgroup> </header> <footer> <p>this will help you avoid stepping into traps</P> </footer> </a> </article> </article> <article> <a href="#"> <header> <hgroup> <h1>top 10 all time tips</h1> <h2>remember these tips to keep you in the game</h2> </hgroup> </header> <footer> <p>this will help you avoid stepping into traps</P> </footer> </a> </article> </article> <article> <a href="#"> <header> <hgroup> <h1>top 10 all time tips</h1> <h2>remember these tips to keep you in the game</h2> </hgroup> </header><div style="clear:both;"></div><footer> <p>this will help you avoid stepping into traps</P> </footer> </a> </article> </article> </div> <div id="right"> <p>the side ads</p> </div> <div id="footer"> copywright guerrilla monkey boy cards. </div> </div> </body> </html>

Last edited by J. H. Rasmussen; 01-12-2015 at 09:35 AM. Reason: Added HTML-wrapper.
 
Reply With Quote
Go Back   Webmaster Forum > Web Development > Coding Forum

Reply


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Overlapping menu above the swf ? Plz help me out Bensonbravo Web Design Lobby 9 12-02-2011 05:20 AM
help with overlapping colomns pinkiepirate Coding Forum 2 03-16-2011 09:36 PM
Overlapping image links Chaky Graphic Design Forum 2 04-13-2008 05:58 PM
Image overlapping a table? tresmom Coding Forum 3 07-11-2007 07:44 PM
Help! Text overlapping txlogopros Web Design Lobby 1 11-28-2006 02:40 PM


V7N Network
Get exposure! V7N I Love Photography V7N SEO Blog V7N Directory


All times are GMT -7. The time now is 03:36 PM.
Powered by vBulletin
Copyright 2000-2014 Jelsoft Enterprises Limited.
Copyright © 2003 - 2018 VIX-WomensForum LLC