|
HTML - Center Images And Paragraph In Div
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 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 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 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 -->
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? Hello guys . As everybody knows , <DIV> and <P> are really necessary elements in web pages . Bye the way , I wanna have a limited paragraph . Imagine , I have paragraph ( 300 X 400) . I wanna limit text to this paragraph . I mean , when I put a lot of words and characters in this paragraph , the text goes to next line automatically . Like this forum . When you put your text here , If it's a long text , it'll be separate to several lines and doesn't take one long line . for example , please check me personal web site . first post of this site has taken a long line and destroyed everything . I put it the text in limited paragraph , div , table and etc but it didn't work and again shattered boarders and didn't attention to size of elements ( width and height ) . http://ehsanrajabi.ir Hi, is there anyway to make a sup on a paragraph? if so, could you tell me how, please? Paul Weinstock I am needing to place my paragraph alongside my title.. I am using the following code..
Code: <div align="justify"><strong><font color="#306">TopicHere</font></strong><br />TextHere</div> The above is not giving me what I need, What I need is shown here .. What I need is here Thank You for your help David I have a simple website at justinrepairs.com. The code is all plain old HTML. I have tried adjusting everything I can think of to make the owner's name in column 1 fit on 1 line. I've widened rows, columns, etc. Please help if you can. The source code should be right there for you to see. Thanks so very much for any and all help! http://www.iankovi.com/htmlllll.html http://www.iankovi.com/csssss.css Any suggestions? I confess that I am a total 'noob' at 74 years old, and will probably get flamed for this question - but here goes - I have taken the on-line HTML course for basic set up and have built a web page; however, it is so bad I do not want to launch it until I can get some issues corrected. PROBLEM 1 - I built the file in 'notepad' text writer. When I look at my internet at 'open', 'brouse', 'index.html' file, and select 'OK', the features show up as I want; however, when I upload the file to my web page, the image is a square with a red X. I set up the image by adding the following line to the file: <img src="xxx.jpg"> PROBLEM 2- In spite of adding <p> </p> at the beginning and ending of my paragraphs, after uploading, the webpage displays each paragraph of text as one long line of text. Can someone advise where I am going wrong? Bob Hi everyone, not sure if this is possible but I would like to have a page that has two textboxes - "1: Input" and "2: Output" So if you copy a few paragraphs from MSWord into that first input box, then click a button that says "Convert", the second Output box shows up with the same text only with a full line break in between paragraphs (not put html tags like <BR> in it) My reasoning is that in word, you can distinguish between paragraphs because of tabbing, but when you copy/paste it into a forum post, it just mushes together and becomes very difficult to read, making line breaks the best way to separate. Example: Input: Code: Once upon a time blah blah blah. The next day thirty people died. It was sad. Output: Code: Once upon a time blah blah blah. The next day thirty people died. It was sad. Thank you! Hello everyone, I am new here and I am have a very odd problem with one of my paragraph tags. It is placed at the bottom of the main content just before the footer. Yet it thinks it encompasses all of the content in the main content div. When I use css to make the font bigger, only the paragraph changes font size. None of the other text, such as links, changes font size. That's what's supposed to happen. But when I add a top margin to the paragraph to try to move it down, all of the content in the main content div moves down. I am thoroughly confused. Can somebody help me understand why this is happening? Hello, First post here. I have a quick question regarding the default manner in which Firefox handles different <h> tags. In an html page if I have the following code... Code: Some Text <h3>Headlines!</h3> More Text In Internet Explorer it renders how I want it to like this... --------------------------------- Some Text HEADLINES! More Text --------------------------------- But in Firefox it throws in a hard return before and after the <h3> as such... --------------------------------- Some Text HEADLINES! More Text --------------------------------- I know I need to define an additional property in my h3 class but I am honestly not sure what that would be! Any help is appreciated. I''m trying to center the main title of the page: Combative Conditioning $50 per month http://lmiinc.com/combat_conditioning.html It seems to be off to the right a lot... But I have it text-align: center; Any ideas? Thanks. Hi I noticed that ie6 renders paragraph breakline spaces bigger than ie7 or FF. I got around it by using <br /><br /> instead of <p></p>, but is there a proper workaround to make ie6 conform? Also also tried stipulating the CSS for the p tags, but to no avail: .maintext { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9pt; color:#fff; text-align:justify; line-height:100%; } .maintext p { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9pt; color:#fff; text-align:justify; line-height:100%; } Cheers Shaun This is frustrating, I'm looking for that code, working in IE and Firefox. Please help! NOTE: This is on a WAMP localhost wordpress setup. I have code in a "static" page that I put there in "edit page" view, HTML tag, in wordpress/dashboard that looks like this: Can someone tell me why image2 shows up "INSIDE" the paragraph block when I look at it in "view page" mode? Code: <div class="promo"> <img class="image1" yada yada yada /> <p> yada yada yada </p> <img class="image2" yada yada yada /> </div> I also have this styling in style.php: Code: .image1 {float: left;}
.promo p {float: left;}
.image2 {float: left;}
My intent was to put the paragraph block between the two images. Image1 floats fine; the paragraph floats just fine; image2 floats fine, but, image2 shows up "INSIDE" the paragraph block, not outside it like image1 does. I want image2 outside and to the right of the paragraph block. Both images float fine without the paragraph block, but when I insert the paragraph block between them, image2 leaps inside the paragraph block. Any help on this will be greatly appreciated. I am in the process of re-designing my website. old site www.ghilliesuitsource.com new site still a work in progress www.ghilliesuitsource.com/gss_test I am struggling with 2 things on my new site. 1) The parallelogram (tilted rectangle) images in the background are seperated by paragraph breaks so that I can alternate between left and right aligned. While all of the forground "stuff" text and product images are AP DIV elements so they hold their spacing. Page looks like I intend it to in IE but netscape/firefox appear to use a different paragraph break line size causing the forground "stuff" to appear lower and lower with respect to the parallelograms, and it gets worse the further down the page you go. 2) It appears as though IE will not change text size inside an AP DIV element when you go to "view-Text Size" This is good because I am using a graphic to act as a border around text. Netscape and Firefox do change font sizes in AP DIV elements so when you select a larger fontsize the text "spills" out of the border. If you can help me out with either of these problems I would certainly appreciate it. |
|||||||