CSS - A Desperate Background Layout Problem..

Hello,
I've made a layout using Photoshop and Dreamweaver. As you can see here.
Everything is fine for me except the Site Updates section. As you can see the sides of the site updates section aren't layers, instead they're images. When I tried making them as layers they didn't give me the outcome I wanted. Can somebody please tell me how to replace those images with layers so the section expands with more content.

Thanks

CSS back ground image isn't showing at all. Tried everything, googled, flipped through CSS books, moved the image into different directories, drank more tea and finally flipped

Help!

Site link : http://weary.me.uk/MT/

Code:

* { margin:0; padding:0; }

BODY { background-color:#FFFFFF;
font-size:12px; 

}



#header { background-color:#FFFFFF;
padding:0px; }




#left { 
float:left;
width:18%;
padding:0%;
margin-left:1%;
margin-top:0%;

}


 #right { 

background-image: url(right_background.jpg);
background-repeat: no-repeat; 

margin-right: 20px;
width: 220px;
border:1px solid #d2d7e4;
float:right;
width:20%;
margin-right:0%;
margin-top:0%;
padding:0px;

}



#center { 
margin-right:30%;
margin-left:14%;
padding-left:10%;
background-color:#FFFFFF;

}



#footer { clear:both;
background-color:#FFFFFF;
padding:8px; }

Hi,

I have a background image that I want to incorporate into the header div of a fixed width layout. The header is of a gradient style - on the left it is a solid color and as you move along towards the right it fades to white.

The image is 981x76. If I bring it into Gimp, I can scale it to 1920 x 76 and it looks the same. I would like to be able to do that in a div tag, with the image as a background. I would like the image to scale horizontally just like I can do using Gimp.

Is this possible?

Basically, I want the browser to manage the scaling of the image.

Hey,
I use div's to create my page structure (you can see it on the screenshot) http://img144.imageshack.us/img144/...tructurege3.jpg

The green part is the navigation and the blue part the contents of the page. But as you see the colors both dont fill up till the bottom of the document. And if i set: height: 100%; then it will fill up to the bottom, but when the contents gets to big and a scrollbar is needed, then the part that you scroll down is not filled up with the colors anymore.

Does anybody know how to fix this?

Thanks in advance.

So I have a design where the background is a large (1400x1100) image that fades into a vertical gradient at the edges.

I've set up the css as follows:

body {
background: #000 url(gradient.jpg) repeat-x;
margin: 0;
}

Here's where I run into my problem...

I've created an empty DIV to hold the large image which will appear on top of the gradient and positioned it absolutely.

<div id="bg_image"></div>

#bg_image {
width: 100%;
height: 1100px;
background: url(images/bg_image.jpg) no-repeat top center;
margin: 0;
position:absolute;
}

This works and the background looks like it should, however because the large image is inside a DIV, any time the browser window is smaller than that div (which will be the case for most users considering the image size) there will be scrollbars.

This makes perfect sense of course I just can't come up with an alternative.

If there was a way to extend a background image beyond the borders of a DIV that would work but overflow:visible; doesn't seem to work with background images only content.

I wish I could set a repeating background AND a static background in the body style, because that is exactly the effect I'm trying to achieve.

Any suggestions would be greatly appreciated!

Thanks,
Josh

Hi guys,

I recently started adding content to my website (www dot web-share dot org dot uk) but I have noticed that when the content overflows on the page, the divs do not follow suit! I have tried every trick in the book which includes at least 3 hours worth of searching for solutions that involving clearing, removing floating and use min-width but none of them work! I am pulling my hair out on this one... Please help before I go bauld!
CSS File: Source of http:// www dot web-share dot org dot uk/Themes/Default/Original.css
HTML File: Source of http:// www dot web-share dot org dot uk/index.php?a=news&id=1

Thanks in advance,
Chris

CSS alignment urgent help needed

I only have 10 hours to hand in this assignment that I have been stuck on for 4 days, the instructions are so unclear!
I need to apply a style sheet to a web page given and the question I am stuck on asks me to align the image and words under it to the right.
I do not understand what the command I am supposed to use to tell it to move to the right are. Here is the markup for it:
<DIV class=figure>
<IMG alt="A happy face"
src="Ex2-1_files/happy.png">
<P class=caption>
Figure 1: Doesn't this make you happy? </P></DIV>

I know its align: right;
But what is the whole command I put in textpad?
Tahnks so much!

