Quick Fix Please

alexkmoore · February 4, 2010, 3:08am

Hey there my site is http://www.inkzoid.com.

In order to make my page centered instead of it being on the left hand of the screen I had to have it redone without using absolute positioning. Now my only problem is trying to line up 3 images.

The pic of Zoid is divide into 3 slices, the top of his hat being part of the banner, the middle slice being part of the navigation bar, and the bottom…well you get the idea.

If someone could help me it would be appreciated.

CSS:

body {
background-color: #111111;
background-repeat: no-repeat;
scrollbar-base-color: #1ac817;
scrollbar-face-color: #1ac817;
scrollbar-arrow-color: #ffffff;
scrollbar-darkshadow-color: #083e0a;
}
a:link {
text-decoration: none;
color: #FFFFFF;
}
a:visited {
text-decoration: none;
color: #FFFFFF;
}
a:hover {
text-decoration: none;
color: #FFFFFF;
}
a:active {
text-decoration: none;
color: #FFFFFF;
}
p.text {
color: #FFF;
font-family: ‘letter gothic std’, ‘times new roman’;
font-size: 80%;
font-weight: bold;
padding: 6px 0px 0px 2px;
margin: 0;
text-align: center;
}
p.header {
color: #128911;
font-family: ‘letter gothic std’, ‘times new roman’;
font-size: 110%;
font-weight: bold;
text-align: center;
}
.nav {
float: left;
margin: 0;
padding: 0;
}
img.floatLeft {
float: left;
margin: 0;
padding: 0;
}
img.floatRight {
float: right;
margin: 0px;
padding: 0px 0px 0px 2px;
}
.clearboth {
clear: both;
}
.thumbnail {
float: left;
width: 100px;
height: 75px;
padding: 0px 0px 5px 5px;
margin: 0px;
}
a img {
list-style-type: none;
border: none;
margin: 0px;
padding: 0px;
}
ul {
list-style-type: none;
padding-left: 0;
margin-left: 0;
}
#wrapper {
width: 800px;
margin: 0 auto;
}
#banner {
height: 140px;
}
#nav {
background-color: #128911;
height: 30px;
padding: 0px 0px 0px 2px;
background-image:url(Images/bar.jpg);
}
#left {
float: left;
background-color: #111111;
overflow-y: scroll;
height: 323px;
width: 349px;
padding: 0px 0px 0px 2px;
}
#bottom_banner {
clear: left;
background-color: #111111;
height: 120px;
}
div.hcb-shadow-tl {
background:url(shadow-bg.jpg) top left;
}
div.hcb-shadow-tr {
background:url(shadow-bg.jpg) top right;
}
div.hcb-shadow-bl {
background:url(shadow-bg.jpg) bottom left;
}
div.hcb-shadow-br {
background:url(shadow-bg.jpg) bottom right;
}
div.hcb-shadow-t {
background: url(shadow-bg-t.jpg) repeat-x;
}
div.hcb-shadow-b {
background: url(shadow-bg-t.jpg) repeat-x bottom;
margin-bottom: 5px;
}
div.hcb-shadow-m {
background: url(shadow-bg-r.jpg) repeat-y right;
padding-right: 7px;
clear:both;
}
div.hcb-shadow-r {
background: url(shadow-bg-l.jpg) repeat-y left;
display:block;
}
div.hcb-shadow-t, div.hcb-shadow-tr, div.hcb-shadow-b, div.hcb-shadow-br, div.hcb-shadow-tl, div.hcb-shadow-bl {
background-color: #128911;
height:7px;
}
div.hcb-shadow-tr, div.hcb-shadow-br, div.hcb-shadow-tl, div.hcb-shadow-bl {
width:7px;
}
div.hcb-shadow-tr, div.hcb-shadow-br {
float:right;
}
div.hcb-shadow-tl, div.hcb-shadow-bl {
float:left;
}
br.hcb-shadow-clear {
display:block;
clear:both;
}
#HCB_comment_box {
float: left;
width: 415px;
padding:17px;
min-height: 323px;
background-color: #128911;
}
#HCB_comment_box * {
margin:0;
padding:0;
outline:0;
border:0;
}
#HCB_comment_box textarea.commentbox {
width:100%;
display:block;
border: 0;
background-color: #ffffff;
}
#HCB_comment_box textarea, #HCB_comment_box input.text, #HCB_comment_box input.submit {
border: 0px;
background-color: #ffffff;
padding-left:5px;
}
#HCB_comment_box div.hcb-wrapper {
width: 70%;
}
#HCB_comment_box input.text {
width: 70%;
}
/* the submit button /
#HCB_comment_box .submit {
cursor:pointer;
font-weight:bold;
background-color:#128911;
width:84px;
height:25px;
background-image:url(submit.jpg);
}
#HCB_comment_box span.home-desc {
font-size:10px;
opacity:0.4;
}
#HCB_comment_box blockquote {
margin:0 !important;
padding:20px;
background:url(speech-bubble.jpg) no-repeat;
}
/ the individual comment display containers */
#HCB_comment_box div.comment {
border-bottom:1px solid #ffffff;
margin-bottom:5px;
}

