7 replies [Last post]
eddjc
eddjc's picture
Offline
Regular
Last seen: 10 years 20 weeks ago
Timezone: GMT+1
Joined: 2007-07-28
Posts: 33
Points: 16

Hey all,

I'm having a little problem getting rid of the underline on links - I've used dreamweaver's inbuilt properties dialog to create CSS info in the header of the file:

Ideally, I'd like to be able to put this in my external CSS file style.css:
@charset "UTF-8";
.body {
font-family: Helvetica, Geneva, Arial;
font-size: 10px;
text-align:justify;
text-decoration:none;
font-style:normal;
}
.a {
font-family: Helvetica, Geneva, Arial;
font-size: 10px;
color:3399FF;
}

.h1 {
font-family:Helvetica, Geneva, Arial;
font-size:14px;
color:3399FF;
}
.h2 {
font-family:Helvetica, Geneva, Arial;
font-size:18px;
color:3399FF;
}
.wrapper{
width:800px;
margin:0 auto;
background:#fff;
border-right:3px solid #ededed;
border-left:3px solid #ededed;
border-top:3px solid #ededed;
border-bottom:3px solid #ededed;
overflow:hidden;

}
.bannertop{

background-image:url(images/main.jpg);
text-align:left;
background-position: center;
background-repeat: no-repeat;
padding-top:50px;
padding-bottom:5px;
padding-left:20px;

}
.navbg{

height:23px;
border-bottom:thin #333 solid;
padding-left:0px;
padding-right:76px;
}
#navcontainer ul
{
margin:0px;
padding-top: 0px;
list-style-type: none;
text-align: center;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight:bold;
padding-top:4px;
padding-bottom:4px;
display:block;
width:100%;
}

#navcontainer ul li { display: inline; }

#navcontainer ul li a
{
text-decoration: none;
font-size: 12px;
font-weight:bold;
padding-right: 30px;
padding-top:4px;
padding-bottom:4px;
padding-left: 30px;
color:#000000;
width:50px;

}

#navcontainer ul li a:hover
{
color:#EDEDED;
background:#3399FF;
font-size: 12px;
font-weight:bold;
text-decoration:none;

}

.flashcontent{
height:150px;
padding-top:2px;
}
.content
{
background:#FFFFFF;
}
.leftcolumn
{
float:left;
width:300px;
padding-top:10px;
padding-bottom:5px;

}
.leftcolumnheader
{
height:20px;
border-top:thin solid #000000;
border-bottom:thin solid #000000;
text-align:center;
color:#FFFFFF;
font-family:Helvetica, Arial, Geneva;
font-weight:bold;
padding-top:5px;
font-size:12px;
background-image:url(images/main.jpg);
}
.rightcolumn {

float:right;
width:490px;
padding-top:10px;
padding-right:5px;
padding-left:5px;
padding-bottom:5px;
text-align:center;

}
.rightcolumninfo {
border:thin dotted #999999;
padding-left:10px;
padding-right:10px;
padding-bottom:10px;
}
.links {
border-bottom:thin dotted #999999;
padding-top:5px;
padding-left:10px;
padding-right:10px;
padding-bottom:6px;
}
.videobox {
height:305px;
width:480px;
padding-top:3px;
padding-bottom:3px;
padding-left:3px;
padding-right:3px;
text-align:center;
border:thin solid #3366FF;

}

How might I do this? I have another problem though - I apologise for the messiness of the code here, but on my index.php file at one point although the dreamweaver-induced CSS header does the trick for the third iteration of the PHP script, it leaves an underline over the first two:
<?php

$resourcesquery = 'SELECT name, url, info FROM resources';
$resources = mysql_query($resourcesquery) or die('Error in Query: $query. ' . mysql_error());

if (mysql_num_rows($resources) > 0) {
while ($row = mysql_fetch_row($resources)) {

echo '

';

}
}
else {

echo 'no rows found';
}
?>

Resultant source:

The BBC and Apple links have an underline, whereas the Microsoft doesn't. Here is the code for my index.php file (again apologies for the mess):

Rolling Snowballs

<?php

//connect to the server
$connection = mysql_connect('localhost', 'guest','guest')
or die ('Unable to connect to MySQL server');

// echo 'Connected to Server
';

// select database
mysql_select_db('rollsnow') or die ('Unable to connect to Database!
');

// echo 'Connected to Database
';
?>






logo








AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','800','height','150','title','browser','src','images/browser','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','images/browser' ); //end AC code









Recent News




<?php

$query = 'SELECT date, title, info FROM news ORDER BY date DESC LIMIT 0 , 4';

// echo $query . '
';

$result = mysql_query($query)
or die ('Error in query: $query. ' . mysql_error());

// print_r($result);

// echo '
';

$rows = mysql_num_rows($result);
// echo 'Rows: ' . $rows . '
';


if (mysql_num_rows($result) > 0) {

// echo 'There are ' . $rows . 'rows present
';

while ($row = mysql_fetch_row($result))
{

echo '
';
echo '
' . $row[0] . ' - ' . $row[1] . '
';
echo '
' . nl2br($row[2]) . '
';
echo '
';
}

}
else
{
//print error message
echo 'No Rows Found!';
}

// free result set
mysql_free_result($result);


?>





Resources

<?php

$resourcesquery = 'SELECT name, url, info FROM resources';
$resources = mysql_query($resourcesquery) or die('Error in Query: $query. ' . mysql_error());

if (mysql_num_rows($resources) > 0) {
while ($row = mysql_fetch_row($resources)) {

echo '';

}
}
else {

echo 'no rows found';
}
?>


Links






<?php
$trailerquery = 'SELECT trailer, title, blurb, link FROM productions ORDER BY releasedate DESC LIMIT 0,1';
$trailer = mysql_query($trailerquery) or die ('Error in Query: $query. ' . mysql_error());

$row = mysql_fetch_row($trailer);

?>





AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','480','height','301','src','images/deathvsdeath','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','images/deathvsdeath' ); //end AC code















<?php

echo '

' . $row[1] . '

';
echo '

' . $row[2] . '

';
echo '
more info
';
?>



<?php
mysql_free_result($trailer);

// close connection
mysql_close($connection);

?>




Anybody know how to a) put the header info into my style.css file or b) how to get all the links on my page without an underline?

