|
HTML - Problem With Aligning Image Gallery To The Center
hello, i've placed an image gallery to my website . i am unable to align it to the center,
Similar TutorialsHello everyone, my first post here, I was wondering if anyone could help. I'm pretty inexperienced with websites, but I've been drafted in by a friend to help the online side of his business. I've been updating his website and come up with www.amarininn.com However, the fading javascript image is being placed in the middle of the page in IE and in Firefox and Chrome the Booking button and other image links are sitting behind the image, not underneath it. How can I fix this? Secondly, it seems www.amarininn.com ( the old website) is hosting malware. Is there an easy way to diagnose and fix this? I'm tempted to just format the whole thing and start afresh. This is a great looking forum and I hope to learn a lot here. Any help with my questions would be most appreciated. JonnieO Dear readers, I am working on the Schools web page and I require some help. I have created a 'navagational menu bar' and i am having trouble aligning it in the center of the page no matter what the resolution of the screen is. Here is the coding: Code: <DIV ID="MainMenu">
<div id="MenuMain">
<!--Main Buttons -->
<div id="menu">
<a href="general/psmenu.htm" onmouseout="MM_menuStartTimeout(1000);" onmouseover="MM_menuShowMenu('MenuContainer_0', 'Menu_0',0,28,'ParentsStudents');"><img src="images/schoolmenu.png" alt="Festus School" border="0" /></a><a href="general/employeemenu.htm" onmouseout="MM_menuStartTimeout(1000);" onmouseover="MM_menuShowMenu('MenuContainer_1', 'Menu_1',0,28,'Employees');"><img src="images/aboutmenu.png" alt="About FHS" border="0" /></a><a href="schools/index.htm" onmouseout="MM_menuStartTimeout(1000);" onmouseover="MM_menuShowMenu('MenuContainer_2', 'Menu_2',0,28,'Schools');"><img src="images/psmenu.png" alt="Parents & Students" border="0" /></a><a href="depts/index.htm" onmouseout="MM_menuStartTimeout(1000);" onmouseover="MM_menuShowMenu('MenuContainer_3', 'Menu_3',0,28,'Departments');"><img src="images/facultymenu.png" alt="Faculty" border="0" /></a><a href="publications/index.htm" onmouseout="MM_menuStartTimeout(1000);" onmouseover="MM_menuShowMenu('MenuContainer_4', 'Menu_4',0,28,'Publications');"><img src="images/curricularmenu.png" alt="Extra-Curricular" border="0" /></a><a href="board/index.htm" onmouseout="MM_menuStartTimeout(1000);" onmouseover="MM_menuShowMenu('MenuContainer_5', 'Menu_5',0,28,'Board');"><img src="images/newsmenu.png" alt="News" border="0" /></a>
</div>
Here is the CSS: Code: #MenuMain {
/* The master div to make sure that our popup menus get aligned correctly. Be careful when playing with this one. */
position:relative;
margin:0px;
text-align:left;
width: 100%;
}
#MenuContainer_0 {
/* This ID is related to the master menu div for menu MenuContainer_0 and contains the important positioning information for the menu as a whole */
position:absolute;
left:500px;
top:45px;
z-index:300;
visibility: visible;
}
#Menu_0 {
/* This class defines things about menu Menu_0's div. */
position:absolute;
left:0px;
top:0px;
visibility:hidden;
background-color:#FFCC33;
border:1px solid #FFCC33;
width:158px;
height:111px;
}
One mo Code: BODY {
BACKGROUND:#FFCC33;
COLOR:#000000;
FONT-FAMILY:SANS-SERIF
FONT-STYLE:Arial;
FONT-SIZE:12;
}
A:LINK {
COLOR:#EB3914;
text-decoration:NONE;
}
A:VISITED {
COLOR:#EB3914;
text-decoration:ITALICIZED;
}
A:HOVER {
COLOR:#000000;
text-decoration:underlined;
}
A:ACTIVE {
COLOR:#000000;
}
.BORDER {
BORDER:1PX SOLID BLACK;
BACKGROUND:#FFBB33;
COLOR:#000000;
}
.YELLOW {
BACKGROUND:#FFCC33;
}
.MainMenu {
margin:auto;
width:800px;
}
ANY help in this matter would be most appreciated. P.S. There was more coding but I got yelled at saying it was too long. Sincerely, -gamesfreke Hi Everyone Im new to this, and trying to build a website to show my artwork for college. Its a requirement for my degree course in London and I have been trying for ages to centre align a fade in/fade out image with code I found. I don't know if this the correct way of showing my code which you all probably understand way better than me, but I'll paste it below. Also the link where the page is online at the moment is here, It kind of aligns centre in Safari but not on an iPad or in Firefox etc. http://dl.dropbox.com/u/30918322/NEW...%20SITE/1.html Your help would be really greatly appreciated! Many Thanks Alex Wood HTML 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 content="text/html; charset=ISO-8859-1" http-equiv="Content-Type"/>
<title>Alex J Wood</title>
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript">
/***
Simple jQuery Slideshow Script
Released by Jon Raasch (jonraasch.com) under FreeBSD license: free to use or modify, not responsible for anything, etc. Please link out to me if you like it :)
***/
function slideSwitch() {
var $active = $('#slideshow DIV.active');
if ( $active.length == 0 ) $active = $('#slideshow DIV:last');
// use this to pull the divs in the order they appear in the markup
var $next = $active.next().length ? $active.next()
: $('#slideshow DIV:first');
// uncomment below to pull the divs randomly
// var $sibs = $active.siblings();
// var rndNum = Math.floor(Math.random() * $sibs.length );
// var $next = $( $sibs[ rndNum ] );
$active.addClass('last-active');
$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1000, function() {
$active.removeClass('active last-active');
});
}
$(function() {
setInterval( "slideSwitch()", 5000 );
});
</script>
<style type="text/css">
/*** set the width and height to match your images **/
#slideshow {
position:relative;
height:400px;
font-family: Arial, Sans-serif, sans;
}
#slideshow DIV {
position:absolute;
top:0px;
left:3px;
z-index:8;
opacity:0.0;
height: 400px;
background-color: #FFF;
}
#slideshow DIV.active {
z-index:10;
opacity:1.0;
text-align: center;
}
#slideshow DIV.last-active {
z-index:9;
}
#slideshow DIV IMG {
height: 350px;
display: block;
border: 0;
margin-bottom: 10px;
}
.hh {
font-family: "American Typewriter";
font-size: 18px;
}
.klk {
font-family: "American Typewriter";
}
.klkggh {
font-size: 28px;
color: #900;
}
a:link {
color: #900;
text-decoration: none;
}
a:visited {
color: #900;
text-decoration: none;
}
a:hover {
color: #900;
text-decoration: underline;
}
a:active {
color: #900;
text-decoration: none;
font-size: 36px;
}
.rtrt {
color: #006;
}
.fgfgg {
text-align: center;
position: absolute;
}
</style>
</head>
<body style="color: #006; font-style: normal; font-size: 36px; font-family: 'American Typewriter'; text-align: center;">
<!-- this will work with any number of images -->
<!-- set the active class on whichever image you want to show up as the default
(otherwise this will be the last image) -->
<p class="klk">Alex J Wood</p>
<p class="klk"><span class="klkggh"><a href="index.html">ENTER SITE</a></span></p>
<table width="44%" border="0" align="center">
<tr>
<th width="25%" scope="col"> </th>
<th width="16%" scope="col"><div id="slideshow">
<center>
<div class="active"> <a href="index.html"><img src="image1.jpg" alt="Not A Nugget" align="middle" /></a> <span class="hh">Not A Nugget |2012</span></div>
<div> <a href="index.html"><img src="image2.jpg" alt="Not A Nugget" /></a> </div>
</center>
</div></th>
<th width="59%" scope="col"> </th>
</tr>
</table>
<center>
<div align="justify"></div>
</center>
<p><a href="index.html" class="rtrt">[url]www.Alex[/url] J Wood.co.uk</a></p>
<p> </p>
</body>
</html>
Hi All, I have an issue with image gallery javascript that i am using to view the images, Image gallery type what i use is "colorbox" javascript which i found on the net. This is what i am doing: I have an html page which would display the records from the xml file...everything works fine as expected, the problem here is with the image gallery, my xml records have images. I have 3 frames , left, center and right pages...the content page displays the records. Let say i have about 15 records which displays records of the student with their pictures. ..the issue here is when i click on the image of the 15th student way down the page, image loads up at the center of the content page, i have to scroll up to view the image...similarly if i open 1st record of the student, it takes the center of the all the 15 records and image appears at the center and i would have to scroll down to view 1st student picture. I want the image to displayed where the picture is seen, i shouldnt be scrolling up and down to view the page. Any idea, how to overcome this? If I view individually instead in the iframe..image loads exactly where the pic is, i need not scroll up and down. Hope i was clear in explaining my problem Any help is highly appreciated.. Hello, I am a total HTML noob so please be patient I use mocrosoft front page to edit a HTML template that I got off the web. Basically upload pictures to photobucket and paste the HTML link into the template. update the description and upload it to eBay. I am looking to add an image gallery ( thumbnails and once clicked or moused over they enlarge in a big window above or below them) but I am not good with HTML at all. I found some free source code on the net but I don't know how to integrate it into my template or even know if it can be done. I tried using the image gallery that is built into front page and it seems ok when in the normal mode but when I switch to preview the pictures are gone and I receive script errors. when I look at the source it is pointing to a file on my C: drive instead of the images in photobucket. I have no idea how HTML works but it seems that the source should point to a file or files on a website because it can't pull images from my hard drive once it's uploaded to ebay. i plan to take some classes on HTML to learn more but in the meantime your help is appreciated. If you have any easy methods to setup an image gallery or tutorial it would be a great help Thank you Adam Hi I am rebuilding my new website and want to make the gallery be more accessible to change when I want to add new work. I thought I could make an XML file with sequential image names that can then be loaded when the page loads and so make changes easier. I am not a javascript or XML script writer, and was looking around the web for a solution. I could only find flash versions or this method. What I would like is a script that could read the xml file and place images and a description in divs inside a container div on my page. This would then be styled using CSS. The images placed will also need to have an associated link to a bigger image file. Does anyone know of any resources that can give good examples of this type of gallery loader? Thanks in advance This is my first post here. Hi and thanks in advance for any future help anyone may be able to offer. I am not very good at html and I have just received a class assignment that I am having a lot of trouble doing. I am not having much luck finding tutorials that create an image gallery. Here is the assignment I have to do: Quote: In your previous assignments, you may have found that when you click on a gallery item in someone's gallery, you are shown a larger version of the image with more information about the piece. This is called a "detail" page. Your assignment is to design (using text only) a 600 pixel by 400 pixel detail page that includes an area for a main image, a description, next and previous buttons, and a close window button. Then collect five placeholder images from the Web. Create one detail page for each of your five placeholder images. For each image, write a short description that includes an unordered or ordered list. Also, remember to cite the sources from where you got the images unless they are your own images. Then link these pages together so the previous and next buttons send the user back and forth through the list of images. Remember that just because these are images now, you can easily replace the images with programs or files you create later on. Put each of your detail pages into a single folder, zip the folder, and upload the zip. I am really unsure how to get started. Thanks. How do I get my image gallery to work? [html] Example I am trying to do exactly what they have done here, with the image thumbs on the same table, and the next button will scroll through them. My Result Whats going on? p.s. i have attached the HTML file in the zip folder, and if u dont want to download that i have attached it as a txt file. I want to implement a thing like Myspace, Facebook, etc where guests can make comments on my images... I just want the guest to have to enter a name, and a comment, no signing up or anything. http://www.pzproductions.com/largeimages Hello, Do you know any HTML/Javascript/JQuery photo gallery which behave like this flash gallery? http://www.erwinolaf.com/#/portfolio..._2001/gallery/ The point is images : 1- Images does not show in a modal popup window. 2- When each thumbnail selected , current image animate to left and selected image also shown with comming from right to left. Thanks Mazdak Hey, this is my first post, so I will try to be as detailed as possible. I know what I want to design, I just don't know the program to use, the file type, whether I need frames... I am new with HTML Code, CSS and Java, I have a graphic design degree focusing on image, type and layout, and very little web design. I would like to design a facebook fan page with this: http://www.htmlforums.com/attachment...7&d=1317248556 I want the header and the image slider to remain loaded and locked at all times on the page, while the slide title/number, main image, and main text FADE in seperately, when the appropriate numbnail is selected. I do not want it as a slide show, it is more of a self-guided informational tutorial. I want the image slider to be able to scroll as well. If anyone knows tutorials or websites that could help me, or have suggestions reproducing this, please let me know. Do I do this as Flash? What type of file? I have searched the internet for days looking for a tutorial that is close to what I want, and I am having no luck. I really don't even know what to call this, inorder to properly google it. Thanks in advance! hi all....well im a bit stuck as im trying to research into obtaining the code for an image gallery, like seen here- http://www.nessherry.co.uk/fashion/f...junky_book.htm ...where you click on the image and it's displayed on the same page in a larger table. does anybody know what this is called exactly?? the source doesnt appear to have javascript.... thanks! Hi everyone. I'm after an image gallery for my site like the one found here . I have found the Ajax image gallerys quite nice, but don't have the ability to scroll through the thumbnails if there is more than, say, 5 displayed. Does anybody know of any similar scripts or whatever to get a better result to the mentioned website. TIA, n00b Daniel Hi all i need some help. I have created a simple gallery with a large image and smaller images to the left of it, when the small images are clicked they change to the large image, see an example here http://vfashion.co.uk/help/example.html but i want to be able to add a link below the main image so when its clicked the current image that is displaying large will open up in a new window. how would i do this??? the code for the page is below please can someone help me Code: <head>
<meta content="en-gb" http-equiv="Content-Language">
<style type="text/css">
.auto-style1 {
margin-bottom: 0px;
}
</style>
</head>
<TABLE id=table1 height=164 cellSpacing=0 cellPadding=0 width=605 border=0 class="auto-style1">
<TR>
<TD vAlign=top width=603 colSpan=2 height=20><B><FONT face=Arial color=#333333></FONT></B></TD></TR>
<TR>
<TD vAlign=top height=106 style="width: 200px">
<DIV align=center>
<TABLE id=table2 cellSpacing=0 cellPadding=0 width=147 border=0>
<TBODY>
<TR>
<TD height=10></TD></TR>
<TR>
</TR>
<TR>
<TD height=5><div align="center">
<table border="0" width="147" cellspacing="0" cellpadding="0" id="table23">
<tr>
<td align="center" colspan="2" height="10"></td>
</tr>
<tr>
<td align="center">
<img style="border-color: cccccc" alt="" src="1.jpg" width=70 border=1 onclick=document.url.src="1.jpg" onmouseover=this.style.cursor=hand onmouseout=this.style.cursor=pointer /></td>
<td align="center">
<img style="border-color: cccccc" alt="" src="2.jpg" width=70 border=1 onclick=document.url.src="2.jpg" onmouseover=this.style.cursor=hand onmouseout=this.style.cursor=pointer /></td>
</tr>
<tr>
<td align="center"></td>
<td align="center"></td>
</tr>
<tr>
<td align="center">
<img style="border-color: cccccc" alt="" src="3.jpg" width=70 border=1 onclick=document.url.src="3.jpg" onmouseover=this.style.cursor=hand onmouseout=this.style.cursor=pointer /></td>
<td align="center">
<img style="border-color: cccccc" alt="" src="4.jpg" width=70 border=1 onclick=document.url.src="4.jpg" onmouseover=this.style.cursor=hand onmouseout=this.style.cursor=pointer /></td>
</tr>
<tr>
<td align="center"></td>
<td align="center"></td>
</tr>
<tr>
<td align="center">
<img style="border-color: cccccc" alt="" src="5.jpg" width=70 border=1 onclick=document.url.src="5.jpg" onmouseover=this.style.cursor=hand onmouseout=this.style.cursor=pointer /></td>
<td align="center">
<img style="border-color: cccccc" alt="" src="6.jpg" width=70 border=1 onclick=document.url.src="6.jpg" onmouseover=this.style.cursor=hand onmouseout=this.style.cursor=pointer /></td>
</tr>
</table></TD></TR></TBODY></TABLE></DIV></TD>
<TD vAlign=top width=405 height=40 rowSpan=3>
<P align=center>
<img src="1.jpg" alt="" name="url" width="380" border="0" id="url"></P>
<P align=center>
Click to enlarge</P></TD></TR>
<TR>
<TD vAlign=top height=106 style="width: 200px">
</TD>
</TR>
Hi, I need HTML code for image gallery like this or similar one. The most importand is the left&right arrows. Thanks for who try to help. I am using FrontPage I have an image that I have created in Word and copied over into FrontPage as it was done using auto shapes. The shape is a star. I need it in the div to keep it aligned with stuff below. It works fine except the left hand corner of the star is cut off by about 3-4 pixels whilst the rest of the image is perfect? Any Ideas? Thanks as always I created a table with about 100 rows down in Dreamweaver. Anyways I want to align a few pictures to the left of the table. Everytime I add the picture it places it above the table. I tried using every code I can think of to align it to the left but it will not go to the left, any advice? Hey. I'm relatively new to web design. I've made a gallery of photo's using this code: <INPUT type="image" src="image.ext" onClick="window.open('http://www.website/image.jpg,'mywindow','width=400, height=600')"> because I wanted all photo's to pop up in a new window, and with specified dimensions. This code works great, but I want to have the "rolleover" effect, where you can put the mouse over it and it changes the photo, such as with this code: <body> <a href="zstore.html" onmouseover='rollover.src="http://ollertonmusic.com/images/ministudio1.jpg"' onmouseout='rollover.src="http://ollertonmusic.com/images/ministripes.jpg"'> <img src="http://ollertonmusic.com/images/ministripes.jpg" name="rollover"> </a> I want to be able to have the image have the "rollover" effect when the curser touches the photo, AND open in a new window with specified dimensions. And I'm wondering where to add in the ALT tag. Thanks! Hi, Does this look right i cant to have a header image and align come copy over it: <body> <!-- NEWS 1 --> <h1><img src="box.jpg" width="300" height="50" /></h1> <h2>News Item 1</h2> <!-- NEWS 2 --> <h1><img src="box.jpg" width="300" height="50" /></h1> <h2>News Item 2</h2> </body> h2 { position: relative; top: -37px; left: 135px; text-align: right; width: 150px; } |
|||||||