Division text spacing and color problems - HTML Forums

Code_worm · 11-04-2009, 10:09 AM

Having a problem with divisions, as far as i am aware the contents of a division portrays the length of any division. Correct? Is there any way i can make the division wider to enable me to have space either side of my text?

Thanks CW

Pegasus · 11-04-2009, 11:19 AM

Add more padding to the sides of the div.

¥åßßå · 11-04-2009, 11:39 AM

Or margins, if you don't have borders/background on the div

¥

Code_worm · 11-04-2009, 12:30 PM

Thanks, i added padding. pretty new to html so you'll have to bare with me guys haha.

Another question for you guys if you don't mind..
I have set up a div with external css styles and when i set the div bg color i cant see my text within the div... any ideas? i made sure my text color of the paragraph tag was set in the external css aswell

Pegasus · 11-04-2009, 12:37 PM

How did you write the text colour? It should be just color: #123abc; not font-color or text-color.

Code_worm · 11-04-2009, 12:42 PM

HTML:

HTML Code:

<body>

<p>
<a href="http://www.rgu.ac.uk/prospectus/disp_ProspectusEntry.cfm?CourseID=BSCMIM&amp;year=2008">BSc (Hons) Computing for Internet and Multimedia</a>  Sept 2009 </p>
<!-- URL for relevant prospectus-->

<div class="year1">
    <p>    Year one   </p>
    </div>

<div class="year1">
</div>

</body>

External CSS

HTML Code:

body { background-color: white;}

div.year1 {
	  background-color:#0000FF;
	  border: thin groove; 
	  border-width: thin;
	  text-align:center;
	  height:40px;
	  width: 150px;
	  top:100px;
	  left:200px;
	  position:absolute;
	  font-size:16pt; }

p {  color:#000000; }

Pegasus · 11-04-2009, 12:45 PM

Try putting the colour information inside the div, rather than as a separate piece.

Code_worm · 11-04-2009, 12:48 PM

Yeah i already tried taking it out of the paragraph tags and inserting a text color style in the div, still no joy though...

Pegasus · 11-04-2009, 02:27 PM

What happens when you remove the colour information altogether? You're doing black text which is the default setting.

Code_worm · 11-04-2009, 02:32 PM

Yeh thats why i put in the color style because there was no text showin....
Totally lost as to what to do haha

Pegasus · 11-04-2009, 03:06 PM

Can you post a link to the page? It'll help me see what's going on.

Code_worm · 11-04-2009, 04:23 PM

How can i post a link to the page? Sorry are u presuming that its already online?

Pegasus · 11-05-2009, 02:51 AM

I need to see more of the code than just that little bit. From the sounds of it, you're missing something else other than just the code for colours.

Code_worm · 11-05-2009, 05:59 AM

I have added more divisions since the previous code
HTML

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<style type="text/css">
div.year1 {background-color:#B0E0E6;color:#000000;}
div.year2 {background-color:#40E0D0;color:#000000;}
div.year3 {background-color:#1E90FF;color:#000000;}
div.year4 {background-color:#0000FF;color:#000000;}
<!-- use multiple selectors-->

</style>

<LINK href="coursestyles.css" title="css" rel="stylesheet" type="text/css">

<meta http-equiv="Content-type"content="text/html;charset=UTF-8">
<meta name="author" content="Philip Rennie">

<title>BSc (Hons) Computing for Internet and Multimedia Coursemap</title>

</head>



<body>


<p class="one"><a href="http://www.rgu.ac.uk/prospectus/disp_ProspectusEntry.cfm?CourseID=BSCMIM&amp;year=2008">BSc (Hons) Computing for Internet and Multimedia</a></p>
<!-- URL for relevant prospectus-->
<p class="one"> Sept 2009 </p>


<div class="year1">
     Year one
    </div>

<div class="year1">
</div>

<div class="year2">
     Year two
    </div>

<div class="year2">
</div>

<div class="year3">
     Year three
    </div>

<div class="year3">
</div>

<div class="year4">
     Year four
    </div>

<div class="year4">
</div>

</body>

</html>

CSS

HTML Code:

body { background-color: white;}
p.one{text-align:center;}
div.year1 {
	  border: thin groove; 
	  border-width: thin;
	  text-align:center;
	  height:30px;
	  width: 150px;
	  top:100px;
	  left:200px;
	  position:absolute;
	  font-size:16pt; }
div.year2 {
	  border: thin groove; 
	  border-width: thin;
	  text-align:center;
	  height:30px;
	  width: 150px;
	  top:100px;
	  left:400px;
	  position:absolute;
	  font-size:16pt; }
div.year3 {
	  border: thin groove; 
	  border-width: thin;
	  text-align:center;
	  height:30px;
	  width: 150px;
	  top:100px;
	  left:600px;
	  position:absolute;
	  font-size:16pt; }	
div.year4 {
	  border: thin groove; 
	  border-width: thin;
	  text-align:center;
	  height:30px;
	  width: 150px;
	  top:100px;
	  left:800px;
	  position:absolute;
	  font-size:16pt; }

Pegasus · 11-05-2009, 06:29 AM

Well that just frosts my backside! The code checks out as valid, both the HTML (except that they'd prefer you added character encoding) and the CSS. I'm not in the least bit sure why the colour won't show.

Let me take the "Resolved" marking off the thread and we'll see if we can get younger eyes to take a look at what we're doing.