make side bar image inline

  • If anyone can help me i’d be eternally grateful as this has been driving me mad and i’m sure its not that complicated! I just can’t seem to find the right code combination!

    Basically need to make one of my images in my side bar center with the rest of my content. The set up is that I have a text widget, into which I have entered html and javascript in order to get a roll over effect from my thumbs to a larger image. What I want to do is use CSS to add a grey box behind the thumbs. I have managed to get it on the page like this, but it just won’t centre – i’ve tried varouis bits of code but it’s just not working! It is currently sitting just to the right of the above image, and I think it may be lining up with something else.

    This is the page URL

    This is the sidebar code;

    <html>
<head>
<script language="JavaScript">
function Change_Big_One(thumb){
document.getElementById('BigOne').src=thumb.src.replace("_thumb","")
}
</script>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
<div id="bigone">
<img src=https://c5546827.myzen.co.uk/wp-content/uploads/2011/10/Oak-buildings-51.jpg alt="English Oak Frames" img id="BigOne" height="370" width="465"/>
<br/><br/><br/>
<div id="thumbs_thumbs">
<img src="https://c5546827.myzen.co.uk/wp-content/uploads/2011/10/Oak-buildings-51.jpg" onMouseOver="Change_Big_One(this)" width="65" height="50" style="margin-left: 145px; margin-right: 12px">
<img src="https://c5546827.myzen.co.uk/wp-content/uploads/2011/10/Oak-buildings-52.jpg" onMouseOver="Change_Big_One(this)" width="65" height="50" style="margin-right: 12px">
<img src="https://c5546827.myzen.co.uk/wp-content/uploads/2011/10/Oak-buildings-53.jpg" onMouseOver="Change_Big_One(this)"width="65" height="50" style="margin-right: 12px">
<img src="https://c5546827.myzen.co.uk/wp-content/uploads/2011/10/Oak-buildings-54.jpg" onMouseOver="Change_Big_One(this)"width="65" height="50" style="margin-right: 0px">
</html>

    This is the CSS

    #thumbs_thumbs {
    border: 15px solid #262626;
    background: none repeat scroll 0 0 #262626;
    height: 50px;
    margin: 0px 25px 0 0;
    width: 455px;
    display: block margin-left: 20px; margin-right: 15px;
}

    Any help would be very gratefully recieved!

  • The topic ‘make side bar image inline’ is closed to new replies.