CSS - Positioning An Image In A Div

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 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?

I am very new to web design. I had an old friend of mine design this website for me: directdevelopmentinternational.org

I am now trying to use what he did for that website you put together my bands website: throughtheconcreterecords.com

I am trying to get the navigation bar to sit inside of the blank white box I have created in my header image. I also just want the text to be black and maybe when highlighted change to a different color. I also am trying to make it so when you click the burning book logo in the upper left corner it brings you back to the main page.

I am having a terrible time figuring out how to do this as I am not sure what all of the different techniques are referred to. Any help at all would be much appreciated!

I need to have numerous images overlap exactly on top of one another at the upper left corner of a frame cell.

When I use absolute positioning, the image is not where it is supposed to be in relation to the table cell.

Relative works, but I cannot seem to overlay the images, as adding images via relative layers just acts as if the images are not in layers at all (i.e. they take up the same space that they would in a normal flowing page)

Is there any way I can make the images be placed relative to the corner of the table cell?

I'm somewhat new to layers, so any help would be greatly appreciated.

Here is example code


<TABLE WIDTH=500 HEIGHT=500 BORDER=0>
<TR>
<TD width=300 height=100>

Need image1 to go in this cell, as well as image2, image3, and image4. All need to overlap perfectly in relation to the constraints of this table cell.

Here is the code I use in the cell for the first 2 layers which just flow one under the other- yet I need them to overlap.

<div id="Layer1" style="position:relative; width:518px; height:322px; z-index:1; visibility: visible;"><img src="images/Map2.gif" usemap="#Map" border=0></div>
<div id="Layer2" style="position:relative; width:518px; height:322px; z-index:2; visibility: hidden;"><img src="images/iloverlay.gif" usemap="#Map" border=0></div>

</TD>
<TD></TD>
</TR>
<TR>
<TD></TD>
<TD></TD>
</TR>
<table>

I have an image I want to use as the header graphic on a website. The image is 800px wide and the table is 700px wide. The graphic is meant to overlap both ends of the table. I am putting the image inside the td of the table and then setting the position to -90px relative to the table to move it across the correct amount. The problem I'm having is that the table changes width to 800px to accommodate the image. I tried putting the image outside the table but can't get the image to maintain its position relative to the table (ie when the screen width changes)
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>Untitled 1</title>
<style type="text/css">
html, body { height: 100%; }
#maintable 
{ 
	height: 100%; 
}

.logoStyle {
	position: relative;
	left: -90px;
	display: block;
	top: 0px;
	visibility: visible;
}

</style>
</head>

<body style="margin: 0; background-color: #D1D1D1">



<table style="width: 700px" align="center" bgcolor="#FFFFFF" id="maintable">
	<tr>
		<td valign="top">
		<img alt="Logo" src="images/header.png" class="logoStyle" />
		&nbsp;</td>
	</tr>
</table>

</body>

</html>

Can anyone let me know what I've done wrong?

I am recoding the site jthensley dot com (The forum wouldn't let me list the site needing assistance) to HTML 5 and CSS. I've redesigned some features, which are basically already in the new layout, at jthensley dot com / 2012alpha The 2 horizontal neon lines and the vertical line are simply repeated outside of the header by the CSS. However, one problem I have is that the vertical line that is repeating becomes unaligned with the header if the browser window is expanded. Is there anyway to have it as a repeating background, set to begin at a certain pixel position, and move to the right to maintain alignment with the header as the page is expanded?

Secondly, at the bottom, you have the copyright line, which I plan to use as a repeating background or image, as well, and my picture to the right, standing on top of the copyright line. Idealy, I would like the picture of myself to be in a certain area, and push down as page contents make the page longer, but maintain it's "link" with the footer. Any suggestions on how to achieve that? Thanks for your help! This is quite a refresher/learning experience for me!

The CSS I have already written is below.

* {
margin: 0 auto;
padding: 0;
}

body {
font-size: 62.5%;
font-family: Helvetica, sans-serif;
color: white;
background-color: #000000;
background-image: url(images/horzneon.png), url(images/horzneon.png), url(images/verneon.png);
background-position: 0px 137px, 0px 172px, 250px 0px;
background-repeat: repeat-x, repeat-x, repeat-y;
}

ul#nav {
height: 185px; width: 1024px;
margin: 0 auto;
background: url(images/header.jpg) no-repeat;
}
height: 185px; width: 1024 px;

I'm trying to be a good forward-thinking web designer and am giving the xhtml/css design thing a try with the site I'm currently building. The challenge is to do the whole layout without using a table, but I'm having a hell of a time.

You can see the site now at: http://epoch.pursuedbybear.com - currently, I've got the header and footer table-free, but it's the main content area that's giving me trouble. It's using a table right now, since that's so easy, but I'd like to fix that.

