My problem is that i want to display block from left to right. You can see my current effect and red box what I'm expecting to get.
what I'm doing wrong? as i did tried to use float left on nmenu_drop class.
CSS:
.wraper{
margin-left:10px;
float:left;
position:relative;
}
.notification_dropdown{
height:40px;
margin-right:10px;
float: right;
position:relative;
padding-left: 10px;
width:30px;
}
.nmenu_drop{
width:200px;
height:300px;
background:#FFF;
clear:both;
position:absolute;
margin-top:40px;
float:right;
}
.nmenu_drop{
display: none;
}
.notification_dropdown:hover + .nmenu_drop {
display: block;
background:#4B4B4B;
}
.nmenu_drop:hover {
display: block;
}
.notification_dropdown:hover{
background:#4B4B4B;
}
HTML:
<div class="wraper">
<div class="notification_dropdown">
<i class="fa fa-globe" style="font-size: 21;color: #8a8a8a; margin-top: 9px;"></i>
</div>
<div class="nmenu_drop">
notification
</div>
</div>
Try adding:
.nmenu_drop {
right: 0;
}
You can play with left and transition:
#wrapper{
position: relative; /* Important, we are going to offset to this div*/
}
#menu{
position: absolute;
width: 100%; /* It looks mobile, so I took this */
top: 0;
left: -105%; /* The extra 5% is easy fix to paddings and borders and stuff */
transition: left 0.5s; /* animate it */
}
#menu.Opened{
left: 0; /* position moved back in */
}
All you have to do now is to add a class Opened to it.
I've made a small demo
Related
I'm working on a project where I have a picture on top of my website and with a small space under the picture I want to add a text between 2 horizontal lines . I have made the text and the 2 lines but I have trouble positioning it under my image . I have put the text and the 2 lines inside a div element and I try to position it .
My code :
* {box-sizing: border-box}
body{
font-family:Aleo;
}
.background-container{
position:fixed;
top :0px;
left:0px;
height:auto;
width:100%;
margin:0;
}
.background-container > img {
width:100%;
height:350px;
display:block;
}
.inside-pic{
position:absolute;
top: 8px;
left: 16px;
color:white;
font-size:45px;
}
.inside-pic>span{
color:orange;
}
#between{
position: relative;
font-size: 30px;
z-index: 1;
overflow: hidden;
text-align: center;
}
#between:before, #between:after {
position: absolute;
top: 51%;
overflow: hidden;
width: 50%;
height: 1px;
content: '\a0';
background-color: grey;
}
#between:before {
margin-left: -50%;
text-align: right;
}
<body>
<div class = "background-container">
<img src = "IMAGES/selfhelp.jpg">
<div class = "inside-pic" >Book<span >House</span> </div>
</div>
<br/>
<div id = "title"> <h1 id = "between"> List of self-help books </h1> </div>
<br/><br/>
</body>
How the webpage is actually displayed :
I would appreciate your help with guiding me to position the title with the lines under the image . Thank you in advance
https://jsfiddle.net/g62nx8ya/
remove this
.background-container{
position:fixed;
top :0px;
left:0px;
height:auto;
width:100%;
margin:0;
}
and add margin:0 to the body
body{
font-family:Aleo;
margin: 0;
}
* {box-sizing: border-box}
body{
font-family:Aleo;
}
.background-container{
/*position:fixed;*/
top :0px;
left:0px;
height:auto;
width:100%;
margin:0;
}
.background-container > img {
width:100%;
height:350px;
display:block;
}
.inside-pic{
position:absolute;
top: 8px;
left: 16px;
color:white;
font-size:45px;
}
.inside-pic>span{
color:orange;
}
#between{
position: relative;
font-size: 30px;
z-index: 1;
overflow: hidden;
text-align: center;
}
#between:before, #between:after {
position: absolute;
top: 51%;
overflow: hidden;
width: 50%;
height: 1px;
content: '\a0';
background-color: grey;
}
#between:before {
margin-left: -50%;
text-align: right;
}
<body>
<div class = "background-container">
<img src = "IMAGES/selfhelp.jpg">
<div class = "inside-pic" >Book<span >House</span> </div>
</div>
<br/>
<div id = "title"> <h1 id = "between"> List of self-help books </h1> </div>
<br/><br/>
</body>
I would like two create two buttons that overlay a div using HTML like the following:
*Both the same DIV with two buttons overlapping each side. So one div with two buttons overlapping.
I would like the buttons to be transparent and overlay the div but I am not sure how.
I have created my Div:
<div class="container">
<div id="slides">
<img src="img/example-slide-1.jpg" alt="Photo by: Missy S Link: http://www.flickr.com/photos/listenmissy/5087404401/">
</div>
</div>
The div I would like to overlay is called "container" and the two buttons are:
<i class="icon-chevron-left icon-large"></i>
<i class="icon-chevron-right icon-large"></i>
Is there any way in CSS or HTML to do this?
You have to place your buttons absolutely on top of your image. To do so, first make .container take a position: relative; and then put your buttons as siblings of your .slides div and place them absolutely.
.container {
position: relative;
}
.slidesjs-navigation {
position: absolute;
top: 0;
display: block;
width: 50%;
height: 100%;
background: rgba(0,0,0,0); /* Added in case you want to transition this */
}
.slidesjs-navigation:hover {
background: rgba(0,0,0,0.25); /* Makes the hovered button visible */
}
.slidesjs-previous {
left: 0;
}
.slidesjs-next {
right: 0; /* left: 50%; works too */
}
.slides img {
display: block; /* Avoids the space usually seen under inline images */
width: 100%; /* Ensures the image takes up the whole width */
}
<div class="container">
<div id="slides" class="slides">
<img src="https://c1.staticflickr.com/5/4147/5087404401_d24513119a_b.jpg" alt="Photo by: Missy S Link: http://www.flickr.com/photos/listenmissy/5087404401/"><!-- original `src`: "img/example-slide-1.jpg" -->
</div>
<i class="icon-chevron-left icon-large"></i>
<i class="icon-chevron-right icon-large"></i>
</div>
Here is a simple way to do it. Put both buttons inside a div with a height:100%, width:50% and float:left;. This way each button takes up the full height of the div but only half of its width. The float:left; will then put them side by side in the div, hopefully achieving what you want!
.box {
border:1px solid black;
height:200px;
width:400px;
background-color:#005680;
}
.button1 {
width:50%;
height:100%;
float:left;
background-color: rgba(0,0,0,0);
border:0px solid black;
}
.button2 {
width:50%;
height:100%;
float:left;
background-color: rgba(0,0,0,0);
border:0px solid black;
}
.button1:hover {
background-color: rgba(10,10,10,0.1);
}
.button2:hover {
background-color: rgba(10,10,10,0.1);
}
<div class="box">
<button class="button1"></button>
<button class="button2"></button>
</div>
This can be your code.
.d {
position:relative;
}
.b1 {
float:left;
height:100px;
width:75px;
}
.b2 {
position:absolute;
left:75px;
height:100px;
width:75px;
}
<div class="d">
<button class="b1"></button>
<button class="b2"></button>
</div>
So basically you would like to create something similar to a toggle button or on/off switch? You could try something like:
HTML:
<div id="toggle">
<a id="left-side" href="">Left</a>
<a id="right-side" href="">Right</a>
</div>
CSS:
<script type="text/css">
DIV#toggle {
width:100px;
height:50px;
margin:0px;
padding:0px;
}
DIV#toggle>A {
display:block;
width:50%;
height:100%;
padding:0px;
text-size:10pt;
text-align:center;
}
DIV#toggle>A#right-side {
margin:0px auto 0px 0px;
background-color:#ff0000;
}
DIV#toggle>A#left-side {
margin:0px 0px 0px auto;
background-color:#00ff00;
}
</script>
Since you mentioned that the buttons are in the div, you can simply position them using position: absolute. By adding position: relative to the container, you can position them within that container rather than within the document as a whole.
/* -------------------------------------------------- --
The part that you actually need
-- -------------------------------------------------- */
/* Allow elements to be positioned relative to the container */
.container {
position: relative;
}
/* Let the buttons both cover the (left) half of the div */
.container .slidesjs-navigation {
position: absolute;
top: 0;
left: 0;
width: 50%; /* Of .container, its positioning parent */
height: 100%; /* Of .container */
}
/* Make an exception for the second button to move it to the right half */
.container .slidesjs-next {
left: 50%;
}
/* -------------------------------------------------- --
The part that's just for the demonstration.
-- -------------------------------------------------- */
/* Make the content large to show that the buttons scale */
#slides {
padding: 50px;
}
/* Make the div red, as in the question */
.container {
background-color: red;
}
/* Have white, semi-transparent buttons with a border, so you see where they are */
.container .slidesjs-navigation {
background-color: white;
border: 1px dashed black;
box-sizing: border-box;
opacity: 0.5;
}
/* Make the buttons opaque on hover to show that they respond */
.container .slidesjs-navigation:hover {
opacity: 1;
}
<div class="container">
<i class="icon-chevron-left icon-large"></i>
<i class="icon-chevron-right icon-large"></i>
<div id="slides">
<img src="img/example-slide-1.jpg" alt="Photo by: Missy S Link: http://www.flickr.com/photos/listenmissy/5087404401/">
</div>
</div>
Hope this is what you were looking for. Happy to explain or help in a better solution if needed.
.container {
width: 100vw;
height: 50vh;
background-image: url('https://c1.staticflickr.com/5/4147/5087404401_d24513119a_n.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
margin: 0;
padding: 0;
}
.container a{
width: 49.5%;
height: 50vh;
margin: 0;
padding: 0;
display: inline-block;
}
.container a:hover{
width: 49.5%;
height: 50vh;
background: rgba(255,255,255,0.4);
margin: 0;
padding: 0;
display: inline-block;
}
<div class="container">
<i class="icon-chevron-left icon-large"></i>
<i class="icon-chevron-right icon-large"></i>
</div>
Im trying to get my footer on the bottom of my page, i got the part where its on the bottom of my page, but now its overlapping with my content area called"portfolio list" this is what it looks like now:
As you can see is my footer overlapping the bottom part of my portfolio list.
CSS part:
.container {
position: relative;
width: 1000px;
margin: 0 auto;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
#portfoliolist .portfolio {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
width:31%;
margin:1%;
display:none;
float:left;
overflow:hidden;
}
.portfolio-wrapper {
overflow:hidden;
position: relative !important;
background: #666;
cursor:pointer;
}
.portfolio img {
max-width:100%;
position: relative;
}
.portfolio .label {
position: absolute;
width: 100%;
height:40px;
bottom:-40px;
}
.portfolio .label-bg {
background: #121212;
width: 100%;
height:100%;
position: absolute;
top:0;
left:0;
}
.portfolio .label-text {
color:#fff;
position: relative;
z-index:500;
padding:5px 8px;
}
.portfolio .text-category {
display:block;
font-size:9px;
}
footer{
position:absolute;
bottom:0;
width:100%;
height:100px; /* Height of the footer */
background:#121212;
}
HTML:
<div id="portfoliolist">
<?php
while($query->fetch()):
echo "<a href='post.php?id=$post_id'>"?>
<div class="portfolio <?php echo $category?>" data-cat="<?php echo $category?>">
<div class="portfolio-wrapper">
<?php echo '<img src="data:image/jpeg;base64,'.base64_encode( $image ).'" />';?>
<div class="label">
<div class="label-text">
<a class="text-title"><?php echo $title?></a>
<span class="text-category"><?php echo $category?></span>
</div>
<div class="label-bg"></div>
</div>
</div>
</div>
<?php echo "</a>";
endwhile;?>
</div>
<footer>
<div class="footer-nav">
<ul>
<li>Facebook</li>
<li>Twitter</li>
<li>DeviantArt</li>
<li>Behance</li>
<li>LinkedIn</li>
</ul>
</div>
</footer>
both of these div's are in my container. I hope someone can help me out!
Try it with footer { position: relative; } like Matej Đaković said.
But it's also important, that #portfoliolist clears the float of .portfolio, otherwise #portfoliolist has no height.
#portfoliolist:after {
content: ' ';
display: block;
clear: both;
}
You should set the position for the footer: position: fixed;and set the z-index: 9999; for the remaining part of the page without the footer. That way, the footer always stays on the bottom, with the rest of the page above it. Maybe you should set the margin bottom of the portfolio as the height of the footer. That should do it I think
Also set the position: relative; for the rest of the page. Here's the quick codepen I made http://codepen.io/oroborus357/pen/qdXdBw
try to use:
footer{
position:absolute;
bottom:0;
right: 0;
left:0;
height: 125px;
background:#121212;
}
if not just add to your content (portfolio list) and set the bottom to the beginning of the footer so it will be bottom: 125px; or bottom: 126px;
{ position:absolute;
bottom:125px;
right: 0;
left:0;
}
Here is a very handy article for this type of questions.
Hope it helps!
I've got a tile containing a title, a category, a link to the category, a picture and a global link to the picture. As it is, this global link is only active in a piece of the picture area. I would like it to be global.
Here is the HTML :
<div id="article">
<div class="block-module">
<a class="view-full-module" href="http://www.cosmos.com/Common/Images/Destinations/machupicchu3.jpg">
<img class="image" src="http://www.cosmos.com/Common/Images/Destinations/machupicchu3.jpg"/>
</a>
<div class="block-about">
<h2 class="block-title">Title</h2>
<span class="block-stats">Category Date</span>
</div>
</div>
</div>
Here is the CSS :
.view-full-module { cursor: pointer; top: 0px; left: 0px; z-index: 2; background: none repeat scroll 0% 0% rgba(31, 32, 33, 0); width: 100%; height: 100%; }
.image { width: 100%; }
.block-module { width: 100%; position:relative; margin:0; padding:0; cursor:pointer; border-radius:10px; z-index:4; }
.block-about { position:absolute; bottom:0; left:0; right:0; padding:4em 1em 1em 1em; background-image:-webkit-linear-gradient(transparent, rgba(0,0,0,0.55), rgba(0,0,0,0.8)); background-image:linear-gradient(transparent, rgba(0,0,0,0.55), rgba(0,0,0,0.8)); }
.block-about a { position:relative; z-index:5; }
.block-title { max-width:100%; margin:0 0 0; color: white !important;font-size:1.625em; }
.block-stats { width:100%; margin-top:0.35714em; font-size:0.875em; color:rgba(255,255,255,0.55) !important; }
.author-link { color:#659dae; }
#article { top:0; margin: 0; padding:20px; -moz-column-gap: 20px; -webkit-column-gap: 20px; column-gap: 20px; -moz-column-width: 260px; -webkit-column-width: 260px; column-width: 260px; }
Here is a demo : http://jsfiddle.net/5qwejk20/4/
One option would be to add pointer-events: none to the element .block-about.
In doing so, you can essentially click through the element:
Updated Example
.block-about {
pointer-events: none;
}
Browser support for the pointer-events property can be found here.
Another option would be to move the anchor element and then absolutely position it relative to the parent in order to take the full dimensions.
The reason you need to move the anchor element in the DOM is because if it wraps the img element, then you can't have your background fading at the bottom since the anchor needs to be positioned above it in order for the click event to work anywhere within the element.
Updated Example
.view-full-module {
cursor: pointer;
position: absolute;
top: 0; right: 0;
bottom: 0; left: 0;
z-index: 2;
}
<div id="article">
<div class="block-module">
<img class="image" src="http://www.cosmos.com/Common/Images/Destinations/machupicchu3.jpg" />
<div class="block-about">
<h2 class="block-title">Title</h2>
<span class="block-stats">Category Date</span>
</div>
<a class="view-full-module" href="http://www.cosmos.com/Common/Images/Destinations/machupicchu3.jpg"></a>
</div>
</div>
As a side note, you may want to add vertical-align: top to the img element in order to remove the gap under it.
Example without the gap
img {
vertical-align: top;
}
This is supposed to be a simple div-appear-on-hover situation, but the div with #1949_neon is just not showing up after I hover on #1949_wrapper.
I am very sure that the div is at the right place, because when I change the visibility to block, it's showing up at the right place.
<div id="1949_wrapper">
<div class="year_line" style="top:170px;">1949</div>
<div class="neon_light" id="1949_neon"></div>
</div>
.neon_light{
position:relative;
top: 0px;
width:250px;
height:650px;
background:#FFFF00;
z-index: 1;
}
#1949_neon {
display: none;
}
#1949_wrapper:hover #1949_neon {
display: block;
}
This can be achieved with css. The issue here is your id's starting with a number. This works.
<div id="wrapper_1949">
<div class="year_line" style="top:170px;">1949</div>
<div class="neon_light" id="neon_1949"></div>
</div>
.neon_light{
position:relative;
top: 0px;
width:250px;
height:650px;
background:#FFFF00;
z-index: 1;
}
#neon_1949 {
display: none;
}
#wrapper_1949:hover #neon_1949 {
display: block;
}
You can't do it just by css.
Change your HTML to
<div id="1949_wrapper" onmouseover="document.getElementById('1949_neon').style.display = 'block';">
<div class="year_line" style="top:170px;">1949</div>
<div class="neon_light" id="1949_neon"></div>
</div>
and your css to:
.neon_light {
position:relative;
top: 0px;
width:250px;
height:650px;
background:#FFFF00;
z-index: 1;
display:none;
}
#1949_neon {
display: none !important;
}
Demo
You can do it using CSS. What is going wrong with your CSS is you are having ID starting with a number which will not work. Here is the working CSS.
.neon_light{
position:relative;
top: 0px;
width:250px;
height:650px;
background:#FFFF00;
z-index: 1;
}
[id='1949_neon'] {
display: none;
}
[id='1949_wrapper']:hover [id='1949_neon'] {
display: block;
}