Rounded Corners Driving Me Nuts - Webmaster Forum - Web Design, Programming and SEO forums

01-25-2007, 05:26 PM

majorglory

Status: Senior Member
Join date: Jun 2006
Location:
Expertise:
Software:

Posts: 848

iTrader: 10 / 100%

majorglory is on a distinguished road

Rounded Corners Driving Me Nuts

Hey guys,
I recently started coding again and, of course, there are billions of problems...
Well maybe just one.

A small preview of what the whole thing looks like is here.
What I have so far can be found here. What I'm trying to get is 'navright.gif' (nav right cap) and 'navbright.gif' (bottom nav right cap) to go to the far right of the their bars so it "caps" off the bar. I've tried 'align="right"'.

I've tried floating the left content left and setting the width as 99% then using another div to complete the 1% left over, but then it has an extra space at the bottom of it which is bad because I need to add another dark bar underneath it.

That pretty much all that I'm stuck on.

What will I get stuck on next? The login form. I don't know how to add styles to forms, so if you can post a link up, or just tell me here on how to do it, that'd be great.

Once again, I'm still looking for a 'mentor' on XHTML/CSS coding. Just someone who can answer my questions on how to do this or that.

Thanks all!

01-25-2007, 06:14 PM

derek lapp

Status: design rockstar
Join date: Jan 2005
Location: guelph, ontario
Expertise:
Software:

Posts: 2,246

iTrader: 0 / 0%

derek lapp is on a distinguished road

for rounded corners you usually need 3 elements:

* wrapper div (apply tile as bg)
* inner wrapper (apply right cap as background top right)
* list for buttons (left button contains left cap)

Code:

.capWrap {
	float: left;
	width: yourwidth;
	height: yourHeight;
	background: transparent url(image/yourImage.gif) repeat-x;
}
.innerWrap {
	float: left;
	width: width-of-capWrap;
	height: height-of-capWrap;
	background: transparent url(images/your-right-cap-image.gif) no-repeat top right;
}
... etc

Code:

<div class="capWrapr">
	<div class="innerCap">
		<ul>
			*list items here
		</ul>
	</div>
</div>

01-25-2007, 09:35 PM

majorglory

Status: Senior Member
Join date: Jun 2006
Location:
Expertise:
Software:

Posts: 848

iTrader: 10 / 100%

majorglory is on a distinguished road

Well I understand the solution, but the bar isn't extending out 100% like I told it to do. =[ Thus not being able to see the top right justified right cap image.

Any idea?

01-25-2007, 10:39 PM

Xi0s

Status: Sin Binner
Join date: Dec 2006
Location: Huddersfield, UK
Expertise:
Software:

Posts: 384

iTrader: 3 / 83%

Xi0s is on a distinguished road

display:block; = width:100%; but is more browser compatible.

01-25-2007, 10:44 PM

majorglory

Status: Senior Member
Join date: Jun 2006
Location:
Expertise:
Software:

Posts: 848

iTrader: 10 / 100%

majorglory is on a distinguished road

didnt work =[

01-25-2007, 11:15 PM

nathomusic

Status: Senior Member
Join date: Mar 2005
Location: England
Expertise:
Software:

Posts: 974

iTrader: 0 / 0%

nathomusic is on a distinguished road

Originally Posted by majorglory

didnt work =[

Never does. The amount of times people have told me to do that to fix something, it's not worked once!

01-26-2007, 03:29 PM

jabberwocky

Status: Member
Join date: Oct 2005
Location: Calgary, Alberta, Canada
Expertise:
Software:

Posts: 278

iTrader: 0 / 0%

jabberwocky is on a distinguished road

for form style, same thing as anything else in style sheets, use ids or classes.

Code:

 
<form method="post" action="bush-isms.php" id="your_id" class="a_class">

<input type="text" name="internets" class="interwebs" />
<input type="submit" name="submit" value="submit" class="submit_button" />

</form>

it's like that...and that's the way it is. UUGH!