Button not clickable when top position adjusted - html

For some reason, when i add the 'top: xxx' property in css my button becomes unclickable, and i cant position it correctly. It was working fine before. I have it set up to run joyride onclick, which is a foundation plug in. Not sure whats going on. Here's my html, and link to the site, please inspect element to see code www.omegadesignla.com:
<div class="container">
<header>
<div class="row">
<div class="large-3 small-centered columns"> <!-- large centered -->
<a id="topbutton" class="button large radius button">Take the tour!</a>
</div>
</header>
Here is my css:
#topbutton{
position: relative;
top: 125px;
}

your just missing an href attribute inside the
try this
<a id="topbutton" href="#" class="button large radius button">Take the tour!</a>

Related

Applying z-index to an image

So I'm trying to display an image through my home page in WordPress. I can display it through css, through a widget, but not by adding it as code to my home page.
I've tried applying z-index, as I have an element which displays text images in that section, but nothing will display.
Image html
<div class="fbfp"><img src="http://4309.co.uk/wp-content/uploads/2020/06/IMG_20200601_134623-300x279.jpg" alt="" width="300" height="279" class="size-medium wp-image-16023" /></div>
And html controlling homepage.
<section class="content-
area pt0 "><div id="main"
class="" role="main">
<div
id="shapely_home_parallax-
2" class="widget
shapely_home_parallax">
<section class="cover
fullscreen image-bg">
<div class="parallax-window
fullscreen" data-
parallax="scroll" data-
image-
src="http://4309.co.uk/wp-
content/uploads/2019/0
8/download-2.png" data-ios-
fix="true" data-over-
scroll-fix="true" data-
android-fix="true">
<div class="align-
transform">
<div class="row">
<div class="top-parallax-
section">
Page here
It should be straight forward in WordPress because you just add the code to the text editor on the page.
Css
.fbfp {position:relative; bottom:300px;z-index: 100;}
parallax-window is the operative part here I think.
As you know, z-index only works with element with position: absolute, fixed or relative, and sticky, I suppose.
Add to your CSS
.fbfp /*or '.fbfp img' */ {
position: relative;
z-index: 9999; /* or any your value*/
}
Remember. If any parent element of your image also has z-index - it will be stronger and
decisive around other elements with z-index on it's level.

Strange div positioning

