HTML - I Need Help With My Layout + Putting Content On My Page
I need help with my layout + putting content on my page + putting wordpress on my page and editing it to match someone help please?
Similar TutorialsI am failry new to html and I need some help. I have a link on a page. When it is clicked I want another page (which is basically made up of a small 2X3 table) to appear on the same page as the link. I am trying to do this without using frames as they are becoming depriciated. how can i have the actual website in a column in the midle of the page, and have a background around it? and have a rolover image change. Can anyone help me with this please? Im really new to html and I wanna make a website. >.> Anyway I want to make the website in flash because im way better at flash and I won't have to learn as much. So what I wanna do is 1. make the website in flash (just attach the file/image or something) 2. When you click on a certain thing it will link to another page on the site and there I'll have a movie/game attached there. Thanks a lot in advance All right. This may be simple for some people so hopefully I can get some help. Please have a little bit of patience because I'm not positive how to explain exactly to where people will actually understand me. I will, however, try my very best to explain the best I can. If you have any questions about what I'm asking, feel free to ask me... I'm making a hatelisting. They're not huge sites so they only require a very simple layout. Okay, easy. I have the layout set up (except the links) and I have the HTML and CSS ready (well, CSS prepared for editting). I know where I want the layout to align and such... Everything like tha is finished. http://www.lume-di-luna.net/test/index.html As you can see, it looks okay. Nothing big and fancy, something simple. ONE LITTLE DETAIL. The content of the website is just suppose to be in the black part, not the white. The white is just a border. But the only way I ever knew how to align the text was it would be the same size as the size of the background image. http://www.lume-di-luna.net/test/bg.jpg This is the background image. You can only see the black, but there is 10px of white on each side. That's the only way I have figured out so far to get the white border to work and the background as well. I want to align the content so it's only in the black, not the white. I searched everywhere and nothing will help me at all. I'm sure HTML and CSS will have to be involved to get it to work. I've searched multiple ways on google and looked around HTML/CSS help sites and nothing will help me at all. First of all, I don't know what the thing is called that blinks inside a textarea. So if you could tell me what the name of that is, that'll be great. I'll called it a cursor for now. Here's the problem. Let's say I had a simple textarea with some values already filled in. Ex: Code: <textarea name="input1" rows="15" cols="75"> <!-- Cursor should go here --> ----- Original Message ----- From: blah To: Blah Date: Blah Blah Some Random Text </textarea> So, whenever a page loads, I need the "cursor" to be automatically at the beginning of the textarea (where "<!-- Cursor should go here -->" is). How would I go about doing that either in just HTML or Javascript? Hi There, Pulling my hair out over this. For the life of me, cant make it work: http://www.cowboytuffwebsitedesign.c...cialdeals.html I've used positive padding negative margin to stretch both div's heights to match each other. But the content div, when needed to be higher than the menu div, will overflow its content past the container divs bg. As well the footer will only clear past the menu div, not the content div. HELP! PLEASE! I can copy and paste HTML right into the thread if needed. Thanks Hi there, Theres a page on my website that appears fine when offline (without google adverts) but when online it messes up the page layout. Would appreciate any help, not sure if the CSS file is causing the problem or the html/css webpage. http://www.paid2review.co.uk/links.html Thanks for any help. Matt I am reworking my webpage http://www.webficsdesign.com/start.html I can not get my tables to lineup correctly. Here is the coding I am using. Please tell me what I am doing wrong and I will love you forever! <tr> <td width="147px" height="143px" background="images/08.gif" valign="top" style="background-repeat:no-repeat;background-position:left top;padding-top:90px;padding-bottom:90px;"> <div style="padding-right:15px;padding-left:25px;">NEWS NEWS NEWS<br> NEWS NEWS NEWS<BR> NEWS NEWS NEWS<BR> NEWS NEWS NEWS<BR> NEWS NEWS NEWS<BR> NEWS NEWS NEWS<BR> NEWS NEWS NEWS<BR></div> </td> <td width="505px" height="143px" background="images/09.gif" valign="top" style="background-repeat:no-repeat;background-position:left top;padding-top:90px;padding-bottom:90px;"> <div style="padding-right:15px;padding-left:15px;">INTRO INTRO INTRO<BR> INTRO INTRO INTRO<BR> INTRO INTRO INTRO<BR> INTRO INTRO INTRO<BR> INTRO INTRO INTRO<BR> INTRO INTRO INTRO<BR> INTRO INTRO INTRO<BR></div> </td> <td width="148px" height="143px" background="images/10.gif" valign="top" style="background-repeat:no-repeat;background-position:left top;padding-top:10px;padding-bottom:10px;"> <div style="padding-right:15px;padding-left:15px;">SPECIALS SPECIALS<BR> SPECIALS SPECIALS<BR> SPECIALS SPECIALS<BR> SPECIALS SPECIALS<BR> SPECIALS SPECIALS<BR> SPECIALS SPECIALS<BR> SPECIALS SPECIALS<BR></div> </td> </tr> any help on what I am doing wrong would be great. I have just started to teach myself how to do framing like this, but I cannot figure out how to get everything to lineup correctly. Hey guys I asked a similar question before about the best way to go with page layouts and the only response I got was to go with one that will properly change with resolutions and browsers, etc.. I am learning and want to develop practical and sound habits from early on. If any of you would be willing to throw me out some good pointers, etc.. That would be great. I'm looking to do a layout with a horizontal header section and below this 2 or 3 columns of varying widths. This is rough but hopefully you get the idea. I'm trying to make a layout that takes up 100% of the page, but isn't fixed. So it moves whenever the browser is resized. However I can't get the code to work for the footer and the two inner divs. Is how I want it to look like. The white and light gray and the two content boxes. The black are the header and footer which need to be at the absolute top and bottom, respectively. The dark gray are both static images. The bottom dark gray one needs to be positioned at the same place as the footer background. The red are both content boxes that need to be centered in the middle of the light gray div and the white div. And lastly the blue is an image that needs to stay static right next to the light gray div. Anyone know how I would go about coding it? Or if anyone is willing to code me a simple block template I'd really appreciate it. Thanks =] I'm quite new to the world of HTML and actually know very little about this stuff. I'm trying to do a web page for my friends company but I'm stuck. I have made my body and "menu" parts to expand according to the text I enter but it screws my layout up Maybe some one could take a look and say what I have done wrong. For me it looks like body and menus are dependent from each other, if I enter text to menu1, body and menu2 also rescale themselves... Here is the link to the problem, you can see what I want by clicking on the link "Picture of the design I want" In software programming languages you can apply layout to a software program and i'm trying to apply the same philosiphy to web sites. I've been using just <div> tags with settings of its attributes (width, height, floats & margins etc..) to get what a layout i want and recently just came across that you can use tables to contstruct a layout aswell. which idea is better and which is better design that allows future extensibility? cheers Hi, I'm in the middle of developing a infosite to work alongside our retail site. The infosite is going to maintain the basic layout of our current site (www.muddypuddles.com) with Header, footer, left menus and right buttons, which move with the size of the page. However the primary content in the middle of the page is going to become articles, etc. On our front page I'm going with a single horizantal box around 250px in height and I want the size of the box to expand depending on the resoultion of the page. Below that I am placing 2 vertical boxes side by side which I also want to expand depending on resolution. I think this is most likely CSS related, but can someone please advise me on how to float these boxes into position first of all, and then what is required to make these boxes expand with the screen size. Thanks in advance Rather than re-write this page and the css, I'd just like to fix what I'm working with, please. This page is not lining up correctly, as you can see from the attached image. All the text content should be to the right of the (left) red column and the red column is supposed to be the width of the gray bar above it. (The header is a separate piece of this page) Can you help me get the left red column to the correct width and all the text content to the right of the red column? thanks. Here's my code: Code: <table valign='top' align="right" cellpadding="0" width="100%" height="80%"> <table style="background-color:#ffffff; font-family:Arial, Helvetica, sans-serif; width:100% height:80%> <table width="770" border="0" cellpadding="0" cellspacing="0" id="maintable" align="center"> <link href="custom.css" rel="stylesheet" type="text/css"> <tr><td id="menu" align="left"> <img src="images/bullet.gif" alt="" width="10" height="10"><a href="index.php"><font color="#DDCEA2"><font face="Arial" size="2">Home</a></font><br> <img src="images/bullet.gif" alt="" width="10" height="10"><A href='index.php?command=signup_page'><font color="DDCEA2"><font face="Arial" size="2">Sign Up</font></A><br /> <img src="images/bullet.gif" alt="" width="10" height="10"><a href="faq.html"><font color="DDCEA2"><font face="Arial" size="2">FAQ</a><br> <img src="images/bullet.gif" alt="" width="10" height="10"><a href="legal.html"><font color="DDCEA2"><font face="Arial" size="2">Terms of Use</a><br><br><br><br><br><br><br><br> </tr> <form method="POST" action="index.php"> <input class='field' type='hidden' name='command' value='account'> <input class='field' type='hidden' name='param' value='renew'> <input class='field' type='hidden' name='account_id' value='[account_id]'> <td colspan='2' class='pageTitle'><div class='hLine'><font face="Arial" color="#EE7600" size="3"> Choose a Transaction</font></div></tr></td> <tr><td class='fieldLabel' width="30%"><font face="Arial" color=#000000" size="3" Style="padding: 5px;"> <font face="Arial" color="#000000" size="2"> Transaction Type:</font></td> <td align="left"><font face="Arial" color="#EE7600" size="2">[account_type_panel]</font></tr> <tr> <tr><td> </td></tr> <tr><td align="left"> </td> <td align="left"><input name="submit" type='submit' class='button' value='Next' /> </td> </tr> </form> <tr height='30%' ><td colspan="2"><div class='hLine'> </div></td></tr> </table> I was wondering if there is a way to display a section of another webpage, such as a table, through a separate site. Obviously I could just copy the code from one of my pages to the other, but I would prefer if it would automatically take the code from one page and display on another? I hope I am making a bit of sense. Nick C. I need to find all erors in this page, it is for a school teacher and it needs to work properly, the title and stuff will be posted here, all and any corenctions are welcome : ) Code: <!-- start border and main background --> <HTML> <div style="border-left:120px solid #000000;border-right:120px solid #000000;with:100%;height:100%;"> <title>Mr. Rodgers Website</title> <BODY background="BG.jpg" style="margin:0px;"> <!-- end border and main background --> <!-- Static BG image --> <head> <style type="text/css"> body { background-image: url('BG.jpg'); background-repeat: no-repeat; background-attachment: fixed } </style> </head> <!-- done static images --> <!-- nav bar and head --> <style type="text/css"> h2 {background-color: black} </style> <h2 align="center"><font size="4" face="times" color="white"> <font size="6">Welcome To Mr Rodgers Website</Font> <BR> | <A HREF="index.html">Home</A> | <A HREF="Projects.html">Projects</A> | <A HREF="skdl.html"> schedule</A> | <A HREF="Extracredit.html">Extra Credit</A> | <A HREF="wksts.html">Worksheets </A> | <A HREF="links.html">Links</A><BR></H2><BR> <BR> <!-- end navbar and head --> I recently updated my homepage to include more text, and moved some of the image buttons around. I noticed however, that if I view the site and increase the size of the font (control+mouse wheel) it also increases the amount of spacing between the buttons, enough to move one of the images to the next row. Is there any way to stop these images from moving? The site is he http://www.bacchanalpromotions.com The current code is written like this, I think the margin tags are what gets increased when the font size goes up, but I don't know for sure... I tested on Firefox 3.6, at 1400x900 resolution. Code: <a href="booking.php?page=thss"><img height="100px" width="123px" src="performers_images/home-circus.png" onmouseover="this.src='performers_images/home-circus2.png'" onmouseout="this.src='performers_images/home-circus.png'" alt="" /></a> <a style="margin-left:13px" href="booking.php?page=fire"><img height="100px" width="123px" src="performers_images/home-fire.png" onmouseover="this.src='performers_images/home-fire2.png'" onmouseout="this.src='performers_images/home-fire.png'" alt="" /></a> <a style="margin-left:13px" href="booking.php?page=sideshow"><img height="100px" width="123px" src="performers_images/home-sideshow.png" onmouseover="this.src='performers_images/home-sideshow2.png'" onmouseout="this.src='performers_images/home-sideshow.png'"alt="" /></a> <a style="margin-left:13px" href="booking.php?page=stilts"><img height="100px" width="123px" src="performers_images/home-stilts.png" onmouseover="this.src='performers_images/home-stilts2.png'" onmouseout="this.src='performers_images/home-stilts.png'" alt="" /></a> got a very basic page as this stuff is super new to me, not sure where to put or ask about this ... when the page is resized or when the bookmarks tab comes on in firefox browser my graphics all move around , didn't use to do this but i'm not sure. happens when u resize the actual page. everything kinda lines up to fit in the new space --- i really dont know -->loaded page up temporarily http://www.legendofthegknight.com/test/index.html While I was searching for an HTML forum to join, I came across a statement in another forum that said using tables to layout a web page is incorrect -- even stupid. Is this true? I have been reading a book entitled "HTML, XHTML, and CSS Bible" which devotes an entire chapter (chapter 11) to "Page Layout with Tables" and continually refers to page layout within Tables and Nested Tables. This is the method that I have been using to create my first web pages. Do I need to re-think this and change the way I layout my pages? Please enlighten me... Thanks, JFB |