Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

HTML & CSS Text does not display correctly with my css code, it should show background under text

T

thehen

Coder
Using the h1, h2, and h3 with the following info in css (a,b and c) (titlte1, title2 and title3). I am not sure if I have done it correct in css, need help to find out what I an doing wrong

CSS: 
html {
  font-family: sans-serif;
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body {
  margin: 0;
  font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  text-align: left;
  background-color: #fff;
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 0.5rem;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  margin-bottom: 0.5rem;
  font-family: inherit;
  font-weight: 500;
  line-height: 1.2;
  color: inherit;
}

h1, .h1 {
  font-size: 2.5rem;
}

h2, .h2 {
  font-size: 2rem;
}

h3, .h3 {
  font-size: 1.75rem;
}

h4, .h4 {
  font-size: 1.5rem;
}

h5, .h5 {
  font-size: 1.25rem;
}

h6, .h6 {
  font-size: 1rem;
}

h1 .aa{ /* use to make text glow in dashboard.php */
    
 background-image: url("move.gif");
  background-size: cover;
  color: transparent;
  -moz-background-clip: text;
  -webkit-background-clip: text;
  text-transform: uppercase;
  font-size: 80px;
  margin: 5px 0;   
    }
h2 .bb {  /* use to make text glow in dashboard.php */
  background-image: url("move.gif");
  background-size: cover;
  color: transparent;
  -moz-background-clip: text;
  -webkit-background-clip: text;
  text-transform: uppercase;
  font-size: 40px;
  margin: 10px 0;
    }   
    
h3 .cc { /* use to make text glow in dashboard.php */
  background-image: url("move.gif");
  background-size: cover;
  color: transparent;
  -moz-background-clip: text;
  -webkit-background-clip: text;
  text-transform: uppercase;y
  font-size: 40px;
  margin: 10px 0;
    }       



.title {
  font-family: 'Comic Neue', cursive;
  text-align: center;
  color: #FFF;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: -1vh;
  letter-spacing: 1px;
  line-height:2
}
.title1 { /* use to make text glow in dashboard.php */
  font-family: 'Coming Soon', cursive;
  text-align: center;
  color: #FFF;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 20vh;
  letter-spacing: 1px;
  line-height:2
}
.title2 { /* use to make text glow in dashboard.php */
  font-family: 'Allerta Stencil';
  text-align: center;
  color: #FFF;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 1vh;
  letter-spacing: 1px;
  line-height:2
}

.title3 { /* use to make text glow in dashboard.php */
  font-family:  'Kanit', sans-serif;
  text-align: center;
  color: #FFF;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 10vh;
  letter-spacing: 1px;
  line-height:2
}


HTML: 
<div class="row">
        <div class="col-12 col-sm-6 col-md-5">
            <div class="info-box">
                <div class="info-box-content">
                    <h1 class="cc" "title2">aaaaaaaaaaaaaaaaaaaaaaaa</h1>
                </div>
            </div>
        </div>
            <div class="col-12 col-sm-6 col-md-5">
                <div class="info-box mb-3">
                    <div class="info-box-content">
                        <h2 class="cc" "title2">AAAAAAAAAAAA</h2>
                    </div>
                </div>
            </div>
    </div>
        <div class="col-12 col-sm-6 col-md-4">
            <div class="info-box mb-3">
              
                <div class="ms-3">
                    <h2 class="bb" "title2">AAAAAAAAAAAABBBBBBBBBBBBDDDDDDDDDDD</h2>
                </div>
            </div>
        </div>
 
Sort by date Sort by votes
This is so wrong, both the css and the html. It looks like your using bootcrap and not showing the styling for those divs. OK but you have an easy display here and you have complicated it all to h e double hockey sticks.

OK the big ens = text-transform: uppercase;y the extra y in h3 .cc
<h1 class="cc" "title2"> S/B <h1 class="cc title2"> same for the other two.
The images are not on my computer so can't see them or fix what you're doing with them.
To make glowing text see this https://www.w3schools.com/howto/howto_css_glowing_text.asp

What your code should look like without the stuff that doesn't matter

Code: 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>My Test Page</title>
<style>
html {
    font-family: sans-serif;
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body {
    margin: 0;
    font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    text-align: left;
    background-color: #fff;
}
h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin-bottom: 0.5rem;
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    margin-bottom: 0.5rem;
    font-family: inherit;
    font-weight: 500;
    line-height: 1.2;
    color: inherit;
}
h1, .h1 {
    font-size: 2.5rem;
}
h2, .h2 {
    font-size: 2rem;
}
h1 .aa{ /* use to make text glow in dashboard.php */
    background-image: url("move.gif");
    background-size: cover;
    color: transparent;
    -moz-background-clip: text;
    -webkit-background-clip: text;
    text-transform: uppercase;
    font-size: 80px;
    margin: 5px 0;   
 }
h2 .bb {  /* use to make text glow in dashboard.php */
    background-image: url("move.gif");
    background-size: cover;
    color: transparent;
    -moz-background-clip: text;
    -webkit-background-clip: text;
    text-transform: uppercase;
    font-size: 40px;
    margin: 10px 0;
}   
h3 .cc { /* use to make text glow in dashboard.php */
    background-image: url("move.gif");
    background-size: cover;
    color: transparent;
    -moz-background-clip: text;
    -webkit-background-clip: text;
    text-transform: uppercase;
    font-size: 40px;
    margin: 10px 0;
}
.title2 { /* use to make text glow in dashboard.php */
    font-family: 'Allerta Stencil';
    text-align: center;
    color: #000;  // Changed so I could see inset-inline-start: ;
    display: flex;   
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 1vh;
    letter-spacing: 1px;
    line-height:2
}
</style>
</head>

<body >
<div>
    <div >
        <div>
            <div>
                <h1 class="cc title2">aaaaaaaaaaaaaaaaaaaaaaaa</h1>
            </div>
        </div>
    </div>
        <div>
            <div>
                <div>
                    <h2 class="cc title2">AAAAAAAAAAAA</h2>
                </div>
            </div>
        </div>
</div>
<div>
    <div">
        <div>
            <h2 class="bb title2">AAAAAAAAAAAABBBBBBBBBBBBDDDDDDDDDDD</h2>
        </div>
    </div>
</div>
</body>
</html>
 
Upvote 0 Downvote
OldMan said:
This is so wrong, both the css and the html. It looks like your using bootcrap and not showing the styling for those divs. OK but you have an easy display here and you have complicated it all to h e double hockey sticks.

OK the big ens = text-transform: uppercase;y the extra y in h3 .cc
<h1 class="cc" "title2"> S/B <h1 class="cc title2"> same for the other two.
The images are not on my computer so can't see them or fix what you're doing with them.
To make glowing text see this https://www.w3schools.com/howto/howto_css_glowing_text.asp

What your code should look like without the stuff that doesn't matter

Code: 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>My Test Page</title>
<style>
html {
    font-family: sans-serif;
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body {
    margin: 0;
    font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    text-align: left;
    background-color: #fff;
}
h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin-bottom: 0.5rem;
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    margin-bottom: 0.5rem;
    font-family: inherit;
    font-weight: 500;
    line-height: 1.2;
    color: inherit;
}
h1, .h1 {
    font-size: 2.5rem;
}
h2, .h2 {
    font-size: 2rem;
}
h1 .aa{ /* use to make text glow in dashboard.php */
    background-image: url("move.gif");
    background-size: cover;
    color: transparent;
    -moz-background-clip: text;
    -webkit-background-clip: text;
    text-transform: uppercase;
    font-size: 80px;
    margin: 5px 0;  
 }
h2 .bb {  /* use to make text glow in dashboard.php */
    background-image: url("move.gif");
    background-size: cover;
    color: transparent;
    -moz-background-clip: text;
    -webkit-background-clip: text;
    text-transform: uppercase;
    font-size: 40px;
    margin: 10px 0;
}  
h3 .cc { /* use to make text glow in dashboard.php */
    background-image: url("move.gif");
    background-size: cover;
    color: transparent;
    -moz-background-clip: text;
    -webkit-background-clip: text;
    text-transform: uppercase;
    font-size: 40px;
    margin: 10px 0;
}
.title2 { /* use to make text glow in dashboard.php */
    font-family: 'Allerta Stencil';
    text-align: center;
    color: #000;  // Changed so I could see inset-inline-start: ;
    display: flex;  
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 1vh;
    letter-spacing: 1px;
    line-height:2
}
</style>
</head>

<body >
<div>
    <div >
        <div>
            <div>
                <h1 class="cc title2">aaaaaaaaaaaaaaaaaaaaaaaa</h1>
            </div>
        </div>
    </div>
        <div>
            <div>
                <div>
                    <h2 class="cc title2">AAAAAAAAAAAA</h2>
                </div>
            </div>
        </div>
</div>
<div>
    <div">
        <div>
            <h2 class="bb title2">AAAAAAAAAAAABBBBBBBBBBBBDDDDDDDDDDD</h2>
        </div>
    </div>
</div>
</body>
</html>
Click to expand...
Thank you, for your information, did change and a a few extra info, it is now how I want it in the first place.
 
Upvote 0 Downvote

New Threads

Latest posts

Share this page

Buy us a coffee!

Code Academy Advertisement
DataCamp Advertisement

About Us

Code Forum is a community platform where coding enthusiasts can connect with other developers, engage in discussions, ask for help, and share their knowledge with a supportive community. It's a perfect place to improve your coding skills and to find a community of like-minded individuals who share your passion for coding.

Site links

Stay Connected

Back
Top Bottom