Style Question-Style for only one <div> of a page

  • The Shrew
  • Graduate
  • Graduate
  • User avatar
  • Posts: 247
  • Loc: Florida

Post 3+ Months Ago

I've been trying to fix this problem for half a day, but really I don't know how to. How do I set a style for only one <div>? Like a background style as an example.

Code: [ Select ]
<style=" background-color: #000000;
background-image: linksbg.gif;
background-repeat:no-repeat;
background-position:top center;
background-attachment:fixed;" type="text/css"><div id="links"><font color="white">cows</font></div></style>
  1. <style=" background-color: #000000;
  2. background-image: linksbg.gif;
  3. background-repeat:no-repeat;
  4. background-position:top center;
  5. background-attachment:fixed;" type="text/css"><div id="links"><font color="white">cows</font></div></style>


That's how I was told it would work, but so far I have had no results. That div is where the large black area is on my website: http://www.driftingspace.com/shrewspages/main.shtml
Any help would be much appreciated.
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • b_heyer
  • Web Master
  • Web Master
  • User avatar
  • Posts: 4581
  • Loc: Maryland

Post 3+ Months Ago

I would do it in the head, or a separate css file:

Code: [ Select ]
div.1 {whatever}

//then in the body:

<div class="1"></div>
  1. div.1 {whatever}
  2. //then in the body:
  3. <div class="1"></div>


That works great :)
  • RichB
  • Guru
  • Guru
  • User avatar
  • Posts: 1121
  • Loc: Boston

Post 3+ Months Ago

I'd probably do it that way too but you can inline the style information in the div tag itself if you want to:

Code: [ Select ]
<div style="color: white; background-color: #000000;
background-image: url(linksbg.gif);
background-repeat:no-repeat;
background-position:top center;
background-attachment:fixed;" id="links">cows</div>
  1. <div style="color: white; background-color: #000000;
  2. background-image: url(linksbg.gif);
  3. background-repeat:no-repeat;
  4. background-position:top center;
  5. background-attachment:fixed;" id="links">cows</div>


don't use type="text/css" here - that's only for the embedded style sheet that appears in the head or in a link to an external .css file as far as i know, and I think you need url(path/filename.ext) around the background image unless the image is in the same directory then just url(filename.ext)
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Posts: 23456
  • Loc: Woodbridge VA

Post 3+ Months Ago

But if it was for just one tag, I'd probably do the inline. Why? It takes priority over everything else. Also, inlines have a tendancy to do better with older browsers that are a bit pickier about parsing style correctly.

Style Cascading order priority with number 4 being highest and 1 being lowest:

1. Browser Default
2. External Style Sheet
3. Internal Style Sheet
4. Inline Style

