PDA

View Full Version : information bars?


X Z A C X
09-26-2009, 12:07 PM
hi ive been trying to figure this out for a long time if u look at the top if the page
you can see an information bar how do i do this??

(look here: www.jw.com.au (http://www.jw.com.au))

DWcourse
09-26-2009, 02:55 PM
look at their infobar style sheet: http://www.jw.com.au/infobar.css

X Z A C X
09-28-2009, 08:15 AM
look at their infobar style sheet: http://www.jw.com.au/infobar.css

thats all well and good but where do u put the txt?



<STYLE>
BODY
{
PADDING-RIGHT: 0px! important;
PADDING-LEFT: 0px! important;
PADDING-BOTTOM: 0px! important;
MARGIN: 0px;
PADDING-TOP: 0px! important
}
#infobar
{
FONT: message-box
}
#infobar A
{
CLEAR: both;
PADDING-RIGHT: 0.3em;
DISPLAY: block;
PADDING-LEFT: 2em;
BACKGROUND: url(warning.gif) infobackground fixed no-repeat 0.3em 0.3em;
FLOAT: left;
PADDING-BOTTOM: 0.45em;
WIDTH: 100%;
CURSOR: default;
COLOR: infotext;
PADDING-TOP: 0.45em;
BORDER-BOTTOM: 0.16em outset;
TEXT-DECORATION: none
}
#infobar A:link
{
CLEAR: both;
PADDING-RIGHT: 0.3em;
DISPLAY: block;
PADDING-LEFT: 2em;
BACKGROUND: url(warning.gif) infobackground fixed no-repeat 0.3em 0.3em;
FLOAT: left;
PADDING-BOTTOM: 0.45em;
WIDTH: 100%;
CURSOR: default;
COLOR: infotext;
PADDING-TOP: 0.45em;
BORDER-BOTTOM: 0.16em outset;
TEXT-DECORATION: none
}
#infobar A:visited
{
CLEAR: both;
PADDING-RIGHT: 0.3em;
DISPLAY: block;
PADDING-LEFT: 2em;
BACKGROUND: url(warning.gif) infobackground fixed no-repeat 0.3em 0.3em;
FLOAT: left;
PADDING-BOTTOM: 0.45em;
WIDTH: 100%;
CURSOR: default;
COLOR: infotext;
PADDING-TOP: 0.45em;
BORDER-BOTTOM: 0.16em outset;
TEXT-DECORATION: none
}
#infobar A:active
{
CLEAR: both;
PADDING-RIGHT: 0.3em;
DISPLAY: block;
PADDING-LEFT: 2em;
BACKGROUND: url(warning.gif) infobackground fixed no-repeat 0.3em 0.3em;
FLOAT: left;
PADDING-BOTTOM: 0.45em;
WIDTH: 100%;
CURSOR: default;
COLOR: infotext;
PADDING-TOP: 0.45em;
BORDER-BOTTOM: 0.16em outset;
TEXT-DECORATION: none
}
#infobar A:hover
{
BACKGROUND: url(warning2.gif) highlight fixed no-repeat 0.3em 0.3em;
COLOR: highlighttext
}
#viewplot
{
PADDING-RIGHT: 1em;
OVERFLOW-Y: scroll;
PADDING-LEFT: 1em;
OVERFLOW-X: hidden;
PADDING-BOTTOM: 1em;
WIDTH: 100%;
PADDING-TOP: 1em;
;
HEIGHT: expression(this.parentNode.offsetHeight - this.offsetTop)
}
</STYLE>

and how do i insert it onto my web page do i just make a new .CSS doc?

edbr
09-28-2009, 09:33 AM
this is the style sheet so you could add it to one you have,make a new one or add it to a syle on your page . first option is probably best.
you then add a div id= "infobar" and add text on the page you want it on

X Z A C X
09-30-2009, 08:55 AM
ok so im doing this now so where in my layout.css do i put it?


X Z A C X

domedia
09-30-2009, 04:03 PM
ok so im doing this now so where in my layout.css do i put it?
Anywhere it makes sense to you. The CSS file is a list of CSS rules, so the browser will just read through all of them and apply the styles to your web page.

X Z A C X
10-02-2009, 10:47 AM
where do u put the dive tag so i can have the infobar at the top

X Z A C X
10-10-2009, 08:31 AM
so how do i add the text? ive added the div tag so whats next?

keep in mind i want it to look like an active x control bar...



X Z A C X

domedia
10-12-2009, 12:07 AM
Don't shoot the messenger here.. but this is very basic stuff you should know beore attemtping to make a website. Did you read the manual?
All you need to do is add a container tag, like a DIV, add text to it and then style it.

X Z A C X
10-17-2009, 04:14 AM
ok the info bar worked but now that i have added my text to it and this happened http://www.flickr.com/photos/xzacx/4018535848/

this is the 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>Elegantly Plastered Home</title>
<style type="text/css">
<!--
body {
background-color: #592600;
}
#top {
height: 300px;
width: 500px;
}
#bodyArea img {
line-height: normal;
}
#bodyArea img {
left: auto;
padding: 12px;
float: left;
}
-->
</style>
<link href="CSS/Layout.css" rel="stylesheet" type="text/css"/>
</head>
<link type="text/css" rel="stylesheet" href="infobar.css">
<div id="infobar"><a href="systems.asp"><Elegantly Plastered recomends google chrome to maximise your browsing expereance</a></div>
</div>
<body>
<div id="wrapper">
<div id="logo"><a href="index.html"><img src="Images/Elegantly plastered logo.jpg" width="632" height="223" border="0" /></a></div>
</div>
<div id="bodyArea">