Thanks!
Edd

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 47 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

sorry to sound confused but

:? sorry to sound confused but just write the styles to the stylesheet, do it manually and style the generic anchor 'a' for any adjustments you want reflected across all anchors.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

eddjc
eddjc's picture
Offline
Regular
Last seen: 10 years 20 weeks ago
Timezone: GMT+1
Joined: 2007-07-28
Posts: 33
Points: 16

aha - that worked - I just

aha - that worked - I just copied and pasted, so now my style.css looks like this:
@charset "UTF-8";
.body {
font-family: Helvetica, Geneva, Arial;
font-size: 10px;
text-align:justify;
text-decoration:none;
font-style:normal;
}
body,td,th {
font-family: Helvetica, Geneva, Arial;
font-size:10px
}
a:link {
color: #3399FF;
text-decoration:none;
font-size:10px;
}
a:visited {
color: #3399FF;
}
a:hover {
color: #CCCCCC;
}
a:active {
color: #66CCFF;
}


.h1 {
font-family:Helvetica, Geneva, Arial;
font-size:14px;
color:3399FF;
}
.h2 {
font-family:Helvetica, Geneva, Arial;
font-size:18px;
color:3399FF;
}
.wrapper{
width:800px;
margin:0 auto;
background:#fff;
border-right:3px solid #ededed;
border-left:3px solid #ededed;
border-top:3px solid #ededed;
border-bottom:3px solid #ededed;
overflow:hidden;

}
.bannertop{

background-image:url(images/main.jpg);
text-align:left;
background-position: center;
background-repeat: no-repeat;
padding-top:50px;
padding-bottom:5px;
padding-left:20px;

}
.navbg{

height:23px;
border-bottom:thin #333 solid;
padding-left:0px;
padding-right:76px;
}
#navcontainer ul
{
margin:0px;
padding-top: 0px;
list-style-type: none;
text-align: center;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight:bold;
padding-top:4px;
padding-bottom:4px;
display:block;
width:100%;
}

#navcontainer ul li { display: inline; }

#navcontainer ul li a
{
text-decoration: none;
font-size: 12px;
font-weight:bold;
padding-right: 30px;
padding-top:4px;
padding-bottom:4px;
padding-left: 30px;
color:#000000;
width:50px;

}

#navcontainer ul li a:hover
{
color:#EDEDED;
background:#3399FF;
font-size: 12px;
font-weight:bold;
text-decoration:none;

}

.flashcontent{
height:150px;
padding-top:2px;
}
.content
{
background:#FFFFFF;
}
.leftcolumn
{
float:left;
width:270px;
padding-top:10px;
padding-bottom:5px;

}
.leftcolumnheader
{
height:20px;
border-top:thin solid #000000;
border-bottom:thin solid #000000;
text-align:center;
color:#FFFFFF;
font-family:Helvetica, Arial, Geneva;
font-weight:bold;
padding-top:5px;
font-size:12px;
background-image:url(images/main.jpg);
}
.rightcolumn {

float:right;
width:490px;
padding-top:10px;
padding-right:5px;
padding-left:5px;
padding-bottom:5px;
text-align:center;

}
.rightcolumninfo {
border:thin dotted #999999;
padding-left:10px;
padding-right:10px;
padding-bottom:10px;
}
.links {
border-bottom:thin dotted #999999;
border-right:thin dotted #999999;
padding-top:5px;
padding-left:10px;
padding-right:10px;
padding-bottom:6px;
}
.videobox {
height:305px;
width:480px;
padding-top:3px;
padding-bottom:3px;
padding-left:3px;
padding-right:3px;
text-align:center;
border:thin solid #3366FF;

}

But how come a couple of links still have underlines?

Cheers
Edd

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 47 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

It looks as though they are

It looks as though they are not anchor underlines, look at your .links class.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

eddjc
eddjc's picture
Offline
Regular
Last seen: 10 years 20 weeks ago
Timezone: GMT+1
Joined: 2007-07-28
Posts: 33
Points: 16

hmm - the only

hmm - the only underline-looking thing is border-bottom:thin dotted #999999; but they're not dotted, and the border shows up as intended at the bottom of the divider - I've attached a screen shot of the result. Puzzling!

AttachmentSize
screen.jpg 204.14 KB
eddjc
eddjc's picture
Offline
Regular
Last seen: 10 years 20 weeks ago
Timezone: GMT+1
Joined: 2007-07-28
Posts: 33
Points: 16

Ahhh worked it out - it was

Ahhh worked it out - it was because I hadn't also put text-decoration:none; in the visited links etc. as well - doh!

Ok thanks!

Edd

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 39 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Simpler, as Hugo said, is to

Simpler, as Hugo said, is to put the global properties in an "a" selector instead of the "a:link" selector. a:link and a:visited are mutually exclusive.

a {text-decoration: none;} applies to all "a" elements, where a:link {...} applies only to unvisited links.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

eddjc
eddjc's picture
Offline
Regular
Last seen: 10 years 20 weeks ago
Timezone: GMT+1
Joined: 2007-07-28
Posts: 33
Points: 16

ahhh I see. Sorry, I didn't

ahhh I see. Sorry, I didn't quite understand before - thanks!

Edd