CSS - Semi-fluid Div Width

Hi,

I'm attempting to apply a left and right image to a tab when hovered. The images aren't simply curved corners, but rather curved inwards corners at the top and outwards at the bottom. The tabs are all of different widths and I'd like to avoid using a class for each tab obviously. here's an image depicting what I mean:



So the issue is essentially that I need the a:hover class to apply two background images - one on the left, one on the right - as one image can't deal with different sized tabs. I know that won't be possible until CSS3, but I know there must be a way to do this with today's standards.

The image is of the tab on hover. Without hover, it's just the plain gray background to the left and right of it.

There's probably a method for these sort of issues on A List Apart or something, but I can't find one. Anybody have anything on hand, or any suggestions?

Your help is appreciated. Thanks in advance!

I need a combination of this:

http://bonrouge.com/3c-hf-fixed.php

and this:

http://bonrouge.com/3c-hf-fluid.php

I need the middle column to be a fixed width and the outer two to be fluid.

I also need to maintain the 100% with header and footer at top and bottom respectively.

Any ideas how to do this?

Thanks.

Hi all,

I'm trying to achieve the following:

<div id="left">This column is of blue background, and stretches all the way to the left.</div>

<div id="center"> THIS COLUMN IS FIXED WIDTH, 760px </div>

<div id="right">This column is of red background, and stretches all the way to the right.</div>

Hope that is self explanatory.. I've Googled all this but can only find solutions for fluid "center" columns with fixed width right/left columns. I'm trying to do the opposite. Could anyone let me know how I can do this?

I've got some messy CSS that definitely needs to be corrected, I'm trying out different things so here's my 'trial& error' code:
Code:

	#left {
		background-color: blue;
		float: left;
		margin: auto;
		position: absolute;
	}
	#center {
 		background: #DFDFEB url(../images/body/top.jpg) no-repeat;
		width: 760px;
		margin: 0 auto;		
	}
	#right {
		background-color: red;
	}

Thanks in advance!

Link he rpisolution dot com/test/

Ok, the fixed-fluid-fixed part of the layout seems to work ok in the latest firefox and IE7 but it's broken in IE6 and possibly other versions. Could you guys take a look at the css? rpisolution dot com/test/css/style.css and see if you see what is breaking it in IE6, i thought I had put a hack that was supposed to fix the issues.

btw, i know the CSS is probably ugly. sorry about that.

thanks

I'm trying to construct a complex 3-column CSS layout.
I would like the center column to be fixed-width, and the outer columns to split the remainder of the document's width.
All 3 columns should be able to contain centered or floated block elements and accept mouse events.

Currently, I have approached this problem two nearly-successful ways. The first was to float the outer columns, but then I have no way to make them fill out. The second was to float the outer columns, then set them both to 50% with the appropriate margin set to half the width of the center column, but then I lose mouse event support in the center column because of the margins.

The relevant CSS follows: Code:

html { height: 100%; width: 100%; }
body { margin: 0; height: 100%; width: 100%; }
#left {
  float: left;
  height: 100%;
  /* 2nd attempt
  width: 50%;
  margin-right: 305px; */
}
#right {
  float: right;
  height: 100%;
  /* 2nd attempt
  width: 50%;
  margin-left: 305px; */
}
#center {
  margin: auto;
  height: 100%;
  width: 610px;
}

HTML-wise, the div order is #left, #right, #center.

Does anyone know of a way to work around this?

I'm using the CakePHP framework to build my site.

I hope I'm not asking an impossible question and being since I'm new an all.. Anyways I finished a simple design well I thought it was simple anyway until I tried to make the content box to be a fluid width.

Here's what it's supposed to look like.
http://planet-rpg(dot)com/PR_style.png // yes I know I'm a new user..

Here's what I currently have.
http://planet-rpg(dot)com

Here's my coding.

html
Code:

<?php echo $html->docType('xhtml-trans'); ?>
<html>
<head>
      <title>Planet RPG::. Imagine a creative universe : <?php echo $title_for_layout; ?></title>
      <?php echo $html->css('styles'); ?>
</head>
<body>
<div id="top_bar">
<p>top bar</p>
</div>
<div id="body">
<div id="header">
<p>Header</p>
</div>
<div id="page-wrap">
<ul id="navigation">
<li class="first"><a href="/games/">Games</a></li>
</ul>
  <div id="frame">
     <div id="container">
       <div id="main_content">
            <p>Content area</p>
       </div>
     </div>
  </div>
</div>
</div>
<div id="footer">
<p>footer coding</p>
</div>
</body>
</html>

css
Code:

html {
	background: #2b435d;
}

