• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Text Class Properties on CSS Not Working!

Participant ,
Jul 03, 2024 Jul 03, 2024

Copy link to clipboard

Copied

Hi everybody, I've got a text class where I haven’t defined a font family or size because your want the default font and size. I’ve just defined a colour. However, on this class other code to control the link colours doesn’t work. On the other class which does have a font family and size defined “.Venue” the code below in dark red controls the link colour, hover mouse over, click down and visited link colours.

.Venue {
font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif;
font-size: 20px;
color: #999999;
}
.Venue a:link{
font-weight: bold;
color: #999;
}
.Venue a:visited{
color: #999;
}
.Venue a:hover{
color: #666;
}
.Venue a:active{color: #FFFFCC;}
.Venue a:focus{color: #FFFFCC;} /**adjust colors to suit**/

However, with the class “.Date” that doesn’t have a font family and size defined all that code doesn’t do anything! As well as that without the extra code the normal link settings that apply to the rest of the page don’t work either. As you can see in the linked file, the default colours only apply to the line under the text! This makes our band look very incompetent! Can anybody help? Thanks.

.Date {
color: #999999;
}

Here is the file … http://www.maximum-robot.co.uk/live.html

Views

452

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

LEGEND , Jul 04, 2024 Jul 04, 2024
quote

Would anybody know what I would need to do to control the link properties on that text with the class “.Date”?


By @Gareth_Williams

 

Well you would move the class name 'Date' from the span tag to the td cell that the link tag is in, exactly like you have for Venue.

 

 

<td align="center" valign="top" class="Date" style="white-space: nowrap; color: #999999;"><a href="https://railwayinn.pub/shows/maximum-robot-2024-07-02" target="_blank"><strong><span style="white-space: nowrap">24th of September 2024</
...

Votes

Translate

Translate
Community Expert ,
Jul 03, 2024 Jul 03, 2024

Copy link to clipboard

Copied

Can you share an image of what you are expecting to happen on that page?

 

Based on what I am seeing the date just has the color that you are setting, and the a element that is around the date span, is inheriting the default settings of a link with a an underline text decoration and text decoration color. Personally I don't see the need for the strong/span tags inside of the a because the date class on an a element should be enough to provide you with styling to get you the desired look and feel.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Jul 03, 2024 Jul 03, 2024

Copy link to clipboard

Copied

Thanks Ben, removing the strong tags takes the bold off. However, this doesn’t make any difference to anything else. Apart from the line under it, the text still does not appear the default colour for the page links which is white. If I just use the default font and size without any class and change the colour in the properties window I don’t know who to control the link colour. Anyway, I will experiment and update the thread when I can. Thanks again.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Jul 03, 2024 Jul 03, 2024

Copy link to clipboard

Copied

Can anyone explain why the text “24th of September 2024” isn’t white like the rest of the links on the page? The ones at the top? Basically what I want to do is have that text grey and control the link colours with the code above. Thanks again.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jul 03, 2024 Jul 03, 2024

Copy link to clipboard

Copied

I do not know if the following answers your question, but this is what I see:

 

The first link is styled as

BenPleysier_3-1720050202025.png

 

The second link

BenPleysier_1-1720049555188.png

 

And the third link

BenPleysier_2-1720049609725.png

 

Having said that:

 

I assume that you are using a very very old version of Dreamweaver. DON'T!!!

 

For the heading

BenPleysier_5-1720051732061.png

 

you could use

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Rubik+Scribble&display=swap" rel="stylesheet">

The style rule

.rubik {
    font-family: "Rubik Scribble", system-ui;
    font-weight: 400;
    font-style: normal;
}

 And HTML

<h1 class="rubik text-danger fw-bold text-uppercase">Join us at your nearest live music venue &hellip;</h1>

 

Notice that I did not use upper case for the heading text. This is because it confuses assistant technology. The upper case conversion is done using Bootstrap CSS

Wappler, the only real Dreamweaver alternative.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Jul 04, 2024 Jul 04, 2024

Copy link to clipboard

Copied

Thanks Ben, I can’t work out the point you’re making from the pictures. I guess I’m missing something pretty obvious! I’ve uploaded the file again without the link and taken the bold off to avoid any extra complications. I’ve also turned the table white so I can see what I’m doing in DW! Would anybody know what I would need to do to control the link properties on that text with the class “.Date”? The other two classes with links “.Venue” and “.Support Band” are controlled by the dark red code above. Thanks again for your help.

http://www.maximum-robot.co.uk/live3.html

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Jul 04, 2024 Jul 04, 2024

Copy link to clipboard

Copied

Also, when I put that same text class on a different place on the page everything works as it should! The code is below. It’s just when it is in that cell that it doesn’t work! …

.Date {
color: #999999;
}
.Date a:link{
font-weight: bold;
color: #999;
}
.Date a:visited{
color: #999;
}
.Date a:hover{
color: #666;
}
.Date a:active{color: #FFFFCC;}
.Date a:focus{color:#FFFFCC;} /**adjust colors to suit**/

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jul 04, 2024 Jul 04, 2024

Copy link to clipboard

Copied

quote

Would anybody know what I would need to do to control the link properties on that text with the class “.Date”?


By @Gareth_Williams

 

Well you would move the class name 'Date' from the span tag to the td cell that the link tag is in, exactly like you have for Venue.

 

 

<td align="center" valign="top" class="Date" style="white-space: nowrap; color: #999999;"><a href="https://railwayinn.pub/shows/maximum-robot-2024-07-02" target="_blank"><strong><span style="white-space: nowrap">24th of September 2024</span></strong></a></td>

 

 

Then you can do what you like to style the link:

 

.Date a {
color: pink;
}
.Date a:hover {
color: orange;
}

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Jul 04, 2024 Jul 04, 2024

Copy link to clipboard

Copied

LATEST

Thanks Osgood. I didn't notice that detail! That has sorted it out.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jul 04, 2024 Jul 04, 2024

Copy link to clipboard

Copied

Have a look at what modern HTML looks like. Copy and paste the following code into a new document.

 

 

<!doctype html>
<html data-bs-theme="dark">

<head>
    <base href="/">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Untitled Document</title>

    <link rel="stylesheet" href="/bootstrap/5/css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.5.2/css/all.css" integrity="sha384-PPIZEGYM1v8zp5Py7UjFb79S58UeqCL9pYVnVPURKEqvioPROaVAJKKLzvH2rDnI" crossorigin="anonymous" />
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Rubik+Scribble&display=swap" rel="stylesheet">
    <style>
        .rubik {
            font-family: "Rubik Scribble", system-ui;
            font-weight: 400;
            font-style: normal;
        }
    </style>
</head>

<body>
    <header class="">
        <div class="container">
            <div class="row">
                <div class="col">
                    <nav class="navbar navbar-expand-lg justify-content-center">
                        <div class="navbar-nav flex-row">
                            <a class="nav-item nav-link active ms-2 me-2" href="index.html">Home</a>
                            <a class="nav-item nav-link ms-2 me-2" href="#"><i class="fa-solid fa-tower-broadcast"></i></a>
                            <a class="nav-item nav-link ms-2 me-2" href="#">Gigs</a>
                            <a class="nav-item nav-link ms-2 me-2" href="#">Songs/Merch</a>
                        </div>
                        <span class="text-body-tertiary d-block ms-2 me-2">info@maximum-robot.co.uk</span>
                    </nav>
                </div>
            </div>
        </div>
    </header>
    <div class="container">
        <div class="row">
            <div class="col-xl-10 offset-xl-1">
                <h1 class="rubik h2 text-danger fw-bold text-uppercase text-center">Join us at your nearest Live Music Venue &hellip;</h1>
                <p>If you would like to see our sorry people live please check out the schedule below, or our account on Song Kick, and present yourself in the queue in the miserable pouring rain of the British weather and we'll see you there. There won’t be a queue! Our mission is to try to get to as many places as we can and we would be delighted to meet anybody who has listened to our music online &hellip;</p>
            </div>
        </div>
        <div class="row">
            <div class="col-xl-10 offset-xl-1">
                <div class="card mb-3">
                    <div class="row align-items-center">
                        <div class="col">
                            <div class="card-body small">
                                <div class="d-flex justify-content-between">
                                    <div>
                                        <img src="http://www.maximum-robot.co.uk/images/Venue_RailwayInn.jpg" class="img-fluid" alt="...">
                                    </div>
                                    <div>
                                        <h2 class="card-title text-danger h5 text-uppercase mb-xl-0">Winchester</h2>
                                        <p class="mb-0">
                                            <a href="https://railwayinn.pub/shows/maximum-robot-2024-07-02" target="_blank" class="text-uppercase text-body">The Railway Inn</a>
                                        </p>
                                        <p>3 St Paul's Hill, Hampshire, SO22 5AE, England</p>
                                    </div>
                                    <div>
                                        <p class="mb-0">Tuesday</p>
                                        <p class="mb-0">24th of September 2024</p>
                                        <p class="mb-0">Free Entry: Doors 8.00</p>
                                    </div>
                                    <div>
                                        <p>Support* <a href="https://thebenpooreproject.com/" target="_blank" class="text-body">The Ben Poore Project</a></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="/bootstrap/5/js/bootstrap.bundle.min.js"></script>
</body>

</html>

Disclaimer: The code has not been optimised for mobile views.

 

BenPleysier_0-1720097844036.png

 

Wappler, the only real Dreamweaver alternative.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jul 03, 2024 Jul 03, 2024

Copy link to clipboard

Copied

You should be sleuthing out styles with your browser's Inspect Element (F12) panel by now.

Firefox and Chrome both have one.

 

 

Nancy O'Shea— Product User, Community Expert & Moderator

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines