CSS - Overflow Of Multiple Images

does anyone know how i can get 4 background images in my table, one for each corner of the table?

they are curved images, as i am aiming for the table to have curved edges.

Thanks

Hello,

I'm looking for some help with this problem and would really appreciate some guidance. I'm teaching myself layout with CSS (just picked up the dummies book, so you can guess my current level) but am currently stumped.

I'm looking to have a header, with a central image and two link images positioned either side. The central image would be exactly centred, with the link images aligning to the sides of the central image: [PORTFOLIO] [ABOUT] [CENTRED IMAGE] [BLOG] [CONTACT]. As the link images are different widths, I'm unable to simply centre everything in one go, as then the central image is not viewed as exact centre.

I need a way to centre the image and then float the link images to the relevant sides but have it so they align either left or right against the centred image. Also, the centre image height is greater than the link images, so as well as aligning either left or right I'm trying to get them to align to the middle, like this:

Code:

		                    [             ]
----------------[PORTFOLIO] [ABOUT] [CENTRED IMAGE] [BLOG] [CONTACT]-----------------
                                    [             ]

---- variable empty space depending on browser width

I currently have a div to centre using left-margin: auto; right-margin: auto; text-align: center; and have another div inside this with the centred image. I've also created a left div and right div to contain the link images on either side using the float tag: left/right and aligned left or right, but I don't know where to go from there. I know it's probably simple but I can't seem to find the answer. Any help would be great.


Code:

#header {
    	margin-left: auto;
	margin-right: auto;
	text-align: center;
	}
	
#title {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	width: 400px;
	}
	
#imgleft {
	float: left;
	text-align: right;
	width: 30%
	}
	
#imgright {
	float:right;
	text-align: left;
	width: 30%
	}

<div id="header">
			<div id="imgleft">
			<a href="portfolio.html"><img src="l_portfolio.gif" alt="Portfolio"></a>
			<img src="l_about.gif" alt="About">
			</div>
			<div id="imgright">
			<img src="l_blog.gif" alt="Blog">
			<img src="l_contact.gif" alt="Contact">
			</div>
			<div id="title">
			<img src="title.gif" height="84" width="400" alt="Title">
			</div>
			
		</div>

Hello
I am very new to CSS. One of my problems is that my web experience is only in tools that generate the code. I"m needing what I"m told is a simple thing to do, but not finding it easy for me

I tried to post with some links to my site, etc, but the rules won't let me post any links. I have posted in another CSS site, but fine it very inactive and not getting any help.

What I'm trying to do

All items below to make up the header of the site. A background graphic which fills across the screen, no matter the size of the window. I have this working, although if I shrink the window too far, it overwrites the graphic in item 2 below. A left justified logo graphic. Working fine. A Centered graphic. I have this showing, but it is not quite centered right, and it is a bit smaller than actual, and I cannot get it to space down a bit. (tried padding, does nothing. Trying margin spaces everything down, including item 1 above. A right justified graphic. This shows, but is VERY SMALL, much smaller than original graphic, and it does not right justify.
NOTES
The current code, below, is based on a tutorial I went through, using % for width. The idea being that if it is built based on percent of width, then whatever width of window, it would adjust. I used 900px for original calculations. I find that it only fills the window as if it is 900 px wide. So I redid the percentages based on 1500px.

I've done lots of reading, Googling, and been trying all kinds of stuff and getting not too far with it. Tried px for width too, seems worse.

Here is a print screen of the header:

[IMG]URL[/IMG]

Sigh...sorry...even img code has a url, and even though it showed in preview, I see it will not display it in actual message.

The site I"m working on is shuttermaster.co (not com), where you can see what it looks like now.

CSS Code
Only including the code relevant to the header issue. I do have menu code in CSS, but it is not complete, and I'm not having problems with that.

Code:

	#myHeader {width:auto;height:133px;
		background:url(/photos/i-QXfPgvM/0/S/i-QXfPgvM-S.jpg) repeat-x}

 		#myLogo {
				 float:left;
				 width:10%;
				 height:150px	;
				 margin-left:2.22%;
				 display:inline;
				 background:url(/photos/i-sttGP6Z/1/O/i-sttGP6Z.png) no-repeat}
			   

		#myConame {
				
				width: 15.33%;
				height:90px;
				margin-left:auto;
				margin-right:auto;
				background:url(/photos/i-T3ZjJ8R/2/Th/i-T3ZjJ8R-Th.png) no-repeat}
		
		
		#myBanner {
				float:right;
				width: 29.73%;
				height:150px;
				background:url(/photos/i-BkhSxLJ/1/Th/i-BkhSxLJ-Th.png) no-repeat}

The HTML Code

Code:

