I am trying to get a div to show up in the correct place after using jQuery's .show().
In the image below, you can see the search div (autocomplete div) shows up to the far left, but I want it to show up where I drew the red box.
Basically I have a small header in the center of my site 1000px in width, and when the autocomplete div shows up, I'd like it to be lined up in the right place, but I'm not sure how set margins or anchors to get it to be in the right spot.
Here is my JS:
$('#sbar').focus(function(){
$('#acd').show();
});
Here is the CSS for the autocomplete DIV:
.autoCompleteDiv{
width: 428px;
height: 150px;
position: fixed;
background-color: white;
border-radius: 3px;
box-shadow: 0px 4px 4px;
z-index: 999;
top: 66px;
padding: 10px;
font-size: small;
color: gray;
margin-left: auto;
margin-right: auto;
overflow-y: scroll;
display: none;
opacity: 0.93;
Basically I want to move the div into the red spot, but have it compatible between screen sizes, and have it stay lined up when the window is 'windowed'.
Any ideas on how to do this?
Regards
If you use the search div as a container for your auto complete div, then it should show in
place. I have created a quick demo that illustrates this.
the html looks like this:
<div id="search"><input value="search" type="text"/>
<div id="auto"><p>autocomplete</p></div>
</div>
and the css:
#search{position:fixed;top:20px;left:200px;}
#auto{display:none;width:auto;min-height:100px;}
To make it responsive, simply use media queries to update the position of the search box...
hope that helps...
Figured it out.
Made a 1000px container div with:
#acdContainer {
width: 1000px;
height: 150px;
top: 64px;
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
}
And changed my auto-complete div to be:
.autoCompleteDiv{
width: 730px;
margin-left: 250px;
margin-top: 2px;
height: 150px;
position: relative;
background-color: white;
border-radius: 3px;
box-shadow: 0px 4px 4px;
z-index: 999;
padding: 10px;
font-family: Raleway;
font-size: small;
color: gray;
overflow-y: scroll;
display: none;
}
So that the autocomplete div saw itself as being in a 1000px window, which was always centered.
Related
I am making something and am wondering how to get a div to overlay another div and it's contents. What I am trying to do it kinda like youtube, when you are on a video and you hover over someone's avatar it will show a small box with their channel art and things. Here is a photo of what i'm currently getting screenshot. Here are my codes for the two divs:
circular div
#staff-info {
width: 400px;
height: 300px;
background: #999;
border: 1px solid #333;
border-radius: 6px;
margin: 0 auto;
position: relative;
}
staff boxes
#staff {
width: 256px;
height: 60px;
margin: 7px 4px 7px 4px;
background: #fff;
display: inline-block;
background: #f3f6f9;
}
.staff-avatar {
width: 40px;
height: 40px;
padding: 10px;
display: inline-block;
float: left;
}
.staff-name {
display: inline-block;
padding-top: 8px;
}
.staff-job {
padding-top: -100px;
font-size: 12px;
}
Grey area (main div)
#youtuber-about {
width: 890px;
height: auto;
background: #d5d3d3;
margin-left: auto;
margin-right: auto;
font-size: 16px;
padding: 10px 0px 10px 10px;
display: inline-block;
}
html for the divs
<div id="staff-info">yolo</div>
<div id="youtuber-about" style="color: #333;">Our Staff<br>
<?php
foreach ($staff as $staff) {
echo '
<div id="staff"><img src="'.$staff['avatar'].'" class="staff-avatar"><div class="staff-name">'.$staff['name'].'</div><div class="staff-job">'.$staff['job'].'</div></div>';
}
?>
</div>
If you are using jQuery, you can just append the info div inside of each staff member div whenever the users moves their mouse over that staff member.
$('#youtuber-about > div').mouseover(function(){
$(this).append($('#info'));
});
And then you can style that with CSS quite easily, just setting the info div to be position: absolute; and set to fill the containing element, set to show on hover.
See Demo
http://css-tricks.com/absolute-positioning-inside-relative-positioning/
What I would do is have a div that holds both of these two divs and play with your CSS and the nesting of the divs to overlay them properly.
Absolute and Relative positioning is pretty tricky as first but once you get a hang of it you'll be doing it left and right
So remember
Add both divs to a third empty div and then put the one you want overlaying below the other.
To move use
.something {
position: absolute
top:20%
right:15%
left:10%
bottom:20%
}
I'm a (Dutch) first year student studying ICT&Media Design and we are working with HTML/CSS/JavaScript.
While creating a page for myself to work with javascript, html and css I stumbled upon some problems.
I can't scroll down to see my footer on the page's.
I'm pretty sure im doing something wrong with the fixed position but i can't seem to find out what exactly.
Hope you guys can help me, there's probably more wrong positioning wise.
Thank you in advance.
http://athena.fhict.nl/users/i299291/WP21/index.html
(School's Server)
your footer is not appearing because you are using unnecessary using position. Remove all of your position:fixed and position:absolute from your CSS and then page will scrollable and you can see your footer.
Here is the updated CSS; you can see all position are commented, no need to use them.
#header {
margin-left: auto;
margin-right: auto;
margin-top: 15px;
position: relative; /* remove this line*/
width: 100%;
}
#menubar {
background-color: #2C2C2D;
border: 1px solid #FFFFFF;
height: 51px;
line-height: 20px;
margin: 261px auto 0; /* remove this line*/
position: absolute; /* remove this line*/
text-align: center;
vertical-align: middle;
width: 1280px;
}
#containerIndex {
background-color: #FFFFFF;
height: 530px;
margin-top: 330px;
opacity: 0.5;
position: fixed; /* remove this line*/
width: 1280px;
}
#footer {
background-color: #C6C7C0;
border: 1px solid #FFFFFF;
height: 48px;
line-height: 50px;
margin: 880px auto 10px;/* remove this line*/
position: fixed;/* remove this line*/
text-align: center;
vertical-align: middle;
width: 1280px;
}
Your footer has a fixed position. It is displaying behind your content. Get rid of that, and you should be able to scroll down to your footer.
I'm currently trying to create a little menu that changes position as the user scrolls. I've come up for this for a style - http://jsfiddle.net/piedoom/S8tyn/
As you can see, the dots are appended to each text <div> element, and it looks like this.
However, this looks very ugly. How can I center each dot beneath each text div? I've tried doing things like text-align: center to no avail.
Use the css style of margin: auto to center the child div.
http://jsfiddle.net/S8tyn/1/
Just change your style to next
.unselectedcircle
{
background: grey;
position: relative;
top: 32px;
border-radius: 100%;
width: 10px;
height: 10px;
margin: 0 auto;
}
Demo
Here is the answer for your question:
added left and margin-left
.unselectedcircle
{
background: grey;
position: relative;
top: 32px;
border-radius: 100%;
width: 10px;
left:50%;
margin-left:-5px;
height: 10px;
}
updated link
I am trying to centre a div horizontally inside another div. The div that I am trying to centre is a scroll-down button that uses jQuery and has a custom icon font made by me and default width/height. I want to centre this div inside my main div and keep the original size as I want to keep using it as a button. For example:
I want to make something like the white arrow that is pointing down in the centre but without messing with my width.
This is my code:
HTML
<div id="intro-tab"> <!-- First/Intro Tab -->
<div id="introtab-godownbtn">Q</div>
</div>
CSS
#intro-tab {
width: auto;
height: 100%;
position: absolute;
left: 0px;
right: 0px;
top: 0px;
background-color: red;
box-shadow: 0px 1px 3px #000;
}
#introtab-godownbtn {
font-family: iconFont;
font-size: 50px;
position: absolute;
bottom: 25px;
width: 60px;
height: 30px;
left: 50%;
margin-left: 30px;
background-color: #FFF;
}
#introtab-godownbtn:hover {
cursor: pointer;
}
jQuery
$('#introtab-godownbtn').click(function(){
$("html, body").animate({
scrollTop: (screen.height - 90)
}, 600);
return false;
});
I have tried many ways to centre the button introtab-godownbtn but it doesn't work or it just messes up my buttons size and clicking location. Any solution to my problem?
From what I understand, you're trying to horizontally center an HTML element. Generally, one would use the margin: 0 auto; approach where a fixed width is set on the element it's being applied to. Here's an example of such: http://jsfiddle.net/5XTq2/
Can you provide a mockup/screenshot of the layout you're trying to achieve, if this answer doesn't help? I can happily update the answer to accommodate your need.
EDIT:
As per your Spotify example, if you inspect the page and select the down arrow, it will have the follow styles.
.scroller-arrow {
width: 60px;
height: 60px;
background-image: url(../i/_global/arrow-big.png);
cursor: pointer;
display: block;
margin: 0 auto;
position: relative;
-webkit-tap-highlight-color: transparent;
}
To get the inner absolutely positioned div to be horizontally and vertically centered:
http://jsfiddle.net/7P4n5/
http://coding.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/
HTML:
<div id="intro-tab">
<div id="introtab-godownbtn">Q</div>
</div>
CSS:
body { margin: 0; }
#intro-tab {
width: 100%;
height: 100%;
position: absolute;
background-color: red;
box-shadow: 0px 1px 3px #000;
}
#introtab-godownbtn {
background-color: #FFF;
font-family: iconFont;
font-size: 20px;
width: 60px;
/* this does the centering */
height: 30px;
position: absolute;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
#introtab-godownbtn:hover { cursor: pointer; }
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/