PDA

View Full Version : Trying to place backgrd colour to text


stag
03-14-2007, 12:32 AM
Hello hello...

Have div container with the following snippet (pls ignore the Norsk)

<div id="divcontent">
<p>AVGARDE er et &aring;pent samarbeid mellom komponister, ut&oslash;vere, musikkstudenter...</p>

Trying to make only the text have a backgrd colour rather than using #divcontainer p which simply formats each paragraph. I want something like the example below

djhdcjncdojknmcokmdcklkmdcmd
sdkpsdokpdkmcpdosodpk
dskcods


Any ideas u DW dons? :)
(ahh shoot, bkgrd colour didnt work, but i think u get the picture)

stag
03-14-2007, 01:08 AM
...having some issues with my site - have uploaded using good ol tripod. Suppose to be some logos on page but havent specified correct names for them hence not showing up.

http://stag101.tripod.com/

Ok, for the nav bar, hover displays yellow correctly in FF but is lobsided in IE. Any suggestions how to counter this?

Also, for some reason, I cannot centre or at least move the site to the right. Changing Div wrapper does not seem to alter?

Finally, I have div sidebar (test), nxt to the main content area. Little bit of top padding on top for both divsidebar and divcontent, but as you can see, content in divsidebar is higher then content in divcontent. Again, any ideas?

kona72
03-14-2007, 01:30 AM
Here is your current css for 'divcontent'


#divcontent {
float: left;
width: 400px;
height: 400px;
padding-top: 5px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
font-size: x-small;
}


just add in 'background-color:#0066CC;' (Where 0066cc is any hexadecimal color) to the code like this...


#divcontent {
float: left;
width: 400px;
height: 400px;
background-color:#0066CC;
padding-top: 5px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
font-size: x-small;
}

stag
03-14-2007, 09:45 PM
[/code]just add in 'background-color:#0066CC;' (Where 0066cc is any hexadecimal color) to the code like this...



This changes the entire backgrd colour of the div. I only want the bkgrd colour of text to have colour. Is this actully possible?

lux
03-14-2007, 10:01 PM
hope this helps answer your question

.text {
display: inline;
background-color:#00CC66;
}

stag
03-14-2007, 10:19 PM
Hi - No unfortuntely continues to change the entire bkgrd :(

lux
03-14-2007, 10:35 PM
if you use the css in my previous post with this html it will work

<span class="text">My text goes here</span>

its then a case of you altering your code

regards

lux
03-14-2007, 10:38 PM
<p class="text">AVGARDE er et &aring;pent samarbeid mellom komponister, ut&oslash;vere, musikkstudenter, Ny Musikk, USF Verftet og Griegakademiet. Flere samarbeidspartnere kan gjerne komme til. AVGARDE sitt fremste m&aring;l er &aring; knytte sammen alle de ulike milj&oslash;ene rundt musikkformen &quot;samtidsmusikk&quot;. Dette vil vi gj&oslash;re ved &aring; skape en &aring;pen plattform for samarbeid og utpr&oslash;ving p&aring; tvers av generasjonsskiller - og p&aring; tvers av sjangergrenser. Konsertkveldene vil absolutt ha mer preg av klubb enn av konsertsal.</p>

that works

stag
03-14-2007, 10:46 PM
Ahhh, works a treat now... Cheers lux8uk

Suppose anyone could help me with me other isssues...?

lux
03-14-2007, 11:25 PM
what are they and i'll try

stag
03-14-2007, 11:44 PM
Cool - Ok, the issues now in FF, my hover on nav bar is correct by turning yellow, but in IE the hover is lobsided.

The other small issue is where you see OM AVGARDE (divtitleheading), and the text content (divcontent), below it, in DW I have taken all padding (top and bottom), but the divs still show space between them and I have no idea why?

http://stag101.tripod.com/

Cheers

lux
03-14-2007, 11:59 PM
can you post your master.css file so i can have a look

stag
03-15-2007, 12:15 AM
#divwrapper {
background-color: #FFFFFF;
width: 800px;
}
#divcontent {
float: left;
width: 400px;
height: 300px;
padding-top: 0px;
padding-right: 5px;
padding-bottom: 0px;
padding-left: 71px;
font-size: x-small;
}
#divcontentwrapper {
float: left;
width: 100%;
}
#divtitleheading {
padding-top: 40px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 71px;
}
#divfooter {
float: left;
width: 700px;
padding-top: 5px;
padding-left: 71px;
padding-bottom: 20px;
}
#divsidebar {
float: left;
height: 395px;
width: 50px;
padding-top: 5px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 5px;
}
#divnavagation {
float: left;
width: 700px;
height: 15px;
text-align: left;
font-size: x-small;
padding-left: 65px;
}
#divnavagation ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}
#divnavagation li {
display: inline;
}
#divnavagation li a {
color: #A1B7B7;
text-decoration: none;
float: left;
font-size: 1em;
margin: 1px;
padding-left: 5px;
padding-right: 5px;
}
#divnavagation li a:hover {
background-color: #FFFF00;
}
#divlogo {
height: 50px;
padding-top: 50px;
clear: none;
text-align: left;
padding-bottom: 20px;
padding-left: 67px;
}
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
color: #A1B7B7;
background-color: #FFFFFF;
margin: 0px;
}
#divtitleheading1 {
width: 800px;
height: 30px;
padding-top: 12px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 71px;
font-size: x-small;
}
.text {
display: inline;
background-color:#999999;
color: #FFFFFF;
}