Hi,
Opened a new post as its better.
I am trying to do things for smaller devices such as mobiles and tablets.
If I add something very simple in the stylecheat to the @media query such as background color of the body using this:
@media screen and (max-device-width: 2000px){
body { width:766px; margin:auto; background-color:#00FF00;}}
Or if I do this wich seem to have the same affect:
@media screen and (max-width: 2000px){body { width:766px; margin:auto; background-color:#00FF00;}}
I dont get the green background on the body, I only get it on my pc, on my samsung mini, on blackberry I dont get the green background and using adobe advice central on samasung tab and ipone 4 and maybe some more I get it, on the rest no background color.
This is so strange, I imagen all have greater width than 2000px.

If I set to max-width to 500 px I dont get it on my samsung mini either...????? it have a very small resolution, only 240 x something.

I just dont get it

I dont have any background color declared except the one in the @media query

Hi, I have an issue that has been tormenting me to the sharp rusty end of my chair.

I set the indexTableHeader class to width:100%, and in IE6 it does what i want, it doesnt leave the edge of the screen, but in FF 2.0 it Always extends out by the width of the div element beside it, making it nearly useless. In IE7 it is even worse, it clears the left div, and goes to the bottom. The goal is to have what it looks like in ie 6.


I know the css code is pretty long, but if someone could give it a couple looks and let me know what they think that would be awesome.

I really appreciate it. Thanks-Dave


Code:

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>





<style type="text/css">

html { 
padding:0; 
margin:0; 
border:0; 
font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Arial, sans-serif;
}
body {
padding:0; 
margin:0;
border:0; 
font-size:12px;
background-color: #A2C4EA;

}
#head {
margin:0; 
width:100%; 
height:60px; 
background-color: #A2C4EA;
  background-image: url(/holimages/hein75b.gif);
	background-position: left;
background-repeat: no-repeat;
 }
 /*

*/


/* Nav menu,  */
#submenu { 
 text-align: center;
background-color:#566d96;
width:100%;
}
#submenu ul {

display:block;
list-style-type: disc;
	background-repeat: repeat-x;
  margin:0;
 

}
#submenu ul li {
 display: inline;
padding-right: 20px;
  }
#submenu ul li a {
  text-decoration: none;
  	font-size:12px;
  color: #fff;
}
#submenu ul li a:hover {
  text-decoration: none;
  color: yellow;
}

#submenu h2 {
	color:white;
	font-size:12px;
	display:inline;
	margin-right:12px;
}



/*Guide bar */
#guide{
	font-size:12px;
background-color:#fff;
	width: 100%;
	 text-align: left;
	   margin:0;
}
#guide ul {

list-style-type: disc;
	background-repeat: repeat-x;
  margin:0;

}
#guide ul li {
 display: inline;
padding-right: 0px;
  }
#guide ul li a {
		font-size:12px;
  text-decoration: none;
  color: blue;
}
#guide ul li a:hover {
  text-decoration: none;
  color: red;
}

#logo{
  float:left;
  position:fixed;
}
#cit_nav{
 right:0;
float:right;
}
/* Scroll Div */
#ScrollDiv {
height: 410px;
overflow: auto;

}
/* this is the overall style of the content pane */
/* Content pane */
#content {
  font-size:14px;
   background-color:#A2C4EA;
overflow:auto;
}

#content h2{
	
	font-weight: lighter;
	font-variant: normal;
	font-size: 20px;
	background-color:#333366;
    color:#fff;
    margin:0;
		padding:3px;
	padding-left:20px;

}
#content h3{
	
	font-weight: lighter;
	font-variant: normal;
	font-size: 14px;
	background-color:#333366;
    color:#fff;
    margin:0;
}
#content a{
	text-decoration:none;
}
#content a:visited{
	text-decoration:none;
}

/* Contact us Page */
#contact-us{
	background-color:#DDDDFF;
}

/* this holds anyhting that is regarded as "call next" */
#content-container{
	
	width:100%;
	
}

/*           */
/* Index Page */


    /* This is the table that holds the headings */

#headerWrapper{

	
}

.indexTableHeader {
	background-color:#566d96;
	display: table;
	width:100%;

}
	/* This is the cell that holds the Headers for the Index Page */
.
    /* This is the table that holds the content #566d96 #DDDDFF*/
.indexTable {
	width:100%;
	background-color:#566d96; 
	display: table;
	font-size:14px
}

#sub-menu2 {
font-size: 12px;
	float:left;
	width:170px;
	border-right:2px none #000;
	border-bottom:2px none #000;
	padding-left:10px;
	padding-bottom:20px;
	display:block;
	font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Arial, sans-serif;
	color: #FFFFFF;
  background-color:#566d96;
	border-top-style: solid;
	border-left-style: none;
	border-top-width: 1px;
	border-top-color: #FFFFFF;
}

#sub-menu2 h2 {
	font-weight: lighter;
	font-variant: normal;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-bottom-style: solid;
	border-top-color: #99cc00;
	border-right-color: #99cc00;
	border-bottom-color: #99cc00;
	border-left-color: #99cc00;
	font-size: 20px;
	background-color:#566d96;
}
#sub-menu2 a:link {
	font-size: 12px;
	text-decoration: none;
	color: #CCCCCC;
}
#sub-menu2 a:visited {
	color: #CCCCCC;
  font-size: 12px;
}
#sub-menu2 a:hover {
	font-size: 12px;
	color: #FFFFFF;
}
.indented{
margin:0 0 0 -1.5em;
}
/*----LEGACY CSS */
pre {
	font-family: Arial, Helvetica, sans-serif;
}



