I am trying to place padding for an input placeholder in FireFox and so far having no luck. I have tried using padding, text-indent and none work in FireFox for me. I have my code below. Any help is much appreciated.
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="style.css" type="text/css" rel="stylesheet" />
</head>
<html>
<body>
<div id='contact_form'>
<input type='text' name='subject' placeholder='Subject' id='Subject' class='contactForm_keys' title='Subject' />
</div>
</body>
</html>
CSS:
#Subject{
margin-left: 43px;
margin-bottom: -8px;
width: 605px;
height: 40px;
}
#Subject:focus, #Subject:hover{
border: 1px solid black;
background: white;
}
/*input placeholder styling*/
input::-webkit-input-placeholder{font-size:14px; font-family: Arial, Helvetica, Sans-serif; color:#c46457; padding-left: 15px;}
input:-moz-placeholder{font-size:14px; font-family: Arial, Helvetica, Sans-serif; color:#c46457; line-height: normal; padding: 0 10px 0 29px;}
input::-moz-placeholder{font-size:14px; font-family: Arial, Helvetica, Sans-serif; color:#c46457; line-height: normal; padding: 0 10px 0 29px;}
#contact_frm input:-ms-input-placeholder{font-size:14px; font-family: Arial, Helvetica, Sans-serif; color:#c46457; padding-left: 15px;}
Related
Hi im a begginer web developer and im making a practice.I want to change my span's label color when i hover to "container" ( btw i also want to change my border's properties as you can see in my code (container :hover))
I hope I explained myself well
#import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght#300&display=swap');
/* font-family: 'Open Sans', sans-serif;*/
body{
background-color: #14213d;
margin: 0;
}
.container li{
list-style: none;
}
.container{
border: 2px solid #fca311;
width: 400px;
height: 100px;
position: relative;
left: 720px;
top: 400px;
}
#mainm{
font-family: 'Open Sans', sans-serif;
color: #e63946;
font-size: 25px;
padding-left: 5px;
padding-top: 15px;
}
.container:hover{
transition: 2s;
border-radius: 15px;
border-color: #43aa8b;
background-color: #43aa8b;
}
#mainm:hover{
color: white;
}
<!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>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<ul>
<li id="mainm">Site Hazırlanma Aşamasında</li>
</ul>
</div>
</body>
</html>
Move the container styles to #mainm and add the color: white; to :hover.
Make note of the other styles I changed to clean it up a bit. I added text-align: center; to the id and removed the height. Instead of a fixed height just use padding.
#import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght#300&display=swap');
/* font-family: 'Open Sans', sans-serif;*/
body {
background-color: #14213d;
margin: 0;
}
.container li {
list-style: none;
}
.container {
width: 100%;
height: 100%;
}
li#mainm {
border: 2px solid #fca311;
width: 400px;
padding: 30px 0px;
position: relative;
left: 720px;
top: 400px;
}
#mainm {
font-family: 'Open Sans', sans-serif;
color: #e63946;
font-size: 25px;
text-align: center;
}
#mainm:hover {
transition: 2s;
border-radius: 15px;
border-color: #43aa8b;
color: white;
background-color: #43aa8b;
}
<!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>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<ul>
<li id="mainm">Site Hazırlanma Aşamasında</li>
</ul>
</div>
</body>
</html>
:root {
--colorsame: #1e90ff;
}
.container{
border: 2px solid var(--colorsame);
width: 400px;
height: 100px;
position: relative;
left: 720px;
top: 400px;
}
#mainm{
font-family: 'Open Sans', sans-serif;
color: var(--colorsame);
font-size: 25px;
padding-left: 5px;
padding-top: 15px;
}
So I have a span element that is near an image. The surrounding elements have no padding or margin that would block it. But for some reason, the image is messing it up. I can't change the image's CSS to position: absolute; as it ends up screwing the dimensions, and it messes up the responsiveness.
In the Stack Overflow version, it seems fine, but as soon as you scale it up, it looks odd.
body{
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.pfp{
width:4%;
height:4%;
border-radius:50%;
margin:0;
padding:0;
}
.name{
vertical-align: top;
margin:.5%;
margin-right:.2%;
font-weight: bold;
}
.user-tag{
vertical-align: top;
margin:0;
margin-right:.2%;
color:grey;
padding:0;
}
.date{
vertical-align: top;
margin:0%;
color:grey;
}
.text{
display:block;
margin-left:5%;
}
.tweet{
margin:3%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="tweet">
<img class="pfp" src="https://walli.quosmos.com/files/thumbs/4/3/4/4347c0a1e9e62b48b3692aa0ea5707165f6c0f15/TesselationV__800_800.png"></img>
<span class="name">John Doe</span>
<span class="user-tag">#JohnDoe</span>
<span class="date">· Feb 25</span>
<span class="text">The image is also scaled oddly.</span>
</div>
<script src="script.js"></script>
</body>
</html>
Why is it sent downwards, and is there anyway to fix it?
I know it's a display:block; element, but if I don't give it that, it will appear on the same line as the info.
You can set the image (.pfp) height to 100%, so the width will be set automatically.
If you then also add a wrapper for the upper line and set the position to relative and its height to 2em it should have a nice height for one line of text and the image will never be to big.
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.pfp {
border-radius: 50%;
margin: 0;
padding: 0;
height: 100%;
}
.name {
vertical-align: top;
margin: .5%;
margin-right: .2%;
font-weight: bold;
}
.user-tag {
vertical-align: top;
margin: 0;
margin-right: .2%;
color: grey;
padding: 0;
}
.date {
vertical-align: top;
margin: 0%;
color: grey;
}
.text {
display: block;
margin-left: 5%;
}
.tweet {
margin: 3%;
}
.tweetheader {
position: relative;
height: 2em;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="tweet">
<div class="tweetheader">
<img class="pfp" src="https://walli.quosmos.com/files/thumbs/4/3/4/4347c0a1e9e62b48b3692aa0ea5707165f6c0f15/TesselationV__800_800.png"></img>
<span class="name">John Doe</span>
<span class="user-tag">#JohnDoe</span>
<span class="date">· Feb 25</span> </div>
<span class="text">The image is also scaled oddly.</span>
</div>
<script src="script.js"></script>
</body>
</html>
Is that what you are looking for?
body{
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.pfp{
width:4%;
height:4%;
border-radius:50%;
margin:0;
padding:0;
}
.name{
vertical-align: top;
margin:.5%;
margin-right:.2%;
font-weight: bold;
}
.user-tag{
vertical-align: top;
margin:0;
margin-right:.2%;
color:grey;
padding:0;
}
.date{
vertical-align: top;
margin:0%;
color:grey;
}
.text{
display:block;
margin-left:5%;
}
.tweet{
margin:3%;
display: flex;
align-items: center;
justify-content: flex-start;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="tweet">
<img class="pfp" src="https://walli.quosmos.com/files/thumbs/4/3/4/4347c0a1e9e62b48b3692aa0ea5707165f6c0f15/TesselationV__800_800.png"></img>
<span class="name">John Doe</span>
<span class="user-tag">#JohnDoe</span>
<span class="date">· Feb 25</span>
</div>
<span class="text">The image is also scaled oddly.</span>
<script src="script.js"></script>
</body>
</html>
This question already has answers here:
Why aren't my absolutely/fixed-positioned elements located where I expect?
(3 answers)
Closed 3 years ago.
I'm having some issues with a blank space (or bar) on the top of my website.
I have tried playing with different values of padding and position as some other posts suggests but nothing seems to work.
h1 {
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
position: relative;
top: 150px;
left: 300px;
z-index: 2;
position: absolute;
color: white;
margin: 0;
}
h2 {
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
position: relative;
top: 230px;
left: 300px;
z-index: 2;
color: white;
font-weight: 100;
font-style: italic;
}
img {
z-index: 1;
position: absolute;
padding-top: 0;
}
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Hayao Miyazaki Tribute Page</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="miyazaki.css">
</head>
<div id="main" class="image">
<h1>Hayao Miyazaki</h1>
<h2> “They say that the best blaze burns brightest when circumstances are at their worst.”</h2>
<img alt="Miyazaki Black and White" src="https://wallpaperaccess.com/full/244942.jpg">
</div>
<body>
<script src="" async defer></script>
</body>
</html>
Since you have givenposition: absolute to the img, you should specify the position of the image.
h1 {
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
position: relative;
top: 150px;
left: 300px;
z-index: 2;
position: absolute;
color: white;
margin: 0;
}
h2 {
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
position: relative;
top: 230px;
left: 300px;
z-index: 2;
color: white;
font-weight: 100;
font-style: italic;
}
img {
z-index: 1;
position: absolute;
padding-top: 0;
top: 0; /* added position */
}
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Hayao Miyazaki Tribute Page</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="miyazaki.css">
</head>
<div id="main" class="image">
<h1>Hayao Miyazaki</h1>
<h2> “They say that the best blaze burns brightest when circumstances are at their worst.”</h2>
<img alt="Miyazaki Black and White" src="https://wallpaperaccess.com/full/244942.jpg">
</div>
<body>
<script src="" async defer></script>
</body>
</html>
You should add margin 0 to body class
css
body{
background: #fff;
margin: 0;
}
Just add top:0; to img tag.
h1 {
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
position: relative;
top: 150px;
left: 300px;
z-index: 2;
position: absolute;
color: white;
margin: 0;
}
h2 {
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
position: relative;
top: 230px;
left: 300px;
z-index: 2;
color: white;
font-weight: 100;
font-style: italic;
}
img {
z-index: 1;
position: absolute;
padding-top: 0;
top: 0;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Hayao Miyazaki Tribute Page</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="miyazaki.css">
</head>
<div id="main" class="image">
<h1>Hayao Miyazaki</h1>
<h2> “They say that the best blaze burns brightest when circumstances are at their worst.”</h2>
<img alt="Miyazaki Black and White" src="https://wallpaperaccess.com/full/244942.jpg">
</div>
<body>
<script src="" async defer></script>
</body>
</html>
Avoid using position:absolute;. Absolutely positioned elements have no awareness of what's happening around them. When a page changes size, the elements don't move in relation to each other but rather in relation to their container and the values you've set for top, left etc.
To know more:https://www.tyssendesign.com.au/articles/css/absolute-positioning-pitfalls/
In your case just put that image as background to the division and place the text h1,h2 inside the division and add padding(if required) to the h1,h2 to align them.
I'm trying to add Google API fonts to my webpage to learn more about HTML and I can't get any of the API fonts to load. I've been trying with the Santina font, but it always reverts back to my "default" Courier New font. The code worked when I added an #import statement to the top of the CSS document, so I believe the link is correct, but the HTML doc doesn't seem to link the API font to the CSS page. Am I overriding the CSS doc somehow?
My HTML doc:
<!DOCTYPE html>
<html>
<head>
<title>Generic Website Name</title>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css?family=Sansita:400"
ref="stylesheet" type="text/css">
<link rel="stylesheet" href="styles.css">
</head>
<body style="background-color:hsl(189,58%,71%);">
<h1 id="title">Title</h1>
<hr>
<h3 class="headermain">Salutations!</h3>
<p class="paramain">Welcome to the Website</p>
Google!
</body>
</html>
The CSS Doc:
#title {
font-family:"Sansita", Courier New;
font-style: normal;
color: #f0f0f0;
text-align: center;
font-size: 5vw;
letter-spacing: 3px;
}
.headermain {
color: #020202;
text-align: left;
font-size: 26px;
font-family: Calibri;
}
.paramain {
color: #010101;
text-align: left;
font-size: 26px;
font-family: Calibri;
}
Edit: added better spacing for code
You've got ref="stylesheet" instead of rel="stylesheet"
Doh.
#title {
font-family:'Sansita', times, sans-serif;
font-style: normal;
color: #f0f0f0;
text-align: center;
font-size: 5vw;
letter-spacing: 3px;
}
.headermain {
color: #020202;
text-align: left;
font-size: 26px;
font-family: Calibri;
}
.paramain {
color: #010101;
text-align: left;
font-size: 26px;
font-family: Calibri;
}
<!DOCTYPE html>
<html>
<head>
<title>Generic Website Name</title>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css?family=Sansita:400" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
</head>
<body style="background-color:hsl(189,58%,71%);">
<h1 id="title">Title</h1>
<hr>
<h3 class="headermain">Salutations!</h3>
<p class="paramain">Welcome to the Website</p>
Google!
</body>
</html>
I'm testing basic layout:
<html>
<head>
<link type="text/css" rel="stylesheet" href="./../public/css/main.css">
</head>
<body>
</body>
</html>
And there is style of body element
background-color: rgb(255, 0, 0);
color: rgb(51, 51, 51);
display: block;
font-family: 'Segoe UI', Ubuntu, Roboto, 'Helvetica Neue', 'Open Sans', Arial, sans-serif;
font-size: 14px;
height: 1091px;
line-height: 20px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
min-height: 100%;
min-width: 1024px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
width: 1024px;
The thing is that I was sure that body width will be scaled and fitted to the phone size. But when I tested on iPhone 3GS horizontal scrollbar appeared. Why width is not scaled?
Add the below to your head:
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport' />
Add the following meta tag to the head of your document:
<meta name="viewport" content="width=device-width, initial-scale=1" />
It's because you are defining :
min-width: 1024px;
width: 1024px;
You should remove both, and define the meta :
<meta name="viewport" content="width=device-width">