HTML:

<!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>Inkzoid - A Bunch of Useless **** I Do When I’m Bored</title>
<link rel=“stylesheet” type=“text/css” href=“styles.css” />
<script type=“text/javascript” src=“scripts.js”></script>
</head>
<body onload=“MM_preloadImages(‘Images/home_glow (2).jpg’,‘Images/gallery_glow.jpg’,‘Images/cool_stuff_glow.jpg’,‘Images/friends_glow.jpg’)”>
<div id=“wrapper”>

<div id=“left”>

Jan 29, 2010
 
 
<a href=“http://www.vimeo.com/9062679”>
<img src=“Images/ipad.jpg” class=“floatLeft”/>
</a>

<a href=“http://www.apple.com/”>
Apple
</a>

has a new product on the market - the iPad, which is pretty much a larger, more glorified iPhone. It starts at $499 US. Click on the image and watch the video to see all the awesome features. So far the biggest model yet is 64GB.
 
 
<img src=“Images/news_bar.jpg”>
 
 

Jan 28, 2010
 
 

<img src=“Images/sachmo_story_cover.jpg” />
 
 
Inkzoid is having trouble with the comment box. That’s what you get when you use an online HTML comment box instead of programming your own! It works but it overlaps the bottom purple banner. I’ll try to fix it soon.
 
 
<img src=“Images/news_bar.jpg” />
 
 

Jan 28, 2010
 
 

<img src=“Images/h1n1.jpg” class=“floatLeft”/>Take a look at a few of the following pages. There’s two sides to every story. One of the most incredible claims is that this virus was genetically engineered. I’m not even going to blog about this as there’s simply too much ground to cover. Make an informed decision that is not influenced by politics or religion and make up your own mind.
 
 
 
 
 

<a href=“http://www.infowars.com/ron-paul-on-h1n1-hoax-scare-the-people-to-death/”>

Ron Paul on H1N1 Hoax:
 

“Scare the People to Death”

</a>

 
 
<a href=“http://www.infowars.com/video-footage-of-phoenix-mass-grave-site/”>

Video Footage of Phoenix Mass Grave Site

</a>

 
 
<a href=“http://www.naturalnews.com/026503_pandemic_swine_flu_bioterrorism.html”>

Journalist Files Charges against WHO and UN for Bioterrorism and Intent to Commit Mass Murder

</a>

 
 
 
 
 
<img src=“Images/news_bar.jpg” />
 
 

Jan 26, 2010
 
 
<a href=“http://news.ca.msn.com/top-stories/cbc-article.aspx?cp-http://www.cbc.ca/video/news/player.html?http://blog.peta2.com/2010/01/canadian_seal_slaughter_suppor.html”>
<img src=“Images/pie_in_face.jpg” class=“floatRight” alt=“PETA success” width=“211” height=“172” />
</a>

<a href=“http://www.peta.com/”>
PETA
</a>
 may become labelled a terrorist organization! Because slapping a tofu pie in the Federal Fisheries Minister’s face means that you are a danger to the country and it’s people! If this label gets accepted, guess who’s going to Guantanamo Bay when they make their next donation to
<a href=“http://www.peta2.com/”>
PETA?
</a>
 
 
<img src=“Images/news_bar.jpg” />
 
 

Jan 26, 2010
 
 
<img src=“Images/sachmo_story_cover.jpg” />

I’ve got a comment box put up in the Gallery section but I have to do some more work on it as it looks like ass right now. You can use it if you 'd like…just keep that in mind.
 
 
<img src=“Images/news_bar.jpg” />
 
 

Jan 25, 2010
 

Wow. So next time if you notice a sudden sharp pain on the tip of your tongue…
 
 
<img src=“Images/centipedes_in_vagina.jpg” width=“355” height=“140” />
 
 
<img src=“Images/news_bar.jpg” />
 
 

Jan 24, 2010
 

Here’s a pic I did a few years ago but just managed to put it up today.
 
 
<a href=“rob_beach.html”>
<img src=“Images/rob_beach.jpg” width=“354” height=“254” />
</a>
 
 
<img src=“Images/news_bar.jpg” />
 
 

Jan 23, 2010
 
<img src=“Images/sachmo_story_cover.jpg” align=“center”/>

I’d like to point out that Inkzoid now has a
<a href=“cool_stuff.html”>Cool Stuff
</a> section that I’ve been working on for the past few days, adding links to really interesting and sometimes hilarious sites. Some of my favourites include

