|
HTML - Css Layout/margin Issues [was 'help- Beginner Wasting Hours Trying To Fix Something']
Hi All,
I'm a beginner to all this HTML coding and have designed a page. Each problem I've encountered I've been able to search the web for and then paste and amend HTML code. My problem is I am adding an image to create a curve in a table but for some reason the right side of the table is indented by a pixel or two. I've tried changing margins etc but nothing works I've wasted hours trying to resolve this and come here as a last resort. See table titled company at link below http://one.fsphost.com/darrenguy/ Please help! Similar TutorialsGreetings! I am back again. I thought I would repost my previous link as my problems now have nothing to do with Image Location. I have successfully placed my inline frame where I want to! Thanks for all the help getting there. Now I have two issues to deal with. I have enclosed photos to illustrate my problems. #1 There is a white line above my Inline frame. I want to get rid of this but cannot find what in the coding is causing it. #2 To the Right of the window there is a white space I also cannot find the code for. I want both of these issues eliminated. I have tried my best to find the code, really I have. Here is my current code and the images which corrospond to my problem. <!doctype html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html;charset=ISO-8859-1"> <title>The works of D.M. Rosemark</title> <style type="text/css" media="screen"> <!-- body { background-color: #ffffff; margin: 0px } #horizon { color: white; background-color: transparent; text-align: center; position: absolute; top: 50%; left: 0px; width: 100%; height: 1px; overflow: visible; visibility: visible; display: block } #wrap {margin: 0px auto; width: 1300px; } iframe.one { width: 600px; height: 375px; border-style:ridge; border-width:10px; border-color:#999999; padding:1px; float: left; display: inline; } //--> </style> </head> <body> <div id="wrap"> <img src="topbanner.jpg" alt="Top Banner" style="width: 1260px;"> <div id="innerwrap"> <img src="leftimage.jpg" style="float: left; width: 325px;"> <iframe class="one" frameborder="0" src="http://www.webmasterworld.com/category10.htm" scrolling="yes"> </iframe> <img src="rightimage.jpg" style="float: left; display: inline; width: 325px; "></div> <img src="bottombanner.jpg" alt="Bottom Banner" style="width: 1260px;"></div> </body> </html> Hey guys, First post. Glad to see such an active forum. Can someone check out http://www.karmasfortune.com/ohiopainclinic/ I'm trying to get rid of the top margin between the very top and the div.. so that I can utilize the top portion of the background image as a menu system. I tried putting the top-margin: 0px in my div container, but it won't budge. Thanks in advance.. Hello, I've been having trouble laying out my website. I'm quite new to HTML, so if you could give me the simplest answer possible it would be appreciated. As of right now I have an image aligned to the top of my page, and two side by side tables underneath it. However, although the tables are aligned the way I want them in Mozilla Firefox (the tables being directly under the image), when I display my site in Internet Explorer the tables are beside the image. I found that I could insert page breaks until the image fit where I wanted it in Internet Explorer, then, however, the tables were further away from the image in Mozilla firefox. If anyone could tell me how to fix this problem it would be most appreciated. Cheers, Dancing Pancake what have i done wrong?! http://maysonline.sandlerltd.co.uk if you go to "advice & guidance" menu or any other menu except the home page, basically most of the pages seem to be very odd in IE7 but in IE8 - its fine! any ideas?! What am I missing? Morning everyone. I am having a problem with getting a table containing flash files and images to align correctly in IE. The site looks fine in Chrome and FF but in IE there is a slight space between the two columns of flash buttons on the left-hand side and the image on the upper-right. This happens in IE 7 and the 8 beta. The site is: http://www.kidsnightonbroadway.com Many thanks in advance for any assistance you can provide. Andy I have designed my site with Divs nesting and divs floating left and right to get a strict layout. It is flawless in firefox / safari but when I open it in IE it seems that some borders are enlarged or something because objects are obviously sent to the next line because their width exceeded that of the parent div. http://www.nativboardriding.com/media.htm check out how the video and div box won't fit on the same page in IE but work fine in the other browsers. How can i prevent this? Recently made a post concerning tables versus divs, and now I have a site where I think I need to do divs, but not sure how to approach using percentages for the sizing. http://www.pigseldesign.com/cravings.jpg This is the layout. Ideally, I'd like for the middle strip to be vertically centered no matter the browser window height. My guess is to have 3 divs (top, middle, bottom) with 100% and if possible, set the percentages for height so that the top and bottom remain the same ratio of size. If it affects anything, the middle strip is going to be a slideshow Flash object. Any hints for sizing? I have a problem with my home page. It is sitting closer to the left side than my other pages and I cannot figure out why! You can see it at http://www.photo-bliss.net/beta username is trial password is demo If you switch between the home page and the other pages, you can see it. Any suggestions would be greatly appreciated. Thanks http://recwar.exofire.net/ i know the code is horrible, i used a mix of MS word, frontpage, and dreamweaver, so please dont bite my head off on that, this post is simply about a crossbrowser layout issue. I was able to position everything the right way in dreamweaver. I got a few screenshots from http://browsershots.org/ and its showing completely messed up in ie6, and slightly wonky in ie7 & ie8. the main problem is the text/image in the middle is somehow ending up in the bottom right corner of the page in IE. Also ie6 doesnt seem to like the transparent background on my title/banner/logo. Can anyone figure out a way to at least get the text box in the right spot for IE? Hello all! This is my first website, and of all the languages I've had to start learning to produce it, HTML is by far the most infuriating. My site is www.B3-Office.com and the issue is the layout. It is completely wrong on every page. If you look in the source it should show that my top nav bar is set to be only 94 px in width per cell (10 cells), slightly larger than some of the text therein. The "Contact" text is supposed to be far left. Then the rest of the site, the pages are just all messed up in formatting, looking nothing like it does in my WYSISWYG program (DreamWeaver CS4). I have 4 pages in this format: home, contact, aboutus, and privacy. None of which are working properly. HELP! What am I missing? I would also appreciate your feedback on my work. Thanks so much!!! Hi all, Help on this would clear up this headache. I am using relative position to put this flash component flush with the right side of the layout. However, in different screen resolutions it still moves. Why is this? for ref: www.burnthisforyourfriends.com Here's the code: <html> <head> <title>Burn This for Your Friends, show dates, music, media, downloads and store</title> </head> <body bgcolor="#000000"> <center><img src="http://img704.imageshack.us/img704/3791/burnthisheader.jpg" /> <br /><a href="http://www.burnthisforyourfriends.com/index.html"><img src="http://img704.imageshack.us/img704/686/mainnavigationplacehold.jpg" alt="Home" border="0" /></a><a href="http://www.burnthisforyourfriends.com/releases.html"><img src="http://img704.imageshack.us/img704/686/mainnavigationplacehold.jpg" alt="releases" border="0" /></a><a href="http://www.burnthisforyourfriends.com/artists.html"><img src="http://img704.imageshack.us/img704/686/mainnavigationplacehold.jpg" alt="artists" border="0" /></a><a href="http://www.burnthisforyourfriends.com/studio.html"><img src="http://img704.imageshack.us/img704/686/mainnavigationplacehold.jpg" alt="studio" border="0" /></a><a href="http://www.burnthisforyourfriends.com/gallery.html"><img src="http://img704.imageshack.us/img704/686/mainnavigationplacehold.jpg" alt="gallery" border="0" /></a><a href="http://www.burnthisforyourfriends.com/bookinginfo.html"><img src="http://img704.imageshack.us/img704/686/mainnavigationplacehold.jpg" alt="bookinginfo" border="0" /></a><a href="http://www.burnthisforyourfriends.com/press.html"><img src="http://img704.imageshack.us/img704/686/mainnavigationplacehold.jpg" alt="press" border="0" /></a><a href="http://www.burnthisforyourfriends.com/store.html"><img src="http://img704.imageshack.us/img704/686/mainnavigationplacehold.jpg" alt="store" border="0" /></a><a href="http://www.burnthisforyourfriends.com/contactus.html"><img src="http://img704.imageshack.us/img704/686/mainnavigationplacehold.jpg" alt="contactus" border="0" /></a> <br /><img src="http://img514.imageshack.us/img514/9773/flashplaceholderred.png" /><img src="http://img163.imageshack.us/img163/8006/flashplaceholdergreen.png" /><img src="http://img340.imageshack.us/img340/4820/flashplaceholderyellow.png" /> </center> <div style="position: relative; top: 20px; left: 659px;"> <p> <script type="text/javascript" src="js/swfobject.js"></script> <script type="text/javascript"><!-- I am coding in PHP, but I don't think that should have anything to do with it. My problem appears to have to do with the HTML. I am using a 15x15 jpg as a submit button, but I have many of them in a table one per cell with no borders or spacing, so there are many of these submit buttons right next to each other in a grid. The problem is that though the cells are set to be 15x15, the page is displaying them in cells that are 15x27 with the jpg aligned to the top, though the source code does not reflect the 27 figure. I have set the width and height attribute on every cell and image. Is there something I should be looking for to ensure all of my code places the images in the right size and placement? There is no CSS in play with this part of the site. Thanks! Hello, I made a very simple table layout (with photoshop and imageready) and its my very first time making this type of layout so I'm having a little trouble with the coding. I haven't added a style.css file to it, except for maybe the css that wraps my navigation to a certain width. Here is the url: http://rezina.awardspace.com/layout01 I can't seem to align the images correctly. My friend told me that one of the images was not sliced correctly, so I sliced it but .. it kind of fixed the right side, and not the left. Also, the extra.jpg (which is the outside background-the stripes) seems to repeat itself both vertically and horizontally, is there a way to fix that? Thanks. =)) oh. oops. I just read the rules, sorry for the vague title. I would try changing it to be more specific but I don't know how.. Hey all, I'm new here, and I love the layout of this website! I like the bright colors! Anyway... I created a website layout/site in Photoshop CS 5. The website: www.thegarbagedump.net I saved it as a html & images.. The issue I am having is when you click one of the bottons I want it to open the html document and display it within that square area with the border around it. I know I probably need a frame to do this, however I dont know how to add a frame, and it appears photoshop saved it in tables.. Could you please review the html source, and tell me how/where to add a frame, and make the Home, About, Domains button appear within that square area with the border? Thank You, Justin Hi, Do you know the answer to this question? (I wasted a lot of time trying figure out this problem, before finally giving up.) How do I get the book cover image to display with no left margin, while preserving the 5px right margin? It displays with no left margin in my WYSIWYG editor. But, it displays with a 5px left margin in IE and Firefox. Here is the code... <a target="_blank" title="New Covenant Theology" href="/images/stories/book/book_cover_original_size.jpg"> <img style="border-style: none; border-width: 0px; left-margin: 0px; right-margin: 5px; title=" alt="New Covenant Theology" src="/images/150x199.jpg" width="150" align="left" height="199" /></a> 24 Reasons Why All Old Testament Laws Are Cancelled and All New Testament Laws Are for Our Obedience. See God's law in redemptive history explained simply and clearly with 7 diagrams, 20 charts, and 702 verses. Dedicated to Reformed, Covenant Theologians; Seventh Day Adventists; and other Sabbath-keepers. Read 3, free chapters from the book now: <a href="/new-covenant-theology.htm" title="New Covenant Theology"><span class="style20">New Covenant Theology</span></a></p> And, here is the webpage... http://www.jesussaidfollowme.org/#biblestudies Thanks for your insight, Greg Gibson Yello, new here on the forum hope i have come to the right place. I am making this website with a fixed header with buttons, using ajQery script to get a nice fade effekt on the buttons on mouseover. Looks great in firefox but in ie i get this bugs where a the picture is missplaced. Cant realy get it to work (havnt done html very long) Would anyone care to take a look and help me out a bit? if so i can upload the page as a .rar /plomp Hey im a beginner at all of this... But i am trying to add a simple image to my web.. here is my code... <html> <head> <title>Pillz Webby</title> </head> <body> Socom Confrontation <img src="sig.jpg" width="400" height="300"/> </body> </html> i have no idea what i am doing wrong... and when i view my properties for my .html file it says it is TYPE OF FILE: FIREFOX DOCUMENT..... shouldnt it say .html??? cuz i saved it as html.. http://www.freewebs.com/ovatime/favlinkz.htm there is a link of a screenshot, this is what comes up whenever i load this code to my browser... any help is appreciated Hi all. I am new to the forums and to HTML/XHTML coding. I am looking for some help with an assignment for a class I am taking. The problem I am running into is that I have the website looking like it is supposed to but it will not pass the W3C validator. Here is the 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" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Make it Right</title> </head> <body> <h1> <center>Healthy Living Plan</center></h1> <p>Many people today are trying to stay healthy. What sorts of things do you need to do in order to maintain a healty body? Here are some ideas for you. Of course, you should always consult with your doctor before undertaking any new diet or exercise plan.</p> <hr /> <h2> <center>Eat right</center></h2> <p>Refer to the United States Department of Agriculture food pyramid to find out how many grains, vegetables, fruits, meats, dairy, and oils that you should eat daily. Also consult the other resources available on the Internet to determine a plan that will work for you.</p> <h2> <center>Keep a food, mood, and exercise journal</center></h2> <ul> <li>Track what you eat each day</li> <li>Track your mood throughout the day</li> <li>Track the exercise that you do each day</li> </ul> <hr /> </body> </html> And here is the error I get: Error Line 14, Column 8: document type does not allow element "center" here; missing one of "object", "applet", "map", "iframe", "button", "ins", "del" start-tag <center>Healthy Living Plan</center></h1> ✉ The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element. One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>"). Error Line 20, Column 8: document type does not allow element "center" here; missing one of "object", "applet", "map", "iframe", "button", "ins", "del" start-tag <center>Eat right</center></h2> ✉ The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element. One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>"). Error Line 26, Column 8: document type does not allow element "center" here; missing one of "object", "applet", "map", "iframe", "button", "ins", "del" start-tag <center>Keep a food, mood, and exercise journal</center></h2> ✉ The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element. One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>"). Any help or explanation to why this is occurring will be greatly appreciated. Thank you. I am new to HTML and I am getting an error and do not know why. Please be simple in your solution as I do not have much HTML knowledge. Here is the Error: 1. Error Line 50, Column 111: document type does not allow element "img" here; missing one of "p", "h1", "h2", "h3", "h4", "h5", "h6", "div", "address", "fieldset", "ins", "del" start-tag. …57" height="70" alt="HTML Dog logo" /> ✉ The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element. One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>"). Here is the code: HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Brendan Madigan's Official Webpage</title>
</head>
<body>
<h1>Brendan Madigan is the coolest person in the world</h1>
<hr />
<p>If anyone thinks that Brendan Madigan is not cool...</p>
<p>They should be examined by a doctor immediatly.</p>
<p>Why is Brendan Madigan so cool???</p>
<p>Here's why:</p>
<ul>
<li>Brendan is awesome</li>
<li>Brendan is really smart</li>
</ul>
<hr />
<p>You might be wondering if Brendan is cool enough to do a definition list...<br /><br />He is!<br /><br /></p>
<p>Here is a<sup>definition</sup>list made <sub>by</sub> Brendan, himself (you can say the list is holy if you want)<br /></p>
<dl>
<dt><strong>Brendan</strong>(noun)</dt>
<dd><br />A cool person</dd>
</dl>
<h2>Brendan does nested lists too!<br /></h2>
<h4>Brendan's <em>Nested List</em><br /></h4>
<ol>
<li>
<dl>
<dt>Brendan(Verb)</dt>
<dd><br />To make something cool</dd>
</dl>
</li>
<li><br />
<ul>
<li>He Brendaned the movie</li>
</ul>
</li>
</ol>
<p>How did Brendan become so good at HTML?</p>
<ol>
<li>He is really smart</li>
<li>He took a class on HTML</li>
</ol>
<h3>If you want info on Brendan go to this website</h3>
<p><a href= "http://www.madigangames.com">Brendan's Company</a></p>
<p>Brendan looks like this</p>
[b]<img src="testudo.jpg" width="30" height="40" alt="Testudos' image'" />[/b]
</body>
</html>
Thanks for your help! |
|||||||