|
CSS - Image Positioning: This Works But Is It Correct?
I've bee fooling around with something that has no real purpose (but could) to try to understand an image positioning problem that I'm trying to avoid solving with tables. I hacked this CSS out, and it looks exactly and acts exactly like I want, but I can't help thinking it's not correct, especially how I deal with the "up" and "down" control images...
Originally, I had thought the way to do this thing would be 5 distinct DIVs inside a container DIV, but as it turned out, one of the five turned into the container for all... This looks the same in FF and IE, which is what I want... The code can be seen in a browser he SiliconSatan.com/test.html Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test</title>
<style>
.col_tab_left {
position: relative;
width: 36px;
height: 30px;
left: 0px;
top: 0px;
background-image: url(./images/col_tab_left.gif);
}
.col_tab_middle {
width: 430px;
height: 30px;
position: absolute;
left: 36px;
top: 0px;
background-image: url(./images/col_tab_bg.gif);
text-align: center;
}
.col_tab_right {
width: 26px;
height: 30px;
position: absolute;
left: 466px;
top: 0px;
background-image: url(./images/col_tab_right.gif);
text-align: center;
}
.col_tab_title {
font-family: "Comic Sans MS", san-serif;
font-size: 10pt;
font-weight: bold;
line-height: 30px
}
.block_up {
width: 36px;
height: 30px;
border: 0px solid #003366;
left: 5px;
}
.block_down {
width: 36px;
height: 30px;
border: 0px solid #003366;
position: absolute;
left: 13px;
top: 0px;
}
.image {
position: relative;
display:block;
left: 7px;
top: 12px;
}
</style>
</head>
<body>
<table border="1">
<tr>
<td width="200">This is some text</td>
<td>
<div class="col_tab_left">
<div class="block_up">
<img class="image" src="images/block_up2.gif" width="9" height="9" border="0" alt="">
</div>
<div class="block_down">
<img class="image" src="images/block_down2.gif" width="9" height="9" border="0" alt="">
</div>
<div class="col_tab_middle"><span class="col_tab_title">TEST</span></div>
<div class="col_tab_right"></div>
</div>
</td>
</tr>
</table>
<br>
<div class="col_tab_left">
<div class="block_up">
<img class="image" src="images/block_up2.gif" width="9" height="9" border="0" alt="">
</div>
<div class="block_down">
<img class="image" src="images/block_down2.gif" width="9" height="9" border="0" alt="">
</div>
<div class="col_tab_middle"><span class="col_tab_title">TEST</span></div>
<div class="col_tab_right"></div>
</div>
</body>
</html>
Similar TutorialsHey guys, at sev<dot>nj-webdesigner<dot>com/firm/profile.html - on the bottom of the page if you mouse over the first couple ticks (by "1928"), a hidden div displays above the tick mark. The positioning works as expected in Firefox and IE7, but the positioning is off in IE6. Any ideas why there is a difference and how to fix it? Thanks. Hello all. I wouldn't say that I'm a CSS n00b because I've been using it for a while but this is my first attempt at trying to build a site without tables using CSS. I looked at a few examples online and came up with the following for the page itself: Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"
<html>
<head>
<title>My Site</title>
<script src="scripts/js/main.js"></script>
<link rel="stylesheet" type="text/css" href="stylesheets/main.css">
</head>
<body>
<div id="logo_search">
<form name="search_form" method="POST" action="" onSubmit="return validate_form(this);">
<div id="logos">
<img align="absbottom" src="images/logo.png"><img align="absbottom" src="images/curve.png">
<input class="search_field" type="text" name="search_field" size="20">
</div>
</form>
</div>
</body>
</html>
Where the contents of main.css are as follows: Code:
body {
margin: 0;
padding: 0;
background: #0081b3; } /* end body */
#logo_search {
display: block;
background: #ffffff; }
#logos {
display: compact;
background: #ff0000;
margin-left: 200px; } /* end #logo */
.search_field {
text-align: right;
margin-left: 400px; } /* end #search_field */
form {
margin: 0;
padding: 0;
} /* end form */
Thinking tabularly (I know, I can't help it), what I'm trying to accomplish is to position these items on a single row with the search field about 25-50px from the right edge of the browser and the first image beginning about 200px from the left edge of the browser with white space from the image to the left and red from the image to the right. The code I have accomplishes this task however when the browser window shrinks, the search field wraps below the images so I'm thinking that there is a better way to do it than what I was doing. Hey all! I tried this forum once before and no one helped me, but I hope someone can help me now. I scrapped the design of the last problem and started over, so now I have new problems. I got a Blogger template off the internet and all of the pages work fine except the homepage and calendar page that I made in Dreamweaver to try to look like the blog pages. In internet explorer, it doesn't work right. It looks okay in Firefox. It looks better in internet explorer with...oh...that google add-on installed...cannot remember what it is called. What can I do to fix the coding. Please help! I am self taught and this is driving me crazy. You have no idea how long it took me to get it to where it is now! www.hanoverlutheran dot com I have tested in Mac FF and Safari and PC FF and my page appears correct. In IE7, the images at the bottom (#bottom) don't match up (with #nav). If I delete the 10 px padding on #bottom, it appears correctly in IE7, but not the other browsers. Can anyone tell me why this is happening? Is there a bug fix somewhere? Unfortunately, this forum won't let me post my url because I'm new, so I'm not sure how to describe what is happening without a visual, but here goes: I have a background image that encompasses the entire page. Because of my rollovers on my images at the bottom (contained in #bottom), I kept the background when making the images. The background on the images in #bottom do not match up with the background, thereby creating a disjoint, or "leap," between #nav and #bottom. Why would this happen in IE7 and not FF or Safari? (See first paragraph for padding explanation.) css: @charset "UTF-8"; #outer { width: 723px; background-image: url(images/art_bground.jpg); background-repeat: no-repeat; position:relative; float: none; margin: 0 auto; } #bottom { margin: 0px; height: 312px; padding-top: 10px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; img display: block; } #body { margin-top: 0px; margin-right: 25px; margin-bottom: 0px; margin-left: 260px; height: 208px; padding-top: 25px; padding-bottom: 0px; } a:link { color: #c33b03; text-decoration: none; } a:visited { text-decoration: none; color: #996600; } a:hover { text-decoration: none; color: #6a2e09; } a:active { text-decoration: none; color: #6a2e09; } .text {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #6a2e09;} .navtext { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bolder; color: #c33b03; margin-top: -10px; } .bold { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bolder; color: #c33b03; font-style: normal; } #nav { margin-top: 0px; margin-right: 25px; margin-left: 520px; margin-bottom: 0px; height: 178px; } Hi all, Wondering if anyone knows a tweak to make the following work in IE7 using pure CSS? I have an image that grows when it is rolledover. Css simply as follows: .graph { width: 200px; height: 50px; } .graph:hover { width: 600px; height: 150px; } Works fine in FF (as usual!) Regards Charlie Hi Everyone, I'm having a problem with IE rendering correctly. I'm experimenting with using all div's in my pages now, and I'm not very familiar with the quirks of IE. I have created a sample page, and I'm really confused as to what is going on in IE. FF renders the page exactly as I expect. IE renders the page with everything in the correct location, but it seems to double the background image for a sub-div section that is moved up using a negative margin (#menu { ... margin-top: -200px; ... }). Also, this "duplicate background" seems to "flicker" on and off in certain areas, but part of it is always there. (I think there may be more than one duplicate?) To view what's happening, check it out in FF, and then in IE: example.com/HTML example.com/CSS I have very little code, and I'm not sure what is the relevant part: CSS: Code:
.logo_banner { background-image:url(../images/new/logo_web1.png); background-repeat:no-repeat; background-position:left top; height:188px; }
.spacer { height:10px; }
.spacer_10px { height:10px; }
.spacer_40px { height:40px; }
.spacer_50px { height:50px; }
.spacer_separator { height:1px; background-image:url(../images/bg_separator.png); background-repeat:repeat-x; background-position:center top; }
#menu { height:50px; margin-left:200px; margin-top:-80px; }
#home_btn { background-image:url(../images/new/home_btn_web.png); background-repeat:no-repeat; background-position:left; height:50px; }
#home1_btn { background-image:url(../images/new/home_btn_web.png); background-repeat:no-repeat; background-position:left; height:50px; margin-left:120px; margin-top:-50px; }
#home2_btn { background-image:url(../images/new/home_btn_web.png); background-repeat:no-repeat; background-position:left; height:50px; margin-left:240px; margin-top:-50px; }
#home3_btn { background-image:url(../images/new/home_btn_web.png); background-repeat:no-repeat; background-position:left; height:50px; margin-left:360px; margin-top:-50px; }
#home4_btn { background-image:url(../images/new/home_btn_web.png); background-repeat:no-repeat; background-position:left; height:50px; margin-left:480px; margin-top:-50px; }
.spacer_dotted_line { background-image:url(../images/new/dotted_line.png); background-repeat:repeat-x; width:860px; height:2px; margin-left:auto; margin-right:auto; }
.div_body_top { background-image:url(../images/backgrounds/bg_dark_body_top1.png); width:900px; height:20px; background-repeat:no-repeat; }
.div_body_middle { background-image:url(../images/backgrounds/bg_dark_body_middle1.png); height:auto; background-repeat:repeat-y; padding-left:20px; padding-right:20px; }
.div_body_bottom { background-image:url(../images/backgrounds/bg_dark_body_bottom1.png); width:900px; height:20px; background-repeat:no-repeat; }
.footer_bar { background-color:#2B2D20; height:60px; text-align:center; }
.footer_text { font-family:Geneva, Arial, Helvetica, sans-serif; font-size:10px; color:#FFFFFF; line-height:60px;}
.text_style_body { text-align:left; font-family:Geneva, Arial, Helvetica, sans-serif; color:#CECECE; font-size:10px; }
.content_body { height:auto; width:900px; margin-left:auto; margin-right:auto; }
.text_area { padding-top:10px; padding-left:20px; padding-right:20px; padding-bottom:20px; width:860px; margin-left:auto; margin-right:auto; }
And here is the 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 http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Test Page 1</title> <link href="styles/style.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="container"> <div class="content_body"> <div class="div_body_top"></div> <div class="div_body_middle"> <div class="logo_banner"></div> <div id="menu"> <div id="home_btn"></div> <div id="home1_btn"></div> <div id="home2_btn"></div> <div id="home3_btn"></div> <div id="home4_btn"></div> </div> <div class="spacer_10px"></div> <div class="spacer_dotted_line"></div> <div class="spacer_40px"></div> <div class="text_style_body"> Here is some content. Love that content. One day this text will actually say something. ... <br/> <br/> Here is some content. Love that content. One day this text will actually say something. Here is some content. Love that content. One day this text will actually say something. Here is some content. Love that content. One day this text will actually say something. ... </div> <div class="spacer_50px"></div> <div class="spacer_40px"></div> </div> <div class="div_body_bottom"></div> </div> <div class="spacer"> </div> <div class="footer_bar footer_text">Copyright 2008</div> </div> </body> </html> Any help is GREATLY appreciated. Thanks! Hi all, I have a problem in scaling images, I re-size all images by -50% to make them act as thumbnails at the following address: http://www.magic-photography.co.uk/photoselector.html It works fine in Chrome using the following simple CSS: Code: a img { border: none; height: 50%; width:auto; text-align: left; }
however in IE/Firefox the images do not re-scale at all. Very very grateful for any help offered. Thanks Hi all, I've tried both the "shorthand" and regular version of BORDER attribute, and neither works, Yet outline works fine (but I don't want to use that since IE7 doesn't support it). Anyone able to troubleshoot this? Here's part of the CSS code (the ".thumb" class at the end is what's not working) and below that is the url. CSS Code: Original - CSS Code .gallerycontainer{ position: relative; text-align:right; margin-left: 0em auto; margin-right: 0em auto; /*Add a height attribute and set to largest image's height to prevent overlaying*/ } #thumbBox{ /*Outermost DIV for thumbnail viewer*/ position: absolute; left: 2.5em; top: -4em; width: auto; height: auto; padding: .5em; padding-bottom: 0em; background: #313131; visibility: hidden; z-index: 5; cursor: hand; cursor: pointer; } #thumbBox .footerbar{ /*Footer DIV of thumbbox that contains "close" link */ font: bold 1em arial; line-height: 1.1em; color: white; padding: .5em 0; text-align: right; } #thumbBox #thumbImage{ /*DIV within thumbbox that holds the enlarged image */ background-color: #CCC; } #thumbLoading{ /*DIV for showing "loading" status while thumbbox is being generated*/ position: absolute; visibility: hidden; border: .125em solid black; background-color: #EFEFEF; padding: .5em; z-index: 6; } .thumb { margin: .5em .5em .5em .5em; height: 8.5em; width: 8.5em; border-style: dashed; border-color:#CCC; border-width:.125em; }
.gallerycontainer{
I don't think I have the 5 requisite posts, so here's the url in question (# = .) & (| = /) http:||www#bauerbuiltmfg#com|db-series-planters#html Thanks in advance for any help! This is my code essentially: <div id="bottom"> <div style="float:left">store hours</div> <img src="map"> <div style="float:right">contact info</div> </div> It looks fine in Safari but it messed up in Firefox. I fixed it a bit by adding overflow:auto to the parent item (bottom div), so it actually has the red background and doesn't collapse. I haven't yet uploaded that fix yet as the problem still isn't solved. Now the div is expanding too much because the 3 items aren't being displayed inline. In firefox the image is pushing the first div beneath it. Any solutions please? 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>
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 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? 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 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? 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! 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? 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? 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'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. |
|||||||