<div id="top"></div>


<div id="left"></div>

<p>&nbsp;</p>
<p> <img src="Images/pics/DSC00898.JPG" width="345" height="255" /></p>






</body>
</html>



and this is the layout.css
* {
margin: 0px;
padding: 0px;
}
#wrapper {
background-color: #592600;
height: 230px;
width: 800px;
}
#wrapper {
border-right-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #592600;
border-left-color: #592600;
}
#logo {
}
#left {
height: 500px;
width: 100px;
float: left;
background-color: #66CCFF;
}
#right {
width: 600px;
float: right;
height: 500px;
}
#top {
height: 30px;
width: 1500px;
background-color: #66CCFF;
}
<STYLE>
BODY
{
PADDING-RIGHT: 0px! important;
PADDING-LEFT: 0px! important;
PADDING-BOTTOM: 0px! important;
MARGIN: 0px;
PADDING-TOP: 0px! important
}
#infobar
{
FONT: message-box
}
#infobar A
{
CLEAR: both;
PADDING-RIGHT: 0.3em;
DISPLAY: block;
PADDING-LEFT: 2em;
BACKGROUND: url(warning.gif) infobackground fixed no-repeat 0.3em 0.3em;
FLOAT: left;
PADDING-BOTTOM: 0.45em;
WIDTH: 100%;
CURSOR: default;
COLOR: infotext;
PADDING-TOP: 0.45em;
BORDER-BOTTOM: 0.16em outset;
TEXT-DECORATION: none
}
#infobar A:link
{
CLEAR: both;
PADDING-RIGHT: 0.3em;
DISPLAY: block;
PADDING-LEFT: 2em;
BACKGROUND: url(warning.gif) infobackground fixed no-repeat 0.3em 0.3em;
FLOAT: left;
PADDING-BOTTOM: 0.45em;
WIDTH: 100%;
CURSOR: default;
COLOR: infotext;
PADDING-TOP: 0.45em;
BORDER-BOTTOM: 0.16em outset;
TEXT-DECORATION: none
}
#infobar A:visited
{
CLEAR: both;
PADDING-RIGHT: 0.3em;
DISPLAY: block;
PADDING-LEFT: 2em;
BACKGROUND: url(warning.gif) infobackground fixed no-repeat 0.3em 0.3em;
FLOAT: left;
PADDING-BOTTOM: 0.45em;
WIDTH: 100%;
CURSOR: default;
COLOR: infotext;
PADDING-TOP: 0.45em;
BORDER-BOTTOM: 0.16em outset;
TEXT-DECORATION: none
}
#infobar A:active
{
CLEAR: both;
PADDING-RIGHT: 0.3em;
DISPLAY: block;
PADDING-LEFT: 2em;
BACKGROUND: url(warning.gif) infobackground fixed no-repeat 0.3em 0.3em;
FLOAT: left;
PADDING-BOTTOM: 0.45em;
WIDTH: 100%;
CURSOR: default;
COLOR: infotext;
PADDING-TOP: 0.45em;
BORDER-BOTTOM: 0.16em outset;
TEXT-DECORATION: none
}
#infobar A:hover
{
BACKGROUND: url(warning2.gif) highlight fixed no-repeat 0.3em 0.3em;
COLOR: highlighttext
}
#viewplot
{
PADDING-RIGHT: 1em;
OVERFLOW-Y: scroll;
PADDING-LEFT: 1em;
OVERFLOW-X: hidden;
PADDING-BOTTOM: 1em;
WIDTH: 100%;
PADDING-TOP: 1em;
;
HEIGHT: expression(this.parentNode.offsetHeight - this.offsetTop)
}
</STYLE>


any ideas?


X Z A C X