I am trying to display 3 divs like a horizontal line.
Like this:
This is my HTML :
<div class="notactive"></div>
<div class="notactive"></div>
<div class="notactive"></div>
This is my CSS so far:
.notactive {
height: 10px;
width: 90px;
background: #fff;
position: absolute;
//left: 200px;
bottom: 30px;
cursor: pointer;
float: left;
display: block-inline;
}
UPDATE :
.notactive {
height: 10px;
width: 90px;
background: #fff;
position: absolute;
//left: 200px;
bottom: 30px;
cursor: pointer;
float: left;
display: inline-block;
}
But I can't get it to work.
Hope someone will help me.
Thank you.
A few problems:
it's inline-block not block-inline
position:absolute, left, bottom is unnecessary
You were using white as that background for it so you might not have been able to see it
jsFiddle
.notactive {
height: 10px;
width: 90px;
background: #000;
cursor: pointer;
display: inline-block;
}
There is another method using float:left; but inline-block is sufficient for your needs.
jsFiddle
HTML
<div class="notactive"></div>
<div class="notactive"></div>
<div class="notactive"></div>
<div class="clear></div>
CSS
.notactive {
height: 10px;
width: 90px;
background: #000;
cursor: pointer;
float:left;
margin:2px;
}
EDIT: Here is a fix to your problem on the fiddle you put in comments. I wrapped the image and name in a div with a fixed height. That pushed them down.
There's an error in your code - it should be
display: inline-block;
I wouldn't use absolute position for this, try this:
.notactive {
height: 10px;
width: 90px;
background: #fff;
cursor: pointer;
float: left;
}
Yes display: inline-block is your best option.
Remove absolute positioning unless there is a specific reason for it.
.notactive:nth-child(1){left:0px;}
.notactive:nth-child(2){left:100px;}
.notactive:nth-child(3){left:200px;}
<html>
<head>
<style>
.left
{
width:33%;
background-color:cyan;
float:left;
height:200px;
}
.centre
{
background-color:red;
width:33%;
float:left;
height:200px;
}
.right
{
width:33%;
background-color:cyan;
float:left;
height:200px;
}
</style>
<body>
<div class="left"></div>
<div class="centre"></div>
<div class="right"></div>
</body>
</html>
try this coding that I have Created for you
<html>
<head>
<style>
.notactive1
{
height: 10px;
width: 90px;
background: Red;
position: absolute;
top:10px;
left:100px;
}
.notactive2
{
height: 10px;
width: 90px;
background: Red;
position: absolute;
top:10px;
left:200px;
cursor: pointer;
}
.notactive3
{
height: 10px;
width: 90px;
background: Red;
position: absolute;
top:10px;
left:300px;
cursor: pointer;
}
</style>
<body>
<div class="notactive1"></div>
<div class="notactive2"></div>
<div class="notactive3"></div>
</body>
</html>
Another Answer Hope You Statisfied by this ans......
<div>
<div style="display: inline-block;width:100px;height:100px;background-color:red;">DIV 1</div>
<div style="display: inline-block;width:100px;height:100px;background-color:green;">DIV 2</div>
<div style="display: inline-block;width:100px;height:100px;background-color:blue;">DIV 3</div>
</div>
Related
Here is the schema I'd like to have http://imgur.com/0CwOpVG
<div class='yellow/brown'>
<div class='green'>Some sentence</div>
<div class='blue_wrapper'>
<a>
<img src="" class="blue1">
</a>
<a>
<img class="blue2" src="">
</a>
</div>
</div>
Right now the whole set is as brown, but I want it to be like yellow. Here is the css:
.blue_wrapper{
position: relative; top: 0px; letter-spacing: 1px;
}
.yellow/brown{
border-bottom: 1px solid blacK;
padding: 20px;
}
.green{
letter-spacing: 0;
padding: 5px;
display:inline-block;
position: relative;
width: 100%;
}
.blue1, .blue2{
display: block;
float: right;
margin-bottom: 12px;
vertical-align: text-top;
width: 1.5vw;
}
I've tried this many times but always failed. Does anyone have any idea how? Thank you very much for your help...
You could approach it like this:
.wrap {
display: table;
table-layout:
fixed; width: 100%;
}
.images{
width: 20px;
}
.content, .images {
display: table-cell;
vertical-align: middle;
}
<div class='wrap'>
<div class='content'>Some sentence</div>
<div class='images'>
<a>
<img src="https://unsplash.it/20/20">
</a>
<a>
<img src="https://unsplash.it/20/20">
</a>
</div>
</div>
If I understand you correctly, you want your code to reflect the top image of the two in your link. The code is in the link below. It's rather simple. But I do want to warn you that the / operator is not a valid class naming (I forgot the word for that).
.green{
width:500px;
margin:0 auto;
}
.yellow{
letter-spacing: 0;
float:left;
padding: 5px;
display:inline-block;
position: relative;
width: 70%;
border:2px solid orange;
border-radius:10px;
}
.blue_wrapper{
float:left;
}
.blue1{
display: block;
vertical-align: text-top;
}
.blue2{
display: block;
vertical-align: text-top;
transform: rotate(180deg);
}
Here is your DEMO
I would like to position some DIV by it's distance from the right side of the container, or from the left side from the container, or centered; but everything without of excluding it from the flow, like absolute does.
Is it possible?
The only thing I can is centered. I can't believe this is not easily possible!
#outer {
position: relative;
width: 100%;
}
#first {
position: relative;
background-color: red;
width: 100px;
right: 10px;
}
#second {
position: relative;
background-color: green;
width: 100px;
}
#third {
position: relative;
background-color: yellow;
width: 100px;
margin-left: auto;
margin-right: auto;
}
The sample is here: https://jsfiddle.net/dimskraft/vm3Lg835/8/
If I make absolute position, another DIV starts to ignore absoluted one...
UPDATE
Visual explanation of what I want:
UPDATE 2
Incredible!
Isn't this task have simple solution? Without any cheating / hacking??
I just want to set distance from right side. Why can't I do this with ONE property???
This one do what you ask, keeping the flow and your original html structure.
I also added a "centered" div, which you commented might be needed.
(As per request, I added a second group of 3 div's in below sample using margins only, and here is also a fiddle: http://jsfiddle.net/qxvoLr5u/2/)
html, body {
margin: 0;
}
#outer {
width: 100%;
text-align: right;
}
#first {
display: inline-block;
width: 100px;
background-color: red;
text-align: left;
margin-right: 10px;
}
#second {
background-color: green;
width:100px;
text-align: left;
}
#third {
display: inline-block;
background-color: yellow;
width:100px;
text-align: left;
position: relative;
right: 50%;
margin-right: -50px;
}
/* sample 2 */
#outer2 div:before {
content: attr(class);
}
.div1 {
width: 100px;
margin-left: auto;
margin-right: 10px;
background-color: red;
}
.div2 {
width: 100px;
margin-right: auto;
background-color: green;
}
.div3 {
width: 100px;
margin-left: auto;
margin-right: auto;
background-color: yellow;
}
<div id="outer">
<div id="first">
</div>
<div id="second">
</div>
<div id="third">
</div>
</div>
<br />
<hr />
As per request, these 3 divs use margin only<br />
<hr />
<div id="outer2">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</div>
I would probably wrap it in another relative div that has text-align:right and then give first display:inline-block:
https://jsfiddle.net/aqvug8uj/2/
I think this is best solution https://jsfiddle.net/vm3Lg835/6/
CSS
#outer {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
}
#first {
background-color: red;
width:100px;
right:10px;
align-self: flex-end;
margin-right: 10px;
}
#second {
background-color: green;
width:100px;
}
I found your question to be a bit confusing, to be honest. If I have understood you correctly, aligning stuff the way you describe it is simple, to the point of being trivial, with float and clear.
#outer {
width=100%;
}
#first {
background-color: red;
width:100px;
float: right;
margin-right:10px;
}
#second {
background-color: green;
width:100px;
clear: right;
}
#third {
background-color: yellow;
width:100px;
margin-left: auto;
margin-right: auto;
}
Is that what you wanted to achieve? Here's the fiddle.
Use the following code:
HTML:
<div id="outer">
<div id="first"> </div>
<div id="second"> </div>
<div class="clearboth"></div>
</div>
CSS:
#outer {
position: absolute;
}
#first {
background-color: red;
width:100px;
float: left;
}
#second {
background-color: green;
width:100px;
float: right;
}
.clearboth
{
clear: both;
}
UPDATEDAdd margin-left: 100px; according to your need.
It should work for you.
Take a look
#outer {
position: relative;
width=100%;
}
#first {
margin-left:350px;
position: relative;
background-color: red;
width:100px;
right:10px;
float:left;
}
#second {
position: relative;
background-color: green;
width:100px;
float:left;
}
<div id="outer">
<div id="first"> </div>
<div id="second"> </div>
</div>
On image you can see 3 pictures, i want them to be hovered with text.
I'm pretty new in all of this CSS thingies. After you hover on 1 of three image text will appear, my problem is that i tried many thing, maybefault lays in position absolute?
HTML:
<div id="imgBackground"></div>
<div id="imgContainer">
<img src="images/coffee_01.jpg" />
<img src="images/coffee_02.jpg" />
<img src="images/coffee_03.jpg" />
</div>
CSS:
#imgBackground {
position: absolute;
width: 100%;
height: 300px;
background-color: rgb(244,244,244); }
#imgContainer {
position: relative;
margin: auto;
width: 980px;
padding: 30px; }
#imgContainer img {
margin: 0px 14px 0px 14px;
width: 295px;
height: 254px; }
Thanks guys but your answers haven't helped me much.
As you see in this code i tried to scretch a bit what i need, but take attention and move your mouse under the imgage on white space, it also hovering. How to fix this problem?
#wrapper .text {
position:relative;
bottom:221px;
left:0px;
width: 300px;
height: 200px;
background: rgba(0,0,0, .4);
text-align: center;
text-height: 50px;
visibility:hidden;
}
#wrapper:hover .text {
visibility:visible;
}
Here's my update:
http://jsfiddle.net/D5UEW/2/
I think this might cause it, any ideas ?
#edit
This code from my page:
.imgContainer {
position: relative;
margin: auto;
width: 295px;
height: 254px;
padding: 30px;
float: left;
}
.imgWrapper .text {
position:relative;
bottom:274px;
top: 10px;
width: 295px;
height: 254px;
background: rgba(0,0,0, .4);
text-align: center;
visibility:hidden;
}
.imgWrapper:hover .text {
visibility:visible;
}
And result on my page:
HTML:
<div id="wrapper">
<img src="http://placehold.it/300x200" class="hover" />
<p class="text">text</p>
</div>
CSS:
#wrapper .text {
position:relative;
bottom:30px;
left:0px;
visibility:hidden;
}
#wrapper:hover .text {
visibility:visible;
}
check demo here : http://jsfiddle.net/liccyfuentes/D5UEW/
LOne's answer is correct, but this works without you changing to much.
HTML:
<div id="imgContainer">
<li style="background-image:url('images/coffee_01.jpg')"><p>Some random text here...<p></li>
<li style="background-image:url('images/coffee_02.jpg')"><p>Some random text here...<p></li>
<li style="background-image:url('images/coffee_03.jpg')"><p>Some random text here...<p></li>
</div>
CSS:
#imgContainer {
position: relative;
margin: auto;
width: 980px;
color:#FFF;
padding: 30px;
}
#imgContainer li {
margin: 0px 14px 0px 14px;
width: 295px;
height: 254px;
list-style:none;
background:#000;
}
#imgContainer li * {
opacity:0; /* Visibility: hidden; works too! */
}
#imgContainer li:hover * {
opacity:1; /* Visibility: visible; works too! */
}
Codepen: http://codepen.io/anon/pen/bzIGl
I'm trying to get a layout to look like this following:
http://i42.tinypic.com/2i8wyrk.png
I've managed to get the "content" div aligned fine with the header div, but I'm not sure how to put the nav div in there and keep it aligned properly. This is what I have so far:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Page Title</title>
<style>
div#container {
position: relative;
}
body {
background-color: #121212
}
div#header {
background-color: #900;
width: 70%;
height: 10%;
border: 2px solid #488ed0;
margin: 0 auto;
}
div#nav {
position: absolute;
background-color: #900;
border: 2px solid #488ed0;
width: 150px;
height: 200px;
float: left;
}
div#content {
border: 2px solid #488ed0;
background-color: #900;
width: 70%;
height: 900px;
margin: 0 auto;
}
a {
color: #FFFFFF;
text-decoration: none;
}
a:hover {
color: #000000;
text-decoration: underline;
}
</style>
</head>
<body>
<div id = "container">
<div id="header">
<center><img src = "images/logo.png" /></center>
</div>
<br />
<div id="nav">
<center><br />
<a href='#'>Index</a><br />
<a href='#'>About</a><br />
<a href='#'>Contact</a>
</center>
</div>
<div id="content"></div>
</div>
</body>
</html>
How can I align the nav div as it is in the example mockup I made? I want to make sure the left side of 'nav' stays aligned with the header, and the right side of 'content' stays aligned with the right side of the header.
For nav I noticed that you are using position: absolute and a float: left;. While aligning might need a bit of tweaking the best solution I can think of is using float for both the nav and content. For example:
#header{
margin: 0 auto;
width: 800px;
height: 200px;
}
#container{
margin: 0 auto;
width: 800px;
height: auto;
}
#nav{
float: left;
width: 200px;
height: auto;
}
#content{
float: right;
width: 600px;
height: 500px;
}
.clear{
clear: both;
}
Of course adjust the widths, height and margins according to the spacing you would like.
<div id="header">This is my banner</div>
<div id="container">
<div id="nav">This is my navigation menu</div>
<div id="content">This is my content</div>
</div>
<div class="clear">
If you want to make sure that things stay aligned when adding a margin to the nav section use margin-right and if you want to add a margin to the content section use margin-left. Finally, if you need a space between the banner and the two section below it use margin-bottom inside the header CSS.
Here is a solution if you're looking for a liquid layout: http://jsfiddle.net/M78q4/1/
HTML
<div id="head">this</div>
<div id="container">
<div id="nav"></div><div id="content"></div>
</div>
CSS
div#container {
position: relative;
width: 75%;
margin: 0 auto;
}
body {
background-color: #121212
}
div#header {
background-color: #900;
width: 100%;
height: 10%;
border: 2px solid #488ed0;
margin: 0 auto;
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
div#nav {
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
background-color: #900;
border: 2px solid #488ed0;
width: 24%;
height: 200px;
float: left;
margin-right: 2%;
}
div#content {
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
border: 2px solid #488ed0;
background-color: #900;
width: 74%;
height: 900px;
float: left;
}
a {
color: #FFFFFF;
text-decoration: none;
}
a:hover {
color: #000000;
text-decoration: underline;
}
If you don't want it to be liquid just change the #container width to a fixed width like 800px. Adjust the margins as needed.
This should get the layout you're after: http://jsfiddle.net/WDvwP/
HTML
<div id="head"></div>
<div id="container">
<div id="nav"></div><div id="content"></div>
</div>
CSS
#head{
width:900px; height:100px;
background:#f00;
margin:10px auto;
}
#container{
width:900px; margin:0 auto;
}
#nav{
display:inline-block;
width:250px; height:300px;
background:#0f0;
}
#content{
display:inline-block;
width:600px; height:300px;
background:#00f;
margin:0 0 0 50px;
}
I am trying to achieve something like this: http://i.minus.com/ibxOaBw7BW8b5g.png
This is what I have so far: http://jsfiddle.net/QAPub/2/
How can I center the wrapper/container? I really don't care if the container exists or not, my main goal is the center the three black divs but this is as far as I have gotten.
HTML:
<div class="clearfix">
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
</div>
CSS:
.clearfix:after {
content: " ";
display: block;
height: 0;
clear: both;
}
.clearfix {
background-color: orange;
display: inline-block;
}
.content {
float: left;
background-color: black;
border: 1px solid black;
width: 100px;
height: 100px;
margin: 10px;
}
There are a couple of different ways you can accomplish this.
Here's the one I would use, put the container in the body and give it margin and position it wherever you want to.
http://jsfiddle.net/QAPub/3/
body{
width:500px;
height:500px;
}
.clearfix {
position:relative;
background-color: orange;
display: block;
width:370px;
height:120px;
margin:auto;
top:20px;
}
.content {
float: left;
background-color: black;
border: 1px solid black;
width: 100px;
height: 100px;
margin: 10px;
}
use the following css for ".clearfix "
.clearfix {
background-color: orange;
display:table;
margin:0 auto;
}
here is the jsFiddle file.