I am trying to place a fully responsive text box in the centre of the page inside of an image. I haven't had any trouble placing the text box on the image but for some reason I am having trouble centring the box. I have tried reviewed and looked over multiple tutorials and stack overflow answers but nothing has been helpful. I have tried both width: 50% and margins but neither have worked. Attached below is my code. Again, I am fully aware that there are multiple answers to this question but none seem to work. Thanks a lot for the help it is highly appreciated!
<html>
<head>
<style>
.back {
min-width: 100%;
}
.title {
font-size: 90px;
color: white;
font-family: 'Oswald', sans-serif;
text-align: center;
margin-top: -483px;
}
.square {
position: relative;
width: 50%;
background-color: white;
border: 8px solid #686868;
height: 100px;
text-align: center;
margin-top: 225px;
}
.square:after {
content: "";
display: block;
padding-bottom: 100%;
}
.content {
position: absolute;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<img src="orilliaback.jpg" class="back" height=500 />
<div class="title">Orillia, Ontario</div>
<div class="square">
<div class="content">
Welcome to Orillia!
</div>
</div>
</body>
</html>
Again, thank you very much!
Add margin:0 auto to .square :
.square {
position: relative;
width: 50%;
background-color: white;
border: 8px solid #686868;
height: 100px;
text-align: center;
margin-top: 225px;
margin: 0 auto;/*/<-------------Added/*/
}
Full Code:
.back {
min-width: 100%;
}
.title {
font-size: 90px;
color: white;
font-family: 'Oswald', sans-serif;
text-align: center;
margin-top: -483px;
}
.square {
position: relative;
width: 50%;
background-color: white;
border: 8px solid #686868;
height: 100px;
text-align: center;
margin-top: 225px;
margin: 0 auto;
}
.square:after {
content: "";
display: block;
padding-bottom: 100%;
}
.content {
position: absolute;
width: 100%;
height: 100%;
}
<img src="http://www.mrwallpaper.com/wallpapers/cute-bunny-1600x900.jpg" class="back" height=500 />
<div class="title">Orillia, Ontario</div>
<div class="square">
<div class="content">
Welcome to Orillia!
</div>
</div>
Just use flex-box ;)
More info: link
<html>
<head>
<style>
.back {
min-width: 100%;
}
.title {
font-size: 90px;
color: white;
font-family: 'Oswald', sans-serif;
text-align: center;
margin-top: -483px;
}
.square {
position: relative;
width: 50%;
background-color: white;
border: 8px solid #686868;
height: 100px;
text-align: center;
margin-top: 225px;
}
.square:after {
content: "";
display: block;
padding-bottom: 100%;
}
.content {
position: absolute;
width: 100%;
height: 100%;
display:flex;
justify-content: center;
flex-direction: column
}
</style>
</head>
<body>
<img src="orilliaback.jpg" class="back" height=500 />
<div class="title">Orillia, Ontario</div>
<div class="square">
<div class="content">
Welcome to Orillia!
</div>
</div>
</body>
</html>
Related
I have an item has position: absolute in a container. I centered it by left: 50% and transform: translateX(-50%);. This item just contain text and i want it cover it's content and the text will nowrap as much as possible.
As we can see in the snipet below, the item have enough space but it did not increase width. It broke line. I know i can add white-space: nowrap to stop it breaking line but if the text is longer, one line can not wrap all text.
Adding width: 100% to item can not help because I want the width of item is dynamic base on it's content.
.container {
width: 300px;
height: 200px;
border: solid 1px #123;
position: absolute;
}
.item {
position: absolute;
top: 20px;
left: 50%;
transform: translateX(-50%);
background-color: #303030;
color: #FFF;
border-radius: 20px;
padding: 8px 16px;
}
<div class="container">
<div class="item">
<span>Hello. Its me. How are you?</span>
</div>
</div>
It this what you want? Use left: 0, right: 0 instead to center it then move your other styles in span.
.container {
width: 300px;
height: 200px;
border: solid 1px #123;
position: absolute;
}
.item {
position: absolute;
top: 20px;
left: 0;
right: 0;
text-align: center;
}
.item .content {
display: inline-block;
width: auto;
height: auto;
background-color: #303030;
color: #FFF;
border-radius: 20px;
padding: 8px 16px;
}
<div class="container">
<div class="item">
<div class="content">
<span>Hello. Its me. How are you?</span>
</div>
</div>
</div>
Would flexbox work for you?
.container {
width: 300px;
height: 200px;
border: solid 1px #123;
display: flex;
justify-content: center;
align-items: center;
}
.item {
background-color: #303030;
color: #FFF;
border-radius: 20px;
padding: 8px 16px;
}
<div class="container">
<div class="item">
<span>Hello. Its me. How are you? Hello. Its me. How are you? Hello. Its me. How are you? </span>
</div>
</div>
Please try this.
.container {
width: 300px;
height: 200px;
border: solid 1px #123;
position: relative;
}
.item {
margin-top: 20px;
display: flex;
justify-content: center;
}
.item span{
background-color: #303030;
color: #FFF;
border-radius: 20px;
padding: 8px 16px;
}
<div class="container">
<div class="item">
<span>Hello. Its me. How are you?</span>
</div>
</div>
Try adding center align for span tag
.container {
width: 300px;
height: 200px;
border: solid 1px #123;
position: absolute;
}
.item {
position: absolute;
top: 20px;
left: 0;
right: 0;
width: auto;
text-align: center;
}
.item .itemInner {
background-color: #303030;
color: #FFF;
border-radius: 20px;
padding: 8px 16px;
text-align: left;
margin: 0 auto;
}
<html>
<head>
</head>
<body>
<div class="container">
<div class="item">
<span class="itemInner">Hello. Its me.</span>
</div>
</div>
</body>
</html>
So i'm trying to have a div with text appear on a parent div when a mouse hovers the parent, all was going well and good until I encountered a problem where the text ("VISIT") was no longer centering when the font size is changed to be larger.
.project-box {
width: 1000px;
background-color: white;
height: 350px;
margin: auto;
box-shadow: 0px 2px 5px 0px #737373;
}
.project-image {
width: 400px;
height: 260px;
margin-left: 30px;
background-color: #f1f1f0;
position: relative;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
}
.slidein-content {
display: none;
background-color: #ff9933;
z-index: 1;
width: 400px;
height: 50px;
position: absolute;
bottom: 0;
text-align: center;
}
.project-image:hover .slidein-content {
display: block;
}
.visit {
font-family: 'Montserrat', sans-serif, Arial;
color: white;
letter-spacing: 1px;
font-size: 2em;
<div class="project-box">
<div class="project-image">
<div class="slidein-content">
<p class="visit">VISIT</p>
</div>
</div>
</div>
As you can see, the text "VISIT" is aligned properly horizontally, but not vertically. Anyone know a solution?
Try using a <span> element instead of a <p> element. So modify your code to this:
<div class="project-box">
<div class="project-image">
<div class="slidein-content">
<span class="visit">VISIT</span>
</div>
</div>
</div>
That should help center it or at least get you in the right direction. I tested this on jsfiddle here. You may need to play around with the margin or padding a bit, but the problem you're having is because of the <p> element.
Set a line-height=0 on .visit
.project-box {
width: 1000px;
background-color: white;
height: 350px;
margin: auto;
box-shadow: 0px 2px 5px 0px #737373;
}
.project-image {
width: 400px;
height: 260px;
margin-left: 30px;
background-color: #f1f1f0;
position: relative;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
}
.slidein-content {
display: none;
background-color: #ff9933;
z-index: 1;
width: 400px;
height: 50px;
position: absolute;
bottom: 0;
text-align: center;
}
.project-image:hover .slidein-content {
display: block;
bottom:0;
}
.visit {
font-family: 'Montserrat', sans-serif, Arial;
color: white;
letter-spacing: 1px;
font-size: 2em;
line-height:0;
<div class="project-box">
<div class="project-image">
<div class="slidein-content">
<p class="visit">VISIT</p>
</div>
</div>
</div>
Add top:50%; and transform: translateY(-50%); to .slidein-content, erase the bottom:0 from it and add amargin: 0 to .visit (I don't know from where, but it has a 32px top- and bottom-margin, which you have to reset to 0 that way.)
.project-box {
width: 1000px;
background-color: white;
height: 350px;
margin: auto;
box-shadow: 0px 2px 5px 0px #737373;
}
.project-image {
width: 400px;
height: 260px;
margin-left: 30px;
background-color: #f1f1f0;
position: relative;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
}
.slidein-content {
display: none;
background-color: #ff9933;
z-index: 1;
width: 400px;
height: 50px;
position: absolute;
top:50%;
transform: translateY(-50%);
text-align: center;
}
.project-image:hover .slidein-content {
display: block;
}
.visit {
font-family: 'Montserrat', sans-serif, Arial;
color: white;
letter-spacing: 1px;
font-size: 2em;
line-height: 2em;
margin: 0;
}
<div class="project-box">
<div class="project-image">
<div class="slidein-content">
<p class="visit">VISIT</p>
</div>
</div>
</div>
I have a page where I'm displaying the status of two websites -- as in if they're currently up and running, or not. If the site is up, I want the block to have a light green background, and if not, a light red one. And the site's name should be centered inside the block.
This is what I've tried so far:
body {
font-family: sans-serif;
}
#container {
width: 800px;
height: 600px;
margin: 0 auto;
border: 1px solid #ccc;
}
#smallcontainer {
width: 208px;
height: 100px;
margin: 200px auto auto;
}
.status {
height: 100px;
width: 100px;
background: #efefef;
float: left;
margin-left: 2px;
border: 1px solid #ccc;
}
<div id="container">
<div id="smallcontainer">
<div class="status"></div>
<div class="status"></div>
</div>
</div>
It works (see full screen output), but I feel like I'm way off. How do I do something simple as this using CSS, the correct way? I feel like my code is a hack. And how would you write the text exactly in the center of the block, vertically and horizontally?
And is it possible to have it such a way that it works across all desktop screen sizes? Maybe I should specify width and height in percentage as opposed to pixels?
You can use flexbox. support
HTML
<div id="container">
<div class="status"></div>
<div class="status"></div>
</div>
CSS
#container {
width: 800px;
height: 600px;
margin: 0 auto;
border: 1px solid #ccc;
display: flex;
align-items: center;
justify-content: center;
}
.status {
height: 100px;
width: 100px;
background: #efefef;
margin-left: 2px;
border: 1px solid #ccc;
}
http://jsfiddle.net/b9n3h1en/
Try this Fiddle, aligned text vertically and horizontally in center of the div.
body {
font-family: sans-serif;
}
#container {
width: 800px;
height: 600px;
margin: 0 auto;
border: 1px solid #ccc;
}
#smallcontainer {
width: 208px;
height: 100px;
text-align: center;
margin: 200px auto auto;
}
.status {
height: 100px;
width: 100px;
background: #efefef;
float: left;
margin-left: 2px;
border: 1px solid #ccc;
line-height: 100px;
}
Try this jsfiddle
body {
font-family: sans-serif;
}
#container {
width: 100%;
height: 400px;
margin: 0 auto;
border: 1px solid #ccc;
position:relative;
}
#smallcontainer {
width: 208px;
height: 100px;
position:absolute;
left:50%;
top:50%;
margin-left:-100px;
margin-top:-50px;
}
.status {
height: 100px;
width: 100px;
background: #efefef;
float: left;
margin-left: 2px;
border: 1px solid #ccc;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-box-pack: center;
-webkit-box-align: center;
display: -moz-box;
-moz-box-orient: vertical;
-moz-box-pack: center;
-moz-box-align: center;
display: box;
box-orient: vertical;
box-pack: center;
box-align: center;
text-align:center;
}
Also see more about "display:flexbox"
https://developer.mozilla.org/en-US/docs/Web/CSS/display
Here's how I'd do it:
HTML:
<div id="container">
<div id="smallcontainer">
<div class="status">
<div class="border">
<div class="txt">Text Here</div>
</div>
</div>
<div class="status">
<div class="border">
<div class="txt">More Text Here</div>
</div>
</div>
</div>
</div>
CSS:
* {
box-sizing: border-box;
}
body {
font-family: sans-serif;
}
#container {
width: 95%;
height: 400px;
margin: 0 auto;
border: 1px solid #ccc;
position: relative;
}
#smallcontainer {
width: 208px;
height: 100px;
margin: 0 auto;
position: relative;
top: 50%;
transform: translateY(-50%);
}
.status {
height: 100%;
width: 50%;
float: left;
text-align: center;
padding: 2px;
}
.border {
background: #efefef;
border: 1px solid #ccc;
width: 100%;
height: 100%;
position: relative;
}
.txt {
position: relative;
top: 50%;
transform: translateY(-50%);
}
See the fiddle here: http://jsfiddle.net/bootsified/kf7Lbq24/
You can add negative margins to each of the divs you want to put exactly in the center. Note that for this the width and height should be in pixels.
body {
font-family: sans-serif;
}
#container {
width: 800px;
height: 600px;
border: 1px solid #ccc;
position: absolute;
left: 50%;
top: 50%;
margin-left: -400px;
margin-top: -300px;
}
#smallcontainer {
width: 208px;
height: 100px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -104px;
margin-top: -50px;
}
.status {
height: 100px;
width: 100px;
background: #efefef;
float: left;
margin-left: 2px;
border: 1px solid #ccc;
}
<div id="container">
<div id="smallcontainer">
<div class="status"></div>
<div class="status"></div>
</div>
</div>
Currently I am making a website. I input images into a div, and then text overlays that image to describe it. I put the text over the image, and then put a opacity of .5. The problem with my code is that the text will not scroll. The scroll is shown, but it will not work.
My HTML
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="style.css"/>
<style type="text/css">
<!--
body {
margin: 0px;
}
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="background">
<h10>.</h10>
</div>
<div id="header">
<div id="logobackground">
<img src="http://localhost/cabinchic/logo.png">
</div>
<div id="navbar">
<a href="http://localhost/cabinchic/home.html">
<div id="homebutton">
<h1> Home </h1>
</div>
</a>
<a href="http://localhost/cabinchic/homedecor.html">
<div id="homedecorbutton" style="border-radius: 8px; color: #00693E;;background-image: url(http://localhost/cabinchic/woodplankgreen.jpg)">
<h1> Home Decor </h1>
</div>
</a>
<a href="http://localhost/cabinchic/askheather.html">
<div id="askheatherbutton">
<h1> Ask Heather </h1>
</div>
</a>
</div>
</div>
<div id="leftbox">
</div>
<div id="mainbox">
<div class="picture" style="background-image: url(http://localhost/cabinchic/stones.jpg)">
<div class="text">
<h1> 26473264738654356427564 gyugfyubyeefwafwaf67erafh6ea7f67webf7bqyeuiewHFUIWhf78whiuNEuiwehui </h1>
</div>
</div>
</div>
<div id="footer">
<div id="footerborder">
<h10>.</h10>
</div>
<center>
<img src="http://localhost/cabinchic/logo.png" style="max-height: 18%; margin-top: -2%">
<div id="footertextcr"> <h1>All Rights Reserved © 2014 Python Daily</h1> </div>
<div id="footertext"> <h1>Logo made by Fatpaint | Site made by Michael Jones</h1> </div>
</center>
</div>
</div>
</body>
</html>
My CSS
/*Dartmouth Green Color Code Is #00693E*/
#background {
background-image: url("http://localhost/cabinchic/flatstone.jpg");
z-index: -10;
height: 160%;
width: 100%;
position: absolute;
}
#wrapper {
height: 100%;
width: 100%;
/*overflow-y: scroll;*/
position: absolute;
}
#header {
height: 100%;
width: 100%;
position: fixed;
}
#logobackground {
width: 100%;
background-image: url("http://localhost/cabinchic/wood.jpg");
text-align: center;
position: fixed;
margin-top: -3.8%;
}
#navbar {
height: 10%;
width: 100%;
background-image: url("http://localhost/cabinchic/woodbark.jpg");
margin-top: 13.6%;
position: fixed;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
#homebutton {
background-image: url("http://localhost/cabinchic/woodplank.jpg");
height: 10%;
width: 12%;
position: fixed;
margin-left: 19%;
text-align: center;
font-size: 80%;
color: black;
}
#homebutton:hover {
color: #00693E;
border-radius: 8px;
}
#homedecorbutton {
background-image: url("http://localhost/cabinchic/woodplank.jpg");
height: 10%;
width: 12%;
position: fixed;
margin-left: 44%;
text-align: center;
font-size: 80%;
color: black;
}
#homedecorbutton:hover {
color: #00693E;
border-radius: 8px;
}
#askheatherbutton {
background-image: url("http://localhost/cabinchic/woodplank.jpg");
height: 10%;
width: 12%;
position: fixed;
margin-left: 69%;
text-align: center;
font-size: 80%;
color: black;
}
#askheatherbutton:hover {
color: #00693E;
border-radius: 8px;
}
#leftbox {
width: 20%;
height: 105.8%;
position: absolute;
background-image: url("http://localhost/cabinchic/barkpine.jpg");
margin-top: 19%;
border-right: 1px solid black;
border-bottom: 1px solid black;
border-top: 1px solid black;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
z-index: -1;
background-size: 100%;
}
#mainbox {
width: 76%;
height: 100%;
position: absolute;
margin-top: 20.4%;
margin-left: 22%;
background-image: url("http://localhost/cabinchic/barkbrown.jpg");
border-radius: 8px;
border: 1px solid black;
/*background-size: 100%;*/
z-index: -1;
}
.picture {
border-radius: 6px;
border: 1px solid black;
background-size: cover;
position: absolute;
height: 55%;
width: 80%;
margin-left: 10%;
border-bottom-right-radius: 0px;
max-height: 55%;
z-index: 1;
}
.text {
overflow-y: scroll;
width: 100%;
height: 20%;
max-height: 20%;
background-color: black;
color: white;
opacity: .5;
border-top: 2px solid white;
margin-top: 34.3%;
font-size: 60%;
z-index: 2;
position: relative;
}
#footer {
width: 100%;
margin-top: 70%;
background-image: url("http://localhost/cabinchic/wood.jpg");
border-bottom: 1px solid black;
}
#footerborder {
width: 100%;
height: 2%;
margin-top: 40%;
background-image: url("http://localhost/cabinchic/woodbark.jpg");
}
#footertextcr {
color: white;
font-size: 50%;
margin-top: -3.5%;
}
#footertext {
color: white;
font-size: 40%;
margin-top: -1%;
}
a, u {
text-decoration: none;
}
Sorry that there is no spacing in the CSS code it didn't paste right...
Problem #1:
Your header has a height of 100%, a width of 100%, and is fixed over the page, thus covering the div and scroll bars and removing the ability to scroll.
Problem #2:
The container for the text, #mainbox has a z-index of -1, thus putting it and its children behind of everything else:
#mainbox {
width: 76%;
height: 100%;
position: absolute;
margin-top: 20.4%;
margin-left: 22%;
background-image: url("http://localhost/cabinchic/barkbrown.jpg");
border-radius: 8px;
border: 1px solid black;
/*background-size: 100%;*/
}
JSFiddle Demo
For some reason, I can't figure out why there is like an 8px spacing below this image within a div. check it out:
If you look at the bottom of the image, there's about an 8px space, how can i get rid of it?
.side {
margin-top: 40px;
float: right;
}
.sidehead {
width: 260px;
height: 27px;
}
.sidecont {
background-color: #394d49;
width: 258px;
height: auto;
border: 1px solid #6b958b;
margin-top: -1px;
margin-bottom: 20px;
vertical-align: middle;
}
<!----HTML BELOW---->
<div class="sidecont">
<center><img src="images/rankings.jpg"></center>
</div>
Here's the entire code, if anyone needs it:
body {
background-image: url('images/bg.png');
background-color: #5a6a7a;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center top;
}
.wrap {
width: 960px;
margin: auto;
}
.head {
width: 960px;
height: 60px;
margin-top: 33px;
}
.head img {
float: left;
}
.head .home img { background: url('images/home.jpg'); width: 116px; height: 60px; }
.head .register img { background: url('images/register.jpg'); width: 116px; height: 60px; }
.head .forum img { background: url('images/forum.jpg'); width: 116px; height: 60px; }
.head .banner img { background: url('images/banner.jpg'); width: 263px; height: 60px; }
.head .chat img { background: url('images/chat.jpg'); width: 116px; height: 60px; }
.head .downloads img { background: url('images/downloads.jpg'); width: 116px; height: 60px; }
.head .donate img { background: url('images/donate.jpg'); width: 117px; height: 60px; }
.head .home img:hover { background: url('images/homehover.jpg'); width: 116px; height: 60px; }
.head .register img:hover { background: url('images/registerhover.jpg'); width: 116px; height: 60px; }
.head .forum img:hover { background: url('images/forumhover.jpg'); width: 116px; height: 60px; }
.head .chat img:hover { background: url('images/chathover.jpg'); width: 116px; height: 60px; }
.head .downloads img:hover { background: url('images/downloadshover.jpg'); width: 116px; height: 60px; }
.head .donate img:hover { background: url('images/donatehover.jpg'); width: 117px; height: 60px; }
.logo {
background-image: url('images/logo.png');
width:250px;
height: 110px;
display:block;
position:absolute;
left:0;
right:0;
bottom:0;
margin: -85px auto;
z-index: 1;
}
.main {
margin-top: 40px;
float: left;
clear: both;
}
* {
margin: 0;
padding: 0;
}
.mainhead {
background-image: url('images/content.jpg');
height: 27px;
width: 680px;
}
.maincont {
background-color: #394d49;
width: 668px;
border: 1px solid #6b958b;
margin-top: -1px;
height: auto;
word-wrap: break-word;
padding: 5px;
}
.side {
margin-top: 40px;
float: right;
}
.sidehead {
width: 260px;
height: 27px;
}
.sidecont {
background-color: #394d49;
width: 258px;
height: auto;
border: 1px solid #6b958b;
margin-top: -1px;
margin-bottom: 20px;
vertical-align: middle;
}
.footer {
background-image: url('images/footer.jpg');
width: 960px;
height: 19px;
margin-top: 20px;
font-size: 11.6px;
font-family: 'MS Serif';
text-align: center;
color: #dfd591;
text-shadow: 0 1px 2px black;
line-height: 19px;
}
__
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="wrap">
<div style="position:relative;">
<div class="logo"></div>
</div>
<div class="head">
<div class="home"><img></div>
<div class="register"><img></div>
<div class="forum"><img></div>
<div class="banner"><img></div>
<div class="chat"><img></div>
<div class="downloads"><img></div>
<div class="donate"><img></div>
</div>
<div class="main">
<div class="mainhead"></div>
<div class="maincont">
</div>
</div>
<div class="side">
<div class="sidehead"><img src="images/servinfo.jpg"></div>
<div class="sidecont">asdf</div>
<div class="sidecont">
<center><img src="images/rankings.jpg"></center>
</div>
<div class="sidehead"><img src="images/partners.jpg"></div>
<div class="sidecont">
<center><img src="images/epvp.jpg"></center>
</div>
</div>
<div style="clear:both;"></div>
<div class="footer"></div>
</div>
</body>
An image is an inline element, which means that it is placed on the baseline of the text. There is space below the baseline in a text block, for characters with descenders like p and g. It's that space that creates the spacing below the image.
You can make the image a block element to avoid that space, and don't use the deprecated center tag, use margins to center the image:
HTML:
<div class="sidecont">
<img src="images/rankings.jpg">
</div>
Add to the CSS:
.sidecont img { display: block; margin: 0 auto; }
no tag center <!doctype html> html5
<div class="sidecont">
<img src="images/rankings.jpg">
</div>
.sidecont {
margin: 0 auto;
background-color: #394d49;
width: 258px;
height: auto;
border: 1px solid #6b958b;
}