JustRob

I don't need a drag & drop editor in the literal sense of the word, I just want to have an admin panel where I can submit new stuff without having to open up the HTML files every time. Think I better start learning PHP

I think I've been staring at this for too long and I'm not seeing the solution... You can see at the top of the content area the text is getting cut off. That's because the horizontal navigation bar is slightly overlapping it. The content area is a <div> called #main, and the margin-top on it is 95px, which is the height of the banner image above the horizontal navigation menu. However, if I increase that margin, not only the content area goes down, but also the navigation bar. For some reason it pushes that bar down even though it's not inside the #main div. If you rightclick the content area and inspect you can change the values to see what I mean. Edit: Nevermind, I got it finally. Delete / lock plz

But isn't that basically the drag & drop "select your theme" sh*t that you used to do on "create your own site" things for kids? Like freewebs?

Hey guys, I'm building a website to practice HTML, CSS and javascript, and down the road I wanna learn PHP as well. So on my website I eventually want to make it so people can register an account and log in, and submit stuff to the website. I also wanna make it so that I can submit stuff to the website that regular users can't (like news updates). For the latter part, years ago when I was making my first site I just edited the HTML whenever I wanted to add stuff. But most websites these days use a CMS so they can log into their website and have a frontend to submit stuff from. The thing is, I have my website laid out already, and I was wondering if it's possible or doable to later add a CMS to your website when you have your HTML pages including CSS and javascripts already. In the past I have dabbled with some CMS'es like WordPress and Drupal, but I always found difficulty making my website within the confines of those systems. But what is the best way to go about this? Choose a CMS and build your website within that, or make your website and add a CMS later (if that's possible)? I'm still kind of a noob when it comes to this, and I really haven't kept up with the latest webdesign trends, so I would like some advice on this.

Hi, So on my content page I have a couple of different sections in the same area, but the problem is the text of the top part goes through the heading of the bottom part. I've set a margin to position the bottom section, but it doesn't change dynamically. I want it to position itself depending on how much text is in the area above, and push it down if need be. This is the problem: Relevant HTML: <section id="content"> <h1>Today on Gaming World</h1><br> <section id="highlights"> <a href="http://gamingw.net/games/632"><img class="thumb" src="images/game-632.jpg" width="80" height="65"> <h1>Coastercraft Gold</h1></a><img class="icon" src="images/maker-rmxp.gif"> <p>Enter the World of CoasterCraft. Builds rides, hire staff and do all sorts of other Theme-park managemently-things in this fun and refreshing game.</p> <br><br> <a href="http://gamingw.net/games/631"><img class="thumb" src="images/game-631.jpg" width="80" height="65"> <h1>Cliche</h1></a><img class="icon" src="images/maker-gamemaker.gif"> <p>Fight monsters explore dungeons and find valuable treasure in this dungeon raider game. Reminiscent of the classic arcade game Gauntlet.</p> <br><br> <a href="http://gamingw.net/games/630"><img class="thumb" src="images/game-630.jpg" width="80" height="65"> <h1>High Voltage</h1></a><img class="icon" src="images/maker-gamemaker.gif"> <p>A neat Breakout clone with quite a few gameplay tweaks. Definitely worth checking out.</p> <br><br> <a href="http://gamingw.net/games/629"><img class="thumb" src="images/game-629.jpg" width="80" height="65"> <h1>Final Fantasy: Chaos Shadows</h1></a><img class="icon" src="images/maker-rm2k3.gif"> <p>A thousand years ago, the magical kingdom of Heldanna was mysteriously destroyed, most of its history remains unknown. Now, in the present, an archaeological group has found one of Heldanna's greatest citadels.</p> </section> <section id="news"> <h1>News</h1> <a href=""><img class="avatar" src="images/noavatar.gif" width="33" height="33">Review update #126,251,754</a><br> <p>You should know the drill by now.</p> <br><br> <a href=""><img class="avatar" src="images/bumblebee_man.gif" width="33" height="33">I'm alive.</a><br> <p>And angry.</p> <br><br> <a href=""><img class="avatar" src="images/noavatar.gif" width="33" height="33">Well now, what do we have here?</a><br> <p>I do believe that it's a review update.....</p> <br><br> <a href=""><img class="avatar" src="images/bumblebee_man.gif" width="33" height="33">I blame society.</a><br> <p>Games! Games? Games?</p> <br><br> <a href=""><img class="avatar" src="images/bumblebee_man.gif" width="33" height="33">Fade may have lied.</a><br> <p>Have I?</p> <br><br> <a href=""><img class="avatar" src="images/bartavvy.gif" width="33" height="33">THE GAME DROUGHT IS OVER!</a><br> <p>Click here for lots of exciting new games!</p> <br><br> </section> <br> <section id="gameupdates"> <h1>Game Updates and Articles</h1> </section> </section> CSS: #content { margin-left: 130px; width: 706px; height: 700px; padding: 5px; font-size: 100%; text-align: left; background-color: #eee; vertical-align: top; } #content h1 { padding: 5px; font-weight: bold; background-color: #6272A0; font-size: 13px; margin-bottom: 2px; color: #FFFFFF; margin: 0px; } #highlights { width: 55%; float: left; } #highlights p { margin-left: 90px; margin-right: 30px; } #highlights img.thumb { margin-left: 5px; float: left; border: 1px #00366C solid; } #highlights img.icon { margin-left: 5px; float: left; } #highlights h1 { display: inline; color: #00366C; font-weight: bold; font-size: 10px; background: none; } #highlights a { color: #00366C; } #news { float: right; width: 45%; } #news h1 { font-weight: bold; background-color: #828CAA; font-size: 13px; color: #FFFFFF; margin-bottom: 5px; } #news a { color: #00366C; margin-top: 3px; padding-left: 5px; font-weight: bold; } #news p { padding-left: 5px; display: inline; } #news .avatar { vertical-align: top; margin: 0; float: left; border: 1px #00366C solid; } #gameupdates { margin-top: 40%; } #gameupdates h1 { background-color: #828CAA; }

I've been trying to avoid using divs as much as possible, as I read it's bad practice to use a lot of them. But I guess it's alright to divide the sidebar up in into its different sections, and that will probably fix most of my problems. By the way, vertical-align is what I was looking for. Setting that to middle finally centered the links relative to the icons.

Hello, I've finished up the basic layout of this website, but there are some empty spaces I can't seem to get rid of. Here's a screenshot of the website now: Okay, so the problem is with the sidebar on the right. First, under the header "Daily News", the links don't line up well with the icons. I don't know what's pushing it down. I don't have padding from the top for the links there. Ideally I want them to be centered with the icons. Then, again in the sidebar under the header "Affiliates", the buttons are offset 3 pixels. I know what's causing this, it's the padding I have for my sidebar in general, 3 pixels. But now how do I remove that padding from the affiliates buttons, while still keeping it in the rest of the sidebar? I tried wrapping the affiliates links in a div id and setting the padding of that to 0px in the CSS, but that didn't work. If anyone could give me a hand with this that'd be great. HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon"> <link href="stylesheet/stylesheet.css" rel="stylesheet"> <meta name="description" content="Graphical Resources, Articles, Tutorials, Sections dedicated to Game Makers - Learn how to create games!"> <meta name="keywords" content="Gaming, World, RPG, Maker, 2000, RM2K, RPGM2K,Character, Sets,Animations,Tile,Chipset,Battle,Background,Sprite,maps,Games,game,maker,resources,liverpg,live,rpg,panorama,parallex,review,previews,creation,article,links,art,music,klik,play,click,create,games,factory,multimedia,fusion,vitalize"> <title> Gaming World // Home </title> </head> <body> <div id="container"> <header></header> <nav id="topbar"> <a href="index.html">Games</a> <a href="http://gamingw.net/mini/">Daily News</a> <a href="http://gamingw.net/dev/">Dev Logs</a> <a href="http://gamingw.net/mailbag/">Mailbag</a> </nav> <nav id="leftbar"> <p>Gaming World</p> <a href="index.html">Home</a> <a href="http://gamingw.net/feedback/" target="_top">Feedback</a> <a href="http://www.gamingw.net/forums/">Forums</a> <a href="http://gamingw.net/search/">Search</a> <a href="http://www.whahay-irc.net/">IRC Chat</a> <p>Developers</p> <a href="http://gamingw.net/resource/">Resources</a> <a href="http://gamingw.net/tutorials/">Tutorials</a> <a href="articles/index.php">Articles</a> <a href="http://gamingw.net/music/">Music</a> <a href="http://gamingw.net/utilities/">Utilities</a> <a href="http://gamingw.net/developers/">Developer Directory</a> <p>Articles</p> <a href="http://gamingw.net/mini/">Daily News</a> <a href="http://gamingw.net/news/">News</a> <a href="http://gamingw.net/features/">Features</a> <a href="http://gamingw.net/reviews/">Reviews</a> <a href="http://gamingw.net/previews/">Previews</a> <a href="http://gamingw.net/interviews/">Interviews</a> <a href="http://gamingw.net/mailbag/">Mail bag</a> <p>Games</p> <a href="http://gamingw.net/games/">Game Index</a> <a href="http://gamingw.net/games/action/">Action</a> <a href="http://gamingw.net/games/adventure/">Adventure</a> <a href="http://gamingw.net/games/arcade/">Arcade/Classic</a> <a href="http://gamingw.net/games/puzzle/">Puzzle</a> <a href="http://gamingw.net/games/platformer/">Platformer</a> <a href="http://gamingw.net/games/rpg/">RPG</a> <a href="http://gamingw.net/games/strategy/">Strategy</a> <a href="http://gamingw.net/games/all">All Games</a> <p>Makers</p> <a href="http://gamingw.net/makers/ags">Adventure Game</a> <a href="http://gamingw.net/makers/klik">Clickteam</a> <a href="http://gamingw.net/makers/gamemaker">Game Maker</a> <a href="http://gamingw.net/makers/ika">ika</a> <a href="http://gamingw.net/makers/sphere">Sphere</a> <a href="http://gamingw.net/makers/toolkit">RPG Toolkit</a> <a href="http://gamingw.net/makers/rm2k">RPGMaker 2000</a> <a href="http://gamingw.net/makers/rm2k3">RPGMaker 2003</a> <a href="http://gamingw.net/makers/verge">Verge</a> <p>Community</p> <a href="http://gamingw.net/staff/">Staff</a> <a href="http://gamingw.net/contact/">Contact</a> <a href="http://gamingw.net/register/">Register</a> </nav> <aside id="rightbar"> <h1>Login</h1> <form action="http://gamingw.net/members/" method="post" name="LOGIN" onsubmit="return ValidateForm()"> <input name="act" value="Login" type="hidden"> <h2>Username</h2> <input value="" maxlength="64" name="username" type="text"><br> <h2>Password</h2> <input name="password" type="password"><br><br> <input name="submit" value="Log in" type="submit"> </form><br> <h1>Daily News</h1> <a href="index.html"><img src="images/maker-other.gif">Porcupine Tree's Deadwing</a><br> <a href="http://www.gamingw.net/mini/#188"><img src="images/maker-funny.gif">Release something!</a><br> <a href="http://www.gamingw.net/mini/#187"><img src="images/maker-funny.gif">GW's Anime/Manga Tournament</a><br> <a href="http://www.gamingw.net/mini/#186"><img src="images/maker-rmxp.gif">New RMXP News Icon</a><br> <a href="http://www.gamingw.net/mini/#185"><img src="images/maker-funny.gif">The 4th Annual Misao Awards!</a><br> <a href="http://www.gamingw.net/mini/#184"><img src="images/maker-other.gif">Chain Story 2 Sign-Ups</a><br> <br> <h1>Poll</h1> <form method="post" action="http://gamingw.net/forms/?l=poll"> <h2>Pick a number between one and three.</h2> <p> <input name="poll" value="1" type="radio">One<br> <input name="poll" value="2" type="radio">Two<br> <input name="poll" value="3" type="radio">Three<br> </p> <br> <input name="vote" value="Vote" type="submit"> </form> <br> <h1>GW Radio</h1> <p>The radio is currently down.</p> <br> <h1>Affiliates</h1> <a href="stgames.net"><img src="images/affiliatebutton1.gif"></a> <a href="stgames.net"><img src="images/affiliatebutton1.gif"></a> </aside> <section id="content"> <h1 id="MasterHead">Today on Gaming World</h1> Content goes here </section> <footer> <a href="http://gamingw.net/register/">Join Gaming World</a> <a href="http://gamingw.net/stats/">Website Statistics</a> <a href="http://gamingw.net/about/">About Gaming World</a> <a href="http://bart.gamingw.net/">Backend</a> <a href="http://gamingw.net/contact/">Contact us</a> <br> Gaming World © 2004 - Coding and Design by <a href="http://bart.gamingw.net/">Bartek Gniado</a> - Read our <a href="http://gamingw.net/privacy.htm">Privacy Statement</a> and <a href="http://gamingw.net/terms.htm">Terms of Service</a> </footer> </div> </body> </html> CSS body { background-color: #04599F; font-size: 10px; font-family: Verdana,Arial, Helvetica, Sans-serif; margin: 0px; } header { display: block; height: 95px; background: url(../images/gwlogo_spring.gif) no-repeat top left; background-color: #556B99; } img#thumb { border: 1px solid #00366C; } input,textarea { border: 1px solid #000000; } /* TOP BAR */ nav#topbar { height: 20px; border-width: 1px medium; border-style: solid none; border-color: #404A68; text-align: left; } nav#topbar a:link, nav#topbar a:visited, nav#topbar a:hover { float: left; padding-left: 17px; margin: 0px; background: none repeat scroll 0% 0% transparent; font-weight: bold; font-size: 10px; line-height: 20px; text-decoration: none; white-space: nowrap; z-index: 1000; color: #FFFFFF; } /* MENU */ nav#leftbar { float: left; width: 130px; } nav#leftbar p { text-align: left; font-size: 11px; font-weight: bold; color: #FFFFFF; padding: 3px; margin: 0px; background-color: #404A68; } nav#leftbar a { text-align: center; display: block; width: 124px; font-weight: normal; padding: 1px; border-left: 2px solid #404A68; border-right: 2px solid #404A68; border-bottom: 1px solid #404A68; background-color: #556B99; color: #cff; text-decoration: none; } nav#leftbar a:hover { font-weight: normal; border-left: 2px solid #404A68; border-right: 2px solid #404A68; background-color: #5F76A5; color: #fff; text-decoration: none; } /* SIDEBAR */ aside#rightbar { float: right; width: 178px; background-color: #556B99; } aside#rightbar h1 { text-align: left; font-size: 11px; font-weight: bold; color: #FFFFFF; padding: 3px; margin: 0px; background-color: #404A68; display: block; } aside#rightbar h2 { text-align: left; font-size: 11px; font-weight: bold; color: #FFFFFF; padding: 5px; margin: 0px; } aside#rightbar p { text-align: left; font-size: 11px; color: #FFFFFF; padding: 3px; padding-left: 10px; margin: 0px; } aside#rightbar img { padding: 3px; } aside#rightbar a:link, aside#rightbar a:visited { font-size: 9px; color: #FFF; } aside#rightbar form { text-align: center; } /* CONTENT */ #container { margin: 0px; padding: 0px; width: 1024px; background-color: #556B99; } #content { margin-left: 130px; width: 706px; height: 700px; padding: 5px; font-size: 100%; text-align: left; background-color: #eee; vertical-align: top; } #MasterHead { padding: 3px; font-weight: bold; border-width: 1px; border-style: solid; border-color: #6272A0; background-color: #6272A0; font-size: 13px; margin-bottom: 2px; color: #fff; margin: 0px; } /* FOOTER */ footer { width: 1024px; padding-top: 6px; padding-bottom: 10px; font-size: 10px; background-color: #404A68; text-align: center; color: #fff; } footer a:link, footer a:visited { color: #fff; }

Oh, wait. I get what you mean. So I changed the max-width property of the container div to width, and I removed the position property altogether. Now it still works. But it looks like the same result to me. But if it's bad to use position: absolute, I'll go with this.

The max-width is only there because the content area is empty for now, so if I leave it out it will be a very narrow space. Once I've added all the stuff I want in there I can probably remove that.

Nevermind, I finally figured it out. I set the container div which contains the left bar, content, and right bar to position: absolute. Now everything stays in place. Thanks for all your help!

Alright, thanks for clearing that up. I think I have it working now, but if I resize my window, the sidebar on the right moves with the window. Is there any way to make it stay where it is? I tried position absolute, but then it jumps back to the left even though I have float: right.

Hello, Thank you, that worked. However, now I have the same problem, but with a different element. I want to have sidebar to the right of my content area, with a login form and a basic news feed. Instead of appearing to the right, it once again appears below everything else. I tried floating it left and floating it right, but neither of them did what I want. This is my HTML now: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon"> <link href="stylesheet/stylesheet.css" rel="stylesheet"> <link href="rightbar.css" rel="stylesheet"> <meta name="description" content="Graphical Resources, Articles, Tutorials, Sections dedicated to Game Makers - Learn how to create games!"> <meta name="keywords" content="Gaming, World, RPG, Maker, 2000, RM2K, RPGM2K,Character, Sets,Animations,Tile,Chipset,Battle,Background,Sprite,maps,Games,game,maker,resources,liverpg,live,rpg,panorama,parallex,review,previews,creation,article,links,art,music,klik,play,click,create,games,factory,multimedia,fusion,vitalize"> <title> Gaming World // Home </title> </head> <body> <div id="container"> <header></header> <nav id="topbar"> <a href="http://gamingw.net/games/">Games</a> <a href="http://gamingw.net/mini/">Daily News</a> <a href="http://gamingw.net/dev/">Dev Logs</a> <a href="http://gamingw.net/mailbag/">Mailbag</a> </nav> <nav id="leftbar"> <p>Gaming World</p> <a href="index.html">Home</a> <a href="http://gamingw.net/feedback/" target="_top">Feedback</a> <a href="http://www.gamingw.net/forums/">Forums</a> <a href="http://gamingw.net/search/">Search</a> <a href="http://www.whahay-irc.net/">IRC Chat</a> <p>Developers</p> <a href="http://gamingw.net/resource/">Resources</a> <a href="http://gamingw.net/tutorials/">Tutorials</a> <a href="articles/index.php">Articles</a> <a href="http://gamingw.net/music/">Music</a> <a href="http://gamingw.net/utilities/">Utilities</a> <a href="http://gamingw.net/developers/">Developer Directory</a> <p>Articles</p> <a href="http://gamingw.net/mini/">Daily News</a> <a href="http://gamingw.net/news/">News</a> <a href="http://gamingw.net/features/">Features</a> <a href="http://gamingw.net/reviews/">Reviews</a> <a href="http://gamingw.net/previews/">Previews</a> <a href="http://gamingw.net/interviews/">Interviews</a> <a href="http://gamingw.net/mailbag/">Mail bag</a> <p>Games</p> <a href="http://gamingw.net/games/">Game Index</a> <a href="http://gamingw.net/games/action/">Action</a> <a href="http://gamingw.net/games/adventure/">Adventure</a> <a href="http://gamingw.net/games/arcade/">Arcade/Classic</a> <a href="http://gamingw.net/games/puzzle/">Puzzle</a> <a href="http://gamingw.net/games/platformer/">Platformer</a> <a href="http://gamingw.net/games/rpg/">RPG</a> <a href="http://gamingw.net/games/strategy/">Strategy</a> <a href="http://gamingw.net/games/all">All Games</a> <p>Makers</p> <a href="http://gamingw.net/makers/ags">Adventure Game</a> <a href="http://gamingw.net/makers/klik">Clickteam</a> <a href="http://gamingw.net/makers/gamemaker">Game Maker</a> <a href="http://gamingw.net/makers/ika">ika</a> <a href="http://gamingw.net/makers/sphere">Sphere</a> <a href="http://gamingw.net/makers/toolkit">RPG Toolkit</a> <a href="http://gamingw.net/makers/rm2k">RPGMaker 2000</a> <a href="http://gamingw.net/makers/rm2k3">RPGMaker 2003</a> <a href="http://gamingw.net/makers/verge">Verge</a> <p>Community</p> <a href="http://gamingw.net/staff/">Staff</a> <a href="http://gamingw.net/contact/">Contact</a> <a href="http://gamingw.net/register/">Register</a> </nav> <section id="content"> <h1 id="MasterHead">Today on Gaming World</h1> Content goes here </section> <aside id="rightbar"> <p id="rightbarhead">Login</p> <form action="http://gamingw.net/members/" method="post" name="LOGIN" onsubmit="return ValidateForm()"> <input name="act" value="Login" type="hidden"> <p id="login">Username</p> <input value="" maxlength="64" name="username" type="text"><br> <p id="login">Password<p> <input name="password" type="password"><br> <input name="submit" value="Log in" type="submit"> </form> </aside> <footer> <a href="http://gamingw.net/register/">Join Gaming World</a> <a href="http://gamingw.net/stats/">Website Statistics</a> <a href="http://gamingw.net/about/">About Gaming World</a> <a href="http://bart.gamingw.net/">Backend</a> <a href="http://gamingw.net/contact/">Contact us</a> <br> Gaming World © 2004 - Coding and Design by <a href="http://bart.gamingw.net/">Bartek Gniado</a> - Read our <a href="http://gamingw.net/privacy.htm">Privacy Statement</a> and <a href="http://gamingw.net/terms.htm">Terms of Service</a> </footer> </div> </body> </html> And the CSS: nav#leftbar { float: left; width: 130px; } nav#leftbar p { text-align:left; font-size:11px; font-weight:bold; color:#FFFFFF; padding:3px; background-color: #404A68; } nav#leftbar a { text-align: center; display: block; width: 124px; font-weight: normal; padding: 1px; border-left: 2px solid #404A68; border-right: 2px solid #404A68; border-bottom: 1px solid #404A68; background-color: #556B99; color: #cff; text-decoration: none; } nav#leftbar a:hover { font-weight: normal; border-left: 2px solid #404A68; border-right: 2px solid #404A68; background-color: #5F76A5; color: #fff; text-decoration: none; } aside#rightbar { width: 180px; } #rightbarhead { text-align: left; font-size: 11px; font-weight :bold; color: #FFFFFF; padding: 3px; background-color: #404A68; } #login { text-align: center; font-size: 11px; font-weight: bold; color: #FFFFFF; padding: 3px; } #container { position: relative; margin: 0px; padding: 0px; max-width: 1024px; background-color: #556B99; } #content { margin-left: 130px; width: 716px; height: 700px; padding: 5px; font-size: 100%; text-align: left; background-color: #eee; vertical-align: top; } So this is what it looks like now: And this is what I want it to look like (as far as the sidebar to the right is concerned): Positioning stuff with CSS still really puzzles me. I can never seem to figure out how to get my elements where I want them.

Hello, For this website I have both a horizontal and a vertical navigation bar. The horizontal navigation bar is at the top of the website, under the header. Then the vertical navigation bar goes below that, to the left. Both are defined by <nav> elements. So I want my content area below that horizontal navigation bar and to the right of the vertical one. I defined my content area with a <section> element. Problem is, it appears below the vertical menu, leaving just a gaping hope to the right. I don't know why it's doing that. What I have so far: HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon"> <link href="stylesheet/stylesheet.css" rel="stylesheet"> <title> Gaming World // Home </title> </head> <body> <div id="container"> <header></header> <nav id="topbar"> <a href="http://gamingw.net/games/">Games</a> <a href="http://gamingw.net/mini/">Daily News</a> <a href="http://gamingw.net/dev/">Dev Logs</a> <a href="http://gamingw.net/mailbag/">Mailbag</a> </nav> <nav id="leftbar"> <p>Gaming World</p> <a href="index.html">Home</a> <a href="http://gamingw.net/feedback/" target="_top">Feedback</a> <a href="http://www.gamingw.net/forums/">Forums</a> <a href="http://gamingw.net/search/">Search</a> <a href="http://www.whahay-irc.net/">IRC Chat</a> <p>Developers</p> <a href="http://gamingw.net/resource/">Resources</a> <a href="http://gamingw.net/tutorials/">Tutorials</a> <a href="articles/index.php">Articles</a> <a href="http://gamingw.net/music/">Music</a> <a href="http://gamingw.net/utilities/">Utilities</a> <a href="http://gamingw.net/developers/">Developer Directory</a> <p>Articles</p> <a href="http://gamingw.net/mini/">Daily News</a> <a href="http://gamingw.net/news/">News</a> <a href="http://gamingw.net/features/">Features</a> <a href="http://gamingw.net/reviews/">Reviews</a> <a href="http://gamingw.net/previews/">Previews</a> <a href="http://gamingw.net/interviews/">Interviews</a> <a href="http://gamingw.net/mailbag/">Mail bag</a> <p>Games</p> <a href="http://gamingw.net/games/">Game Index</a> <a href="http://gamingw.net/games/action/">Action</a> <a href="http://gamingw.net/games/adventure/">Adventure</a> <a href="http://gamingw.net/games/arcade/">Arcade/Classic</a> <a href="http://gamingw.net/games/puzzle/">Puzzle</a> <a href="http://gamingw.net/games/platformer/">Platformer</a> <a href="http://gamingw.net/games/rpg/">RPG</a> <a href="http://gamingw.net/games/strategy/">Strategy</a> <a href="http://gamingw.net/games/all">All Games</a> <p>Makers</p> <a href="http://gamingw.net/makers/ags">Adventure Game</a> <a href="http://gamingw.net/makers/klik">Clickteam</a> <a href="http://gamingw.net/makers/gamemaker">Game Maker</a> <a href="http://gamingw.net/makers/ika">ika</a> <a href="http://gamingw.net/makers/sphere">Sphere</a> <a href="http://gamingw.net/makers/toolkit">RPG Toolkit</a> <a href="http://gamingw.net/makers/rm2k">RPGMaker 2000</a> <a href="http://gamingw.net/makers/rm2k3">RPGMaker 2003</a> <a href="http://gamingw.net/makers/verge">Verge</a> <p>Community</p> <a href="http://gamingw.net/staff/">Staff</a> <a href="http://gamingw.net/contact/">Contact</a> <a href="http://gamingw.net/register/">Register</a> </nav> <section id="content"> <h1 id="MasterHead">Today on Gaming World</h1> Content goes here </section> </div> <footer> <a href="http://gamingw.net/register/">Join Gaming World</a> <a href="http://gamingw.net/stats/">Website Statistics</a> <a href="http://gamingw.net/about/">About Gaming World</a> <a href="http://bart.gamingw.net/">Backend</a> <a href="http://gamingw.net/contact/">Contact us</a> <br> Gaming World © 2004 - Coding and Design by <a href="http://bart.gamingw.net/">Bartek Gniado</a> - Read our <a href="http://gamingw.net/privacy.htm">Privacy Statement</a> and <a href="http://gamingw.net/terms.htm">Terms of Service</a> </footer> </body> </html> Relevant CSS body { background-color: #04599F; font-size: 10px; font-family: Verdana,Arial, Helvetica, Sans-serif; margin: 0px; } header { display: block; height: 95px; background: url(../images/gwlogo_spring.gif) no-repeat top left; background-color: #556B99; } nav#topbar { height: 20px; border-width: 1px medium; border-style: solid none; border-color: #404a68; text-align: left; } nav#topbar a:link, nav#topbar a:visited, nav#topbar a:hover { float: left; padding-left: 17px; margin: 0px; background: none repeat scroll 0% 0% transparent; font-weight: bold; font-size: 10px; line-height: 20px; text-decoration: none; white-space: nowrap; z-index: 1000; color: #FFF; } nav#leftbar { width: 130px; } nav#leftbar p { text-align:left; font-size:11px; font-weight:bold; color:#FFFFFF; padding:3px; background-color: #404A68; } nav#leftbar a { text-align: center; display: block; width: 124px; font-weight: normal; padding: 1px; border-left: 2px solid #404A68; border-right: 2px solid #404A68; border-bottom: 1px solid #404A68; background-color: #556B99; color: #cff; text-decoration: none; } nav#leftbar a:hover { font-weight: normal; border-left: 2px solid #404A68; border-right: 2px solid #404A68; background-color: #5F76A5; color: #fff; text-decoration: none; } #container { position: relative; margin: 0px; padding: 0px; max-width: 1024px; background-color: #556B99; } #content { min-width: 300px; padding: 5px; font-size: 100%; text-align: left; background-color: #eee; vertical-align: top; } #MasterHead { padding: 3px; font-weight: bold; border-width:1px; border-style:solid; border-color:#6272A0; background-color:#6272A0; font-size:13px; margin-bottom: 2px; color:#fff; margin: 0px; } footer { padding-top: 6px; padding-bottom: 10px; font-size: 10px; background-color: #404A68; text-align: center; color: #fff; } footer a:link, footer a:visited { color: #fff; } The result:

Oh my god I'm stupid. Thanks.

So I have defined a style for regular links on my website, and then I have defined a style for links inside the <nav> element... But the links inside the <nav> element still have the color of the regular link style. Does anyone know what's wrong? Here are the styles for my links and my links inside the <nav>: nav a { float: left; padding: 0px 8px; margin: 0px; background: none repeat scroll 0% 0% transparent; font-weight: bold; font-size: 10px; line-height: 20px; text-decoration: none; white-space: nowrap; z-index: 1000; color: #FFF; } a:link { color: #00366C; text-decoration:underline; } a:visited { color: #00366C; text-decoration:underline; } a:hover { color: #00366C; text-decoration:underline; }

I wanted to make a basic example website to use while following the HTML tutorial, so I started out with a background color and a header block of 200px high and 800px wide. I put some text in the header which I wanted to center horizontally and vertically. Horizontally is easy enough, but when I googled how to do it vertically I only found complicated answers. Then I thought maybe I'd position the text elsewhere, like in the bottom left of the header. Turns out that's even more complicated. Why is this such a pain? Why can't it be as simple as one line of CSS?

Oh I named it something else, re-named it now and it's working. Just one more question, do you know how you can make the text input window non-resizable? It screws up my layout if it's expanded too much.

I copied and pasted this in an empty HTML page, but why isn't it working? <?phpfunction spamcheck($field) { //filter_var() sanitizes the e-mail //address using FILTER_SANITIZE_EMAIL $field=filter_var($field, FILTER_SANITIZE_EMAIL); //filter_var() validates the e-mail //address using FILTER_VALIDATE_EMAIL if(filter_var($field, FILTER_VALIDATE_EMAIL)) { return TRUE; } else { return FALSE; } }if (isset($_REQUEST['email'])) {//if "email" is filled out, proceed //check if the email address is invalid $mailcheck = spamcheck($_REQUEST['email']); if ($mailcheck==FALSE) { echo "Invalid input"; } else {//send email $email = $_REQUEST['email'] ; $subject = $_REQUEST['subject'] ; $message = $_REQUEST['message'] ; mail("someone@example.com", "Subject: $subject", $message, "From: $email" ); echo "Thank you for using our mail form"; } }else {//if "email" is not filled out, display the form echo "<form method='post' action='mailform.php'> Email: <input name='email' type='text'><br> Subject: <input name='subject' type='text'><br> Message:<br> <textarea name='message' rows='15' cols='40'> </textarea><br> <input type='submit'> </form>"; }?>

Is it difficult?

Hello, On my website I have a feedback page with an e-mail form. For the action property of the <form> tag I've put "mailto:<myemail>@gmail.com". I read that's how you do that. However, if I click the submit button then, it just opens my e-mail application and pastes some code in there consisting of the text (for example if I wrote "Hello there" it says Hello+there). But what I want it to do is immediately send an e-mail to me with all the information from the <form>, and possibly without ever showing my e-mail address. Can this be done with HTML only? My code so far is: <form method='post' action="mailto:myemail@gmail.com" enctype="multipart/form-data" name="EmailTestForm"> <b>Type of Feedback</b> <br /> <select name='type' size='1'> <option>Site Suggestion</option> <option>Site Comment</option> <option>Error Report</option> </select> <br /><br /> <b>Your feedback</b> <br /> <textarea name='feedback' rows='4' cols='50'></textarea> <br /><br /> <b>From</b> - If you would like a reply, leave your email here <br /> <input type="text" name="from" size="60"> <br /><Br /> <input type='submit' name='submit' class='button' value='Submit'></form>

I just found out about that. Holy ###### I can't believe I managed to put my menubar in a separate file that's used by all pages. Never again will I have to go through all my pages and edit my stuff. Thank you for saving me oceans of time. Although, about those absolute directories, it doesn't seem to work for the PHP. For example, if I put <?php include '/rightbar.inc' ?> in a page that's not in the root directory, it doesn't work, I still have to do <?php include '../rightbar.inc' ?>. But I don't really care about that, I only have to put them there once anyways. I was just curious.

But won't that interfere with link paths? I mean, in my case, I have my website root folder, where the index.html (now index.php) is. Then in that root folder I have a folder named articles, and in that folder, I have the index.html for my articles page. And then there's the navigation bar that's on every page. The home and article page links are in there too. But in the index.php of the homepage, the path to the homepage is just "index.php". On the articles page, since it's in a sub-folder, it's "../index.php". But with that .inc file, you can only put the links down once, right? So won't that be a problem if the link is different for several pages?

I managed to strip the CSS of everything except what's needed for the bar, I'll try out the PHP tomorrow. Just wondering, does that PHP also work for navigation menu's and links to images or other pages?

I have one here: http://testpage.gamingw.org/ Don't mind the images not working, I didn't include them. And in case you want to see the original website with the bar integrated: http://www.gamingw.org/

In order to test it out, I put my news bar in a new html file and linked it up with my stylesheet (without removing all the other stuff yet), and did a preview in Safari. But the result is as I said, most of the styling is gone.