(borrowed from w3schools -
http://www.w3schools.com/css/css_intro.asp)
  • b_heyer
  • Web Master
  • Web Master
  • User avatar
  • Posts: 4581
  • Loc: Maryland

Post 3+ Months Ago

so if I have two styles referring to the same tag.class but one is external and one is internal, the internal one would be used?
  • The Shrew
  • Graduate
  • Graduate
  • User avatar
  • Posts: 247
  • Loc: Florida

Post 3+ Months Ago

Cool guys, thanks for the help.
  • Bigwebmaster
  • Site Admin
  • Site Admin
  • User avatar
  • Posts: 9090
  • Loc: Seattle, WA & Phoenix, AZ

Post 3+ Months Ago

b_heyer wrote:
so if I have two styles referring to the same tag.class but one is external and one is internal, the internal one would be used?


Sounds like it, yup.
  • RichB
  • Guru
  • Guru
  • User avatar
  • Posts: 1121
  • Loc: Boston

Post 3+ Months Ago

I'm pretty sure it goes like this:

say you have an external style sheet that overrides the browser default p tag

Code: [ Select ]
p
{
text-align: left;
font-family: blah, blah, blah;
etc.
etc.
}
  1. p
  2. {
  3. text-align: left;
  4. font-family: blah, blah, blah;
  5. etc.
  6. etc.
  7. }


since your external sheet has a bunch of other useful classes and such you link it to all your files, but then you realize that on one page you want to have all the paragraphs centered. You could override the p tag in the external sheet (and the browser default) with an embedded one that would apply only to that page.

Code: [ Select ]
<style type="text/css">
p
{
text-align: center;
font-family: blah, blah, blah;
etc.
etc.
}
</style>
  1. <style type="text/css">
  2. p
  3. {
  4. text-align: center;
  5. font-family: blah, blah, blah;
  6. etc.
  7. etc.
  8. }
  9. </style>


then you decide that just one of the paragraphs on that page needs to be aligned right. You could override the embedded style sheet, external css, and browser default with an inline style that would apply only to that particular tag:

Code: [ Select ]
<p style="text-align: right; font-family: blah, blah, blah;">fourscore and seven years ago</p>


so you can use a global style sheet to override the browser defaults to create a standard "look and feel" for all your pages, then you can override that with an embedded one on individual pages that need something different, and in turn override everything else with an inline style to control a single element.
  • The Shrew
  • Graduate
  • Graduate
  • User avatar
  • Posts: 247
  • Loc: Florida

Post 3+ Months Ago

Thanks for all the input, next time i want to do that I'll know how. I've gotten the website to do what I want it to do except for one thing, I had some javascript submenus for my links, but after I took away the frames I had(which was the reason for the first question), I moved the javascript from a separate HTML file to a text file that loads onto every page. All of the javascript stopped working, which is really weird because I made no changes to it in the transfer. Looking thourgh it I can see no problems...

http://www.driftingspace.com/shrewspages/header.txt Is the text file
http://www.driftingspace.com/shrewspages Is the website in question.

If someone can find a reason in there for that to not work, that'd be great. But if not, I can just make a little subindex instead of a submenu.
  • b_heyer
  • Web Master
  • Web Master
  • User avatar
  • Posts: 4581
  • Loc: Maryland

Post 3+ Months Ago

might want to try header.js, I don't know if that would make a difference.
  • RichB
  • Guru
  • Guru
  • User avatar
  • Posts: 1121
  • Loc: Boston

Post 3+ Months Ago

I noticed that you have a css id "menu"

#menu { position: absolute; top: 119px; left: 0px; width: 150 px; }

this is the same name as one of the variables in the script and the error is occuring on the line:

menu = ('submenu' + n);

of the script - perhaps the names are clashing, try changing the name of the outer div around the menu items to something else - maybe navmenu. I'm not sure if that's it or not but it's worth a try.
  • RichB
  • Guru
  • Guru
  • User avatar
  • Posts: 1121
  • Loc: Boston

Post 3+ Months Ago

I just tried it with a copy of the page that I downloaded and it seemed to work.

I changed

#menu { position: absolute; top: 119px; left: 0px; width: 150 px; }

to

#navmenu { position: absolute; top: 119px; left: 0px; width: 150 px; }

and

<div id="menu">

to

<div id="navmenu">
  • The Shrew
  • Graduate
  • Graduate
  • User avatar
  • Posts: 247
  • Loc: Florida

Post 3+ Months Ago

Thanks Alot Rich, I'm gonna go fix it :D
  • The Shrew
  • Graduate
  • Graduate
  • User avatar
  • Posts: 247
  • Loc: Florida

Post 3+ Months Ago

Woo! It works, weird that it stopped. Thanks again.
  • RichB
  • Guru
  • Guru
  • User avatar
  • Posts: 1121
  • Loc: Boston

Post 3+ Months Ago

Glad you got it working again. Love the pages by the way - especially the shrew graphics :D
  • The Shrew
  • Graduate
  • Graduate
  • User avatar
  • Posts: 247
  • Loc: Florida

Post 3+ Months Ago

Heh, thanks, though I sorta forgot how to draw them over the last month LOL, I guess I just need to practice them more.

Post Information

  • Total Posts in this topic: 16 posts
  • Users browsing this forum: m2soft and 81 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.