I'd like to have a div, which contains:
Text on the top
Some image below it
How I may make it? Here's what I did so far
.container {
text-align: center;
display: inline-block;
width: 100%;
height: 180pt;
border: 1px solid red;
}
.text {
width: 12%;
height: 180px;
text-align: left;
background-color: yellow;
margin: 20px;
}
.text p {
font-size: 20px;
margin-left: 0 auto;
margin-right: 0 auto;
margin-top: 15px;
text-align: center;
}
.image {
width: 100%;
height: 100%;
display: inline-block;
background-image: url("url_to_img");
background-size: cover;
background-repeat: no-repeat;
}
<div class="container">
<div class="text">
<p>Lorem</p>
<div class="image"></div>
</div>
</div>
For now, the <p> is working just fine, but I have struggle with the image it's sticking out the borders of container div.
It's because you gave the test class too much margin. try not to mix up size units if possible.
add overflow:hidden; on .text class
.container {
text-align: center;
display: inline-block;
width: 100%;
height: 180pt;
border: 1px solid red;
}
.text {
width: 19%;
height: 180px;
text-align: left;
background-color: yellow;
margin: 10px;
overflow:hidden;
}
.text p {
font-size: 20px;
margin-left: 0 auto;
margin-right: 0 auto;
margin-top: 1px;
text-align: center;
}
.image {
width: 100%;
height: 100%;
display: inline-block;
background-image: url("https://avatars.mds.yandex.net/get-pdb/1380368/3e559dd1-32ad-4226-aac5-77ed3782a962/s1200");
background-size: cover;
background-position:center;
background-repeat: no-repeat;
}
<div class="container">
<div class="text">
<p>Lorem</p>
<div class="image"></div>
</div>
</div>
Here is a fiddle to get you started with, I didn't change much code because I didn't new your requirements Just did workaround around same code
https://jsfiddle.net/junaidmasoodi/vctwu2g5/11/
.text {
width: 100%;
height: 180px;
text-align: left;
background-color: yellow;
margin: 20px;
}
.text p {
font-size: 20px;
margin-left: 0 auto;
margin-right: 0 auto;
margin-top: 15px;
text-align: center;
}
.image {
width: 100%;
height: 100%;
display: block;
background-image: url("https://309w5s255371fs4df2vftgbl-wpengine.netdna-ssl.com/wp-content/uploads/2017/09/placeholder.jpg");
background-size: cover;
background-repeat: no-repeat;
}
for your .image block you could try background-size: contain; instead of cover
Related
I have a div with a margin containing an image. I want to put another div inside that div and position it to the bottom of the parent div (Like even to the margin). However I'm unable to do that.
.headermario {
background-image: url("resources/banner.png");
background-size: 600px;
background-repeat: no-repeat;
background-position: bottom;
background-color: red;
height: 200px;
width: 90%;
margin-bottom: 100px;
border-style: solid;
border-width: 10px;
}
.topnav {
overflow: hidden;
display: flex;
justify-content: center;
}
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
<div class="marioHeader">
<h1 class="title">Super Mario</h1>
<div class="headermario">
<div class="topnav">
About
History
</div>
</div>
</div>
It looks like this:
But I want it to look like this:
css solution would be like:
.headermario {
background-image: url("resources/banner.png");
background-size: 600px;
background-repeat: no-repeat;
background-position: bottom;
background-color: red;
height: 200px;
width: 90%;
position: relative;
margin-bottom: 100px;
border-style: solid;
border-width: 10px;
}
.topnav {
overflow: hidden;
display: flex;
justify-content: center;
position: absolute;
bottom: -40px;
}
otherwise you also could place the .topnav in the .marioHeader (pull it out of the .headermario class) and adjust it there. But to write this I require styling information of the .marioHeader class
The easiest way I can think of is with flex
.headermario {
background-image: url("resources/banner.png");
background-size: 600px;
background-repeat: no-repeat;
background-position: bottom;
background-color: red;
height: 200px;
width: 90%;
margin-bottom: 100px;
border-style: solid;
border-width: 10px;
display: flex;
flex-direction: column-reverse
}
I'm trying to set div's position like this:
but i can't set image (green box) in position.
orange box is on top
blue and lightgreen div are buttons
red frame is static distant under orange box
green box is link with image inside, covering partly blue and lightgreen buttons.
every links must stay clickable every time.
I can't centering green image and set it above orange div partly.
Example code here
<div class="header-container">
<div class="nav-container">
<div class="logo">
Click!
</div>
<div class="nav">
Click!
</div>
</div>
<div class="header-image">
<div class="image">
Click!
</div>
</div>
<div class="menu-container">
Click!
</div>
.nav-container{
width: 100%;
height: 50px;
background: orange;
}
.logo{
width: 25%;
height: 40px;
margin: 5px;
background-color: lightblue;
float: left;
}
.nav{
width: 25%;
height: 40px;
margin: 5px;
background-color: lightgreen;
float: right;
}
.header-image{
width: 100%;
border: 1px solid green;
position: relative;
z-index: 2;
text-align: center;
}
.image{
height: 100px;
width: 60%;
background: green;
opacity: 0.6;
}
.header-image a{
padding: 40px 0;
}
.menu-container{
width: 100%;
border: 1px red solid;
height: 40px;
margin-top: 50px;
}
I've uploaded your jsfiddle here.
Addded the following css:
.header-image {
position: absolute;
top: 40px;
left: 20%;
}
also added extra margin-top for the .menu-container
.menu-container {
margin-top: 80px; //instead of 50px
}
I've positioned it absolute because this way it will go wherever you want it based on the body relative positioning.
adding this to image should work:
margin:0 auto;
position:relatve;
z-index:66;
margin-top:-10px
http://jsfiddle.net/o3oyuzb9/2/
try this
only changed the css
body,html{margin: 10px;}
.header-container{
width: 100%;
}
a{
text-decoration:none;
color:#000;
padding: 10px 0px;
display: block;
text-align: center;
}
.nav-container{
width: 100%;
height: 50px;
background: orange;
}
.logo{
width: 25%;
height: 40px;
margin: 5px;
background-color: lightblue;
float: left;
}
.nav{
width: 25%;
height: 40px;
margin: 5px;
background-color: lightgreen;
float: right;
}
.header-image{
width: 100%;
border: 1px solid green;
position: relative;
z-index: 2;
text-align: center;
}
.image{
height: 100px;
width: 60%;
margin: 0 auto;
margin-top: -20px;
background: green;
opacity: 0.6;
}
.header-image a{
padding: 40px 0;
}
.menu-container{
width: 100%;
border: 1px red solid;
height: 40px;
margin-top: 50px;
}
just add this to your image class:
margin: 0 auto;
margin-top: -20px;
The below code works as intended (full width background image, with horizontally and vertically aligned text overlapping it), but I want to make a couple of changes. Instead of having a background image for #banner, I want to switch it to a color, and add a div before .teaser that is width: 1366px, height: 100% of parent, and includes a background image set to cover. I still need .teaser vertically aligned though. I've been struggling with this for awhile, so any help would be very much appreciated. http://jsfiddle.net/exczzyje/
HTML
<div id="banner">
<div id="valign">
<div class="teaser">
<h1>Title</h1>
<p>Tagline</p>
</div>
</div>
</div>
CSS
html, body {
width: 100%;
height: 100%;
}
#banner {
width: 100%;
height: 67%;
height: calc(67% - 123px);
background: #000 url('images/banner.jpg') 50% 0 no-repeat;
background-size: cover;
margin: 0 auto;
overflow: hidden;
padding: 0;
position: relative;
}
#banner[id] {
display: table;
position: static;
}
#banner #valign {
width: 100%;
position: absolute;
text-align: center;
top: 50%;
}
#banner #valign[id] {
display: table-cell;
position: static;
vertical-align: middle;
}
#banner .teaser {
width: 960px;
margin: -12px auto 0 auto;
padding: 21px 0;
position: relative;
top: -50%;
}
#banner .teaser h1 {
color: #fff;
font-size: 45px;
}
#banner .teaser h1:after {
content: "";
display: block;
width: 42px;
margin: 18px auto;
border-bottom: 3px solid #bfbfbf;
}
#banner .teaser p {
color: #808080;
font-size: 24px;
margin: 0;
text-align: center;
}
Are you looking for something like this:
See JSFiddle
CSS:
* {
margin: 0; padding: 0;
}
html, body {
width: 100%;
height: 100%;
}
#banner {
width: 100%;
height: 100%;
background-color: black;
padding: 0;
}
#banner #valign {
width: 100%;
height: 100%;
}
#newDiv {
height: 100%;
width: 1366px;
display: table;
margin: 0 auto;
background: #000 url('http://www.psdgraphics.com/file/colorful-triangles-background.jpg') 50% 0 no-repeat;
background-size: cover;
}
#banner .teaser {
display: table-cell;
width: 960px;
margin: 0 auto;
padding: 21px 0;
text-align: center;
vertical-align: middle;
}
#banner .teaser h1 {
color: #fff;
font-size: 45px;
}
#banner .teaser h1:after {
content: "";
display: block;
width: 42px;
margin: 18px auto;
border-bottom: 3px solid #bfbfbf;
}
#banner .teaser p {
color: #808080;
font-size: 24px;
margin: 0;
}
Just add a container around the outside instead.
Updated HTML
<div id="container">
<div id="banner">
<div id="valign">
<div class="teaser">
<h1>Title</h1>
<p>Tagline</p>
</div>
</div>
</div>
</div>
Updated CSS
#container {
width: 100%;
height: 67%;
height: calc(67% - 123px);
background: #000;
margin: 0 auto;
}
#banner {
width: 1366px;
height: 100%;
background: #000 url('images/banner.jpg') 50% 0 no-repeat;
background-size: cover;
margin: 0 auto;
overflow: hidden;
padding: 0;
position: relative;
}
Ii's been a while since I programmed a website and it seems that I have forgot some basic concepts about FLOAT!
Can anyone help making this (on picture) layout using 4 divs and FLOAT?
I have tried this:
<header>
<div id="fill_left"></div>
<div id="top"></div>
<div id="fill_right"></div>
<div id="bottom"></div>
</header>
And CSS:
header {
width: 100%;
height: 9em;
background-color: lightblue;
}
#fill_left{
width: 5%;
height: 100%;
background-color: lightcoral;
float: left;
}
#top{
width:80%;
height: 50%;
background-color: lightgray;
float: left;
}
#bottom{
width:80%;
height: 50%;
background-color: lightseagreen;
float: left;
}
#fill_right{
width: 5%;
height: 100%;
background-color: lightcoral;
float: left;
}
And of course they're all inside a wrapper{ width: 100%, height: 138px}
Thanks
You could do it by using an extra div to warp div-2 and div-3 by set float: left;
JSFiddle - DEMO or Full Screen View
HTML:
<div id="div-p">
<div id="div-1"></div>
<div id="div-c">
<div id="div-2"></div>
<div id="div-3"></div>
</div>
<div id="div-4"></div>
</div>
CSS:
body {
margin:0;
}
#div-p {
width: 100%;
height: 138px;
}
#div-c {
width: 90%;
height: 138px;
float: left;
}
#div-1 {
width: 5%;
float: left;
height: 100%;
background: red;
}
#div-2 {
width: 100%;
height: 50%;
background: green;
}
#div-3 {
width: 100%;
height: 50%;
background: blue;
}
#div-4 {
width: 5%;
float: left;
height: 100%;
background: black;
}
Solution 2:
You could also do it by using display: inline-block; and set font-size:0px; to #div-p for remove the white-space and then set font-size: 16px; (i.e 16px = 1em) to child elements.
JSFiddle - DEMO or Full Screen View
body {
margin:0;
}
#div-p {
width: 100%;
height: 138px;
font-size: 0px;
}
#div-c {
width: 90%;
height: 138px;
display: inline-block;
font-size: 16px;
}
#div-1 {
width: 5%;
display: inline-block;
height: 100%;
background: red;
font-size: 16px;
}
#div-2 {
width: 100%;
height: 50%;
background: green;
}
#div-3 {
width: 100%;
height: 50%;
background: blue;
}
#div-4 {
width: 5%;
display: inline-block;
height: 100%;
background: black;
font-size: 16px;
}
That simple Notice the order: http://jsbin.com/liqulo/1/edit
<div id="fill_left"></div>
<div id="fill_right"></div>
<div id="top"></div>
<div id="bottom"></div>
CSS:
#fill_left,
#fill_right{
width: 5%;
height: 100%;
background-color: lightcoral;
}
#fill_left{ float: left; }
#fill_right{ float: right; } /* and notice Float Right */
But if I were you I would do it even simpler: http://jsbin.com/liqulo/2/edit
<header>
<div class="cont" id="top"></div>
<div class="cont" id="bottom"></div>
</header>
header {
width: 100%;
height: 9em;
background-color: lightcoral;
}
.cont{
width:90%;
height: 50%;
margin:0 auto;
}
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;
}