Floated or flanked image? Extra div?

parrotsnest · 05-24-2009, 12:02 AM

Hey guys, first time posting here, and have a question on how to do something.

I'm working on a design template, here:

http://cmykwebdesign.com/temp/02/

I'm interested in putting some sort of added imagery, in one of the boxes to the right or left of the middle column in the green space. I've thought about absolute positioning.. but I don't know how to get it to work w/ window resizing, as far as staying in the same position in relation to the center fixed width division. Also if you see any glaring problems, let me know, much appreciated. Always looking to learn something new.

Here is my CSS:

Code:

body {
  font-family: Verdana, Geneva, Arial, helvetica, sans-serif;
  background-color:#000000;
  padding: 0;
  margin: 0;
  color:#FFFFFF;
  background: #8DC8D7 url('img/tophalf.jpg') repeat-x top left;
}

#wrapper {
margin: 0 auto;
width: 700px;
background:  url('img/wrapper.png') repeat-y center;

}

#tophalf { 

padding: 36px 1px 0 1px;
margin: 0;
}

#header {
height: 301px;
background:  #4E8998 url('img/mainlogo.png') repeat-x bottom;

}

#sublogo {

background:  transparent url('img/sublogo.jpg') no-repeat bottom;
height: 215px;
margin: 0;
padding: 0;


}

#bottomhalf {

height: 800px; 
background:  #B7E2EA url('img/bottomhalf.jpg') no-repeat top;
margin: 0 1px;
padding: 0;

}

span.hide {display: none; margin: 0; padding: 0;}

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=iso-8859-1" />
<title>CMYK | Web Design : Templates : 02</title>
<link href="default.css" rel="stylesheet" type="text/css" />
</head>

<body>


<div id="wrapper">

 <div id="tophalf">

  <div id="header">
 
  </div>
  <div id="sublogo">
  
  </div> <!-- SUBLOGO -->
 </div> <!-- TOPHALF -->
 
 <div id="bottomhalf">

 </div> <!-- BOTTOMHALF -->

</div> <!-- WRAPPER -->


</body>
</html>

Here is what I'm going for.. notice the flower image in the green section.

wachtn · 05-24-2009, 03:20 AM

Why not photoshop the images together?

If you dont like or want to pay for photoshop try GIMP. Its a free version of photoshop. It really is very nice and quite powerful.

parrotsnest · 05-24-2009, 06:30 PM

I have photoshop. What should I photoshop together? The flower (in the green to the left) can't be photoshoped to it because the middle is a division. Or are you talking about to the background? That would work, but I don't know about having a huge background image.. trying to get around that. I know ways I can do this, but it'd rely on alot of nested divisions and i don't know if I want to do that :\

Anymore ideas?

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

05-24-2009, 03:20 AM	#2
wachtn Silver Member Join Date: May 2009 Posts: 107	Why not photoshop the images together? If you dont like or want to pay for photoshop try GIMP. Its a free version of photoshop. It really is very nice and quite powerful.

05-24-2009, 06:30 PM	#3
parrotsnest New Member Join Date: May 2009 Posts: 2	I have photoshop. What should I photoshop together? The flower (in the green to the left) can't be photoshoped to it because the middle is a division. Or are you talking about to the background? That would work, but I don't know about having a huge background image.. trying to get around that. I know ways I can do this, but it'd rely on alot of nested divisions and i don't know if I want to do that :\ Anymore ideas?