Here is the HTML script of my header:
<div class="header">
<div class="logo"><img src="style/images/logo.png" alt="" /></div>
<div class="toplink">Sign in</div>
<div class="search">
<form class="searchform" runat="server" method="get">
<input type="text" id="s" name="s" value="Search for photos" onFocus="this.value=''" onBlur="this.value='Search for photos'"/>
</form>
</div>
</div>
And here is the CSS script:
.logo {
padding: 30px 0;
}
.logo img {
display: inline;
}
.toplink {
position: absolute;
bottom: 40px;
right: 280px;
font-size: 14px;
}
.search {
position: absolute;
bottom: 10px;
right: 0;
font-size: 14px;
width: 330px;
}
Somehow the Sign in link isn't clickable, but when I remove the absolute position, it works normally. Is there anyway to make the link work while still keeping the position? Any suggestion is appreciated, and thanks in advance.
-Edit-
Turns out the problem lies somewhere else. Actually I'm using masterpage and I created a default ASP page using it. The problem only occurs when I test that ASP page, not the HTML file that I used to create the masterpage. Sorry if I sound complicated but yeah, the problem's sort of complicated to me. Hopefully someone can point out the reason for me.
Try adding z-index:10; to .toplink{...} class.
I have a button inside an absolutely positioned div and had this problem. z-index wasn't enough, I used pointer-events: all instead.
Related
I wanted my h3 to be aligned with my buttons so I made its position absolute and a couple other things. If you want to view the problem you can go here. I don't know anything else I could use to describe the problem. Oh and the show is Once Upon A Time Season 5. Any help will be appreciated greatly.
Try these changes in your html code
<form method="get">
<h3 class="watching_what">
<button class="change" style="float:left;" type="submit" name="episode_num" value="0">Previous</button>
You Are Watching Episode 1
<button class="change" style="float:right;" type="submit" name="episode_num" value="2">Next</button>
</h3>
</form>
And in your css code remove the transform property
.watching_what
{
text-align: center;
color: 003099;
position: absolute;
/* position: element(#target); */
/* transform: translateY(-100%); */
left: 0px;
right: 0px;
padding-top: 18pt;
padding-bottom: 18pt;
}
Please add position and z-index to .change class in your css file. I checked in the browser its working.
.change{
position: relative;
z-index: 100;
}
I need to hide a newsletter form when the user press the sign up button ("Cadastrar" in portuguese) and this is already happening as you may check on my website. However, the success message is rendered with unnecessary line breaks. Why?
I need to fill the entire height of the footer (without fixing the height in the child div, if possible), but the text should be vertically centered in the red box.
You'll probably find easy to check the problem by going to my website, filling the email address field and clicking the button bellow, but here is the HTML rendered there.
<div id="mc4wp-form-1" class="form mc4wp-form mc4wp-form-3571 mc4wp-ajax mc4wp-form-success">
<form method="post" lpformnum="1" _lpchecked="1">
<input type="email" name="EMAIL" class="text" placeholder="Seu email" required="">
<input type="submit" class="bt" value="Cadastrar"><span class="mc4wp-ajax-loader" style="display: none; vertical-align: middle; height: 16px; width: 16px; border: 0px; margin-left: 5px; background: url(/img/ajax-loader.gif) 50% 50% no-repeat;"></span>
<div style="position: absolute; left: -5000px;">
<input type="text" name="_mc4wp_required_but_not_really" value="" tabindex="-1">
</div>
</form>
<div class="mc4wp-response">
<div class="mc4wp-alert mc4wp-success">Obrigado, seu cadastro foi efetuado com sucesso! Por favor verifique seu e-mail.</div>
</div>
</div>
Here is an attempt to reproduce on jsfiddle.
Possible solution add float: left; property to mc4wp-error selector
.mc4wp-error {
background-color: #FEE7ED;
color: #F41952;
border-color: #F41952;
float: left; <----Add this
}
Reason why text is breaking
Newsletter, input and button pushing and breaking the text
Remove float:left from
footer form {
width: 100% !important;
float: left !important; <---Remove this
}
.mc4wp-alert {
position: absolute;
top: 0px;
min-height: 200px;
}
Mobile view and CSS changes max-width:480px
#media (max-width: 480px) {
footer form {
float: left !important; <---Remove this
}
.mc4wp-alert {
position: absolute;
top: inherit;
min-height: 200px;
bottom: -90px;
}
}
If you change:
.mc4wp-alert {
...
...
position: relative;
}
to position: fixed;, you will find that the space is actually occupied by the email text-box and the button. The solution is to use position: absolute;. I tested it in Chrome and IE11.
I'm not having any joy with this so any help would be much appreciated. The basic problem is when I click on Login it presents me with an input box for username but I can't get the focus on the box to enter anything. If I change the css from position:absolute to relative it works but mucks up the layout. Similarly if I remove the code for the About tab it works. I guess there might be something going on with layering as the dropdown for each tab occupies the same space but it defeats me so far. I'm working in Chrome and IE11. It's a personal project so not bothered about other browser compatibility.
Here is the code:
<body>
<style>
.panel div {
opacity:0;
width: 100%;
position:absolute;
top: 34px;
}
.panel .tab-link {
float: left;
width: 20%;
padding: 7px;
background:#ddd;
margin-right: .5%;
text-align: center;
}
.anchor:target + .panel div {opacity: 1;background: #ccc;}
.anchor:target + .panel .tab-link {opacity:1;background: #ccc;}
</style>
<span class="anchor" id="login"></span>
<div class="panel">
<a class="tab-link" href="#login">Login</a>
<div>
<div>
<input name="test" type="text" placeholder="Username or email" value="" autofocus>
</div><br><br><br>
</div>
</div>
<span class="anchor" id="about"></span>
<div class="panel">
<a class="tab-link" href="#about">About</a>
<div><h2>Hello World</h2></div>
</div>
</body>
Alternatively I have a jsfiddle for you.
http://jsfiddle.net/PCaAC/
You need to add z-index:2; to your input in CSS.
As Beardminator stated. A z-index is sufficient. However, I wouldn't use 2. If you skip a number of precedence in a z-index you will leave gaps in your layering. use 1. Just in case you need to layer something else, then you can use 2 and so forth.
.panel .tab-link {
float: left;
width: 20%;
padding: 7px;
background:#ddd;
margin-right: .5%;
text-align: center;
z-index:1;
}
Also, I changed you html a little for a more solid markup. You had an extra div set that wasn't needed
check the fiddle
I just made my search button/icon clickable by adding a transparent button onto the input field. Not sure this is the right way to go about it but I couldn't think of anything else outside of jQuery/javascript which I'm not very experienced with. Seems to work fine except the hidden button isn't totally hidden... I've made the background transparent and said border: none but I can see a little shadow of it. See screenshot below and put on some glasses because it's barely noticeable. Still bugs me very much. I've looked through my stylesheet and can't find any shadow setting for inputs so unsure how to fix this.
HTML:
<div id="SearchForm" style="width: 120px; height: 29px; position: relative; top: 16px; right: 17px; padding-left: 20px;">
<form action="%%GLOBAL_ShopPath%%/search.php" method="get" onsubmit="return check_small_search_form()">
<span class="add-on" style="position: absolute; top: 6px; right: 4px;"><i class="icon-search"></i></span>
<input type="text" class="input-small" name="search_query" id="search_query" placeholder="Search..." value="%%GLOBAL_OriginalSearchQuery%%" title="Search" />
<input type="submit" value="" name="Search" title="Search" style="position: absolute; top: 2px; right: 0; background: transparent; border: none; width: 35px; height: 22px;" />
</form>
</div>
CSS:
input[type="submit"] {
cursor: pointer;
-webkit-appearance:none;
}
That is I guess border-top of the button, or the button is not totally hidden. So you can try this out:
<input type="submit" />
And then use CSS to change the image, to the background-image for the submit button. So when you will click the form will be submitted!
input[type="submit"] {
/* here, you can change the background-image
* background-image: url('../link/to/file.png');
*/
}
If you really wanna get rid of it, then remove the above image, and use it as the background-image of the button. This way you won't have to worry about the button.
You can hide the button using:
input[type="submit"] {
opacity:0.0;
filter:alpha(opacity=00); // for ie..
}
Also, if you provided a link to the website then we might have noticed what was causing the issue, or just the source code.
The title says it all, I have 2 buttons who need to float left,
but when I assign float:left; to the corresponding css, the buttons get "unclickable" they do appear, but I can't interact with them. When I remove the float:left; they do work, but then they're not on the place where I want them to be.
Also my FireBug doesn't give any error messages, and this problem only occurs in Google Chrome. If anyone has any suggestions please share them with me.
Here's a part of the code :
HTML :
<div id="php_beam" class="php_beam">
<form method="post" action="index.php">
<!-- PHP Beam Buttons -->
<input type="submit" name="Previous" value="Vorige" />
<input type="submit" name="Next" value="Volgende" />
</form>
</div>
CSS :
.php_beam
{
width: 950px;
height: 20px;
margin-left: 225px;
margin-top: 5px;
float: left;
}
To be clear, I want to know if there's an other solution instead of using float:left; because that seems to cause the problem.
Try:
.php_beam
{
width: 950px;
height: 20px;
margin-left: 225px;
margin-top: 5px;
}
.php_beam input
{
float: left;
}