|
HTML - How Do To Center Align Floating Divs?
Hi there i am trying to center align and image and text as well as float the text to the left of the image.
It seems I can only manage to do one or the other, the code below floats the text to the left of the image, but the two elements sit to the left on page. How can i center this? HTML: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <link rel="stylesheet" type="text/css" href="styles.css" /> </head> <body> <center> <div id="spacer"></div> <div id="header"></div> <div class="row"> <div class="left"> <img src="ripple.jpg"/> </div> <div class="right"> <p class="bio">After leaving school I studied graphic design at Kingsway College of Art in London. During this time I learned the basics of the profession.</p> </div> </div> <ul id="minitabs"> <li><a href="Home.html">Home</a></li> <li><a href="Biography.html">Biography</a></li> <li><a href="Portfolio.html">Portfolio</a></li> <li><a href="Contact.html">Contact</a></li> <li><a href="About.html">Links</a></li> </ul> <div id="underline"></div> </center> </body> </html> CSS: Code: row { position: center; width: 800px;}
.left { width:400px; height: 330px; float: left; }
.right { width: 400px; height: 330px; float: left; }
#spacer {
width:800px;
height:12px;
background-color: #3366ff;
}
#header {
position:center;
width:800px;
height:75px;
background-image:url('images/portfolio.gif');
background-repeat:no-repeat;
}
/* Styles for nav bar */
#minitabs {
clear: both;
padding: 25px 0 14px 10px;
width: 800px;
}
#minitabs li{
margin-left: 0px;
padding: 0px;
display: inline;
list-style: none;
}
#minitabs a{
line-height: 14px;
font-weight: bold;
font-family: verdana;
margin: 0 10px 4px 0px;
text-decoration: none;
color: #777777;
}
#minitabs a.active,
#minitabs a:hover {
border-bottom: 10px solid #3366ff;
font-weight: bold;
padding-bottom: 5px;
color #ff6600;
}
/* Styles for images on Portfolio page */
#images1 {
clear: both;
margin-top: 25px;
padding: 0px 0px 10px 0px;
width: 800px;
}
#images1 li{
margin-left: 0px;
padding: 5px;
display: inline;
list-style: none;
}
#images2 {
clear: both;
margin-top: 25px;
padding: 0px 0px 10px 0px;
width: 800px;
}
#images2 li{
margin-left: 0px;
padding: 5px;
display: inline;
list-style: none;
}
#underline {
margin: -16px 100px;
width: 800px;
border-bottom: 1px solid;
color: #777777;
}
p.bio {
text-align: center;
width:500px;
font-family: verdana;
}
Any suggestions? Thank you Jackie Similar TutorialsHi, I am trying to make a weblayout with a table. In the first cell of the table, I want to have 6 news items. I want the 6 news items to auto arange on screen depending on the width of the users screen. Well I got it to work, but I can not get the 6 news items to center. In stead they are all aligned to the left leaving an ugly white space on the right. I suppoce its not possible to use <DIV> with float left AND then trying to center it in the cell. Any ideas how to do this? Here is what I got so far. HTML Code: <table style="width: 100%" border="0" cellspacing="3" cellpadding="3"> <tr> <td> <table width="100%" border="1"> <tr> <td colspan="2" align=center> <table><tr><td>I stay centered</td></tr></table> <table><tr><td>I dont and neither does the divs below :( <div style="float:LEFT;width:360;BACKGROUND:RED;"> AAAAAAAAAAA </div> <div style="float:LEFT;width:360;BACKGROUND:RED;"> BBBBBBBBBBBBBBBBBBBB </div> <div style="float:LEFT;width:360;BACKGROUND:RED;"> CCCCCCCCCCCCCCCCCCCC </div> <div style="float:LEFT;width:360;BACKGROUND:RED;"> DDDDDDDDDDDDDDDDDDDD </div> <div style="float:LEFT;width:360;BACKGROUND:RED;"> EEEEEEEEEEEEEEEEEEEE </div> <div style="float:LEFT;width:360;BACKGROUND:RED;"> FFFFFFFFFFFFFFFFFFFFFFF </div> </td></tr></table> </td> </tr> <tr> <td valign="top" width="50%"> GGGGGGGGGGGGGGGGGGGGGGG </td> <td valign="top" width="50%"> HHHHHHHHHHHHHHHHHHHHHHHHHH </td> </tr> <tr> <td colspan="2" valign="top"> IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII </td> </tr> <tr> <td valign="top" width="50%"> JJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJ </td> <td valign="top" width="50%"> KKKKKKKKKKKKKKKKKKKKKKKK </td> </tr> </table> </td> <td valign="top" width="320px"> LLLLLLLLLLLLLLLLLLLLLLLLLLLLLLL </td> </tr> </table> I can't get my whole nav bar to align to the center of my sidebar 1 div. Check it out please. http://northwindappaloosas.com I have got a menu working but i don't know how to align it to the left center of the screen. at the moment it is at the top left of the screen. here is the code that i have got so far: HTML Code: <head>
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Demo Menu 1</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" >
<link rel="stylesheet" type="text/css" href="sddm.css" >
<title>JSwitch Slide Menu</title>
</head>
<body>
<div class="navbar" style="width: 148; height: 253;">
<!-- *********************************Start Menu****************************** -->
<div class="mainDiv" >
<div class="topItem" >Demo Menu 1</div>
<div class="dropMenu" ><!-- -->
<div class="subMenu" style="display:inline;">
<div class="subItem"><a href="#">Configuration</a></div>
<div class="subItem"><a href="#">Tool Box</a></div>
<div class="subItem"><a href="#">Contact Us</a></div>
<div class="subItem"><a href="#">Sub Menu 4</a></div>
<div class="subItem"><a href="#">Sub Menu 5</a></div>
</div>
</div>
</div>
<!-- *********************************End Menu****************************** -->
<br>
<!-- *********************************Start Menu****************************** -->
<div class="mainDiv" >
<div class="topItem" >Demo Menu 2</div>
<div class="dropMenu" ><!-- -->
<div class="subMenu" style="display:none;">
<div class="subItem"><a href="#">Configuration</a></div>
<div class="subItem"><a href="#">Sub Menu 2</a></div>
<div class="subItem"><a href="#">Sub Menu 3</a></div>
<div class="subItem"><a href="#">Sub Menu 4</a></div>
</div>
</div>
</div>
<!-- *********************************End Menu****************************** -->
<script type="text/javascript" src="xpmenuv21.js"></script>
</div>
<p> </p>
</body>
Hello Guys, I have made some page with nested div's. I made it's width to 80%. I want that to be completely aligned to center of the page. I tried with css and with html and with parent div. But some thing makes it not to work. Can you see the below code and please suggest me to get that to center. HTML Code: <style type="text/css">
.nm-left { text-align:left; vertical-align:text-top; }
.nm-left .nm-video, .nm-right .nm-video-reverse, .nm-left .nm-avatar, .nm-left .nm-avatar-wrapper, .nm-left span.nm-button, .nm-left #user-form input#submit { float:left; }
.nm-right { text-align:right; vertical-align:text-top; }
.nm-right .nm-video, .nm-left .nm-video-reverse, .nm-right .nm-avatar, .nm-right .nm-avatar-wrapper, .nm-right span.nm-button, .nm-right #user-form input#submit { float:right; }
.nm-wrapper { clear:both; font-size:14px; line-height:21px; margin:20px 0; padding:0px; }
.nm-wrapper div { background-position:99% 10px; background-repeat:no-repeat; margin:0; padding:0; }
.nm-wrapper div div { }
.nm-wrapper div div div { overflow:hidden; }
#ninjamonials .nm-wrapper div div div div { background:transparent; padding:20px;}
#ninjamonials .nm-wrapper div div div div div { padding:0; }
blockquote.nm-summary div, blockquote.nm-testimonial div, blockquote.nm-summary, blockquote.nm-testimonial, blockquote.nm-summary p, blockquote.nm-testimonial p { background:transparent; border:none; padding:0; margin:0; text-decoration:none; font-style:normal; }
span.nm-button, #user-form input#submit { margin:5px; }
#user-form { background-position:left bottom; background-repeat:repeat-x; clear:both; font-size:14px; line-height:21px; margin-top:20px; padding:5px; }
.nm-testimonial, .nm-summary, .nm-author { padding-left:140px }
.nm-summary { font-weight:bold; }
.nm-author { display:block; font-size:12px; }
.nm-name { font-weight:bold; padding-right:5px; }
.nm-video, div.nm-video-reverse { margin:10px !important; }
.nm-audio, .nm-author { padding:5px !important; }
.nm-audio { display:block; }
.nm-name { font-style:italic; }
/* Oceanic Avatar-Specific CSS */
.nm-avatar { }
.nm-avatar img { background-color:#F7F7F7; border:1px solid #DBDBDB; margin:10px; padding:5px; }
/* Oceanic Module-Specific CSS */
.nm-module { overflow:hidden; margin: 5px; padding:4px!important; }
.nm-module div.nm-avatar img { }
.nm-module div.nm-avatar { }
/* Blue Style */
.nm-right.nm-oceanic-blue.nm-module, .nm-right.nm-oceanic-blue .nm-module { background:#EFF8FF url(oceanic_blue_tl.png) no-repeat -10px -10px; border:1px solid #D5ECFF; -moz-border-radius:5px; -webkit-border-radius:5px; }
.nm-left.nm-oceanic-blue.nm-module, .nm-left.nm-oceanic-blue .nm-module { background:#EFF8FF url(oceanic_blue_nq.png) no-repeat -10px -10px; border:1px solid #D5ECFF; -moz-border-radius:5px; -webkit-border-radius:5px; }
.nm-right.nm-oceanic-blue .nm-wrapper { background:#EFF8FF url(oceanic_blue_tl.png) no-repeat; color:#666; }
.nm-left.nm-oceanic-blue .nm-wrapper { background:#EFF8FF url(oceanic_blue_nq.png) no-repeat; color:#666; }
.nm-oceanic-blue .nm-wrapper div { background:url(oceanic_blue_tr.png) no-repeat 100% 0; }
.nm-oceanic-blue .nm-wrapper div div { background:url(oceanic_blue_bl.png) no-repeat 0 100%; }
.nm-oceanic-blue .nm-wrapper div div div { background:url(oceanic_blue_br.png) no-repeat 100% 100%; }
.nm-oceanic-blue #user-form { background-color:#EFF8FF; border:1px solid #D5ECFF; -moz-border-radius:5px; -webkit-border-radius:5px; }
.nm-left.nm-oceanic-blue .nm-avatar-wrapper { margin:0 10px 10px 0; min-height:70px; min-width:90px; background: url(oceanic_blue_quote.png) no-repeat 10px 10px !important; }
/* Green Style */
.nm-right.nm-oceanic-green.nm-module, .nm-right.nm-oceanic-green .nm-module { background:#EBF4D7 url(oceanic_green_tl.png) no-repeat -10px -10px; border:1px solid #9AC740; -moz-border-radius:5px; -webkit-border-radius:5px; }
.nm-left.nm-oceanic-green.nm-module, .nm-left.nm-oceanic-green .nm-module { background:#EBF4D7 url(oceanic_green_nq.png) no-repeat -10px -10px; border:1px solid #9AC740; -moz-border-radius:5px; -webkit-border-radius:5px; }
.nm-right.nm-oceanic-green .nm-wrapper { background:#EBF4D7 url(oceanic_green_tl.png) no-repeat; color:#666; }
.nm-left.nm-oceanic-green .nm-wrapper { background:#EBF4D7 url(oceanic_green_nq.png) no-repeat; color:#666; }
.nm-oceanic-green .nm-wrapper div { background:url(oceanic_green_tr.png) no-repeat 100% 0; }
.nm-oceanic-green .nm-wrapper div div { background:url(oceanic_green_bl.png) no-repeat 0 100%; }
.nm-oceanic-green .nm-wrapper div div div { background:url(oceanic_green_br.png) no-repeat 100% 100%; }
.nm-oceanic-green #user-form { background-color:#EBF4D7; border:1px solid #9AC740; -moz-border-radius:5px; -webkit-border-radius:5px; }
.nm-left.nm-oceanic-green .nm-avatar-wrapper { margin:0 10px 10px 0; min-height:70px; min-width:90px; background: url(oceanic_green_quote.png) no-repeat 10px 10px !important; }
/* Grey Style */
.nm-right.nm-oceanic-grey.nm-module, .nm-right.nm-oceanic-grey .nm-module { background:#EFEFEF url(oceanic_grey_tl.png) no-repeat -10px -10px; border:1px solid #999; -moz-border-radius:5px; -webkit-border-radius:5px; }
.nm-left.nm-oceanic-grey.nm-module, .nm-left.nm-oceanic-grey .nm-module { background:#EFEFEF url(oceanic_grey_nq.png) no-repeat -10px -10px; border:1px solid #999; -moz-border-radius:5px; -webkit-border-radius:5px; }
.nm-right.nm-oceanic-grey .nm-wrapper { background:#EFEFEF url(oceanic_grey_tl.png) no-repeat; color:#666; }
.nm-left.nm-oceanic-grey .nm-wrapper { background:#EFEFEF url(oceanic_grey_nq.png) no-repeat; color:#666; }
.nm-oceanic-grey .nm-wrapper div { background:url(oceanic_grey_tr.png) no-repeat 100% 0; }
.nm-oceanic-grey .nm-wrapper div div { background:url(oceanic_grey_bl.png) no-repeat 0 100%; }
.nm-oceanic-grey .nm-wrapper div div div { background:url(./images/oceanic_grey_br.png) no-repeat 100% 100%; }
.nm-oceanic-grey #user-form { background-color:#EFEFEF; border:1px solid #999; -moz-border-radius:5px; -webkit-border-radius:5px; }
.nm-left.nm-oceanic-grey .nm-avatar-wrapper { margin:0 10px 10px 0; min-height:70px; min-width:90px; background: url(./images/oceanic_grey_quote.png) no-repeat 10px 10px !important; }
/* White Style */
.nm-right.nm-oceanic-white.nm-module, .nm-right.nm-oceanic-white .nm-module { background:#FFF url(oceanic_white_tl.png) no-repeat -10px -10px; border:1px solid #E8E8E8; -moz-border-radius:5px; -webkit-border-radius:5px; }
.nm-left.nm-oceanic-white.nm-module, .nm-left.nm-oceanic-white .nm-module { background:#FFF url(oceanic_white_nq.png) no-repeat -10px -10px; border:1px solid #E8E8E8; -moz-border-radius:5px; -webkit-border-radius:5px; }
.nm-right.nm-oceanic-white .nm-wrapper { background:#FFF url(oceanic_white_tl.png) no-repeat; color:#666; border:1px solid #E8E8E8; -moz-border-radius:5px; -webkit-border-radius:5px; }
.nm-left.nm-oceanic-white .nm-wrapper { background:#FFF url(oceanic_white_nq.png) no-repeat; color:#666; border:1px solid #E8E8E8; -moz-border-radius:5px; -webkit-border-radius:5px; }
.nm-oceanic-white .nm-wrapper div { background:url(oceanic_white_tr.png) no-repeat 100% 0; }
.nm-oceanic-white .nm-wrapper div div { background:url(oceanic_white_bl.png) no-repeat 0 100%; }
.nm-oceanic-white .nm-wrapper div div div { background:url(oceanic_white_br.png) no-repeat 100% 100%; }
.nm-oceanic-white #user-form { background-color:#FFF; border:1px solid #E8E8E8; -moz-border-radius:5px; -webkit-border-radius:5px; }
.nm-left.nm-oceanic-white .nm-avatar-wrapper { margin:0 10px 10px 0; min-height:70px; min-width:90px; background: url(oceanic_white_quote.png) no-repeat 10px 10px !important; }
.nm-audio1 {padding:5px !important; }
.nm-summary1 {padding-left:140px }
</style>
<div id="ninjamonials" class="nm-oceanic-grey nm-left" style="width:80%">
<!--bof nm-wrapper -->
<div class="nm-wrapper">
<div>
<div>
<div>
<div class="nm-content">
<div class="nm-avatar-wrapper">
</div>
<blockquote
class="nm-testimonial">
<p>This is a testimonial test. This is a testimonial test. This is a testimonial test. This is a testimonial test. This is a testimonial test. This is a testimonial test. </p>
<p>This is a testimonial test. This is a testimonial test. This is a testimonial test. This is a testimonial test. This is a testimonial test. This is a testimonial test. </p>
</blockquote>
<div class="nm-author">
<span class="nm-name">Name</span>
(Website<span class="nm-title"></span>
~ <span class="nm-auth-url"><a
href="http://www.google.com/">www.google.com</a></span>
, <span class="nm-location">Mine</span>
) </div>
<!--eof nm-author -->
</div>
<!--eof nm-content -->
<!--eof wrapper -->
</div>
</div>
</div>
</div>
<div class="nm-wrapper">
<div>
<div>
<div></div></div></div></div></div>
Waiting for your solution. Thanks in advance! Hi! I've been struggling with a problem how to align a div to center and top of browser, but just simply can't seem to find a working solution. Here's an example page where I have aligned the site to top but it is not centered. http://www.marufox.net I am not working on that current site now, but still something similar, so the code can differ from what you see there. Any help will be greatly appreciated! Hello, I've came here because I am really stuck on this one problem... I can't float another DIV right so it's beside another DIV. ( http://www.lentonent.com ) Please could you fix this source code so one div is on the left and one is on the right and they both have a background of middle.png: Code: <html>
<head>
<style>
#middle
{
width: 900px;
background: url(images/middle.png) repeat-y;
}
#middle-left
{
width: 580px;
padding: 25px;
border: 1px solid #000;
}
#middle-right
{
width: 200px;
padding: 25px;
border: 1px solid #000;
float: right;
}
</style>
</head>
<body>
<div id="middle">
<div id="middle-left">
<h1>LEFT SIDE</h1>
<p>This text should be on the left hand side. I'm just going to write a little
crap now to make this paragraph really long and cool just like a frog standing on
a spoon. Yes very random indeed but that's not what the bus shelter said.</p>
<h1>LEFT SIDE</h1>
<p>This text should be on the left hand side. I'm just going to write a little
crap now to make this paragraph really long and cool just like a frog standing on
a spoon. Yes very random indeed but that's not what the bus shelter said.</p>
</div>
<div id="middle-right">
<h1>Test</h1>
<p>This is a test.</p>
</div>
</div>
</body>
</html>
Thankyou very much for your help! Hi Everyone, I can't seem to figure out how to make my pages horizontaly align to the center of the screen. Seemed easy enough but can't seem to make it work. Here is one of those pages : http://www.ruze.ca/Kunstler/Homepage.html It would be amazing if one of you could tell me how to fix this. I'm by no means a web guy, I'm just trying to put up a temporary version of the site I'd like to have made by a real pro when I can afford it. Thanks! D. As You Can see that the url i am providing includes stuff which is aligned left and i want to align it to center how can i do it . Guide me if there is an appropriate way to align it to center without changing the whole of the style sheet. http://www.ims-sc.org REGARDS i'm having no luck vertically aligning the text in the MIDDLE within the <td>. Notice how it is aligned TOP in the rollover state. See code below, please help. --- <!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"> <head> <title>javascript free td link</title> <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" /> <style type="text/css"> #cell { width:278px; height:25px; } #cell2 { width:278px; height:25px; } a#roll { display:block; width:278px; height:25px; background:#FFFFFF; text-align:left; text-decoration:none; font-family:arial; font-size:14px; color:#FF0000; } a#roll:hover { background:#FF0000; color:#FFFFFF; } </style> </head> <body> <table border="0" cellpadding="1" cellspacing="0"> <tr> <td id="cell"><a id="roll"href="http://www.google.com"> HOME</a></td> </tr> <tr> <td id="cell2"><a id="roll"href="http://www.google.com"> ABOUT</a></td> </tr> </table> </body> </html> Hi, first question as a new user so here goes... As part of a website I'm designing I'm trying to create a fairly simple layout with two DIVs, one for an image and one for text, like in the picture below: http://www.eastwood6.co.uk/layout.gif I'm having problems getting the second smaller DIV (the one with the text in) to stay to the right of the first smaller DIV (with the image). I have floated the first DIV to the left, but I found that the text wraps underneath the image when the text is longer than the image. I tried floating the second DIV to the left as well, and this worked fine in IE, but it causes problems in Firefox, namely that the entire second DIV is pushed below the first. I've been messing with this all morning and just cannot solve it, any help would be greatly appreciated! Here's the code I've been playing with: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<title>Test</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
#one {
width:50%;
border: 1px solid black;
}
#two {
float: left;
border: 1px solid orange;
}
#three {
width: 400px;
}
</style>
</head>
<body>
<div id="one">
<div id="two">This is the left box</div>
<div id="three">This is the right box. Now I just want to see what happens when I type so much text that it flows off the end.
This is the right box. Now I just want to see what happens when I type so much text that it flows off the end.
This is the right box. Now I just want to see what happens when I type so much text that it flows off the end.</div>
</div>
<div style="clear: both;"><p> </p></div>
</body>
</html>
Thanks, Pete With the align attribute of <img> deprecated, can anyone tell me what the correct way of center-aligning an image should be? Thanks, James I apologize if it is improper protocol to post a link rather than the actual code but since View>Source exists for seeing both the html and css code and there is a fair amount of code...here is the link: http://nicolemuller.com/IMS/FINAL/ne...al/signin.html I don't know what I'm doing wrong but I cant get all the elements in the 2 rows to align and center with the rule of the menu strip. Any help would be great-thanks! Not a major programmer but I needed to make a website. I am having a problem with my website where I have 5 pages, same structure, built with tables, all tables centered. In IE the tables align center on each page. But in Firefox --- 3 of the pages are different, lining up about 10 pixels left of center. Does anyone know how I can fix this problem? I have browsed around other sites as well and many of them have this problem. Any advice would be greatly appreciated. I know tables are horrible but thats all I know/can learn. Hello this is going to sound really basic so any way How do you style font to appear in the middle of your page using CSS as im aware you can either float left or right, am i right in saying you have to use padding? margins? to get it to be where u want it to sit? All I want is to have my image placed in the center of my web page... Every code I try doesn't work. The image is either at the top of the page or it doesn't stay in the center at different resolutions. Can someone help me? Hi, Im learning html/css and I really need some help to achieve what you can see on the image. So far Ive created the html side, but I've been around the css without good results. Please have a look: Thanks for your time Code: <div class="main">
<div class="image"><div class="about">
<div class="abouttop">
<div class="abouttopimg"><img src="http://www.freeimagehosting.net/uploads/70b79a8111.jpg" alt="about me" width="100" height="100" /></div>
<div class="abouttoptxt">
<p>First part</p>
<p>of text goes here</p>
<p>side to side </p>
<p>with the image</p>
</div>
<!--abouttoptxt-->
</div>
<!--abouttop-->
<div class="aboutmetxt">
<p>Sed ut perspiciatis unde omnis iste natus erro</p>
<p>sit voluptatem accusantium doloremque lau</p>
<p>dantium, totam rem aperiam, eaque ipsa quae</p>
<p>voluptatem.</p>
<p>Sed ut perspiciatis unde omnis iste natus erro</p>
<p>Sed ut perspiciatis unde omnis iste natus erro</p>
<p>Sed ut perspiciatis unde omnis iste natus erro</p>
<p>rem aperiam.</p>
<p>sit voluptatem accusantium doloremque lau</p>
<p>sit voluptatem accusantium doloremque lau.</p>
</div>
<!--aboutmetxt-->
<div class="cb"></div>
<!--Do not Delete It. It is used to maintain height-->
</div></div>
</div>
<div align="center">
<table align="center" cellpadding="8" cellspacing="8" >
<tr>
<td><a href="#" title="First square" target="_blank">
<img src="http://www.freeimagehosting.net/uploads/7be4f7ae07.jpg" alt="icon" /></a></td>
<td><a href="#" title="Second square" target="_blank">
<img src="http://www.freeimagehosting.net/uploads/7be4f7ae07.jpg" alt="icon" /></a></td>
<td><a href="#" title="Third square" target="_blank">
<img src="http://www.freeimagehosting.net/uploads/7be4f7ae07.jpg" alt="icon" /></a></td>
<td><a href="#" title="Fourth square" target="_blank">
<img src="http://www.freeimagehosting.net/uploads/7be4f7ae07.jpg" alt="icon" /></a></td>
</tr>
</table>
</div>
this issue has been solved Hello, I've put the Code: <div align="center"> below the Code: <body> tag and closed it with the Code: </div> before the Code: </body> tag. The page doesn't center at all. Is looking fine in 1024x768 but in any bigger resolution, the page is aligned to the left. The page that I am talking for is this. Any idea? Hey, Ive seen this done a few times and i was wondering if aqnyone knoew how hard it is or how to achieve it. When the user clicks on a button i want either an image or text to appear next to it. Im sorry i cant find any examples but i have seen it done in places. Thanks, Ben |
|||||||