I have a problem with html. I am trying to set a html line and on that line I have to set a div with text. Here is the example, but it is a photo. I would like to get this in html.
I hope someone can help me.
Edit:
I know how to get a line in html and I know how to get this yellow div with the text. The problem is. How do I get the yellow div on the line. This is my current result.
You can do this with Flexbox and pseudo-elements. Here is Fiddle
.element {
display: flex;
align-items: center;
}
.price {
background: #FEC538;
font-size: 30px;
font-weight: bold;
padding: 10px 40px;
border-radius: 50px;
}
.element:before,
.element:after {
content: '';
flex: 5;
height: 3px;
background: #C3C3C3;
}
.element:after {
flex: 1;
}
<div class="element">
<div class="price">Save 35%</div>
</div>
This will do it
<div class='c1'>
<span>save 35%</span>
</div>
.c1{
position:relative;
text-align:center;
}
.c1:before{
content:'';
height:2px;
width:100%;
background:#CDCCCD;
position:absolute;
top:50%;
left:0;
margin:-1px 0 0;
}
.c1 span{
display:inline-block;
padding:5px 15px;
background:#FEC538;
border-radius:20px;
position:relative;
}
see it here : https://jsfiddle.net/IA7medd/6tonuvg6/
That will do..
Html
<div class="center-div"></div>
**Css**
body
{
background-color: #fcfcfc;
}
.center-div
{
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100px;
height: 100px;
background-color: #ccc;
border-radius: 3px;
}
Set width, and set margin:auto;.
div.c2 {
margin:auto;
width:80px;
text-align:center;
/*color*/
background-color: #FEC538;
border-radius: 10px;
}
<div>
<div class=c2>Save 35%</div>
<div>
Related
I want my divs(.give, .sep, .take) to fill its parent(.trade)'s width.
HTML code:
<div class="trade">
<div class="give"></div>
<div class="sep"></div>
<div class="take"></div>
</div>
CSS code:
.trade {
position: relative;
width: 90%;
height: 80px;
border: 1px solid black;
}
.give,
.take {
height: 100%;
display: inline-block;
}
.sep {
width: 20px;
height: 100%;
border-left: 1px solid black;
border-right: 1px solid black;
display: inline-block;
}
But, .give,.take{width:auto;} did not fill it.
I also tried:
.give,
.take {
position:absolute;
width:50%;
}
.sep {
position:absolute;
left:50%;
transform:translate(-50%,0);
}
.give {
left: 0;
}
.take {
right: 0;
}
But .give and .take invaded .sep's place.
How can I make it? I don't want to use Javascript if possible.
+) .give{margin-right:10px;} .take{margin-left:10px;} or .give{padding-right:10px;} .take{padding-left:10px;} didn't work and just expanded their width.
Is this the intended result? flexbox makes this fairly straightforward... The borders and the padding on .trade are for visual aid only
.trade{
display:flex;
flex-direction:row;
justify-content:space-around;
align-content:center;
border:1px solid red;
padding:1rem;
margin:0 auto;
float:none;
width:80%;
height:10rem;
}
.trade div{
border:1px solid black;
flex:1
}
.trade div:before{
content:attr(class)
}
<div class="trade">
<div class="give"></div>
<div class="sep"></div>
<div class="take"></div>
</div>
As said by G-Cyrillus, you shouldn't try to hack with float. inline-block is also completely unecessary and far to complicated for your purpose in this case.
The real tool is Flexbox. Add .trade { display: flex; } to the CSS to use flexbox.
Then you can use .give, .take { flex-grow: 1; } to make them extend to fill the entire parents width equally. Instead of using margins to seperate your 3 child elements, you can use .trade { column-gap: 20px; } instead.
.trade {
position: relative;
width: 90%;
height: 80px;
border: 1px solid black;
display: flex;
column-gap: 20px;
}
.sep {
width: 20px;
}
.give,
.take {
flex-grow: 1;
}
/* added for demonstration */
.trade {
background-color: red;
}
.give,
.sep,
.take {
background-color: blue;
}
<div class="trade">
<div class="give"></div>
<div class="sep"></div>
<div class="take"></div>
</div>
I'm working on the main page of my website and want to display different kinds of square shape modules. Everything works fine until I use images on the modules. Whenever I add an img, the parent div changes position a few pixels down.
Here's my code:
HTML:
<div class="module-box">
<div class="module-dummy"></div>
<div class="module-body">
<a href="#post.linkToVideo">
<div class="play-button-div">
<img src=#Umbraco.Media(post.image).Url width="100%" height="100%" />
<span class="play-button-icon"><i class="fa fa-play" aria-hidden="true"></i></span>
</div>
</a>
</div>
</div>
CSS:
.module-box {
display: inline-block;
position: relative;
width: 100%;
}
.module-dummy {
margin-top: 100%;
}
.module-body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.play-button-div {
margin: 0 auto;
display:table;
position:relative;
}
.play-button-div img {
display:block;
margin: 0;
padding: 0;
position:relative;
}
.play-button-div i{
width: 100px;
height: 100px;
color: #0080ff;
background-color: #fff;
border-radius: 50px;
border: 3px solid #0080ff;
font-size: 70px;
text-align: center;
line-height:100px;
text-indent:15px;
opacity: .8;
}
.play-button-icon {
width: 100px;
height: 100px;
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
}
.play-button-div:hover img {
opacity: .6;
}
.play-button-div:hover i {
background-color: #0080ff;
color: #fff;
border: 3px solid #FFF;
}
I suppose you mean that the parent DIV becomes a little bit higher / pushes subsequent elements down by adding a little space below the image? In this case, you can add line-height: 0 to the image container (but only if there is no text in it).
On the other hand, if this is the CSS for your containers and images:
.play-button-div {
margin: 0 auto;
display:table;
position:relative;
}
.play-button-div img {
display:block;
margin: 0;
padding: 0;
position:relative;
}
, then you should change display:block; to display:table-cell; in .play-button-div img, and also add vertical-align: top; to it.
<!DOCTYPE html>
<html>
<head>
<style>
/* main elements */
div.body {
display: block;
background-color: Lavender;
border: 0px 20px 0px 20px;
max-width: 1100px;
margin-top: 10px;
margin-right:20px;
margin-left: 20px;
clear: both;
padding: 0px 20px 0px 20px;
}
body {
display: block;
background-color: Lavender;
border: 10px;
max-width:1100px;
margin: 0px 280px 0px 10px;
clear:both;
}
/*Body Divs*/
div.bodycontent{
display:block;
position:absolute;
top: 10px;
width: 1075px;
height: 470px;
background-color: MediumAquaMarine;
margin-right:0;
margin-left:0px;
bottom:10px;
}
div.body1 {
display: inline-block;
background-color: limegreen;
position: absolute;
top: 10px;
width:480px;
height:225px;
margin-left:10px;
padding: 0 10px 0 10px;
}
div.body2 {
display: inline-block;
background-color: Salmon;
position: absolute;
top: 10px;
width:525px;
height:225px;
margin-left:520px;
padding: 0 10px 0 10px;
}
div.body3 {
display: inline-block;
background-color: FireBrick;
position: absolute;
top: 250px;
width:530px;
height:205px;
margin-left:10px;
padding: 0 10px 0 10px;
}
div.body4 {
display: inline-block;
background-color: SeaGreen;
position: absolute;
top: 250px;
width:475px;
height:205px;
margin-left:570px;
padding: 0 10px 0 10px;
}
/*-----------------------------------------------------------------------*/
header {
background-color: Lavender;
}
/*header divs*/
div.header {
display:block;
position:absolute;
width: 1075px;
height:150px;
top:490px;
background-color: PaleGoldenRod;
margin-right:0;
margin-left: 0px;
}
div.backinfo {
display:inline-block;
background-color: lightblue;
position: absolute;
top:80px;
width:455px;
padding:10px 10px 10px 10px;
height:40px;
margin-right:900px;
margin-left:10px;
}
div.digitalbay {
display: inline-block;
background-color: coral;
position: absolute;
width:455px;
height:60px;
top:20px;
margin-top:-10px;
margin-right:560px;
margin-left:180px;
padding: 0 10px 0 10px;
}
div.nav {
display: inline-block;
position: absolute;
background-color: lightblue;
top:10px;
margin-right:0px;
margin-left:665px;
padding: 10px 0px 10px 0px;
height:110px;
width:395px;
}
div.contact {
display: inline-block;
background-color: Chocolate;
position: absolute;
top: 100px;
width:300px;
height:45px;
margin-right:550px;
margin-left:190px;
padding: 0 10px 0 10px;
}
div.contact2 {
display: inline-block;
background-color: DeepPink;
position: absolute;
top: 100px;
width:130px;
height:45px;
margin-right:550px;
margin-left:515px;
padding: 0 10px 0 10px;
}
</style>
</head>
<div class="bodydiv">
<header>
<div class="header">
<div class="backinfo">
</div>
<div class="digitalbay">
<h1>Digital Bay</h1>
</div>
<div class="nav">
</div>
</header>
<body>
<div class="bodycontent">
<div class="body1">
</div>
<div class="body2">
</div>
<div class="body3">
</div>
<div class="body4">
</div>
</div>
</body>
</div>
<aside>
<div class="extrainfo">
</div>
<div class="slideshow">
</div>
</aside>
<footer>
<div class="footer">
</div>
</footer>
</html>
In the elements above, where my <div class=digitalbay>element is located when compiled, the <h1>element nested in the div is too low in the element when compiled. I was wondering if there is a way to make it higher up the div. I already tried changing the margin, but it moves the div up along the page and that doesn't help.
Set a margin on the h1 and it will move up. Example:
h1 {
margin-top: 0.25em;
}
Your .header div has a top: 490px. That is why it is so low.
On other note, here's a bit of feedback on your CSS and HTML.
Never put the <body> tag inside a <div>... it is always supposed to be right after the <head> tag. When the browser parses the HTML, it'll auto correct that for you, but you will have bugs if you start expecting your body tag to be where it is now.
Don't write your CSS as follow div.className. Instead, simply use the class name without the element: .className. This will reduce specificity and make it easier to maintain as it grows. It'll also dramatically reduce your typing.
I don't know what your goal is in the end with this page, but it may be easier to not use position: absolute everywhere. Use position: relative instead.
In HTML, there is a tag called <main>. There can only be one per page, and I use it instead of your <div class="bodydiv">.
You are using <header> and <footer> and putting a <div> inside of it with a class of header and footer... Remove that and put your class directly on the <header> and <footer> tag.
Inside your <div class="bodycontent">, you could use the <section> tag instead of DIVs (if it is semantically correct in your case).
I am going to build this
This is my HTML code
<div class="al-head-container">
<div></div>
<span>Center Websites</span>
</div>
This is css :
.al-head-container{
margin: auto;
width: 100%;
padding:0 4%;
position: relative;
box-sizing: border-box;
}
.al-head-container > span{
font: 2.1em titr;
color: #ae7f00;
background-color: #FFFFFF;
position: absolute;
right: 0;
left:0;
}
.al-head-container > div{
width: 100%;
height: 20px;
background-image: url("../image/head-line.jpg");
position: relative;
top: 25px;
}
But this is the result of code
The problem is the span width is set to 100% and its width doesn't fit to its content. it is what I get from the firebug
As you see the text covers the DIV that contains the line.
I tried to set the display:inline-block for span but nothing changed. How do I can make the absolute positioned span width to fit the content?
Why not accomplish this purely in CSS with a single element:
div {
border-top:1px solid lightgrey;
border-bottom:3px solid lightgrey;
height:2px;
position:relative;
margin-top:15px;
}
div:after {
content:attr(data-label);
position:absolute;
top:-10px;
left:50%;
padding:0 20px;
display:inline-block;
background:#fff;
transform: translateX(-50%);
text-align:center;
color:#A37716;
font-size:24px;
}
<div data-label="Center Websites"></div>
I will suggest make a few changes on your code.
You can remove the div element and instead use a pseudo-element later with CSS
<div class="al-head-container">
<span>Center Websites</span>
</div>
Then with CSS make the pseudo-element be the absolute one to place it behind the span:
.al-head-container{
position:relative;
}
.al-head-container > span{
font: 2.1em titr;
position:relative;
z-index:10;
display:inline-block;
padding:0 20px;
height:2.1em;
line-height:2.1em;
color: #ae7f00;
background-color: #FFFFFF;
}
.al-head-container:after{
content:"";
width: 100%;
top:50%;
transform:translateY(-50%);
border-top:dotted 3px red;
position: absolute;
left:0;
}
Check this Demo on Jsfiddle
Note that you can replace the border on the fiddle with your background image
Try this:
.fancy {
line-height: 0.5;
text-align: center;
}
.fancy span {
display: inline-block;
position: relative;
}
.fancy span:before,
.fancy span:after {
content: "";
position: absolute;
height: 5px;
border-bottom: 3px solid gray;
border-top: 1px solid gray;
top: 0;
width: 600px;
}
.fancy span:before {
right: 100%;
margin-right: 30px;
}
.fancy span:after {
left: 100%;
margin-left: 30px;
}
<div class="subtitle fancy">
<span>Center Websites</span>
</div>
Also here you have a working fiddle
try to add margin auto on absolute span
.al-head-container > span{
font: 2.1em titr;
color: #ae7f00;
background-color: #FFFFFF;
position: absolute;
right: 0;
left:0;
margin : auto;
}
Both the left and right panels have a height of 100%, but since the Header div takes up X amount of space, there is some vertical scrolling in the window that I want to get rid of.
How can I remove that vertical scrolling?
JSFiddle: http://jsfiddle.net/G7unG/1/
CSS and HTML
html, body{
height: 100%;
margin: 0;
}
.header{
background: #333;
padding: 15px;
text-align:center;
font-size: 18px;
font-family: sans-serif;
color: #FFF;
}
.leftpanel, .rightpanel{
height: 100%;
}
.leftpanel{
float: left;
width: 70%;
background: #CCC;
}
.rightpanel{
float: left;
width: 30%;
background: #666;
}
<div class="header">Header</div>
<div class="leftpanel">Left Panel</div>
<div class="rightpanel">Right Panel</div>
<div class="clearfix"></div>
Here's a modern solution using flexbox. Regardless of the height of the header the rest of the elements will stretch vertically to fill the remaining space. Here's the fiddle: http://jsfiddle.net/mggLY/1/.
HTML:
<div id = "wrapper">
<div class="header">Header</div>
<div>
<div class="leftpanel">Left Panel</div>
<div class="rightpanel">Right Panel</div>
</div>
</div>
CSS:
* {
margin: 0;
padding: 0;
border: 0;
}
html, body {
height: 100%;
}
.header{
background: #333;
padding: 15px;
text-align:center;
font-size: 18px;
font-family: sans-serif;
color: #fff;
}
.leftpanel{
background: #CCC;
}
.rightpanel{
background: #666;
}
#wrapper {
height: 100%;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
outline: 1px solid red;
}
#wrapper > .header {
-webkit-flex: 0 0 auto;
flex: 0 0 auto;
}
#wrapper > .header + div {
-webkit-flex: 1 1 auto;
flex: 1 1 auto;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
}
#wrapper > .header + div > div:first-of-type {
-webkit-flex: 7 0 0;
flex: 7 0 0;
}
#wrapper > .header + div > div:last-of-type {
-webkit-flex: 3 0 0;
flex: 3 0 0;
}
You can use absolute positioning if you want to have it 100% height always. And then use scroll bars if required inside the leftpanel or the rightpanel.
Example: http://jsfiddle.net/G7unG/2/
html, body{
height: 100%;
margin: 0;
}
.header{
background: #333;
padding: 15px;
text-align:center;
font-size: 18px;
font-family: sans-serif;
color: #FFF;
height: 22px;
}
.leftpanel, .rightpanel{
top: 52px;
bottom: 0;
position: absolute;
}
.leftpanel{
width: 70%;
left: 0;
background: #CCC;
}
.rightpanel{
width: 30%;
right: 0;
background: #666;
}
Solution 2 - use fixed percentages for height: http://jsfiddle.net/G7unG/4/
html, body{
height: 100%;
margin: 0;
}
.header{
background: #333;
padding: 15px;
text-align:center;
font-size: 18px;
font-family: sans-serif;
color: #FFF;
height: 30%;
box-sizing: border-box;
}
.leftpanel, .rightpanel{
height: 70%;
float: left;
}
.leftpanel{
width: 70%;
left: 0;
background: #CCC;
}
.rightpanel{
width: 30%;
float: right;
background: #666;
}
You could use overflow: hidden; to protect the body to be scrollable.
according to your comment: http://jsfiddle.net/G7unG/9/
Like this: http://jsfiddle.net/G7unG/3/
html, body{
height: 100%;
margin: 0;
overflow:hidden;
}
You could use a "faux columns" type of structure -- adding the background color of your columns as "fixed" elements (they wont scroll with the page) behind your real columns.
<div id="left_faux"></div>
<div id="right_faux"></div>
div#left_faux {
position: fixed;
top:0;
left:0;
right:30%;
bottom:0;
background-color:#CCC;
}
div#right_faux {
position: fixed;
top:0;
left:70%;
right:0;
bottom:0;
background-color:#666;
}
.leftpanel{
float: left;
width: 70%;
}
.rightpanel{
float: left;
width: 30%;
}
This quick example is perhaps overly verbose, for demonstration purposes. I'm sure you can streamline the CSS so there aren't so many redundant definitions.
WORKING EXAMPLE
Use viewports. Browsers now support giving height a percentage of page height. Drop the 100 down to 80 if you've got a header taking up space.
div {
height:100vh;
}