I received HTML & CSS layout that should be working fine. However, I'm experiencing some strange problems for which I'm not sure why do they occur.
At the bottom of the following this website there is slider that should display couple of photos with text and by clicking on arrows it should slide them. The problem is I can't position neither arrows, nor wrapper containing images.
As you can see arrows(CSS classes: .strelica-lijevo and .strelica-desno are currently behind the image wrapper (CSS class: .slike-wrapper) when they should be left (.strelica-lijevo) or right (.strelica-desno).
Code can be seen directly on the website. Any help would be appreciated.
There are some issues with the HTML and CSS - you should either try to contact whoever delivered this slider to get support for implementing it or you could try by yourself as follows (just checked the markup and CSS and maybe this helps):
Your current HTML:
<div class="w-clearfix main-content karta">
<div class="slike-wrapper">
<a class="w-inline-block featured-male-slike karta" href="/zagreb/category/to-see/2/zagreb-is-the-capital-and-the-largest-city-of-croatia/5">
<img class="featured-male-slike" src='/Content/610ddd4a-b9a7-45f8-ac56-66eec5968329.jpg' />
<div class="potpis-mala-slika-featured">
<div class="potpis-ispod-slike">Zagreb is the capital and the largest city of Croatia</div>
</div>
</a>
<a class="w-inline-block featured-male-slike karta" href="/zagreb/category/to-see/2/museum-of-broken-relationships/8">
<img class="featured-male-slike" src='/Content/3a6ee262-676f-4599-9f97-6b9c48136449.jpg' />
<div class="potpis-mala-slika-featured">
<div class="potpis-ispod-slike">Museum of Broken Relationships</div>
</div>
</a>
</div>
<div class="strelica-lijevo"> <img src='/Content/strelica-lijevo.svg' /> </div>
<div class="strelica-desno"> <img src='/Content/strelica-desno.svg' /> </div>
</div>
could be changed into:
<div class="w-clearfix main-content karta">
<div class="strelica-lijevo"> <img src='/Content/strelica-lijevo.svg' /> </div>
<div class="slike-wrapper">
<a class="w-inline-block featured-male-slike karta" href="/zagreb/category/to-see/2/zagreb-is-the-capital-and-the-largest-city-of-croatia/5">
<img class="featured-male-slike" src='/Content/610ddd4a-b9a7-45f8-ac56-66eec5968329.jpg' />
<div class="potpis-mala-slika-featured">
<div class="potpis-ispod-slike">Zagreb is the capital and the largest city of Croatia</div>
</div>
</a>
<a class="w-inline-block featured-male-slike karta" href="/zagreb/category/to-see/2/museum-of-broken-relationships/8">
<img class="featured-male-slike" src='/Content/3a6ee262-676f-4599-9f97-6b9c48136449.jpg' />
<div class="potpis-mala-slika-featured">
<div class="potpis-ispod-slike">Museum of Broken Relationships</div>
</div>
</a>
</div>
<div class="strelica-desno"> <img src='/Content/strelica-desno.svg' /> </div>
</div>
This would just change the order of the elements - 1st the left arrow, than the gallery, than the right arrow - so they're displayed next to each other. Guess this could be changed in another way, but this is the easiest approach withouth having to change too much in the CSS.
In the CSS
.featured-male-slike.karta
{
clear: right;
display: inline;
float: left;
margin-top: 30px;
overflow: hidden;
/* position: absolute; */ /* <--comment position abolute out */
}
comment "position: absolute;" out - you could also remove it, but it's better to keep it just so you can check with whomever created this slider for you, maybe there's some other way to fix the slider as you mentioned it should be working as it is. Because of this position:absolute the gallery would still be displayed above the left arrow, removing it has the purpose to keep the CSS-property float:left for all three elements - left arrow, gallery, right arrow, so they will be displayed next to each other.
Next is up to you - the images are displayed not positioned correctly because they have a different height, and the css for the img is height: auto, meaning that the height for each img depends on the actual calculated height (as both images are scaled down from bigger original images). You could either try to display images with the same size, or you can add css to set a fixed height for both images, e.g.
.slike-wrapper img
{
height:140px;
}
as the left image has a calculated height of 158px and the right image has 140px. As I only tested this directly in the browser's web developer tools, I can't guarantee that this approach would work for you, but you can give it a try.

Positioning element to exact div

I'm facing I think odd problem. I have website http://www.spacemind.ggpro.pl/ar/ and I'm trying to make this top menu (black rectangle) Stick to the left side of my Wrapper div.
<div style="z-index:9999;background-color:#000;right:0px;width:80%;position:absolute;margin: 0px auto;height:100px;color:#fff;">
<div style="padding:20px;">
<a href="index.html">
<img src="img/logo.png">
</a>
</div>
</div>
Now I use value width:80% but I hope that there is some way to stick it to left side of wrapper. I want this menu to be always (no matter what resolution user uses) in the position as in the image below: http://i.stack.imgur.com/QMLvO.jpg
Try this code:
<div style="width:980px;margin:auto;position:relative;">
<div style="z-index:9999;background-color:#000;right:0px;width:100%;position:absolute;margin: 0px auto;height:100px;color:#fff;">
<div style="padding:20px;">
<a href="index.html">
<img src="img/logo.png">
</a>
</div>
</div>
</div>
Of course inline styling is a bad idea. You should put it in some classes.
To the first div that comes immediately after your body tag assign the following property:
left: 0;

make header image to partially overlap fixed nav bar with working buttons

There are two main elements on the page: 'header image' and 'navbar'. The image overlaps the navbar partially using margin.
By default it works fine because of some trick which I don't know.
Image ovelaps the navbar but links in navbar are still working in the area where image is transparent
However once navbar is made fixed (position:fixed after scrolling, by affix plugin) this trick doesn't work anymore - navbar overlaps the image.
My html is the following:
<div class="container brand-img-container">
<img class="brand-img" alt="" src="IMAGEWHICH OVERLAPS PARTIALLY" />
</div>
<div id="nav-wrapper" class="container">
<div class="row">
<div id="nav" class="navbar navbar-static span4">
<div class="navbar-inner">
<ul class="nav pull-left">
<li>Button</li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<h2> R <h2>
</div>
CSS is the following
#nav.affix {
position: fixed;
top: 0;
}
.brand-img-container {
position: relative;
margin-bottom: -80px;
}
You can find it here with the picture (base64)
http://jsfiddle.net/5qYK8/9/
When I try to play with z-index, the image fully overlaps the navbar even in default case and links are not working at all.
You can find it here
http://jsfiddle.net/5qYK8/8/
Is it possible to make image (part of red cross) to overlap the navbar in fixed and not fixed cases with working Button?
Can someone at least explain why Button is working in first case when image does overlap it?
Because you have 1 image rolling over the link in the navigation at at one point, its going to cover the link, so you are going to have to create another link in a fixed <div> using your same jquery script. The link will be transparent, but the spot will be clickable with whatever link you place in it
You will need to create another <div> container, then place <a> link around a <div>, like this:
<div id="toplayer">
<a id="nav1" class="link" href="#"><div class="inner"></div></a>
</div>
You will also have to duplicate the selector ID below and rename it to something like this example.
#nav1.affix {
position: fixed;
top: 0;
z-index: 0;
}
Your CSS will need to have a z-index higher than the div containing the image. In my example, I have made the background blue so you can see it move while testing it.
#toplayer{position:relative;width:85px;height:40px;}
.inner{width:85px;height:40px;background:blue;}
.link {width:85px;height:40px;}
Here is a fiddle with a blue background so you can see it working. Here is a fiddle without the blue so you can see what it should look like.