Here's what I want: the page is 750 pixels wide, centered. I would like the text to be on the left taking up about 400 pixels, with the margins it currently has. I would like the image to be on the right, aligned to the very edge of the header and just underneath it - no gaps. I would like a 1px black border on the left and right.

I can ALMOST get there with CSS, but everything I've tried has put the image slightly off (typically not flush against the header or after the text entirely). - you can see my latest efforts at http://epoch.pursuedbybear.com/page2.shtml.

Can anyone offer advice on this? I feel so close, but so infuriatingly far...

Thanks,
Daniel

Hello,

I don't know whether this is the right forum for my issue, so apologies if it isn't.

To better understand the problem, kindly visit this page:

http://www.lightblu.com/contact.php

Basically, you see those 4 social networking logos? They are at the right position. However, when you click "Submit (without writing anything anything in the form), the errors will display, and the logos will shift downwards as a result. I don't want this. I want the logos to be at the same position.

Question: how could I do this? I'm trying to find the logic first before implementing it, which I can't even figure out.

Thanks guys

Hi All,

I'm trying to add an image that will remain fixed on the screen, and I'm having a hard time positioning it using CSS. I already have a background image for the body (which is tiled), and this image needs to sit above that image, but below the rest of the content.

Here's my code as it stands now:

CSS:
Code:

@charset "utf-8";
body {
	font: 100% Verdana, Arial, Helvetica, sans-serif; 
	margin: 0;
	padding: 0;
	text-align: center; 
	color: #000000;
	background-image: url(../assets/images/space_2_background.jpg);
	background-repeat: repeat;
	margin: 0;
	background-attachment: fixed;
}
 .oneColElsCtrHdr    #sirius2  {
	background-image: url(../assets/images/sirius_2.png);
	background-repeat: no-repeat;
	position: fixed;
	padding-top: 123px;
	padding-left: 743px;
} 

.oneColElsCtrHdr #container {
	width: 58em; 
	border: 1px solid #000000;
	text-align: left;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	padding-top: 30px;
	padding-bottom: 30px;
}
.oneColElsCtrHdr #header {
	background-image: url(../assets/images/header_background.png);
	background-repeat: no-repeat;
	height: 73px;
	padding-top: 0;
	padding-right: 10px;
	padding-bottom: 0px;
	padding-left: 20px;
} 
.oneColElsCtrHdr #header h1 {
	margin: 0; 
}
.oneColElsCtrHdr #logo {
	padding-top: 15px;
	padding-left: 3px;
}

.oneColElsCtrHdr #mainContent {
	background-image: url(../assets/images/page_1_background.png);
	background-repeat: no-repeat;
	padding-right: 20px;
	padding-bottom: 0;
	padding-left: 20px;
	padding-top: 0px;
	height: 520px;
}
.oneColElsCtrHdr #footer {
	background-image: url(../assets/images/footer_background.png);
	background-repeat: no-repeat;
	height: 244px;
	padding-top: 0;
	padding-right: 10px;
	padding-bottom: 0;
	padding-left: 10px;
} 
.oneColElsCtrHdr #footer p {
	margin: 0; 
	padding: 10px 0; 
}

HTML:
Code:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sphere Nine Media</title>
<link href="css/main.css" rel="stylesheet" type="text/css" />
</head>

<body class="oneColElsCtrHdr">
 <div id="sirius2"></div> 
<div id="container">
<div id="header">
<div id="logo"><img src="assets/images/sphere_nine_logo_v9.0.1(website).png" alt="Sphere Nine Media Logo" width="191" height="37" /></div>
  <!-- end #header --></div>
  <div id="mainContent"> 
	<!-- end #mainContent -->
  </div>
  <div id="footer">
   
  <!-- end #footer --></div>
<!-- end #container --></div>
</body>
</html>

The code specific to this image is in bold red . I've tried coding this image both as a straight image and a background image, and I've gone through numerous iterations of changing positioning/padding/margin values, to no avail. The current code is the only variation I've happened upon that actually renders the image on the screen - you can see it live at http://www.spherenine.com/.

Please let me know if this can be done using my current approach, or if there's a better way to accomplish it. I'll be happy to provide additional info if necessary.

Thanks in advance.

Sam

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?

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.

Hey everyone, im having a problem. I am trying to get a picture fixed at the bottom of the screen and am stuck. Do i do it as a footer or do i do something else? Can anyone help me please cheers.

hey all,

i'm trying to figure out how to position text in an h1 tag that uses a background image, without adding extra markup. i just need it 15px from the left of the image, and 10px from the top.

here's the css for the h1 tag:
Code:

h1 {
height:50px;
width:100%;
background:white url(images/h1_background.gif) no-repeat left;
margin-top:12px;
color:white;
font-size:11pt;
}

and the html is just;
Code:

<h1>welcome</h1>

thanks!