html, body {
	margin: 0;
}

body, table {
	color: #303030;
	
}

img { border: 0; }

#body {
	background: #d8dde8;

	padding: 0 0 16px;
}

#page-wrap {
	min-width: auto;
	margin: 10px auto;
	}

#frame {
    margin: 0 auto;
    padding: 0px 1170px 0px 220px;
    margin-top: -17px;

}
#main_content {
	background-color: #fff;
}


#header {
	background: url("../img/header.png") repeat-x bottom left;
	height: 64px;
	margin-top: 36px;
}
#navigation {
   background: url("../img/navigation.png") repeat-x bottom left;
   height: 31px;
   margin-top: -20px;
   font-family: "Arial", sans-serif !important;
   font-size: 14px;
   color: #fff;
   text-shadow:-1px -1px 0 black;
   list-style-type: none;
   padding:1px 5px 1px 220px;
}
#navigation li {
	float: left;
}

#navigation li a {
	border-left: 2px solid #303030;
    text-shadow:-1px -1px 0 black;
	color: #D0D0D0;
	font-size: 14px;
	font-weight: bold;
	text-decoration: none;

	display: block;
	height: 21px;
	padding: 6px 12px 1px;
}

#navigation li a:hover {
	color: white;
	text-shadow:-1px -1px 0 black;
}

#navigation li.first {

	padding-left: 236px;
	margin-left: -236px;
	text-shadow:-1px -1px 0 black;
}

#navigation li.first a {
	background: url("../img/cursor.png")bottom center no-repeat; height:24px;
	color: #6193c7;
	border: 0;
	text-shadow:-1px -1px 0 black;
}

#logo {
	width: 166px;
	height: 50px;
	margin-top: -32px;
	margin-left: 20px;

	position: absolute;
	z-index: 2;
}

#footer {
	background: #607080 url("../img/footer.png") repeat-x;
	height: 60px;
	padding: 30px 0;

	clear: both;
}

#top_bar {
	background: url("../img/top_bar.png") repeat-x bottom left;
    height: 36px;
	font-family: "Arial", sans-serif !important;
	font-size: 12px !important;
	font-weight: normal !important;

    height: 36px;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 5;
}

I haven't used CSS/html in awhile but if anyone can help me either "fix" the content box so it appears like mockup which would be centered on my screen as my resolution is 2560X1600(30") and just repeat the <div's> when needed.

Hope someone can help me with my question.

[sorry if this does not belong in this forum]

Google's browser arrives Tuesday...anyone heard how the CSS support for this is?...Microsoft says that their new IE8 (now available in beta) is their most CSS compliant to date (for them, but that's not saying much)

Google's "Chrome" launches tomorrow...


Google's "Chrome" web browser

I'm a designer first and foremost who is now working on learning CSS based layouts. In the past, I've always handed my PSD file off to a coder who generates the HTML/CSS. I'd like to learn how to do that portion myself.

I know my way around the basics of CSS based layouts in setting up a standard 2 column layouts using floats and also 3 column layouts using absolute positioning for the left and right columns. The video tutorials from Chris at CSS-Tricks dot com were fantastic in getting me jump started by the way. Highly recommended.

I'm now looking at how to draw up the framework for a more complicated layout in CSS rather than reverting back to old table based HTML but I'm stumped.

Here is an image of the layout in question sans logo and content:

codedpreview dot com/?view=5361

As you can see, in the body there are three columns, one spanning 50%, two spanning 25% and each column has 1 or 2 rows of section containers. This layout would be a no brainer using nested HTML tables. I'm confused on how to set up these rows within the columns using CSS. Would you essentially do the same and nest div tags within the three columns?

Does anyone have any good tutorials or resources I could review in regards to setting up the body portion of this layout in particular?

Thanks so much for your time and help!

I want to have a shadow around the content of my website, but the problem is that the header has a semi-transparent image and so the shadow continues until the top of the page while I want it to stop at the blue header. How can I accomplish this?

Screenshot:
http://www.yannickv.be/screenshot_massageforum.png

My HTML:

Code:

