I have a content div displaying an image and a header positioned on/at the top of the content div. The original background for the header (which contains some text) is black with some opacity, when the user hovers over the image/header the background color and text color of the header div change to white/black. However I've found that setting the background to white results in an off gray color instead (regardless of opacity). What should I use to get opacity to work with a white background? Attached is the CSS for what I'm doing. #textWrap (header w/ text) is inside of #gameDisplayBugSmash (an image).
#gameDisplayBugSmash {
height: auto;
width: 50%;
position: relative;
}
#gameDisplayBugSmash:hover #textWrap {
background-color: white;
color: #000;
}
#textWrap {
background-color: rgba(0,0,0, .6);
width: 100%;
height: auto;
z-index: 1;
left: 0px;
top: 0px;
position: absolute;
font-size: 16px;
color: #FFF;
}
<div id = "contentSaver">
<div id = "contentGames">
<div id = "gameDisplayBugSmash">
<img src="images/PortII_DesignMocks-Recovered_0002s_0005_Layer-17-copy-3.png" width="100%" height="auto" id="bugSmash" />
<div id = "textWrap">
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td>
<div id = "bugSmashTitle">Bug Smash</div>
</td>
<td>
<div id = "bugSmashTextD">A final project for one of my coding classes. This was my introduction to using monogame for development.</div>
</tr>
</table>
</div>
</div>
</div>
Related
I need your help,
I can't seem to figure out as to why the div (bottom border) breaks onto the next page when a print preview is done in internet explorer 11:
Either way, if it can done properly, or via another method, id ideally like to get a 1px border around the page (letter-sized, 8.5inches x 11.0inches) with some margins.
Here is the HTML and CSS markup in question:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#page {
margin: 0.25in;
}
html,body {
height: 100%;
margin: 0;
padding: 0;
}
.table {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
}
.table td {
padding: 0;
}
</style>
</head>
<body>
<div style="border:1px solid grey; height: 100%;">
<table class="table" cellspacing="0" cellpadding="0">
<tr>
<td>File Number:</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</div>
</body>
</html>
The problem has to do with the CSS box model. By default, borders are added to the outside of the width/height, so you need to change the box-sizing to border box, which puts the borders on the inside of the width/height:
<div style="border:1px solid grey; height: 100%; box-sizing: border-box">...
If you don't change it to border-box, the div will have a height of 100% + 2px (1px for top border, 1px for bottom border) which causes the overflow to a second page.
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.
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;
<table>
<tr><td>test</td></tr>
<tr>
<td>
<div style= height:200px;">
<div style="border:1px solid yellow; display: inline-block; width:100px">
<img src="orderedList4.png">
</div>
<div align="center" style="border:1px solid green; display: inline-block; width:650px;height:100px;">
<div>center Test Header1</div>
<div>center Test Header2</div>
</div>
<div align="right" style="border:1px solid red;display: inline-block; width:100px">REL 1.0</div>
</div>
</td>
</tr>
</table>
In the above code, the image size is 75*75 pixels.
I want to have all the three cells to have a height of 100 pixels.
I want the image to be centered and left aligned.
The middle text to centered.
Third text to centered and right aligned.
I could not make it working.
Inline styles are a nightmare to maintain, and you should generally be trying to keep presentation separate from the content. I've moved all the styles out of the actual tags, and since you're using a table and refer to each div as a cell, I'm guessing you meant to have each one an actual cell.
<style>
.product_table {
width: 850px;
}
.product_table td {
height: 100px;
border: solid 1px #000;
vertical-align: middle;
}
.product_table .image {
width: 100px;
border-color: yellow;
text-align: left;
}
.product_table .title {
/* Automatically sizes its width */
border-color: green;
text-align: center;
}
.product_table .release {
width: 100px;
border-color: red;
text-align: right;
}
</style>
<table class="product_table">
<tr>
<th colspan="3">test</th>
</tr>
<tr>
<td class="image">
<img src="orderedList4.png" />
</td>
<td class="title">
<div>center Test Header1</div>
<div>center Test Header2</div>
</td>
<td class="release">
REL 1.0
</td>
</tr>
</table>
The top row is probably a table heading though, so you should consider moving that out of the table as a h2 or whatever level it'll be used in. And make sure a table is the most appropriate element here – unless you're going to have multiple rows of whatever this item is, you might be better off just using divs without tables.
I have a Asp Table.
Is to possible to fill the single tablecell with 3 backcolors.
I want to fill the tablecell with 30% of red color,40% yellow and 30% of white colr.
Can Fill the single cell in a row like that? then cloud you say how to do that
<table style="width:200px">
<tr>
<td style="width:100%">
<div style="width:30%; background-color:red; float:left;">red</div>
<div style="width:40%; background-color:yellow; float:left;">yellow</div>
<div style="width:30%">white</div></td>
</tr>
</table>
This solution will work when you overflow the table cell also
jsfiddle.net
HTML
<table style="border: solid 1px black;">
<tr>
<td>
<div id="container">
text for the table cell
<div id="Color1" runat="server"></div>
<div id="Color2" runat="server"></div>
<div id="Color3" runat="server"></div>
</div>
</td>
</tr>
</table>
Code Behind
Color1.Attributes.CssStyle("background-color") = "red";
Color1.Attributes.CssStyle("width") = "30%";
Color2.Attributes.CssStyle("background-color") = "yellow";
Color2.Attributes.CssStyle("width") = "40%";
Color2.Attributes.CssStyle("left") = "30%"; // Color1 width
Color3.Attributes.CssStyle("background-color") = "white";
Color3.Attributes.CssStyle("width") = "30%";
Color3.Attributes.CssStyle("left") = "70%"; // Color1+Color2 width
CSS
#container {
position: relative;
width:100%;
height:100%;
}
#Color1 {
position: absolute;
left:0;
top:0;
height: 100%;
z-index:-1
}
#Color2 {
position: absolute;
top:0;
height: 100%;
z-index:-1
}
#Color3 {
position: absolute;
top:0;
height: 100%;
z-index:-1
}
Your best bet is to set the td style to an image with 3 colors
td {
background-image: url('3color.gif');
background-size: 100% 100%;
}