|
CSS - Positioning An Image Within A Container
Hi,
I'm trying to position an image in the bottom right of a containing block, but the only way I can get to align perfect all the time, is by using "background-image: url('image.jpg')" attribute. This would be perfect, except I need the image to be a hyperlink. I have a test page up here and the css is here. That's how I want it to look, but can't get the "check me out" image to display in that spot without using the background property. I've tried using a class attribute in an img tag and setting up the css with a position relative, tried removing the p tags, various floats and positions, and a bunch of other things. No matter what I try, the image won't stay in that one spot. Any ideas? Similar TutorialsOk, I have three problems with this test page. 1. How do I force the logo to be always to the extreme left (just over left container) whilst ensuring the menu options stay on the right side? 2. How do I force the menu options to vertically align to the bottom? (So that their baseline matches the baseline of the logo) 3. In FF the right side image is correctly displayed in the right-side container, but in IE the images somehow ends up directly below the left side image! Any idea where I'm going completely wrong? If anyone has sometime to have a look here a a link containing the test page content in a zipped file...zipped test page For reference, I'm testing this with the following browsers... IE 6.0 FF 2.0 Thank you in advance. PS. I can create a page with this (and more complex) layout easily using the html "table" tag (it's what I've been doing for at least a few years), but we don't do things like that any more so I thought I'd better get with the scene and master this div thing once and for all! Using "table" tags for layout is so last century! Hi, I have two images which are on top of each other, and the one on top is hidden. I use JS to change the source of the top to a new image, then fade the top image visible, then change the source of the bottom to be the same as the top, then make the top hidden (and so on and so on). To position the images on top of each other, I am using position: absolute. This works well when the DIV container has a defined height, however, when not the DIV collapses upon itself and the images are not displayed. Any suggestions how I might overcome this? Thanks Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test Heights</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
.mod_rotator
{
position: relative;
overflow:hidden;
height: 100px;
}
.mod_rotate_image {position: absolute;}
img.mod_rotate_image.front {display: none;}
</style>
</head>
<body>
<div class="mod_rotator">
<img class="mod_rotate_image back" src="images/rotator/corporateimage1.jpg" />
<img class="mod_rotate_image front" src="images/rotator/corporateimage1.jpg" />
</div>
</body>
</html>
Hi all I'm building a photo gallery and have a problem. The main images have what looks like a dotted container box surrounding them when you click them. This box has padding either side which I want to either reduce to the size of the image or eliminate all together but don't know how to do this. The link is below. Click a thumbnail then click the larger image to see the dotted line. Thanks for any help. bajor.servers.rbl-mer.misp.co.uk/~sunridge/photob.htm Hello, i'm trying to make a tableless image gallery, each image is inside <span></span> (i don't know the dimensions of the image, it's resized by server side) while the div container expands fine, the span container does not expand to fit the image, and i also don't know how to vertically center it. i can't use <div> because images can be in the same row. Code:
body {
margin:0px
padding:10px;
background-color: #ffffff
}
body, div,span {
font-family: Arial; font-size: 12px; color: #000000
}
a {
color:#000099
}
a:hover {
color:#0000ff
}
div.paging {
padding:10px;
border:1px solid red;
}
div.paging span {
padding-left:10px;
border:1px solid red
}
div.gallery {
padding:10px;
border:1px solid red
}
div.gallery span {
margin:20px;
border:1px solid green;
}
div.gallery img {
border:1px solid black
}
this is the result http://addf.net/tests/m_g/gallery.php is float the only option? must i float every element on the page? what if it's a module for another not floated website? i'd rather not use float or a table. if you could help thank you I'm pretty new to using CSS so please be gentle I'm trying to hack (develop is to lofty a word at this point) this tableless page and get the bg image to stick to the right/top corner of the "content" div. IE6 renders it pretty well but Firefox (my preferred browser) is horrendous. The image size is 400x392. Any thoughts or a good reference on this would be greaty appreciated. <!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 name="generator" content="http://www.inknoise.com/experimental/layoutomatic.php" /> <style type="text/css"> #container { width: 760px; width: 780px; width: 760px; border: 1px solid gray; margin: 10px; margin-left: auto; margin-right: auto; padding: 10px; } #banner { padding: 5px; margin-bottom: 5px; background-color: rgb(213, 219, 225); } #content { padding: 5px; margin-left: 215px; background-color: gray; background-attachment: fixed; background-image: url(images/bg_run.jpg); background-repeat: no-repeat; height: 400px; background-position: right top; } #sidebar-a { float: left; width: 200px; \width: 210px; w\idth: 200px; margin: 0; margin-right: 5px; padding: 5px; background-color: rgb(235, 235, 235); } #footer { clear: both; padding: 5px; margin-top: 5px; background-color: rgb(213, 219, 225); } </style> </head> <body> <div id="container"> <div id="banner">Banner</div> <div id="sidebar-a">Sidebar</div> <div id="content">Content</div> <div id="footer">Footer</div> </div> </body> </html> Hi, the new Drupal site I've developed is artemis2taste (dot) gr for an ice cream shop in Greece - The site loads fine in Firefox, Chrome and Opera but not in Internet Explorer (versions 6,7,8). I would appreciate it if you could visit my website and take a look at my css. The main content area is divided in two columns by the "composite layout" module. The "last" column (the one on the right) contains collections of images for each one of the site's pages. I've used a jQuery script to make a slideshow with simple next/previous buttons for the photos that appear there. The problem is I tried so many combinations of floats, padding, margins, inline etc for the right column and the photos keep stacking one below the other (you can only see a small part of the second image, as I have a fixed height for the container div), also hiding the slideshow navigation links. I can't find a way to make these images appear on the same horizontal direction... I would really appreciate suggestions on how to solve this issue... Thanx in advance Hi There - Have a simple container div containing two other divs, top and content. My problem is that I can't get the colorboxtop to stick to the top of its container. There's a wayward space. Can't find any stray margins or padding hanging around. Perhaps fresh eyes can see what I cannot. Please let me know. Any help you can give me would be greatly appreciated. Thanks! Code:
<body>
<div class="colorbox">
<div class="colorboxtop">
<h2>title goes here</h2>
</div><!-- /colorboxtop -->
<div class="boxcontent">
<p>You should read this and <a href="#">Click Here</a>.</p>
<a title="Go Here!" href="#">[button]</a>
</div><!-- /boxcontent -->
</div><!-- /colorbox -->
</body>
No great complexity there...here's the CSS: Code:
body {
color:#666666;
font-family:Lucida Grande,Verdana,sans;
font-size:10px;
font-size-adjust:none;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:13px;
}
.colorbox {
margin-bottom:9px;
padding-bottom:15px;
width:300px;
border:thin solid #CCCCCC;
}
.colorbox h2 {
color:#FFCC33;
}
.colorbox {
color:#CC6633;
padding:0px 20px 15px;
margin-top:0;
margin-bottom:10px;
}
.colorboxtop {
background-color: #dddddd;
height:50px;
color:#666666;
background-image: url(images/bg_Tiles/stripe-dk-blue-green.png);
padding:auto 20px;
}
.colorbox a {
color:#C5DBE9;
font-weight:bold;
text-decoration:none;
}
HTML -- CSS I decided my last layout looked like poop so I'm changing it. In FF the center logo fits right in the middle of the background image to give it a stretching effect. In IE the image is slightly above the baseline. (maybe 3-5 px) Any help here? I'm new to CSS. What is the best way to position an image? I tried using this: #image { position: absolute; top: 234px; left: 567px } But for some reason it doesn't work...How can I position an image? Thanks PS another thing that's been bothering me is when do you put: (in the external stylesheet) .image {..... } when do you put #image {...... } and when do you put *#image {...... } What's the difference between them and what circumstances do you use them in? In the code below, why is the image not positioned at the very top of the DIV in IE only (seems to be fine in FF)? Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<style>
.test {
width: 200px;
height: 100px;
border: 1px solid #003366;
}
.image {
position: relative;
left: 0px;
top: 0px;
}
</style>
</head>
<body>
<div class="test">
<img class="image" src="images/block_up.gif" width="11" height="11" border="0" alt="">
</div>
</body>
</html>
I have the following Code:
<td rowspan="2">
<img class="gallerypic" name="<?php echo $pic['filename']; ?>" src="pictures/thumbs/<?php echo $pic['filename']; ?>" width="<?php echo $pic['thumb_width']; ?>" height="<?php echo $pic['thumb_height']; ?>">
</td>
<td>
<div class="header">Caption</div>
<div class="captionText">CaptionText</div>
</td>
I want the two div's to be positioned at the top of the TD they are in. I tried all different positioning stuff in thee CSS for their classes. What am I missing here? I really hate CSS sometimes. Do I need to style the TD to get this working? Is this possible with css? I have a single table cell thats 100% wide. I want an image left aligned, an image right aligned and a background image spaning the entire cell. I also want to type text into the cell between the two images. Using html I get bugs in IE so I think css might be the better option? Here is the website i am struggling with, http://www.richmondsproperty.co.uk/ . i am trying to place a linked image in the top right corner, above the phone number without moving anything else. I tried to put it in a div and use float right but it just pushed everything else down. Here is the code being used Code: <div id="header">
<div id="header_logo">
<a href="<?php echo base_url(); ?>"><img src="/public/images/logo.jpg" alt="Primmer Olds logo" /></a>
</div>
<div id="top_menu">
<ul>
<li><a href="<?php echo base_url(); ?>" <?php echo ( uri_string() == '' ? ' class="down" ' : '' ); ?>>home</a></li>
<li><a href="<?php echo base_url(); ?>about-us/" <?php echo ( preg_match("/\babout-us\b/i", uri_string()) ? ' class="down" ' : '' ); ?>>about us</a></li>
<li><a href="<?php echo base_url(); ?>why-choose-us/" <?php echo ( uri_string() == '/why-choose-us/' ? ' class="down" ' : '' ); ?>>why choose us</a></li>
<li><a href="<?php echo base_url(); ?>lettings/" <?php echo ( uri_string() == '/lettings/' ? ' class="down" ' : '' ); ?>>lettings</a></li>
<li><a href="<?php echo base_url(); ?>news/" <?php echo ( preg_match("/\bnews\b/i", uri_string()) ? ' class="down" ' : '' ); ?>>news</a></li>
<li><a href="<?php echo base_url(); ?>community/" <?php echo ( uri_string() == '/community/' ? ' class="down" ' : '' ); ?>>community</a></li>
<li><a href="<?php echo base_url(); ?>home-sale-network/" <?php echo ( uri_string() == '/home-sale-network/' ? ' class="down" ' : '' ); ?>>home sale network</a></li>
<li><a href="<?php echo base_url(); ?>contact-us/general/" <?php echo ( preg_match("/\bcontact-us\b/i", uri_string()) ? ' class="down" ' : '' ); ?>>contact us</a></li>
</ul>
</div>
</div>
Code: #header {
margin: 0 auto;
text-align: center;
padding: 0;
width: 980px;
height: 166px;
background: url(/public/images/header.jpg) no-repeat bottom right #e6e6e6;
}
#header_logo {
float: left;
margin: 0 0 0 0;
width: 166px;
height: 166px;
background-color: #dc006c;
}
#header_logo img {
margin: 0;
width: 166px;
height: 166px;
}
Any help would be appreciated, thanks! please look at this link http://sudhakargolakaram.co.in/image.html my question is how to place the image which has a curve design starting from the left till the right along with the 3 square images in between keeping this image aside the width of the wrapper is 825px which is fine the 1st div after the wrapper has content within the dark green at the very top and its width is the same as the wrapper which is 825px and the div after this are also 825px in order to have this curve image whose width is 1204px and height 266px as the 2nd div is what i need help with as of now my code is #wrapper { width: 825px; margin: 0 auto; } #contentwrapper{ float: left; width: 825px; height: 1900px; } #toprowouter{ float: left; width: 825px; height: 25px; } #menu{ float: left; width: 825px; height: 57px; color: #fff; } and code for other divs just for the sake of this 1 image with 1204 X 266 i guess it is really not needed to change the wrapper to #wrapper{ width: 1204px; margin: 0 auto; } and there after all the other divs will need to have a width of 1204px and i will have to apply padding on left and right to a container div so that the actual content will have a width of 825px how is it possible to have the image with 1204 X 266 sit inside the wrapper whose width is set to 825px or should i change the wrapper width to 1204px just because of this big image please provide the code for this thanks. I'm working inside of a classifieds software app and trying to position a button inside an area that I don't have access to the raw HTML. I built the image file and I know where I want it to appear on the page, but don't know the correct parameters to put in to get it there. I would like it to find the center of the page then go left 190 pixels and be about 400 pixels down from the top. Site is http://www.ineedihave.com. I am building a site and using CSS selectively where I need to control positioning. The site is tapmytrees.com I am having an issue controlling the positioning of the "Add This" image at the footer of the page. I am able to position this right, center, or left, but other than that, have no luck. Currently I am using the following code: #divAddThis { text-align:center; } I am able to use this code to control the positioning of the line below this image: #divLive { float:left; /* moves to right in footer*/ left:-24px; /* adjusts position */ position:relative;/*needed for left and bottom to work*/ text-align:left; /*align text*/ bottom: 5px; /*move up a bit off the search line*/ } When I try to apply the same code to #divAddThis, it has no effect. In fact, using code similar to #divLive, it does not even show up when viewing the results in FireBug. Any suggestions are appreciated. Thanks. I've got the following code written for a web site that I'm supposed to look at moving toward CSS. I'm just begining and am already noticing the discrepancies between IE and Mozilla (Firefox). Mozilla seems to be separating images larger than it should. I know this is(was) a problem with IE, but didn't expect to see it in Mozilla. Any suggestions? I can supply code and a reference page if needed. Thanks for any help. Hello! If i need to put background-image at the bottom of display i use such css rule: background-position: bottom; but in my case i need image to be fixed in right bottom corner. apparently i cant use two declarations like: background-position: bottom; background-position: right; so how could i attain this via just CSS? |
|||||||