Web Hosting Talk






PDA

View Full Version : How does one get a bar on the top of a site like this?

Shaliza
12-05-2007, 07:24 AM
http://lyricing.com/

I mean, I know how to do it, but when I try, the div id tags don't work. The layout doesn't show up. I'm using those tags for some other things & they work just fine there.
bear
12-05-2007, 07:41 AM
Without being able to see what you've done, it's kind of hard to tell you how to fix it. Can you post your effort?
Shaliza
12-05-2007, 08:00 AM
Okay, I borrowed theirs just to test. When I finally get the hang of it, I'll come up with my own.

The test: http://www.official-tycp.com/test

The CSS:


.form_select {

border: 1px solid #7f992f;

color: #6a6a6a;

width: 75px;

padding: 3px;

background: #FFF;

font: 10px Tahoma, Sans-serif;

}

.form {

border: 1px solid #7f992f;

color: #6a6a6a;

padding: 3px;

background: #FFF;

font: 10px Tahoma, Sans-serif;

}

.form_button {

border: 1px solid #7f992f;

color: #6a6a6a;

padding: 3px;

background: #FFF;

font: 10px Tahoma, Sans-serif;

}

.form_text {

font-size: 12px;

}

#content topNavigation { width: 745px; height: 41px; padding: 0; margin: 0; border: 0; }

#content topNavigation ul, li { display: table-cell; text-align: left; list-style: none; padding: 0; margin: 0; border: 0; }

#headerNavigation {

width: 745px;

height: 27px;

padding-top: 2px;

margin: 0 auto;

}

#headerNavigationLeft {

padding-top:4px;

float: left;

}



#headerNavigationRight {

padding-top:4px;

float: right;

}



#headerNavigationRightForm {

float: right;

}
BlueHayes
12-05-2007, 08:02 AM
I am a tad confused as to what you mean, I can see a green bar across the top of the website in your post though :)

Could you please explain your problem a bit more? What you've done, what you would like to do and how you would like "it" to work? Thanks!
Shaliza
12-05-2007, 08:18 AM
That's all I want: a bar across the top of the page. What I've done is above.
BlueHayes
12-05-2007, 10:47 AM
Well right now, I see a bar across the top of the page - so your mission is accomplished? I'm using Firefox.

By the way, the software looks quite nice from looking at the admin demo too, is it your development or are you just testing it yourself? Nice job on it, if it is :D
Shaliza
12-05-2007, 02:53 PM
Nope, the script isn't mine!

So you can see it on my test site? That's weird. I don't see a bar at all.
slyseekr
12-05-2007, 10:16 PM
What browser are you using?

IE will render full-page width elements differently than standards compliant browsers.
Shaliza
12-06-2007, 03:23 AM
My browser is Mozilla 4.0 [using IE.]

What can I do so that my browser shows things like this?
Jay August
12-06-2007, 05:30 AM
CSS:

#topbar {
width: 100%;
height: 30px;
line-height: 30px;
vertical-align: middle;
}


HTML:

[...]
<html>
[...]
<body>
<div id="topbar">

This is on top!

</div>
</body>
[...]
tycity
12-07-2007, 10:07 AM
Cool thanks for the code - I'm going to give that a try tonight! :)
Jay August
12-08-2007, 02:24 PM
Good luck! If you run into troubles just reply here on drop me a PM.
Captain Tycoon
12-09-2007, 02:27 PM
This is just what i was looking for, I'm trying this now on my site, I hope it works!
Shaliza
12-09-2007, 04:27 PM
I tried & it didn't work.
Jay August
12-09-2007, 09:36 PM
It didn't work is a bit general. I hope you haven't just copied that code 1-on-1 because that will never work indeed. Here's a ready made example for you. Let me know if this helps! :)
slyseekr
12-09-2007, 10:44 PM
The easiest way to code the bar should be:

CSS:

body { padding: 0px;
margin: 0px;}
div.topBar { width: auto;
height: XX;
background: XX;}
HTML:

...
<body>
<div class="topBar">
Put whatever you want in here
</div>
</body>
...
You should know enough about CSS to customize it yourself, the most important things you'll need are the:

body padding = 0px
div width = auto >> this automatically makes the div width 100% of the page, as it is a block element by default
p2pguru
12-09-2007, 11:46 PM
Hope you didnt mind me grabbing that too :) Just curious you see
slyseekr
12-09-2007, 11:49 PM
No problem...

I'm not sure, but the div.topBar might need 0px margins too.
Jay August
12-10-2007, 01:09 AM
Yes indeed slyseekr. Perhaps it's better to drop all margins and paddings in advance by adding


* {
margin: 0;
padding: 0;
}

to the very top of your CSS sheet.