lux
03-15-2007, 12:34 AM
you've got div's in your html page that don't have closing tags

go through your page and indent your code and mark it with comments to help make it more readable, e.g.

<div id="test"></div><!-- test -->

this way you will be able to see where you have closed each of div and more easily see what you have included in each of the divs

lux
03-15-2007, 12:35 AM
i cant see whats wrong with the nav rollover effect, they look the same in both ff and ie (im using ie7)?

stag
03-15-2007, 12:58 AM
Oh really? Well, im using a mac with a seriously old version of IE. So its exactly the same as FF, cos mine was showing the right hand side yellow hover as over extended?

Any luck with the displacement of the divs?

lux
03-15-2007, 01:36 AM
remove the paragraph tags and place a break tag at the end of each, well paragragh and you'll loose the spaces:

AVGARDE er et &aring;pent samarbeid mellom komponister, ut&oslash;vere, musikkstudenter, Ny Musikk, USF Verftet og Griegakademiet. Flere samarbeidspartnere kan gjerne komme til. AVGARDE sitt fremste m&aring;l er &aring; knytte sammen alle de ulike milj&oslash;ene rundt musikkformen &quot;samtidsmusikk&quot;. Dette vil vi gj&oslash;re ved &aring; skape en &aring;pen plattform for samarbeid og utpr&oslash;ving p&aring; tvers av generasjonsskiller - og p&aring; tvers av sjangergrenser. Konsertkveldene vil absolutt ha mer preg av klubb enn av konsertsal.<br />Kimen til konsertserien AVGARDE ble s&aring;dd v&aring;ren 2006 da flere komponister uttrykte et behov om &aring; etablere en felles m&oslash;teplass for komponister, musikere og publikum i Bergen. USF Verftet ved Evy S&oslash;rensen ble co-produsent og Tine Rude m&oslash;nstret p&aring; som produsent. Det ble raskt klart at vi ikke kunne vente med &aring; lansere et s&aring; n&oslash;dvendig prosjekt. Sensommeren 2006 var preget av hyperaktivt arbeid for &aring; stable AVGARDE p&aring; beina. Engasjementet i byens milj&oslash; av komponister og ut&oslash;vere er stort, og h&oslash;stens konsertserie avvikles mer eller mindre p&aring; dugnad med enorm innsats fra de impliserte.<br />
AVGARDEs navn er konstruert ut fra det nynorske &quot;av garde&quot; - kom deg videre og av sted!<br />

stag
03-15-2007, 01:55 AM
Sorry Lux, probably didnt explain myself well - Not the spaces between paragraphs but the space betwen "OM AVGARDE" (divtitleheading), and the "text content" (divcontent) - I took the padding away but online there appears to be padding when the OM AV... should be sitting on top...

domedia
03-15-2007, 03:12 PM
Oh really? Well, im using a mac with a seriously old version of IE. This is a dead browser, just forget about it :) It also has it's own very special list of CSS bugs and it will make your world insane..

stag
03-15-2007, 07:26 PM
yes, that issue i said with both browsers showing the divs with spaces, only shows in FF. IE is fine. (viewed using a PC at work). any ideas why or how i can sort this issue?

Yes, i dont partic like using IE, but only to check compatiability. Seems my old version is more bugged than the recent version. in that case, what can i do to check compatibilty since IE stoped updating on the mac years ago? Please dont make me go out and buy a PC ;)
Cheers
D

domedia
03-15-2007, 10:18 PM
The IE on mac and PC are not similar. There were 2 different development teams working on them and if you want to check compatibility with IE on a PC, you have to buy a PC.

stag
03-15-2007, 10:46 PM
Whoopie...

Ok, who has a PC for sell for a tenner?

domedia
03-16-2007, 03:04 PM
second hand PC's comes very cheap :) check locally, in the classifieds in your local newspaper or something