<div id="myHeader">
<div id="myLogo"></div>
<div id="myConame"></div>
<div id="myBanner"></div>
<div style="clear: both;"></div>
<div class="menu">
  <ul>
        <li><a href="http://shuttermaster.co">Home</a></li>
        <li><a href="#">Portfolio</a></li>
		<li><a class="drop" href="http://shuttermaster.co/galleries" >Galleries
			<!--[if gte IE 7]><!--></a><!--<![endif]-->
			<!--[if lte IE 6]><table><tr><td><![endif]-->
			<ul>	
				<li><a href="http://rogerewingphotography.smugmug.com/Landscapes/Landscapes/19892237_mHBK84">Landscape</a></li>
				<li><a href="Link">Drop 2</a></li>
				<li><a href="Link">Drop 3</a></li>
        </ul> <!--[if lte IE 7]></td></tr></table></a><![endif]-->
   </li>
        <li><a href="#">About Me</a></li>
        <li><a href="#">Guestbook</a></li>
  </ul>
</div> 
</div>
<div style="clear: both;"></div>

I hope I have been clear enough. Hoping someone can point me the right direction.

Regards, and thanks....

what i'm trying to accomplish is two boxes next to each other inside a div, which i can scroll horizontally to see the two boxes. if you copy the code below it works correctly, only because the width of the parent div is set.

Code:

<style type="text/css">


#container {
overflow:scroll;
width:100px;
}

  #parent {
overflow:hidden;
width:400px;
}

.box1 {

border:1px solid black;
float: left;
height: 101px;
width: 101px;
}

</style>

<div id='container'>
<div id='parent'>
<div class='box1'></div>
<div class='box1'></div>
</div>
</div>

if i change width:900px in the parent div to width:auto then the boxes go underneath one another. That's the problem, the parent div should auto adjust to the width of both boxes.

i'd really appreciate solving this. i can't have a fixed width on the parent div it should auto adjust and both boxes should be next to each other.

My page looks decent in Firefox but in IE the overflow property doesn't seem to be working. Perhaps you can give me some pointers as to which tags may be messing up the display in Internet Explorer.

The link to the page in question.
http://www.paulvincentgandolfi.com/blog/?page_id=123

Thanks

Hi all,
I'm working on the site http://boolarongpress.com.au and have hit a problem.

In IE7 if you click into either the title or author search fields in the left hand nav menu the cpu usage maxes out and IE7 hangs.

There is no javascript attached to these inputs.

The problem seems to be caused by a line in the css,

overflow: auto;

This is set for the content div so that it scrolls as if it were a frame.

If I remove this line from the css the problem dissappears but of course the content div no longer scrolls.

Has anyone got any ideas on how I can fix/work around this issue?

Cheers,
Peter

this is the code i'm having problems with:

Code:

<style type="text/css">

body {
	font: normal 10px Verdana, Arial, Helvetica, sans-serif;
	color:#666;
 	margin : 0;
	padding : 0;
}

/* text */

h1 {
	font: bold 10px Verdana, Arial, Helvetica, sans-serif;
	line-height:30px;
}

/* div classes */

div.row {
	position:relative;
	left:10px;
	width:326px;
	height:20px;
	z-index:1;
	margin-bottom:8px;
	text-align:right;
}

div.cell_title, div.cell_content {
	position:absolute;
	top:0px;
	float:left;
	padding:0px 0px 0px 8px;
	border:1px solid #E4E4E4;
	text-align:left;
	line-height:17px;
	
}

div.cell_title {
 	background-color: #E4E4E4;
	left:0px;
	width:100px;
	z-index:2;
}

div.cell_content {
	background-color:#FCFCFC;
	left:100px;
	width:224px;
	z-index:3;

}

/* form elements */

.input {
	font: normal 10px Verdana, Arial, Helvetica, sans-serif;
	color:#666;
	background-color: #FCFCFC;
	height:15px;
	width:213px;
	border:0;
	}

.textarea {
	font: normal 10px Verdana, Arial, Helvetica, sans-serif;
	color:#666;
	background-color: #FCFCFC;
	height:100px;
	width:213px;
	border:0;
	overflow:auto;
	}

</style>

<h1>Contact</h1>
<form action="?menu=contact" method="post" name="contact">
<div class="row">
	<div class="cell_title"><label for="name">name:</label></div>
	<div class="cell_content"><input type="text" class="input" name="name" id="name"/></div>
</div>

<div class="row">
	<div class="cell_title"><label for="email">email:</label></div>
	<div class="cell_content"><input type="text" class="input" name="email" id="email" /></div>
</div>

<div class="row">
	<div class="cell_title"><label for="message">message:</label></div>
	<div class="cell_content"><textarea class="textarea" name="message" id="message"></textarea></div>
</div>

<div class="row">
	<input type="image" src="includes/images/btn_add.gif" name="Submit" value="Submit">
</div>
</form>

My problem is that my "row" div's overlay if their content is larger. Because of that i cannot see the send button from my form (the textarea height is bigger that the height of the "row" div - i need the layer to expland according to the content, but i don't want it to overlay on what is after it!).
I hope that you understood my problem and could help my with it.

Thanks in advance!

hi,

I have 3 DIV's, The first div is like a menu header DIV and the

second DIV is the menu links and the third DIV has some information

I want to click on the first DIV then show the second DIV like a

menu problem is the third DIV moves down.. How can i let the

second DIV overflow over the third DIV without it moving down?

Thanks

While working on my site, I am testing it in Mozilla Firefox 1.0pr and IE 6. In my code:

body, td, iframe, table, div, tr {
font-variant: small-caps;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #ffffff;
background-color: #666666;
scrollbar-3dlight-color: #666666;
scrollbar-arrow-color: #666666;
scrollbar-base-color: #666666;
scrollbar-darkshadow-color: #666666;
scrollbar-face-color: #666666;
scrollbar-highlight-color: #666666;
scrollbar-shadow-color: #666666;
}
a:link {
color: #ffffff;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #ffffff;
}
a:hover {
text-decoration: none;
color: #ff0000;
}
a:active {
text-decoration: none;
color: #ffffff;
}
select, option, textarea, input {
border: #ffffff 1px solid;
font-size: 11px;
font-variation: normal;
font-family: Verdana;
background-color: #666666;
}

I would add "overflow: auto;" right under 'body, td, iframe, table, div, tr {' so that in Mozilla the scrollbars would not show up. However, when I load it in IE, the windows do not scroll at all. Is there a quick-fix for this, or what can I do so it will work properly in both browsers?

How do I make the DIV overflow in the below codes? It works in IE but not
firefox.



<html >
<head>
<style type="text/css">
html, body { height : 100%; }
</style>
</head>
<body>

<table style="height : 100%; width : 100%">
<tr style="height : 64px; background-color : Blue;">
<td></td>
</tr>

<tr style="height : auto; background-color : red;">
<td>
<!-- THIS IS THE PROBLEM -->
<div style="height :auto; overflow-y : scroll">
<!-- THIS IS THE PROBLEM -->

asd<br />
asd<br />
asd<br />
asd<br />
asd<br />
asd<br />
asd<br />
asd<br />
asd<br />
asd<br />
asd<br />
asd<br />
asd<br />
asd<br />
asd<br />
asd<br />
asd<br />
asd<br />
asd<br />
asd<br />
asd<br />
asd<br />
asd<br />
asd<br />
asd<br />
asd<br />
asd<br />
asd<br />
asd<br />
asd<br />
</div>
</td>
</tr>

<tr style="height : 64px; background-color : Blue;">
<td></td>
</tr>
</table>

</body>
</html>

I am having trouble with the overflow: hidden; in IE6. I have a simple example. I have rewritten this to make it as simple as possible.

[code]
<html>
<head>
</head>
<body>
<div style="position:absolute; top: 100px; width:200px; z-index:1; bottom: 113px; overflow:hidden">
<img src="images/700/900-pixel-height-image.jpg">
</div>
</body>
</html>

This simple page works fine in Firefox but in IE6 the overflow:hidden does not work. Why? I thought IE6 completely supported overflow.

Thanks for reading my question.

I have 2 sections. They are #info and #menu.

The way I have my html set up is, I have <div id="info"> then <div id="menu"> that way, the height of "info" will always be at least as high as "menu".

My problem arizes when "info" is higher than "menu". In this case I would like "info" to not grow in height, but rather have the Overflow: auto; come into effect, and have a scrollbar on the right hand side of the "info" section.

For an example of what is happening right now check out
www.pierced.ca/Kelly/index.htm

index.htm looks the way I want all the pages to look.

if you click on Cards, Tags, or Seasonal, you'll see how the page differs from index.htm or the contact, or order pages.

Is there a way to say, height can be no bigger than the current height of "menu"?

Thanks,

Brad

Can anyone give me a lead as to where to start fixing the job IE6 is displaying my website? It looks ok in IEmac, safari, firefox, opera and netscape. My style sheet validates, and the xhtml for the page is valid with exception of the php counter within the div on the side, yet I took that out and tested and the same results occurred in IE6. Any help is greatly appreciated.

url = bluewebpages.com


EDIT: side menu, with addition of 'height:15px' to the #side ul li a, should display fine when i upload the changed css file, but the posts still display out of whack...