omi. I've forgotten.... +REP

myke · 13-09-2008, 02:38 PM

Hey guys, I've completely forgotten, it's like a mind wipe.

If I had three images like this

[image one] TEXT OVER THE BACKGROUND OF image 2 [image3]

So it kinda makes it like a (TEXT HERE) box, rounded.

How would I do it with a div?

http://clubhabbo.net/

Like their nav, and how would I align the text to the middle vertically?

Thanks +REP

~~Jackboy~~ · 13-09-2008, 02:40 PM

i dnt get what u mean??

Surely its just like

<div id="container"><div background><div with text><div again>
</div>
or summin :S:S
Then float them or w/e..

Excellent2 · 13-09-2008, 02:43 PM

Slice up the corners, left and right, then slice up the middle section, make the left corner float: left; and do the same with the middle section but give it a fixed width, then after the middle section make the right corner float: left; so it'll sit next to eachother.

Make sense?

myke · 13-09-2008, 02:44 PM

Like on Clubhabbos nav, the corners are rounded, and the text is vertically aligned to the middle... how is that done with DIVs?

I'll try that, thanks excellent.

~~Calon~~ · 13-09-2008, 03:00 PM

Originally Posted by SyrupyMonkey

Like on Clubhabbos nav, the corners are rounded, and the text is vertically aligned to the middle... how is that done with DIVs?

I'll try that, thanks excellent.

Are you sure it's not the Image?

If not;
http://www.webcredible.co.uk/user-fr...-borders.shtml

myke · 13-09-2008, 03:17 PM

I feel like such a noob now. LOL

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body,td,th {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: x-small;
	color: #FFFFFF;
}
body {
	background-color: #000000;
}
.navcontain {
clear: both;
height: 30px; 
width: 800px;
}
.navleft {
background:url(images/index_01.gif);
float: left;
height: 30px; 
width: 15px; 
background-repeat: none;}

.navmid {
background: url(images/index_03.gif);
float: left;
padding: 8px;
height: 22px; 
width: 770px; }

.navright {
background: url(images/index_05.gif);
float: right;
height: 30px; 
width: 15px; 
background-repeat: none;}
-->
</style></head>

<body>
<div class="navcontain">
<div class="left"></div>
<div class="navmid">Hello lol</div>
<div class="navright"></div>
</div>

</body>
</html>

There's my code, heres wut it shud look like and wut it does look like:

http://img66.imageshack.us/img66/14/loltd9.png

Jxhn · 13-09-2008, 06:59 PM

Originally Posted by SyrupyMonkey

I feel like such a noob now. LOL

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body,td,th {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: x-small;
	color: #FFFFFF;
}
body {
	background-color: #000000;
}
.navcontain {
clear: both;
height: 30px; 
width: 800px;
}
.navleft {
background:url(images/index_01.gif);
float: left;
height: 30px; 
width: 15px; 
background-repeat: none;}

.navmid {
background: url(images/index_03.gif);
float: left;
padding: 8px;
height: 22px; 
width: 770px; }

.navright {
background: url(images/index_05.gif);
float: right;
height: 30px; 
width: 15px; 
background-repeat: none;}
-->
</style></head>

<body>
<div class="navcontain">
<div class="left"></div>
<div class="navmid">Hello lol</div>
<div class="navright"></div>
</div>

</body>
</html>

There's my code, heres wut it shud look like and wut it does look like:

http://img66.imageshack.us/img66/14/loltd9.png

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body,td,th {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: x-small;
	color: #FFFFFF;
}
body {
	background-color: #000000;
}
.navcontain {
clear: both;
height: 30px; 
width: 800px;
}
.navleft {
background: url(images/index_01.gif);
float: left;
height: 30px; 
width: 15px; 
background-repeat: none;}

.navmid {
background: url(images/index_03.gif);
float: left;
padding: 8px;
height: 14px; 
width: 770px; }

.navright {
background: url(images/index_05.gif);
float: left;
height: 30px; 
width: 15px; 
background-repeat: none;}
-->
</style></head>

<body>
<div class="navcontain">
<div class="navleft"></div>
<div class="navmid">Hello lol</div>
<div class="navright"></div>
</div>

</body>
</html>

I've made a few corrections, haven't tested it though. It's probably not 100% correct, but should be closer.

Tylenol · 16-09-2008, 06:07 PM

I suggest just saving that whole rounded rectangle as an image, then use that as a div bd. And use padding to align the text to correctly placed left. And to align text, in css use "text-align: center or w/e;"

Jxhn · 16-09-2008, 07:11 PM

Originally Posted by Tylenol

I suggest just saving that whole rounded rectangle as an image, then use that as a div bd. And use padding to align the text to correctly placed left. And to align text, in css use "text-align: center or w/e;"

That's only for a fixed width. A new div class and new background image would be needed for each div that has a different width.

L?KE · 16-09-2008, 08:08 PM

It's really not that hard?

A container, three divs in it. Left one is the left of the rectangle, floated left and fixed width. Middle one is the background of the middle part repeat-x and no fixed width floated left, and the third one the same as the one except the other image...

the container would be 100% width and the same height as the nav bar with no padding.

Cba to write the code for it, unless you're that desperate.

Thread: omi. I've forgotten.... +REP

Thread Tools

omi. I've forgotten.... +REP

Posting Permissions