I am trying to make my images a link but it is not working as the #flare div is conflicting with the rest of the layout could anyone tell me how to fix this?
I want the "flare set how it is at www.industrygaming.co.uk/newindex.php
please help. :)
HTML
<div id="content">
<br /><br />
<div id="flare"></div>
<table class="default" style="width: 1000px" align="center">
<tr>
<td class="content" width="33%"><img src="NewImages/Home/Ghosts.png" height="190px" height="190px" border="0"></td>
<td class="content" width="33%"><img src="NewImages/Home/Clan.png" width="200px" height="80px"></td>
<td class="content" width="33%"><img src="NewImages/Home/Fifa.png" width="200px" height="200px"></td>
</tr>
</table>
</div>
CSS
#content
{
float: left;
width: 998px;
margin: 0;
color: #fff;
font-size: 17px;
font-family: Times, serif;
min-height: 150px;
}
#flare
{
position: absolute;
display: block;
background-image: url("NewImages/Home/Optical-Flare.png");
background-repeat: no-repeat;
background-size:990px 700px;
min-width: 998px;
margin-left: 0px;
margin-top: -155px;
min-height: 700px;
}
I don't know about your design, but it is happening due to "position:absolute" to "div#flare."
So just put below code in your css and it will work. Then modify it as per your requirement.
table.default{position: absolute; top: 550px}
Related
I'm trying to get the text to display over each individual image, I can't figure out why it's not displaying at all. From what I can tell I don't have the text hidden or anything, it's just not displaying on top of the corrisponding images.
I'm very new to html/css so i'm proberly missing someting quite obvious.
<html>
<body>
<table class="index">
<tr>
<td>
<img src="C:\Users\44074\Desktop\Learnnig\Website\Art\Care-Guide.jpg">
Care guides
</td>
<td>
<img src="C:\Users\44074\Desktop\Learnnig\Website\Art\Prop.jpg">
Propagation
</td>
<td>
<img src="C:\Users\44074\Desktop\Learnnig\Website\Art\Trouble.jpg">
Troubleshooting
</td>
</tr>
<tr>
<td>
<img src="C:\Users\44074\Desktop\Learnnig\Website\Art\Easy.jpg">
Easy plants
</td>
<td>
<img src="C:\Users\44074\Desktop\Learnnig\Website\Art\Pilea.jpg">
Pilea
</td>
<td>
<img src="C:\Users\44074\Desktop\Learnnig\Website\Art\Pets.jpg">
Pets & plants
</td>
</tr>
</table>
</body>
</html>
table.index{
table-layout: fixed;
border-spacing: 25px 35px;
font-size: 20px;
color: #575151;
padding-left: 180px;
padding-right: 180px;
}
table.index td {
height: 220px;
width: 360px;
min-width: 200px;
position: relative;
border: 1px solid black;
background-color: #575151;
vertical-align: middle;
text-align: center;
}
table.index td img {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
}
div.index {
width: 100%;
}
You should put your text in an HTML element for example p tag: <p>Easy plants</p>
Give the p element a relative position: position: relative;
This will position it over the absolutely positioned image.
If you happen to change the order of the images and the text elements later, you should give the text elements a higher z-index value than the images.
I am creating a website using an online editor. I have a simple table with two columns and one row. On desktop, it looks great but on mobile I have to scroll left and right to see the content.
I would like to make it responsive with the second column going under the first one on small screen.
Here is my code:
<div style="overflow-x: auto;">
<table style="height: 452px; width: 821px; margin-left: auto; margin-right: auto;">
<tbody>
<tr style="height: 143.6px;">
<td style="width: 280px; height: 143.6px;"><img src="https://storage.googleapis.com/sc-support-web/en-US/GIF/OnBoarding_Snap_Map" width="250" height="409" /></td>
<td style="width: 439px; height: 143.6px;">
<h3 style="text-align: left;"><span style="color: #333333;"><b>It all starts with a test</b></span></h3>
<br />
<p style="line-height: 1.6; text-align: left;"><span style="color: #333333; font-size: large;">This is an example. This is an example. Testing and testing again.</span></p>
</td>
</tr>
</tbody>
</table>
</div>
So on this example, I would like to have the text part going under the picture on small screen. How can I do that please?
Thank you all!
You can use a media query in which you apply display: block; width: 100%; height: auto; to table, tr and td. That way you make them all regular block elements where the tds will flow below each other.
Set the breakpoint as desired. In my snippet I set it to 600px;
And try to avoid inline styles. If you want to use media queries, they are really in your way...
html, body {
margin: 0;
}
table {
height: 452px;
width: 821px;
margin-left: auto;
margin-right: auto;
}
tr {
height: 143.6px;
}
td.x {
width: 280px;
height: 143.6px;
}
td.y {
width: 439px;
height: 143.6px;
}
#media screen and (max-width: 600px) {
table,
tr,
td.x,
td.y {
display: block;
width: 100%;
height: auto;
}
}
<div style="overflow-x: auto;">
<table>
<tbody>
<tr>
<td class="x"><img src="https://storage.googleapis.com/sc-support-web/en-US/GIF/OnBoarding_Snap_Map" width="250" height="409" /></td>
<td class="y">
<h3 style="text-align: left;"><span style="color: #333333;"><b>It all starts with a test</b></span></h3>
<br />
<p style="line-height: 1.6; text-align: left;"><span style="color: #333333; font-size: large;">This is an example. This is an example. Testing and testing again.</span></p>
</td>
</tr>
</tbody>
</table>
</div>
You should not use tables for it. Tables are very inconvenient thing in the terms of responsibility.
Use CSS grid layout for it. In my example, try to resize the screen. When it becomes narrow, columns move one under another. When window is relatively wide, you could see them side-by-side.
https://jsfiddle.net/33fLLdzr/1/
<div class="wrapper">
<div class="box sidebar"><img src="https://storage.googleapis.com/sc-support-web/en-US/GIF/OnBoarding_Snap_Map" width="250" height="409" /></div>
<div class="box sidebar2">
<h3 style="text-align: left;">It all starts with a test</h3>
<p style="line-height: 1.6; text-align: left;">This is an example. This is an example. Testing and testing again.</p>
</div>
</div>
<style>
body {
margin: 40px;
}
.sidebar {
grid-area: sidebar;
}
.sidebar2 {
grid-area: sidebar2;
}
.wrapper {
background-color: #fff;
color: #444;
}
.wrapper {
display: grid;
grid-template-areas:
"sidebar"
"sidebar2"
}
#media only screen and (min-width: 600px) {
.wrapper {
grid-template-columns: 50% 50%;
grid-template-areas:
"sidebar sidebar2"
}
}
</style>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<img class="aligncenter wp-image-4684" src="https://storage.googleapis.com/sc-support-web/en-US/GIF/OnBoarding_Snap_Map" width="250" height="409" />
This is an example. This is an example. Testing and testing again.
</body>
</html>
would you want something like this?
My html and css is like this :
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Data</title>
<style type="text/css">
body {
font-family: 'Arial';
font-size: 9px;
margin-bottom: 100px;
}
div.global{
width: 100%;
font-size: 12px;
}
div.left {
float: left;
width: 50%;
text-align: center;
}
div.right {
margin-left: 80%;
}
div.center {
margin-left: 35%;
width: 485px;
text-align: center;
font-size: 12px;
}
</style>
</head>
<body>
<div class="global">
<div class="left">
<div style="width: 80mm; margin-left: -15px !important;">
data.... <br>
test....
</div>
<hr style="max-width: 80mm; margin-left:0; height:1px; border:none; color:#333;background-color:#333;">
</div>
<div class="right">
<div style="width: 80mm; margin-right: 0 !important">
<table>
<tr style="padding-right:35px">
<td>Lamp</td>
<td align="right">test 1</td>
</tr>
<tr>
<td>No</td>
<td align="right">test 2</td>
</tr>
<tr>
<td>Date</td>
<td align="right">test 3</td>
</tr>
</table>
</div>
<hr style="max-width: 80mm; margin-left:0 height:1px; border:none; color:#333;background-color:#333;">
</div>
</div>
<div class="center">
data 1 2 3<br>
data 4 5 6
</div>
</body>
</html>
..........................................................
I want display table(table in class=right) on the far right
I try
...............
<div style="width: 80mm; margin-right: 0 !important">
..............
But id does not work
Is there anyone who can help me?
Update
Demos is like this :
https://jsfiddle.net/skfd7215/1/
I appreciate this is an older post and I haven't tested this against the code that you have provided (so I can't guarantee it will work for your given scenario at this stage) but I was researching a solution for forcing relative elements to the right hand side via margin-right as well and found this little beauty:
.element {
margin-left: auto;
margin-right: 0;
}
Example codepen here https://codepen.io/jamie-endeavour/pen/GdrZao
Either way I hope you got sorted. It would be cool if you could share your solution since none of the above answers have been accepted!
That's not what margin-right does. margin-right just gives margin to the right hand side of the element. Try inspecting the element in chrome/firefox dev tools to see where the margin is being added.
Assuming your global class spans the width of the page, you can give global:
position: relative;
and right:
position: absolute;
right: 0;
https://www.w3schools.com/css/css_positioning.asp for more about positioning.
You can you flex to send the content right
<div style="width: 80mm; display:flex; justify-content: flex-end">
jsFiddle
So, I'm trying to send an email with information from a user. It should look like this:
But for some reason the css won't work in the email, as it looks like this:
The CSS is as follows:
div.block {
margin: 0;
padding: 0;
padding-bottom: 1.25em;
margin-left: 130px;
}
div.block label {
margin: 0;
padding: 0;
display: block;
font-size: 100%;
padding-top: .1em;
padding-right: .25em;
width: 6em;
text-align: right;
float: left;
}
div.block span {
margin: 0;
padding: 0;
display: block;
font-size: 100%;
}
And my HTML:
<div class="block">
<label>Voornaam:</label>
<span>%voornaam%</span>
</div>
<div class="block">
<label>Achternaam:</label>
<span>%achternaam%</span>
</div>
<div class="block">
<label>E-mailadres:</label>
<span>%email%</span>
</div>
<div class="block">
<label>Telefoon:</label>
<span>%telefoon%</span>
</div>
<div class="block">
<label>Toelichting:</label>
<span>%toelichting%</span>
</div>
<div class="block">
<label>Datum:</label>
<span>%datum%</span>
</div>
CSS in emails is still not supported very well. For the layout you want, using a <table> with inline styles instead of a div-based layout would be the best way to achieve it.
If the images is what you need a table would do fine. You can adjust the padding-left to what you think is best for the layout. You can add a margin-left: 10px or something to the table itself to move the table more to the right.
<table class="emailtable">
<tr>
<td>Voornaam:</td>
<td style="padding-left: 40px;">%voornaam%</td>
</tr>
<tr>
<td>Achternaam:</td>
<td style="padding-left: 40px;">%achternaam%</td>
</tr>
<tr>
<td>E-mailadres:</td>
<td style="padding-left: 40px;">%email%</td>
</tr>
<tr>
<td>Telefoon:</td>
<td style="padding-left: 40px;">%telefoon%</td>
</tr>
<tr>
<td>Toelichting:</td>
<td style="padding-left: 40px;">%toelichting%</td>
</tr>
<tr>
<td>Datum:</td>
<td style="padding-left: 40px;">%datum%</td>
</tr>
A few simple modifications in your CSS will fix that:
div.block {
margin: 0;
padding: 0;
padding-bottom: 1.25em;
margin-left: 130px;
}
div.block label {
margin: 0;
padding: 0;
display: inline-block;
font-size: 100%;
padding-top: .1em;
padding-right: 2em;
width: 6em;
text-align: right;
}
div.block span {
margin: 0;
padding: 0;
display: inline-block;
font-size: 100%;
width: 20em;
}
I prepared a jsfiddle as a demonstration: https://jsfiddle.net/zL2ntzdh/
That said I would like to add that using HTML markup in email messages is a questionable thing. Yes, it does make the message look a bit more shiny. But it comes with huge disadvantages: the message size will get multiplied, the chances of your message being considered SPAM is automatically multiplied, you request ultimate trust from the addressees, so you have to expect that many of them will silently delete the message to prevent security issues.
I am attempting to create a CSS popup, when hovering over an object. This will be an "info" popup, but I want to interact with HTML inside this popup window.
My idea is to create a DIV, and on hover, have a style that grows the div, showing the relevant HTML to interact with. Upon exit of the resized DIV, normal style to shrink the div back to original size. I don't want to use jQuery or equivalent popups, as I need to have the interaction as quick as possible. I don't want to create a popup, that disappears when leaving the item that popped it, before being able to enter and interact with the HTML in the popup.
My concerns are, having multiple of these objects (divs), I am not sure how they would interact with each other when they are resized, as I will probably need to absolute position the divs in an irregular layout.
Are there better ways to go about this?
A good example of what I am attempting to do, is the Netflix web interface, when hovering over a title, and interacting with the popup.
Ok, my Div layout idea, as above, seems to be doing the trick.
I am changing the z index on hover and normal style's ( of 0 for normal, and z of 1 for hover), for each div, and absolutely positioning the div's.
This way, each "hover" hovers on top of all the other collapsed div's. Its doing the trick for me, for now.
I am leaving this as unanswered, if someone can suggest a better way of achieving this, that might be more efficient than my current solution, please add your solution.
<div id="Container" style="position: relative" >
<%--1st div - Blue--%>
</div>
</td>
<td style="padding: 5px; width: 120px; background-color: #0099FF; color: #FFFFFF;" >
This is my Unit<br />
<br />
Unit details<br />
Unit Details 2<br />
<br />
Book Now</td>
</tr>
</table>
</div>
<%--2nd div - Red--%>
<div class="unit2">
<table cellpadding="0" cellspacing="0">
<tr>
<td style="width: 20px" valign="top">
<div style="width: 20px; height: 20px; background-color: #FF3300">
</div>
</td>
<td style="padding: 5px; width: 120px; background-color: #FF3300; color: #FFFFFF;" >
This is my Unit<br />
<br />
Unit details<br />
Unit Details 2<br />
<br />
Book Now</td>
</tr>
</table>
</div>
<%--3rd div - Green--%>
<div class="unit3">
<table cellpadding="0" cellspacing="0">
<tr>
<td style="width: 20px" valign="top">
<div style="width: 20px; height: 20px; background-color: #009933">
</div>
</td>
<td style="padding: 5px; width: 120px; background-color: #009933; color: #FFFFFF;" >
This is my Unit<br />
<br />
Unit details<br />
Unit Details 2<br />
<br />
Book Now</td>
</tr>
</table>
</div>
</div>
CSS >>
.unit1
{
width: 20px;
height: 20px;
overflow: hidden;
position: absolute;
top: 0px;
left: 0px;
z-index: 0;
}
.unit1:hover
{
width: 140px;
height: auto;
z-index: 1;
}
.unit2
{
width: 20px;
height: 20px;
overflow: hidden;
position: absolute;
top: 5px;
left: 35px;
z-index: 0;
}
.unit2:hover
{
width: 140px;
height: auto;
z-index: 1;
}
.unit3
{
width: 20px;
height: 20px;
overflow: hidden;
position: absolute;
top: 35px;
left: 20px;
z-index: 0;
}
.unit3:hover
{
width: 140px;
height: auto;
z-index: 1;
}