HTML - Help Needed In Coding
I am new to HTML/CSS.
I was trying to make a simple page layout. Just for practice! Checkout the code! The problem I am facing that the "sidebar" is appearing. Please help me! -----------------------------------HTML file------------------------------------ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 //EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>First CSS Tutorial</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link href="myCSS.css" rel="stylesheet" type="text/css"> </head> <body> <div id="wrapper"> <div id="header"> <br/><br/><center>This is header</center> </div> <div id="mainContent"> <br/> <h1>This is heading one</h1> <p>This is paragraph one. It contains the materials used for testing the heading 1.</p> <a href=2.html><p class="forNavigation"> Go to the next page>>></p></a> <h1>This is heading two</h1> <p>This is paragraph two. It contains the materials used for testing the heading 1.</p> </div> <div id="sidebar"> </div> <div id="footer"> </div> </div> </body> </html> ---------------------------------------CSS file--------------------------------- body{ background-color:green; } #wrapper { width: 786px; height: 1024px; margin: 0 auto ; background-color:white; } #header { width:786px; height:300px; background-color:pink; } #mainContent { width:595px; height:650px; background-color:red; } #footer { width:786px; height:74px; background-color:yellow; } #sidebar { width:186px; height:650px; color: orange; float:left; } h1 { color:white; margin-left:8px; } p { padding-left:10px; color:white; } .forNavigation{ color:blue; } Similar TutorialsHi, How to find out the height of a paragraph, if the paragraph is selected from database and displayed on the fly. The objective is to dislay footer below this paragraph. Thanks Bijoy Hello My name is Beth. I was given the difficult task of creating a website for a company I work very close with and I'm running into all sorts of coding problems. I know these can't be that insane but I've been spinning my wheels on these issues for 2 weeks now and I'm almost out of time. I know it's not much but I will paypal $50 to the person that solves my problem (that is if its not against board policy) i just NEED help so bad! Here is where my demo page is for the new website. It's one page, no links to anything else... URL: http://www.srh.com/taxgirl/index.htm The page is supposed to look kinda link this... The problems a 1.) The drop down navigation has issues displaying over the flash animation sometimes flashing above it but it seems like it naturally wants to be below it. 2.) When you hoover over the navigation the buttons disappear, this might be due to the same problem as #1 but I don't know... 3.) the two columns need to fill down as either one has content. what i mean by this is that if the column on the right has 800pxs of content and the left only has 300px it should still extend 100% with the growth of the right column. Any advice anyone has on this kind of layout I would appreciate massively.. but honestly, I'm so out of time I'd absolutely be ecstatic over a solution. Like I said, I have $50 to offer for help. Please look into your hearts and minds to help! Thank you so so much. ~beth. No longer need assistance. what am i doing wrong? Quote: <!--DON'T DARE TO REMOVE THIS--> <!--This layout was made by Prodigy with a huge help of </b><a href="http://st.pcaworld.net/"><b>Levus</b></a>.</div> /*these are the main properties of your layout */ body { background-color: #DD0000; background-image: color: #000000; } /*these are the properties of a table cell */ td { border: 0px; vertical-align:top; } /*these are the properties of a link */ A:link { color: #000000; text-decoration: none; font-weight: ; cursor: ; } A:visited { color:#000000; text-decoration: none; font-weight: ; cursor:; } A:hover { color:#000000; text-decoration: underline; font-weight:; cursor:; } /*these are the properties of the banner */ #banner { background-color: #DD0000; text-align:center; height:198px; width:100%x; border:1px solid #000000; } /*these are the properties of the content */ #content { float:left; background-color: #DD0000; width: 70%; height: 100%; color:#000000; } /*these are the properties of the right menu */ #rightmenu { float:right; background-color: #DD0000; width: 15%; height: 100%; color:#000000; border: 0px solid #000000; border-top: 0px solid #000000; } /*these are the properties of the left menu */ #leftmenu { float:left; background-color: #DD0000; width: 15%; height: 100%; color:#000000; border: 0px solid #000000; border-top: 0px solid #000000; } /*these are the properties of a category on a menu */ .catagory { background-color: #DD0000; color: #000000; font-weight: bold; border: 1px solid #000000; } /*these are the properties of a heading (page title) */ .heading { background-color: #FF0000; color: #000000; width: 90%; font-weight: bold; border: 1px solid #000000; } /*these are the properties of the heading on the disclaimer */ .dheading { background-color: #FF0000; color: #000000; width: 71%; font-weight: bold; border-top: 0px solid #000000; border: 1px solid #000000; } /*these are the properties of the disclaimer */ #disclaimer { float:right; background-color: #FF0000; color: #000000; width: 100%; border-top: 1px solid #000000; border: 0px solid #000000; } </style> </head> <body> <!--only edit under here--> <!--this is the banner--> <center><div id="banner"> <center> <img src="http://i4.tinypic.com/63n130g.png"> </center> </div></center> <!--the banner end here--> <!--left menu starts here--> <div id="leftmenu"> <div class="catagory"><center>Layout Changer</center></div> <div class="catagory"><center>Pokemon</center></div> <a href="pokedex.html"><center>Pokedex</center></a> <a href="POTW.html"><center>POTW</center></a> <a href="FanArt.html"><center>Fan Art</center></a> <div class="catagory"><center>Other</CeNtEr></div> <a href="sigs.html"><center>Free Sigs</center></a> <a href="layouts.html"><center>Free Layouts</center></a> <a href="Games.html"><center>Games</center></a> <a href="emulation.html"><center>Emulation</center></a> <a href="affys.html"><center>Affiliation</center></a> <div class="catagory"><center>Current POTW</center></div> <center><b>#248 Tyranitar</b></center> <center><IMG SRC="http://www.pokemonelite2000.com/sprites/dpmfa/dpmfa248.png" ALT="NPOTW"></center> <center><a href="POTW.html"><b>Past POTW</b></a></center> <!--left menu ends here--> </div> <!--page name goes here--> <div id="content"><center><div class="heading">Secret Pokemon Training Other Known As SPT</div></center> <!--page name stops here--> <!--content goes here--><center><b>News</b></center><br><br> <center>5/12/07: Aeroburn, he said hes gonna help but after hes done with some work of his own, so im happy about that. And maybe just maybe we'll be hosted by a network, not saying any spoilers..</center><br><br> <center>5/4/07: Well, i talked to Aeroburn but it didn't help me i guess i got to do it the easy but complicated way. Site will be released soon.</center><br><br> <center>4/28/07: Yea, its saturday. I still havent talked to Aeroburn! But i put a page hit, and uhh...idk</center><br><br> <center>4/25/07: Since im new to html, i need to do somehting (without this i cant do anything on the liks) so im waiting for Aeroburn to go online XD =P</center><br><br> <center>4/24/07: Yea, i havn't been posting on this, idk y though, i didnt give the link to anyone except Havok. lol, but i havnt been posting cuz ive been trying to figure out the misteries against the layout changer, and it's worth it i got it with the help of Aeroburn from PCA/PokeNebula: If u have errors with any layouts just refresh the page, it should be good =D<br><br></center> <center>4/19/07: We're installing New Stuff. Including Layout Changer, Pokedex, POTW, Fan Art, Free Sig/Layouts, Games, Affiliation,PUA: Info, Trades, Battling, Show Off, PCA: Info, Trades, Battling, Show Off, PC: Info, Trades, Battling, Show Off.<br><br></center> <!--content stops here--> </div> <!--right menu starts here--> </div><div id="rightmenu"> <div class="catagory"><center>Affiliates</center></div> <center><a href="affys.html"><b>Apply Here</b></a></center> <div class="catagory"><center>ShoutBox</center></div> <!-- BEGIN CBOX - http://www.cbox.ws --> <center><div align="center" id="cboxdiv"> <iframe frameborder="0" width="160" height="305" src="http://www4.cbox.ws/box/?boxid=3166240&boxtag=5868&sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain" style="border:#FFFFFF 1px solid;" id="cboxmain"></iframe><br/> <iframe frameborder="0" width="160" height="75" src="http://www4.cbox.ws/box/?boxid=3166240&boxtag=5868&sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform" style="border:#FFFFFF 1px solid;border-top:0px" id="cboxform"></iframe> </div></center> <!-- END CBOX --> <div class="catagory"><center>SPT's Hits</center></div><br> <!-- Start Bravenet.com Service Code --> <center><script language="JavaScript" type="text/javascript" src="http://pub38.bravenet.com/counter/code.php?id=401896&usernum=3260284116&cpv=2"> </script></center> <!-- END DO NOT MODIFY --> <!--right menu ends here--> </div> <!--disclaimer starts here--> <div id="disclaimer"><center><div class="dheading">Copyright Notice:</div> <center><b>Do NOT steal! "Layout Made By Prodigy with a huge help of </b><a href="http://st.pcaworld.net/"><b>Levus</b></a>.</center></div> <!--disclaimer ends here--> <!-- --><script type="text/javascript" src="/i.js"></script></body> </html> At this website: http://sungbc.org/missions.php I liked how they made it so that the different people could be clicked on and a new mini-page would load on the page. Does anybody know how to do that My site PLEASE READ ENTIRE THING! Some stuff I'm saying may be hard to express in typing, so use my link above to get a better picture. I need some coding help for website........Right now, if I want to post an article one of my journalists submitted, I have to go in and edit each page individually, the article doesn't just show up.....How do I make it so when someone submits an article, it gets posted on the front page, in the news and events section, and in my archives? For the front page, I want my two latest articles up there with a photo and a small description with a "more info" link that brings you to the actual article. For the news and events page, I want the latest article on the left hand side with a photo, a description, a title and the link, with the 2 previous articles on the right with all of that but no photo. For the archives page, I just want all the articles for that month in order, with the latest being on top, with a title, a description, and a link. Hello, I am trying to create a page with a link that opens on a new page. This link will have an iframe to display another website. What I then want to do is have a pop over appear that will take me back to the original page. Is this possible and if so how would I code this. Oh and another thing. The first page will redirect itself after 10 secs. So this is what I want: Page A has a link that will open Page B Page A will redirect to another page after ten secs Page B will display a pop over when you click the pop over it will take you back to page A instead of opening a new page or changing to the link within page B. I hope this makes sense. So I all I need to know is how to make the pop over go back to page A. Thanks Hello all! Cool place here and I hope with lots of experts. I have a n html template for a mod on my site and I cannot for the life of me figure out how to get it how I want. Basically what I want to do is remove the leftside images and move the titles on the right into its spot. I will post an image of what I am talkiking about and the code. Remove what is circled in red and put the tiles on the right into its spot. HTML Code: <div class="quick_links_elink" style="background-color: white;"> <div class="lcont_top"> <div id="lcont_img__unit_id__" style="left: 0px; position: left;"> <a href="__category_url__" class="main_l"> <img style="top:10px; max-height:16px;" alt="" src="__category_cover_image__" width="50px"/> </a> </div> <div id="js_control_section0__unit_id__" style="padding-left: 5px;"> <a href="__category_url__" class="main_l"> __category_name__ </a> </div> <div class="js_control_section" id="js_control_section__unit_id__" title="Show / Hide" bximg="lcont_img__unit_id__" bxchild="lcont_other__unit_id__" style="background-position: 0px -17px;"></div> </div> <div class="quick_links_elink_lcont" id="lcont_other__unit_id__" style="display: none; top:40px; background-color: white;"> <a href="__category_url__" class="main_l"> <img alt="" src="__category_cover_image__" style="top:50px; width:80px; max-height:40px;"/> </a> <div class="lcont_other" > __sub_categories_list__ <div class="clear_both"></div> </div> </div> <script type="text/javascript"> var oShowHideController__unit_id__ = new ShowHideController(); $("#js_control_section__unit_id__").click( function() { oShowHideController__unit_id__.ShowHideToggle(this) } ); /*$("#js_control_section0__unit_id__").click( function() { oShowHideController__unit_id__.ShowHideToggle("#js_control_section__unit_id__") } );*/ </script> </div> THANKS in advance! Hey Everyone, I need to set up some kind of html form which provides people with a registration ID, or number of sorts. The application of this kind of system would be so that if I had people registering for a conference, they could receive a committee assignment immediately. I'd appreciate any responses helping me. Thanks Guys (and ladies!) Bromo8824 im having some trouble with putting stuff in the middle of my site because whenever i put something in the middle it moves my left nav bar down if you go here u can see what im talking about right now im using kompozer to make the site http://www.freewebs.com/zxgamerreviews/test22.html Hello Everyone: I created a page in HTML and added javascript. I want it to have a search function.I have created a form which is basically a textfield and a "submit button".The "submit button" is meant to display web pages in a new window when I type in particular keywords into the textfield next to the "submit button" on the website.I have written the codes below so far and it is not working.I would appreciate it if you guyz can help me out.The webpage is not online just incase you guyz need to know.Thanks very much <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script language="Javascript" type="text/javascript"> var keywords = "transistor Google Microsoft ipod " function gothere(placetogo) { if( keyWords.search(placetogo) == -1) { alert(placetogo+"is not an accepted keyword" ) } else { document.location = "C:\Documents and Settings\Teeboi\My Documents\Memorial University\WebPages" + placetogo + ".html" } } </script> <title>DESIGN CONCEPT</title> </head> <body bgcolor="#B0B0B0"> <form name="myForm"> <input type="textfield" name="searchtext" value="transistor" /> <input type="button" name="thebutton" value="Submit" onclick="javascript:gothere(document.myForm.searchtext.value)" /> </form> </body> </html> I work for a hospital and we are moving into a new building. The employees want me to put a simple countdown "ticker" on our intranet. The move is in a few months. Any one know code to create a date countdown? Hey guys, i am very very new to html and i designed and coded www.e-smartonline.com for myself, i know the way i made the html was not good, i have trouble with the links cause everything is pushing them cause of the way i coded it.. lol. I was wondering if someone can fix my booboo? fix the links left and right so that it works well. thanks a lot guys! Hello there, everyone! I'm new to the forums and also not the best one at HTML, but as I'd need some HTML for a project in school since it would be useful in what we're working on I thought I would ask you guys over here for some help, since what I've tested doesn't really worth out great and it's quite in a hurry right now. So, lets go! What I'd like to do is that in the first page, lets call it "The site where you choose music", there's gonna be a list of say 10 different songs, where you can choose to click in the box at the songs you would like to hear, could look something like this (just an example-picture): http://pici.se/pictures/PMYqqclCT.jpg What I'd like to do now is that the songs that I've chosen should follow when I click the "PLAY"-button to a new window, where the songs I've chosen will be listed. E.g. if I choose Song 1, Song 3, Song 6 and Song 8 in the list these should be the only ones to follow when clicking "PLAY", while the others doesn't. I know these might not be the hardest things to do, but I've had some problems due to the pressure in the project. Also, is there anything special I will need to do with the "PLAY"-button (besides from having the link to the site where the songs etc. will be placed) in order to be able to get the songs with me? Haven't worked with this too much. So, is there anyone out there with some spare time who would mind helping me out? Would be really appreciated. Anything from just pure small bits of help, to a full set of codes that would work out for me, depending on the difficulty/time it would steal from you guys. /Grelien ^_^ If there's anything unclear with my question please say so, tried to be as explaining as possible without making it too long (to prevent "TLDR") or too short. I could also post my current code if that would help out, but felt I'd wait with that if it's not necessary as it would make the post quite big. Hello everyone, newbie to this forum humbly seeking help. I'll got a javascript working to display an alt image on hover and at the same time an image box appearing at another place on the page (describing the link). After preparing the linked page I discovered that the link doesn't work. When I add "a href" within the code which already only has a "href" in the javascript the complex image cutting becomes apparent with a pixel or so space between each of the cuts. I had alt images working nicely, now I find something is very much a miss. Here is the code which delivers the two alt images well but doesn't link to the target page. "<tr><td><div id="NavigationImage3" href="about_us.html" onMouseOver="F_roll('NavigationImage3',1)" onMouseOut="F_roll('NavigationImage3',0)"><img id="NavigationImage3" name="NavigationImage3" src="images/b2-3a.jpg" onLoad="F_loadRollover(this,'images/b2-3b.jpg')" alt="Sample Text" onMouseOver="swap(3, 'imgDefault')" onMouseOut="swap(0,'imgDefault')"></a></td></tr>" Be very grateful if someone can help. Cheers, Mal from Cessnock (Aus) Hi can someone who knows html please help me out? I have my webpage, http://users.igl.net/ash/index.html It has a javascript on it. I am trying to embed my homepage on my league site. so I write the code as follows <embed height="200" name="homepage" hidden="never" width="200" src="http://users.igl.net/ash/index.html" allowscriptaccess="true" /></embed> My homepage loads fine, but the javascript on doesnt load. Can someone suggest a better coding? Thank you. im making a layout for a band's myspace. on www.myspace.com/sunofmithra www.myspace.com/symptomofreality and www.myspace.com/iwrestledabearonce you will notice that there is a picture ABOVE the search bar (not on symptom of reality's but its good enough.) how do i get a background like that?? also, how do i put links in there, like iwrestledabearonce did with a video, and symptom of reality did with the send message, add to friends, etc. Thanks! P.S. Bare with me im not that good at html, i made an account here so i could LEARN about it more, and i also did not know where this would go really. http://www.freewebs.com/madoka/Cloudlayout.jpg I want to align everything to the right and the links to be left of the gray box(main content). Here's what happened when I tried to code it....=( http://www.geocities.com/sakura11002002/ How do I begin coding a web design PSD? Any decent tutorials? I know that one could use Adobe Fireworks and slice up the images, but I don't have Fireworks. |