<a href=“http://www.heartattackgrill.com”>The Heart Attack Grill</a> (home of the Triple Bypass Burger), The Darwin Awards and a bunch of miscellaneous astronomy links. I’ll be improving the content of this section with images and maybe even videos soon.
 
 
<img src=“Images/news_bar.jpg” />
 
 

Jan 21, 2010


Anyone who’se known Alex Moore (me) for longer than five minutes is well aware that I’m a pizzaholic. Once a friend of mine and I got into a pizza competition. Unfortunately I don’t have a pic of my entry but below is Rob Beaudry’s Overkill Pizza which made me constipated for 16 years.

    &lt;img src="Images/overkill_pizza.jpg" class="floatLeft" /&gt;
    
    Now, I've made over 100 homemade pizzas like Cajun Chicken on Whole Wheat Honeydough and Death By Cheese. Some really crazy ingredients have gone into the dough as well like vanilla extract (which makes an awesome crispy vanilla crust) and Molson Canadian beer. But I'd like to show you  something a little different. Something I ordered, not made! Check it out.
    
    &lt;img src="Images/pizza_of_death.jpg" class="floatRight" /&gt;
    
    Triple pepperoni. Triple cheese. Double steak. Double bacon strips. Double bacon crumble. I'm suprised they didn't deliver it with a complimentary ShamWow.        
    
    &lt;br /&gt;
    &lt;br /&gt;
    &lt;img src="Images/news_bar.jpg" /&gt;
    &lt;br /&gt;
    &lt;br /&gt;
    &lt;p class="header"&gt;
    Jan 21, 2010
    &lt;br /&gt;
    &lt;img src="Images/sachmo_story_cover.jpg" /&gt;
    &lt;/p&gt;
	&lt;p class="text"&gt;
    Finally &lt;span class="style4"&gt;Inkzoid&lt;/span&gt; has a newer design. I've worked on it through so many sleepless nights that I could punch a baby!
    Ok, now that we've got that out of the way let's get down to business:
    &lt;br /&gt;
    &lt;br /&gt;
    This site is just a side project for fun but from time to time I do requests if you're patient. Unless I'm busy walking naked downtown at 4:30 am foaming at the mouth with chunky peanut butter crammed up my asscrack.
    &lt;br /&gt;
    &lt;br /&gt;
    Give me time and I'm sure I'll be able to make you happy. With artwork. Not peanut butter. Speaking of artwork I've got a few new pieces that I've done recently, so check out the &lt;a href="our_gallery.html"&gt;&lt;span class="style3"&gt;gallery&lt;/span&gt;&lt;/a&gt;&lt;/span&gt;.
    &lt;/p&gt;
    &lt;br /&gt;
    &lt;br /&gt;
    &lt;img src="Images/news_bar.jpg" /&gt;
    &lt;p class="header"&gt;
    Jan 22, 2010
    &lt;/p&gt;
    &lt;p class="text"&gt;
         Here's a digital fish painting I did for a particular fish-o-holic otherwise known as Rob Beaudry, co-owner of Top Level Roofing.
         	&lt;br /&gt;
            &lt;br /&gt;
            &lt;img src="Images/robs_walleye_green.jpg" /&gt;
    &lt;/p&gt;

</div>
<div id=“preview”>
<img src=“Images/zoid_drawing.jpg” alt=“zoid drawing” width=“374” height=“304” /> 
No transdimensional transvestites or lesbian goatfish were harmed in the making of this page. That we know of…
</div>
<div id=“bottom_banner”>
<img src=“Images/banner_bottom.jpg” alt=“bottom banner” /></div>
<div id=“notice”>

Inkzoid does not use Facebook, MySpace, Twitter or any other social networking site.

</div>
</div>

</body>
</html>

Thanks!
Alex

agarcia831 · February 4, 2010, 4:04am

quick fix…give the middle and bottom image left margin values to push them over to the right and aligned with the top image.

for the middle image, you don’t really have any way to target the image with css, so maybe add a class…

then the css for the margin…

.bar-overlap { margin-left:5px; }

for the bottom image, it’s the only image in the div enclosing it so try this in your css…

#preview img { margin-left:35px; }

ralphm · February 4, 2010, 4:36am

@alexkmoore

Not to discount the previous solution, but I think there’s a simpler way. I would use just one full image. Remove the black background and make it a transparent gif. Place the image in the #preview div and simply give it a negative top margin to pull it upwards. Much simpler and more robust.

E.g.


#preview img {margin-top: -40px;}

alexkmoore · February 4, 2010, 1:35pm

Margin values! It was so simple haha
I was using

like fifteen times in a row to push the image over. I’m trying it now. Thanks to both of you.