This question already has answers here:
How can I position my div at the bottom of its container?
(25 answers)
Closed 3 years ago.
that creates a centered list of buttons. Unfortunately at the top of the page.
<html>
<head>
<style>
#test {
display: table;
margin: 0 auto;
bottom: 5em;
}
.mybtn .button {
background-color: orange;
border: 1px solid green;
width: 120px;
color: white;
font-size: 14px;
padding: 10px;
text-align: center;
text-decoration: none;
display: block;
}
</style>
</head>
<body>
<div id="test">
<div class="mybtn">
<button class="button">Result</button>
<button class="button">Result</button>
<button class="button">Result</button>
<button class="button">Result</button>
</div>
</div>
</body>
</html>
any reason why bottom: 5em does not work ?
as a beginner in css I would appreciate any hint on why I need also to set .mybtn make the css work !
Just place position:relative
<html>
<head>
<style>
#test {
position: relative;
display: table;
margin: 0 auto;
bottom: 5em;
}
.mybtn .button {
background-color: orange;
border: 1px solid green;
width: 120px;
color: white;
font-size: 14px;
padding: 10px;
text-align: center;
text-decoration: none;
display: block;
}
</style>
</head>
<body>
<div id="test">
<div class="mybtn">
<button class="button">Result</button>
<button class="button">Result</button>
<button class="button">Result</button>
<button class="button">Result</button>
</div>
</div>
</body>
</html>
Related
There is link outside Image, want to make whole div area (image) clickable
<div class="desty_block">
<figure><img src="image"></figure>
<div class="detail">
<h3>India</h3>
</div>
</div>
Tricked some css, but not covering whole area clickable.
.desty_block {position: relative;}
.detail {
position: absolute;
top: 95px;
left: 0;
width: 100%;
height: 100%;
text-align: center;
}
Note: After this post, did some dig and here is css
working example
.desty_block h3 {margin: 0 0 0px 0;}
.desty_block h3 a {
color: #ffffff;
display: block;
position: absolute;
top: 0;
left: 0;
text-align: center;
width: 100%;
height: 100%;
z-index: 100;
padding-top: 7rem;
}
.desty_block{position: relative;}
Still doubt if it will work on all device ?
Any idea
Thanks
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.card {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
width: 40%;
}
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
.container {
padding: 2px 16px;
}
* {
margin: 0;
}
html {
padding: 20px;
font: 12px/20px Arial, sans-serif;
}
div {
}
h1 {
font: inherit;
font-weight: bold;
}
#div6 {
z-index: 3;
position: absolute;
top: 30%;
left: 15%;
width: 150px;
border: 1px dashed #009;
background-color: #ddf;
text-align: center;
}
</style>
</head>
<body>
<h2>Card</h2>
<div class="card">
<a href="http://google.com">
<img src="https://icon-library.com/images/avatar-icon-images/avatar-icon-images-4.jpg" alt="Avatar" style="width:100%">
<div id="div3">
<div id="div6">
<h1>Division Element #6</h1>
<code>position: absolute;<br/>
z-index: 3;</code>
</div>
</a>
</div>
</div>
</body>
</html>
Wrap the entire div with an anchor tag. Try the following (assuming the desty_block div contains image + text):
<a href="#">
<div class="desty_block">
<figure><img src="image"></figure>
<div class="detail">
<h3>India</h3>
</div>
</div>
</a>
The CSS display: works for the text elements, but it is not doing anything for <i> element. I am able to move it with float: right which is where I need it to be on my div but then the padding is off and a headache to deal with! Any feedback would be greatly appreciated :)
Part of my code is below:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
<script src="https://use.fontawesome.com/37471687aa.js"></script>
</head>
<body>
<section class="container">
<nav>
<div class="arrow-left">
<i class="fa fa-chevron-left fa-inverse fa-2x" aria-hidden="true"></i>
</div>
</nav>
<section class="restaurant-list">
<div class="location">
<div class="content">
<h1>Bakalaki Greek Taverna</h1>
<h3>Seng Poh Road 3, Singapore</h3>
</div>
<div class="arrow">
<i class="fa fa-chevron-right fa-2x" aria-hidden="true"></i>
</div>
</div>
</section>
</section>
</body>
</html>
CSS:
body {
background-color: #333;
font-family: sans-serif;
font-size: 10px;
}
.container {
margin: 0 auto;
width: 420px;
}
nav {
box-sizing: border-box;
background-color: #000;
padding: 10px 0 15px 15px;
width: 100%;
}
.restaurant-list {
margin: 0 auto;
width: 100%;
}
.location {
box-sizing: border-box;
background-color: #aaa;
border: .02px solid #333;
margin: 0%;
padding: 10px 10px 0 10px;
width: 100%;
float: left;
}
.location:hover {
background-color: #888;
}
.content {
display:block;
}
.content h1 {
font-size: 18px;
font-weight: bolder;
}
.content h3 {
font-size: 12px;
padding-top: 5px;
}
.arrow {
display: inline-block;
}
I feel like I am missing some detail here when I use display: inline-block on element arrow. I know the .arrow works because float: right; works for it. I don't know what I am missing here. I need the text to be on left of div and the arrow to be on the right.
if I understand you correctly, this will solve your problem :
Css:
.location {
box-sizing: border-box;
background-color: #aaa;
border: .02px solid #333;
margin: 0%;
padding: 10px 10px 0 10px;
width: 100%;
/* You can solve the problem with Display flex. */
display: flex;
justify-content: space-between;
align-items: center;
}
Could you please try the following codes?
What I added are:
Add float: left; in the css class .content;
Add float: right; in the css class .arrow;
body {
background-color: #333;
font-family: sans-serif;
font-size: 10px;
}
.container {
margin: 0 auto;
width: 420px;
}
nav {
box-sizing: border-box;
background-color: #000;
padding: 10px 0 15px 15px;
width: 100%;
}
.restaurant-list {
margin: 0 auto;
width: 100%;
}
.location {
box-sizing: border-box;
background-color: #aaa;
border: .02px solid #333;
margin: 0%;
padding: 10px 10px 0 10px;
width: 100%;
float: left;
}
.location:hover {
background-color: #888;
}
.content {
float: left;
display:block;
}
.content h1 {
font-size: 18px;
font-weight: bolder;
}
.content h3 {
font-size: 12px;
padding-top: 5px;
}
.arrow {
float: right;
display: inline-block;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
<script src="https://use.fontawesome.com/37471687aa.js"></script>
</head>
<body>
<section class="container">
<nav>
<div class="arrow-left">
<i class="fa fa-chevron-left fa-inverse fa-2x" aria-hidden="true"></i>
</div>
</nav>
<section class="restaurant-list">
<div class="location">
<div class="content">
<h1>Bakalaki Greek Taverna</h1>
<h3>Seng Poh Road 3, Singapore</h3>
</div>
<div class="arrow">
<i class="fa fa-chevron-right fa-2x" aria-hidden="true"></i>
</div>
</div>
</section>
</section>
</body>
</html>
I have a couple of issues with this code:
1. The fourth div is being seemingly squished. Its height is smaller than the other divs.
2. The height of the container div doesn't change to 50%. I used wv, but I'm not sure why % doesn't work.
https://codepen.io/anon/pen/drERNr
.container {
background: blue;
width: 75%;
height: 50vw;
}
.box {
width: 20%;
background: #333;
color: white;
font-size: 25px;
font-family: 'helvetica';
border: 1px solid blue;
margin: 2px;
float: left;
text-align: center;
}
#box4 {
width: 20%;
background: #333;
color: white;
font-size: 25px;
font-family: 'helvetica';
border: 1px solid blue;
margin-top: 2px;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="index.css">
<title>prac</title>
</head>
<body>
<div class="container">
<div id="one" class="box">
<p>One</p>
</div>
<div id="two" class="box">
<p>Two</p>
</div>
<div id="three" class="box">
<p>Three</p>
</div>
<div id="box4">
<p>four</p>
</div>
</div>
</body>
</html>
Your fourth element is being squashed because you float the first three elements to the left, but don't 'reset' the float. This can be achieved with a clearfix:
#box4:before {
content: "";
display: table;
clear: both;
}
.container {
background: blue;
width: 75%;
height: 50vw;
}
.box {
width: 20%;
background: #333;
color: white;
font-size: 25px;
font-family: 'helvetica';
border: 1px solid blue;
margin: 2px;
float: left;
text-align: center;
}
#box4:before {
content: "";
display: table;
clear: both;
}
#box4 {
width: 20%;
background: #333;
color: white;
font-size: 25px;
font-family: 'helvetica';
border: 1px solid blue;
margin-top: 2px;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="index.css">
<title>prac</title>
</head>
<body>
<div class="container">
<div id="one" class="box">
<p>One</p>
</div>
<div id="two" class="box">
<p>Two</p>
</div>
<div id="three" class="box">
<p>Three</p>
</div>
<div id="box4">
<p>four</p>
</div>
</div>
</body>
</html>
As for why you can't use % on the .container, it's because percentage-based units inherit their value from the immediate parent (and chain upwards), yet <body> has no fixed height defined. You need a calculated height on the parent in order for the child to be able to calculate its own height as a percentage.
I am trying to create a vertical line with a text in the middle. I don't know how to achieve this in css.
See image
Actually, many ways.
One of them:
html
<div class="wrapper">
<div class="line"></div>
<div class="wordwrapper">
<div class="word">or</div>
</div>
</div>
css
.wrapper {
position: relative;
width: 250px;
height: 300px;
border: 1px dashed #ccc;
margin: 10px;
}
.line {
position: absolute;
left: 49%;
top: 0;
bottom: 0;
width: 1px;
background: #ccc;
z-index: 1;
}
.wordwrapper {
text-align: center;
height: 12px;
position: absolute;
left: 0;
right: 0;
top: 50%;
margin-top: -12px;
z-index: 2;
}
.word {
color: #ccc;
text-transform: uppercase;
letter-spacing: 1px;
padding: 3px;
font: bold 12px arial,sans-serif;
background: #fff;
}
See example: http://jsfiddle.net/zmBrR/22/
Here's a way to do it with no background image. It's pretty reliant on a fixed height; you'd have to use display: table-cell to have it align vertically perfectly.
http://jsfiddle.net/mstauffer/uyTB7/
HTML:
<div class="container">
<div class="side">Left side</div>
<div class="or">
<div class="or-line"></div>
<div class="or-label">Or</div>
</div>
<div class="side">Right side</div>
</div>
CSS:
.container {
padding: 1em;
}
.side, .or {
float: left;
height: 6em;
text-align: center;
}
.side {
width: 40%;
}
.or {
position: relative;
width: 20%;
}
.or-line {
float: left;
width: 50%;
border-right: 1px solid #aaa;
height: 6em;
}
.or-label {
background: #fff;
color: #aaa;
height: 1em;
left: 50%;
margin-left: -1.25em;
margin-top: 2em;
padding: .5em;
position: absolute;
text-transform: uppercase;
width: 1em;
}
Essentially, you're using .or-line to create a line at 50%; you're setting .or to position: relative; to contain the absolutely positioned .or-label; and you're manually positioning .or-label at 50% in the middle, and then adjusting it back across the line with a negative left margin. Then you're also expanding its size with padding and bumping it down vertically with the margin-top.
this is the solution with flex box:
https://jsfiddle.net/1z0runv9/1/
.wrapper {
width: 200px;
height: 200px;
display: flex;
justify-content: center;
}
.or-separator {
display: flex;
flex-direction: column;
align-items: center;
color: #d3d7da;
}
.vertical-line {
border-left: 1px solid #d3d7da;
flex-grow: 1;
width: 1px;
}
<div class="wrapper">
<div class="or-separator">
<div class="vertical-line"></div>
<div>Or</div>
<div class="vertical-line"></div>
</div>
</div>
Put a <div> around the markup and use CSS like this:-
<div class="verticalLine">
some other content
</div>
in cSS:-
.verticalLine {
border-left:thick solid #ff0000;
}
OR you can try this:-
<style type="text/css">
#your_col {
border-left: 1px solid black;
}
</style>
<div id="your_col">
Your content here
</div>
You can use jquery to do the same thing. Import jquery cdn in your HTML document
select the required item and write a javascript code for that.
consider this example
<!DOCTYPE html>
<html>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<title>Todo list</title>
<style type="text/css">
.completed{
color: gray;
text-decoration: line-through;
}
</style>
</head>
<body>
<div id="container">
<h1>Todo List</h1>
<input type="text" >
<ul>
'enter code here'
<li>aaa </li>
<li>bbb </li>
<li>ccc </li>
</ul>
</div>
<script type="text/javascript" >
`enter code here`
$("li").click(function () {
$(this).css("color","gray");
$(this).css("text-decoration","line-through");
});
or
$("li").click(function () {
$(this).toggleClass("completed");
});
</script>
</body>
</html>
In this example line is passed over the list(li) elements.
Regardless of the question asked, i am here going for a rather simple approach in both directions.
.demo-body{
height: 400px;
}
.line-wrapper{
background: black;
width: 2px;
height: 100%;
position: relative;
}
.line-wrapper .word{
position: absolute;
background: white;
top: 50%;
transform: translate(52%,-50%);
right: 50%;
padding-top: 10px;
padding-bottom: 10px;
font-size: 13px;
}
.line-wrapper .word.vertical{
writing-mode: tb-rl;
}
<div class="demo-body">
<!-- HORIZONTAL TEXT -->
<div class="line-wrapper">
<div class="word">OR</div>
</div>
<br>
<!-- VERTICAL TEXT -->
<div class="line-wrapper">
<div class="word vertical">OR</div>
</div>
</div>
you can archive it by using flexbox for example
body {
position: relative;
height: 100vh;
}
.vertical {
position: absolute;
left: 50%;
top: 0;
bottom: 0;
transform: translateX(-10px);
width: 20px;
display: flex;
flex-direction: column;
align-items: center;
font-size: 18px;
color: #999;
}
.vertical .line {
width: 1px;
flex: 1;
background: #999;
}
<div class="vertical">
<div class="line"></div>
<div class="text">OR</div>
<div class="line"></div>
</div>
I have some problems with <div>s. The inner <div> (content div) won't push the outer <div> (wrap_content).
Let me post the code so that you have a chance to see what could be wrong.
style.css
* {
padding: 0px;
margin: 0px;
}
body {
background: #e2e2e2;
color: #f2f2f2;
font-family: Arial;
}
#wrap_design {
width: 1139px;
}
#wrap_content {
float: right;
max-width: 963px;
height: 100%;
border-right: 8px solid #2d2828;
border-left: 8px solid #2d2828;
border-bottom: 8px solid #2d2828;
padding-bottom: 10px;
}
#header {
height: 236px;
width: 963px;
background-color: #2d2828;
}
#headerimg{
z-index: 1;
margin-left: -26px;
}
#loggedin_box {
min-height: 230px;
width: 160px;
background: #2d2828;
float: left;
margin-top: 236px;
position: static;
padding-bottom: 5px;
}
#loggedin_box_green {
height: 30px:
width: 150px;
background: #73aa09;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
padding-right: 5px;
margin-left: 10px;
margin-top: 10px;
margin-bottom: 10px;
margin-right: 10px;
letter-spacing: 2px;
}
#loggedin_box ul {
border: none;
}
#loggedin_box ul li {
list-style: none;
text-align: left;
}
#loggedin_box ul li a {
font-family: Arial;
font-size: 14px;
color: #b1b2b2;
text-decoration: none;
padding-left: 5px;
}
#menu_container {
margin: 0px 0px 0px 0px;
background: #2d2828;
font-family: Arial;
width: 100%;
margin: 0px auto;
height: 65px;
}
#content {
color: black;
vertical-align: top;
height: 100%;
margin-bottom: 10px;
clear: both;
}
#content-sidebar {
border-left: 2px solid #2d2828;
float: right;
width: 285px;
max-width: 285px;
height: 100%;
}
index.php
<html>
<head>
<link rel="shortcut icon" href="images/nfgico.ico" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="/style/style.css" type="text/css" />
</head>
<body>
<CENTER>
<div id="wrap_design">
<div id="loggedin_box">
<?php
if($_SESSION['username'] == "") {
?>
<div id="loggedin_box_green">Log ind</div>
<div style="text-align: left; padding-left: 10px;">
<form action="login_check.php" method="post">
<input type="text" value="Brugernavn" name="username" style="width: 140px;" onclick="this.value=''"><br /><br />
<input type="password" value="password" name="password" style="width: 140px;" onclick="this.value=''"><br /><br />
<font style="font-family: Arial; font-size: 12px;">Husk mig:</font><input style="margin-left:15px;" type="checkbox" name="rememberme" class="checkbox" value="1" /><br /><br />
<input type="submit" value="Log ind"><br /><br />
</form>
<ul>
<li>Glemt kodeord</li>
<li>Opret bruger</li>
</ul>
</div>
<?php
} else {
?>
<div id="loggedin_box_green">Network</div>
<ul>
<li>Wall</li>
<li>Profil</li>
<li>Chat</li>
<li>Achievements</li>
<li>Clanside</li>
<li>Søg modstander</li>
<li>Søg spil</li>
<li>Log ud</li>
</ul>
<?php
}
?>
</div>
<div id="wrap_content"> <!-- This is the one that needs to be pushed -->
<div id="header">
<img src="/images/banner.png" id="headerimg">
</div>
<div id="menu_container">
<div id="droplinetabs1" class="droplinetabs">
<ul>
<li><span>Forside</span></li>
<li><span>Nyheder</span>
<ul>
<li>Seneste</li>
<li>lol</li>
<li>loool</li>
<li>loool</li>
</ul>
</li>
<li><span>Artikler</span></li>
<li><span>Spil</span></li>
<li><span>Turneringer</span></li>
<li><span>Clan</span></li>
<li><span>Streams</span></li>
<li><span>Webshop</span></li>
</ul>
</div>
</div>
<!-- Content/brødtekst -->
<div id="content">
CONTENT GOES HERE THIS IS WHAT NEED TO PUSH
</div>
</div>
</CENTER>
</body>
</html>
There is some part of the code from index.php that I didn't post because I hope you don't need it :)
I really hope someone can help me!
ps. I have done some research on the internet, and learned that I should use clear: both; but I really can't get it to work.
Remove the height: 100% from your #wrap_content style (it's causing problems), and then to ensure it wraps around any float elements, add width and overflow as folows:
#wrap_content {
float: right;
max-width: 963px;
border-right: 8px solid #2d2828;
border-left: 8px solid #2d2828;
border-bottom: 8px solid #2d2828;
padding-bottom: 10px;
width: auto; /* Must use this for overflow to do what you want */
overflow: hidden; /* This, plus width, causes box to stretch around floated elements inside of it */
}
Just as a little note, there's a fair amount of unnecessary css going on in there. I'd encourage you to go through it carefully and modify/remove it. You could do what you are after with half of the amount of css.
REMOVE all of the "height:100%;" everywhere - if does not do what you think it does.
I would suggest removing your CENTER and making your #wrap_design be like this:
#wrap_design
{
margin: 0 auto;
width: 1139px;
}
This will center your wrapper - I'd strongly advise against CENTER. If you want to change the margin top of this wrapper (ie 20px from top and bottom) do this margin: 20px auto;.
You don't need to use clear: both; necessarily. In a wrapper of a float (or multiple floats) you can just put overflow: hidden (same effect) and no additional markup is needed:
<style type="text/css">
.container
{
background: #CCC;
border: 1px solid #ddd;
overflow: hidden;
width: 400px;
}
.left
{
float: left;
}
.right
{
float: right;
}
</style>
<div class="container">
<div class="left">
this will float left
</div>
<div class="right">
this will float left
</div>
</div>
If you didn't have the "overflow: hidden" in this example you wouldn't see the "#CCC" background color in the .container.
This is the same as doing clear way (but again above is better because less markup):
<style type="text/css">
.container
{
background: #CCC;
border: 1px solid #ddd;
width: 400px;
}
.left
{
float: left;
}
.right
{
float: right;
}
.clear
{
clear: both;
}
</style>
<div class="container">
<div class="left">
this will float left
</div>
<div class="right">
this will float left
</div>
<div class="clear"></div>
</div>
Clear method is good in a case like this (when you want a child "outside of the parent"):
<style type="text/css">
.container
{
background: #CCC;
border: 1px solid #ddd;
margin: 50px auto;
width: 400px;
}
.left
{
float: left;
}
.right
{
background-color: #333;
color: #FFF;
float: right;
margin: -10px -40px 0 0;
}
.clear
{
clear: both;
}
</style>
<div class="container">
<div class="left">
this will float left
</div>
<div class="right">
this will float left
</div>
<div class="clear"></div>
</div>
But again, I wouldn't recommend that markup, if your design could be different you can use clear like this too:
<style type="text/css">
.container
{
background: #CCC;
border: 1px solid #ddd;
margin: 50px auto;
width: 400px;
}
.left
{
float: left;
width: 200px;
}
.right
{
background-color: #333;
color: #FFF;
float: right;
margin: -10px -40px 0 0;
width: 240px;
}
.full
{
background: #f5f5f5;
clear: both;
margin: 20px auto;
text-align: center;
width: 90%;
}
</style>
<div class="container">
<div class="left">
this will float left
</div>
<div class="right">
this will float left
</div>
<div class="full">
this is full sized
</div>
</div>
If you follow these example, you should solve your problem :)