Tidier way of doing this code?

[Howdo]

Hi

done the course but that doesn't tell you how you could do things.

now I have this code but I am trying to make it smaller less repeating.

<div id="logo" style="position:absolute; left:11px; top:3px; width: 455px; height: 68px; color:black; font-size:32pt;">
my text here</div>
<div style="position:absolute; left:12px; top:4px; width: 455px; height: 68px; color:lightblue; font-size:32pt;">
my text here</div>
<div style="position:absolute; left:13px; top:4px; width: 455px; height: 68px; color:blue;font-size:32pt;">
<a href="mytexthere.html" style="text-decoration: none">my text here</a></div>

As you can see I have repeated the code three times is there away of doing this so that I only have to put 'my text here' in once and get the same results.

[baileylo]

<style type="text/css"><!--
div {
width: 455px;
height: 68px; 
position:absolute;
font-size:32pt;
}
--></style>
<div id="logo" style=" left:11px; top:3px;  color:black; ">
	my text here
</div>
<div style="left:12px; top:4px; color:lightblue;">
	my text here
</div>
<div style="left:13px; top:4px;color:blue;">
	<a href="mytexthere.html" style="text-decoration: none">my text here</a>
</div>

[Howdo]

Cheers that one way, however I think I am looking for away to do it one line as this will be on every page in the site, I know I could do it with an image but don't what to do it like that.

I have it that I now have a css with a title_a title_b and Title_c and I call them like so.

<div class="title_a";>my text</div>
<div class="title_b";>my text</div>
<div class="title_c";>
<a href="mytext.html" style="text-decoration: none">my text</a></div>

however I was hoping there might be away to do it like this.

<div class="the_title";>
<a href="mytext.html" style="text-decoration: none">my text</a></div>

once I have the css file correct.

Now if you think this is a css question then I post a question there.

[kohoutek]

You can group them:

#logo, .box2, .box3 {
   position: absolute;
   top:4px;
   width; 455px;
   height: 68px;
   font-size: 32pt;
}
 
#logo {
    left:11px;
    top:3px;
    color: black;
}
 
.box2 {
    left:12px; 
    color:lightblue;
}
 
.box3 {
    left:13px; 
    color:blue;
}

[kohoutek]

If you want to use a more modular approach, you could do this as well:

.title {
   position: absolute;
   top:4px;
   width; 455px;
   height: 68px;
   font-size: 32pt;
}
 
#a {
    left:11px;
    top:3px;
    color: black;
}
 
#b {
    left:12px; 
    color:lightblue;
}
 
#c {
    left:13px; 
    color:blue;
}

<div class="title" id="a"></div>
<div class="title" id="b"></div>
<div class="title" id="c"></div>

Or:

.title {
   position: absolute;
   top:4px;
   width; 455px;
   height: 68px;
   font-size: 32pt;
}
 
.title.a {
    left:11px;
    top:3px;
    color: black;
}
 
.title.b {
    left:12px; 
    color:lightblue;
}
 
.title.c {
    left:13px; 
    color:blue;
}

<div class="title a"></div>
<div class="title b"></div>
<div class="title c"></div>

[Howdo]

kohoutek big thanks, some every interesting ways of doing it there, I chose the class id one as that worked when I did it, the others do but thay did not go first time.

[felgall]

I chose the class id one as that worked when I did it, the others do but thay did not go first time.

You forgot to clear your browser cache between tests - if you had they'd all work first time.

[Howdo]

Thought it would have worked straight away as I am using coffeecup untill have some money to spend on something better that I can get to work, tried Altova still trying to work out how to get to doing something apart from the demos.

Is there a CSS book out there that's worth gettting you know the one that you cannot do without.

[kohoutek]

There are plenty of books that are of great value.


- Cascading Stylesheets, the Definitive Guide
- Bulletproof Webdesign
- The Ultimate CSS Reference (Sitepoint)
- CSS Mastery
- Transcending CSS

Those are a few I have read. They're all immensely valuable. There are plenty more than those, but those are my picks.