|
CSS - Content Box Image Problem
I put together a new web layout with divs and css at www.verbazon.net/index.php. I have a php include for that main content box text that shows up, and as you can see, it screws up the content box images separating them. If anyone can help me fix this I appreciate it. My Css file is located at www.verbazon.net/style.css
Similar TutorialsHi All.. I am working on my first real website for a friend and I am having trouble getting the top image where I want it. I will post a link in a sec. What I am trying to do is set a top, middle and bottom image in the Main Content part of the site. It looks like a picture frame but can expand without breaking when I add new content. I had no problem putting the middle image in and I finally got the bottom image set, though I had to do some strange things to get it to work. Now I am stuck on the top image. I can not get it set where I want it. I am still learning CSS/HTML and am trying to do this on my own and with Google . but this has me stumped. Could someone tell me what I should do. Here is the link http://http://www.jamkastin.com/New..._Dreams/dd.html Here is my CSS that I did for the middle and bottom image. Code: <style type="text/css">
#html, body {
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
width:800px;
height: 100%;
background: url(images/bg.png);
margin: 0 auto;
text-align: center;
font-family: Verdana, Helvetica, sans-serif;
}
#container {
width: 780px;
background: url(images/wood_back.jpg);
margin: 0 auto;
overflow: hidden;
}
#navigation {
margin-top: -4px;
width:780px;
background: #B6C5A4;
font-family:Trebuchet MS, Helvetica, sans-serif;
text-align:center;
overflow:hidden;
}
#navigation ul {
float:left;
list-style:none;
margin: 0;
padding:0;
position:relative;
left:50%;
text-align:center;
}
#navigation ul li {
display:block;
float:left;
list-style:none;
margin:0;
padding:0px;
position:relative;
right:50%;
}
#navigation ul li a {
display:block;
margin:0;
padding:.4em .8em;
color:#000;
text-decoration:none;
}
#navigation ul li a span {
display:block;
}
#navigation ul li.active a {
color: #fff;
font-weight:bold;
}
#navigation ul li a:hover {
color: #fff;
}
#mainContent {
float: left;
width: 450px;
margin: 15px 15px -71px 15px;
padding: 15px 15px 15px 15px;
background:url(mainbg.gif) repeat-y;
}
#mainContent .p3{
padding-bottom:20px;
margin-left: -21px;
background:url(mainbottom.gif) bottom no-repeat;
}
#sidebar1 {
float: right;
width: 200px;
padding: 15px;
margin: 15px;
background:url(sidebg.gif) repeat-y;
}
p {
padding: 0px 20px 0px 20px;
}
#mainContent .article
{
padding-top:20px;
}
.bottom_border {
width: 780px;
height:30px;
margin: 0px 10px;
background-image: url(images/dd_border.png);
}
.copy {
font-size: 12px;
color: #000;
}
.copy a {
color: #000;
}
This may be a stupid question, but is there an easy way to make a div have an image on the left and content on the right... BUT then also make sure that, if the image's height is larger than the div, the div still covers the bottom. I know you can use a "float killer" div, however if I want a float killer on EVERY div class of this type, is there some easy way to tell the css to ALWAYS include code at the bottom? Also what method would a good coder use to vertically align the content on the right so that there isn't a lot of empty space? Thanks is there a way to have a different background image in the .content area on different pages? this is the site: http://bradleyrose.net/WaterStreetRestaurant/pages/catering&parties.html cobble-stone-road-4.jpg is used on all pages, is there a way to use a different image on some pages? Hi http://www.sential.co.uk/releases.html http://www.sential.co.uk/style.css the box model is based on the thrashbox it works fine on the other pages, except the releases page where there is an image at the bottom of the box. It has the incorrect alignment on the left border. And only in IE Any help would be very appreciated. -Luke hi, i successfully managed to text wrap content around an image that was floated to the left (within a div element).... however, i now want an image with a caption and thus i want to text wrap the content around the div element containing the image and caption which is floated to the left... however, i cannot work out how to do this and performing a google search has not helped - can someone help me here? This is what I would like to accomplish (though, vertical scrolling..) http://www.csszengarden.com/?cssfile=037%2F037%2Ecss Must look at it with mozilla, btw.. doesn't work in IE. I can't figure out how the hell that person did that. Here is what I have so far... Forgive all the extra tags I don't need. I've been trying everything I can think of... h1{ position: absolute; top: 0px; left: 0px; z-index: 99; background-image: url(top.png); background-repeat: no-repeat; background-attachment: fixed; background-color: transparent; height: 358px; width: 800px; visibility: visible; background-position: top left;} h2{ position: fixed; top: 0px; background-image: url(sidestar.png); background-repeat: repeat-y; background-attachment: scroll; height: 6000px; width: 40px; z-index:1;} H1 is the code for the image I want to be on top, H2 is the "body" I want to disappear behind the image. When that is loaded, the image stays fixed in location, but the body scrolls on top of it, eating the image from the bottom. Any ideas what is wrong? If you have firefox, you can check out what is happening he http://www.fatboyraceworks.com/webnik/ in ie the main page looks fine but the inner pages in for ex: http://www.bekirhoca.com/ogretmen/uzmanortmen.asp width sux. When i gave width value its not okay both in ie and firefox. So now I publish my site with spaces between columns in ie and messed up style in firefox. I think that'd help ,, i want a code that will keep my site remain same when the window has a small weight or height Please helppppppppp I'm working on my first website. Its a simple portfolio site. I have it mostly completed, but i would like to center all the content in the browser. I found several soulutions to this and I can not seem to get any of them to work. I think it might be stemming from my use of absolute posistioning, but idk, just a newbie here. here is the html; Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Rot</title>
<link rel="stylesheet" type="text/css" href="style.css">
<style type="text/css">
</style>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" >
</head>
<body>
<div id="wrapper">
<div id="logo"><a href="index.html"><img border="no" src="text/logo.png" alt="logo"></a></div>
<div id="rot"><a href="index.html"><img border="no" src="text/rot.png" alt="rot"></a></div>
<a href="info.html" class="info" title="info"><span class="displace">info</span></a>
<div id="work"><a href="index.html"><img border="no" src="text/worksolid.png" alt="work"></a></div>
<a href="projects/dreaming_again.html" class="thumb1" title="thumb1"><span class="displace">project1</span></a>
<a href="projects/futility.html" class="thumb2" title="thumb2"><span class="displace">project2</span></a>
<a href="projects/grid_dreams.html" class="thumb3" title="thumb3"><span class="displace">project3</span></a>
<a href="projects/transgress.html" class="thumb4" title="thumb4"><span class="displace">project4</span></a>
<a href="projects/curls.html" class="thumb5" title="thumb5"><span class="displace">project5</span></a>
<a href="projects/city_sleeps.html" class="thumb6" title="thumb6"><span class="displace">project6</span></a>
<a href="projects/inner_turmoil.html" class="thumb7" title="thumb7"><span class="displace">project7</span></a>
<a href="projects/transitions.html" class="thumb8" title="thumb8"><span class="displace">project8</span></a>
<a href="projects/detritus.html" class="thumb9" title="thumb9"><span class="displace">project9</span></a>
<a href="projects/emerald_city.html" class="thumb10" title="thumb10"><span class="displace">project10</span></a>
</div>
</body>
</html>
and here is the CSS Code:
#wrapper {
text-align: left;
width:990px;
margin:0px auto; /* Right and left margin widths set to "auto" */
text-align:left; /* Counteract to IE5/Win Hack */
padding:0px;
border:1px dashed #333;
background-color:#eee;
}
a {
outline: none;
}
#logo{
position:absolute;
top:15px;
left:645px;
}
#rot{
position:absolute;
top:30px;
left:733px;
}
#work{
position:absolute;
top:375px;
left:15px;
}
#info{
position:absolute;
top:285px;
left:15px;
}
a.info {
position: absolute;
top:285px;
left:15px;
display: block;
width: 75px;
height: 75px;
text-decoration: none;
background: url("text/info.png");
}
a.info:hover {
background-position: 0 -75px;
}
.displace {
position: absolute;
left: -5000px;
}
a.work {
position: absolute;
top:375px;
left:15px;
display: block;
width: 75px;
height: 75px;
text-decoration: none;
background: url("text/work.png");
}
a.work:hover {
background-position: 0 -75px;
}
.displace {
position: absolute;
left: -5000px;
}
/*
* thumb1+++++++++++++++++++++++++++++++++++
*/
a.thumb1 {
position: absolute;
top:105px;
left:105px;
display: block;
width: 615px;
height: 75px;
text-decoration: none;
background: url("images/thumbs/dreaming_again.jpg");
}
a.thumb1:hover {
background-position: 0 -75px;
}
.displace {
position: absolute;
left: -5000px;
}
/*
* thumb2+++++++++++++++++++++++++++++++++++
*/
a.thumb2{
position: absolute;
top:195px;
left:105px;
display: block;
width: 615px;
height: 75px;
text-decoration: none;
background: url("images/thumbs/futility.jpg");
}
a.thumb2:hover {
background-position: 0 -75px;
}
.displace {
position: absolute;
left: -5000px;
}
/*
* thumb3+++++++++++++++++++++++++++++++++++
*/
a.thumb3{
position: absolute;
top:285px;
left:105px;
display: block;
width: 615px;
height: 75px;
text-decoration: none;
background: url("images/thumbs/grid_dreams.jpg");
}
a.thumb3:hover {
background-position: 0 -75px;
}
.displace {
position: absolute;
left: -5000px;
}
/*
* thumb4+++++++++++++++++++++++++++++++++++
*/
a.thumb4{
position: absolute;
top:375px;
left:105px;
display: block;
width: 615px;
height: 75px;
text-decoration: none;
background: url("images/thumbs/transgress.jpg");
}
a.thumb4:hover {
background-position: 0 -75px;
}
.displace {
position: absolute;
left: -5000px;
}
/*
* thumb5+++++++++++++++++++++++++++++++++++
*/
a.thumb5{
position: absolute;
top:465px;
left:105px;
display: block;
width: 615px;
height: 75px;
text-decoration: none;
background: url("images/thumbs/curls.jpg");
}
a.thumb5:hover {
background-position: 0 -75px;
}
.displace {
position: absolute;
left: -5000px;
}
/*
* thumb6+++++++++++++++++++++++++++++++++++
*/
a.thumb6{
position: absolute;
top:555px;
left:105px;
display: block;
width: 615px;
height: 75px;
text-decoration: none;
background: url("images/thumbs/city_sleeps.jpg");
}
a.thumb6:hover {
background-position: 0 -75px;
}
.displace {
position: absolute;
left: -5000px;
}
/*
* thumb7+++++++++++++++++++++++++++++++++++
*/
a.thumb7{
position: absolute;
top:645px;
left:105px;
display: block;
width: 615px;
height: 75px;
text-decoration: none;
background: url("images/thumbs/inner_turmoil.jpg");
}
a.thumb7:hover {
background-position: 0 -75px;
}
.displace {
position: absolute;
left: -5000px;
}
/*
* thumb8+++++++++++++++++++++++++++++++++++
*/
a.thumb8{
position: absolute;
top:735px;
left:105px;
display: block;
width: 615px;
height: 75px;
text-decoration: none;
background: url("images/thumbs/transitions.jpg");
}
a.thumb8:hover {
background-position: 0 -75px;
}
.displace {
position: absolute;
left: -5000px;
}
/*
* thumb9+++++++++++++++++++++++++++++++++++
*/
a.thumb9{
position: absolute;
top:825px;
left:105px;
display: block;
width: 615px;
height: 75px;
text-decoration: none;
background: url("images/thumbs/detritus.jpg");
}
a.thumb9:hover {
background-position: 0 -75px;
}
.displace {
position: absolute;
left: -5000px;
}
/*
* thumb10+++++++++++++++++++++++++++++++++++
*/
a.thumb10{
position: absolute;
top:915px;
left:105px;
display: block;
width: 615px;
height: 75px;
text-decoration: none;
background: url("images/thumbs/emerald_city.jpg");
}
a.thumb10:hover {
background-position: 0 -75px;
}
.displace {
position: absolute;
left: -5000px;
}
Hi, I am generating what should be a simple css layout. I have a header, some left content (which is comprised of layers that hold an image and some over the top to form a kind of navigation tablet), some content to the right of that for text, and finally a footer. Bog standard design... The problem I have is that the content to the right of the left content is sat below both the left content and the footer currently. What it should be doing is sitting to the right of the left content and where the text 'grows' push the footer down the page: 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 name="generator" content="HTML Tidy for Linux (vers 1 September 2005), see www.w3.org" />
<title>Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
/* mac hide \*/
html, body {height:100%}
/* end hide*/
body {
padding:0;
margin:0;
color: #000000;
}
#wrapper {
position: relative;
min-height: 100%;
height: auto !important;
height: 100%;
}
#header{
position:absolute;
top:0;
left:0;
width:100%;
height:224px;
border-top:0px solid #feffff;
border-bottom:0px solid #feffff;
overflow:hidden;
color: #000000;
}
#content {
background-color: #ccc;
padding-bottom: 50px;
}
* html #footer {/*only ie gets this style*/
\height:40px;/* for ie5 */
he\ight:38px;/* for ie6 */
}
#navlist li
{
list-style: none;
margin: 0;
padding: 0.25em;
border-top: 0px white;
}
#navlist li a {
color: #4E261B;
text-decoration: none;
font-family: palatino linotype, helvetica, sans-serif;
font-size: .90em;
line-height: 200%;
}
a{
font-family: Tempus Sans ITC;
color: #4E261B;
font-weight: bold;
font-size: 14pt;
}
#content {
background-color: white;
padding-bottom: 50px;
padding-left: 200px;
padding-top: 0px;
}
#footer {
background-color: #ff0;
width: 100%;
height: 50px;
line-height: 50px;
position: absolute;
bottom: 0 !important;
bottom: -1px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<img border="0" src="images/Banner_flat.jpg" alt="Banner" width="100%" height="224" align="left" />
</div>
<div style="position: absolute; width: 169px; height: 243px; z-index: 1; left: 4px; top: 229px" id="layer1">
<img border="0" src="images/bridetablet1.bmp" alt="Menu" width="190" height="302" /></div>
</div>
<div style="position: absolute; width: 169px; height: 243px; z-index: 2; left: 14px; top: 257px" id="layer2">
<div id="navcontainer"></div>
<ul id="navlist">
<li><a href="hello" class="c2">Home</a></li>
<li><a href="About%20Us" class="c2">About Us</a></li>
<li><a href="User%20Register" class="c2">User Register</a></li>
<li><a href="User%20Log-In" class="c2">User Log-In</a></li>
<li><a href="Supplier%20Log-In" class="c2">Supplier Log-In</a></li>
<li><a href="Join" class="c2">Join</a></li>
</ul>
</div>
<div id="content">
<p>Stuff.</p>
<p>Blah, blah blah</p>
<p>Blah, blah blah</p>
<p>Blah, blah blah</p>
<p>Blah, blah blah</p>
<p>Blah, blah blah</p>
<p>Blah, blah blah</p>
<p>Blah, blah blah</p>
<p>Blah, blah blah</p>
<p>Blah, blah blah</p>
<p>Blah, blah blah</p>
<p>Blah, blah blah</p>
<p>Blah, blah blah</p><p>Blah, blah blah</p>
<p>Blah, blah blah</p>
<p>Blah, blah blah</p>
<p>Blah, blah blah</p>
<p>Blah, blah blah</p>
<p>Blah, blah blah</p>
<p>Blah, blah blah</p>
<p>Blah, blah blah</p>
</div>
<div id="footer">
<p>Footer</p>
</div>
</div>
</body>
</html>
Thanks, G Hello All, I'm currently trying to finish the main design for my church's website - and I'm having a problem with the #mainbody height. LINK TO SITE :: http:// update.gcmpg.com/ If I don't specify a height for #mainbody, it looks like this :: http:// img522.imageshack.us/img522/7663/noheight.png If I do specify a height for #mainbody (350px in this case), it looks like this :: http:// img716.imageshack.us/img716/5158/height350px.png Basically I'm trying to avoid having to specify a height for #mainbody on every page, it seems like a ridiculous notion to have to do so. I've tried the clearfix, but it doesn't work. and I'm having a brain fart. Thanks in advance for all the replies! Cheers! PS -don't mind the ugly graphics - they're just placeholders ok here i am again with a width problem ,, http://www.bekirhoca.com/index.asp < here's the problematic page. the index looks fine but inner pages like http://www.bekirhoca.com/ogretmen/uzmanortmen.asp (this is one of the pages cleared from tables) , content width is smaller and not like as i want it to be or you want it to be ,, in my css when i gave width it looks fine on my computer but on another computers not because i adjust the width for my computer. when i give width, if you have a tight browser the content overflows and puts itself to the downwards of the page. And also when theres no width, the site sux in ff. where the the problem starts in my css #contentColumn { float: left; background:white; //if width: a number; } Hi, I'm polishing off a template for my Rugby League Club and using Etomite Content Management System behind it. Its designed for IE and MZ in anything from 800x600 and up. I have two problems both relating to non appearing vertical background repeats. This is the template body, find it live he http://parkesproperties.com/dublin_.../index.php?id=1 Code: <body>
<span id="header"></span>
<div id="main_container">
<div class="newsarea">
<div class="text">[*content*]</div>
</div>
<div class="menuarea">
<div class="welcomeBar"></div>
<div class="greenLeft">[*content3*]</div>
<div class="blueRight">[*content4*]</div>
<div class="blueLeft">[*content5*]</div>
<div class="greenRight">[*content6*]</div>
</div>
</div>
<span id="footer"></span>
</body>
The both problems are evident in MZ and not IE for this first page. The main <div> main_container won't recognize the nested divs as content for the sake of the background repeat-y. This works fine in IE. Has anyone an idea of a work around for this? The second problem can be seen at the bottom of the page in MZ and in both browsers http://parkesproperties.com/dublin_...index.php?id=25 Because I require the height to be larger in the newsArea <div> than in the menuArea <div>. CSS Files: http://parkesproperties.com/dublin_blues/base_ie.css http://parkesproperties.com/dublin_blues/base_mz.css All help is appreciated!! Thanks Denis Hi all, I have written a page with jsp and ajax to dynamically load page contents. I also added a hidden "processing.." message image with the following code: Code: <img src="<%=IMAGE_BASE_URL%>/processing-img.gif" id="processing" style="display:none;z-index:2;position:relative;top:250;right:-250"> this img tag was placed right after the <body> tag. When the user clicks on a link, I turned this css property to display:block so that it shows in the middle of the page. But strangely, when it is showing the processing message image, the entire page content after the <img> tag was shifted down a bit and showing an empty row! Does anybody know what's wrong with it? I've tried to change the display to inline using javascript but it still won't help... Any help would be appreciated..thanks.. I'm having a problem in IE6 when I make the browser window narrow so that all the images cannot fit horizontally. The page is at: URL In other browsers Firefox win/mac, Safari, things work ok if I make the browser window narrow so that some of the images in the right section (#section1) will not fit. The images get clipped and a horizontal scroller appears. But in IE6/Win, the whole table of images gets dropped down. I thought the issue was related to: Internet Explorer and the Expanding Box Problem URL But trying overflow:hidden; in #section1 did not help. Any help would be greatly appreciated. Thanks- YamaMon I want to do this design: http://hermann.sonyextreme.com/upload/design.png * means it should be "the rest". Just like when working with frames. So the sites height is 100% and width is 800px. I've set it up like this: Code: <div id="container">
<div id="header">
</div>
<div id="main">
<div id="menu">
</div>
<div id="content">
</div>
</div>
<div id="footer">
</div>
</div>
But no matter what I try, the css just keeps ****ing with me So do you have any tricks/know any sites who have done this succesfully... or just anything to help me, then I'd love to hear from you Thanks in advance Hermann my website, uk-adult-deed-polldotcodotuk Ive jsut added a background but the background was within the content in the middle of the page in the empty spaces so i created a div i called wrapper and wrapped from under the global navigation bar to ablove the footer and i gave this div a white backgroung.. For the homepage, as you see, it worked and all the other divs and pictures stayed where they were. Please look at contact uk-adult-deed-polldotcodotuk/contact/ when i apply the same div, it pushes all the content down the page, why is it not remaining inside the div i wrapped it in like on the homepage? Im confused, any help greatly appreciated! Hi, I'm working on a website for a church and we're near completion, but I'm having trouble getting the site to display properly in IE7 on Windows XP and a few other browsers according to browsershots.org. CSS and XHTML both validate at w3c.org. I've ripped this thing apart and put it back together with no luck. The really weird thing is the Home page looks fine, but in the rest of the pages the body content gets pushed below the left and right navigation bars. Is it a CSS float problem? Margins or paddings??? Home page: Looks OK in IE7, at least on my machine - http://www.stlukeslutheran.com/index_temp.php Ministry page: Content is pushed to bottom of page - http://www.stlukeslutheran.com/mini...ns_ministry.php The CSS files are at http://www.stlukeslutheran.com/css/main.css and http://www.stlukeslutheran.com/css/common.css. Would anyone be willing to take a look? Thanks in advance. |
|||||||