I have an unordered html list on:
<ul id="maintab" class="shadetabs">
<li class="selected">selected</li>
<li>not selected</li></div>
I need to use position: relative for "selected" items:
.shadetabs li.selected{
position: relative;
top: 1px;
............
}
Everything is OK so far. But now I want to show a div over all other content of website.
<div id="vertical">
<div id="hoz">
content
</div></div>
#vertical{
position:absolute;
top:50%;
margin-top:-198px;
left:0;
width:100%;
}
#hoz{
width:320px;
margin-left:auto;
margin-right:auto;
height:90px;
border:10px solid #BF0000;
background:#f5f5f5;
text-align:center;padding:10px;
}
Unfortunately, this .shadetabs li.selected is visible trough divs "vertical" and "horizontal". I tried to add style="opacity: 1 !important;" to the "vertical" div but it doesn't help.
Give the element a z-index: 2. That way it will be drawn on top of other positioned content.
Related
I have a background (used style="background-image:url('')) and 2 images.
I need the images to be positioned this way:
First image:
30px from top of the background
15px from the right
Second image
15px from the bottom of the background
15px from the left
my CSS classse:
myItem1 - first image class
myItem2 - second image class
BgGrass - the background
What i've been trying:
.BgGrass {
background-image:url('images/bg/grass.png');
width:800px;
height:480px;
}
.myItem1 {
position:absolute;
bottom: 15px;
left:15px;
}
.myItem2 {
position:absolute;
top:40px;
right:20px;
}
What's wrong?
Update: The solution here provided that I need to add the position:absolute to my background. The problem now is that all the content below this background is moving up inside it and making a total mess.
<div class='BgGrass'>
<img class='myItem1' src='http://cdn.mysitemyway.com/icons-watermarks/simple-black/raphael/raphael_gear-small/raphael_gear-small_simple-black_128x128.png' />
<img class='myItem2' src='http://iconizer.net/files/Brightmix/orig/monotone_close_exit_delete_small.png' />
</div>
<div class="clearfix"></div>
All content here is inside the background
It would have been easier if we could see the original page you're working on (html specifically)
Anyway, assuming this is your html:
<div class='BgGrass'>
<img class='myItem1' src='http://cdn.mysitemyway.com/icons-watermarks/simple-black/raphael/raphael_gear-small/raphael_gear-small_simple-black_128x128.png' />
<img class='myItem2' src='http://iconizer.net/files/Brightmix/orig/monotone_close_exit_delete_small.png' />
</div>
Then the CSS should be:
.BgGrass {
background-image:url('http://www.planwallpaper.com/static/images/744081-background-wallpaper.jpg');
width:800px;
height:480px;
position:relative;
}
.myItem1 {
position:absolute;
top: 30px;
right:15px;
width: 100px;
}
.myItem2 {
position:absolute;
bottom:15px;
left:15px;
width: 100px;
}
CSSfiddle: https://jsfiddle.net/5ndbzg6h/
Issue: you need to add position relative to your parent div.
From definition here
position:absolute The element is positioned relative to its first positioned (not static) ancestor element
By default, BgGrass is static, so you must give him an other position like relative.
.BgGrass {
background-color:red;
position:relative
width:800px;
height:480px;
}
.myItem1 {
position:absolute;
bottom: 15px;
left:15px;
}
.myItem2 {
position:absolute;
top:40px;
right:20px;
}
<div class="BgGrass">
<div class="myItem1">ABC</div>
<div class="myItem2">DEF</div>
</div>
I try to create a grid menu and it looks like below.
My Problem is, that I dont know how to resize the icons, so that they fit, with AngularJs, not with jQuery!
Also I dont know how I can center the icons.
Thanks for your help :)
menu.html
<ion-content id="my_page">
<div class="my_row">
<a class="my_item" href="#/map">
<i class="icon menu_icon ion-android-walk"></i>
</a>
<a class="my_item" href="#/search">
<i class="icon menu_icon ion-android-search"></i>
</a>
</div>
<div class="my_row">
<a class="my_item" href="#/">
<i class="icon menu_icon ion-android-create"></i>
</a>
<a class="my_item" href="#/">
<i class="icon menu_icon ion-android-settings"></i>
</a>
</div>
</ion-content>
css
.my_container{
position: absolute;
top:0;
right:0;
left:0;
bottom:0;
}
.my_row{
height:49.95%;
left:0;
right:0;
background-color:#ffffff;
clear:both;
}
.my_item{
height:100%;
width:49.95%;
background-color:#c0b5b5;
border: 1px solid #ffffff;
float: left;
vertical-align: middle; //dont work :(
text-align: center;
}
i.menu_icon {
font-size: xx-large; //Here i want it to fit, not a final size, but dynamicly
}
Try giving:
i.menu_icon {
font-size: 250%;
}
Here the 250% is relative to the em size and not the height of the parent container. To make them vertically centered, you need to use:
i.menu_icon {
font-size: 250%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
And finally don't forget to give the parent, position: relative:
.my_row {
height:49.95%;
left:0;
right:0;
background-color:#ffffff;
clear:both;
position: relative;
}
Are you sure you need angular code for this? I think its better to use css instead.
To resize your icons you can use width and height properties for example, or do it with padding. To align your icons you can also use paddings, or margins. Another way is to set position: relative to icon and get it appropriate top value
I'm trying to place an icon over a div but the overlaying div is pushing the rest of the contents down. I'm stuck although it should be pretty easy. Please have a look at this fiddle and let me know what I'm doing wrong (apart from using tables in the design!)
body{
background-color: #666;
}
.sizesbg {
background-color:#fff;
-webkit-border-radius: 10px;
border-radius: 10px;
width: 170px;
text-align: center;
}
.soldicon {
background: url("http://www.oroeora.gr/preowned/images/sold_curl_small.png") no-repeat scroll left top transparent;
height: 155px;
left: 0;
top: 0;
width: 170px;
z-index: 2;
}
<table>
<tr>
<td class="sizesbg">
<div style="width:150px; overflow:hidden; max-height:140px; max-width:150px; min-height:100px;">
<img src="http://www.carfolio.com/images/dbimages/zgas/manufacturers/id/843/bmw-logo.png" width="140" height="140">
</div>
</td>
<td class="sizesbg">
<div class="soldicon"></div>
<div style="width:150px; overflow:hidden; max-height:140px; max-width:150px; min-height:100px;">
<img src="http://mcurrent.name/atarihistory/warner_books_logo.gif" width="140" height="140">
</div>
</td>
<td class="sizesbg">
<div style="width:150px; overflow:hidden; max-height:140px; max-width:150px; min-height:100px;">
<img src="http://www.mindxstudio.com/images/mindxstudio-logo-icon.jpg" width="140" height="140">
</div>
</td>
</tr>
</table>
Thanks!
use position:absolute; on the divs, but of course the parent elements need to have position:relative; to stay in the right place
something like this:
http://jsfiddle.net/EESAc/5/
Edit:
This works well in Chrome ... but some other browsers had troubles (eg. Firefox), because for table elements position property is not defined, and you should use a block element instead ... so it works if you use another div around the images and set its position to relative. I added another quick fiddle for an idea:
http://jsfiddle.net/EESAc/9/
Give the class .soldicon a position: absolute; This way the element will be taken out of the document flow and won't affect the other elements.
Try to add the following to your .soldicon css:
position:absolute;
DEMO
Change your css to this:-
.soldicon {
background: url("http://www.oroeora.gr/preowned/images/sold_curl_small.png") no-repeat scroll left top transparent;
display: block;
height: 155px;
left: -7;
top: 0;
width: 170px;
z-index: 2;
position:absolute; // Change to absolute positioning
}
In my case (included popup element is bigger then including element) position: absolute;
didn't work exactly how I needed it (scrolling bar was added onto including element and the included popup wasn't displayed entirely). So the solution was:
position: fixed;
Basically I'm making a navigation bar and due to Jquery doing a lot of resizing to make a website look 'pretty' I don't want to use a horizontal list and so each button is created like so:
<img src="homeicon.png"><span id="homex"><br /><img src="home.png" /></span>
(yes they're all image buttons for good reason)
but the only problem is they're fixed and set to "top 0" at the top of the page and as a result cannot sit next to each other but rather overlap, any idea on how I can I still keep the position to fixed and they top to 0 yet keep them next to each other?
HTML
<div id="top">
<img src="homeicon.png"><span id="homex"><br /><img src="home.png" /></span>
</div>
CSS
#top a.button { position: fixed; top: 0; padding: 12px; background: url('glacial_ice.jpg'); text-decoration: none; color: black; border-radius: 0px 0px 25px 25px; }
#top { position: relative; top:0; padding-left: 25px; }
Init function (runs on $(document).ready())
$('a.button').animate({
height: '+=5px',
}, 20, function() {
$('a.button').animate({
opacity: 0.6,
height: '-=5px',
}, 20);
});
Thanks
Put them all in a container, i.e. id="header", give the header position:fixed;top:0;etc...
Then, for each of the link/buttons give them:
position:relative;display:inline-block;float:left;
if you want them centered, then in the #header use text-align:center; and remove float:left from the links
So the container will be fixed, but the buttons inside will be relative and not overlap.
hope this helps!
very crude example
http://jsfiddle.net/6SCTZ/
<div id="header">
<div class="button">button1</div>
<div class="button">button2</div>
<div class="button">button3</div>
</div>
CSS:
#header { position:fixed;top:0;width:100%;height:30px;background:black; text-align:center }
.button {position:relative;display:inline-block;color:white;margin:0 5px 0 5px;}
Just put whatever elements need to be fixed within a container element (in this case, I'll use a div with an ID of "top_fixed").
Consider the following html:
<div id='top_fixed'>
<a href='http://google.com'>Google</a>
<a href='http://yahoo.com'>Yahoo</a>
</div>
<div id='tall'></div>
Now, the following CSS:
a { display: inline; }
#top_fixed { position: fixed; top: 0; left: 0; width: auto; }
#tall {height: 2000px; background: #000;}
DEMO: http://jsfiddle.net/mHKNc/1/
I know there are several posts about this but none of the solutions are working for me. With that said, my containing div will not grow with my content. I know why this is happening, because it is 'float'ing but even when I use 'clear' it will not expand with the parent div. I've tried using using clear in nearly every element below with no success. Any help would be greatly appreciated.
View Image of problem:
For a live example please visit, http://thehopcompany.com/index.php?id=49
---------------CSS----------------
.product {
width:775px;
margin:0;
padding:0;
margin-top:75px;
margin-left:-8px;
}
.product ol{
margin:0px;
}
.product li{
list-style:none;
margin: 0 0 15px 0;
padding:15px;
border:1px solid #ccc;
height:100px;
color:#000;
}
.product-column-left{
float:left;
width:100px;
height:100px;
}
.product-column-right{
float:left;
width:120px;
border-left:1px solid #ccc;
height:100px;
text-align:center;
}
.product-column-center{
float:left;
width:470px;
min-height:100px;
padding-right:15px;
padding-left:15px;
text-align:left;
padding-bottom:30px;
display:block;
}
.product h2{
font-size:18px;
margin-bottom:5px;
margin-top:0;
}
.product .text-underline{
text-decoration:underline;
}
.description-text{
font-size:12px;
color: #000;
}
.clear{
clear:both;
}
--------------------------HTML--------------------------
<li style="list-style:none;">
<div style="width:750px;" >
<div class="product-column-left">
<img align="left" style="border:0;" src="images/hop-pellets.png" width="100" height="100" />
</div>
<div class="product-column-center" >
<h2><span class="hop-title-text-product">Columbus, Tomahawk and Zeus</span></h2>
<div class="description-text" >Proprietary naming rights sometimes have identical or nearly identical strains being sold under multiple names. Columbus, Tomahawk and Zeus, or the CTZ hops, are the most famous example of this phenomenon. CTZ hops are known as super-alpha hops due to the extremely high percentage of alpha acids they contain, making them ideal bittering additions. Columbus hops can be found alongside Centennial hops in Stone Ruination IPA or in Saranac's Brown Ale.
Proprietary naming rights sometimes have identical or nearly identical strains being sold under multiple names. Columbus, Tomahawk and Zeus, or the CTZ hops, are the most famous example of this phenomenon. CTZ hops are known as super-alpha hops due to the extremely high percentage of alpha acids they contain, making them ideal bittering additions. Columbus hops can be found alongside Centennial hops in Stone Ruination IPA or in Saranac's Brown Ale.
</div>
<div class="product-column-right">
<h2>$0.00</h2>
<img style="margin-top:10px; border:0;" type="image"src="images/add-to-cart-button.png" width="90" height="25" />
</div>
</div>
</li>
</ol>
</div>
Try to add overflow hidden to the parent li
.product li {
....
overflow: hidden;
/*height: 100px;*/
}
The problem with overflow:hidden is it will hide overflowing elements if you have them in your layout. So by using clearfix which is i suppose the best practice you can acheive it like below.
.clearfix:after {
content: " "; /* Older browser do not support empty content */
visibility: hidden;
display: block;
height: 0;
clear: both;
}
Then, basically you just need to add the class in your container elements. More about Clearfix
<li class="clearfix">
<div style="float: left;">
<div class="content">Big content</div>
</div>
</li>
FIDDLE DEMO
Adding a clearfix should solve your problem:
.clear{width: 100%; clear: both; height: 0px; line-height:0px;}
<div class='clear'></div>
.clear{width: 100%; clear: both; height: 0px; line-height:0px;}
<div class='clear'></div>
Add the above div at the very end of your container div (i think after product-column-right) and just before your closing li tag. That should ensure that the div spans the content.
Your product.li style has a height of 100px, so that's going to constrain the box no matter what. Remove that setting (or change it to height:auto) and then add an empty clear div just before the closing li tag and you should be fine.
So your CSS definition would change to:
.product li{
list-style:none;
margin: 0 0 15px 0;
padding:15px;
border:1px solid #ccc;
height:auto;
color:#000;
}
And then the relevant HTML:
<img style="margin-top:10px; border:0;" type="image"src="images/add-to-cart-button.png" width="90" height="25" />
</div>
</div>
<div style="clear:both"></div>
</li>
</ol>
</div>
I was using overflow: for a while with much success - but I had a few problems and decided to go back to this clear fix. If you have any problems - check it out.
http://css-tricks.com/snippets/css/clear-fix/