|
HTML - Page Formatting Problems
<a href="http://www.gametracker.com/server_info/209.40.97.202:28960/" target="_blank">
<img src="http://cache.www.gametracker.com/server_info/209.40.97.202:28960/b_160x400_T0_F-2_CFFFFFF-FFFFFF-81B569-191515.png" border="0"> </a> <a href="http://www.gametracker.com/server_info/85.234.155.53:30002/" target="_blank"> <img src="http://cache.www.gametracker.com/server_info/85.234.155.53:30002/b_160x400_T0_F-2_CFFFFFF-FFFFFF-5DA85D-141414.png" border="0"> </a> Hi there, I'm a relative novice in HTML, but when i try to post the above two images, they appear one below the other, not side by side. I tried to use a series of <table>, <tr>, and <tb> things to sort it into two collumns and one row, but this screwed up the formatting on the forum i tried to post them on. I wonder if there's any possibilty you could give me a simple way to allow both these images to sit next to each other on a page, without it being too cumbersome? Many thanks. Similar TutorialsAlright since you all were so much help with my last question, here's another. if you look at my website ottersupport.com, you will see that the first page is using a template. I downloaded this and it is working/looks correct on this page but if you click the links for "Rates" and " terms" the templates styles are not on the left side like they are on the first page. I don't see any problems with the code, however I really don't know what I am doing. Thanks in advance, James --Come on is there seriously nobody that can answer this ? If I have this in the wrong area let me know or move it. Hi Team, I'm having problems formatting images in HTML. Here is my site: http://ledtvprices.org.uk/ I would like to "left align" the merchant logo buttons at the top so that they all sit evenly above the H1 Tag and start from the left to the right, rather than the middle of the page. I'd also like to left align all the tv images and space them all out evenly. How do I achieve this in HTML? Thanks. Sunil. Hi everyone. A friend of mine designed his website in Dreamweaver. He wanted to change a lot of things about his website, but could not do it himself. For the past few weeks, he'd tell me what he wanted to change, and I changed it (via HTML, not Dreamweaver). He recently mentioned that he can no longer edit the files from Dreamweaver the way he used to. When he tries to add line breaks, all he gets are indentations. When he tries to format text, things don't always work right. It doesn't seem WYSIWYG anymore. Obviously, it must have something to do with my hand-coding vs. Dreamweaver's style of coding. But I don't even have a copy of Dreamweaver and I don't know where to start debugging. Does this issue stand out to anyone? Is anyone thinking, "Oh! I know exactly why that's happening?" If so, please let me know! Maybe it's the inline CSS I'm using? On the other hand, it looked like a lot of the issues concentrated around Dreamweaver's use of <dd>, <dt>, and <dl>. (I don't know whether it's Dreamweaver or my friend, but a lot of the layout uses these tags.) What can I do? Hello I am hopeless with html. I need to know how to be able to use the space to left (and maybe right) of the apartment ads on this page http://www.asia-expatsforum.com/phpB...apartments.php the ads are java script which I have centered on the page. its a php page but the space between the header and footer is html. whatever I try it either goes above or below the ads--i want to use the space to the left for other ads etc. do I have to create a table? or?? thanks Greetings All, Some background: I'm as green as grass when it comes to html and website design, but that still did not stop me from buying a small website (business) from a desginer on ebay. It did well with some advertising, but recently I have had to change my payment processor because paypal froze my account for something that they have yet to explain to me (apparantly this is common with paypal) In any event, I managed to add the new payment processor to my website, but in the process of doing so, I did something to this page that made it larger and the pics are not in allignment any longer. There are gaps and it looks just plain ugly and unprofessional See for yourself: 1. The website as it should be: http://get-your-ride.com 2. The malfunctioning page: http://get-your-ride.com/join.html Can anyone walk me through on how to fix this? Is there a magic button to push? Or would you prefer I copy and paste the script for your expert eyes,since at this time html is more or less mumbo jumbo to me. hi all, this is my first post.. i just started learning html cause some friends asked if i could help build a website for our dancing group. Anyway, i read a bunch of stuff and decided i would use css and try to make a fluent design (you know, the concept where the page adapts to screen resolution and window size). So i used a lot of <div> with relative positioning and dimensioning (width, height and top, right etc all given as %) I also read about SSI and wanted to use one html file for all the decoration (logo, border, pics etc) and navigation and a different file for the content.. My testing server doesn't support ssi so i thought i could use <iframe> in the content file in order to call the dacoration/navigation page. All worked ok with html 4.01 transitional. Problem is (cause i use linux) i hadn't realized ie doesn't recognize position:fixed unless i use html 4.01 strict (originally i used transitional) So when i changed to strict, all browsers except google chrome screwed the appearance of the iframe with the decoration.. They seem not to recognize the height style when given as a %.. No matter what number i put, height doesn't change. If i use height a static height (given in px), all works ok, but that wouldn't adapt to window space and it won't look good (this is because decoration is based on a border, so it MUST fill the window) you can test it here users.forthnet.gr/ath/almechen/1 i have set home to use html 4.01 TRANSITIONAL so you can see what i want it to look like (works with chrome and firefox, not ie) Lessons is set to 4.01 STRICT with iframe having height:98% (this is where the problem is) (works in chrome, not ff and ie) Events is set to 4.01 STRICT with iframe having height:500px (this works but not how isn't what i really want) (works for all but not what i want) any ideas, any help? i would really appreciate This might be a silly question but I have my dads resume posted on his site: http://artekengineering.com/ (and click resume button) It was done in word and saved as html. My question is is there a way to make the text a certain size (white space around it on the page) and static on the page instead of it resizing and filling the whole web page? Thanks Hi, I have finished my first ever page and am now starting on page 2 (I wanted to create the pages before learning how to link them) I want to use the same layout as my index.php page so i have copied and pasted the code and was just going to edit the text (tell me if i'm doing wrong!) My index page looks fine (www.thetenerifeapartment.com) i have named my second page teneriferegion (saved as a .php in notebook) uploaded it to the server and typed in www.thetenerifeapartment.com/teneriferegion.php/ in the browser to have a look how it looks but the header image is broken and the borders around the text doesn't show as in my index page. Can someone let me know what i've done wrong? i made my first ever full site. it works well in safari and firefox. but for some reason the center section in my page is thrown off with IE. i want my page to be viewable in all possible browsers. can someone help? link to my page is http://h1.ripway.com/dsponline/index.html and the style sheet is http://h1.ripway.com/dsponline/style.css anyone help it would be greatly appreciated! Hi everyone, I'm working on a website for a family member who has a buisness doing antique restoration, I'm trying to make all the pages have the same alignment, the address is http://www.maxbarr.com/ if you click on the buttons along the top you'll see what i mean, some of them are the same alignment others are shifted slightly to the left, they all have exactly the same code as I've used a Dreamweaver template. However they do use stylesheets as well, with the gallery pages using two so I'm guessing it may be that. For bonus marks can someone tell me how to make the copyright information in the gallery section the same size as one the other pages. here is the code for the template: 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>.:Max Barr Antique Furniture Restoration:.</title>
<style type="text/css" media="all">
<!--
@import url("../styles.css");
#header #logo a {
font-family: Times New Roman, Times, serif;
}
#index #outerWrapper #gradient #contentWrapper br {
color: #FFF;
}
#index #outerWrapper #gradient div {
color: #FFF;
}
-->
</style>
<!-- TemplateBeginEditable name="gallery info" --><!-- TemplateEndEditable -->
<!--[if IE 5]>
<style type="text/css">
#outerWrapper #contentWrapper #leftColumn1 {
width: 200px;
}
</style>
<![endif]-->
<!--[if IE]>
<style type="text/css">
#outerWrapper #contentWrapper #content {
zoom: 1;
}
</style>
<![endif]-->
</head>
<body id="index">
<div id="header">
<div id="logo">
<a href="index.html" onmouseover=""> Max Barr Antique Restoration</a></div>
</div>
<div id="outerWrapper">
<div id="gradient">
<div id="nav" style="margin-bottom: 10px;">
<div align="center">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="profile.html">Profile</a></li>
<li><a href="restoration.html">Restoration</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
</div>
<div id="contentWrapper">
<div align="center"></div>
<div id="content"> <!-- TemplateBeginEditable name="Content" -->
<h1>This is the page title</h1>
<h2>This is the H2 tag</h2>
<!-- TemplateEndEditable --></div>
</div>
<div id="credit" align="center">Copyright © 2009 Max Barr
<br />
</div>
</div>
</div>
</body>
</html>
And here's the code for the stylesheet: Code: html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6 {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
}
img {
border-style: none;
}
body {
background-color: #000000;
color: #333333;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 14px;
margin: 0 0 0 0;
padding: 0 0 0 0;
text-align: center;
background-image: url(images/body-bg.png);
background-repeat: repeat-x;
background-position: top;
}
h1 {
color: #FFFFFF;
font-size: 24px;
font-weight: normal;
line-height: 28px;
letter-spacing: -1px;
}
h2 {
color: #999999;
font-size: 18px;
font-weight: bold;
line-height: 20px;
}
a, a:link {
color: #CCCCCC;
font-weight: bold;
text-decoration: none;
}
a:visited {
color: #CCCCCC;
font-weight: bold;
text-decoration: none;
}
a:hover {
color: #FFFFFF;
text-decoration: bold;
}
a:focus {
color: #CCCCCC;
}
a:active {
color: #CCCCCC;
}
#outerWrapper {
margin: 0 auto 0px;
text-align: left;
width: 920px;
background: #fff url(images/content-bg.png) repeat-y left 13px;
}
#outerWrapper #gradient {
background-image: url(images/gradient-shadow.png);
background-repeat: no-repeat;
background-position: center top;
}
#header {
height: 80px;
background-image: url(images/header-bg.jpg);
background-repeat: no-repeat;
background-position: bottom;
width: 900px;
margin-right: auto;
margin-left: auto;
text-align: left;
padding-left: 20px;
}
#header #logo {
color: #FFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 28px;
font-weight: normal;
padding-top: 10px;
padding-left: 0px;
line-height: 50px;
float: left;
width: 1000px;
text-decoration: none;
}
#header #links{
color: #C06A05;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
float: right;
width: 370px;
text-align: right;
margin-top: 25px;
padding-right: 25px;
}
#links a, #links a:active, #links a:visited {
font-weight: normal;
color: #C06A05;
}
#header #links a:hover {
color: #CCCCCC;
text-decoration: none;
}
#nav {
height: 62px;
margin-right: 20px;
margin-left: 20px;
color: #FFFFFF;
background-color: #CCCCCC;
background-image: url(images/nav-bg.jpg);
background-repeat: repeat-x;
background-position: top;
padding-top: 0;
padding-right: 0px;
padding-bottom: 0;
padding-left: 0px;
border-right-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #000000;
border-left-color: #000000;
margin-bottom: 0px;
}
#nav ul {
margin: 0px;
padding: 0px;
}
#nav ul li {
margin: 0px;
display: block;
float: left;
list-style: none;
clear: right;
}
#nav ul li a {
display: block;
padding-right: 20px;
padding-left: 20px;
text-align: center;
color: #CCCCCC;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 62px;
font-weight: normal;
background-image: url(images/nav-border.jpg);
background-repeat: no-repeat;
background-position: right top;
}
#nav ul li a:hover {
background: url(images/nav-hover.jpg) repeat-x top;
text-decoration: none;
color: #FFFFFF;
}
#nav ul li#active {
background: url(images/nav-hover.jpg) repeat-x top;
text-decoration: none;
}
#nav ul li#active a {
color: #FFFFFF;
}
.subpage-navimage {
float: right;
}
#spacer {
background-image: url(images/nav-spacer.png);
background-repeat: no-repeat;
background-position: center top;
height: 27px;
}
#outerWrapper #feature {
height: 230px;
width: 880px;
margin-left: 20px;
margin-bottom: 5px;
background-image: url(images/feature.jpg);
background-repeat: no-repeat;
background-position: center top;
}
#outerWrapper #contentWrapper {
padding-right: 25px;
padding-left: 30px;
clear: both;
padding-top: 10px;
}
#outerWrapper #contentWrapper #leftColumn1 {
float: left;
padding: 0px;
width: 200px;
background-color: #232323;
border: 1px solid #161616;
}
#outerWrapper #contentWrapper #content {
margin-top: 0px;
margin-right: 5px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 10px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 15px;
background-color: #3E3E3E;
color: #CCCCCC;
border: 1px solid #2C2C2C;
font-size: 12px;
line-height: 18px;
}
#content-image {
margin-bottom: 15px;
}
#content ul li {
margin-bottom: 5px;
}
#outerWrapper #footer {
background: url(images/footer-bg.png) no-repeat left top;
height: 60px;
color: #666666;
text-align: center;
padding-top: 25px;
padding-right: 30px;
padding-bottom: 0px;
padding-left: 30px;
}
#leftColumnContent {
width: 190px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
color: #999999;
margin-right: 5px;
margin-left: 5px;
margin-top: 5px;
margin-bottom: 5px;
}
#leftColumnContent h3 {
border: 1px solid #000000;
padding-top: 5px;
padding-bottom: 6px;
font-size: 12px;
padding-right: 4px;
padding-left: 4px;
background-image: url(images/sidebar-h3-bg.jpg);
background-repeat: repeat-x;
background-position: top;
color: #CCCCCC;
}
#leftColumn1 ul {
margin: 0px;
padding-top: 10px;
padding-right: 0px;
padding-bottom: 10px;
padding-left: 0px;
}
#leftColumn1 ul li {
list-style: none;
display: inline;
}#leftColumn1 ul li a {
display: block;
padding: 4px 4px 4px 6px;
color: #999999;
}
#leftColumn1 ul li a:hover {
text-decoration: none;
background-color: #171717;
color: #CCCCCC;
}
.fltlft {
float: left;
margin-right: 10px;
margin-bottom: 10px;
}
.fltrt {
float: right;
margin-left: 10px;
margin-bottom: 10px;
}
.sidebarlt {
padding: 6px;
border: 1px solid #000000;
background-color: #4E4E4E;
color: #CCCCCC;
}
.sidebardk {
color: #999999;
border: 1px solid #4A4A4A;
padding: 6px;
background-color: #1F1F1F;
}
.sidebardk a, .sidebardk a:hover, .sidebardk a:visited, sidebardk a:active {
color: #999999;
}
}
#credit {
text-align: center;
padding-top: 0px;
padding-bottom: 8px;
font-size: 11px;
color: #333333;
width: 920px;
margin-right: auto;
margin-left: auto;
}
#credit a, #credit a:hover, #credit a:visited, #credit a:active, #credit a:focus {
color: #333333;
font-weight: normal;
}
#index #outerWrapper #gradient p {
color: #FFF;
}
#index #outerWrapper #gradient div {
color: #FFF;
}
btw I know the code is very messy, I'm trying to learn more so I can clean it up a bit Thanks very much I was recently tasked with converting two websites for my company into new pages. Some in different languages and some with other features. The problem is that one of the pages I did not originally make and it was made with iWeb on a Mac. I have been editing the page with Microsoft Expression Web 3 and all will be going well except for one problem. Whenever I make a mistake, if I click "undo" it undoes everything that I have edited on the page. It is very frustrating and I know that I can manually go back and undo any mistakes I make but I would like to know that I can undo a few steps instead of having the page reset on me. Is there something I am doing wrong or is it a problem with trying to go from a site made with iMac to editing with MEW3? Hi, I have made an ubuntu server (11.10) and I have made a site on this IP number: 188.177.104.174. When I load the site from a non-local location the site looks strange... The whole setup is missing... I guess its a very basic configuration issue!? Can you help? Frank Hello, Today I updated my index.php page (home page) and I went to my site www.scubatoo.net and it did not update. I can go to /index.php and see the updated page, but not if I just go to www.scubatoo.net. Please help me. Thanks, and Happy NEW YEAR -Ryan Hi, when I created my website www.monkeygambling.com I didn't think about the resolution of other peoples monitors. When most internal pages (homepage is fine i think) are viewed on resolutions below 1280*1024 the page contents moves around. Could anyone help with out with the easiest way to stop this happening so the contents are fixed? thanks for your help this is my page http://web.vtc.edu/users/cjb06271/CI...nal/order.html there are several things I would like to happen. 1. the right collumn background to be where the right collumn should be(so other links in navbar) 2.The test between the roach pictures to be alligned with the top rather than bottom of pictures (so smaller windows can see) 3. When you size the window smaller than the text, a scroll bar appears, and when you scroll the background no longer exists. If I put it on auto the background will only go as far as the text does. 4. (nice but not required)The cocroachs to be alligned to the left and right of the top bar respectively, and the text in the middle. 5. (nice but not required) the right column background image is being cut in half (as does the top one if you size small enough). any way to make the images ignore the collumns? don't worry about the colors I will be changing them soon Hey there just starting to make a new site, and just kinda slowly making pages and trying to get the formatting and looks down first. anyways here is my site: http://uberwalla.com and you may notice depending on the resolution the footer is not at the very bottom its kinda floating high with a gray bottom under it. I am just wondering how i can make it so that no matter what resolution and no matter what browser, that it'll automatically make the footer the very bottom (touching the status bar or past it have to scroll down) no matter the size of the page. thanks in advance, uberwalla Hi everyone.. I;ve just launch my new webiste but IE seems to have messed up some of the formatting. Is there an eastyfix/tool to remedy this? All other browsers see fine. I have tested in Browsershots... Thanks |
|||||||