<div id="wrapper">
	<div id="shadow">
		<div id="splash" class="container">
			<img src="header.png" width="1000" alt="header" />
		</div>
		<div id="menu_up" class="container">
			<div id="menu_up_content">
				Here comes the horizontal menu...				
			</div>
		</div>		
		<div id="page2" class="container">
			<div id="panel_left">
				<div id="fotodiv">
					<img src="massagefoto.jpg" width="160px">
				</div>
			</div>	
			<!-- end #panel_left -->
			<div id="panel_right">

				<div id="page" class="container">
					<div id="content">
						<div class="post">
							Here comes the actual content...
						</div>
						<div style="clear: both;">&nbsp;</div>
					</div>
					<!-- end #content -->
					<div id="sidebar">
						<ul>
							<li>
								<div style="clear: both;">&nbsp;</div>
							</li>
							<li>
								<ul>
									Here comes the navigation menu...
								</ul>
							</li>
						</ul>
					</div>									
					<div id="cleardiv" style="clear: both;">&nbsp;</div>
				</div>
				<!-- end #page -->		
				<div id="footer">
					Here comes the footer...
				</div>		
						
			</div>
			<!-- end #panel_right -->
			<div id="cleardiv" style="clear: both;">&nbsp;</div>
		</div>
		<!-- end #page2 -->	
	</div>
	<!-- end #shadow -->	
</div>
	<!-- end #wrapper -->
<div id="footer">
</div>

My CSS (stripped down to the essentials):

Code:

#wrapper {
	margin: 0 0 auto auto;
	padding: 0;
}

#shadow {
	width: 1000px;
	margin: 0 auto;
	-moz-box-shadow: 3px 3px 30px #000;
	-webkit-box-shadow: 3px 3px 30px #000;
	box-shadow: 3px 3px 30px #000;
	/* For IE 8 */
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
	/* For IE 5.5 - 7 */
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
}

Hi all,
I've made a rough mock up of how i want a site to look but not sure the best way to do it in css yet.

The idea would be that the colour would bleed all the way to on side (alternating side) between sections, the image attached should help explain.

Not so worry on exact code, but more conceptually how the best way you think to do it would be.



sorry about the size of the image not sure how to make it smaller

Hey All!

Hope i didnt scare tooo many people off with the title!

Im new to playing around with transparency and am having trouble with getting the affect i want!

What i want:
1. Page background as a large picture (1280 x 1024) non repeating etc. (The picture is of a grassey field)
2. a semi transparent rounded white box that sits in the middle (dimensions 735x 550)
3. on top of the semi transparent box i want my content.


The reason i want it semi transparent is because i want the main background to come through and be visible through the content. and if the page is resized etc that the semi transparent box can move over the background and show the background whereever it is!

Problems:
1. My first attempt i could get 90% of the look i wanted. I got the semi transparent box floating in the middle of the page and showing the background through perfectly. as soon as i add content the content is also transparent.
i tried adjusting the trnasparency for the content but that didnt work.

e.g.
Code:

<div id="semiTransBox">
   <div id="content">blah blah blah</div>
</div>

note i dont have my actual code in front of me so please try and work with this!

The wording "blah blah blah came out as transparent as its parent semiTransBox. Not what i wanted!

I understand this is something to do with the parent child relationship with transparency so i tried something different for my second attempt:

2. i created the semi Transparent box and then added a second fully transparent div below which was positioned using css to move up 500px to fit over the semi transparent box. using top:-500px; position:relative

e.g.
Code:

<div id="semiTransBox"></div>
<div id="transBox">
   <div id="content">blah blah blah</div>
</div>

The content is not transparent now but there is still a problem

The problem is now because i have created the second div below the first it has caused the browser to add scroll bars to the window and shows white are where the main picture doesnt fill.

is there a way to get rid of the space where the second div used to be?


i really hope that essay made sense!


thanks

Anyone has a code for a good way to show a semi transparent announcement on a full browser window that can be dismissed by the user to show the content ?


something that works like this:
http://jquery.com/demo/thickbox/#sectiond-2 scroll up a little and click on the demo and then show....

I tried to figure out how they did it but it's too complicated (so it seems)

I'm looking for a simple dedicated solution.

I am useing bon rouge's 3 columns 100%:

http://bonrouge.com/3c-hf-fluid.php

In IE, at some resolutions (1280x1024) the footer has a small 1pxish margin at the bottom.

Any idea how to fix this?

I am a total newbie to CSS + DIV.

I have a logo that I am trying to piece together for a fluid page. The middle image is already in place, and I have it set to 100% width. I have one div, called "header."

I need to know how to place the other 2 images at the right and left hand sides. They will, of course, be the static images, and the middle will be dynamically sized by the browser.

Here is my CSS, so far for this portion:

#header {
position: absolute;
top: 0px;
right: 0px;
margin: 0px;
padding: 10px;
background: url(images/CATScreenMiddle.png);
width: 100%;
height: 265px;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 25px;


Thanks for any help, in advance.

I have problem whereby i want a container div with the width at 100% and a inside div that which is the same width but minus 10px on both sides.

How can you get the inside div to be of fluid width to the container div with the 10px either side.

Thanks.