This is my footer menu home button icon, but the home button is displayed without any space in left side.
css
#footer-menu{
margin:0px;
padding:0px;
width:auto;
}
#footer-menu .homeButton a{
background:url('http://w3schools.com/css/img_navsprites.gif');
background-position:left top;
height:20px;
padding:5px 18px 20px 28px;
border:none;
width:38px;
}
#footer-menu .homeButton a:hover{
background:url('http://w3schools.com/css/img_navsprites_hover.gif');
background-position:0 -45px;
}
I have given padding values, but it will not move to right side. The home button I had got from w3schools. please give good home button.
#footer-menu .homeButton {
margin-left:20px;
}
it is my guess only as you didnot give us any live example like jsfiidle or any snapshots.so it is very hard to guess what you are actually having now and what you want
Related
I have found this awesome menu on codepen. Now I want to use it, but my problem is that I want to place it right-aligned on my website. Unfortunately this menu drops also right. But I want it to drop left. So how could I solve this problem. (Change the opening angle didn't work?)
Thanks for your help.
http://codepen.io/lbebber/pen/pvwZJp
$opening-angle:$pi*2;
change transform property at .menu-open:checked~.menu-item selector
from transform:translate3d(110px*$i,0,0); to transform:translate3d(-110px*$i,0,0);
And change left property to right in .menu class
Updated .menu
.menu{
#extend %goo;
$width:650px;
$height:150px;
position:absolute;
right:50%; /*Changed*/
margin-left:-80px;
padding-top:20px;
padding-left:80px;
width:$width;
height:$height;
box-sizing:border-box;
font-size:20px;
text-align:right; /*Changed*/
}
Codepen
I want to make navigation at the same level as h1 text and make it not movable and resizable. For now navigation is acting like random RWD, going below my h1 text, then changing display from left->right to top->bottom. I was trying to set ul position to static/absolute/fixed, nothing seems to work as I'd like.
JsFiddle example: https://jsfiddle.net/26tx3t3p/1/.
HTML:
<header>
<h1 class="logo"> myexamplesite</h1>
<nav class="primary">
<ul>
<li>info1/</li>
<li>info2/</li>
<li>info3</li>
</ul>
</nav>
</header>
CSS:
.logo{
font-size:36px;
font-weight:bold;
float: left;
display:inline-block;
}
a{
text-decoration:none;
}
.primary ul{
float:right;
display:inline-block;
}
.primary ul li{
float:left;
font-size:18px;
padding:10px 15px 0 0;
}
How to make navigation to be set at beggining position, after resizing window ??
Is there a way to do it, without putting stiff margin/width values ??
Do you mean something like that https://jsfiddle.net/26tx3t3p/3/
i added these css
header {
position:relative;
}
nav {
position:absolute;
right:0;
}
I am creating image which has a link on top with. Image has been set as relative, and the link as absolute on the bottom of the image. Basically it is a link on top of the image with absolute position and fixed widh and height. On hover, background of the link changes it's color. The problem occurs whenever I click on the link: it goes top of the image (on Opera and IE it stays there). Images as examples:In the picture below is a normal state of image with link (on hover background's transparency changes).
In this picture below is a state of a:active of the link.
It stays as absolute element, but changes it position. I have tried applying for a:active these options: copy everything from normal and hover states, position:static;, even tried to place a margin-top with a size that would be required to stay in bottom - no luck.
Here is the css code of it:
.image-with-link {width:300px; height:135px; position:relative; float:left; overflow:hidden;}
.image-with-link a {width:280px; height:18px; position:absolute; bottom:20px; left:0; padding:5px 10px; color:#fff; text-align:left; background: rgba(0,0,0,0.3); overflow:hidden;}
.image-with-link a:hover {background: rgba(0,0,0,0.5);}
(link is no longer needed).
You have conflicting CSS on lines 79 and 194 of custom.css that is overriding the absolute positioning:
You are declaring:
a:active, a:focus {
position:relative;
top:1px;
}
and on line 194:
.kategorijos .vienas a:active {
position:static;
}
Both of these are causing the problem. You want the item to keep position:absolute on :active.
This is your problem:
a:active,
a:focus{
/* Give clicked links a depressed effect. */
position:relative;
top:1px;
}
You overwrite position, but not top in following selector: .kategorijos .vienas a. You should add top: initial for fix.
I assume that position: static is by design here:
.kategorijos .vienas a:active {position:static;background: url('../images/arrow.png') 270px 4px no-repeat rgba(0,0,0,0.5);}
This moves link below image.
Try this, I guess this will work :)
a:active, a:focus {
position: relative;
top: 1px;
}
.kategorijos .vienas a:active {
position: static;
}
I'm having an issue with two of my divs. One of them is fixed (.post), the other is relative(.imageStyle):
.post{
position:fixed;right:0px;top:0px;bottom:0px;width:48%;background:#fff;
color:black;box-shadow: -2px 2px 10px #1f1f1f;text-shadow:none;
overflow:auto;height:100%;z-index:99999
}
.imageStyle{width:45%;position:relative;background:#1f1f1f;
margin:0px;padding:0px;height:100%;z-index:5}
Inside of .post is an implementation of Google Maps V3. In IE & Firefox, the Map displays as expected; when i scroll down in .imageStyle div, .post stays fixed where its supposed to be. However, in Chrome, when I scroll in down inside of .imageStyle, the map stays where its supposed to be, but the rest of the content of .post scrolls with .imageStyle (or behaves as if it was relative).
This is especially weird because on every other page I have with these divs, the content inside of .post behaves properly on ALL browsers. Furthermore, this problem only persists in Chrome.
The Google Maps is an implementation of Google Maps V3 API being served from my IDX vendor. The CSS for their implementation looks like this:
/*** Map Search (Template #1) ***/
#IDX-propTypeTextLinks {display:none;}
#IDX-searchNavWrapper {margin:5px auto; text-align:left;position:relative;}
#IDX-mapPropertyTypes {float:left; width:192px;}
#IDX-mapPropertyTypes select {border:1px #AAA solid; float:left; width:182px;}
/* This link allows a user to save a map search directly */
#IDX-saveMapSearch {float:left;}
#IDX-googleMap {width:100%; height:600px; clear:both; position:relative; overflow:hidden; border:1px #000 solid; margin:10px 0;}
/* This holds the informational text regarding the number of properties found in a given search */
#IDX-mapInfo {width:400px; height:14px; margin:5px 0 5px 0; float:left; left:5px; font-size:11px; text-align:left;}
/* The controls float near the google map and add additional features to the core Google Controls */
#IDX-mapControls {padding:0px; margin:0px;/*width:97px;*/ height:100%; position:relative; top:0; left:0;/* background:url(/images/layout/mapSearch/20- controlBg.jpg) top left repeat-y; border-right:1px #AAA solid;*/visibility:hidden;display:none;height:0px;width:0px;}
#IDX-mapContainer {color:#000; background:#E5E3DF url(http://www.idxco.com/images/layout/gload.gif) top center no- repeat;width:100%;height:602px;}
#IDX-mapContainer a:link, #IDX-mapContainer a:hover, #IDX-mapContainer a:active, #IDX-mapContainer a:visited {color:#000;}
/* The mapWithContainer should normally be #IDX-googleMap width minus #IDX-mapControls width minus border width. In this case, 560 - 96 - 3 = 472px */
.IDX-mapWithContainer {width:464px; height:360px; position:relative; top:0; left:0px;}
.IDX-mapWithoutContainer {width:100%; height:100%;}
#IDX-mapOverlay {width:150px; height:50px; position:absolute; top:10px; right:10px; z-index:500; display:none; background:url(/images/layout/mapSearch/overlay.gif);}
/* Mode switching allows the map to be drawn with different tilesets */
.mapTypeButton {cursor:pointer; margin:0; padding:0; border:0;}
#IDX-modeRow {width:96px; height:131px; position:relative; clear:both; background:url(/images/layout/mapSearch/20-modeBg.jpg);}
#IDX-mapTypeMap {width:76px; height:20px; position:absolute; top:34px; left:10px; background:url(/images/layout/mapSearch/20-modeMap.jpg);}
#IDX-mapTypeSat {width:76px; height:20px; position:absolute; top:56px; left:10px; background:url(/images/layout/mapSearch/20-modeSat.jpg);}
#IDX-mapTypeHyb {width:76px; height:20px; position:absolute; top:78px; left:10px; background:url(/images/layout/mapSearch/20-modeHyb.jpg);}
#IDX-mapTypeTer {width:76px; height:20px; position:absolute; top:100px; left:10px; background:url(/images/layout/mapSearch/20-modeTer.jpg);}
/* The following CSS controls the general search controls */
#IDX-searchForm {margin:0; padding:0;}
#IDX-searchBoxWrapper {width:555px; height:60px; clear:both; margin:0; padding-bottom:20px;}
#IDX-searchBox {width:500px; height:55px; margin:0 auto; float:left; position:relative; left:97px;}
/* This container should be as large as the #IDX-googleMap declaration (minus borders, of course) */
#IDX-mapBasicBox {width:100%;height:600px}
#IDX-mapBasicBox input, #IDX-mapBasicBox select {border:1px #AAA solid;}
#lowPrice, #highPrice, #sqFt, #daysOnMarket, #acres {width:100px;}
/* These elements will be display and need CSS */
#IDX-mapMinPrice {float:left; width:110px; height:40px; margin-top:4px;}
#IDX-mapMaxPrice {float:left; width:110px; height:40px; margin-top:4px;}
#IDX-mapSearchAcres {display:none; float:left; width:110px; height:40px; margin-top:4px;}
#IDX-mapSearchBedRooms {float:left; width:110px; height:40px; margin-top:4px;}
#IDX-mapSearchBathRooms {float:left; width:110px; height:40px; margin-top:4px;}
#IDX-mapSearchBedRooms select {width:100px;}
#IDX-mapSearchBathRooms select {width:100px;}
#IDX-mapSearchHelpText {clear:both; text-align:center; font-size:8pt; filter:alpha(opacity=50); -moz-opacity:.50; opacity:.50;visibility:hidden;}
I've tried tweaking with the position of both the aforementioned divs and the Map CSS and cant seem to get it to work in Chrome.At the moment I am assuming that the problem is somehow related to either the Google Maps API itself, or the CSS for it. Any and all help with this issue would be greatly appreciated.
Edit: Also, I want to mention that the issue does not appear untill the google map has finished loading. In other words, if you are on a slow connection, or if you block the map function, you can see that all the elements behave correctly UNTILL the map is loaded.
So after continued searching, I found a partial solution that dates back almost three years. Apparently the issue is with webkit:
*{-webkit-font-smoothing: subpixel-antialiased !important;
-webkit-transform: none !important;}
This fixes the issue I had with the fixed div, but now I cant "move" through the map (For example: If I'm looking at Miami, FL and I try to click and drag the map, it moves but does not ever load the new map area).
Funny thing is this is an issue that Google was aware of three years ago but still hasn't fixed (The solution above came directly from Google's forums: Issue 1411 Gmaps-api-issues).
I am making a tabbed navigation menu via jQuery in my website. All the individual tabs have the class navBarLink and here's the CSS pertaining to it:
.navBarLink:link,.navBarLink:visited
{
display:block;
height:27px;
width:120px;
color:#FFF;
background-color:#06C;
text-align:center;
padding:4px;
text-decoration:none;
border:0;
margin:2px 2px 0 2px;
}
.navBarLink:hover,.navBarLink:active
{
background-color:#FFF;
color:#06C;
border-bottom-style:solid;
border-bottom-color:#FFFFFF;
border-bottom-width:1px;
}
The problem is that the background color changes when I click on a tab but doesn't change when I hover on a tab. Basically my hover and my click don't work simultaneously. Any idea why this is happening?
http://jsfiddle.net/UnFhQ/
This works. (I removed the :link from the first css code, just so I could see the div's background color...) But click this and let us know what about the code doesn't work.
Thanks