for some reason my text (link) is being pushed outside of the div container. I am wanting the text to be inside the div, and JUST the text to me clickable, not the entire div.
HTML
<div class="title">
Work
</div>
CSS
.title {
position: absolute;
background-color: red;
z-index: 5;
height: 15em;
}
.title a {
height: 15em;
font-size: 150px;
text-decoration: none;
font-family: 'Inknut Antiqua', serif;
}
When Inspecting in a browser, the '' is extremely large for some reason.
Thanks.
.title {
position: absolute;
background-color: red;
z-index: 5;
height: 15em;
}
.title a {
height: 15em;
font-size: 150px;
text-decoration: none;
font-family: 'Inknut Antiqua', serif;
}
<link href="https://fonts.googleapis.com/css?family=Inknut+Antiqua" rel="stylesheet">
<div class="title">
Work
</div>
The line-height for a font that is 150px is very large and is causing the overflow. Play around with line-height to get the effect you desire:
.title a {
height: 15em;
font-size: 150px;
line-height: 150px;
text-decoration: none;
font-family: 'Inknut Antiqua', serif;
}
https://jsfiddle.net/srza8bhk/
remove height:15em from anchor tag. and set it's line-height should be less
like:
.title a {
font-size: 150px;
line-height: 1px;
text-decoration: none;
font-family: 'Inknut Antiqua', serif;
}
Related
I am coding a Facebook clone with some changes to enhance my skills, but I have ran into a problem.
I have an image(profile picture) and text(user name) under the <h1> of Home. I am trying to align the text exactly to the center to the right of the image
example:
[
top of image
CENTER OF IMAGE TEXT
bottom of image
] ( what I expected/Wanted)
I am not getting the result I want. Instead, the image the text is at the top to the right of the image.
example:
[
top of image
center of image
BOTTOM OF IMAGE TEXT
](result)
The HTML:
<div class="sidebar">
<h1 class="home">Home</h1>
<a class="create-button" href="#">Create</a>
<div class="personnal-info">
<img class="sidebar-profile-picture" src="icons\my profile.jpg">
<p class="my-user-name">Said User</p>
</div>
</div>
The CSS:
.sidebar {
position: fixed;
left: 0;
bottom: 0;
top: 55px;
background-color: white;
z-index: 100;
padding-top: 5px;
background-color: white;
width: 400px;
margin-left: 20px;
}
.home {
display: inline-block;
font-size: 35px;
font-family: Roboto, Arial;
}
.create-button {
display: inline-block;
font-size: 17px;
color: rgb(23, 93, 255);
text-decoration: none;
margin-left: 220px;
}
.sidebar-profile-picture {
height: 30px;
border-radius: 16px;
margin-right: 8px;
}
.my-user-name {
display: inline-block;
font-size: 16px;
font-family: Roboto, Arial;
font-weight: bold;
}
Flexbox is perfect for these cases. Change the .personalInfo div to a flexbox by adding the display: flex property. Then you have access to many other properties for centering, etc.
.sidebar {
position: fixed;
left: 0;
bottom: 0;
top: 55px;
background-color: white;
z-index: 100;
padding-top: 5px;
background-color: white;
width: 400px;
margin-left: 20px;
}
.home {
display: inline-block;
font-size: 35px;
font-family: Roboto, Arial;
}
.create-button {
display: inline-block;
font-size: 17px;
color: rgb(23, 93, 255);
text-decoration: none;
margin-left: 220px;
}
.sidebar-profile-picture {
height: 30px;
width: 30px; /* demo only */
background-color: blue; /* demo only */
border-radius: 16px;
margin-right: 8px;
}
.my-user-name {
/* display: inline-block; -> not necessary anymore*/
font-size: 16px;
font-family: Roboto, Arial;
font-weight: bold;
}
/* FLEXBOX */
.personal-info{
display: flex;
flex-direction: row; /* display children in a horizontal row */
align-items: center; /* vertically align items in the center */
}
<div class="sidebar">
<h1 class="home">Home</h1>
<a class="create-button" href="#">Create</a>
<div class="personal-info">
<img class="sidebar-profile-picture">
<p class="my-user-name">Said User</p>
</div>
</div>
Not sure I understand your requirement correctly.
You can use flex to achieve the below result.
Let me know if this works
.personnal-info {
display:flex;
align-items: center
}
<div class="sidebar">
<h1 class="home">Home</h1>
<a class="create-button" href="#">Create</a>
<div class="personnal-info">
<img class="sidebar-profile-picture" src="//via.placeholder.com/50x50">
<p class="my-user-name">Said User</p>
</div>
</div>
hey Mihai T thanks for the response ! It actually worked.
But didn't put it in an ideal position.
I actually fixed the problem by putting position: relative; on personnal-info.
Then I put in my-user-name
position: absolute; top: -8px;
PS: It also worked with bottom: -8px; instead of top: -8px.
Thanks !
Edge renders page wrong afer loading it, but after clicking refresh it renders it correctly.
Works as expected on Chrome and Firefox
<html>
<head>
<style>
body {
font-family: 'Open Sans', sans-serif;
overflow: hidden;
}
.day {
position: relative;
float: left;
width: 12%;
background-color: white;
}
.header_class {
position: relative;
height: 5%;
background-color: blue;
color: white;
font-size: 12px;
text-transform: uppercase;
text-align: center;
line-height: 5vh;
}
.row_class {
position: relative;
height: 5%;
color: black;
font-size: 12px;
text-align: center;
line-height: 5vh;
}
</style>
</head>
<body>
<div class="day">
<div class="header_class">header</div>
<div class="row_class">row1</div>
<div class="row_class">row2</div>
<div class="row_class">row3</div>
<div class="row_class">row4</div>
</div>
</body>
</html>
The text should be centered in the header box and below, but it is above the box when the page loads. If i click F5 or refresh it renders as expected.
There seems to be a bug in Microsoft Edge when using viewport height vh. Try setting a line-height in pixels and it should work. If you want to center the items then I suggest using flexbox, its widely supported in most browsers these days:
body {
font-family: 'Open Sans', sans-serif;
overflow: hidden;
}
.day {
position: relative;
width: 12%;
background-color: white;
display: flex;
justify-content: center;
align-content: center;
min-height:0;
flex-direction: column;
}
.header_class {
position: relative;
height: 5%;
background-color: blue;
color: white;
font-size: 12px;
text-transform: uppercase;
text-align: center;
line-height: 25px;
}
.row_class {
position: relative;
height: 5%;
color: black;
font-size: 12px;
text-align: center;
line-height: 25px;
}
You can manually wait until the page fully loads, and then display, reducing the chance of it rendering wrong.
window.onload = function();
I have a button on my website, and I used resolution independent alignment. I checked two different computer screens with different resolutions and it looks alright, however, once opened on a larger aspect ratio screen or a mobile/tablet device it re-positions. On a larger aspect ratio screen the buttons moves to the left, on the smaller devices, it floats towards the right. I'm not 100% certain what could of gone wrong. Below is my CSS and HTML code.
HTML:
<div class="Welcome">
<h1>Welcome to Beauty Factory Bookings</h1>
<button>Book Appointment</button>
</div>
CSS:
body {
background: url('http://i.imgur.com/4mKmYMb.jpg') no-repeat fixed center center;
background-size: cover;
font-family: Montserrat;
margin: 0;
padding: 0;
.Welcome {
margin-top: 13%;
}
.Welcome h1 {
text-align: center;
font-family: Montserrat;
font-size: 50px;
text-transform: uppercase;
}
.Welcome button {
height: 60px;
width: 340px;
background: #ff656c;
border: 1px solid #e15960;
color: #fff;
font-weight: bold;
text-transform: uppercase;
font-size: 17px;
font-family: Montserrat;
outline: none;
cursor: pointer;
text-align: center;
margin-left: 33%;
margin-top: 3%;
border-radius: 5px;
}
Any idea how to fix this?
You center a html element, which has the standard position and is a block element with margin-left: auto and margin-right: auto.
It is a convention to write the first letter of classes and ids in lowercase.
Example
Just another way to do it:
I wrap your button in div and center the button using text-align:center
Don't forget to take out margin-left: 33%; in your css
HTML
<div class="Welcome">
<h1>Welcome to Beauty Factory Bookings</h1>
<div class="center">
<button>Book Appointment</button>
</div>
</div>
CSS
.Welcome {
margin-top: 13%;
}
.Welcome h1 {
text-align: center;
font-family: Montserrat;
font-size: 50px;
text-transform: uppercase;
}
.center {
text-align: center;
}
.Welcome button {
height: 60px;
width: 340px;
background: #ff656c;
border: 1px solid #e15960;
color: #fff;
font-weight: bold;
text-transform: uppercase;
font-size: 17px;
font-family: Montserrat;
outline: none;
cursor: pointer;
text-align: center;
margin-top: 3%;
border-radius: 5px;
}
Example: http://codepen.io/anon/pen/EPyjXm
create a new CSS property for a tag and set display to flex(takes up 100% of width; and justify content to center.
EDIT
After checking out your site,
there is a margin-left of 15px coming from somewhere. Get rid of it if that is a possibility or else just add margin-left: 0 to the .Welcome a {...}
.Welcome a {
display: flex;
/*set display mode of anchor to flex*/
justify-content: center; /* Justify content center*/
margin-left: 0; /* Add !important in case it is overwritten*/
}
.Welcome {
margin-top: 13%;
}
.Welcome h1 {
text-align: center;
font-family: Montserrat;
font-size: 50px;
text-transform: uppercase;
}
.Welcome a {
display: flex;
/*set display mode of anchor to flex*/
justify-content: center; /* Justify content center*/
}
.Welcome button {
height: 60px;
width: 340px;
background: #ff656c;
border: 1px solid #e15960;
color: #fff;
font-weight: bold;
text-transform: uppercase;
font-size: 17px;
font-family: Montserrat;
outline: none;
cursor: pointer;
text-align: center;
border-radius: 5px;
}
<div class="Welcome">
<h1>Welcome to Beauty Factory Bookings</h1>
<a href="website_link">
<button>Book Appointment</button>
</a>
</div>
This question already has answers here:
How to position text over an image with CSS
(8 answers)
Closed 8 years ago.
I am trying to display some text over an image : http://jsfiddle.net/5AUMA/31/
I need to align this text at the bottom part of the image
I tried putting this in css:
.head_img p {
position: absolute;
left: 0;
width: 100%;
vertical-align:bottom;
}
but this doesn't work ...
.............
Secondly I want this to be scalable with the screen width ... if width less than that of a 13" laptop .. remove the image but keep the text
How do i do that
Try this:
body{
color: #202020; /*#3d3636 #fffaf0; #fdfdfd 8c8c8c*/
font-size:100%;
font-family: 'Maven Pro', sans-serif;
line-height:1.4em;
min-height:100%;
/*padding-left: 5%;*/
background-color: #fdfdfd;
}
.head_img{
margin-top:10%;
font-size:1.5em;
line-height: 1em;
font-weight: bold;
font-style: italic;
color: #000000;
text-align:center;
position:relative;
}
.head_img p {
position: absolute;
left: 0;
width: 100%;
bottom:5px;
margin:0;
padding:0;
}
#media (max-width: 1366px) {
.head_img img { display:none; }
}
I added position:relative; to the .head_img class and positioned the p element absolutely with a bottom of 5px.
Then added a media query to hide the image once the screen width goes below 1366px. You will have to adjust that breakpoint, but I believe it's a common screen width for 13" laptops.
Updated fiddle: http://jsfiddle.net/5AUMA/33/
http://jsfiddle.net/5AUMA/32/
your markup wasn't correctly set (moved the paragraph in the same div that contains the image)
<body class ="body">
<div class ="head_img">
<div style="text-align:center;"><img style="min-width:50%; min-height:60%;" src = "http://i.imgur.com/H56PB85.jpg"/>
<p> display this text over the image <br> and at the bottom part of the image</br></p>
</div>
</div>
</body>
also look for position:relative on the container div to make things work on all browsers
body{
color: #202020; /*#3d3636 #fffaf0; #fdfdfd 8c8c8c*/
font-size:100%;
font-family: 'Maven Pro', sans-serif;
line-height:1.4em;
min-height:100%;
/*padding-left: 5%;*/
background-color: #fdfdfd;
}
.head_img{
margin-top:10%;
font-size:1.5em;
line-height: 1em;
font-weight: bold;
font-style: italic;
color: #000000;
text-align:center;
position: relative; /* HERE */
}
.head_img p {
position: absolute;
left: 0;
width: 100%;
bottom: 0;
color: white;
}
You need to make couple of changes to your css to make it work as follows.
.head_img p {
position: absolute;
left: 0;
width: 100%;
top: 0;--> Added
color: white;--> Added
}
.head_img{
<--Margin Removed-->
font-size:1.5em;
line-height: 1em;
font-weight: bold;
font-style: italic;
color: #000000;
text-align:center;
}
WORKING FIDDLE
Now to make your image to hide in particular width you can use media queries something like this
#media (max-width: 768px) {
.head_img img{
display:none;
}
}
try this
body {
color: #202020;
font-size: 100%;
font-family: 'Maven Pro', sans-serif;
line-height: 1.4em;
min-height: 100%;
background-color: #fdfdfd;
}
.head_img {
margin-top: 10%;
font-size: 1.5em;
line-height: 1em;
font-weight: bold;
font-style: italic;
color: #000000;
text-align: center;
position: relative;
}
.head_img p {
left: 0;
width: 100%;
position: absolute;
bottom: 5px;
margin: 0;
color: #fff;
}
<body class="body">
<div class="head_img">
<div style="text-align:center;">
<img style="min-width:50%; min-height:60%;" src="http://i.imgur.com/H56PB85.jpg" />
</div>
<p>display this text over the image
<br>and at the bottom part of the image</br>
</p>
</div>
</body>
i have added
top: 394px;
color: #fff;
in .head_img p jsfiddle
body {
background-color: #fdfdfd;
color: #202020;
font-family: "Maven Pro",sans-serif;
font-size: 100%;
line-height: 1.4em;
min-height: 100%;
}
.innerimg {
background: url("http://i.imgur.com/H56PB85.jpg") no-repeat scroll center center rgba(0, 0, 0, 0);
border: 2px solid;
height: 500px;
width: 500px;
}
.head_img {
color: #000000;
font-size: 1.5em;
font-style: italic;
font-weight: bold;
line-height: 1em;
margin: 0 auto;
text-align: center;
width: 500px;
}
.head_img p {
display: table-cell;
height: 480px;
text-align: center;
vertical-align: bottom;
width: 500px;
}
<body class ="body">
<div class ="head_img">
<div class="innerimg" style="text-align:center;">
<p> display this text over the image <br> and at the bottom part of the image</br></p>
</div>
</div>
</body>
add HTML tags
<h2><span>display this text over the image <br> and at the bottom part of the image</span></h2>
CSS
h2 span {
color: white;
font: bold 24px/45px Helvetica, Sans-Serif;
letter-spacing: -1px;
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.7);
padding: 10px;
}
h2 {
position: absolute;
top: 200px;
left: 0;
width: 100%;
}
i have updated the code in this FIDDLe
I've been trying to center text and put more text in the same line right next to it, while keeping the whole thing centered on the first text and not the whole line. Is there an easy way to do this?
All the solutions that I tried so far were either centering on the whole line or failed to put everything on the same line. Of course I also searched through stackoverflow but could not find a solution.
I've made this as a mockup: http://jsfiddle.net/mzqC5/
The way it should behave is that the alignment is centered on "A" and not the whole line. I'd appreciate any help with it since I've been trying to solve this for a good time now.
Thank you very much.
<div class="centered">A<div class="subtext">[24]</div>
.centered {
font-family: Meiryo, sans-serif;
font-size: 75px;
text-align: center;
color: black;
background-color: cornflowerblue;
max-width: 175px;
margin: 0 auto;
}
.subtext {
font-family: Arial;
font-size: 24px;
display: inline-block;
}
One way to achieve this is to absolutely position [24] with the relatively-positioned A.
.centered {
font-family: Meiryo, sans-serif;
font-size: 75px;
text-align: center;
color: black;
background-color: cornflowerblue;
max-width: 175px;
margin: 0 auto;
position: relative;
}
.subtext {
font-family: Arial;
font-size: 24px;
display: inline-block;
position: absolute;
bottom: 24px;
}
Because the element is absolutely-positioned it is not in the document-flow and doesn't affect the text-alignment.
You can adjust bottom to move it higher up.
You could set it up like this (red line added just to demonstrate page center):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
div {
text-align: center;
height: 100%;
}
span {
position: relative;
}
b {
position: absolute;
left: 100%;
font-weight: normal;
}
html, body {height: 100%;}
body {padding: 0; margin: 0;}
div::after {content: ''; height: 100%; width: 2px; background: red; left: 50%; margin-left: -1px; position:absolute;}
</style>
</head>
<body>
<div>
<span>
A
<b>[24]</b>
</span>
</div>
</body>
</html>