</style>


  <title>
rere</title>

<style type="text/css">
  
.accessibility
{
	display: none;
}

  
  </style>
  
  <META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="-1">
<META HTTP-EQUIV="imagetoolbar" CONTENT="no">


</head>

<body>
<div id="wrapper">
<form id="holform" name="holform" action="HeinOnlineForm">
<div id="head">

<a href="#skipto" title="Skip repetitive navigation links" accesskey="2"><span class="accessibility">Skip repetitive navigation links</span></a>



<div id="logo">
 
</div>

<div id="cit_nav">

   <table border="0" cellpadding="0" cellspacing="0"
 >


<tr><td valign="top">
  Select RERE <br/>
   <select name="collection" 
   onchange="collectionselecter(this.options[this.selectedIndex].value);"
           style="font-size:9pt;width:225;font-weight:bold;color:#006633">

     <option value="journals" 
       >
       DDDDDD/option>


   </select>
   &nbsp;&nbsp;&nbsp;
  </td>

  <td valign="top">


  &nbsp; 

</td>
</tr>
</table>
&nbsp;
           
     



</div>

</div>


<div id="container">

<div id="submenu">

  
  
  
  <ul>
  <li>

  
  <a href="/front/x"
    class="nav"  
     title="Home">
   Home
  </a>
  </li>
    <li><a href="Search?collect"
   class="nav"
     title="Display search options for this collection"> 
    Search
  </a></li>
    <li> <a href="SearchH"
     class="nav"  
     title="Review Previous Searches">
    Search History
  </a></li>

    <li>
  <a href="Help?collectio"
     class="nav"  
     title="Display Help for this collection">
    Help
  </a></li>

    <li><a href="ContactInfo"
       class="nav" 
     title="Use e-mail to send comments to HeinOnline Technical Support">
   Contact Us
  </a></li>
 
  
  
<li>
  <a href="#" onclick="toggleDiv()"
     class="nav" 
     title="Printer Friendly Version">

    Printer Friendly
  </a>
</li>


   
  </ul>
  




  
  
  
  
  


  
  
  
  
  
  
  
  
  
  
  
  
  
  





  
  
</div>

<a name="skipto"></a>
<div id="content">

<div id="guide">
 <ul>

<li>

<a href="">trtrtrtrtrt >> </a> 
</li>
<li><a href="#">wewewewewe >> </a> </li>
 <li> <a href="#"> - wewewewewew

>> </a> </li>
</ul>
 






</div>

  


<div id="sub-menu2">

  



 <h2>Navigation</h2>
   <ul class="sub-list">
 <li class="sub-list-element">Quick Locator</a></li>
 
     <li class="sub-list-element">Simple Search</a></li>
  <li class="sub-list-element">Advanced Search</a></li>

 
  <li class="sub-list-element">
  
</ul>
 <div align="center"><img src="../../images/narablue.gif" width="120" height="122" >
 
 </div>

  
   


















  
  
  </div>

<div id="content-container">
       <h2 >Titles 
</h2>

<div id="headerWrapper">
<table class="indexTableHeader" >
 
 <tr >
    <td width="50%" align="center" border="0" >
     
  <h3>Number  </h3>
  
 </td>
    <td width="50%" align="center" border="0" >

     
  <h3>Name   </h3>
  
 </td>
</tr>


</table>
</div>




<div id="ScrollDiv">
<table width="100%" class="indexTable" cellspacing="1" cellpadding="2">
 
 
 
 
 
 
 
 
 <tr >

    <td width="50%"  align="center" style="height:0px;">
      
 </td>
    <td width="50%"  align="center" style="height:0px;">
      
 </td>
</tr>






</table>

</div>


</div>     
</div>


</div>

</form>


<div id="foot">

</div>
</div>

</body>


</html>

Hi all,

I made a recent post having trouble with a three column layout. Its not really had much attention however it wasn't really clear what i was asking. I wanted the two outside columns which only contained background images to be hiden in the background from the viewpoint.

You can see my original post here, it includes two diagrams:

http://forums.devshed.com/css-help-...ion-584924.html

Now I have edited the layout to a single column and used the images on the sides as borders. I am still having the same problem so I am now wandering if I can force the browser to centre on the main column... This would leave overhang on ether side but its only images to make the site look better.

Currently the site will look good using a wide resolution but on standard 1024x768 i want the centre of the column to be in the middle of the browser window on load.

