i have a menu that has the following css:-
#top-navigation {
padding: 45px 0 0 0;
position: relative;
z-index: 200;
float: right;
}
Now i have a notification that is displayed over the top of this menu with the css:-
.SmallBox {
position: absolute;
right: 0;
top: 20px;
padding-right: 30px;
width: 420px;
color: #fff;
font-family: 'Segoe UI',Tahoma,Helvetica,Sans-Serif;
z-index: 9999;
}
the problem is that due to the relative attribute of menu it is giving me problems and the notification box does not totally display over the menu in chrome.
Related
I thought my navigation bar css code bordeless but when I refresh the website window it still shows a blank betwin border of screen and the navigation bar (even I have a width at 100%)
issue screenshot
ul {
position: fixed;
top: 0;
margin: 0;
padding-left: 0;
width: 100%;
background-color: #333;
}
li {
float: left;
list-style-type: none
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
padding-left: 10px;
margin: 0;
text-decoration: none;
}
Thank you for your help.
i added left:0; for ul
ul {
position: fixed;
top: 0;
left:0;
margin: 0;
padding-left: 0;
width: 100%;
background-color: #333;
}
You should use a CSS Reset to prevent automatic browser margins and paddings:
https://meyerweb.com/eric/tools/css/reset/
Write a code from the link at the top of your CSS document
I'm a beginner in Ionic Framework. Recently I have built a page with a swipe-back-button on the left of the navigation bar. This shifts the title a bit to the right: (I have added a red background to the title to illustrate this)
Not using position: absolute:
To center the title, I added the following css code:
ion-title {
font-weight: bold;
position: absolute;
top: 0;
left: 0;
padding: 0 90px 1px;
width: 100%;
height: 100%;
text-align: center;
background-color: red;
}
It works:
Using position: absolute:
The problem is that the title now "covers" the swipe-back button, making it impossible to click on the button.
Any solutions? Thank you in advance.
Try to add position:relative and some z-index value to your back button...
I have created a working snippet to illustrate your problem
div {
position: relative;
}
ion-title {
font-weight: bold;
position: absolute;
top: 0;
left: 0;
padding: 0 90px 1px;
width: 100%;
height: 100%;
text-align: center;
background-color: red;
box-sizing: border-box;
}
button {
width: 20px;
height: 20px;
background: green;
position: relative;
z-index: 99;
}
<div>
<button></button>
<ion-title>About</ion-title>
</div>
I'm using a preset portfolio service called Cargo Collective.
I edited the top padding for the navigation window so that the header wouldn't cover it.
The page now is twice as wide, and has an h-scroll bar now at any reasonable browser width.
I searched through the px padding in the css, however there's nothing glaringly obvious. My conclusion is that something is repeating the 670px width over twice.
Here's a link to the page:
http://cargocollective.com/BrookesEggleston
Here's the code from this section:
/*
* Header / Navigation
*/
.header_img {
position: relative;
left: 20px; top: 20px;
z-index: 15;
}
.nav_container {
background: #ffffff;
line-height: 1.8;
margin: 0px;
padding: 50px 0 20px 20px;
position: fixed;
top: 198px; left: 20px;
white-space: nowrap;
width: 190px;
z-index: 12;
}
/* Enabled via Display Options */
.nav_container.horizontal {
left: auto;
padding: 35px 0 60px 35px;
position: relative;
top: auto;
width: 670px;
z-index: 25;
}
.nav_container.horizontal div {
float: left;
padding-right: 10px;
}
#nav_loadspin {
display: none;
position: fixed;
top: 37px; left: 40px;
z-index: 100;
}
Thank you for any and all help!
Try changing the header CSS to:
.header_img {
position: relative;
padding: 20px 0 0 20px;
z-index: 15;
}
As you're positioning the header with left (rather than with padding), the body's width essentially becomes 100% + 20px. This will create a horizontal scroll regardless of the browser size.
Changing the left position to true padding fixed it for me in Firebug.
I believe this is where the problem is coming from:
Change the left on .header_img
.header_img {
position: relative;
left: 20px; top: 20px;
z-index: 15;
To padding-left
.header_img {
position: relative;
padding-left: 20px; top: 20px;
z-index: 15;
I am having a problem with my website. I created a button that will open a chat. But this button don't stay in the right place in all browser and screen monitors. Due to the browser zoom, the button do not stay like I want.
This is my page: http://www.assembleia.org.br/site/webtv/
The CHAT button needs to be right after the box, like this photo: http://imageshack.us/photo/my-images/20/cssfix.jpg/
But in others browsers, the button goes to right and right.
Here's my css:
<style>
* { /* trying to RESET CSS */
margin: 0;
padding: 0;
list-style: none;
vertical-align: baseline;
}
#tab /* the button CHAT */{
min-width: 50px;
min-height: 19px;
max-width: 50px;
max-height: 19px;
position: absolute;
right: 27%;
/*float: left;*/
top: 350px;
display: block;
cursor: pointer;
background-image: url('http://www.assembleia.org.br/site/wp-content/uploads/2013/01/buttonchat.png');
color: white;
}
#panel /* the panel */ {
min-height: 367px;
position:absolute;
left: 1355px;
top: 171px;
background-color: #D4D4D4;
max-height: 367px;
min-width: 0; /*new line*/
}
#panel .content /* for the chat */ {
min-width: 100px;
text-align: center;
/*margin-right:300px;*/
margin-right: auto;
max-width: 100px;
}
#close /* for the little red X after opening the chat */ {
position: absolute;
left: 1758px;
top: 168px;
background-image: url('http://www.assembleia.org.br/site/wp-content/uploads/2013/01/buttonclose1.png');
text-decoration: none;
}
#share /* for facebook sharing after opening the chat */ {
position: absolute;
left: 1656px;
top: 540px;
font-size: 10px;
font-family: Verdana,sans-serif;
}
</style>
Thx..
use this
#tab {
min-width: 50px;
min-height: 19px;
max-width: 50px;
max-height: 19px;
position: absolute;
right: 50px;
top: 350px;
display: block;
cursor: pointer;
background-image: url('http://www.assembleia.org.br/site/wp-content/uploads/2013/01/buttonchat.png');
color: white;
}
Use position: relative; attribute on your parent wrapper div, then change #tab CSS as follows:
Add position: absolute;
Change top to top: 50%;
Change right to right: 25px;
This was tested using Firebug and should give the desired effect.
I have designed a search box.
In Chrome/ Safari and IE, it displays as I want.
However, in Firefox, the search button isn't inline.
The code is
.form-search .button {
left: 356px;
position: absolute;
top: 4px;
Is there a way to add a -moz- line of code to set the left and top just for firefox?
EDIT - MORE CODE AND IMAGES
.form-search {
background: url("../images/searchbox.png") no-repeat scroll 0 0 transparent;
float: left;
height: 40px;
margin: 20px 0 0 20px;
position: relative;
text-align: center;
width: 400px;
border: 0;
}
.form-search .button {
position: absolute;
left: 356px;
top: 4px;
}
.form-search .input-text {
color: #847D7D;
font-size: 1em;
font-weight: bold;
left: 110px;
position: absolute;
top: 8px;
width: 230px;
border: 0;
}
That is the entire CSS for the search facility.
Firefox display
IE display
Thanks
You are having this problem because your elements are lacking display: inline-block; and you maybe should use relative positioning for this.