Log in

View Full Version : 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
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-friendly-resources/css/css-round-corners-borders.shtml
myke
13-09-2008, 03:17 PM
I feel like such a noob now. LOL


<!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
http://img66.imageshack.us/img66/14/loltd9.png
Jxhn
13-09-2008, 06:59 PM
I feel like such a noob now. LOL


<!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
http://img66.imageshack.us/img66/14/loltd9.png


<!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
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.

Want to hide these adverts? Register an account for free!