I have an image and I put some text next to it by making the text span but I can't seem to change the font size. I tried changing it from a number of different places inside css with no luck.
body {
border: 0;
font-size: 16px;
font-family: serif, sans-serif;
}
.logo {
position: static;
height: 90px;
}
img {
font-size: 16;
vertical-align: top;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Audi</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<img class="logo" src="https://cdn.freelogovectors.net/wp-content/uploads/2016/12/audi-logo.png" alt="logo">
<hr>
<img style="height: 400px;" src="https://www.autozone-mag.com/uploads/1666-audi-rs-6-avant-2019.jpg" alt="RS6">
<span>this is some text</span>
</body>
</html>
Have you tried:
span {
font-size: 30px;
}
span {
font-size: 30px;
}
body {
border: 0;
font-size: 16px;
font-family: serif, sans-serif;
}
.logo {
position: static;
height: 90px;
}
img {
font-size: 16;
vertical-align: top;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Audi</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<img class="logo" src="https://cdn.freelogovectors.net/wp-content/uploads/2016/12/audi-logo.png" alt="logo">
<hr>
<img style="height: 400px;" src="https://www.autozone-mag.com/uploads/1666-audi-rs-6-avant-2019.jpg" alt="RS6">
<span>this is some text</span>
</body>
</html>
Or perhaps add a class:
.text-beside-car-image {
font-size: 30px;
}
.text-beside-car-image {
font-size: 30px;
}
body {
border: 0;
font-size: 16px;
font-family: serif, sans-serif;
}
.logo {
position: static;
height: 90px;
}
img {
font-size: 16;
vertical-align: top;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Audi</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<img class="logo" src="https://cdn.freelogovectors.net/wp-content/uploads/2016/12/audi-logo.png" alt="logo">
<hr>
<img style="height: 400px;" src="https://www.autozone-mag.com/uploads/1666-audi-rs-6-avant-2019.jpg" alt="RS6">
<span class="text-beside-car-image">this is some text</span>
</body>
</html>
You are targeting the img HTML tag, not the span HTML tag.
Your CSS rule (below) does not apply to the text because the rule targets img but the text is in a span tag.
img {
font-size: 16;
/* ... */
}
Furthermore, font-size: 16 is missing a unit type, such as px, pt, em, rem, etc. (see CSS Units).
Finally, please let me know if a detailed example would help you.
You need to set font-size in the element span, not in the element img. Because the element img doesn't support font-size attribute. Thus, you can set
span {
font-size: 16px;
}
Also, when you put unit in the CSS, you need to put Absolute Units (px, pt etc...) or Relative Units (em, rem etc...). Not only the number like that, because it's not interpreted from browser.
img {
font-size: 16;
}
e.g. font-size: 16px;
Finally, you don't see any different if you set font-size: 16px; because the browser default font size is 16px. To see a difference you need to put font size > 16px or font size < 16px.
body {
border: 0;
font-size: 16px;
font-family: serif, sans-serif;
}
.logo {
position: static;
height: 90px;
}
img {
vertical-align: top;
}
span {
font-size: 22px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Audi</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<img class="logo" src="https://cdn.freelogovectors.net/wp-content/uploads/2016/12/audi-logo.png" alt="logo">
<hr>
<img style="height: 400px;" src="https://www.autozone-mag.com/uploads/1666-audi-rs-6-avant-2019.jpg" alt="RS6">
<span>this is some text</span>
</body>
</html>
Related
I'm trying to make the center blue div expand until it touches an edge of a screen. I would like it to expand the font size of all subtexts and the size of the discord iframe embed so that it is relatively the same size on any device. I'm not sure if this is even possible without javascript.
you can see the site at https://duelcraft.games/
h1 {
text-align: center;
font-size: 64px;
}
p {
text-align: center;
}
h2 {
text-align: center;
}
iframe {
display: block;
border-style: none;
}
html {
height: 100%;
}
body {
font: normal 16px verdana, arial, sans-serif;
background-position: top;
height: 100%;
}
.test {
width: 500px;
border: 2px solid black;
padding: 50px;
margin: auto;
background-color: #9FE7FF;
}
.email-part {
font-weight: bold;
}
<!DOCTYPE html>
<!--(c) 2022 DuelCraft-->
<html>
<head>
<meta charset="utf-8">
<title>DuelCraft</title>
<link rel="stylesheet" href="styles.css">
<link rel="icon" type="image/x-icon" href="images/icon.png">
</head>
<body background='images/background.png'>
<div class="test">
<h1>DuelCraft</h1>
<p class="main">DuelCraft Minecraft Server</p>
<h2>How do I join?</h2>
<p>Connect to play.duelcraft.games</p>
<div align="center"><iframe src="https://discord.com/widget?id=995858337293926400&theme=dark" width="350" height="500" allowtransparency="true" frameborder="0" sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts"></iframe></div>
<div class="email-part">
<p>Email user#example.com for help!</p>
</div>
</div>
<p> ©2022 DuelCraft </p>
</body>
</html>
from your last comment,
I know the solution.
add this to your HTML <head> element.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
this makes the website responsive for mobile versions.
this code is automatically generated in most of the IDEs (like vscode)
but in your case, there isn't so just add it
also for not having the margin on top and bottom,
use margin: 0 to the <body> selector
adding a small space in every part (top, left, right) is by adding this code:
the trick there is box-sizing: border-box;
#media screen and (max-width: 600px) {
* {
box-sizing: border-box;
}
body {
padding: 1rem;
}
.test {
width: 100%;
}
}
in this photo I added a padding of 1rem (~16px),
if you want less padding, just change the value
I used a #media because we want that: the code we will use works only on mobile, so on the desktop will be centered, and on mobile there is padding.
for making the discord iframe responsive use width:100% so it will use the maximum space it can have from the parent div.
.test, iframe {
width: 100%;
}
I wrote a comma here to avoid repeating the code multiple times.
for making the <h1> responsive we will use the vw unit in CSS.
h1 {
font-size: 12vw;
}
vw is the width_screen/100
h1 {
text-align: center;
font-size: 64px;
}
p {
text-align: center;
}
h2 {
text-align: center;
}
iframe {
display: block;
border-style: none;
}
html {
height: 100%;
}
body {
font: normal 16px verdana, arial, sans-serif;
background-position: top;
height: 100%;
margin: 0;
}
.test {
width: 500px;
border: 2px solid black;
padding: 50px;
margin: auto;
background-color: #9FE7FF;
}
.email-part {
font-weight: bold;
}
#media screen and (max-width: 600px) {
* {
box-sizing: border-box;
}
body {
padding: 1rem;
}
.test,
iframe {
width: 100%;
}
h1 {
font-size: 12vw;
}
}
<!DOCTYPE html>
<!--(c) 2022 DuelCraft-->
<html>
<head>
<meta charset="utf-8">
<title>DuelCraft</title>
<link rel="stylesheet" href="styles.css">
<link rel="icon" type="image/x-icon" href="images/icon.png">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body background='images/background.png'>
<div class="test">
<h1>DuelCraft</h1>
<p class="main">DuelCraft Minecraft Server</p>
<h2>How do I join?</h2>
<p>Connect to play.duelcraft.games</p>
<div align="center"><iframe src="https://discord.com/widget?id=995858337293926400&theme=dark" width="350" height="500" allowtransparency="true" frameborder="0" sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts"></iframe></div>
<div class="email-part">
<p>Email support#duelcraft.games for help!</p>
</div>
</div>
<p> ©2022 DuelCraft </p>
</body>
</html>
As you can see in the CSS below, I have the height set to "50vh" which is causing the hover selector to be triggered underneath and over the text rather than just on the text. I have tried to lower the height but it moves the text upwards. Is there a way to stop it from triggering unless the cursor is over the actual text while still keeping the text lowered?
body {
background-color: #efefef;
overflow: hidden;
}
.logo h1 {
align-items: center;
color: #262626;
display: flex;
font-family: 'Lato', sans-serif;
font-size: 72px;
font-weight: 700;
height: 50vh;
justify-content: center;
max-width: 100px;
margin: auto;
}
.logo h1:hover {
color: #FFFFFF
}
<!DOCTYPE html>
<html>
<head>
<title>
Bindex. | Home
</title>
<link rel="icon" type="image/x-icon" href="favicon.png">
<link rel="stylesheet" href="index.css">
<meta charset="UTF-8">
<body>
<div class="logo">
<h1>
B.
</h1>
</div>
</body>
</html>
Give this a try. You should set the flex properties on the parent div only, and not the h1. This way, you can manipulate the height of the h1 and the width in which the :hover is activated.
body {
background-color: #efefef;
overflow: hidden;
}
.logo {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
h1 {
color: #262626;
font-family: 'Lato', sans-serif;
font-size: 72px;
font-weight: 700;
height: fit-content;
width: fit-content;
}
.logo h1:hover {
color: #FFFFFF
}
<!DOCTYPE html>
<html>
<head>
<title>
Bindex. | Home
</title>
<link rel="icon" type="image/x-icon" href="favicon.png">
<link rel="stylesheet" href="index.css">
<meta charset="UTF-8">
</head>
<body>
<div class="logo">
<h1>
B.
</h1>
</div>
</body>
</html>
I am writing an HTML Document. I am trying to make no space between a p and a div. There were no error messages included.
I have already tried:
adding 0px margin, padding to the p element and div element
making no whitespace between them in the code
Code:
#IO-out {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
.pn {
margin: 0px;
padding: 0px;
}
.t {
color: white;
background-color: black;
font-family: "Roboto Mono", monospace, "wingdings";
}
.t.normal {
color: white;
background-color: black;
}
html
<head>
<title>
ivyghostkit
</title>
<link rel="stylesheet" href="common.css" type="text/css">
</head>
<body class="t normal">
<div id="container">
<div id="IO-out" class="t normal">
<!-- p elements with class "pn" are added here using javascript -->
</div>
<p id="VoidKeyboard"></p>
</div>
<script src="g.core.js"></script>
</body>
</html>
For clarification, the problem is that noticeable space is inbetween #VoidKeyboard and all p elements in #IO-out.
Add this in your css file
p{
margin: 0;
padding: 0;
}
And add some text in your markup..
Here is the full code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#IO-out {
width: 100%;
height: 100%;
/** make void keyboard work **/
margin: 0px;
padding: 0px;
}
p{
margin: 0;
padding: ;
}
.pn {
margin: 0px;
padding: 0px;
}
.t {
color: white;
background-color: black;
font-family: "Roboto Mono", monospace, "wingdings"; /** ;) **/
}
.t.normal {
color: white;
background-color: black;
}
</style>
</head>
<body class="t normal">
<div id="container">
<div id="IO-out" class="t normal">
p elements with class "pn" are added here using javascript
</div>
<p id="VoidKeyboard">Remove Spacing</p>
</div>
</body>
</html>
.close {
font-size: 50px;
background-color: red;
}
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<span class="close">×</span>
</body>
</html>
So basically there is a padding on the top and bottom I want to remove. I tried with line heights but it didn't work. How do I do that?
display:inline-block first then you can play with line-height
.close {
font-size: 50px;
background-color: red;
display: inline-block;
line-height: 0.5;
}
<span class="close">×</span>
This works without extra padding when selected:
.close {
font-size: 50px;
background-color: red;
float: left;
line-height: 30px;
overflow: hidden;
}
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<span class="close">×</span>
</body>
</html>
.close {
font-size: 50px;
background-color: red;
display: inline-block;
line-height: 0.5;
}
.close::selection{
background: none;
color: yellow;
}
<span class="close">×</span>
What you are looking for is ::selection property of CSS. You can write custom CSS within this and your selected element will behave the same.
I'm wanting to essentially take an image and crop a section of it with CSS.
Here's the picture I'd like to use.
Here's how I'd like to crop it
So, here's the code that I'm using right now.
body {
font-family: "Montserrat", sans-serif;
}
.staffboxes {
background: white;
width: 15%;
text-transform: uppercase;
border: #dedede solid 1px;
}
.staffpfp {
height: 100px;
width: 100px;
overflow: hidden;
float: left;
}
<!DOCTYPE HTML>
<head>
<link rel="stylesheet" href="staffdesign.css">
<meta charset="UTF-8" />
</head>
<body>
<h3>Staff Page</h3>
<div class="staffboxes">
<p>
<div class="staffpfp"><img src="https://i.stack.imgur.com/f505l.png" alt="Kouhai's DP" /></div>
<h3>Kouhai</h3>
</p>
</div>
</body>
</html>
Here's what comes out
If you could please help me, I'd appreciate it!
All you have to do is set your image to width: 100% and height to auto to prevent distortion.
This way, if you change the overall size of .staffpfp class in the future, the img inside will adapt accordingly.
body {
font-family: "Montserrat", sans-serif;
}
.staffboxes {
background: white;
width: 15%;
text-transform: uppercase;
border: #dedede solid 1px;
}
.staffpfp {
height: 100px;
width: 100px;
overflow: hidden;
float: left;
}
.staffpfp img{width: 100%; height: auto;}
<!DOCTYPE HTML>
<head>
<link rel="stylesheet" href="staffdesign.css">
<meta charset="UTF-8" />
</head>
<body>
<h3>Staff Page</h3>
<div class="staffboxes">
<p>
<div class="staffpfp"><img src="https://i.stack.imgur.com/f505l.png" alt="Kouhai's DP" /></div>
<h3>Kouhai</h3>
</p>
</div>
</body>
</html>