I have a website where users can submit posts, when they do it they recieve alert message (success or warning). Im displaying alert messages on top of the page and im using position: absolute so that it can't move things around when it pops up. And everything is great and its all working but my SIGN UP/OUT button is showing inside my alert box and not behind it like my whole navigation.
Here is it how Sign Up button is showing in front of alert message
And I want the Sign Up/Out button to show behind the alert message, like other navigation elements.
Sign up button css:
.navbar-brand, .navbar-inverse .navbar-nav > li > a {
color: #778489;
text-shadow: 0 0px 0 rgba(0, 0, 0, 0.0);
font-weight: normal;
text-transform: uppercase;
font-size: 15px;
letter-spacing: .05em;
position: relative;
}
li.sign-up {
background: transparent;
border: none;
font-weight: 400;
border-radius: 0px;
box-shadow: none;
color: #ffffff;
text-decoration: none;
text-shadow: none;
padding: 0px 8px;
text-transform: uppercase;
}
Alertbox CSS
.alertMsg {
font-size: 16px;
line-height: 1.5em;
display: flex;
justify-content: center;
width: 100%;
transition: background 0.5s ease 0s;
height: 55px;
padding: 12px;
position: absolute;
}
.alertMsg i {
font-size: 18px;
margin-right: 10px;
margin-bottom: 5px;
}
Sign up HTML:
<li class="sign-up"><a data-toggle="modal" href="#signOut"><span class="white">Link Text</span></a></li>
I will be really thankful for any help, I've been dealing with this problem for some time. Have a great day!
Try using z-index which specifies the stack order of HTML elements. If one z-index is higher than another z-index then it will stack on top of it like a layer. Let me know if this works out. Also feel free to post up a a working demo of your code for better troubleshooting.
.navbar-brand, .navbar-inverse .navbar-nav > li > a,
li.sign-up{
z-index:3000; /* Number doesn't matter as long as it's higher than the .alertMsg z-index */
}
.alertMsg,
.alertMsg i{
z-index:9999; /* Will be above anything below 9999 */
}
Related
I'm quite new to web development and am making a website for myself. I've come across an issue regarding buttons on my website where the text underline for a button doesn't go away. For some reason, even after applying text-decoration: none !important; it's still there.
A bit of background on what I'm trying to do
I've added two buttons that look the same, but they link to different things. This is because I want the links to change on mobile. In the CSS media query I've specified which button displays on mobile devices. The original buttons are fine, but the ones I want to use on mobile devices have a purple underline for some reason.
I'd love some help to have this sorted out because the underline makes the button look a bit odd when displayed on mobile. I've attached some images and code for one of the buttons below.
Images:
Code:
This is the HTML for a pair of the buttons:
<div class="cont3_left_wrapper">
<h2 class="hd2_1">Header Text</h2>
<p>
Body Text
</p>
<a href="#/" id="header_button_3">
<button type="button" class="btn_chat">Let's Chat</button>
</a>
<a href="#/" id="header_button_3_mob">
<button type="button" class="btn_chat_mob" onClick="location.href='contact.html'">Let's Chat</button>
</a>
</div>
This is the CSS for the buttons:
.btn_chat {
padding: 13px 0 11px 0;
background-color: #E84855;
border-radius: 4px;
border: none;
text-decoration: none;
text-align: center;
font-size: 24px;
font-weight: 700;
color: white;
box-shadow: 0px 2.0407px 20.407px rgba(0, 0, 0, 0.25);
margin-top: 35px;
width: 270px;
}
.btn_chat_mob {
display: none;
padding: 13px 0 11px 0;
background-color: #E84855;
border-radius: 4px;
border: none;
text-align: center;
font-size: 24px;
font-weight: 700;
color: white;
box-shadow: 0px 2.0407px 20.407px rgba(0, 0, 0, 0.25);
margin-top: 35px;
width: 270px;
}
#media screen and (max-width: 480px) {
.btn_chat {
display: none;
width: 100%;
}
.btn_chat_mob {
display: block;
width: 100%;
text-decoration: none !important;
}
}
.btn_chat_mob {
display: inline-block;
width: 100%;
}
Since Your button is inside [a tag] and it has underlined as default CSS you should apply following CSS to [a tag] also it should work..
a {
text-decoration: none;
outline: none;
}
a:hover {
outline: none;
}
a:focus {
outline: none;
}
I have a 'Download' button on my HTML webpage and I have set some attributes for it.
Whenever I refresh my page, the button appears like this, very rarely:
Text Outside the Button
But then, it will look like this and this is the normal-looking button:
Normal Button
.navbar-download-btn {
position: absolute;
right: 4%;
top: 5.7%;
color: white;
background-color: blue;
border: 2.2px solid white;
padding: 0.8%;
border-radius: 3.5px;
outline: none;
cursor: pointer;
font-weight: bolder;
font-family: Noto Sans KR, sans-serif;
letter-spacing: 0.7px;
transition: 0.7s;
}
<button class="navbar-download-btn nonindex">Download</button>
I think there might be a problem in the padding of the download button, Increase the padding from the right and also try running this code in other browsers, this had been a problem for me too earlier but sometimes it could just be your browser...
text-align: center;
margin-right:
I have a list of CSS to format my link button but it appears only working in Chrome but not IE, any ideas, the hover and everything works just not the link itself
thanks in advance
CSS
.button {
background-color: #4CAF50;
border-radius: 50%;
width: 170px;
height: 170px;
color: white;
padding: 4px 8px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
cursor: pointer;
}
.button1 {
position: absolute;
margin-top: 0px;
margin-left: 400px;
background-color: white;
color: white;
border: 4px solid #83b739;
}
.button1:hover {
background-color: #83b739;
color: white;
}
HTML
<button class="button button1">link</button>
It's probably not even a CSS issue, but rather an issue with nesting interactive elements like that.
Don't put a link inside a button. That's just bizarre. Use just the <a> element and style that.
I'm not exactly sure what would have caused your problem, however is is most likely due to a css/html nesting problem, where multiple css styles interact with the nested elements differently on different browsers? It is better to simply remove the button element in the html and just style the <a> tag to look like a button. By doing this the code is less complicated, you should have fewer problems with styles and nested elements, and this is how most make link buttons anyway. Here is an example of how I made a link button in a recent project, some of the stylings are missing (custom fonts, etc) but it shows that you don't need the button tag, it works better without it, and how to make a button with just the <a> tag.
.btn:link,
.btn:visited {
display: inline-block;
padding: 10px 30px;
font-weight: 300;
text-decoration: none;
color: white;
border-radius: 200px;
border: 3px solid #1A75BB;
margin: 20px 20px 0px 0px;
transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}
.btn:hover,
.btn:active {
background-color: #14598e;
border-color: #14598e;
}
.btn-full:link,
.btn-full:visited {
background-color: #1A75BB;
margin-right: 20px;
}
.btn-full:hover,
.btn-full:active {
background-color: #14598e;
}
.btn-ghost:link,
.btn-ghost:visited {
color: black;
border-color: #14598e;
}
.btn-ghost:hover,
.btn-ghost:active {
color:white;
}
Why use AnyMath?
What problems can AnyMath solve?
It’s not just about IE. Such link-inside-button does not work in Firefox too.
If you really (think twice) need this to be a button instead of just a link, remove the explicit link from your button and wrap the button in a simple form:
<form action="http://example.com/">
<button class="button button1" type="submit">link</button>
</form>
But based on your code, button element is unneeded, and you should just use a link instead:
<a href="http://example.com/" class="button button1">link</button>
I am currently customizing a wordpress theme.
Here my case, through a widget, I generate a div which has several classes :
<div class="col-lg-3 focus-box item-1">...</div>
The parent theme and bootstrap stylesheet already apply respectively properties on focus-box and col-lg-3 classes.
Well, I added to my child-theme stylesheet (which works well for many others things) this :
.item-1 { background-color: orange; }
And this does not work... nothing happen but I tried to do this in my child-theme CSS :
.col-lg-3 (or focus-box) { background-color: orange; }
.item-1 { background-color: orange; }
This way works... I really don't understand anything to what is happening here.
My Child-theme stylesheet is the last one to be load, so It should override all others, isn't it ?
If anyone has a clue, I would appreciate to get it :-)
Thanks in advance for your help.
Sommy
Thanks for your answers.
First, I already tried to use !important it didn't work, it was the same using stronger selector.
I know how to inspect code with my browser, and that's why I told you that my child-theme css was the last one to be loaded because I checked it.
The thing really weird, according to me, is that the result is different if I put col-lg-3 in my stylesheet or not.
I have similar issues with others HTML elements in my code.
To sum up :
My Child-Theme CSS is loaded after the parent-one
I checked it in my browser development tool
I also notice that the place where my CSS properties is change the result, if I put it at the end of my child-theme css it sometimes work example :
{
/* IF I PUT THE SELECTOR .focus-box .service-icon here It doesn't work */
/* SEE THE LAST ELEMENT BELOW */
.focus-box:nth-child(4n+1) .service-icon:hover {
border: 5px solid #e96656;
}
.focus-box:nth-child(4n+2) .service-icon:hover{
border: 5px solid #34d293;
}
.focus-box:nth-child(4n+3) .service-icon:hover {
border: 5px solid #3ab0e2;
}
.focus-box:nth-child(4n+4) .service-icon:hover{
border: 5px solid #f7d861;
}
.focus-box:nth-child(4n+1) .red-border-bottom:before {
background: #e96656;
}
.focus-box:nth-child(4n+2) .red-border-bottom:before {
background: #34d293;
}
.focus-box:nth-child(4n+3) .red-border-bottom:before {
background: #3ab0e2;
}
.focus-box:nth-child(4n+4) .red-border-bottom:before {
background: #f7d861;
}
.focus-box h5 {
margin-bottom: 15px;
color: #404040;
position: relative;
display: inline-block;
text-transform: uppercase;
margin-bottom: 30px;
font-weight: bold;
font-size: 17px;
float: none;
width: 100%;
background-color: rgba(224,82,6,0.2);
}
.other-focuses {
background: url(images/lines.png) repeat-x center;
margin-bottom: 25px;
}
.other-focuses .section-footer-title {
padding: 0 15px;
color: #404040;
font-weight: bold;
}
.other-focus-list {
padding-top: 5px;
margin-bottom: -17px;
}
.other-focus-list ul li {
display: inline-block;
margin-right: 50px;
padding-bottom: 15px;
text-transform: uppercase;
}
.other-focus-list ul li:last-child {
margin-right: 0;
}
.other-focus-list ul li i {
margin-right: 8px;
}
.item-dashboard {
padding: 20px 0 20px 0;
}
.focus-box p {
font-size: 14px;
color: black;
}
/* IF I PUT IT THERE THEN IT WORKS */
.focus-box .service-icon {
margin-bottom: 30px;
width: 145px;
height: 145px;
margin: auto;
border-radius: 50%;
border: 0px solid #ececec;
margin-bottom: 20px;
position: relative;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
Focus Box HTML Code :
<div class="col-lg-3 col-sm-3 focus-box item-dashboard" data-scrollreveal="enter left after 0.15s over 1s">
<div class="service-icon">
<a href="#">
<i class="pixeden" style="background:url(#/wordpress/wp-content/uploads/2015/10/cle_main_2.png) no-repeat center;width:100%; height:100%;"></i> <!-- FOCUS ICON-->
</a>
</div>
<!-- FOCUS HEADING -->
</div>
The question is why my child-theme CSS doesn't correctly override the parent one ? Why the place of my css element affect the result (I know the place affect if you override a property, but here it doesn't look like this...)
Thansk again for you help.
I finally overcame this issue by reviewing my style sheet loading priority and so on.
Thanks everyone.
I made a CSS menu but the individual tabs, or rather a row of tabs, seems to be overlapping each other. I used white-space: pre-wrap with a width on the tab menu itself:
html > body > div#header > div#header-bottom-left > ul.tabmenu {
position: absolute;
top: 75px;
left: 700px;
width: 620px !important;
}
#header #header-bottom-left .tabmenu li {
font-family: "Courier New", Courier, monospace !important;
text-transform: uppercase;
letter-spacing: 2px;
font-variant: small-caps;
font-size: 11px;
padding: 5px;
margin-right: 16px;
background: url(%%buttons%%) repeat-x;
border: 1px solid black;
white-space: pre-wrap;
margin-bottom: 20px;
}
In general, don't style the LI for menus, style the A tag and use display:block or inline-block
not sure if this is what you want but I think you may be missing a float: left in your li
code: http://jsfiddle.net/vT5vd/
BTW lists are fantastic for menus and are used so almost exclusively!
The tabs are treated just like a line of text. The line spacing is set to the height of the text, causing the larger tabs to overlap. To correct this just add a
line-height: 1.8;
line to the css file in the tabs list item section. Also. you can put a break or paragraph tag in the list of tabs to control where they wrap to the next line and avoid splitting a tab.
ul.tabs li a
{
font: normal 18px Verdana;
line-height: 1.8;
text-decoration: none;
position: relative;
padding: 0px 8px;
border: 1px solid #CCC;
border-bottom-color:#AAA;
color: #000;
background: #F0F0F0 url(tabbg.gif) repeat-x 0 0;
border-radius: 2px 2px 0 0;
outline:none;
}