Can I do it with css? javascript or ajax? If in javascript or ajax could you please like me a tutorial or something as i have no ability in those categories!

Any help is great. Cheers.

Hi all,

So I've been looking at this Glish template and I've been trying to create a website with it.

The problem is that when I (or another user) chooses "Text Size - Largest" the third column disappears below the others.

Is there any way to prevent this and make sure that column starts at the top, with the others?

Should I be using "position: absolute" or other more specific code, in order to make the position of the columns in the layout more stable?

Thanks.

Hi,

I am new to using CSS to do my layout rather then tables. So far its working out well, and I can see the advantages in the long run. I am running into a small snag right now, that I was hoping someone might be able to help me out with. The site is succesfully displayed he

http://www.yourbeergear.com/group/stackhouse/news.php

But I found whenever the CENTER column is NOT the longest, it goes wonky, as seen he

http://www.yourbeergear.com/group/stackhouse2/news.php

The code I'm using basically runs like this
Code:

<!-- Header -->
<div id="header">
      <div align="center">HEADER</div>
<!-- end of Header --></div>


<!-- center column -->
<div id="c-block">
  <div id="c-col"> 
//CONTENT    
     </div>
<!-- end of center column --></div>

<!-- FOOTER -->
<div id="footer" align="center">
<div align="center>FOOTER</div>
</div>
<!-- end of FOOTER -->


<!-- left column -->
<div id="lh-col"><br />
  <h4 align="center">Left Column</h4>
</div>
<!-- end of left column -->

<!-- right column -->
<div id="rh-col"><br />
  <h4 align="center">Right Column</h4>
</div>
<!-- end of right column -->

and the CSS file is as follows

Code:

/* Layout Stylesheet */ 
body{
 margin: 0;
 padding:0; 
 background:#808080;
 color: #333333;
 }	 
	 
#lh-col{
 position:absolute;
 top:62px;
 left:0;
 width:140px;
 z-index:3;
 background:#c0c0c0;
 color: #333333;}

#rh-col{
 position:absolute;
 top:62px;
 right:0;
 width:140px;
 z-index:2;
 background:#c0c0c0;
 color: #333333;}

#c-block {
 width:100%;
 z-index:1;
 background:#c0c0c0;
 color: #333333;
 height:80%;}

#header{
 height:60px; 
 border-bottom:1px solid #000000; 
 width:100%; 
 background:#eeeeee;
 color: #333333; 
 margin:0;
  }

#c-col{
 margin:0 142px 0 142px;
 position:relative;
 background:#ffffff;
 color: #333333;
 z-index:5;
 border: solid #000000;
 border-width:0 1px;
 }

#footer {
 width:100%;
 height:35px;
 border: solid #000000; 
 border-width:1px 0;
 background:#eeeeee;
 color: #333333;
 margin:0;
 }

Hi,
Since I'm a newcommer here, I'm not allowed to post proper URLs, so I'm hoping someone will have a look at the css problem in the following two images: (remove the spaces in the links)

h t t p : // farm4.static.flickr.com/3192/2929163063_5b1e1d9988.jpg?v=0

and

h t t p : // farm4.static.flickr.com/3188/2930025002_a7a4ed4fbe.jpg?v=0

The overlapping error in the second image occurs only in IE 8 with compatibility view turned on. The address is positioned properly in all other browsers.
In the style sheet a div tag positions the address :
#address {clear:both;position:relative; font-size:smaller;
top: 40px;
left: 0px;
width: 145px;
height: 80px;
}
I've used
<!--[if lte IE 6]>
<link rel="stylesheet" media="all" type="text/css" href="css/menu_ie.css" />
<![endif]-->

In the page the address is written as:
<div id="address">
<div align="right">The Company Name Inc.<br>
1234 Glenn View Road<br>
Hilldale, OW 12345<br>
123-456-7890</div></div>

...and in menu_ie.css given the address tag top:90px or margin-top:90px instead of 40px but this does not have any effect.

A few other points: The page layout is not pure css but a combo of a table + css. The menu is in an include file placed in a table column as is the address.

I want to know a fix that will position the address correctly about 40px below the menu.

Thanks

Been pulling my hair out all day over this. Got most of the bugs figured out, but these last two I have no clue about. Both problems only seem to happen in IE7

Site is here.

First problem is with the navigation bar, when I mouse over the bottom three links (recent projects, news, and contact us), it shifts the down for some reason.

Second problem, Right below the innovative & efficient areas, the footer seems to come up and cover that area. Please, any help is really appreciated. Thanks!

Check this page:

http://www.putimg.net

On Ie the adsense div is staying on the other div.... This is the adsense div css:

#adsense {
position:absolute;
margin-top:20px;
border:0px;
width:120px;
height:240px;
}

Solved it:

#adsense {
position:absolute;
margin-top:20px;
left:5px;
border:0px;
width:140px;
height:240px;
}