I need some help with header icons. I add icons near logo, and i want to make them with link, but they are not working.I can click on logo, but I can't click on them.
Here is the part of code:
<a id="header_logo" href="{$base_dir}" title="{$shop_name|escape:'htmlall':'UTF-8'}">
<img class="logo" style="margin-bottom:10px;" src="https://www.irankiuparduotuve.lt/img/irankiu-parduotuve.png" alt="{$shop_name|escape:'htmlall':'UTF-8'}" />
</a>
<a href="https://www.irankiuparduotuve.lt/info/kaip-pirkti/#4">
<img style="margin-bottom:10px; position: absolute; top: 13%; left: 23%;" src="https://www.irankiuparduotuve.lt/img/saugu.png" alt="Saugu pirkti!" />
</a>
<a href="https://www.irankiuparduotuve.lt/info/kaip-pirkti/#7">
<img style="margin-bottom:10px; position: absolute; top: 13%; left: 31%;" src="https://www.irankiuparduotuve.lt/img/pristatymas.png" alt="Pristatymas visoje Lietuvoje!" />
</a>
And this is how it looks like on website
it's probably cause by poorly written CSS rules. Your logos are positioned using position:absolute;,which is causing all the trouble. The anchor element <a> is positioned statically, meanwhile the image inside is position:absolute;. Therefore, the anchor element doesnt have any height or width and is unclickble.
What you can do is edit the CSS rules for anchor and image tags:
<a href="https://www.irankiuparduotuve.lt/info/kaip-pirkti/#7" style="
z-index: 11; margin-bottom: 10px;
position: absolute; top: 13%;
left: 31%; display: inline-block;">
<img style="/* margin-bottom:10px; */ /* position: absolute; */
/* top: 13%; */ /* left: 31%; */
/* display: inline-block; */"
src="https://www.irankiuparduotuve.lt/img/pristatymas.png">
</a>
Sorry for poor formatting. Basically you need to apply yout positionin rules to <a> element, not the <img>
Sėkmės!
Related
I'm looking to maintain fixed navbar irregardless of sidebar with it appearing under the navbar as in here with attached top/bottom:
http://codepen.io/redshift7/pen/VaKmjq
<div class="ui bottom attached segment">
<div class="ui inverted labeled icon left inline vertical demo sidebar menu">
Attached segment won't work with fixed navbar where it will stretch through the page. I'd rather see the answer in vue.js.
You need to make following CSS changes for this to work:
.menu {
position: fixed;
top: 0px;
z-index: 10001;
width: 100%;
}
.pusher {
margin-top: 36px;
}
.pushable {
margin-top: 0px !important;
}
Working codepen: here
Maybe I'm missing something obvious here, but so far I've found nothing that makes any sense with this. I have a scrollable div with a canvas inside of it. In FF and IE all works as expected: Using drag scrolling with the mouse, the div scrolls normally. In WebKit, however, things are flipped. If I scroll up, the content moves down, if I scroll down, it moves up. If I scroll with my mousewheel, everything moves in the right direction. It's only using mousedown on the scroll bar that's screwed up. NOTE: I am using a 3rd party library to generate the contents of the canvas, which is where all the inline styles are coming from.
My code is as follows:
#Palette {
height: 420px;
overflow: auto;
}
<div id="Palette" style="position: relative; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); cursor: move;">
<canvas width="268" height="420" tabindex="0" style="position: absolute; top: 0px; left: 0px; z-index: 2; -webkit-user-select: none; cursor: move;">
This text is displayed if your browser does not support the Canvas HTML element.</canvas>
<div style="position: absolute; overflow: auto; width: 268px; height: 420px; z-index: 1;">
<div style="position: absolute; width: 1px; height: 1px;"></div>
</div>
<div style="position: absolute; overflow: auto; width: 268px; height: 420px; z-index: 1;">
<div style="position: absolute; width: 1px; height: 700px;"></div>
</div>
</div>
This is apparently an issue with WebKit 36. It is solved in 37.
I am looking to center a div that is absolutely positioned inside of an overflow div.
Here is my HTML. Fiddle
<header class="contain960">
<div class="brand_logo"></div>
<nav>
<ul>
<li class="active">Boats</li>
<li>Cars</li>
<li>Powersports</li>
<li>RV's</li>
<li>Consignment</li>
</ul>
</nav>
</header>
<div class="site_line top"></div>
<div class="site_line custom"></div>
<div class="site_line bottom"></div>
And the CSS.
section {
position: relative;
max-width: 1280px;
min-width: 960px;
width: 100%;
overflow: hidden;
}
.site_line {
position: absolute;
width: 1280px;
height: 1px
//Gradient Fill
//Center the DIV;
}
.site_line.top{
top: 0px;
}
.site_line.bottom{
bottom: 0px;
}
The .site_line element should always remain centered in the div even as the section gets smaller than 1280px wide and not be pushed to the left. I've done this before with background images and the background-position property. but can't for the life of me figure it out how to do it with out javascript.
Any help would be fantastic!
Don't use position: absolute;!
Instead use margin: auto;:
.site_line {
margin: auto;
width: 1280px;
height: 1px
//Gradient Fill
}
Why is colorbox not auto-adjusting the width? Instead it is showing a
horizontal scrollbar.
This is the div that is shown inside the model.
<div style="width:900px">
<div style="float:left;width:640px;height:640px;text-
align:center;background-color:#666;">
<img src="xyz.gif" alt="#" />
</div>
<div style="float:left;background-color:#eee;min-width:260px">
Show buttons here that must show
</div>
</div>
How can I make sure that my colorbox model auto-expands to show 900px div
and no scrollbar?
The div is 708px witdth. Where is it getting this value from?
Another problem:
The height is sometimes 34px, sometimes 600px+ even if I click the same link.
This is wrapping divs from firebug:
<div id="colorbox" class="" style="padding-bottom: 42px; padding-right: 42px; display: block; position: absolute; width: 708px; height: 542px; top: 0px; left: 337px;">
<div id="cboxWrapper" style="height: 584px; width: 750px;">
<div id="cboxMiddleLeft" style="float: left; height: 542px;"></div>
<div id="cboxContent" style="float: left; width: 708px; height: 542px;">
<div id="cboxLoadedContent" style="display: block; width: 708px; overflow: auto; height: 522px;">
Somehow the width of the parent divs are getting calculated.
You're specifying a width of 640px.... change that to min-width and then it would be allowed to grow.
By default, the plugin sizes itself to the dimensions of the digital asset you are displaying with it. But this can be overriden.
Consult the plug-in doc-o and pay special attention to the Dimensions section (height, width, etc.) and consider specifying a value of 100%.
ColoBox docs
Hey guys, my first question here on stack overflow. Trying to get something pretty simple to work, I'm sure I'm missing something quite obvious. Still getting used to the "standard" css, too many years working with non-functional ones! Heh.
So, sample of what I'm doing:
<div style="overflow: auto; border: 1px solid">
hello
<div style="position: relative; z-index: 99999; top: 0px; left: 0px;">
<div style="z-index: 99999; overflow-y: hidden; position: absolute; overflow: hidden; height: 200px; left: 0; auto: 0">
<ul>
<li >New</li>
<li >Old</li>
</ul>
</div>
</div>
</div>
In essence: The first div is a container, that I would like to automatically overflow as content is added. Inside of that container, I have a popup menu, which I have simplified here. The popup menu appears (as it should) directly under "hello".
My problem, however, is that instead of the popup menu "coming out" of the parent, as would be expected by the absolute position, it is actually causing a scrollbar to appear on the parent.
I know that if I take otu the "position: relative" it works, but then it no longer appars where I want it (directly under the previous element).
What am I missing here?
EDIT: Sample here: http://marcos.metx.net/OverflowTest.htm
first of all - Inline styling is a big no no.
It is best to include a style sheet and apply it to individual div's via the "id" or "class" attributes.
Please read up on standards compliant css at w3schools
The problem is your overflow property.
auto - "If overflow is clipped, a scroll-bar should be added to see the rest of the content"
What you are looking for is "overflow: visible;"
Using position: absolute instead of relative on that middle div will solve your problem. This gives you (with an added border color on the inner-most div):
alt text http://img.skitch.com/20100211-x8mnu5ds4exphbdbg956cuj6ea.png
And here is the updated source code:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
</head>
<body>
<div style="overflow: auto; border: 1px solid">
hello
<div style="position: absolute; z-index: 99999">
<div style="z-index: 99999; overflow-y: hidden; position: absolute;
overflow: hidden; height: 200px; left: 0; auto: 0;
border: 1px solid red">
<ul>
<li >New</li>
<li >Old</li>
</ul>
</div>
</div>
</div>
</body>
</html>
For more on this, see Absolutely positioned box inside a box with overflow: auto or hidden.