If I put "NEWS & EVENTS", the 'EVENTS' will disappear.
But if I change '&' to '#', it works fine. How can I use '&' without causing text disappearing
.title {
width: 1438px;
height: 142px;
left: 94px;
top: 201px;
font-family: "Eurostile";
font-style: normal;
font-weight: 900;
font-size: 180px;
line-height: 78.8%;
/* identical to box height, or 142px */
text-align: center;
text-transform: uppercase;
background: linear-gradient(95.99deg, #CE9B58 25.39%, #FFEC83 73.41%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
<div class="background">
<h1 class="title">NEWS & EVENTS</h1>
<h1 class="title">NEWS # EVENTS</h1>
</div>
The & is wider than the #, so you can simply increase the width of your .title:
.title {
width: 1488px;
height: 142px;
left: 94px;
top: 201px;
font-family: "Eurostile";
font-style: normal;
font-weight: 900;
font-size: 180px;
line-height: 78.8%;
/* identical to box height, or 142px */
text-align: center;
text-transform: uppercase;
background: linear-gradient(95.99deg, #CE9B58 25.39%, #FFEC83 73.41%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
<div class="background">
<h1 class="title">NEWS & EVENTS</h1>
<h1 class="title">NEWS # EVENTS</h1>
</div>
The width, height, top, left and font-style probably aren't necessary:
.title {
font-family: "Eurostile";
font-weight: 900;
font-size: 11.25rem;
line-height: 78.8%;
/* identical to box height, or 142px */
text-align: center;
text-transform: uppercase;
background: linear-gradient(95.99deg, #CE9B58 25.39%, #FFEC83 73.41%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
<div class="background">
<h1 class="title">NEWS & EVENTS</h1>
</div>
You need to escape special characters in HTML. Try this instead: &
Related
I tried to add a verticle bar thats stuck to the top right off my screen but it dosent show up for some reason, i tried everything i could. here is my code.
css: used for the style of my site, just uhh regular old code expect that it show anything thats located at the bottom of my website expressed by the overflow hidden thing. Anyways inspect element tells me that my gradient bar is at the bottom of the site even though its not supposed to be. see last couple lines of the css code for the bar.
body {
margin: 0;
margin: 0;
background-color: #0c7bcb; /* change to desired color */
background-size: cover;
height: 1ch;
height: 150px;
overflow: hidden;
}
.bar {
padding-top: 0.5px;
font-size: small;
border-color: rgba(12, 123, 203, 0.5); /* half transparent #0c7bcb color */
font-family: Arial, Helvetica, sans-serif;
color: aliceblue;
border-style: solid;
background-color: #0c7bcb;
background-image: url("https://www.minecraft.net/etc.clientlibs/minecraft/clientlibs/main/resources/favicon.ico");
background-repeat: no-repeat;
background-position: left center;
padding-left: 30px; /* adjust as needed to make room for the icon */
border-bottom-width: 0.5px;
border-top-width: 0.5px;
background-size: 20px 20px; /* adjust the size as needed */
}
.Texty {
}
#close-button {
padding-top: 1px;
color: aliceblue;
position: absolute;
top: 0;
right: 0;
padding: 10px;
cursor: pointer;
font-size: 24px;
}
.updates {
background-color: aliceblue;
border-color: aliceblue;
color: #2bab10;
position: absolute;
top: 135px;
right: 300px;
font-weight: bolder;
font-family: 'main';
width: 1000px;
overflow: auto;
max-height: 6in;
}
.back {
background-image: url("https://cdn.discordapp.com/attachments/694661573125472256/1070884589108744192/image.jpg");
background-size: cover;
height: 100vh;
display: flex;
align-items: center;
}
#baro {
background-color: #78ac4c;
position: fixed;
bottom: 0;
width: 100%;
height: 50px;
display: flex;
justify-content: space-between;
padding: 10px;
box-sizing: border-box;
}
#play-btn {
background-color: yellow;
color: black;
border-radius: 100px;
padding: 10px 20px;
cursor: pointer;
border: none;
}
#font-face {
font-family: main;
src: url(font.ttf);
}
.discord ul {
font-weight: bold;
color: green;
font-family: Arial, Helvetica, sans-serif;
}
.dickkord ul {
font-weight: bold;
color: green;
font-family: Arial, Helvetica, sans-serif;
}
body {
margin: 0;
margin: 0;
background-color: #0c7bcb; /* change to desired color */
background-size: cover;
height: 1ch;
height: 150px;
overflow: hidden;
}
.bar {
padding-top: 0.5px;
font-size: small;
border-color: rgba(12, 123, 203, 0.5); /* half transparent #0c7bcb color */
font-family: Arial, Helvetica, sans-serif;
color: aliceblue;
border-style: solid;
background-color: #0c7bcb;
background-image: url("https://www.minecraft.net/etc.clientlibs/minecraft/clientlibs/main/resources/favicon.ico");
background-repeat: no-repeat;
background-position: left center;
padding-left: 30px; /* adjust as needed to make room for the icon */
border-bottom-width: 0.5px;
border-top-width: 0.5px;
background-size: 20px 20px; /* adjust the size as needed */
}
.Texty {
}
#close-button {
padding-top: 1px;
color: aliceblue;
position: absolute;
top: 0;
right: 0;
padding: 10px;
cursor: pointer;
font-size: 24px;
}
.updates {
background-color: aliceblue;
border-color: aliceblue;
color: #2bab10;
position: absolute;
top: 135px;
right: 300px;
font-weight: bolder;
font-family: 'main';
width: 1000px;
overflow: auto;
max-height: 6in;
}
.back {
background-image: url("https://cdn.discordapp.com/attachments/694661573125472256/1070884589108744192/image.jpg");
background-size: cover;
height: 100vh;
display: flex;
align-items: center;
}
#baro {
background-color: #78ac4c;
position: fixed;
bottom: 0;
width: 100%;
height: 50px;
display: flex;
justify-content: space-between;
padding: 10px;
box-sizing: border-box;
}
#play-btn {
background-color: yellow;
color: black;
border-radius: 100px;
padding: 10px 20px;
cursor: pointer;
border: none;
}
#font-face {
font-family: main;
src: url(font.ttf);
}
.discord ul {
font-weight: bold;
color: green;
font-family: Arial, Helvetica, sans-serif;
}
.dickkord ul {
font-weight: bold;
color: green;
font-family: Arial, Helvetica, sans-serif;
}
#gradient-bar {
background: linear-gradient(to right, #000000, #ffffff);
height: 20px;
width: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Eaglercraft.xyz</title>
</head>
<body>
<div class="bar">
<p>
Eaglercraft.xyz Launcher
</p>
</div>
<div id="close-button">×</div>
<div class="back">
<pi></pi>
</div>
<div id="gradient-bar">
<p>aaseasea</p>
</div>
<div class="updates">
<div class="Texty">
<p> Be sure to join our discord!</p>
<div class="discord">
<ul style="color: black; font-weight: 100;"></ulstyle>Stay up to date with the latest news, contests, giveaways and other cool things: discord.gg :)</ul>
</div>
<div class"dickkord">
<p style="color: #298bc4"> Minecraft 1.8</p>
<ul style="color: black;"></ulstyle>Diorite: Crafted using 2 cobblestone and 2 Nether quartz in a checkerboard pattern.</ul>
<ul style="color: black; font-weight: 100;"></ulstyle>Andesite: Crafted using 1 cobblestone and 1 diorite.</ul>
<ul style="color: black; font-weight: 100;"></ulstyle>Granite: Crafted using 1 Nether quartz and 1 diorite.</ul>
<ul style="color: black; font-weight: 100;"></ulstyle>Coarse Dirt: Replaces grassless dirt found in mega taiga, mesa and savanna biomes. It is slightly darker than regular dirt. Tilling it with a hoe turns it to regular dirt. Can be crafted using dirt and gravel in a 2x2 checkered pattern.</ul>
<ul style="color: black; font-weight: 100;"></ulstyle>Prismarine: Generates in ocean monuments and can be crafted using prismarine shards. Cracks in prismarine slowly change color.</ul>
<ul style="color: black; font-weight: 100;"></ulstyle>Prismarine Bricks: Generates in ocean monuments and can be crafted using prismarine shards.</ul>
<ul style="color: black; font-weight: 100;"></ulstyle>Dark Prismarine: Generates in ocean monuments and can be crafted using prismarine shards and an ink sac.</ul>
<ul style="color: black; font-weight: 100;"></ulstyle>Red Sandstone: Can be crafted using 4 red sand in a square. Comes in chiseled, smooth, stair, and slab forms. Generated only in Mesa biomes at cave entrances.</ul>
<ul style="color: black; font-weight: 100;"></ulstyle>Iron Trapdoor: Can only be opened and closed using redstone. Crafted using iron ingots in a 2x2 pattern.</ul>
<ul style="color: black; font-weight: 100;"></ulstyle>Sea Lantern: Generates in ocean monuments and can be crafted using prismarine shards and prismarine crystals. Emits light and has an animated texture.</ul>
<ul style="color: black; font-weight: 100;"></ulstyle>Wet Sponge: Obtained when a sponge soaks up water. Smelting yields a dry sponge. Emits water dripping particles. Dropped by elder guardians.</ul>
<ul style="color: black; font-weight: 100;"></ulstyle>Slime Block: Crafted using 9 slime balls. Players and mobs bouncing on top. Pushes and pulls blocks when moved by a piston. Does not affect falling items.</ul>
<ul style="color: black; font-weight: 100;"></ulstyle>Banners: Crafted like signs but using wool. Can be stacked to 16 and have up to 6 layers. Can be placed on walls or on the ground. Different patterns can be made using dyes and certain items.</ul>
</div>
</div>
</div>
<div id="baro">
<select id="menu1">
<option selected value="latest">Latest Releases</option>
<option value="1.5">1.5</option>
<option value="1.8">1.8</option>
</select>
<select id="menu2" style="display: none;">
</select>
<button id="play-button" style="background-color: #f0c43c; border-radius: 20%; align-content: center;">Play</button>
</div>
<script src="epic.js"></script>
</body>
</html>
Reasoning:
Due to the 'back' class div set to the height of '100vh' (Vertical Height), The following div with static positioning will sit just below the div with the class of 'back'
Solution:
Rearranging your code makes it visible just under the blue bar
<div class="bar">
<p>
Eaglercraft.xyz Launcher
</p>
</div>
<div id="close-button">×</div>
<div id="gradient-bar">
<p>aaseasea</p>
</div>
<div class="back">
<pi></pi>
</div>
To put it in the very top of the page I used the following
HTML:
<div id="gradient-bar">
<p>aaseasea</p>
</div>
<div class="bar">
<div id="close-button" style="top: 20px">×</div>
<!-- style attr to fix the cross -->
<p>
Eaglercraft.xyz Launcher
</p>
</div>
<div class="back">
<pi></pi>
</div>
CSS:
#gradient-bar p {
margin-top: 0;
position: relative;
}
And to half it you could set #gradient-bar width to 50%
And to put it in the top right corner you could put
#gradient-bar {
position: absolute;
right: 0;
}
Hoped I helped in some way!
How i can remove the space between strings "Text 1" and "its simple"? I need to create whitespace in only 10 pixel, i.e. via margin-top: 10px;. But when i use margin-top: 10px;, total space is 10 pixel + shift.
In my opinion, the white space are formed directly by the margin of the font. With what element can i change the size of this whitespace?
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.title {
font-family: Roboto;
font-size: 41px;
font-weight: 900;
text-transform: uppercase;
color: #f9bf3b;
text-align: center;
}
.simple .title_big {
font-family: Roboto;
font-size: 80px;
font-weight: 900;
text-transform: uppercase;
color: #000000;
text-align: center;
}
<h1 class="title">Text 1</h1>
<div class="simple">
<h2 class="title_big">its simple!</h2>
<div class="line"></div>
</div>
<h2 class="title">Text 2</h2>
Set your line-height equal to 1 on the respective classes. This is equivalent to line-height: 100%;, meaning 100% of the font size for that element, not 100% of its height.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.title {
font-family: Roboto;
font-size: 41px;
font-weight: 900;
text-transform: uppercase;
color: #f9bf3b;
text-align: center;
}
.simple .title_big {
font-family: Roboto;
font-size: 80px;
font-weight: 900;
text-transform: uppercase;
color: #000000;
text-align: center;
}
h1.title,
h2.title_big {
line-height: 1;
}
<h1 class="title">Text 1</h1>
<div class="simple">
<h2 class="title_big">its simple!</h2>
<div class="line"></div>
</div>
<h2 class="title">Text 2</h2>
Is this what you happened to be looking for? I used a negative margin in the .simple .title_big class (-15px to be exact) to remove the margin that was in the text to add less whitespace then there was before. But still leaving you with some.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.title {
font-family: Roboto;
font-size: 41px;
font-weight: 900;
text-transform: uppercase;
color: #f9bf3b;
text-align: center;
}
.simple .title_big {
font-family: Roboto;
font-size: 80px;
font-weight: 900;
text-transform: uppercase;
color: #000000;
text-align: center;
margin: -15px 0;
}
<h1 class="title">Text 1</h1>
<div class="simple">
<h2 class="title_big">its simple!</h2>
<div class="line"></div>
</div>
<h2 class="title">Text 2</h2>
I want to setup a mailer styling like below (this is a mobile view which is most important).
I don't know how to achieve such a view. I was trying something below:
<h1>Hi there,</h1>
<p>Thank you for signing up!</p>
<hr>
<p>You're almost there. Before starting with your journey, we want to make sure that your email address is correct. Please click here to complete your subscription.</p>
<hr>
<h2>Your account</h2>
...
with CSS:
h1 {
color: #0C0C0D;
font-size: 26px;
font-weight: bold;
letter-spacing: 0;
line-height: 33px;
margin-bottom: 33px;
}
hr {
width: 50%;
border: 0;
height: 1px;
background: #333;
background-image: linear-gradient(to right, #ccc, #333, #ccc);
}
p {
color: #0C0C0D;
font-size: 16px;
font-weight: 600;
letter-spacing: 0;
line-height: 20px;
}
With the above css it looks terrible (iPhone view):
You can try with vh unit instead of the percentage.
<h1>Hi there,</h1>
<p>Thank you for signing up!</p>
<hr class="hr1">
<p>You're almost there. Before starting with your journey, we want to make sure that your email address is correct. Please click here to complete your subscription.</p>
<hr class="hr2">
<h2>Your account</h2>
h1 {
color: #0C0C0D;
font-size: 26px;
font-weight: bold;
letter-spacing: 0;
line-height: 33px;
margin-bottom: 33px;
}
hr {
width: 50vh;
border: 0;
height: 1px;
background: #333;
background-image: linear-gradient(to right, #ccc, #333, #ccc);
}
.hr1{
margin: 30px 0;
}
.hr2{
margin: 20px 0 0 0;
}
p {
color: #0C0C0D;
font-size: 16px;
font-weight: 600;
letter-spacing: 0;
line-height: 20px;
}
I want display the text on a new line for every p tag, so I did:
<div class="create-holiday">
<p class="create-holiday-title">Create your holiday activity</p>
<p class="create-holiday-subtitle">Hi! What are your holiday interests?</p>
</div>
.create-holiday *
{
margin-top: 100px;
vertical-align: middle;
text-align: center;
}
.create-holiday-title
{
width: 297px;
height: 22px;
color: #333333;
font-family: Montserrat;
font-size: 22px;
font-weight: 700;
}
.create-holiday-subtitle
{
width: 276px;
height: 18px;
color: #333333;
font-family: Roboto;
font-size: 18px;
font-weight: 300;
}
but the p tag are displayed on the same line.. What I did wrong?
It sounds like your p tag's widths are set to less than 100% and/or your p tags are set to a display of inline or inline-block.
In your CSS file, try this:
p {
display: block;
width: 100%;
}
If that doesn't work, you can always add br tags at the end of each p tag, but you really shouldn't have to do that.
Add A br tag in the middle of the p tags so they don't show up on the same line
<p> tags are block level elements, and therefore you don't need <br> tags. Your code seems to work for me...
.create-holiday * {
margin-top: 100px;
vertical-align: middle;
text-align: center;
}
.create-holiday-title {
width: 297px;
height: 22px;
color: #333333;
font-family: Montserrat;
font-size: 22px;
font-weight: 700;
}
.create-holiday-subtitle {
width: 276px;
height: 18px;
color: #333333;
font-family: Roboto;
font-size: 18px;
font-weight: 300;
}
<div class="create-holiday">
<p class="create-holiday-title">Create your holiday activity</p>
<p class="create-holiday-subtitle">Hi! What are your holiday interests?</p>
</div>
<div class="create-holiday">
<p class="create-holiday-title">Create your holiday activity</p>
<p class="create-holiday-subtitle">Hi! What are your holiday interests?</p>
</div>
.create-holiday * {
margin-top: 100px;
display: flex; //make it flex
align-items: center; //flex middle vertical align
justify-content: center; //flex center align
}
.create-holiday-title {
width: 297px;
height: 22px;
overflow: hidden; //force p to height and width size
color: #333333;
font-family: Montserrat;
font-size: 22px;
font-weight: 700;
}
.create-holiday-subtitle {
width: 276px;
height: 18px;
overflow: hidden; //force p to height and width size
color: #333333;
font-family: Roboto;
font-size: 18px;
font-weight: 300;
}
I am trying to get the Texas icon directly centered between the span and h1 element.
Here is the Screen Capture
I tried googling but I think I might be phrasing what I need poorly. Is it that I have to adjust the padding and margin in css? I just want to move the icon down the y-axis.
Thank you
<header id="top" class="main-header">
<span class="title">Keep it Weird in</span>
<div>
<img class="texas-icon" src="https://image.ibb.co/cGRVFG/texasicon_1.png" alt="texasicon_1" border="0"></a>
</div>
<h1>Austin</h1>
.main-header {
padding-top: 170px;
height: 850px;
background: linear-gradient(lightblue, transparent 90%),
linear-gradient(0deg, #fff, transparent),
#ffa949 url('https://media.giphy.com/media/3ohs7I9ho0H4dfeP7y/giphy.gif') no-repeat center;
background-size: cover;
}
.title {
color: white;
font-size: 1.625rem; /* 26px/16px */
letter-spacing: .065em;
font-weight: 200px;
padding-bottom: 10px;
}
h1 {
font-size: 12.5rem; /* 90px/16px */
color: rgba(255, 255, 255, 1);
text-transform: capitalize;
font-weight: normal;
text-align: center;
line-height: 1.3;
margin: 12px 0px 0px;
}
I think text-align:center is enough in your case, then simply play with margin of elements to create the spaces :
header {
background: blue;
text-align: center;
color: #fff;
max-height: 380px;
padding: 50px 25px 0px;
}
.title {
margin: 5px 0;
font-size: 1.3rem;
border: none;
display: inline-block;
}
h1 {
margin: 10px 0;
font-size: 5rem;
line-height: 1.1;
}
<header id="top" class="main-header">
<span class="title">Keep it Weird in</span>
<div>
<img class="texas-icon" src="https://image.ibb.co/cGRVFG/texasicon_1.png" alt="texasicon_1" border="0">
</div>
<h1>Austin</h1>
</header>
Thank you for the support. Unfortunately, none of the solutions worked but I decided just to change the line height of the h1 element and was able to get the result I wanted. I learned so many new things from the responses to my question. Again, thank you.
Updated Screen Capture