Attempting 2.0 Design

s32ialx -1 Newbie Poster

17 Years Ago

Hi ok i'm attemtping to design a web 2.0 look site. i cannot give you the exact site but i will show exactly what i am trying to acomplish
ok so here is the basic look i am going for

ok so basicly what i have done is

<div class="content">
	<div class="ctl"></div><div class="ctm"></div><div class="ctr"></div>
		<div class="cml"></div><?php include('example.php') ?><div class="cmr"></div>
	<div class="cbl"></div><div class="cbm"></div><div class="cbr"></div>		
</div>

css

.content {
	position:absolute;
	top: 180px;
	right: 300px;
	left: 275px;
	height: 450px;
	width: 785px;
	margin-left: auto;
	margin-right: auto;	
}
.ctl { 
	position: absolute;
	background-image: url('images/ctl.png');
	top: 0px;
	left: 0px;
	height: 41px;
	width: 41px;
	z-index: 3;
}
.ctm {
	position:relative;
	background-image: url('images/ctm.png');
	top: 0px;
	left: 41px;
	right: 41px;
	height: 41px;
	width:100%;
	z-index: 3;
}
.ctr {
	position:absolute;
	background-image: url('images/ctr.png');
	top: 0px;
	right: 0px;
	height: 41px;
	width: 40px;
	z-index: 3;
}

now what happens is this

any possible way to make ctm stop 100% when it reach's ctr

index
CTL - Content Top Left
CTM - Content Top Middle
CTR - Content Top Right
CML - Content Middle Left
etc

1 Contributor
0 Replies
104 Views

Dani AI

Generated 10 Months Ago

For : the center piece is expanding past the right corner because it has a fixed full width while also being offset. The browser treats width:100% independently of the right offset, so the middle slice overruns the right cap. Two simple, robust fixes: let the browser calculate the center width by setting both left and right offsets on an absolutely positioned element, or use a single background on the container and reserve space for the corners with padding.

A minimal absolute-offset approach (keeps three elements but stops the center at the right cap):

.content { position: relative; }

.ctl  { position: absolute; left: 0; top: 0; width: 41px; height: 41px; background: url('ctl.png') no-repeat; }
.ctr  { position: absolute; right: 0; top: 0; width: 40px; height: 41px; background: url('ctr.png') no-repeat; }
.ctm  { position: absolute; left: 41px; right: 40px; top: 0; height: 41px; background: url('ctm.png') repeat-x; }

Alternative (fewer elements): apply the repeating middle image as the container background and use padding to make room for the left/right corners; corners can be added with pseudo-elements or absolutely positioned images. This reduces markup and is easier to maintain.

Quick troubleshooting tips: ensure the positioned ancestor is correct (position: relative on the container), remove width:100% from the middle element when using left/right offsets, and verify corner-image widths exactly match the offset values. Use browser devtools to inspect computed box sizes. For modern references on how positioning and background-repeat work see the MDN docs for position and background-repeat.

Be the first to reply

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.