I'm finishing a webpage using wordpress as a CMS. and my client asked me to put an image/button at the very top of the page.aligned to the main navigation menu.
That's OK, I did it but what happened is this:
when I use different screen resolution, the buttons do not stay aligned with the very top of the page
I've tried to use "Position: fixed", but with that, the buttons move with the page and I want them to stay at the top of the page and don't scroll along with the page.
How can I do that? Can someone help me? Thanks!!!
.buttons {
position: absolute;
left: 85%;
z-index:905;
margin-top:0
}
.buttonLang {
position: relative;
z-index: 910;
}
.buttonZone {
position: relative;
z-index: 915;
top: -107px;
left: 100px;
}
.selectLang {
display: none;
position: absolute;
left: 0;
bottom: 5px;
right: 0;
background-color: rgba(0,0,0,1);
}
#buttonLang:hover img {
opacity: 1;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: /*#2893CC;
*/#FFFFFF;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,1);
padding: 12px 16px;
z-index: 1;
font-family: Calibri;
}
.dropdown:hover .dropdown-content {
display: block;
line-height: 200%;
}
</head>
<body>
<body bgcolor="#E1E1E1">
<div class="buttons">
<div class="buttonLang">
<div class="dropdown">
<img src="http://www.jourdan.org.br/wp-content/uploads/button-lang.png" alt="" title=""/>
<div class="dropdown-content">
<img src="http://localhost/wp-content/uploads/2016/10/flag-bra.png" width="30"alt="" title=""/> Português</br>
<img src="http://localhost/wp-content/uploads/2016/10/flag-esp.png" width="30"alt="" title=""/> Español</br>
<img src="http://localhost/wp-content/uploads/2016/10/flag-usa.png" width="30"alt="" title=""/> English
</div>
</div>
</div>
<div class="buttonZone">
<img src="http://www.jourdan.org.br/wp-content/uploads/button-sgvzone.png" alt="" title=""/>
</div>
<!-- begin snippet: js hide: false console: true babel: false -->
Add this to your CSS:
.post > .post-content > .wpb_row > .wpb_column {
position: static;
}
.buttons {
position: absolute;
right: 10%;
top: 0;
z-index: 905;
margin-top: 0px;
}
However I don't understand why you don't move the buttons HTML into the header. When you resize the browser, the buttons overlap the navigation and this can't be corrected with just a few lines of CSS.
Try position: absolute; instead. Also top: 0px; should keep it stuck there.
body{position :relative;} .button{position:absolute; top:0px; left:10px;}
Align them to the right instead of left :)
.buttons {
position: absolute;
right: 10%; /* for example, adjust how you need */
z-index:905;
margin-top:0
}
Related
I'm using google icons. But when scrolling the page, the icon position is in front of the navbar.
Icon position is using relative position because I want the icon position vertically centered, but it makes the icon located in front of the navigation bar when scrolling, I want the icon located behind the navbar. This is the screenshot of the website
#navbar {
overflow: hidden;
background-color: #151b54;
color: #fff;
position: sticky;
top: 0;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
i.material-icons {
position: relative;
top: 4.5px;
padding: 2px;
padding-right: 6px;
}
/* only to simulate scrolling */
#tri>div~div {
padding-bottom: 2000px;
}
<section id="navbar">
<a class="active">Home</a>
Site Map
FAQ
Article
</section>
<section id="main-home">
<div id="tri">
<div>
<h1>ARTICLE</h1>
<p>Interesting articles by Dustin Ivander</p>
</div>
<div style="text-align:right;">
<a href="./article/home">
<h3>Go to ARTICLE<i class="material-icons">arrow_forward_ios</i></h3>
</a>
</div>
</div>
</section>
Use a negative z-index on i.material-icons
#navbar {
overflow: hidden;
background-color: #151b54;
color: #fff;
position: sticky;
top: 0;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
i.material-icons {
position: relative;
top: 4.5px;
padding: 2px;
padding-right: 6px;
z-index: -1;
}
/* only to simulate scrolling */
#tri>div~div {
padding-bottom: 2000px;
}
<section id="navbar">
<a class="active">Home</a>
Site Map
FAQ
Article
</section>
<section id="main-home">
<div id="tri">
<div>
<h1>ARTICLE</h1>
<p>Interesting articles by Dustin Ivander</p>
</div>
<div style="text-align:right;">
<a href="./article/home">
<h3>Go to ARTICLE<i class="material-icons">arrow_forward_ios</i></h3>
</a>
</div>
</div>
</section>
What you should do is add z-index:-1 to your style sheet for anything that you want to stay on top.
i.material-icons {
position: relative;
top: 4.5px;
padding: 2px;
padding-right: 6px;
z-index: -1;
}
You can include z-index for the icon, and make its position to be relative. The higher the number of z-index, the higher the object will be placed on z-axis.
For instance, an icon with z-index:2 will be placed on top of another icon with z-index:1. Make sure to position the element in order for z-index to function. [You may refer to this image for better illustration]
Ive got a product page with a smaller image of the product.
Now I want to show a bigger version of this image with a colored background covering the whole page, while I hover the smaller image.
The problem is, that the bigger image flickers while I move the mouse around.
My CSS:
#zoomed-product-img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(162, 130, 192, 0.8);
z-index: 0;
visibility: hidden;
}
#zoomed-product-img img {
display: block;
margin: auto auto;
}
.productsdetail-image:hover~#zoomed-product-img {
visibility: visible;
}
My HTML:
<div class="productdetails">
<div class="productsdetail-image">
<img src="/assets/images/products/{{page.name}}.png" alt="Produktbild">
</div>
<div class="productsdetail-info">
</div>
<div id="zoomed-product-img">
<img src="/assets/images/products/{{page.name}}.png" alt="Produktbild">
</div>
Can you help me? Maybe my way of thinking is wrong.
I think it flickers because when I show the bigger image, it is above (z index) the small one and I am not hovering the image anymore so it disappears.
I would also love to solve this with javascript, if you can give me any advice.
You need to specify dimensions for the container of the image. This is why it is flickering. I also used display: none; and display:block to hide and show the images.
.productdetails {
position: relative;
}
#zoomed-product-img {
display: none;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: -1;
}
/* This is the product detail image styles */
.productsdetail-image {
display: block;
height: 200px;
width: 200px;
}
.productsdetail-image:hover img {
display: none;
}
.productsdetail-image:hover + #zoomed-product-img {
display: block;
}
HTML
<div class="productdetails">
<div class="productsdetail-image">
<img src="https://placeimg.com/200/200/animals" alt="Produktbild">
</div>
<div id="zoomed-product-img">
<img src="https://placeimg.com/300/300/animals" alt="Produktbild">
</div>
<div class="productsdetail-info">
</div>
Demo:
http://jsfiddle.net/n07bt46y/
Please check this in full page
$(document).ready(function(){
$('.productsdetail-image img').hover(function() {
$(this).hide();
$('#zoomed-product-img ').show(500);
});
$('#zoomed-product-img .close').click(function(){
$(this).parent().hide();
$('.productsdetail-image img ').show();
});
});
.productsdetail-image img {
width: 150px;
height: auto;
transition: all 0.5s ease;
}
#zoomed-product-img {
display: none;
position: absolute;
width: 100%;
height: 100%;
background-color: red;
}
#zoomed-product-img span.close {
position: absolute;
color: #fff;
cursor: pointer;
top: 20px;
right: 20px;
}
#zoomed-product-img img {
position: absolute;
width: 300px;
height: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: aUto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="productdetails">
<div class="productsdetail-image">
<img src="https://placeimg.com/300/300/animals" alt="Produktbild">
</div>
<div id="zoomed-product-img">
<span class="close">close</span>
<img class="zoom-img" src="https://placeimg.com/300/300/animals" alt="Produktbild">
</div>
<div class="productsdetail-info">
</div>
Are you wanna build something like that? Hoppefully that fiddle can help you
What is happening
What I want to happen
I want the icon-x-circle to be horizontally centered and on the same line as "Rename" but be right-aligned (probably 30px away from the right end of the header). If someone could let me know how to do that it would be greatly appreciated!
Something to note:
The icon-x-circle itself is not centered. For some reason Fontastic icons seem to add extra space at the bottom. So this is another reason why I'm struggling to horizontally center icon-x-circle.
My Code
HTML
<div id="popup-rename" class="overlay">
<div class="popup">
<header>
<h1>Rename</h1>
<a class="close icon-x-circle" href="#"></a>
</header>
<div class="content">
<div class="student-name student-rect">
<h1>Student Name</h1>
</div>
<div class="save-button center-children">
<a class="save icon-check-circle" href="#"></a>
</div>
</div>
</div>
</div>
CSS
header{
background-color: #F5F5F5;
padding-top: 15px;
padding-bottom: 15px;
text-align: center;
text-transform: uppercase;
}
header h1 {
margin-top: 10px;
margin-bottom: 10px;
font-weight: 300; /*100, 200*/
}
.icon-x-circle{
color: #E1E1E1;
}
.overlay {
position: absolute;
z-index: 2;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.popup {
margin: 70px auto;
background: white;
width: 50%;
position: relative;
transition: all 200ms ease-in-out;
}
.popup header{
padding: 20px;
}
.close, .save{
transition: all 200ms;
}
.icon-x-circle:hover {
color: #B6B6B6;
}
JSFiddle
One method for aligning elements is to use position: absolute;:
.icon-x-circle {
position: absolute;
right: 0px;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}
You can use absolute positioning and put the button wherever you want.
first, make header a relative container
header{
position: relative;
}
Then you can make the button absolute
header a{
position: absolute;
right: 30px;
top: 10px
}
You can mess with right and top to move the button wherever.
https://jsfiddle.net/49abesy2/1/
My website, http://dev.markzanghi.com, is rendering incorrectly in firefox and i don't know why.
Every other browser, including IE renders it correctly. The link above will display the mistake. Basically, i need two parts to my header for an animation. Below is my CSS
/*
TOP BAR
*/
.topbar {
height: 75px;
background: url('../img/headerBGtop.png') repeat-x;
}
.bottomTopBar {
background: url('../img/headerBGbottom.png') repeat-x;
height: 6px;
position: relative;
top: 64px;
}
.topbar .headerWrapper {
max-width: 924px;
margin: 0 auto;
padding: 0 5px;
}
.bottomHeader {
position: relative;
top: -11px;
left: 0px;
z-index: 1;
}
.headerArrowImg {
width: 924px;
overflow: hidden;
}
.bottomFiller {
position: relative;
top: -24px;
background: url(/img/headerBGbottom);
height: 11px;
}
#leftBottomHeader {
}
#rightBottomHeader {
top: -35px;
}
.logo {
float: left;
margin-top: 13px;
}
.logo img {
height: 55px;
}
.topbarLinks {
float: right;
text-decoration: none;
position: relative;
top: 44px;
z-index: 10;
}
.topbarLinks a{
color: white;
margin-left:25px;
padding: 10px 0px;
}
.topbar .headerArrowImg img {
max-width: none;
position: relative;
left: -200px;
}
And the HTML:
<header>
<div class="topbar navbar-fixed-top" >
<div class="headerWrapper">
<div class="logo">
<img src="img/homeLogo.png" />
</div>
<div class="topbarLinks">
<a id="workLink" href="#"><img src="img/workLink.png" /></a>
<a id="aboutLink" href="#/about"><img src="img/aboutLink.png" /></a>
<a id="contactLink" href="#/contact"><img src="img/contactLink.png" /></a>
</div>
<div id="bottomHeaderWrap" class="bottomHeader">
<div class="headerArrowImg">
<div id="arrowImgWrapper">
<img src="/img/headerArrowImg.png" />
</div>
</div>
</div>
</div>
<div id="leftBottomHeader" class="bottomFiller">
</div>
<div id="rightBottomHeader" class="bottomFiller">
</div>
</div>
</header>
If anyone has any idea why this is not working, please let me know!
Thanks in advance.
I had the same issue with a menu animation a while back.
The "problem" is that Firefox requires an explicit declaration of both X & Y coordinates when one is declared. On several items you have declared a top (Y), but you have not declared a left or right (X).
Add a left:0 or something and you should be fine. Or, since they are position:relative, you could just convert top to margin-top.
This is my jsFiddle http://jsfiddle.net/YrYH6/2/
How can I align the Facebook and Twitter icons with the Logout text?
CSS:
#header_bg {
background: #444444;
height: 20px;
position: absolute;
width: 100%;
z-index: -1;
}
#header {
background: url("http://i.imgur.com/HXC7Q.png") repeat-x scroll center bottom transparent;
height: 30px;
padding: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 2;
}
HTML:
<div id="header">
<div id="header_bg"> </div>
<open style="font-size: 0.7em; color: rgb(255, 255, 255); float: right; margin-top: 7px; margin-right: 75px;">
<img src="http://i.imgur.com/pYAtH.png">
<img src="http://i.imgur.com/LnMhg.png">
Logout
</open>
</div>
The simplest solution, which requires no change to the markup is just to use:
a,img{vertical-align:middle}
Live example: http://jsfiddle.net/tw16/YrYH6/4/
For finer tuning, the alignment seems a bit better if you do this:
img{vertical-align:top}
a{vertical-align:middle}
I put the link in a span and then applied these styles
span{
display:inline-block;
vertical-align:top;
padding:0;
}
Example: http://jsfiddle.net/YrYH6/3/
Remove the open elements, float the a to the left and apply margins - http://jsfiddle.net/edY2Y/