i have a question about a div being longer then it's parent div.
My page is looking as followed:
<div id="wrapper">
<div id="top">
</div><!--/top-->
<div id="middle">
<div id="keep_up">
<div id="thread_menu">
<div id="new_thread">
New threads in here
</div>
<div id="active_thread">
Active threads in here
</div>
</div>
</div><!--/keep_up-->
</div><!--/middle-->
<div id="bottom">
</div><!--/bottom-->
</div>
And the css (Will skip the top div since that is working fine).
html,body {
margin: 0;
padding:0;
height:100%;
}
#wrapper {
min-height:110%;/*Did this, so the page will be a little longer already*/
position:relative;
}
#middle{
width: 80%;
margin-left: 10%;
padding-bottom: 30px;
}
#bottom {
color: white;
background:#000;
width:100%;
height:20px;
position: absolute;
bottom:0;
left:0;
text-align: center;
font-weight: bold;
}
#thread_menu{
float: left;
width: 17%;
}
#new_thread{
height: 80%;
width: 100%;
border-left: 2px solid black;
border-bottom: 2px solid black;
border-right: 2px solid black;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
#active_thread{
height: 80%;
width: 100%;
margin-top: 5%;
border-left: 2px #000 solid;
border-bottom: 2px #000 solid;
border-right: 2px #000 solid;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
Now, i fill the active and new_thread div with 15 items that i retrieve from my database. Same with Active_thread div. However, on a big screen the results will show fine (As it should). But on a small screen (laptop) it shows it like this:
(The browser is not that big, you always need to scroll a little bit down in order to see the footer (See height: 110% in wrapper))
Question: how do i make my thread_menu push the footer down and keep it inside my wrapper or at least middle div?
(Used the tags Jquery and Javascript because i'm not sure how to solve this problem, and it might needs one of those).
Image EDIT:
Looks like #threadMenu is floated left, this pulls the element out of the flow of the document, so it will not effect the containing divs height!
You could use JS to get the #threadMenu height, then push the content down by this much, but thats not an ideal solution!
I'm assuming the 'menu-items' on the image is the #thread_menu in the CSS. When you float something in the CSS, you're taking it out of the flow. Meaning they won't listen to what it's parents has to say.
What you can do is use display: flex; flex-direction: row; on the middle, force #thead_menu to use a base of 17% by using flex: 0 0 17%.
See https://css-tricks.com/snippets/css/a-guide-to-flexbox/ for detailed information on how to use flexbox
Remove the following styles from #bottom
position: absolute;
bottom:0;
left:0;
Add a clearfix for #keep_up (see examples mentioned by Michael_B)
#keep_up:after {
content:"";
display:block;
clear:both;
}
JSFiddle Link
Note: changed id="Middle" to id="middle" in your fiddle example
Related
I don't know the value to go inside, so I need a cancellation line that changes depending on the length. I tried the "text-decoration:line-through" property but could not because of the specified cancel line form. Here are three questions I have. Should I use a virtual selector to make the above shape? Do I have to use the position:absolute property just by the shape of the arrow? Or is there any other way? I can't use a framework like jQuery, and I can only use JavaScript.
Here is the working example:
.price {
position: relative;
margin-bottom: 15px;
display: inline-block;
margin-right: 30px;
}
.price::before {
content: '';
width: 100%;
height: 6px;
padding-right: 10px;
top: 50%;
left:0;
position: absolute;
border-top: 1px solid #888888;
border-right: 1px solid #888888;
transform: skew(-45deg);
}
<div class="price">$200</div>
<div class="price">$20000</div>
<div class="price">$2000000</div>
<div class="price">$200000000</div>
<div class="price">$20000000000</div>
I'm setting up some jQuery to check if a hotspot is visible on the screen to determine if a help message displays on screen or not. If the hotspot is visible it should not display the help message at all.
So far I've got some script to turn off the help message if you hover the hotspot after the help message fades in. However, I'm unsure how to check before the help message fades in if the hotspot has been hovered.
The main reason for this functionality is that both messages are in the same place on the page and at the moment it creates a stacking effect.
Please find my script along with an example of the issue so far below.
If you hover over the hotspot and then refresh the window with the cursor still on the hotspot you should see my problem.
$(document).ready(function() {
$('.ws-hotspot').hover(function(){
console.log("appeared");
$('#ws-hotspot-helper').css('display', 'none');
$(this).find(".ws-hotspot-view-more").animate({opacity: 0.8, marginLeft: "26px"},200);
},function(){
$('#ws-hotspot-helper').css('display', 'none');
$(this).find(".ws-hotspot-view-more").stop().animate({opacity: 0, marginLeft: "22px"},50);
});
function hotspotHelper(){
if(!$('#ws-hotspot-one .ws-hotspot-view-more').css('opacity') == 0.8){
console.log("appeared");
$('#ws-hotspot-helper').css('display', 'none');
}
else {
$('#ws-hotspot-helper').delay(1000).fadeIn(1000).delay(5000).fadeOut(1000);
};
};
$(hotspotHelper);
});
.ws-hotspot{
z-index: 9999;
position:absolute;
background:blue;
width:55px;
height:55px;
}
#ws-hotspot-helper{
background:yellow;
background-repeat: no-repeat;
background-position: 1px -22px;
display: none;
min-width: 130px;
padding: 0.37rem;
padding-left: 1rem;
position: absolute;
top: calc(16% + 9px);
left: calc(58% + 27px);
border-radius: 3px 10px 10px 3px;
border: 1px solid #c5c5c5;
border-width: 1px 1px 1px 0px;
font-size: 0.95rem;
color: #58595b;
}
#ws-hotspot-helper span#ws-hotspot-helper-arrow{
margin-left: 10px;
margin-right: 3px;
font-weight:400;
font-size:1rem;
}
.ws-hotspot .ws-hotspot-view-more{
display: inline-block;
opacity: 0;
background:yellow;
background-repeat:no-repeat;
background-position: 2px -22px;
margin-left: 24px;
margin-top: 9px;
min-width: 80px;
padding: 7px;
padding-left: 25px;
font-size: 0.87rem;
border-radius: 3px 10px 10px 3px;
border:1px solid #c5c5c5;
border-width:1px 1px 1px 0px;
color:#58595b;
text-align:center;
}
.ws-hotspot#ws-hotspot-one{
top: 16%;
left: 58%;
}
#red-box{
position:relative;
background:red;
width:100%;
height:100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<div id="red-box">
<span id="ws-hotspot-helper"><span id="ws-hotspot-helper-arrow">◀ </span>find out more</span>
<span class="ws-hotspot" id="ws-hotspot-one"><span class="ws-hotspot-view-more">view more</span></span>
</div>
So I found that the .fadeIn() would still run on the ws-hotspot-helper element after the .delay() despite the if statement setting it to display none. Therefore I switched out the line:
$('#ws-hotspot-helper').css('display', 'none');
For
$('#ws-hotspot-helper').remove();
This solved the problem instantly as it simply takes it out of the page on hover of the "view more" element.
Hope I helped someone out by replying to this.
Basically the title says it all.
How do I have two divs next to each other, and when on a different sized screen ( lets say smaller ) they don't merge into one, and if there is not enough space to go down to the next line? Also if possible to scale down the elements inside ( text and image and button )
Thank you!
CURRENT PAGE WITH PROBLEM (The giveaway boxes are the dicvs btw):
Here
add a class with float:left in it for both.
And use margin to center them as you want instead of your margin-left:50%.
Something like :
.giveaway {
background-color: #C0C0C0;
width: 360px;
height: 325px;
border-style: solid;
border-color: #336699;
float: left;
margin: 10px 25px;
}
.giveaway1 {
background-color: #C0C0C0;
width: 360px;
height: 325px;
border-style: solid;
border-color: #336699;
float: left;
margin: 10px 25px;
}
you should use the same class for both by the way...
I used a wrapper div to contain and center the two smaller divs. Then just used a media query to make them block level at a certain window width (for smaller screens)
Of course, you can adjust the widths / #media rule to suit your own needs
html, body {
margin: 0;
padding: 0;
}
#page-wrapper {
border: 1px solid red;
text-align: center;
}
.box {
text-align: left;
display: inline-block;
border: 1px solid #000000;
box-sizing: border-box;
width: 300px;
height: 200px;
}
#media(max-width: 650px) {
.box {
width: auto;
display: block;
}
}
<div id="page-wrapper">
<div class="box">
<p>Stuff goes here</p>
</div>
<div class="box">
<p>Stuff goes here</p>
</div>
</div>
So I have created a box in css like this:
#box
{
background-color: #5d5d5d;
border-radius: 2px 2px 2px 2px;
box-shadow: 5px 5px 2px #767676;
height: 200px;
width: 1100px;
}
with the result of
What I want to do without overlaying a smaller whitebox, and without messing up the shadow effect is something like this:
Is this possible, or am I going to have to just add a smaller whitebox over the top and play with the layering and shadow effects until they're about right?
Or maybe there is a way using JavaScript or something like that?
NB: What I don't want to do is just create the box in photoshop as this will slow overall load time of the page
option:1 boxshadow
body{padding:40px}
#box
{
background-color: white;
border-radius: 2px 2px 2px 2px;
box-shadow: 14px -88px 0px white,5px 5px 2px #767676,inset 199px -88px 0 #5d5d5d;
height: 200px;
width: 510px;
}
<div id=box />
option:2 pseudo element see #Fahad Hasan
You can use the :before pseudo-element to achieve what you're trying to do like this: DEMO. This is the CSS which I've added:
div#box:before {
content:'';
background: white;
width: 700px;
display: block;
height: 100px;
float: right;
}
You can create an ::after pseudo-element with a white background, float it right and offset it to move over the shadow:
#box::after{
content:'';
width:500px;
height:100px;
position:relative;
float:right;
top:0px;
right:-7px;
background-color:#fff;
}
You should try with pseudo elements, this is an example:
HTML:
<div id="mydiv"></div>
CSS:
div#mydiv{
width:300px;
height:300px;
background-color:red;
}
div#mydiv::after {
content: ' ';
display: block;
background-color: blue;
width: 270px;
height: 100px;
float: right;
}
Here is a demo
I made this js fiddle: http://jsfiddle.net/VaCfV/3/
It has some long content and a fixed positioned sidebar with content inside it. I'm trying to figure out how to make content inside sidebar #side-content scrollable Not by using overflow-y: scrollable; but actually scroll together with page when user uses mouse wheel, arrow keys, main scrollbar etc..
Can this be somehow achieved?
you can try:
#page-wrapper{
overflow: hidden;
position: relative;
width: 100%;
}
#sidebar {
width: 30%;
height: 100%;
position: absolute;
left: 20px;
top:0px;
bottom:0px;
background: #fff;
border-left: 1px solid #000;
border-right: 1px solid #000;
padding: 20px;
}
http://jsfiddle.net/VaCfV/4/