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>
Related
I Want to make it so the 100 appears in the top right corner of my div, I have it aligned to the right but it still appears on the bottom. Is there an easy way for me to fix it in CSS? I want it to look like the The character select cards in destiny 2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>D2</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../styles/styles.css">
</head>
<body>
<div class="titan">
<h2>Titan</h2>
<h3>Exo Male</h3>
<h1>100</h1>
</div>
<script src="../js/index.js" async defer></script>
</body>
</html>
#import url('https://fonts.googleapis.com/css2?family=Roboto:wght#300');
body{
background-image: url(../assets/bg.PNG);
background-repeat: no-repeat;
background-size: cover;
}
.titan{
background-image: url('../assets/titan.PNG');
width: 474px;
height: 96px;
}
h1{
color: #31ccf3;
font-family: 'Roboto', sans-serif;
padding-left: 5rem;
float: right;
}
h2{
color: white;
font-family: 'Roboto', sans-serif;
padding-left: 5rem;
}
h3{
color: #c9c9c9;
font-family: 'Roboto', sans-serif;
padding-left: 5rem;
font-size: 1em;
}
The code is not clean (from a CSS perspective), however I would suggest doing display:flex;, justify-content:space-between; and align-items:center; on titan div, then add the first 2 heading in a div.
Further improvements I would do is to get rid of padding from Headings. This is bad practice. You should have the heading in a div that is positioned the way that you want and not apply directly padding on Headings unless if you are 100% sure that all the headings will follow this pattern globally.
#import url('https://fonts.googleapis.com/css2?family=Roboto:wght#300');
body {
background-image: url(../assets/bg.PNG);
background-repeat: no-repeat;
background-size: cover;
}
.titan {
background-image: url('../assets/titan.PNG');
width: 474px;
height: 96px;
display: flex;
justify-content:space-between;
align-items: center;
}
h1 {
color: #31ccf3;
font-family: 'Roboto', sans-serif;
padding-left: 5rem;
float: right;
}
h2 {
color: white;
font-family: 'Roboto', sans-serif;
padding-left: 5rem;
}
h3 {
color: #c9c9c9;
font-family: 'Roboto', sans-serif;
padding-left: 5rem;
font-size: 1em;
}
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>D2</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../styles/styles.css">
</head>
<body>
<div class="titan">
<div>
<h2>Titan</h2>
<h3>Exo Male</h3>
</div>
<h1>100</h1>
</div>
<script src="../js/index.js" async defer></script>
</body>
</html>
Try
.titan {
position: relative
}
.titan h1 {
position: absolute;
top: 0px;
left: 0px
}
If i understand correctly the solution is very simple; for h1 element
position: fixed;
top: 0;
right:0;
When I try to increase font size of placeholder in input tag, my button next to input tag doesnt align properly. I tried to remove outline and border but that dont work. When I decrease font size button goes up, when increase font size it goes down.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
font-family: 'Rubik', sans-serif;
}
.header{
background: linear-gradient(90deg, #443e98 30%, #6086f3);
height: 300px;
position: relative;
}
.header h1{
text-align: center;
color: #ffff;
font-size: 40px;
font-weight: 500;
margin-bottom: 50px;
}
.search-bar{
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.search-bar input{
width: 300px;
height: 50px;
font-size: 20px;
}
.search-bar button{
width: 50px;
height: 50px;
}
<!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">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Rubik:wght#400;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<title>IP Tracker</title>
</head>
<body>
<div class="header">
<h1>IP Address Tracker</h1>
<div class="search-bar">
<input type="text" placeholder="Search for any IP address or domain">
<button>›</button>
</div>
</div>
<div class="ip-bar"></div>
<div class="map-section"></div>
</body>
</html>
Thank for all your help.
If I'm understanding correctly you just want them to appear as a consistent row and stop acting as inline-block elements do by default and wrapping? If so you can utilize as shown below.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
font-family: 'Rubik', sans-serif;
}
.header{
background: linear-gradient(90deg, #443e98 30%, #6086f3);
height: 300px;
position: relative;
}
.header h1{
text-align: center;
color: #ffff;
font-size: 40px;
font-weight: 500;
margin-bottom: 50px;
}
.search-bar{
position: absolute;
left: 50%;
transform: translateX(-50%);
/* Added CSS Below */
display: flex;
flex-direction: row;
}
.search-bar input{
width: 300px;
height: 50px;
font-size: 20px;
}
.search-bar button{
width: 50px;
height: 50px;
}
<!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">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Rubik:wght#400;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<title>IP Tracker</title>
</head>
<body>
<div class="header">
<h1>IP Address Tracker</h1>
<div class="search-bar">
<input type="text" placeholder="Search for any IP address or domain">
<button>›</button>
</div>
</div>
<div class="ip-bar"></div>
<div class="map-section"></div>
</body>
</html>
Try using the following CSS:
.search-bar{
display: flex;
align-items: center;
justify-content: center;
}
I'm trying to get my text elements centered like they would be in MS word.
I am currently using: text-align: center; to center the text but the result looks like it is flushed left in the center of the page rather than centered the way I want.
Here is the CSS and HTML:
#onp {
text-align: center;
font-family: gothambold;
font-size: 20px;
letter-spacing: 20px
}
h1 {
font-size: 80px;
font-family: gothambold;
text-align: center;
}
#font-face {
font-family: gothambold;
src: url(gothambold.ttf)
}
#font-face {
font-family: gothamlight;
src: url(gothamlight.ttf)
}
#linklist {
text-align: center;
width: 500px;
height: 50px;
padding-top: 30px;
margin: auto;
}
#linklist p {
display: inline;
padding-right: 40px;
font-family: gothambold;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>x - home</title>
<link rel="stylesheet" href="style.css">
</head>
<body style="background-color:#ffeeee;">
<h1>XXX XXXXXX</h1>
<p id="onp"> online portfolio</p>
<div id="linklist">
<p>photography</p>
<p>design</p>
<p>case study</p>
<p>contact</p>
</div>
</body>
</html>
I want to fix this issue before moving on and I've been trying for a while with no luck.
Cheers
EDIT: After running the snippet on this website, the text looks fine. On my machine with the font that I'm using, the text definitely looks flushed. What is causing this?
It's because your padding-right: 40px; I changed to 20px but also added padding-left: 20px; and a lime border so you can see whats going on.. hope that helps:
#onp {
text-align:center;
font-family: gothambold;
font-size: 20px;
letter-spacing: 20px
}
h1 {
font-size: 80px;
font-family: gothambold;
text-align: center;
}
#font-face {
font-family: gothambold;
src: url(gothambold.ttf)
}
#font-face {
font-family: gothamlight;
src: url(gothamlight.ttf)
}
#linklist {
text-align: center;
width: 500px;
height: 50px;
padding-top: 30px;
margin: auto;
}
#linklist p {
display: inline;
padding-right: 20px;
padding-left: 20px;
font-family: gothambold;
border: solid 1px lime;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>x - home</title>
<link rel="stylesheet" href="style.css">
</head>
<body style="background-color:#ffeeee;">
<h1>XXX XXXXXX</h1>
<p id="onp"> online portfolio</p>
<div id="linklist">
<p>photography</p>
<p>design</p>
<p>case study</p>
<p>contact</p>
</div>
</body>
</html>
Remove padding-right from #linklist p and add padding-left in #linklist p + p, it's added padding <p> elements that are placed immediately after <p>
#onp {
text-align:center;
font-family: gothambold;
font-size: 20px;
letter-spacing: 20px
}
h1 {
font-size: 80px;
font-family: gothambold;
text-align: center;
}
#font-face {
font-family: gothambold;
src: url(gothambold.ttf)
}
#font-face {
font-family: gothamlight;
src: url(gothamlight.ttf)
}
#linklist {
text-align: center;
width: 500px;
height: 50px;
padding-top: 30px;
margin: auto;
}
#linklist p {
display: inline;
font-family: gothambold;
}
#linklist p + p {
padding-left: 40px;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>x - home</title>
<link rel="stylesheet" href="style.css">
</head>
<body style="background-color:#ffeeee;">
<h1>XXX XXXXXX</h1>
<p id="onp"> online portfolio</p>
<div id="linklist">
<p>photography</p>
<p>design</p>
<p>case study</p>
<p>contact</p>
</div>
</body>
</html>
I'm making a very basic website, but can't remove the extra top space over the body element. It looks like this in both Chrome and Firefox:
I've tried most relevant solutions I found on this forum: I reset my body and HTML margin and padding to 0. Also, I made sure there are no children elements with top margins messing with my code.
body, html {
margin: 0px;
padding: 0px;
}
.navbar {
background:#312c2a;
height: 30px;
text-align:center;
}
.navbar li {
display: inline-block;
margin-right:20px;
margin-left:20px;
}
.navbar a {
color: white;
font-size:20px;
font-family: 'Trebuchet MS', serif;
font-weight: bold;
text-decoration: none;
}
This is my HTML code. I really can't find any problem. Any ideas?
<!DOCTYPE html>
<html>
<head>
<title>Poesía en traducción</title>
<meta charset="utf-8"/>
<link rel="icon" type="image/png" href="imgs/favicon.png"/>
<link rel="stylesheet" type="text/css" href="main.css"/>
</head>
<body>
<div class="navbar">
<ul>
<li>quiénes somos</li>
<li>autores</li>
<li>poemas</li>
<li>servicios de traducción</li>
<li>contacto</li>
</ul>
</div>
<div class="portada">
</div>
</body>
</html>
Many browsers give unordered lists a default top and bottom margin. You should add:
ul {
margin: 0;
padding: 0;
}
Demo Snippet:
body,
html,
ul {
margin: 0;
padding: 0;
}
.navbar {
background: #312c2a;
height: 30px;
text-align: center;
}
.navbar li {
display: inline-block;
margin-right: 20px;
margin-left: 20px;
}
.navbar a {
color: white;
font-size: 20px;
font-family: 'Trebuchet MS', serif;
font-weight: bold;
text-decoration: none;
}
<!DOCTYPE html>
<html>
<head>
<title>Poesía en traducción</title>
<meta charset="utf-8" />
<link rel="icon" type="image/png" href="imgs/favicon.png" />
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body>
<div class="navbar">
<ul>
<li>quiénes somos</li>
<li>autores</li>
<li>poemas</li>
<li>servicios de traducción</li>
<li>contacto</li>
</ul>
</div>
<div class="portada">
</div>
</body>
</html>
try this :)
.navbar {
width: 100%;
height: 70px;
background: black;
margin-left: auto;
margin-right: auto;
position: fixed; /*fixed, relative, or absolute like you want*/
top: 0px;
z-index: 200;
}
ul {
margin: 0;
padding: 0;
}
and
.body{
margin: 0;
padding: 0;
background-color:white;
}
I'm trying to create my personal HTML site (I'm very new in web-site development). But I faced the problem that two nearest div tags are overlapping each other and don't understand why.
Here is code so you can see for yourself:
<!DOCTYPE html>
<html>
<head>
<title>My site</title>
<link rel="icon" type="image/png" href="favicon.png" />
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
</head>
<body style="background-color: #759CE0;">
<div id="wrapper">
<div id="header">
<div style="background-color: #708EE0; width: 100%; height: 30px; display: block;" />
<div>
<h1 id="segoeuilight">Welcome to my blog</h1>
<h3 id="smalltip">News and thoughts</h3>
</div>
</div>
<div id="container">
<div id="left" />
<div id="right" />
<div id="center" />
</div>
<div id="footer" />
</div>
</body>
</html>
And stylesheet:
#font-face
{
font-family: 'Segoe UI Light';
src: url('fonts/segoeuil.ttf');
}
#font-face
{
font-family: 'Segoe UI';
src: url('fonts/segoeui.ttf');
}
h1#segoeuilight
{
font-family: 'Segoe UI Light';
font-weight: normal;
color: #FFFFFF;
padding-left: 10px;
height: 20px;
}
h3#smalltip
{
font-family: 'Segoe UI';
font-weight: normal;
color: #FFFFFF;
padding-left: 10px;
}
div#header
{
height: 20%;
}
div#container
{
min-width:800px;
}
div#center
{
margin:0px 200px 0px 200px;
}
div#left
{
float:left;
width:200px;
}
div#right
{
float:right;
width:200px;
}
div#footer
{
height:100px;
}
div#wrapper
{
width: 800px; /* set to desired width in px or percent */
text-align: left; /* optionally you could use "justified" */
border: 0px; /* Changing this value will add lines around the centered area */
padding: 0;
margin: 0 auto;
background-color: #8D0087;
}
Here is what I get as the result:
http://www.freeimagehosting.net/h11uc
The divs inside "header" div are overlapping each other. But I wanted to create rectangle with first and after it print some text. What is wrong with my code?
Btw I use Chrome browser, but IE9 shows the same result.
Sorry for my bad English.
For some reason, you cannot write an empty <div> tag like <div />. Use <div></div> instead.
See this fiddle:
http://jsfiddle.net/MzUtA/