I am new to html/css and I do not understand why my background image is not showing up over the button in the search box on the right. I want to display an image of magnifying glass over the right button in the search box?
.sbox {
width: 297.297px;
height: 25px;
background-color: rgba (0, 0, 0, 0);
font-family: Helvetica, Arial, sans-serif;
font-size: 14px;
font-stretch: normal;
font-style: normal;
font-variant-caps: normal;
font-variant-ligatures: normal;
font-variant-numeric: normal;
font-weight: normal;
cursor: auto;
position: relative;
}
.fb {
background: url("../img/mag.png") no-repeat 0 0;
background-size: 50px 50px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="css/facebook.css">
</head>
<body>
<button value="1" class="tools" aria-label="Search" type="submit">
<i class=fb></i>
</button>
<input type="text" class="sbox" placeholder="Search " arial-label="Search" />
</body>
</html>
You should add background image to the button rather than using an i tag. i tags are used in html for alternate text moods. eg adding italics etc.
The reason they were adopted by font-awesome and bootstrap to show icons was mostly because they are inline-block by default and are efficient. But the way they do it is by adding a font file rather than using its background property
Here you should add the background to the button along with specifying a specific height and width to it.
<button value="1" class="tools fa" aria-label="Search" type="submit">
</button>
.fb {
background: url("../img/mag.png") no-repeat 0 0;
background-size: 50px 50px;
height:45px;
width:50px;
}
Your <i class=fb></i> has no text content. Unless you specify some height and width in your CSS, your button will remain unaffected. Try adding this to .fb
.fb{
height:50px; /*Assuming 50px because your background-size is 50px*/
width:50px;
display:block; /*Because height won't take effect on 'inline' elements*/
}
Let me know how it goes.
Based on the question, I feel that you want to display an image in search box on the right. If so, please apply background image to class 'sbox' and the image position should be 'right 0'. The class 'sbox' will look as below:
.sbox {
width: 297.297px;
height: 25px;
background-color: rgba (0, 0, 0, 0);
font-family: Helvetica, Arial, sans-serif;
font-size: 14px;
font-stretch: normal;
font-style: normal;
font-variant-caps: normal;
font-variant-ligatures: normal;
font-variant-numeric: normal;
font-weight:`enter code here` normal;
cursor: auto;
position: relative;
top: -26px;
background: url("../img/mag.png") no-repeat right 0;
}
And if you want the image (magnifying glass) to the button on the right, the code is as follows:
.fb {
background: url("../img/mag.png") no-repeat right 0;
width:15px;
height:14px;
display:inline-block;
float:right;
}
Related
I am working on a personal website as a beginner and I have the font available to me. When I add it with a font face on my hero banner, it shows up weirdly. I don't know if that's because the font just won't work with the site or not.
Here is what I currently get:
The font should be in the middle and left of the banner, and the text should be white. I tried different variations of font-face and I tried adding styles to space out the letters. I tried another response from this post.
However, that didn't work. Any suggestions?
My hero code and CSS:
body {
margin: 0;
padding: 0;
height: 100vh;
font-family: Arial, Helvetica, sans-serif;
color: black;`enter code here`
}
img{
opacity: 50%;
}
.croppedbanner {
width: 100%;
height: 200px;
object-position: 0% 39%;
object-fit: cover;
}
.container{
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
div.hero-text{
font-family: khFont;
letter-spacing: 5px;
font-size: 55px;
position: absolute;
overflow: hidden;
font-weight: normal;
line-height: 58px;
transform: translate(0px, -200px);
margin-left: 10px;
color: transparent;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: blue;
-webkit-text-fill-color: red;
}
#font-face {
font-family: khFont;
src: url(/fonts/khFont.ttf) format('truetype');
font-weight: normal;
font-style: normal;
}
<div class="container">
<img class="croppedbanner" src="/img/SiteBanner.png" alt="Hero Banner">
<div class="hero-text">
<h1> Welcome to the site </h1>
</div>
</div>
EDIT 1: Ok so I managed to get different colors that aren't black and white. But I kind of need those two colors. The colors are also different between browsers. Google Chrome - is in Light Mode and Opera GX - is in Dark Mode. The dark mode one I can't turn off.
Here's a screenshot of the website with both browsers.
Opera:
Chrome:
I (think) I am holding the site locally on my pc, as I only see an IP address at the bar. So I can't share the site.
Additionally, the code was edited to show in its entirety. This is just for the hero banner, so the HTML will be small, and I did some extra steps for the banner too. If you want to throw in suggestions for that, feel free :)
i think i can give a helpful solution for you.
First, let me try to show you about how to use css selector while coding a web page.
There was more than one selector that we can use.
For this case, i should recommend you to using class selector, or maybe child selector.
/*With class selector*/
.hero-text{
font-family: khFont;
height: 100%;
font-size: 55px;
text-transform: capitalize;
position: absolute;
overflow: hidden;
font-weight: normal;
line-height: 58px;
}
/*With child combinator selector*/
div > .hero-text{
font-family: khFont;
height: 100%;
font-size: 55px;
text-transform: capitalize;
position: absolute;
overflow: hidden;
font-weight: normal;
line-height: 58px;
}
#font-face {
font-family: khFont;
src: url(/fonts/khFont.ttf) format('truetype');
font-weight: normal;
font-style: normal;
}
<div class="container">
<img class="croppedbanner" src="/img/SiteBanner.png" alt="Hero Banner">
<div class="hero-text">
<h1> Welcome to the site </h1>
</div>
</div>
For the documentation of using selector, you can read more in this link.
And the second is, let's start to edit the class to fixing the output in the interface.
/*With class selector*/
.hero-text{
font-family: khFont;
height: 100%;
font-size: 55px;
text-transform: capitalize;
position: absolute;
overflow: hidden;
font-weight: normal;
line-height: 58px;
display: block;
margin: 0 auto;
text-align: center;
}
#font-face {
font-family: khFont;
src: url(/fonts/khFont.ttf) format('truetype');
font-weight: normal;
font-style: normal;
}
<div class="container">
<img class="croppedbanner" src="/img/SiteBanner.png" alt="Hero Banner">
<div class="hero-text">
<h1> Welcome to the site </h1>
</div>
</div>
For more details, you can read in these documentations:
Display Docs
Text Align Docs
Margin Docs
Thank you
It's been resolved! Turns out, in Opera, you can enable "Force Dark Pages" which I thought it would change when I clicked the setting on the page. When working with local sites, you wont be able to change the setting on the page itself, you have to go into the browser settings.
Thanks everyone for your help! :)
I just switched from VSC to Adobe Dreamweaver and i don't know if I should keep it or not; but that's besides the point.
When I try to add a background to some text, it fills the whole screen with the background with the background, and if I try to change the width it only adds on to the background which is filling the whole screen.
I don't know if it's user error, something changed in HTML/CSS overnight or if it's because of the Dreamweaver display box thing on the top of my screen
#charset "utf-8";
* {
margin: 0;
padding: 0;
}
.Container {
padding: 25%;
padding-left: 50%;
padding-right: 50%;
font-family: comfortaa;
font-style: normal;
font-weight: 600;
color: white;
background: #00C3FF;
margin: 0;
}
body {
background-image: url(http://www.incomeactivator.com/images/freebg5.jpg);
background-repeat: no-repeat;
background-size: 100%;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>index</title>
<link href="file:///C|/Users/REDACTED/Documents/style.css" rel="stylesheet" type="text/css">
<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.-->
<script>
var __adobewebfontsappname__ = "dreamweaver"
</script>
<script src="http://use.edgefonts.net/comfortaa:n3:default.js" type="text/javascript"></script>
</head>
<body>
<div class="Container">
<h1>Hello</h1>
</div>
</body>
</html>
p.s: let me know if you need a ss of the results I get.
Instead of using the class, you can change the texts background color by adding
background-color: rgb(255, 236, 139)
in the h1 tag
Demo:
YOURTEXT
It should work as expected if you apply the css to the H1 tag:
.Container h1{}
You have used padding property incorrectly. Reference
Correct syntax: padding: top right bottom left
padding:0 50% 0 50%;
So the css should be:
.Container{ margin: 0; }
.Container h1{
padding:0 50% 0 50%;
font-family: comfortaa;
font-style: normal;
font-weight: 600;
color: white;
background: #00C3FF;
}
I'm having problems changing the size of the text and the image in css. I'm just starting to use html and css. This is my code.
function myFunction() {
var xmlhttp = new XMLHttpRequest();
var url = "https://vnwcn9gt89.execute-api.us-east-2.amazonaws.com/book";
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var myJson = JSON.parse(this.responseText);
console.log(myJson);
document.getElementById("title").innerHTML = myJson.Items[3].valore;
document.getElementById("text1").innerHTML = myJson.Items[1].valore;
document.getElementById("img1").src="books_img/"+myJson.Items[0].valore;
}
};
xmlhttp.open("GET", url, true);
xmlhttp.send();
}
* {box-sizing: border-box}
body {font-family: Verdana, sans-serif; margin:0}
.img1 {display: none}
img1 {vertical-align: middle;}
.title {
color: #333333;
font-size: 3em;
font-family: 40 px Olney,"Trebuchet MS",Tahoma,Arial,"Lucida Sans Unicode","Bitstream Vera Sans","DejaVu Sans",Sans-serif;
font-weight: bold;
padding: 8px 12px;
position: static;
bottom: 8px;
width: 100%;
}
.text1 {
color: #333333;
padding: 8px 12px;
font-family: 17 px Olney,"Trebuchet MS",Tahoma,Arial,"Lucida Sans Unicode","Bitstream Vera Sans","DejaVu Sans",Sans-serif;
}
.img1 {
display: block;
margin-left: auto;
margin-right: auto;
}
<div>
<h1 div class="title" id="title" button onclick="myFunction()"></div> <br>
<div class="text1" id="text1" button onclick="myFunction()"></div> <br>
<div class="img1"> <img id="img1" src onerror="this.onerror=null; this.src=myFunction();" style="width:50%"> </div>
</div>
<br>
In particular, I am unable to change the size of the text and I cannot center the image.
I definitely get confused with divs.
Can you kindly help me?
<div class="text1" id="text1" button onclick="myFunction()"></div> <br>
For good practice, try using <p> for text.
What happens is that you are trying to add font-size style to a <div>.
You don't need to use <br> after a <div>.
You can't use a button inside a div
The proposal solution is this:
CSS
.text {
color: #333333;
font-size: 17px;
font-family: Olney,"Trebuchet MS",Tahoma,Arial,"Lucida Sans Unicode","Bitstream Vera Sans","DejaVu Sans",Sans-serif;
}
.text-container {
padding: 8px 12px;
}
HTML
<div class="text-container">
<button type="button" onclick="myFunction()">
<p class="text" id="text1"></p>
</button>
</div>
Now for the image, add text-align:center to img1:
.img1 {
display: block;
margin-left: auto;
margin-right: auto;
text-align: center;
}
Welcome to Programming :)
1.) font-family: 17 px Olney, is not a valid definititon for font-size. Use font-size instead, and make sure to not put a space between the number and "px".
2.) To center your image, apply text-align: center to your img1 class (which is the parent element of the image - the image itself is an inline element by default which can be centered that way)
You are using the font-family property to set both the size and font-family of the text1 class. font-family property is used to set the font family only. So, use this
{font:17px Olney,"Trebuchet MS",Tahoma,Arial,"Lucida Sans Unicode","Bitstream Vera Sans","DejaVu Sans",Sans-serif;}
instead of font-family
Or you can specify the font-size and font-family separately like
{
font-size:17px;
font-family:"Trebuchet MS",Tahoma,Arial,"Lucida Sans Unicode","Bitstream Vera
Sans","DejaVu Sans",Sans-serif;
}
And if you want to set the width of the image to be 50% then you have to provide some width to the parent div of the image.
very new to this and have tried several fixes without success.
Inside h1, my fonts are all correct and reacting as expected:
h1 {
position:relative;
left: -10px;
top: -16px;
padding: 2em;
height: 3em;
width: 100%;
background: #545454;
font-family: "Avenir Light", sans-serif;
font-size: .7em;
text-align: center;
color: darkgray}
h1 p {
font-weight: 30;
word-spacing: 30px;}
But the text isn't responding anywhere else on my page, even when inserted under body, body p, into each individual element... It's driving me nuts!
body {
margin: 0, 0;
padding: 0, 0;
overflow-x: hidden;
background: #765264;
color: white;
font-family: "Avenir Light", sans-serif;
font-size: 16px;
line-height: 1.5;
}
body p {
font-size: 1em;
font-family: "Century Gothic";
font-weight: 30;
letter-spacing: 1px;
}
Weirdly, inserting letter-spacing above seemed to make the spacing larger.
Here's my HTML, for reference:
<head>
<div class="header" id="myHeader">
<h1>
<link rel="stylesheet" href="peytonsite.css">
<p>
<img src="https://static.wixstatic.com/media/058e45_e590acfd22c440f4b5c89450738f321d~mv2.png/v1/fill/w_100,h_100,al_c,q_85,usm_0.66_1.00_0.01/058e45_e590acfd22c440f4b5c89450738f321d~mv2.webp">
<a>HOME</a>
<a>SKILLS</a>
<a>PORTFOLIO</a>
<a>EXPERIANCE</a>
<a>CONTACT</a>
</p>
</h1>
</div>
</head>
<article>
<section id="LANDING">
<img id="LongLogo" src="https://static.wixstatic.com/media/058e45_0291502c1e424532bbd24f9cfd50fd1e~mv2.png/v1/fill/w_1466,h_348,al_c,q_90,usm_0.66_1.00_0.01/Long%20Logo.webp">
<p>PASSIONATE DESIGN</p>```
Please help!
Update:
30 isn't a valid font-weight, and, your font may not necessarily have a boldness available to it.
Try: font-weight: bold;
or: font-weight: 300; (300 is usually non-bold)
A few other ideas:
You probably want a comma between h1 p { in your second CSS block.
Secondly- Is your target text within a <p> block?
For debugging purposes, what happens if you append !important to your styles? Does that show what you want?
What happens if you delete the h1 p { ... block, and add this in at the bottom of your CSS?
p {
font-weight: 300!important;
word-spacing: 30px!important;}
If nothing changes, I suspect you don't have the right CSS selectors.
Here is a CodePen of your CSS correctly applying
I am attempting to make my site responsive, I give my heading text 15px of padding however if the text stretches onto a new line the next line doesn't get the correct padding on the left side. Is it possible to make the text align?
Here is a screenshot of the text.
Here is the CSS i'm using.
.article_title {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
line-height: 10px;
color: #666;
font-weight: bold;
padding: 15px;
}
and my html element is
<span class="article_title">Building Refurbishment and Modernisation</span>
span is an inline element, which means the left padding is not applied to it.
Just add the display: block; to the CSS code and it should work fine.
.article_title {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
line-height: 10px;
color: #666;
font-weight: bold;
padding: 15px;
display:block
}
The display:block should do the trick. Notice I have also changed the line-height to 15.
you can just add display:table; and remove line-height for responsive layout.
.article_title {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
color: #666;
font-weight: bold;
padding: 15px;
display: table;
}
http://jsfiddle.net/oapu11q4/28/
Just change the span to div. Using a span while forcing it to be a block element is counter-intuitive.