/    Sign up×
Community /Pin to ProfileBookmark

red bar how?

Copy linkTweet thisAlerts:
Mar 11.2007

Hi,
I want to create the red navigation bar graphic near top of page.
It has rounded corners, color gradient and a line break between each link.

Can css do this or do i need to use gimp or something, the graphics I am talking about ?

[url]http://www.budgetdirect.com.au/index.jsp[/url]

to post a comment
CSS

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@CentauriMar 11.2007 — You will still need some sort of graphics program to create the graphics themselves. The graphics of the buttons in that link don't look all that good as they are not uniform across buttons, making the buttons appear uneven. For this type of button, I would be tempted to use a sliding doors technique, with normal and rollover graphics combined in one.

The css then takes your unordered list of links, and applies the appropriate style and graphics to produce the bar and rollovers.

Cheers

Graeme
Copy linkTweet thisAlerts:
@jagguyauthorMar 11.2007 — Ok

I have created an background image to what i want, the problem is I need to set the height else the graphic fails to appear and the graphic won't scale to fit inside the area ( end part chops off).


#n1 { /* all lists */

// height:50px;

background-image:url('green1.gif');

}

#n1 ul{ /* all lists */

height:50px; //will fail without?

list-style-type:none;

// background-image:url('green1.gif');

}



#n1 li a{ /* all lists */

float:right;
// background-color:yellow;

padding-right:5px;

text-decoration:none;

}

<div id="n1">

<ul>

<li><A href="#">kkk</a></li>

<li><A href="#">kkk</a></li>

<li><A href="#">kkk</a></li>

</ul>

</div>
Copy linkTweet thisAlerts:
@CentauriMar 11.2007 — I usually find it best to display the <a> tag as a block and set the size and background graphic on this. Then float the <li>s, and finally set overflow:hidden on the <ul> to contain the floats properly. If not using a left and right part graphic for a sliding doors technique, then the width of the <a> element will also have to be set to match the width of the graphic (if using rounded corners).

Cheers

Graeme
Copy linkTweet thisAlerts:
@jagguyauthorMar 11.2007 — thanks for the replies.

I am confused about the graphic. It is a rounder corner with color radial gradient. Now usually you have a sliding door technique (eg split up into 4 sections and set image to a nested div).

Since it has this gradient then i am thinking the colors won't work properly, so i just had a basic 800X50 image.

How can i using sliding door method with such a color scheme and why does the fraphic appear 1 line down on screen when the body has no margin/padding?

Am I supposed to have a background image for each <a> tag and then also have a section for the corners, as this is a lot of nested div's and messing around for such a basic graphic?
Copy linkTweet thisAlerts:
@CentauriMar 11.2007 — Can you attach a copy of your basic image at the moment? - will have a play with it for you.

Cheers

Graeme
Copy linkTweet thisAlerts:
@jagguyauthorMar 11.2007 — ok here it is

Do I just load the graphic as is or split it up or construct it a different way?


like the silver navigation bar here , i want to create this with links

http://aus.cricinfo.com/db/NATIONAL/AUS/

[upl-file uuid=716cae97-8813-47f1-b9bc-c0e62aea0f7f size=18kB]green1.gif[/upl-file]
Copy linkTweet thisAlerts:
@CentauriMar 12.2007 — Well, that example link and your graphic is different to the concept of the first example link you gave....

To emulate the BaggyGreen menu bar, use your graphic as a container div background. The <a> elements are floated left and given a height less than the graphic - a left border here forms the link separator. The <li>s are displayed inline, and the whole <ul> is floated right inside the #nav container - a top padding centres the <ul> vertically within the div.

Try this [CODE]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
<!--
* {
margin: 0;
padding: 0;
}
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
}
#nav {
background-image: url(green1.gif);
display: block;
width: 800px;
height: 40px;
padding-top: 10px;
margin: 10px auto 0;
}
#nav ul {
float: right;
display: inline;
margin-right: 20px;
}
#nav li {
list-style: none;
display: inline;
}
#nav a {
display: inline;
height: 30px;
line-height: 30px;
padding: 0 10px;
float: left;
text-decoration: none;
font-weight: bold;
color: #003300;
border-left: 2px solid #006600;
}
#nav a:hover {
color: #FFFFFF;
text-decoration: underline;
}
-->
</style>
</head>

<body>
<div id="nav">
<ul>
<li><a href="#">Link1</a></li>
<li><a href="#">Link2</a></li>
<li><a href="#">Link3</a></li>
<li><a href="#">Link4</a></li>
</ul>
</div>
</body>
</html>
[/CODE]

Cheers

Graeme
×

Success!

Help @jagguy spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 4.26,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...