I can't figure out how to bring images to front using CSS. I've already tried setting z-index to 1000 and position to relative, but it still fails.
Here's example-
#header {
background: url(http://placehold.it/420x160) center top no-repeat;
}
#header-inner {
background: url(http://placekitten.com/150/200) right top no-repeat;
}
.logo-class {
height: 128px;
}
.content {
margin-left: auto;
margin-right: auto;
table-layout: fixed;
border-collapse: collapse;
}
.td-main {
text-align: center;
padding: 80px 10px 80px 10px;
border: 1px solid #A02422;
background: #ABABAB;
}
<body>
<div id="header">
<div id="header-inner">
<table class="content">
<col width="400px" />
<tr>
<td>
<table class="content">
<col width="400px" />
<tr>
<td>
<div class="logo-class"></div>
</td>
</tr>
<tr>
<td id="menu"></td>
</tr>
</table>
<table class="content">
<col width="120px" />
<col width="160px" />
<col width="120px" />
<tr>
<td class="td-main">text</td>
<td class="td-main">text</td>
<td class="td-main">text</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!-- header-inner -->
</div>
<!-- header -->
</body>
Add z-index:-1 and position:relative to .content
#header {
background: url(http://placehold.it/420x160) center top no-repeat;
}
#header-inner {
background: url(http://placekitten.com/150/200) right top no-repeat;
}
.logo-class {
height: 128px;
}
.content {
margin-left: auto;
margin-right: auto;
table-layout: fixed;
border-collapse: collapse;
z-index: -1;
position:relative;
}
.td-main {
text-align: center;
padding: 80px 10px 80px 10px;
border: 1px solid #A02422;
background: #ABABAB;
}
<body>
<div id="header">
<div id="header-inner">
<table class="content">
<col width="400px" />
<tr>
<td>
<table class="content">
<col width="400px" />
<tr>
<td>
<div class="logo-class"></div>
</td>
</tr>
<tr>
<td id="menu"></td>
</tr>
</table>
<table class="content">
<col width="120px" />
<col width="160px" />
<col width="120px" />
<tr>
<td class="td-main">text</td>
<td class="td-main">text</td>
<td class="td-main">text</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!-- header-inner -->
</div>
<!-- header -->
</body>
Note: z-index only works on positioned elements (position:absolute, position:relative, or position:fixed). Use one of those.
In my case i had to move the html code of the element i wanted at the front at the end of the html file, because if one element has z-index and the other doesn't have z index it doesn't work.
Another Note: z-index must be considered when looking at children objects relative to other objects.
For example
<div class="container">
<div class="branch_1">
<div class="branch_1__child"></div>
</div>
<div class="branch_2">
<div class="branch_2__child"></div>
</div>
</div>
If you gave branch_1__child a z-index of 99 and you gave branch_2__child a z-index of 1, but you also gave your branch_2 a z-index of 10 and your branch_1 a z-index of 1, your branch_1__child still will not show up in front of your branch_2__child
Anyways, what I'm trying to say is; if a parent of an element you'd like to be placed in front has a lower z-index than its relative, that element will not be placed higher.
The z-index is relative to its containers. A z-index placed on a container farther up in the hierarchy basically starts a new "layer"
Incep[inception]tion
Here's a fiddle to play around:
https://jsfiddle.net/orkLx6o8/
Related
Originally, the code worked as planned. The status bars were meant to fill the entire cell and sit right next to the green square. The green box will eventually be a character portrait picture. I tried to round the edges of the green square and as soon as I did, the status bars jumped over and became shorter than the previous 400px. I deleted the border-radius from the green square css, but the status bars didn't go back to their original size/position...
...any ideas?
.header {
width: 100%;
margin: 0 auto;
text-align: center;
}
.w3-light-grey w3-round-xlarge {
width: 700px;
}
#chad {
height: 100px;
width: 100px;
background-color: green;
}
iframe {
height: 300px;
width: 504px;
border: none;
}
.button-col {
width: 252px;
}
<table align="center">
<tr>
<td align="right" colspan="2">
Welcome back, <?=$_SESSION['name']?>!
<i class="fas fa-user-circle"></i>Profile |
<i class="fas fa-sign-out-alt"></i>Logout
</td>
</tr>
<tr>
<td rowspan="3">
<div id="chad"></div>
</td>
<td>
<div class="w3-light-grey w3-round-xlarge">
<div id="hp" class="w3-container w3-round-xlarge w3-red" style="width:100">100/100</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="w3-light-grey w3-round-xlarge">
<div id="mp" class="w3-container w3-round-xlarge w3-blue" style="width:100">100/100</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="w3-light-grey w3-round-xlarge">
<div id="xp" class="w3-container w3-round-xlarge w3-yellow" style="width:100">100/100</div>
</div>
</td>
</tr>
Well...I feel silly...
just added units to the inline styles and the problem was fixed.
I have a table row at the footer which displays images from the database. I want the table row to enter the page from the right and disappear at the left side of the page until all images are displayed. I have used this code for displaying images
app.blade.php
<div class="footer">
<div class="row justify-content-center">
<div class="container">
<div class="">
#foreach($logo as $l)
<!--<div class="footercar" style="margin:6px;">-->
<!-- <img class="" src="https://partners.hotelstore.co.ke/public{{ $l->company_logo }}" style="width:150px; height:100px;">-->
<!--</div>-->
<table class="footercar">
<tr>
<td>
<img class="" src="https://partners.hotelstore.co.ke/public{{ $l->company_logo }}" style="width:150px; height:100px;">
</td>
</tr>
</table>
#endforeach
</div>
</div>
</div>
<div class="mytext">
<p class="footertext">© Copyright <?php //echo date("Y"); ?> Hotel Store Partners</p>
</div>
</div>
app.css
.footer{
position: fixed;
height:150px;
bottom: 0px;
width: 100%;
background-color: #DCDCDC;
text-align: center;
margin-top:-200px;
}
.footercar, table{
background-color:rgb(220,220,220);
animation: moveImage 3s linear infinite;
display:inline;
left: -350px;
}
.footerminicar{
padding: 2px 16px;
}
#keyframes moveImage {
100% {
transform: translateX(calc(100vw + 350px));
}
}
.footertext{
font-size:14px;
color:#000000;
}
I have managed to display the images. The CSS does not seem to work. How do I get it to work?
The easiest way is to use html tag marquee
#ImageSilder img{
height: 200px;
width: auto;
object-fit; cover;
}
<table>
<tfoot>
<tr>
<th>
<marquee id="ImageSilder">
<img src="https://img.freepik.com/free-psd/white-frame-mock-up-wall_23-2148374732.jpg?size=664&ext=jpg" />
<img src="https://img.freepik.com/free-psd/let-s-go-travel-man-looking-his-phone-shoulder-shot_23-2148415994.jpg?size=664&ext=jpg" />
<img src="https://img.freepik.com/free-psd/golden-logo-mockup-luxury_145275-32.jpg?size=664&ext=jpg" />
</marquee>
</th>
</tr>
</tfoot>
</table>
I used foreach loop inside the marquee tags
app.blade.php
<table class="footercar">
<tr class="">
<td>
<marquee id="ImageSilder">
#foreach($logo as $l)
<img class="mimg" src="https://partners.hotelstore.co.ke/public{{ $l->company_logo }}" style="width:150px; height:100px;">
#endforeach
</marquee>
</td>
</tr>
</table>
app.css
#ImageSilder, .mimg{
height: 200px;
width: auto;
padding-left:5px;
}
I am a newbie in HTML and currently working on my University project work and I really need some help. I am using a background box for the "blog-like" website which needs to align title and short text on the left and contents with hyperlinks on the right.
So far I have used a cell to align them but to say the least, it looks very ugly and moreover affects spacing. No matter what I tried I can't change the contents on both sides without a response from another. Is it possible to arrange content somehow another way instead of using a single cell for an entire box and dividing percentage for each side? I have uploaded a picture of the website below
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
Your Personal Guide To Best Hardcore Events
</title>
<style type="text/css">
body {
background: url(http://webprojects.eecs.qmul.ac.uk/at315/background.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
background-attachment: fixed
}
.background {
display: flex;
justify-content: center;
}
div.transbox {
margin: 0px;
background-color: #ffffff;
border: 1.5px solid black;
opacity: 0.6;
filter: alpha(opacity=60);
width: 100%;
max-width: 1300px;
}
</style>
</head>
<body>
<p align="center">
<img src="http://webprojects.eecs.qmul.ac.uk/at315/header.png" style="width:70%;" border="0" alt="" />
</p>
<div class="background">
<div class="transbox">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<th width="75%" align="left">
<h2>
Articles:
</h2>
</th>
<th width="20%" align="center">
<ul style="list-style: none;">
<li>
Homepage
<br />
<br />
</li>
<li>
<small><a href="http://www.qmul.ac.uk" style=
"text-decoration:none">Architects</a></small>
</li>
<li>
<small><a href="https://www.facebook.com" style=
"text-decoration:none">Northlane</a></small>
</li>
<li>
<small><a href="http://www.bbc.co.uk" style=
"text-decoration:none">Attila</a></small>
</li>
</ul>
</th>
</tr>
<tr>
<td align="left">
<h4>
<strong>Architects Rocking Brixton</strong>
</h4>Read our article about Architects headlining their biggest sold-out UK show!
<hr />
</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td align="left">
<h4>
<strong>Architects Rocking Brixton</strong>
</h4>Read our article about Architects headlining their biggest sold-out UK show!
<hr />
</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td align="left">
<h4>
<strong>Architects Rocking Brixton</strong>
</h4>Read our article about Architects headlining their biggest sold-out UK show!
<br />
<br />
</td>
</tr>
</table>
</div>
</div>
</body>
</html>
Main page of the website
In this situations it is best to use flex and max width. It is very good to responsive design so.
.background {
display: flex;
justify-content: center;
}
div.transbox {
margin: 30px;
background-color: #ffffff;
border: 1px solid black;
opacity: 0.6;
filter: alpha(opacity=60);
width: 100%;
max-width: 1000px;
}
Change your browser size, It work good for all sizes. And the best part is if the screen has width < 1000px the table fills all of the screen.
just change this tag:
<table style="padding:0 5% " width = "90%" border="0" cellpadding="0" cellspacing="0">
I have a table with a bunch of the same image in a single row. The image has a height of 21px but the cells of the table have a rendered height of 25px (in Chrome, Safari, and Firefox).
There's nothing else in the table, and from what I can tell, there are no margins, borders, or padding. So why is my table taller than it needs to be?
Here's an example:
http://jsfiddle.net/q6zy17dz/
And here's a simple example of the table:
<table>
<tbody>
<tr>
<td><img src="http://i.imgur.com/b2f5t2B.png"></td>
<td><img src="http://i.imgur.com/b2f5t2B.png"></td>
<td><img src="http://i.imgur.com/b2f5t2B.png"></td>
<td class="datetime"></td>
<td><img src="http://i.imgur.com/b2f5t2B.png"></td>
<td><img src="http://i.imgur.com/b2f5t2B.png"></td>
<td><img src="http://i.imgur.com/b2f5t2B.png"></td>
</tr>
</tbody>
</table>
Bonus question: Is there a way to recreate this layout without using a table (and also without using floats)?
By default, an image within a table gets the computed display:table-cell property.
You should set img { display: block; }
You can do it entirely without tables.
body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
nav {
background-color: skyblue;
position: relative;
text-align: center;
line-height: 22px;
}
.left, .right {
font-size: 0;
position: absolute;
top: 0;
}
.left { left: 0; }
.right { right: 0; }
<nav>
<div class="left">
<img src="http://i.imgur.com/b2f5t2B.png">
<img src="http://i.imgur.com/b2f5t2B.png">
<img src="http://i.imgur.com/b2f5t2B.png">
</div>
<div class="datetime">foo</div>
<div class="right">
<img src="http://i.imgur.com/b2f5t2B.png">
<img src="http://i.imgur.com/b2f5t2B.png">
<img src="http://i.imgur.com/b2f5t2B.png">
</div>
</nav>
It is the line-height property that makes the height of <td> to be 25px. In your example setting a value of 11px or less will make the cells have 21px.
td { line-height:11px;}
Here is jsfiddle.
Because the <img> tag is rendered like an inline element, similarly to letters. There is space below it is for the descenders.
There are few ways to get rid of that space.
Adjust the vertical alignment:
img {vertical-align:top;} /*or*/ img {vertical-align:middle;}
Or, set it as a block element:
img {display:block;}
Or, float it (works in this case, but not recommended):
img {float:left;}
<style type="text/css">
td { border:solid 1px black; margin:0px; padding:0px; }
</style>
<div>
<table>
<tr>
<td><img src="http://i.imgur.com/b2f5t2B.png"></td>
<td><img src="http://i.imgur.com/b2f5t2B.png"></td>
<td><img src="http://i.imgur.com/b2f5t2B.png"></td>
<td class="datetime">foo</td>
<td><img src="http://i.imgur.com/b2f5t2B.png"></td>
<td><img src="http://i.imgur.com/b2f5t2B.png"></td>
<td><img src="http://i.imgur.com/b2f5t2B.png"></td>
</tr>
</table>
</div>
<br>
<div>
<span style="float:left;"><img src="http://i.imgur.com/b2f5t2B.png"></span>
<span style="float:left;"><img src="http://i.imgur.com/b2f5t2B.png"></span>
<span style="float:left;"><img src="http://i.imgur.com/b2f5t2B.png"></span>
<span class="datetime" style="float:left;">foo</span>
<span style="float:left;"><img src="http://i.imgur.com/b2f5t2B.png"></span>
<span style="float:left;"><img src="http://i.imgur.com/b2f5t2B.png"></span>
<span style="float:left;"><img src="http://i.imgur.com/b2f5t2B.png"></span>
</div>
HTML
<table class='titleStatus' id='title'>
<tr>
<td class='lefttop'></td>
<td class='bar'>Punch Data
<img class='minMaxClose' src='images/close.png'>
<img class='minMaxClose' src='images/max.png'>
<img class='minMaxClose' src='images/minimize.png'>
<img class='minMaxClose' src='images/setting.png'></td>
<td class='righttop'></td>
</tr>
</table>
CSS
.minMaxClose{float: right;}
OutPut at IE
Whereas i need output like on Firefox
apply float:left to all images first and then apply float:right to your container containing images
.bar img{
float:left;//for shifting alongside
}
.bar{
float:right;//for shifting entire division to right side
}
http://jsfiddle.net/Am34U/3/ give bar a width of 800px or something, and say you put punch inside a span and give it a span of 300px and float left, and give the span that contains the images a span of 500px and float left too.
HTML
<table class='titleStatus' id='title'>
<tr>
<td class='lefttop'></td>
<td class='bar'>
<span id="punch">Punch Data</span>
<span id="close">
<img class='minMaxClose' src='images/close.png'>
<img class='minMaxClose' src='images/max.png'>
<img class='minMaxClose' src='images/minimize.png'>
<img class='minMaxClose' src='images/setting.png'>
</span>
</td>
<td class='righttop'></td>
</tr>
</table>
CSS
.minMaxClose{
float: right;
}
#close{
background: purple;
width: 400px;
float: left;
}
#punch{
background: orange;
width: 300px;
float: left;
}
.bar{
width: 700px;
background: blue;
}
HTML
<table class='titleStatus' id='title'>
<tr>
<td class='lefttop'></td>
<td class='bar'>Punch Data
<!--[if IE]>
<div class='ico-wrapIE'>
<![endif]-->
<!--[if !IE]>
<div class='ico-wrap'>
<![endif]-->
<img class='minMaxClose' src='images/setting.png'>
<img class='minMaxClose' src='images/minimize.png'>
<img class='minMaxClose' src='images/max.png'>
<img class='minMaxClose' src='images/close.png'>
</div>
</td>
<td class='righttop'></td>
</tr>
</table>
CSS
.ico-wrap{float:right;}
.ico-wrapIE {
position: absolute;
right: 2px;
top: 2px;
}