|
HTML - Center Images Issues
Hi!
I've got this header image. It has a width of 1440px. I want it to be centered even if the size if my screen is 1024px in width. Can someone please tell me what's the best way to fix this? Regards, Mayhem Similar TutorialsHi, I created a simple slideshow: Code: <html> <body> <div> <iframe src="http://lh4.ggpht.com/_qkZzGyIkXmo/S6yTNbhSskI/AAAAAAAADKo/IjVMzaM42Kk/s800/image1.jpg" width="448" height="336" name="iframe_a"> </iframe> </div> <br> <div> <a href="http://lh4.ggpht.com/_qkZzGyIkXmo/S6yTNbhSskI/AAAAAAAADKo/IjVMzaM42Kk/s800/image1.jpg" target ="iframe_a"><img src="http://lh4.ggpht.com/_qkZzGyIkXmo/S6yTNbhSskI/AAAAAAAADKo/IjVMzaM42Kk/s800/image1.jpg" width="80" height="60"></a> <a href="http://lh3.ggpht.com/_qkZzGyIkXmo/S6yTTic4mTI/AAAAAAAADKs/4eJn_aJuMyk/s800/image2.jpg" target ="iframe_a"><img src="http://lh3.ggpht.com/_qkZzGyIkXmo/S6yTTic4mTI/AAAAAAAADKs/4eJn_aJuMyk/s800/image2.jpg" width="80" height="60"></a> <a href="http://lh5.ggpht.com/_qkZzGyIkXmo/S6yVdtKSofI/AAAAAAAADLQ/wSg6hOHzlFs/s800/image3.jpg" target ="iframe_a"><img src="http://lh5.ggpht.com/_qkZzGyIkXmo/S6yVdtKSofI/AAAAAAAADLQ/wSg6hOHzlFs/s800/image3.jpg" width="80" height="60"></a> </div> </body> </html> The problem is my images are of different sizes and they don't center in the iframe. How can I resolve the problem? Any suggestion is greatly appreciated! Kind regards Rain lover Hai there, just a quick question - How do I center an image vertically (as in right in the middle, I don't want to have to mess around with each image to the exact pixel spacings) All I want to know is the code to put this: </A> <A HREF="http://rh.pretsell.co.uk/xlrstats/"> <IMG SRC="http://i28.servimg.com/u/f28/15/38/25/28/xlrsta16.png"> In the middle so it makes the forum look better Thank you! I'm trying to center some images in the header between two div tags, div nav-left and div nav-right. I've also tried placing the images inside the div tags but that didn't work either. What is happening is that the images (facebook ,youtube, twitter) are forced too far to the right, causing the search bar to be pushed down. What can I do to fix this?? Here's the code for header.php The code that I added is about 3/4 of the way down. The website is http://www.mensweekly.net Thanks! 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 profile="http://gmpg.org/xfn/11">
<title>
<?php if ( is_home() ) { ?><?php bloginfo('name'); ?> | <?php bloginfo('description'); ?><?php } ?>
<?php if ( is_search() ) { ?><?php bloginfo('name'); ?> | <?php _e('Search Results',woothemes); ?><?php } ?>
<?php if ( is_author() ) { ?><?php bloginfo('name'); ?> | <?php _e('Author Archives',woothemes); ?><?php } ?>
<?php if ( is_single() ) { ?><?php wp_title(''); ?> | <?php bloginfo('name'); ?><?php } ?>
<?php if ( is_page() ) { ?><?php bloginfo('name'); ?> | <?php wp_title(''); ?><?php } ?>
<?php if ( is_category() ) { ?><?php bloginfo('name'); ?> | <?php _e('Archive',woothemes); ?> | <?php single_cat_title(); ?><?php } ?>
<?php if ( is_month() ) { ?><?php bloginfo('name'); ?> | <?php _e('Archive',woothemes); ?> | <?php the_time('F'); ?><?php } ?>
<?php if (function_exists('is_tag')) { if ( is_tag() ) { ?><?php bloginfo('name'); ?> | <?php _e('Tag Archive',woothemes); ?> | <?php single_tag_title("", true); } } ?>
</title>
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" media="screen" />
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php if ( get_option('woo_feedburner_url') <> "" ) { echo get_option('woo_feedburner_url'); } else { echo get_bloginfo_rss('rss2_url'); } ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/includes/js/jquery-1.3.2.min.js"></script>
<?php wp_head(); ?>
<!--[if lte IE 6]>
<script defer type="text/javascript" src="<?php bloginfo('template_directory'); ?>/images/pngfix.js"></script>
<![endif]-->
<?php include(TEMPLATEPATH . '/includes/stylesheet.php'); ?>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/includes/js/jquery.easing.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/includes/js/jquery.lavalamp.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/includes/js/tabs.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/includes/js/superfish.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/includes/js/jquery.bgiframe.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($){
$(".nav2")
.superfish({
animation : { opacity:"show",height:"show"}
})
.find(">li:has(ul)")
.mouseover(function(){
$("ul", this).bgIframe({opacity:false});
})
.find("a")
.focus(function(){
$("ul", $(".nav>li:has(ul)")).bgIframe({opacity:false});
});
$(".cats-list")
.superfish({
animation : { opacity:"show",height:"show"}
})
.find(">li:has(ul)")
.mouseover(function(){
$("ul", this).bgIframe({opacity:false});
})
.find("a")
.focus(function(){
$("ul", $(".nav>li:has(ul)")).bgIframe({opacity:false});
});
$("#lavaLamp, #2, #3").lavaLamp({
fx: "backout",
speed: 700,
click: function(event, menuItem) {
return true;
}
});
});
</script>
</head>
<body>
<?php
$featuredcat = get_option('woo_featured_category'); // ID of the Featured Category
$GLOBALS[ex_feat] = $wpdb->get_var("SELECT term_id FROM $wpdb->terms WHERE name='$featuredcat'");
$vidcat = get_option('woo_video_category'); // ID of the Video Category
$GLOBALS[ex_vid] = $wpdb->get_var("SELECT term_id FROM $wpdb->terms WHERE name='$vidcat'");
?>
<div id="page">
<div id="nav"> <!-- START TOP NAVIGATION BAR -->
<div id="nav-left">
<ul id="lavaLamp">
<li><a href="<?php echo get_option('home'); ?>/">Home</a></li>
<?php wp_list_pages('depth=1&sort_column=menu_order&title_li=' ); ?>
</ul>
</div><!--/nav-left -->
<div align="left">
<img src="http://i20.photobucket.com/albums/b236/shayrgob/twitterbutton.gif"></src>
<img src="http://i20.photobucket.com/albums/b236/shayrgob/facebookbutton.gif"></src>
<img src="http://i20.photobucket.com/albums/b236/shayrgob/youtubebutton.gif"></src>
</div>
<div id="nav-right">
<form method="get" id="searchform" action="<?php bloginfo('home'); ?>/">
<div id="search">
<input type="text" value="<?php _e('Enter your search keywords here...',woothemes); ?>" onclick="this.value='';" name="s" id="s" />
<input name="" type="image" src="<?php bloginfo('stylesheet_directory'); ?>/styles/<?php echo "$style_path"; ?>/ico-go.gif" value="<?php _e('Go',woothemes); ?>" class="btn" />
</div><!--/search -->
</form>
</div><!--/nav-right -->
</div><!--/nav-->
<div id="header"><!-- START LOGO LEVEL WITH RSS FEED -->
<h1><a href="<?php echo get_option('home'); ?>/" title="<?php bloginfo('name'); ?>"><img src="<?php if ( get_option('woo_logo') <> "" ) { echo get_option('woo_logo'); } else { ?><?php bloginfo('stylesheet_directory'); ?>/images/logo.gif<?php } ?>" alt="<?php bloginfo('name'); ?>" title="<?php bloginfo('name'); ?>" /></a></h1>
<div id="rss">
<?php echo adrotate_banner('1'); ?>
</div><!--/rss-->
</div><!--/header -->
<div id="suckerfish"><!-- START CATEGORY NAVIGATION (SUCKERFISH CSS) -->
<ul class="nav2">
<?php wp_list_categories('title_li=') ?>
</ul>
</div><!--/nav2-->
<div id="columns"><!-- START MAIN CONTENT COLUMNS -->
Ok I am having a really weird problem. I have a simple div that has some images in it and I am trying to center them. I added text-align: center to the div that wraps the images but it doesn't center the images like it should. Also, I have a radio button below the image that is wrapped in <p> </p> tags. It looks right in FF of course, but in IE7 it puts the radio button to the side of the picture instead of below like it should when it is wrapped in paragraph tags. Anyone have any idea why this might be happening? http://www.mesquitechristmas.com/loc...?action=images The link is a secure page but I have removed the session and disabled the function so the page should display. -Thanks 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? Using the following code column within my datagrid. It gives me different results within firefox and IE. It should show some text and then the image should appear after the text. Within IE 7 it works fine but within firefox 3.6.10 the image is directly over the text. I'm not using a CSS file. This is a page I inherited and I'm asked to fix this. Any help would be appreciated. Code: <asp:templatecolumn headertext="Name" headerstyle-width="90px" sortexpression="varName">
<itemtemplate>
<asp:label width="10" id="lblName" runat="server">
<%# DataBinder.Eval(Container.DataItem,"varName")%>
</asp:label>
<img src='/Images/Info16x16.gif' border=0 />
</itemtemplate>
</asp:templatecolumn>
http://www.ivoog.com/test/help The boxes that have: Paypal, Policies, Financing, Wholesale, etc. How can these be centered in all browsers including IE6? I can't get it to work Here's the CSS: #othermain2 { width:850px; height:850px; float:left; } #middlestyle { width:850px; text-align:center; margin:auto; overflow:auto; } .middlebox { width:150px; text-align:center; float:left; font-size:24px; margin-left:50px; margin-top:50px; border:solid 5px #333; } .middlebox:hover { width:150px; text-align:center; float:left; font-size:24px; margin-left:50px; margin-top:50px; border:solid 5px #390; } FULL CSS: http://www.pics.ivoog.com/page/home.css Can anyone help me? Thanks. Hey felllas. I really need some help here. I'm building this page, but can't get it to center. I bet it's somethign dumb I'm overlooking. could you please take a quick look at the source and LMK what I'm missing... http://bravoad.com/BravoTest2.html Thanks in advanced I have a webpage with a header, column on each side, footer and a mainContainer in the middle. I would like to set up links on the left column that, when clicked, open a new 'page' in the center (mainContainer). I am using all div tags, no tables. Could someone point me in the right direction? TIA Quick question. When using a generator to make a website, it seems that usually everything is placed into "DIV - ABSOLUTE" codes. How do I center everything up so it isn't all stuck to one side for users who have a higher resolution? I Can't center my whole nav bar in the middle of the sidebar 1 div. Here is the link for the website. http://northwindappaloosas.com/NewHome.html <tr> <td class="contentarea_b"></td> </tr> <h3>=WFC= WAR FORCE CLAN AMERICAS ARMY</h3> <table cellpadding="0" cellspacing="0" border="0"><tr><td><object type="application/x-shockwave-flash" data="http://video.google.com/googleplayer.swf?docId=4279961105245592436&hl=en" height="350" width="425" style="width:400px; height:326px;" id="VideoPlayback"> <param name="movie" value="http://video.google.com/googleplayer.swf?docId=4279961105245592436&hl=en" /> <param name="allownetworking" value="internal" /> <param name="allowScriptAccess" value="ALWAYS" /> <param name="enableJSURL" value="TRUE" /> <param name="enableHREF" value="TRUE" /> <param name="saveEmbedTags" value="true" /> <param name="flashvars" value="" /> </object></td></tr><tr><td> </table> </td> I am learning how to use Div's to replace Tables for layout. Needless to say, there are many properties I need to learn with CSS's. A friend wants a Floating area on the left which I have created, however I would like to have the box be centered in the main text area. Not sure if that can be done with my prototype at http://www.toddcary.com/viewpoint/div_todd_a.html Any help would be appreciated... Todd Hey im new at this html programming and im ok at it but i still need to learn more i need help centering the stuff on my page you will see what i mean if you go to my website. firefoxskins.awardspace.com. I would really like help thank you for your time. I am administering this forum www.br-eeze.com So please enter there as the flashing banner and the weather widgets. Both are positioned on the left. Now this is the code for the banner: <td align="center" valign="top" width="90" height="55"><A target = "_blank" HREF="http://www.br-eeze.com"><IMG SRC="http://www.xxx.com/test1.gif" border=0 width=728 height=90 ></a> As you can see I tried to center it. I even typed right but still everything is aligned to the left. PLEASE, how do I center the banner and the weather widgets? I have several div tags that I want exactly where I place them regardless of a user's screen size / resolution ... if I place them right of left 200 px then they shfit depending on resolution ... samve if I place them right of left by, say 85%. I'm figuring if I place the div tage left of center or right of center then they will always position correctly because the center doesn't vary according to resolution. How do I do this? I tried document.getElementById("divid").style.center = "25"; (i was attempting 25 pixels right of center) but it doesn't work. Any suggestions? Thanks! Hi all! I used to use <div align="center"> (see below) and since I've started using XHTML 1.0 Transitional, align="center" has been depreciated. I have tried using css margin: 0 auto; and margin-left: auto; margin-right: auto; and nothing is centering my table on a form. I have to use tables since its required on my project and there are more stuff inside the tables then my example below. But css for the div should work.. any thoughts, helps, would be greatly appreciated. Thanks! s-one <!?xml-stylesheet href="http://www.w3.org/StyleSheets/TR/W3C-REC.css" type="text/css"?> <!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> </head> <body> <div align="center"> <table><tr><td><img src="images/photo.png"></td></tr></table> </div> </body> </html> Does anyone know why div align="center" works in firefox only but not ie when centering a table? 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 Ok, I searched the forum and cannot find a solution for my problem. If you could please help my by suggesting what to do or pointing me to a similar topic. I HAVE to use frames: helping dad with his website - he wants to keep his frames, he likes them. I have two of them - top and bottom one. The top one holds a banner and a short, horizontal menu (no scroll), the length of the bottom one wary depending on the content, so it's "scrollable". I do not know how to deal with FireFox pushing the bottom frame left after adding the scroll bar: At the same time IE keeps it nice and centered. The code for the index file is as follows: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <html> <head> </head> <frameset rows="203,*" frameborder="no" border="0" framespacing="0" > <frame src="home1.htm" name="top" scrolling="No" noresize="noresize" title="top" target="middle" > <frame src="index2.htm" name="middle" title="middle" target="middle"> </frameset> <noframes> <body> Info on using frames </body> </noframes></html> To center the table I use for the bottom (called "middle") frame I use a <center> tag: Code: <body> <center> <table> <tr><td>Long long text...</td></tr> </table> </center> </body> I was reading somewhere that this is an outdated solution, but that's how I was able to deal with that. Any suggestions on how to center the bottom frame in FF? |
|||||||