I am making a website for someone and I want it to resize itself depending on the screen resolution and the zoom of the browser(I am not including smartphones). I currently have a menu wich is like that :
every element in the menu is in a div and here is the css:
#barre_utilisateur //For the menu bar(the red bar)
{
height:45px;
background-color:#A31E39;
width:100%;
}
#content_boutton_accueil //the home button
{
margin-left:2%;
width:200px;
display:inline-block;
}
#notification //exclamation mark button
{
cursor:pointer;
width:60px;
height:45px;
display:inline-block;
}
and now, I want the cogwheel icon the stick on the right on the left of the user button. I don't see how I can achieve this.
Also, when I zoom in too much the righ part of the menu get out of where it is supposed to be is there a way to prevent this?
A good example of what I am trying to achieve is the new outlook live page
You can position the overall menu div (#barre_utilisateur) relatively, and then its children absolutely in it. For example:
#barre_utilisateur {
position: relative;
}
#cogwheel {
position: absolute;
right: 0;
}
Another way could be to have 2 divs inside the menu (#barre_utilisateur), and then to float the first one to the left and the other - to the right.
Related
I have an absolutely positioned logo in the header bar of my page, that keeps moving down the page when scrolled.
I do not want this behavior, I want the logo to stick to the top of the page and not cover other elements when a visitor is scrolling down the page.
Here is the page in question.
www.giracci.com
and the header logo code.
logoWrapper {
float: left;
height: 0;
position: absolute;
top: 0;
width: 150px;
z-index: 30;
}
If you view the page, you'll see that it doesn't stay put, it scrolls with the page.
First:
Copy the relevant HTML and CSS to your question. There's MUCH more to the equation that you have not included. You need to essentially include all the html up to the nav container, as well as the CSS, and indicating that your question includes bootstrap (I've already done that for you).
Second:
The reason that it's exhibiting this behavior is because one of it's containers - the nav#site-navigation - is getting a fixed class applied to it when you scroll, which applies the following styles:
nav.fixed {
position: fixed;
visibility: hidden;
opacity: 0;
}
And, because you are using the bootstrap class of visible-lg on the logo wrapper, it gets this style:
.visible-lg {
display: block !important;
}
Which overrides the .fixed hidden property.
And, because the logo is inside that wrapper, that causes the logo to show up when you don't want it to.
So, you're using colliding classes, and need to straighten them out.
Add this to your css file:
No need to change much of the code.
your navbar is adding fixed class when it is scrolled.
nav.fixed .logoWrapper {
display: none;
}
First of all I would change these parameters in the css to display correctly the nav, to make sure that the menu items do not go below the logo:
.container {
width:auto;
}
.container.nav-bar {
width:auto;
margin:0 60px;
}
After you've done this, if you want to hide everthing when you're scrolling the page (logo and nav), add this to your css:
nav.fixed.scrolled {
display:none;
}
however, if you want that the only logo is fixed when you're scrolling the page add and edit these parameters on the CSS:
.logoWrapper {
position:fixed;
}
There is one more way around you can try. Because currently on your site it disappears at once so it feels like there is kind of a glitch/stutter, very slight. I needed something like this with my logo so I did it with JS. And it works like a charm. Here is the following code:
$(window).scroll(
function () {
var top = 75;
var currentTop = $(window).scrollTop();
if (currentTop > top) {
$(".logo").css("opacity", "0");
} else {
$(".logo").css("opacity", "1");
}
});
Simply replace .logo with your .logowrapper or whatever. Hope it works.
I have a clickable div :
#next {
cursor:cell;
z-index:100;
}
That is activated by this JavaScript :
$('#next').click(function() {
$('.current').removeClass('current').hide()
}
And the divs:
#zob {
width: 100% ; height: 20px;
}
#zobbig {
position:absolute;
width: 100% ;
height: 250px;
}
and when i hover on #zob then #zobbig appears.
#zob:hover ~#zobbig {
cursor:alias;
opacity:0.8;
margin-left: auto;
margin-right: auto ;
}
My problem is that when it appears it make my #next div unlickable even when i'm not hovering on #zob. A zone of 250px (height of #zobbig) is disabling the click function of the #next div.
I just want my #next div to be clickable as it is supposed to be.
Thanks for your help
Dan
(you can see it directly on http://blog.dansayag.com)
or on http://jsfiddle.net/CEtfh/108/
to make it easier: if you go on the fiddle there is a picture of bob dylan.
If you point with the cursor on the eye, the cursor becomes a cross. If you point on the hat, the cursor is normal.
I just want the cursor to be a cross on the entire bob dylan image...
IF you go on fiddle you will also understand what is ZOB and what is ZOBBIG
Here is a link to fiddle, where I made it a little bit clearer for everyone to see.
Your problem comes from the fact that you don't set display: none; to your elements, but you simply make them invisible. Therefore they still exist on the HTML page and must align according to each other and the clickable div with the image inside gets pushed down from the #zob div. I suggest you change your way of hiding elements in the biginning with
disply: none;
and later display them again with
display: block;
EDIT: Resize the window in fiddle so the picture is a little bit larger, otherwise there will be no clickable div at all
I've created a few sites with facebook like button in the footer.
However, the popup that appears after you like a page, is not visible, so I'd like to move it over the like button.
So that this wouldn't happen.
How could I target the html5 implemented like button?
<div class="fb-like span6" data-href="https://www.facebook.com/pages/xxxxxx?fref=ts" data-send="true" data-width="450" data-show-faces="false" data-action="like" data-font="segoe ui"></div>
And what css would I need to apply to it?
Unfortunately you can't really get the popup to move independently of the button, because once the button is clicked it opens the widget in an iframe and you won't be able to affect the contents of the iframe with out playing with the same origin policy. Apparently there are Ways to circumvent the same-origin policy but its probably way more of a headache than it's really worth for something like this.
However, if you just want the iframe opening above the edge of the window you could move the iframe around like this:
.fb_iframe_widget iframe {
position:absolute;
top:-165px;
background:#fff; /* in your case you may want to add a white background */
}
Also you'll need to remove overflow:hidden from #footer.
You should end up with this:
I know it's not ideal, but given Facebook's lack of interest in being particularly developer friendly it is likely as close as you can get to what you're after.
Update:
Wrap the whole widget in a div and position the div where you had it to begin with. Then you can you use the following CSS to position the iframe.
.fb_iframe_widget iframe {
position:absolute;
top:-165px;
background:#fff;
right:10px;
}
#media (min-width:1200px) {
.fb_iframe_widget iframe {
position:absolute;
top:-165px;
background:#fff;
right:-45px;
}
}
#media (max-width:979px) and (min-width: 768px) {
.fb_iframe_widget iframe {
position:absolute;
top:-165px;
background:#fff;
right:110px;
}
}
#media (max-width:767px) {
.fb_iframe_widget iframe {
position:absolute;
top:-165px;
background:#fff;
right:0px;
}
}
a) you should change your footer's height, it won't affect much your design, even your responsive options, it could be like this:
#footer {
margin-left: 0;
height: 230px;
background: #fff;
border-top: 1px solid whiteSmoke;
}
or...
b) you can put the like button in your side bar without changing any css, i will look something like this:
http://puu.sh/3Srmq.png
I have a compromise solution too.
After user clicked the like button, scroll window untill widget totally shows up by callback function.
Code looks like
FB.Event.subscribe('edge.create', function(response) {
$('html, body').animate({
scrollTop : $("#yourFacebookWidgetID").offset().top + 170 //add offset.
}, 10);
});
Here is the fiddle.(I borrowed this instance, Somebody made it long time ago.)
Here is the screenshots.
After clicked the like button, just before auto scroll.
And this is the screen after auto scrolling finished.
Please notice the last like button.
Edited : add the 170px offset .
Add screenshots.
That's what worked out for me.
.wrap-parent {
zoom: 1; //or your clearfix class
}
.wrap {
overflow: visible;
}
The html will be something like
<div class='wrap-parent>
<div class='wrap'>
<!-- button here -->
</div>
</div>
I'm coding a comment page on my website and it all works fine, but when you make it bigger part of my pages (notifications) move across the page. I've coded the text area to the position I wanted using position relative. Here is the css code I've use:....
#mainSection{
text-align:left;
margin-top:3px;
margin-bottom:50px;
margin-left:270px;
position:relative;
bottom:650px;
}
#mainSection .newPost{
width:500px;
height:125px;
}
You can prevent the user from resizing the textbox altogether:
textarea {
resize: none;
}
I have a modal window popping up, which I want to center relative to the reader's position on the page. The best way to achieve this seems to be with the position fixed/top 50% fix:
.fixed {
position:fixed;
width:100px;
height:100px;
top:50%;
left:50%;
margin-left:-50px;
margin-top:-50px;
}
So far so good, the modal pops up in precise center. See jsfiddle here:
http://jsfiddle.net/cbqN2/
But I want my users to be able to scroll the modal if the content is too long for their screens:
http://jsfiddle.net/xwhMa/1
Any way to achieve this, by nesting divs with different positions, or JQuery as a last resort?
I'm not quite sure if this is what you're asking, but try this:
ul li {font-size:23px}
.fixed {
width:200px;
height:200px;
background:red;
position:fixed;
top:50%;
left:50%;
margin-top:-100px;
margin-left:-100px;
**overflow-y:scroll**
}
Would this not work?
http://jsfiddle.net/demchak_alex/cbqN2/3/
having your modal have a container that holds the content and clips it at a fixed height? then the user can scroll in the modal, instead of worrying about a jQuery solution to scroll the outside the modal until it hits the bottom, then stick to the bottom, etc. etc.
It's just a peculiarity of position: fixed :) which is .. well, to always stay fixed on the screen. If you want it to appear in the center but move when a user scrolls the page simply use position: absolute; not fixed. Like so: http://jsfiddle.net/skip405/cbqN2/2/