How to do two rows inside of a Hero-Unit without responsive?

I'm doing a web on Bootstrap and I'm getting into some serious troubles that I can't solve even with Bootstrap documentations. So, this is my code:
<div class="container">
<div class="hero-unit">
<h2>Two Rows</h2>
<div class="row">
<div class="span6">
<center>
<img src="../img/renders/example.png" style="position: absolute; width: 200px; height= 200px; margin-top: 80px">
<img src="../img/covers/some_image.jpg" title="Image title" class="img-rounded propiedades_imagenes">
</center>
</div>
</div>
<div class="span6">
<div class="well" style="margin-top:130px">
<a class="btn btn-large btn-primary" href="#link">
<i class="icon-download"></i> Download</a>
<a class="btn btn-large btn-inverse" href="#random.html" style="margin-left:272px">
<i class="icon-random icon-white"></i></a>
</div>
</div>
</div>
I'm trying to create two rows inside of a Hero-Unit, the thing is it worked when I had the responsive design activated but when I activate it the page just do some crazy stuff with the design in smaller and bigger screens than mine, so I just deleted the link to bootstrap-responsive.css and I put a "class=row" instead of "class=row-fluid", but now it just creates one row instead of two and put all the content of the second row under the first one.
Am I doing something wrong? I know how to do this with responsive, but it messes up all my work.
Image of what I want and what I get with the responsive design: http://i1129.photobucket.com/albums/m518/ZoxSoft/Capturadepantalla2013-08-13alas000037_zps064f71b1.png
I am not familiar with Bootstrap or Hero-unit
but I think that you need another Div with class="row"
it is hard to troubleshoot with out a visual of what is going on and what it is supposed to be doing. but first glance to me says you need another div tag with the class of row.
you have 3 </div> at the end of the code snippet that you gave and only 2 that need to be closed?
NEW
in your first image link it looks like you have a lot of styling but no Title Attribute and no Class Attribute
with out that class attribute your responsive and Hero-Unit won't know to grab it
So I finally figured it out. I created two new classes for each div, one for the left one and another for the right one, I put this code into de first one:
width: 50%;
float:left;
And for the right one:
width: 50%;
float:right;
After that, did a few changes in the margin of the objects to fit in the page and finally got it!