HTML Code Advice

Spectator#1

Hi there, I'm just looking for a piece of presumably simple HTML advice. I've been redesigning my band's myspace page - I wanted to make it really simple, so I've cut out most of the fancy stuff altogether.

There's just one thing I want to do and can't find anywhere that can tell me how to do it or can do it for me.

In the standard myspace layout, the banners behind the headings are a different colour to the rest of the box, for example headings like the band name above the avatar, the "About", "Contacting" and "General Info" ones.

I've made the page white and all information sections white as well and there's no outline around any of the sections. I just wanted to put a very light grey colour behind the headings to highlight the different sections. Can anyone tell me how I might do that?

Spectator#1

Is this on the wrong forum? Where should I put it?

forbairt

Spectator#1 wrote:

I've made the page white and all information sections white as well and there's no outline around any of the sections. I just wanted to put a very light grey colour behind the headings to highlight the different sections. Can anyone tell me how I might do that?

can't be bothered logging in to myspace to find out .. ...

but you need to find out what their tags are ..
I presume they are either h1 .. h2 .. or h3 ...

so you need some CSS ...

h1 { background-color: #CFCFCF; }
h2 { background-color: #CFCFCF; }
h3 { background-color: #CFCFCF; }

or something like that ...

that any help to you ?

Spectator#1

Thanks! Where do you think I should try inputing them?

You see, my problem is that the standard layout shows that there is a differentiation between the section colour and the header/banner colour, but I can't see in the code whether or where they make that differentiation. I'm pretty retarded at html and css!

Liam Byrne

Visit the page, do "View Source" and locate the tags that surround the text that you want to change; then post that code here.

Chances are that there's a <div> tag around the "sections" that you've mentioned; if that has an ID or class, you can set the CSS for them independently,

e.g.
<style>
div#header {
background-color: red;
}

div#section {
background-color: blue;
}
</style>
<div id="header">HEADER IS HERE</div>
<div id="section">SECTION IS HERE</div>

Spectator#1

Here's one of four of the div entries.


div.layoutbutton a:hover{
background-image:url(http://www.mywackospace.com/images/a.gif);
width:100%;
height:24px;
color:rgb(197,21,21) !important;
font:bold 11px arial,sans-serif !important;
text-transform:capitalize !important;
text-decoration:underline !important;
line-height:22px !important;
}

See the way there's no header differentiation in this code? How would I go about entering it?

Thanks - by the way - everyone for all your help, it's much appreciated!

forbairt

can you give a link to your myspace account ...
I've never customized myspace ... but I should be pretty handy with CSS ..

Need to see what I'm changing to get a better idea ...

the div you just posted doesn't really tell me a lot ... its for an Anchor / Link and it tells it to have a background image ...

Its not for a header ... I'll assume ?

Spectator#1

Here's all the code in all it's glory!


<style type="text/css">table, tr, td {background-color: transparent;}body {cursor: crosshair;background-attachment: fixed;background-color: rgb(255, 255, 255);}table table {border: 0px;}table table table table {border: 0px;background: none;}table table table {border-width: 0px;border-style: solid;background-color: rgb(255, 255, 255);}table table, table table tr, table table td {background-color: transparent;}table table tr, table table td {border: none;border-width: 0;}table table table table td {filter: none;}table table table td {opacity: 1;KHTMLOpacity: 1;MozOpacity: 1;filter: alpha(opacity:100);}a, a:link, a:active, a:visited, a.text:link, a.text:active, a.text:visited, a.searchlinksmall:link, a.searchlinksmall:active, a.searchlinksmall:visited, a.redlink:link, a.redlink:active, a.redlink:visited {font-weight: bold;color: rgb(0, 0, 0);}a.text:hover, a.searchlinksmall:hover, a:hover, a.redlink:hover {text-decoration: ;font-weight: bold;font-style: italic;color: rgb(255, 0, 0);}a.redlink:link, a.redlink:active, a.redlink:visited {color: rgb(0, 0, 0);}a.redlink:hover {color: rgb(255, 0, 0);}.nametext {font-size: 20px;font-family: courier new;}.btext {color: rgb(0, 0, 0);}table, tr, td, li, p, div {}table, tr, td, li, p, div, table table table td b, table table table td {font-size: 12px;font-family: verdana;}.orangetext15 {font-size: 12px;font-weight: normal;color: rgb(0, 0, 0);font-family: verdana;}.whitetext12 {font-size: 12px;font-weight: normal;color: rgb(0, 0, 0);font-family: verdana;}.lightbluetext8 {font-weight: normal;color: rgb(0, 0, 0);font-family: verdana;}
.blacktext12 {display:none;}
td.text table, td.text td {border:0px; height:0px;}

td.text td.text table table table td a img {width:100px;}
td.text td.text table table table td div img {width:80px;}
td.text td.text table table td img {width:260px; max-width:260px; width:auto;}
td.text td.text table table td div img {width:80px;}
* html td.text td.text table table td img {width:260px;}
* html td.text td.text table table td a img {width:90px;}
* html td.text td.text table table td div img {width:80px;}
table table table{width:100%;} table table table table td{width:auto;}</style>
<style type="text/css">

div.layoutbutton{
width:161px;
position:fixed;
_position:absolute;
top: 20px;
right: 5px;
}

div.layoutbutton a{
background-image:url(http://www.mywackospace.com/images/p.gif);
width:100%;
height:24px;
color:rgb(255,255,255) !important;
font:bold 11px arial,sans-serif !important;
text-transform:capitalize !important;
display:block;
text-decoration:none !important;
line-height:22px !important;
margin-bottom:1px;
}

div.layoutbutton a:visited{
background-image:url(http://www.mywackospace.com/images/p.gif);
width:100%;
height:24px;
color:rgb(255,255,255) !important;
font:bold 11px arial,sans-serif !important;
text-transform:capitalize !important;
display:block;
text-decoration:none !important;
line-height:22px !important;
}

div.layoutbutton a:hover{
background-image:url(http://www.mywackospace.com/images/a.gif);
width:100%;
height:24px;
color:rgb(197,21,21) !important;
font:bold 11px arial,sans-serif !important;
text-transform:capitalize !important;
text-decoration:underline !important;
line-height:22px !important;
}

</style>

</center>
</div>


Let me know if you still need info! Thanks again!

Here's a link to the page.

forbairt

I'll assume its the "THE INTERNET's Latest Blog Entry" bit you want to have a different background ?

If you look at the source code for the whole page and look for THE INTERNET's Lates Blog Entry ...

you'll see its got
<span class="btext">

so what you'll probably want to do is ... say ...

span.btext { background-color: #CFCFCF; }

?

Spectator#1

No, it's not the background colour for the whole section. The original myspace layout has it so that the banner behind the header for each section is a different colour. Like here. It's the banner that goes behind just the Headers for each section. I'm trying to get everything else white (which I've done) and then just make the banners for all of the headlines, ('contacting', 'about...', 'general info' and 'friend's comments') a light grey colour or something.


If it's loads of trouble or anything don't bother, I don't want to put you out. I was kind of more expecting someone would direct me somewhere where I could figure it out for myself, thanks so much for your help.