HTML - How To Get 1 Large Image Next To 5 Small Ones?
so I have been working on this site trying to make it look like the image below
how do I get the large portrait to the right of all the smaller images without messing them up? thanks in advance. http://i46.tinypic.com/64gxew.jpg Similar TutorialsHi there. I'm just starting off in web design, and I am learning as I go along. I have been working on my site all day using Dreamweaver, but there is still one thing I am trying to do without success. Basically I have one Large image on a page, and I want to stack four smaller images vertically next to it on the right hand side. (shown in the attached image) I tried using a table, but all the boxes had the same dimensions. If I use margin to align the pictures, I cannot move the third picture underneath the small one. I realize I am going about this all wrong, but I have no clue as to how to achieve what I am trying to do. All I seem to find on the net is how to wrap text around an image. For example, here's what I did: Quote: <img src="images/Main Window Gallery1.png" width="517" height="395" border="0"><img src="images/small window1 gallery1.png" style="margin: 0px 0px 303px 25px;” width="132" height="92" border="0"><img src="images/small window1 gallery1.png"" height="92" border="0" align="absmiddle" style="margin: 0px 0px 180px 0px;” width=" valign="center"132> Any help is appreciated. Thank you. Hi All, We have images which are displayed in panel series. We have images if all sizes and width, we have tried using width=100% which makes all the images to fit the width allotted, which makes the image BLUR if the image is very small. Is there a way by which we can have width=100% for only the oversize images and leave the others as it is. Regards, Nagesh Can someone tell me why the image isn't zoomed all the way to its max when clicked on? You have to click on the zoomed image to get it to its max dimensions. Why does it do this and how do I fix it so it will max out in a separate window when you click on the thumb? I don't know how to write this Javascript stuff myself. Click on any image to zoom This is the page: [edited out link after problem solved] In Internet Explorer and Opera (not FF as far as I can see), under the 3rd 4th 5th 6th and 7th menu image there is a very small black line between it and the next. I don't know why these are there and how they appeared. I think it is something to do with the stylesheet rather than the page html as they are not there when I exclude it. The style is he [edited out link after problem solved] Can anyone shed some light on this? thanks. Hello, I am getting huge breaks in IE after writing down <br>. This problem only occurs in IE. It doesnt occur in Google Chrome. I removed all the other code and only left the text and one picture there and it still does the same. Heres the link: http://www.jkdolniprim.cz/invalid/ I want the margin and padding to be 0px. Thank you for your help. I'm looking for the coding to make a small (ex:100x100) picture to its NORMAL size i've found others that like when you click it it doubles it. not really what i want I want it so when you click on an image, a popup will appear with the regular size of an image. I'll even pic the sizes in manually if i have to (was suposed to be HOW to..not hot to lol my bad) Hi, I'm new to this forum and this is my first post. I have a large GIF image (2000x1000px approx) which is an interactive map. Since most screen resolutions will be less than this, is there any way to get the image to display centred rather than the bottom right-hand corner? Hi, I have a pretty general question but i'm posting it here since it pertains to xhtml and content. As far as I understand the big deal about css is that it makes your sites flexible and lets you edit the layout and look of every page just by changing the stylesheet/s they are linked to. Is there a way to do this with content? What if I have hundreds of pages and want to add a link to the navigation bar? Is there a way to link templates and content to script the same way I link css? Thank you in advance and feel free to move this if this isn't the appropriate board. I want 50 text fields for a form on a webpage. Is there a way to do this using a loop instead of manually writting the html code for all 50. I have tried this but it does not work. Code: <script type="text/javascript"> var i; for(i=0;i<50;i++) { document.write("<tr>"); document.write("<td>~address(i)~ </td>"); document.write("<td>~name(i)~</td>"); document.write("<td><input type="text" name="name[i]" maxlength="16" value="~name(i)~" size="20"></td>"); document.write("</tr>"); } </script> Thanks Hi all, I'm trying to set up a website for a campus journal that features longish essays as its primary content. I'm struggling to find a way to format large checks of text without too much work. I essentially want to be able to copy and paste 6-10 page essays from word and have them keep the formatting. Is this possible? Do you have any other suggestions for working with text? I consider myself more of an artist and less of a coder so your help is much appreciated. Thanks, Nick Hi I have a small PHP page, where I would like som VERY large text but I cant seem to get it above 7 Code: echo "<p><font size=7 color=red> $row[0] </font></p>" ; I would like it VERY big - like 40 Can anyone tell how to achive this? Thanks Lhg Hi, Please can someone have a look at the photo's page on my site here http://www.leeds-cityscape.co.uk/. The page is made up of a frame, so that I can have an advert at the top of the page that scrolls down as the visitor scrolls down. The problem is that when you go to the page there is a large gap at the top of the page. I have checked the code, but I cannot see what could be causing this. Any help would be appreciated. I am trying to get my site off the ground and am having some kind of issue with a huge white space on the front page. You can see it he http://www.ripeforlearning.com There are two grey boxes - one is a search box and the other is an about us section. Below that, there is a red bar that is supposed to line up with the bottom of the boxes and then, it's followed by the newsfeed. For some reason, between the boxes and the red bar is a huge white space and I can't figure out what's causing it. Any help would be greatly appreciated. Thanks in advance Comments on this post dawnblue2 agrees: Hey all, I'm developing a site that is supposed to display a large table (something like 1500 rows x 50 columns). Firefox renders it just fine, but IE takes ~3:00 minutes to render it. I can't even display a timer during this time since the browser is frozen while rendering the table. I have tried a couple of solutions so far: 1. Using the "table-layout:fixed" style property. ( http://blogs.msdn.com/ie/archive/2005/02/10/370721.aspx ). This doesn't work (I mean it works, but it still takes the same time to load). 2. Using javascript to build the table dynamically (using insertRow() and insertCell()). I gave up after 10 minutes. I'm trying to avoid splitting it up to several pages with 20 rows each, as the client (and my boss) requested this will be the last resort. Any ideas? Hi all, Just wondering if someone could help me with the following. I'm exporting large amounts of MySQL data onto a web page and basically what I would like to do is insert that data into a large textbox. I would have put the data into a table; however, if I have a tabel for say "NAME" I'm soon going to run out of space on the web page as I may return 100 of records for that one column. I thought I could simply have a large display window and this would have scroll bars on the side and at the bottom and I can dump my data into that. Can anyone tell me how I could creat such a table which would span the web pages length? I would also like to control this via CSS and make the colour within the text box grey. Many thanks My site is showing expanded not looking nice in big monitors. Can anyone help please. I think it is a container or sidebar problems. pl see the attachment. I will appreciate your help. I have a large table of data from a travel based web site. I'd like to add some sort of user-friendly mechanism for sorting the table by some of the columns, I've tried some javascript approaches I've found on the internet, but haven't had much luck implementing it in a way I'd like. Such as found at this site: http://mguglielmi.free.fr/scripts/TableFilter/?l=en Current layout of table: [img=http://img210.imageshack.us/img210/3937/tablers7.th.png] I'd like to be able to sort by month, destination (e.g. a "Fiji" option which pulls up all listings containing the word "Fiji") Anyone have any suggestions which might help or be suitable? Thanks This is perhaps not the most suitable for this question, but I have been given two html files that are saved 'reports' produced from a company system. Before anyone suggests it, they cannot be re-produced for me in a different form. The files are 75Mb each!! Very large html files. I have been asked if I can convert the rendered html view of the files (so not the html source code) to another form, for example RTF or PDF, or any form that is suitable. Other than www.htmltortf.com and opening the files in Office and exporting them, can anyone suggest any way to do this (Office cannot handle the file size, and HTMLtoRTF requires payment for the full version). Thanks Ted I've been having problems lately with my navigation bar. For some reason it adds a huge, annoying margin on the left of each button that makes it 1. Hard for the navigation buttons with more than one word in them to fit correctly and 2. Looks really bad. I attached a screenshot and my code. CSS HTML Code: .navContainer { background: #336600; margin: 0.5em; padding: 0; float: left; width: 15%; height: 18em; } ul#nav { list-style-type: none; } ul#nav li a { background-color: #A35200; color: #fff; font-family: "Trebuchet MS"; font-size: 19px; padding: 0.3em 2em 0.3em 2em; text-decoration: none; border: 2px solid #824200; border-style: inset; display: block; margin-top: 1em; text-align: left; } ul#nav li a:hover { background-color: #8F8F00; color: #000; border-style: outset; } HTML HTML Code: <div class="navContainer"> <ul id="nav"> <li><a href="#" style="margin-top: none;">Home</a></li> <li><a href="images.html">Images</a></li> <li><a href="contact.html">Contact Us</a></li> </ul> </div> Hello, I have a simple html form drop down list as a quick reference and link to pages on my site. It is not nested with subcategories, however there are still hundreds of options in the list, and it is causing the page load time to slow considerably. When the list is created dynamically it is painfully slow. I tried to speed things up by making a static html file of the code and using INSERTFILE on my pages. This helped a little, but not enough to suit me. Is there a way to cache this code snippet, or something like that, to speed up the load time? Thanks! |