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;
Related
I have referred to many options but still I am not able to apply CSS to my parent container. My table structure is like:
<td>
<div id="div1">
<div id="div2" class="colorMe"></div>
</div>
</td>
Now according to above structure if div2 has class colorMe then I want to color the entire td background in yellow.
I have used CSS like this but not working:
td > div> div.colorMe {
background-color:yellow;
}
Can you please tell me how I can color my td using css?
There is currently no possibility to apply CSS Rules to a parent element. There is in fact the :has Pseudoclass, which is exactly for this kind of issues, but at the moment (Nov 2017) it is not supported by any browser. The only way to achieve this would be with Javascript.
I know that you mentioned only using css but adding some javascript event to change a class is a very well documented approach. There are dozens of examples online and including the the script in your file takes no extra work if you use vanilla.
Here is a small example of changing a parent div's color on a click event
var box2 = document.querySelector('.color2');
box2.addEventListener("click", function() {
this.parentNode.style.backgroundColor = "white";
});
div {
width: 100px;
height: 100px;
border: 2px solid black;
}
.color1 {
background-color: red;
}
.color2 {
background-color: rebeccapurple;
width: 50px;
height: 20px;
}
<div class="color1">
<div class="color2"></div>
</div>
You can kind of emulate the behavior you need with the following trick:
td {
position: relative; /* make the cell a container for positioned children */
}
.colorMe::before { /* cover this container with colored pseudo element */
content: '';
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
background-color:yellow;
z-index: -1;
}
table { /* just to make the example prettier :) */
width: 100%;
height: 100px;
table-layout: fixed;
}
<table>
<tr>
<td>
Just a TD
</td>
<td>
<div id="div1">
<div id="div2" class="colorMe"></div>
</div>
</td>
<td>
Just a TD again
</td>
</tr>
</table>
It won't work, however, if you need to position something absolutely from the .colorMe element itself.
I'm trying to put a banner image (with transparent section) in a div, over a gradient background that I can change dynamically, and then overlay a table on top of it all.
<div style="margin: 0; padding: 0; width: 796px; position: relative; ">
<img src="LeftSlice.gif" style="margin: 0; padding: 0; position: relative; float: left;">
<div style="margin: 0; padding: 0;
background: -webkit-linear-gradient(white, blue);
background: -o-linear-gradient(white, blue);
background: -moz-linear-gradient(white, blue);
background: linear-gradient(white, blue);
">
<img src="MiddleSlice2.gif" style="margin: 0; padding: 0; position: relative; float: left; z-index: 250; ">
</div>
<img src="RightSlice.gif" style="margin: 0; padding: 0; position: relative; float: left; ">
<table style="padding: 0 20px; width: 796px; position: absolute; left:10px; top:10px; z-index: 500 " >
<tr>
<td valign="bottom" align="left"><img src="IFFUlogo.gif" height="80px" width="200px" ></td>
<td valign="top" align="right">About Us | Register | Login</td>
</tr>
<tr>
<td colspan="2" valign="bottom" align="center" style="padding: 30px 0 0 0; color: white; "><h1>Custer County District High School</h1></td>
</tr>
</table>
</div>
I'm getting no gradient (body bg is showing under transparent portion of the banner .gif)
When I look at the element in Firebug, I get this:
element.style {
background: linear-gradient(#FFFFFF, #0000FF) repeat scroll 0 0 rgba(0, 0, 0, 0);
margin: 0;
padding: 0;
}
I don't think we are allowed to post URLs, but if so, I can do so.
Looks like everything inside your divs is either floating or position:absolute. This will cause the divs to collapse in on themselves, so that you can't see the background. Anytime you float something inside of a container that you want to expand to contain its contents, you either need to insert a clear like this:
<div id="myContainer" style="background:red;">
<img id="myFloatingElem" style="float:left;" />
<div style="clear:left;"></div>
</div>
Or better yet, don't do that, and use a Clearfix instead (See http://nicolasgallagher.com/micro-clearfix-hack/ for accompanying css):
<div id="myContainer" class="cf" style="background:red;">
<img id="myFloatingElem" style="float:left;" />
</div>
For position:absolute, neither option will work, you need to specify a height for the parent in this case.
I tested your CSS gradient code and it works. I see the problem is in the float: left of the image inside the div tag with the gradient background but I don't know what output you wish to see because the image files are not available. Maybe you can post it clearly.
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 want to align my images similar to this page: http://nymanssnickeri.se/
My content div is 900px wide. As you can see, image #1 and #3 are located at the edge of the content div. On this page margin is only used on the image in the middle. If there wasnt more than 3 images, i could use first-child selector on the first image and the problem would be solved. But sometimes there will be multiple rows of images. Any ideas how to accomplish this in a good way? Thanks
You can give every image equal horizontal margins, and then on the first and last, add a class and have margin-left: 0 and margin-right:0, respectively. You'll have to play with the margin size / math a bit to get it right.
Example:
#container img { margin: 0 20px; }
#container img.first {margin-left: 0; }
#container img.last {margin-right: 0; }
20px is just a random number I chose. It depends on your image sizes, and how many you have.
Edit:
Math for the margins (check this, just made it up on the fly):
(total container width - total width of all images ) / (total number of images - 1) * 2
If you would like to have three images per row and not have to worry about setting pixel margins to achieve the effect you can do something like this...
Demo: http://jsfiddle.net/ENQTZ/1/
<div>
<span class="a"></span>
<span class="b"></span>
<span class="c"></span>
</div>
<div>
<span class="a"></span>
<span class="b"></span>
<span class="c"></span>
</div>
div {
text-align: center;
margin-bottom: 20px;
}
span {
display: block;
width: 32%;
height: 100px;
background-color: red;
}
.a {
float: left;
}
.b {
float: right;
}
.c {
margin-left: auto;
margin-right: auto;
position: relative;
left: 0px;
top: 0px;
}
If the layout is known ahead of time, including number of photos, etc. You could use a table:
<table width="900"><tr><td><img /></td><td><img /></td>
<td><img /></td></tr></table>
Or you could use a div, and concatenate these to create multiple rows:
<style
div#img-container { width: 900px; }
div#img-container img { display: block; }
img.lft { float: left; }
img.mid { margin: 0 auto; }
img.rgt { float: right; }
</style>
<div id="img-container">
<img class="lft"/>
<img class="mid"/>
<img class="rgt"/>
<br />
</div>
You might need to reset margins, paddings and borders to 0 on the images to use this method, otherwise the images will overflow slightly and not align correctly.
<center>
<div ID="Content" Style="Width:900px">
<center>
<table>
<tr>
<td>
Your image here
<td>
<td>
Your image here
<td>
</tr>
<tr>
<td>
Your image here
<td>
<td>
Your image here
<td>
</tr>
</table>
</center>
</Div>
</center>
Any of this useful to you? This is my template that I use. just add more td tags for more cells, and more tr tags for more rows of images.
Further, You can style your images to the exact size they need to be, but be careful that stretching / squashing might occur
<img ID="Image" src="Image/Cat.png" alt="Cat.png" style="Width:50px;Height:50px" />
I know there are tons of articles all over Google on doing something similar to this, but the problem is that they all vary on the implementation. What I'd basically like to do is have a single div of a fixed width be aligned to the center of my page, with bars on the side stylable to whatever I'd like. In Flex (MXML), I could easily make this happen with something like this:
<mx:HBox width="100%">
<mx:VBox id="sideBarLeft" width="100%"/>
<mx:Panel id="content" width="500"/>
<mx:VBox id="sideBarRight" width="100%"/>
</mx:HBox>
This would give me a design that looks like this:
[sideBarLeft][content][sideBarRight]
The sidebars would expand as the screen area grows, but the content would stay the same, 500px wide.
How would I achieve this in HTML with divs and CSS?
Also, is there a way to set the minimum width of the sidebars? Ie: a size that they couldn't shrink below? (for example: <mx:VBox id="sideBarLeft" width="100%" minWidth="150"/>)
And I apologize for the nature of how much of a novice I am at this stuff. I guess I've spent too much time building applications and too little time with HTML and CSS :)
Is there any particular reason you want to use div's over table cells in this case?
Regardless, I came up with a quick solution you might like:
<html><head>
<style type="text/css">
* { margin: 0; padding: 0; }
body { text-align: center; }
#content { width: 500px; height: 100%; margin: 0 auto;
text-align: left; background: #DDDDDD; overflow: auto; }
.column { width: 50%; position: absolute; top: 0; height: 100%; }
#leftcol { margin-right: 250px; background: #AAAAAA; height: 100%; }
#rightcol { margin-left: 249px; background: #AAAAAA; height: 100%; }
</style>
</head><body>
<div class="column" style="left:0;">
<div id="leftcol">This is the column on the left.</div>
</div>
<div id="content">Your content goes here.</div>
<div class="column" style="right:0;">
<div id="rightcol">This is the column on the right.</div>
</div>
</body></html>
I really minified it to fit nicely on here, but copy and paste that into a file and tell me what you think.
Just be forewarned: using tables is the preferred way to do this, and is perfectly acceptable. There is no problem mixing tables and divs, and styling/positioning tables with CSS. This solution is more of a "workaround", but one thing is for sure - it works.
Edit: #Breakthrough's answer seems like it does exactly what you want using just div's and CSS; I'll just leave my CSS-ified solution with Tables up as an alternative.
<html>
<head>
<style type="text/css">
#main { min-width: 800px; width: 100%; }
#content { width: 500px; background: red; }
.sidebar { background: blue; min-width: 150px; }
</style>
</head>
<body>
<table id="main">
<tr>
<td class="sidebar">Left</td>
<td id="content">Center</td>
<td class="sidebar">Right</td>
</tr>
</table>
</body>
</html>