|
HTML - Images Layout Problems
Hello, i'm having a problems of HTML layout on my website, anyway out there can helps me? i don't know how to uploaded images to show you guys but i already post it in my new blog i wish all of you can login and have a look on my problems.http://dubspro.blogspot.com/
Below is my coding i wish u guys can help me out thank you. <body> <table width="100%" cellpadding="" cellspacing="" border="0"> <tr> <td width="50%"> </td> <td> <table cellpadding="" cellspacing=""> <tr> <td colspan="3"> <img src="Final Year Project/heading.jpg" width="780" height="52" /></td> </tr> <tr> <td> <img src="Final Year Project/heading1.jpg" /></td> <td> <img src="Final Year Project/heading2.jpg" /></td> <td> <img src="Final Year Project/heading3.jpg" /></td> </tr> <tr> <td colspan="3"><img src="Final Year Project/heading4.jpg" /></td> </tr> <tr> <td colspan="3" > <table cellpadding="0" cellspacing="0" border="0"> <tr> <td><img src="Final Year Project/heading5.jpg" /> </td> <td><img src="Final Year Project/button1.jpg" /> </td> <td><img src="Final Year Project/heading6.jpg" /> </td> <td><img src="Final Year Project/button2.jpg" /> </td> <td><img src="Final Year Project/heading7.jpg" /> </td> <td><img src="Final Year Project/button3.jpg" /> </td> <td><img src="Final Year Project/heading8.jpg" /> </td> <td><img src="Final Year Project/button4.jpg" /> </td> <td><img src="Final Year Project/heading9.jpg" /> </td> <td><img src="Final Year Project/button5.jpg" /> </td> <td><img src="Final Year Project/heading10.jpg" /> </td> <td><img src="Final Year Project/button6.jpg" /> </td> <td><img src="Final Year Project/heading11.jpg" /> </td> </tr> </table> </td> </tr> <tr> <td colspan="13" b><img src="Final Year Project/heading12.jpg" /> </td> </tr> </table> </td> <td width="50%"> </td> </tr> </table> </body> </html> Similar TutorialsHello - I have a couple of layout problems in IE 6 & 7 with a website I'm working on. This is the page: http://www.suecorr.com/painting.html I have a class on every fourth thumbnail to get rid of the border on the right hand side, I need the border on all the other ones apart from the ones on the right. This causes problems in IE6 and 7. This is the HTML for the begining of the gallery Code: <div id="gallery"> <ul> <li> <a href="images/Paintings/painting-1.jpg"> <img src="images/Paintings/th-1.jpg" width="185" height="100" /> </a> </li> <li> <a href="images/Paintings/painting-2.jpg"> <img src="images/Paintings/th-2.jpg" width="185" height="100" /> </a> </li> <li> <a href="images/Paintings/painting-3.jpg"> <img src="images/Paintings/th-3.jpg" width="185" height="100" /> </a> </li> <li> <a href="images/Paintings/painting-4.jpg"> <img class="right" src="images/Paintings/th-4.jpg" width="185" height="100" /> </a> </li> And the CSS for the gallery: Code: #gallery{
width: 800px;
height: 100%;
min-height: 100%;
background-color:#FFFFFF;
padding: 20px 50px 20px 50px;
margin: 0 0 0 0;
display: inline;
clear: both;
float: left;
}
#gallery img{
margin: 10px 23px 13px 0;
float: left;
}
#gallery img.right {
margin: 10px 0 0 0;
padding: 0 0 0 0;
}
#gallery ul {
list-style: none;
margin-left: 0;
}
#gallery li {
padding: 0 0 0 0;
}
#gallery ul li {
display: inline;
padding-right: 0;
}
#gallery ul img {
border: 0;
border-width: 0;
}
#gallery img {
-webkit-transform: scale(1);
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 300ms;
}
#gallery img:hover{
-webkit-transform: scale(1.05);
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 300ms;
}
Thanks for any advice. Dyfrig Hi, I am trying to sort out my layout on my site: http://www.dogula.co.uk/index3.php I would like to start adding new pages very soon with a new layout but there is a few things I would like to get sorted first. As you can see the dots continue way off the page, how could I change it so whatever i type only stays in that div box? I am using php require and css stylesheets so I can change everything quickly in one go but there are some things I am not using with php such as everything in the head, would it be ok to use php require for that or is there another way to change it at a later date? I tried using a google search bar as a seach box for my site, but nothing is appearing, they do appear if I use the google site though, does anyone know what I am doing wrong? Most of all as I am going to be making a lot of pages and I don't want to be changing each page one by one, is there anything wrong with the template that could not be changed via style sheets later? Please help me with any questions you can answer, thank you in advance to anyone who can help. I am having problems getting my site to be viewable with IE 7. I have been using IE for years until recently and now I just test my html in firefox. I didn't use any strange methods(that I am aware of) to code this new layout that I designed but for some reason it wont even show up in IE. Here is a link to the layout I am having trouble with and you should be able to view its source from the http://bakavillage.com/layout5/index.php?id=news.php One of the things I thought might have been the cause has to do with some roll-over images I have. Those I have never used before and I tried commenting them out but that did not solve the problem. Thanks in advance to all those reading this. I'm using the Nifty Corners Cube engine to make a 3-column layout (obviously also with rounded corners ). It works fine except for one thing- the columns have no spacing between them no matter what margin I assign to the left, right or center columns (or even padding). The site is at http://www.clanzephyr.uni.cc. Any suggestions? Hello, I have few problems with layout: 1 In all IE versions fields marked with number 1 move left and right in other browser's it works good. 2 I have marked round corners, this work only in FF browser, chrome, opera doesn't display. Image (for better understand): http://utorrentz.projektas.lt/kita/problem.png My .css: Code: .pagebody {
background: transparent url(box.png);
color: #FFE2AD;
padding: 15px 10px 15px 10px;
text-align: left;
-moz-border-radius-topleft: 6px;
-moz-border-radius-topright: 6px;
-moz-border-radius-bottomleft: 6px;
-moz-border-radius-bottomright: 6px;
border-radius: 6px
margin: 0 0 5px;
}
Is there any solution for that ? I've been making a page layout based on www.hardcoder.com. I wrote the code myself, but the only problem is that is shows correctly only in IE7 and sometimes it doesn't show correctly in that either (how is that even possible? very strange...). I've only been coding for three days so there are most probably some mistakes in the code. If you can help I would very much appreciate that. Only the main page is included, but that should be enough. If you run this page in both IE7 and Firefox you should see my problems. Thanks in advance if you got the time to help me! I am making a table layout and am having a problem. There are two pictures enclosed.. one is how is should look (minus text) and the other is how it shows up in InternetExplorer Table Code: <body text=#FFFFFF LINK=#FFFFFF ALINK=#FFFFFF VLINK=#FFFFFF> <table width="770" valign="top" border="0" cellpadding="0" cellspacing="0" align="center" alt=""> <tr> <td colspan="4"> <img src="images/header_01.png" width="770" height="185" alt=""></td> </tr> <tr> <td colspan="2" valign="left" width="446" height="71" alt="" style="background: url('images/header_02.png') no-repeat; padding-top: 0px; padding-left: 446px; padding-right: 0px; padding-bottom: 0px;"> </td> <td colspan="2" valign="right" width="324" height="71" alt="" style="background: url('images/header_03.png') no-repeat; padding-top: 12px; padding-left: 10px; padding-right: 535px; padding-bottom: 0px;"> <!---------------------------------News-----------------------------------> <p class="marquee"> <Marquee direction="left" scrollamount="2" scrolldelay="50"> News at 11! </Marquee></p> <!---------------------------------News-----------------------------------> <td> <tr> <td width="229" colspan="1" valign="top" alt="" style="background: url('images/header_04.png') repeat; padding-top: 0px; padding-left: 80px; padding-right: 225px; padding-bottom: 5px;"> <!---------------------------------Navigation------------------------------------> <p class="nav">Main</p> <p class="li"> = <a href="index.html">Home</a><br> </p> <!---------------------------------Navigation------------------------------------> </td> <td class="padding" colspan="2" valign="top" width="282" alt="" style="background: url('images/header_05.png') repeat; padding-top: 40px; padding-left: 3px; padding-right: 3px; padding-bottom: 5px;"> <!----------------------------------Content--------------------------------------> <center>*insert title*</center> <!----------------------------------Content--------------------------------------> </td> <td colspan="1" valign="top" width="257" height="21" alt="" style="background: url('images/header_06.png') repeat; padding-top: 8px; padding-left: 0px; padding-right: 0px; padding-bottom: 5px;"> <!------------------------------------Info---------------------------------------> <center>Hey!</center> <!------------------------------------Info---------------------------------------> </td> </tr> <tr> <td colspan="1" valign="top" width="770" height="118" alt="" style="background: url('images/header_07.png') no-repeat; padding-top: 50px; padding-left: -1px; padding-right: 0px; padding-bottom: 30px;"> <!-----------------------------------Credits---------------------------------------> <center> Site is Copyright © of Concord Cosplay Group 2007<br> Layout by Joel Watson </center> <!-----------------------------------Credits---------------------------------------> </td> </tr> </table> </body> I am trying out a couple of layouts for presenting some information in table format. Basically, two tables side by side. Table 1: 3 rows, one column fixed width. table 2: A calendar format with 3 rows. In FF they are displayed as I want them. Even if I include an overflow to force a horizontal scrollbar. Ok I know. But if horizontal scrollbars are not desired, then why do we have them? In IE the overflow is totally ignored. Should I happen to have in table 1, a 4th line of text, then the <hr> I use as a seperator, shows up floating beside table 1, not underneath it as it should. Easily fixed with a <br> but I feel that should not be necessary. In IE, A horizontal scroll bar is not displayed until the data is forced way beyond the edge unlike in FF. Then table 2 drops below table 1 which is not where I want it. In another format, I simply place table 2 under table 1. Which is ok but just doesn't look right. Anyone have a site that discusses this problem and how to work around it so that the browsers are satisfied and the tables show as I want? Hi This is my first post and hopefully I am in the correct place to receive some help. I am totally unsure how to layout my page correctly. Firstly, is there a recommend width, and if so I do I correct the script accordingly. I seem to have different cells at various widths and do not know to to correct. Essentially, the page needs headers and footers covering the whole width, with 2 cells for text and picture in yhje main body section. What I am attempting to do is add text to the cells with images so as the images stay in place and the text wraps around the image. I would be grateful if someone could take time to look at the page script and make some recomendation towards improvement in the layout, or better still post back somre changes. This is my site http://www.janitorman.net/rions/info.htm I hope I have explained with enough detail. Regards Ludo Hey everyone, im new to this site and am hoping that someone on here can help me with this small but annoying problem I have been having. I am designing my first java script site for a friend, and am really happy with the design. However when the site is viewed in Internet Explorer the background image for the header lock onto the page instead of aligning to middle. See it for yourself here. I dont want to have to redesign the layout, but im not happy with leaving that problem as it looks really unprofessional for a business site. I am relatively new to this, but am a quick learner, just hoping someone can help push me in the right direction. Thanks for any help you can offer. Josh Hi! I'm pretty new to html, I'm trying to build my own fairly simple website using 123 reg Instant site and I want to make it from scratch with my own banners and buttons etc. I've been playing around putting some images up on the webpage, but I'm having problems getting the images to stay put, they move around when the browser window gets made smaller/bigger. heres the link to the website http://handbagshandbagshandbags.co.uk/ Any help would be really appreciated! I am new to html, and I am trying to add images, this is what I have been typing to get my img, but i doesn't work. <body> <img src="imagename.jpg"> </body> the web browser knows there is supposed to be an image but it broken picture image where the picture is supposed to be. Anybody know what I am doing wrong, i have tried loading it on both firefox and IE. thanks for your help in advance Ok I had someone recently create me a new myspace layout. We will be using various images for the layout that I will be changing myself from time to time. He needs to know the file path of where I'll be storing these images on my server so he can link all the images correctly. I guess for right now I was just going to use my home computer as the server & just get the hosting? What do you guys think? Also when creating the file path, none of the folders that I want to use can have a space between the folder name right? Like it must be: AcidTripMedia Not Acid Trip Media Right? I must take all of the spaces out of the names of the folders I want to use? Hi all, I'm trying to use EasyMenu (http://www.easymenu.co.uk) for a site at the moment and am having trouble with the layout in Opera (on XP SP3 at various screen resolutions). It actually seems to look quite different in every browser on my PC but Opera is the worst... The problem is that the drop-down menu actually sits up over the top of the menu bar itself, rather than below the menu bar, where it should and does quite happily in IE8 on my PC. I thought that was the only problem until I showed it to someone else who has IE6 on their computer and apparently it does something similar. Another person I showed it to who says he is using IE8 (also on XP SP3 - he's a techie so I think he's telling the truth), told me that it appears similar again on his PC. I'm completely at a loss as to why this is happening so if anyone can help I'd be ecstatic! Menu CSS: Code:
#mainMenu {
position: relative;
margin: auto;
text-align: left;
width: 100%;
background-color: #000000;
color: #ffffff;
padding-top: 10px;
padding-bottom: 30px;
padding-left:0px;
z-index: 100;
}
#menuList {
text-align:left;
margin: 0px;
margin-left: 10px;
padding: 0px;
z-index: 100px;
}
#menuList ul {
margin: 0px;
padding: 0px;
z-index: 100;
}
#menuList li {
display:inline;
list-style: none;
margin-right: -5px;
padding: 0px;
}
a.starter {
background-color: #000000;
color: #B3DEEE;
font-size: 14px;
margin: 0px;
padding: 9.9px;
padding-top: 2px;
padding-bottom: 2px;
text-decoration: none;
border-left: 1px solid #333333;
border-right: 1px solid #333333;
z-index:100;
}
a.starter:hover, a.starter:active, a.starter:focus {
background-color: #707070;
color: #B3DEEE;
}
#submenu-archive {
width: 100px;
}
#submenu-program {
width: 160px;
}
.menu {
text-align: left;
color: #FFFFFF;
background-color: #707070;
position: absolute;
visibility: hidden;
z-index: 100;
}
.menu li a {
background-color: transparent;
color: #FFFFFF;
display: block;
font-size: 13px;
line-height: 16px;
margin-top: -20px;
padding: 5px;
padding-left: 15px;
padding-right: 5px;
text-decoration: none;
}
.menu li a:hover, .menu li a:active, .menu li a:focus {
background-color: #7DB9D0;
color: #333333;
}
Menu HTML: Code: <div id="mainMenu"> <ul id="menuList"> <li class="menubar"><a class="starter" accesskey="1" title="" href="index.htm">ABOUT BFF</a></li> <li class="menubar"><a class="starter" accesskey="2" title="" href="#">2010 PROGRAM</a> <ul id="submenu-program" class="menu"> <li><a title="" href="overview.htm">Program Overview</a></li> <li><a title="" href="opening.htm">Opening Night</a></li> <li><a title="" href="special.htm">Special Events</a></li> <li><a title="" href="background.htm">Youth Documentaries</a></li> <li><a title="" href="digital.htm">Digital Stories</a></li> <li><a title="" href="jumpcut.htm">Jump Cut</a></li> <li><a title="" href="workshops.htm">Workshops</a></li> </ul> </li> <li class="menubar"><a class="starter" accesskey="3" title="" href="tickets.htm">BUY TICKETS</a></li> <li class="menubar"><a class="starter" accesskey="4" title="" href="sponsors.htm">SPONSORS</a></li> <li class="menubar"><a class="starter" accesskey="5" title="" href="newsroom.htm">NEWSROOM</a></li> <li class="menubar"><a class="starter" accesskey="6" title="" href="contacts.htm">CONTACTS</a></li> <li class="menubar"><a class="starter" accesskey="7" title="" href="#">BFF ARCHIVES</a> <ul id="submenu-archive" class="menu"> <li><a title="" target="_blank" href="http://www.bayside.vic.gov.au/arts_bayside_film_festival_home.htm">2009</a></li> <li><a title="" target="_blank" href="http://www.bayside.vic.gov.au/archive/bff2008">2008</a></li> <li><a title="" target="_blank" href="http://www.bayside.vic.gov.au/filmfestival2007">2007</a></li> <li><a title="" target="_blank" href="http://www.bayside.vic.gov.au/filmfestival2006">2006</a></li> <li><a title="" target="_blank" href="http://www.bayside.vic.gov.au/filmfestival2005">2005</a></li> <li><a title="" target="_blank" href="http://www.bayside.vic.gov.au/filmfestival2004">2004</a></li> </ul> </li> </ul> </div> Let me know if you need to know anything else... Thanks so much in advance! Neil 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 Hope someone can help as I'm tearing my hair out at the moment!! I'm working on a site for a friend, I have only ever used basic html to code my own sites, due to this I'm having problems with the layout my friend wants. I've created it with frames, not live yet but you can view it he http://www.ladin.co.uk/Jim/index2.html The layout with color either side and content in middle is how he wants it but obviously without frames, I'm not very knowledgeable where CSS is concerned so haven't a clue how to code it, thanks in advance. Linda http://i179.photobucket.com/albums/w293/Necro6666/th_****Layout.jpg Thats a link to a picture of my crappy layout going to ask a friend to make a background for me i just need a better layout if someone can help me i'll be gratful Heres the codeing HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Funt's Anime</title>
<style type="text/css">
body {
background-color: rgb(58, 95, 135);
margin-left: 10%;
margin-right: 10%;
border: 5px rgb(90, 150, 150);
padding: 30px 40px 10px 20px;
font-family: sans-serif;
}
</style>
<style type="text/css">
div.c1 {position:absolute;left:500px;top:-10px}
div.c2 {position:absolute;left:150px;top:58px;
margin-left: -5.11%;
margin-right: 55%;
border: 2px solid rgb(150, 150, 150);
padding: 0px 5px 0px 5px}
div.c3 {position:absolute;left:0px;top:58px;
background-color: rgb(205, 205, 205)}
div.c4 {position:absolute;left:0px;top:0px;
background-color: white}
div.c5 {position:absolute;left:403px;top:58px;
margin-left: -5.11%;
margin-right: 40%;
border: 2px solid red;
padding: 0px 5px 0px 5px}
div.c6 {position:absolute;left:703px;top:58px;
margin-left: -5.11%;
margin-right: 10%;
border: 2px solid green;
padding: 0px 0px 0px 0px}
</style>
</head>
<body>
<div class="c1">
<h1>Funt's Anime</h1>
</div>
<div class="c4">
<table width="1280">
<tr><td></td></tr>
</table>
<div class="c2">
<p align="center">Complete List</p>
<hr size="4" align="left" width="100%" color="gray">
<p>May, 09, 2009</p><p>The following Anime are complete:<ul>
</ul></p>
</div>
<div class="c5">
<p align="center">New Episodes</p>
<hr size="4" align="left" width="100%" color="red">
<p>The following have been added to Anime:<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li></ul>
</ul>
</div>
<div class="c3">
<table border="2">
<tr><td>Links</td></tr>
<tr><td><a href="Anime/AnimeList.html">Anime</a></td></tr>
</table>
</div>
</body>
</html>
Ok, I've made some changes to my navigation bar on my website with Fireworks so its more interactive. I've now implemented into my html but it has throw a certain part out on the page. Its the small picture thumbs at the bottom of the page, they are supposed to be in one row accross the page, now they go underneath each other. I've been looking for ages now to see the problem but I can not work it out. Here are 2 links to the pages, the first one is the one that works previously and the second is the changed one. If you can see the problem I would be so grateful, thanks. http://www.ashley-stone.co.uk/psychedelic.htm http://www.ashley-stone.co.uk/psychedelic2.htm |
|||||||