9 replies [Last post]
calua
calua's picture
Offline
Regular
brazil
Last seen: 18 years 39 weeks ago
brazil
Joined: 2004-03-09
Posts: 13
Points: 0

Hello. I am making a site that is suposed to look something like the below:

| <header------------------------------->X |
| <content -------------> <menu------> |

it has to have an image on X, that i placed inside a div. To do that, i'm giving "right" absolute positions to all my divs. Is there any way to make CONTENT and HEADER stretch all the way to the left, almost as if being placed on the first pixel column?

the site is, for now, at:
http://www.geocities.com/calua_pataca/pobrema1/index.htm

the image is correctly placed. When I get this right, the header will cover it's base.

and it's css is:

#Header {
	padding:0px 0px 0px 20px;
	height:28px;
	position:absolute;
	top:45px;
	right:30px;

	border-right: solid 1px #afafaf;
	border-bottom: solid 1px #afafaf;
	border-top: solid 1px #afafaf;

	background-color:pink;/*#F7F7F7;*/

	/*hack feio*/
	voice-family: "\"}\"";
	voice-family:inherit;
	height:30px;
	z-index:1;
	}
body>#Header {height:30px;}

#Content {

	position:absolute;
	top:85px;
	right:310px;/*30+250+20+10  margem dir, width menu mais o padding, margem entre os 2*/


	background-color:pink;	
	margin:0px 0px 50px 10px;
	paddin:0px 0px 0px 10px;
	padding:10px;
	z-index:2;
	}

#Menu {
	position:absolute;
	top:85px;
	right:30px;

	width:250px;
	padding:10px;
	background-color:#eee;
	border:1px solid #afafaf;
	line-height:17px;
	voice-family: "\"}\"";
	voice-family:inherit;
	width:248px;
	z-index:2;
	}
body>#Menu {width:248px;}

#DoisSujeitos_Enfeite {
	position:absolute;
	top:10px;
	right:12px;
	z-index:0;
	}

as I saw someone saying, thanks in advance.[/url][/code]

calua
calua's picture
Offline
Regular
brazil
Last seen: 18 years 39 weeks ago
brazil
Joined: 2004-03-09
Posts: 13
Points: 0

problem on how to stretch things properly

well, in case you are wondering, this is how it should LOOK. The Boxes are actually stretching beyond the screen to the left, making them useless (or at least it seems like so).

http://www.geocities.com/calua_pataca/pobrema1/index2.htm

caluã

co2
co2's picture
Offline
Leader
UK
Last seen: 14 years 34 weeks ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

problem on how to stretch things properly

Try something like this (can't vouch how compatible with various browsers it is, it's very late Shock ):

	body
	{
		margin: 0;
		padding: 0;
	}
	div#header
	{
		height: 100px;
		background: #cc9;
		padding: 5px;
	}
	div#header img 
	{
		float: right;
		margin: 10px;
	}
	div#header h2
	{
	float: left;
	}
	div#content
	{
	background: #eee;
	float: left;
	width: 75%;
	clear: left;
	}
	div#menu
	{
	background: #ccc;
	float: right;
	width: 25%;
	}

Test it with the following HTML:

<div id="header">
<h2>Header</h2><img src="img.gif" alt="" /></div>
<div id="content">
<h2>Content Here</h2>
<p>Content text here</p>
</div>
<div id="menu">
<p>Menu</p>
</div>

The next sentence is true. The previous sentence is false. Discuss...

co2
co2's picture
Offline
Leader
UK
Last seen: 14 years 34 weeks ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

problem on how to stretch things properly

I should add that you could change this for set width rather than a fluid percentage... and add some margins between the div's for how you seem to want it.

I'm not a fan of absolute positioning unless absolutely necessary (in your case, I don't think it is).

By the way... Carioca ou Paulista? Wink

The next sentence is true. The previous sentence is false. Discuss...

calua
calua's picture
Offline
Regular
brazil
Last seen: 18 years 39 weeks ago
brazil
Joined: 2004-03-09
Posts: 13
Points: 0

problem on how to stretch things properly

sorry, but I think I've explained wrong. I've drawn an image to show what i meant better.

the problem is that the image has to kind of be around the header, and the only way I can think of to do this is by setting absolute positions using "right" values for everything. To put the image there, I placed it inside a div (DoisSujeitos_Enfeite)

I'll try something that seems ugly, if it works I'll post it here.

the image. it is not appearing on my preview, so click
http://www.geocities.com/calua_pataca/imgforum.jpg to see how it should look like (and judge on how possible what I'm trying to do is). In case the problem is with the preview, here is the image:

thanks. caluã

hmm. paulista. :mrgreen:

calua
calua's picture
Offline
Regular
brazil
Last seen: 18 years 39 weeks ago
brazil
Joined: 2004-03-09
Posts: 13
Points: 0

problem on how to stretch things properly

sorry, the link didn't work as well, i'm guessing it's geocites.

here, i put it into an html file.

http://www.geocities.com/calua_pataca/imagem.htm

co2
co2's picture
Offline
Leader
UK
Last seen: 14 years 34 weeks ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

problem on how to stretch things properly

So the image is half sitting outside the header box? Is this right?

I'm currently in the middle of something else, but will have a go later... can probably get it working without absolute positioning.

In the meantime, you could try placing a parent div for the header, this div could have a CSS background image to the right. Then, nest another div inside the parent header div with say, 10px margin and a border. The margin on the second nested div would push it inside and show the background image of the parent image behind the nested image (make sure you give the nested div a background colour).

The next sentence is true. The previous sentence is false. Discuss...

co2
co2's picture
Offline
Leader
UK
Last seen: 14 years 34 weeks ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

problem on how to stretch things properly

Here you go, how does this look?

http://dev.c-o2.net/imgHead.htm

Have only tested it with Safari on the Mac, but if it's a bit upset in any other browser, then it wouldn't take much to rectify.

All CSS is in the source HTML.

The next sentence is true. The previous sentence is false. Discuss...

calua
calua's picture
Offline
Regular
brazil
Last seen: 18 years 39 weeks ago
brazil
Joined: 2004-03-09
Posts: 13
Points: 0

problem on how to stretch things properly

hey, it worked! Although not in IE, as you said, it probably won't take long to solve, and I didn't have to think of any incredibly complex solution. Thanks a lot. Laughing out loud

Caluã

co2
co2's picture
Offline
Leader
UK
Last seen: 14 years 34 weeks ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

problem on how to stretch things properly

Great! If you need any help with the IE code, let me know.

The next sentence is true. The previous sentence is false. Discuss...