Making a simple bar is hard

HTML & CSS
1

I want to make bars like this so I could easily add this to my pages.

Wanna make information bars, warning bars etc.

But how would I make this.

Lets say I’ve made this in photoshop, where and what should I slice and about the css part I’m confused at all…
I need best way to make this into css.

What I would do is

Slice the left and right corners.
And the middle part of this.
Then I would make for all these 3 images a div and then do it like
<div id=“leftbar”>
</div>
<div id=“bottombar”>
Text here
</div>
<div id=“rightbar”>
</div>

2

Hi,

It depends on what you want exactly and what browsers to support.

You could use border-radius for the corners but IE8 and under will just get square
ones.

If you want to use images for the round corners then it will depend on whether the height of the bar is going to expand with text or not. If the height of the bar is a fixed height and not containing any text (or not containing text that is likely to wrap or overflow) then you could just cap the left and right ends and repeat the middle section (assuming that the background is a gradient otherwise just a background colour will do).

The icon on the left could be a background image or part of a sprite if you have many icons.

It’s hard to tell from that image what the use of that bar is and what it will contain and what height it really is.

You would probably want to nest three divs so that you apply full width repeating background to the first div, then on the inner you add the left side corners and then on the third nested div you add the right side corners.

Your content just goes inside the inner div and floated left and right as required.

If you need varying height then you’ll need to do each individual corner in a rounded box fashion.

3

Here’s an example using border-radius and n images.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.bar {
    position:relative;
    margin:10px;
    border:1px solid #efedc7;
    background:#fffad0;
    min-height:15px;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius: 5px;
    padding:3px 15px 3px 5px;
    overflow:hidden;
}
* html .bar {
    height:15px;
}
.bar p {
    margin:0;
    font-size:92%
}
.bar a {
    position:absolute;
    right:10px;
    top:3px;
    font-size:65%;
    color:#000;
    text-decoration:none;
}
</style>
</head>
<body>
<div class="bar">
    <p>Icon <a href="#">X</a></p>
</div>
</body>
</html>
4

Thanks a bunch, now god is with me to understand these codes :stuck_out_tongue:

Will try to make it xD

5

How would I make of text be in middle as in the X coordination not Y
Because that would be float:center;
But need other middle :stuck_out_tongue:

6

Try text-align: center.

7

Yes as mentioned above text will center if you use text-align:center on the parent. If its a block element you want centered then you would need to use auto margins and a specified width.

8

Thanks for the reply, but this is what I ment.

And my current code for it is

#topbar {
height: 50px;
background: #1a1a1a;
position: relative;
z-index: 20;
color:#fff;
}

#topbar-left {
float:left;
margin-left:2%;
height: 25px;
}

9

Hi,

I wasn’t quite sure what the image was getting at but using my code above you could center the text like this.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.bar {
    position:relative;
    margin:10px;
    border:1px solid #efedc7;
    background:#fffad0;
    min-height:15px;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius: 5px;
    padding:3px 15px 3px 5px;
    overflow:hidden;
        text-align:center;
}
* html .bar {
    height:15px;
}
.bar p {
    margin:0;
    font-size:92%
}
.bar a {
    position:absolute;
    right:10px;
    top:3px;
    font-size:65%;
    color:#000;
    text-decoration:none;
}
.bar b{float:left;}
</style>
</head>
<body>
<div class="bar">
    <p><b>Icon</b> <span>You are currently signed in as Noob</span><a href="#">X</a></p>
</div>
</body>
</html>
10

It was a custom bar I’ve made, the bar you’ve told me is most likely complete.

I would of use your new code though.
Thanks, what I’ve ment is.

This text needs to be center in the middle

When I would of center align the above text it would move it horizontally centered.

But I mean vertical so it would be like :

This is where it should be

11

You could do sommat like this (changes in red):


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.bar {
    position:relative;
    margin:10px;
    border:1px solid #efedc7;
    background:#fffad0;
    min-height:[COLOR="Red"]45[/COLOR]px;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius: 5px;
    padding:3px 15px 3px 5px;
    overflow:hidden;
    text-align:center;
    [COLOR="Red"]line-height: 45px;[/COLOR]
}
* html .bar {
    height:[COLOR="Red"]45[/COLOR]px;
}
.bar p {
    margin:0;
    font-size:92%
}
.bar a {
    position:absolute;
    right:10px;
    top:3px;
    font-size:65%;
    color:#000;
    text-decoration:none;
}
.bar b{float:left;}
</style>
</head>
<body>
<div class="bar">
    <p><b>Icon</b> <span>You are currently signed in as Noob</span><a href="#">X</a></p>
</div>
</body>
</html>

Only works if you have one line of text, though.

12

Worked like a charm thanks a lot!