HTML - Noob Help With Text Alignement Please!!
hi all!
heres my site www.yourdesign.org and the css www.yourdesign.org/style.css i am trying to get the text in the content box aligned to the left, but as it is in a div, if i put "position:left", the div box obviously goes to the left. so how to i keep the div box in the right place but also move the text to the left? thanks, noob Similar TutorialsHi Am here to look for some help about a problem I can't seem to "overcome" in the layout of my website. I put the background in bright pink so the problem kinda "jumps" to the eye. It is available here : http://www.guitarbattle.fr/gb_test.html or you can also copy and paste this code in an HTML document and see how it behaves (this is a full copy of the source code of that page linked above) : HTML Code: <HTML> <HEAD> <TITLE>Guitar Battle</TITLE> </HEAD> <body bgcolor=ff00ff> <br><br> <center> <table CELLSPACING="0" CELLPADDINg="0" BORDER="0"> <tr> <TD colspan="5"> <img src="http://www.guitarbattle.fr/interface_haut.jpg"> </TD> </tr> <tr> <TD rowspan="2"> <img src="http://www.guitarbattle.fr/interface_gauche.jpg"> </TD> <TD> <img src="http://www.guitarbattle.fr/interface_situ.jpg"> </TD> <TD> <img src="http://www.guitarbattle.fr/interface_prin.jpg"> </TD> <TD rowspan="2"> <img src="http://www.guitarbattle.fr/interface_video.jpg"> </TD> <TD rowspan="2"> <img src="http://www.guitarbattle.fr/interface_droite.jpg"> </TD> </tr> <tr> <TD colspan="2"> <img src="http://www.guitarbattle.fr/interface_part.jpg"> </TD> </tr> <tr> <TD colspan="5"> <img src="http://www.guitarbattle.fr/interface_bas.jpg"> </TD> </tr> </table> </center> </HTML> I hope someone can tell me what mistake I did that makes the various parts not well aligned and loosing 1 to 3 pixels here and there. Thanks a lot ! Hey! I'm new. Like the forums! I have an odd question. I have a profile on another website. There's a section called 'About Me' and I can fill it with information about myself (it supports html). But the problem is that there is a 5000 character limit and I well exceeded that. Is there a website that would allow me to type my profile information and then give me some html code and wherever i would paste the code i would get my profile information? Thanks! hi all, i have just written a book and am putting it online. i have some groovy buttons but want them to change when hovered over and also depress or change when clicked. can one of you experts give me the code for this pretty please. we could take it that: A.jpg = normal button B.jpg = when hovered (mouse over i think in your expert world) C.jpg = when clicked also i would like to know where and how the code looks to 'download XY.PDF' please help us on planet noobian, we are at a loss. I'm pretty new at creating websites. This is officially my first "REAL" website. I've tried to set up a kind of "league" for Halo 3 players from Kentucky. There are a couple of things I want to do with this site. 1. Make it possible for members to sign into the site. 2. Have some kind of program that will track stats from games that are played between the teams (I'm hoping for some kind of program that I can manipulate offline, then upload to the site which will automatically update scores/ranks/etc. I realize that this may not be possible. Don't judge me too harshly... I am a noob after all...) 3. A professional "feel" to the site. I would have the page professionally designed, but the people that do that in my area make horrible looking web pages. I would have it designed by someone on the web, but usually people ask for money that is far outside of my budget. The work that has been done so far has been done by me during any spare time I have away from my job. If you want to take a look then by all means go to http://www.ekhlonline.com . Any kind of help that you could give me would be greatly appreciated. Thanks in advance. Bobby Akers aaaaaaaaaaaaaaaaaaaaaaaaaa Ok I know how to create simple html web sites but I want to make my links appear in the following format like in many pages out there - http://www.digitalplayers.org/index....roducts_id=103 instead of showing the actual page like - http://www.digitalplayers.org/main.html I know it's a stupid question and I'm almost sure it's got something to do with php? can you point me to some sort of tutorial for this? okay, so i'm editing my blog and i want to add my own picture to appear as the wallpaper. the blog doesn't have the option to upload your own picture so i have to modify the html. since i'm a noob at html, i looked up some tutorials, but i didn't quite understand it. could someone please help me? so, i copied all of my html code from the blog he http://pastebay.com/103487 so, could anyone tell me where do i need to paste the pic's url to get a wallpaper. tnx very much! ok so i wanna put font and pics in different areas of the page. Like what if i wanted to put it between left and center so align wouldnt work. The only way i know is using the whole   but then my code is absolutly cluddered with that. I checked out code for some other sites like video game ones. I oculdnt understand it lol but i didnt see mass abouts of non breaking spaces. Please help Hello all!! Well I'm new to the HTML thing and I just started my first page. I have a few specific questions that i'll list below. I'll end with the source code for everyone to see how the design works and feel free to let me know if something is wrong. I'm open to all comments, positive or negative, but I'd like everyone to keep in mind that this is my first site so be nice.. I'm shy and I have a fragile ego... lol... Desired Appearance View Larger 1.) The spacers between the buttons match up perfectly and the beveled look is preserved. 2.) The excess space continues to the bottom of the page. 3.) A list of links also appear at the bottom of the page. I have the links already created but I'm not sure how to force the text to the bottom. Browser Appearance View Larger 1.) The top and left side of the table seems to have a margin of 10px. How do I get rid of this or am I, by using a table, causing it to do this? 2.) I created a table inside a table to provide correct alignment, however, a single pixel still remains for each of the table column borders. If you look closely you can see how this ruins the look of the design for the section. 3.) I'd like for the bottom row of the table to align with the bottom of the page. I may use either a scrolling section in the text area or leave it as a full page but I'd like the bottom row on the bottom. Source Code!! Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Nova Computer Solutions | Computer Repair | Upgrades | New and Refurbished Parts </title> <style type="text/css"> body { background-color: #000000; background-image: url('images/GradBG.jpg'); background-position:top center; background-repeat: repeat-y; background-attachment:fixed; } #buttonlogo a { display:block; width:180px; height:120px; font: bold 24px/1 sans-serif; color:#999999; background: url("images/borders/ButtonLogo.jpg") 0 0 no-repeat; text-decoration: none; } #buttonlogo a:hover { background-position: -180px 0; } #buttonlogo a:active { background-position: -360px 0; } #buttonhome a { display:block; width:180px; height:40px; font: bold 24px/1 sans-serif; color:#999999; background: url("images/borders/ButtonHome.gif") 0 0 no-repeat; text-decoration: none; } #buttonhome a:hover { background-position: -180px 0; } #buttonhome a:active { background-position: -360px 0; } #buttonprices a { display:block; width:180px; height:40px; font: bold 24px/1 sans-serif; color:#999999; background: url("images/borders/ButtonPrices.gif") 0 0 no-repeat; text-decoration: none; } #buttonprices a:hover { background-position: -180px 0; } #buttonprices a:active { background-position: -360px 0; } #buttonmap a { display:block; width:180px; height:40px; font: bold 24px/1 sans-serif; color:#999999; background: url("images/borders/ButtonMap.gif") 0 0 no-repeat; text-decoration: none; } #buttonmap a:hover { background-position: -180px 0; } #buttonmap a:active { background-position: -360px 0; } #buttonhours a { display:block; width:180px; height:40px; font: bold 24px/1 sans-serif; color:#999999; background: url("images/borders/ButtonHours.gif") 0 0 no-repeat; text-decoration: none; } #buttonhours a:hover { background-position: -180px 0; } #buttonhours a:active { background-position: -360px 0; } #buttonsupport a { display:block; width:180px; height:40px; font: bold 24px/1 sans-serif; color:#999999; background: url("images/borders/ButtonSupport.gif") 0 0 no-repeat; text-decoration: none; } #buttonsupport a:hover { background-position: -180px 0; } #buttonsupport a:active { background-position: -360px 0; } #buttontips a { display:block; width:180px; height:40px; font: bold 24px/1 sans-serif; color:#999999; background: url("images/borders/ButtonTips.gif") 0 0 no-repeat; text-decoration: none; } #buttontips a:hover { background-position: -180px 0; } #buttontips a:active { background-position: -360px 0; } #buttondownloads a { display:block; width:180px; height:40px; font: bold 24px/1 sans-serif; color:#999999; background: url("images/borders/ButtonDownloads.gif") 0 0 no-repeat; text-decoration: none; } #buttondownloads a:hover { background-position: -180px 0; } #buttondownloads a:active { background-position: -360px 0; } </style> </head> <body> <table border="0" align="center" valign="0" cellpadding="0" cellspacing="0" background-color="transparent" > <tr> <td><img src="images/borders/01-01.gif" width="10" height="10" /></td> <td><img src="images/borders/01-02.jpg" width="180" height="10" /></td> <td><img src="images/borders/01-03.jpg" width="20" height="10" /></td> <td><img src="images/borders/01-04.jpg" width="560" height="10" /></td> <td><img src="images/borders/01-05.gif" width="10" height="10" /></td> </tr> <tr height="120"> <td><img src="images/borders/02-01.jpg" width="10" height="120" /></td> <td> <Div id="buttonlogo"> <a href="Home.html" ><span class="style7"></span></a> </Div> </td> <td><img src="images/borders/02-03.jpg" width="20" height="120" /></td> <td><img src="Images/StoreFrontBanner.jpg" alt="Nova Computer Solutions store front."/></td> <td><img src="images/borders/02-05.jpg" width="10" height="120" /></td> </tr> <tr> <td><img src="images/borders/03-01.jpg" width="10" height="20" /></td> <td><img src="images/borders/03-02.jpg" width="180" height="20" /></td> <td><img src="images/borders/03-03.jpg" width="20" height="20" /></td> <td><img src="images/borders/03-04.jpg" width="560" height="20" /></td> <td><img src="images/borders/03-05.jpg" width="10" height="20" /></td> </tr> <tr width="440" height="440"> <td><img src="images/borders/04-01.jpg" width="10" height="440" /></td> <td height="440"><table width="180" height="440" border="0" cellspacing="0" cellpadding="0" valign="top" background-color="transparent" > <tr> <td width="180" height="40" > <div id="buttonhome" height="40"> <a href="home.html"></a> </div> </td> </tr> <tr> <td><img src="images/borders/Butspacer.jpg" width="180" height="20" /></td> </tr> <tr> <td width="180" height="40" > <div id="buttonprices" height="40"> <a href="Prices.html"></a> </div> </td> </tr> <td><img src="images/borders/ButSpacer.jpg" width="180" height="20" /></td> </tr> <td width="180" height="40" > <div id="buttonhours" height="40"> <a href="Hours.html"></a> </div> </td> <tr> <td><img src="images/borders/ButSpacer.jpg" width="180" height="20" /></td> </tr> <tr> <td width="180" height="40" > <div id="buttonmap" height="40"> <a href="Map.html"></a> </div> </td> </tr> <tr> <td><img src="images/borders/ButSpacer.jpg" width="180" height="20" /></td> </tr> <tr> <td width="180" height="40" > <div id="buttonsupport" height="40"> <a href="Support.html"></a> </div> </td> </tr> <tr> <td><img src="images/borders/ButSpacer.jpg" width="180" height="20" /></td> </tr> <tr> <td width="180" height="40" > <div id="buttontips" height="40"> <a href="Tips.html"></a> </div> </tr> <tr> <td><img src="images/borders/ButSpacer.jpg" width="180" height="20" /></td> </tr> <tr> <td width="180" height="40" > <div id="buttondownloads" height="40"> <a href="Downloads.html"></a> </div> </tr> <tr> <td><img src="images/borders/ButSpacer.jpg" width="180" height="20" /></td> </tr> <tr> <td width="180"><center><font color="#999999" size="-1">site by Anonymiter</font></center></td> </tr> </table> </td> <td><img src="images/borders/04-03.jpg" width="20" height="440" /></td> <td> Insert page text here. </td> <td><img src="images/borders/04-05.jpg" width="11" height="440" /></td> </tr> <tr valign="bottum"> <td><img src="images/borders/08-01.gif" width="10" valign="bottum" /></td> <td><img src="images/borders/08-02.jpg" width="180" valign="bottum" /></td> <td><img src="images/borders/08-03.jpg" width="20" valign="bottum" /></td> <td><img src="images/borders/08-04.jpg" width="560" valign="bottum" /></td> <td><img src="images/borders/08-05.gif" width="10" valign="bottum" /></td> </tr> </table> </div> </body> </html> I am trying to run HTML code from my Mac. i have it coded in textedit, and when I try to open in Safari or Chrome, I see the actual code itself.. Instead of the content is suposed to display. Thank you in advance for your help First I want to say that this forum is great and has been alot of help. I also want to thank bsxiong for his help already. If I could send you a beer electronically, I sincerely would. I had two problems initially, and one has been fixed very easily. Thank you. However, the solution to the other still eludes me. I don't have the page on the domain yet, and can't until it's finished. I uploaded the link to geocities so that you can see the page. I didn't include the style sheet, but hopefully this gives the general layout of the page. http://www.geocities.com/thecyberrev/newly.html On the page, there is a pic to the left below the top banner. Below the pic is the bold text, "Home". Below that text is a thin divider line and more text that reads, "Building organizations that build lives.". Basically all I am trying to do is move the text, Home to the left of the pic and enlarge it so as to act as a title for the page. (This would below the blue header banner in the large white blank area) Everything I seem to do either puts the text just below or just above the pic. What am I doing wrong? I think it's something very simple but it's eluding me. Please excuse my ignorance. Any advise would be greatly appreciated. Okay well the way i have done my website is quite simple i made the site in photoshop and the sliced it up and used dreamweaver to do the whole html thing, but in the main page i have the box for news and do not know how to make it so i can have it like scrolling because the way it's now is just a grey box. this is the site; Da-nexgen.com If there is a site or something that teaches you better how to make a site from photoshop please let me know. I just got into the whole HTML/CSS thing, and to be honest I don't know a whole lot...I know it's something that I want to master and continue to expand on, but I just started learning some of the stuff a couple of weeks ago... My myspace page : http://myspace.com/santana32 I thought looked pretty decent in IE because of the image filters and the comment box... I just got Firefox, and recieved a rude awakening...the filters were no longer there, my music player wasn't there and the gif image that was in my comment box isn't static, it moves with the page itself.... I just want ask if anyone could help me to get my Firefox version of my page to look more like the IE one...it would be greatly appreciated. Hello everyone, I have got a very noob questions which I tried to look for an answer from the internet but I couldnt get a result from the search engine. I hope u guys here around are professional and could be able to help me out with it. I want to know if I could hyperlink multi-areas on only one file. For example, I have an JPEG image which has couple of pictures on there, and would like to hyperlink each of the photos into different links. If yes, how to do, any specific site that teaches this techique. I needed it so badly and really hope u guys can help out. THanks alot in advance! Hello, Im new to the site and the whole html/css thing ;p So please excuse me if I come off as a complete noob ^^; Anyways, I designed my own layout in PS CS2 and sliced it, then imported it to frontpage to finish coding it. Everything was fine and dandy up until I tried adding some links to my navigation bar. It stretched the layout along with it and vice versa. when adding too much text in the content section it stretched out the nav and makes it look hidious. Here's a screenie explaining my situation. [img=http://img291.imageshack.us/img291/8866/somethingsk1.th.jpg] That's how it is in firefox. It's a bit better in IE. http://multico.yurx.com/anime-me/anime-me(lay).html Please no flamming^^; I know im not the best at hml ;p Is it possible to loginto this site by using the url? https://secure.tibia.com/account/?su...&page=overview Like the same way you can turn this: http://www.tibia.com/community/?subtopic=characters Into this: http://www.tibia.com/community/?subt...&name=testname You know what I mean? Been tryin to figure this out for hours Hi there, I set up a blog a while back at www.agirlcalledsam.co.uk I don't use IE, ever, and have only just realised that the column is to the left: when I want it to look like this, as it does in firefox: I'm using Tumblr, with some customizations and have trial-and-errored my way to the point it's at now, but just can't work it out- Is this an easy fix? Happy to copypaste code in neccessary. Cheers Alistair What Im trying to do is create boxes with curved corners. I can't see to figure out why the top left corner is not showing up, or the gaps in the border along the sides. I tried posting for help in the CSS forum but didn't get any response. what Im not understanding is how the code knows what graphic to pull from the sprpanelcrns.png file for the various corners. So if someone could explain it to me or provide me with a link or url that has an explanation I would greatly appreciate it. http://surrenderyourwings.com/tester/tester.html So I just started to use FTP Zilla. The website is www.thesoulofashark.com. I am pretty sure all the images referenced are in the folders. I don't see why they don't show up. Is it because the links are invalid? Another question I have is, so if I want to make another page, how do I link it to that page? Here is my code. I am not sure what "alt=" does. <html> <head> <title>The Soul of a Shark - Home</title> </head> <body background="paper1.jpg"> <img src="title.png" alt="title"> <br><br><br><br> <a href="home.html"><img src="home.png" alt="My Image"></a><br> <a href="home.html"><img src="finance.png" alt="My Image"></a><br> <a href="home.html"><img src="photos.png" alt="My Image"></a><br> <a href="home.html"><img src="poker.png" alt="My Image"></a><br> <a href="home.html"><img src="forums.png" alt="My Image"></a><br> <a href="home.html"><img src="about.png" alt="My Image"></a><br> <a href="home.html"><img src="email.png" alt="My Image"></a><br> </body> </html> |