I am trying to make the following page responsive. But when I hit 550px width I got the following result. If I go further down the resolution all my stuff will be slanted to the left except for the footer. I am a beginner trying to learn responsive design. I really appreciate all the help I can get. If you can provide a bit of explanation it will be great. All help is deeply appreciated. Thank you in advance.
https://jsfiddle.net/hansheung/Lhyk3s86/1/
CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;" />
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans">
<title>Benefits</title>
<style type="text/css">
body {
width: 100%;
background-color: #ffffff;
margin: 0;
padding: 0;
font-family: 'Open Sans'
}
p,
h1,
h2,
h3,
h4 {
margin-top: 0;
margin-bottom: 0;
padding-top: 0;
padding-bottom: 0;
}
html {
width: 100%;
}
table {
font-size: 14px;
border: 0;
}
/* ----------- responsivity ----------- */
#media only screen and (max-width: 640px) {
/*------ top header ------ */
.main-header {
font-size: 20px !important;
}
.main-section-header {
font-size: 28px !important;
}
.show {
display: block !important;
}
.hide {
display: none !important;
}
.align-center {
text-align: center !important;
padding-top: 20px;
}
.align-left {
text-align: left !important;
padding-bottom: 20px;
}
.no-bg {
background: none !important;
}
/*----- main image -------*/
.main-image img {
width: 640px !important;
height: auto !important;
}
/*-------- container --------*/
.container600 {
width: 460px !important;
}
/*-------- secions ----------*/
/* .section-img img {
width: 640px !important;
height: auto !important;
} */
}
#media only screen and (max-width: 600px) {
/*------ top header ------ */
.main-header {
font-size: 18px !important;
}
.main-section-header {
font-size: 26px !important;
}
/*-------- container --------*/
.container600 {
width: 400px !important;
}
/*-------- secions ----------*/
/* .section-img img {
width: 600px !important;
height: auto !important;
} */
}
.responsive{
width: 100%;
height: auto;
}
#font-face {
font-family: Kollektif Regular;
src: url(http://www.talent-trust.com/public-html/fonts/Kollektif.woff);
}
#font-face {
font-family: Kollektif Bold;
src: url(http://www.talent-trust.com/public-html/fonts/Kollektif-Bold.woff);
}
#font-face {
font-family: Kollektif Italic;
src: url(http://www.talent-trust.com/public-html/fonts/Kollektif-Italic.woff);
}
#font-face {
font-family: Kollektik BoldItalic;
src: url(http://www.talent-trust.com/public-html/fonts/Kollektif-BoldItalic.woff);
}
.text{
color: #2d2a26;
font-size: 16px;
line-height: 28px;
text-align: justify;
}
.singleLine{
line-height:16px;
}
.doubleLine{
line-height:40px;
}
.subtitle{
font-size: 20px;
color:#FF7F30;
}
.text-color{
color: #ffffff;
font-size: 14px;
line-height: 23px;
}
</style>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- header -->
<table width="100%" bgcolor="ffffff">
<tr>
<td >
<table align="center" width="600" class="container600">
<tr>
<td height="10" > </td>
</tr>
<tr>
<td>
<table border="0" align="center" width="600" class="container600">
<tr>
<td class="section-img">
<a href="http://www.talent-trust.com" ><img src="http://www.talent-trust.com/documents/img/j19-ttc_header.png" width="640"/></a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="10"> </td>
</tr>
</table>
</td>
</tr>
</table>
<!-- end header -->
<!-- big banner section -->
<table width="100%" >
<tr>
<td align="center" valign="top" style="background:#ffffff url(http://www.talent-trust.com/documents/img/j19-ttc_banner.jpg);background-repeat:no-repeat;background-position:center;background-size:cover;border-top:0;border-bottom:0;padding-top:150px;padding-bottom:150px">
<table align="center">
<tr>
<td valign="top"></td>
</tr>
</table>
</td>
</tr>
</table>
<!--end banner-->
<table border="0" align="center" width="70%" cellpadding="0" cellspacing="0" class="container600">
<tr>
<td style="line-height: 50px;"> </td>
</tr>
<tr>
<td align="justified" style="color: #053D56; font-size: 40px; font-family: Kollektif; line-height: 28px;">
<p>Member Benefits</p>
</td>
</tr>
<tr>
<td class="doubleLine"> </td>
</tr>
<tr>
<td class="text">
At TTc, we aim to give missionaries the security, physical health, mental health, and wellness support and resources that they need to excel in their calling and stay in the field longer.
</td>
</tr>
<tr>
<td class="doubleLine"> </td>
</tr>
<tr>
<td align="center">
<table border="0" width="70%" align="center" cellpadding="0" cellspacing="0" bgcolor="#ff7f30">
<tr>
<td height="2" style="font-size: 2px; line-height: 2px;"> </td>
</tr>
</table>
</td>
</tr>
</table>
<!-- 2 Column Blog Layout-->
<table width="100%">
<tr>
<td align="center">
<table border="0" align="center" width="100%" cellpadding="0" cellspacing="0" class="container600">
<tr>
<td>
<table width="50%" align="left" cellpadding="80px" cellspacing="0" class="container600">
<tr>
<td class="align-center">
<div>
<p style="color: #053D56; font-size: 30px; font-family: Kollektif; line-height: 28px;">Keeping your costs down</p>
<br>
<p class="text">We know cost is a big deal, so we provide multiple ways to keep costs down:</p>
<br>
<p class="text">
No Claims Bonus – We reward our members for staying healthy, which helps us to keep our premiums down. See how you can save up to 50% of your premium. <a href="http://www.talent-trust.com/benefits/ncb.html" target="blank" >Read more…</a>
</p>
<br>
</div>
</td>
</tr>
</table>
<table width="50%" align="right" cellpadding="80px" cellspacing="0" class="container600">
<tr>
<td class="align-center">
<div >
<p style="color: #053D56; font-size: 30px; font-family: Kollektif; line-height: 28px;">Tailored Services help you THRIVE Long-Term</p>
<br>
<p class="text">We look at what services and technology we can offer that will help our members to stay in the field longer.</p>
<br>
<p class="text">
vHealth – a 24/7 service that connects you to a European based family doctor from anywhere in the world for free. Using an app on your phone, you can video call or have a vHealth doctor visit whenever and wherever you need it. <a href="http://www.talent-trust.com/benefits/vhealth.html" target="blank" >Read more…</a>
</p>
<br>
</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="50" style="font-size: 50px; line-height: 50px;"> </td>
</tr>
</table>
</td>
</tr>
</table>
<!-- end section -->
<tr>
<td class="text">
</td>
</tr>
<tr>
<td class="singleLine"> </td>
</tr>
<tr>
<td class="text">
</td>
</tr>
<tr>
<td class="singleLine"> </td>
</tr>
<tr>
<td class="text">
</td>
</tr>
<tr>
<td class="singleLine"> </td>
</tr>
<tr>
<td class="text">
</td>
</tr>
<tr>
<td class="singleLine"> </td>
</tr>
<tr>
<td class="text">
</td>
</tr>
<tr>
<td class="singleLine"> </td>
</tr>
<tr>
<td height="50" style="font-size: 30px; line-height: 30px;"> </td>
</tr>
</table>
<!-- end section -->
<!-- contact section -->
<table width="100%" bgcolor="#053D66">
<tr>
<td height="40" style="font-size: 40px; line-height: 40px;"> </td>
</tr>
<tr>
<td >
<table width="600" cellpadding="0" cellspacing="0" bgcolor="#ff7f30">
<tr>
<!-- <td height="2" style="font-size: 2px; line-height: 2px;"> </td> -->
</tr>
</table>
</td>
</tr>
<tr>
<td >
<table align="center" width="700" class="container600">
<tr>
<td>
<table width="300" align="left" cellpadding="0" cellspacing="0" class="container600">
<tr>
<!-- logo -->
<td align="right" class="align-center">
<a href="http://www.talent-trust.com" ><img width="200" border="0" style="display: block; width: 200px;" src="http://www.talent-trust.com/documents/img/j19-logo_footer.png" alt="" /></a>
</td>
</tr>
<tr>
<td height="25"> </td>
</tr>
<tr>
<td style="text-align:right;" class="align-left"><img width="24" height="24" src="http://www.talent-trust.com/documents/img/j19-fb_icon.png" ></td>
</tr>
</table>
<table width="2" align="left" cellpadding="20" cellspacing="0" style="border-collapse:collapse;" class="container600">
<tr>
<td class="hide" width="2" height="25"></td>
</tr>
</table>
<table width="250" align="left" cellpadding="0" cellspacing="0" style="border-collapse:collapse;" class="container600">
<tr>
<td align="left">
<div class="text-color">
Email us: abc#hotmail.com
</div>
</td>
</tr>
<tr>
<td height="15" style="font-size: 15px; line-height: 15px; color: #ffffff;">Tel: +604-899-8945</td>
</tr>
<tr>
<td height="33" style="font-size: 33px; line-height: 33px;"></td>
</tr>
<tr>
<td>
<table align="left" cellpadding="0" cellspacing="0">
<tr>
<td class="text-left p1"><img width=24 height=24 src="http://www.talent-trust.com/documents/img/j19-youtube_icon.png" ></td>
<td> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="60"> </td>
</tr>
</table>
<!-- end section -->
Related
I would like to know if there exists a technique to make the text set at the same line or at the same level because what I did is to add a line-height for my two first blocks but if I add a line-height for the others there is still a difference. It creates a weird look because my titles are not the same in each cell.
$(document).ready(function() {
$(".toggler").click(function(e) {
e.preventDefault();
$(this).closest('table').find('[class^="cat"]').toggle();
});
});
a {
color: #002642;
}
.center {
text-align: center;
}
.toggler,
.cat1 {
font-family: 'Varela Round';
color: white;
}
td {
display: block;
width: auto;
border: 1px dotted #c4a77d;
background-color: #c4a77d;
color: white;
margin-bottom: 10px;
}
#media only screen and (min-width: 70em) {
td {
display: table-cell;
border: 1px dotted #c4a77d;
background-color: #c4a77d;
color: white;
margin-bottom: 0px;
}
}
p {
font-family: 'Varela Round';
font-weight: bold;
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="table-layout: fixed; width:100%" width="100%" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>
<table width="100%" class="center">
<tr>
<td style="line-height:100px;">
<p style="vertical-align:middle;">SOCIÉTÉS: 230</p>
</td>
</tr>
<tr>
<td>+ En savoir plus</td>
</tr>
<tr class="cat1" style="display:none">
<td>Part CAC 40 : 90</td>
</tr>
<tr class="cat1" style="display:none">
<td>Part Filiales +100M€: 120</td>
</tr>
</table>
</td>
<td>
<table width="100%" class="center">
<tr>
<td style="line-height:100px;">
<p style="vertical-align:middle;">CONTACTS : 16 700</p>
</td>
</tr>
<tr>
<td>+ En savoir plus</td>
</tr>
<tr class="cat1" style="display:none">
<td>Part CAC 40 : 10 000 </td>
</tr>
<tr class="cat1" style="display:none">
<td>Part Filiales +100M€: 6 700</td>
</tr>
<tr class="cat1" style="display:none">
<td>% contacts IT: 21%</td>
</tr>
</table>
</td>
<td>
<p>EMAIL NOMINATIFS: 16 700</p>
</td>
<td>
<p>OPT OUT: 3%</p>
</td>
<td>
<p>LIGNES DIRECTES: 35%</p>
</td>
</tr>
</tbody>
</table>
All you need is vertical-align:baseline on the table cells. td elements have vertical-align:middle by default.
$(document).ready(function() {
$(".toggler").click(function(e) {
e.preventDefault();
$(this).closest('table').find('[class^="cat"]').toggle();
});
});
a {
color: #002642;
}
.center {
text-align: center;
}
.toggler,
.cat1 {
font-family: 'Varela Round';
color: white;
}
td {
display: block;
width: auto;
border: 1px dotted #c4a77d;
background-color: #c4a77d;
color: white;
margin-bottom: 10px;
vertical-align:baseline;
}
#media only screen and (min-width: 70em) {
td {
display: table-cell;
border: 1px dotted #c4a77d;
background-color: #c4a77d;
color: white;
margin-bottom: 0px;
}
}
p {
font-family: 'Varela Round';
font-weight: bold;
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="table-layout: fixed; width:100%" width="100%" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>
<table width="100%" class="center">
<tr>
<td style="line-height:100px;">
<p style="vertical-align:middle;">SOCIÉTÉS: 230</p>
</td>
</tr>
<tr>
<td>+ En savoir plus</td>
</tr>
<tr class="cat1" style="display:none">
<td>Part CAC 40 : 90</td>
</tr>
<tr class="cat1" style="display:none">
<td>Part Filiales +100M€: 120</td>
</tr>
</table>
</td>
<td>
<table width="100%" class="center">
<tr>
<td style="line-height:100px;">
<p style="vertical-align:middle;">CONTACTS : 16 700</p>
</td>
</tr>
<tr>
<td>+ En savoir plus</td>
</tr>
<tr class="cat1" style="display:none">
<td>Part CAC 40 : 10 000 </td>
</tr>
<tr class="cat1" style="display:none">
<td>Part Filiales +100M€: 6 700</td>
</tr>
<tr class="cat1" style="display:none">
<td>% contacts IT: 21%</td>
</tr>
</table>
</td>
<td>
<p>EMAIL NOMINATIFS: 16 700</p>
</td>
<td>
<p>OPT OUT: 3%</p>
</td>
<td>
<p>LIGNES DIRECTES: 35%</p>
</td>
</tr>
</tbody>
</table>
I a making an HTML email, and I have most of the elements appear as they should. But for some reason, one element I am trying to insert, a small box with an address and a contact doesn't show up like it should.
That grey bar at the bottom with the address should appear the same width as the main white box, and should be surrounded by blue.
My code is:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>BigParser</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body style="margin: 0; padding: 0;">
<table border="1" cellpadding="0" cellspacing="0" width="100%">
<!--main background color, size, etc.-->
<tr bgcolor= "#21A1EC">
<td align="center" style="padding: 40px 0 30px 0;">
<!--this BigParser logo at the top-->
<img src="bigparser.gif" width="186" height="43" style="display:block;" />
</td>
</tr>
<tr bgcolor= "#21A1EC">
<td align="center">
<table border="1" cellpadding="0" cellspacing="0" width="600">
<!--creates main padded content table-->
<tr width=100% bgcolor= "#ffffff">
<td align="center" style="padding-left: 35px; padding-bottom: 40px; padding-top: 40px; font-size: 30px;">
<!--title formatting-->
Lorem ipsum<!--do not delete-->     <!-- centering title fix-->
</td>
</tr>
<tr width="100%" bgcolor= "#ffffff">
<td align="justify" style="padding-left: 35px; padding-bottom: 20; padding-right: 35; font-size: 23px;">
<!--content formatting-->
content text
</td>
</tr>
<tr>
<!--this is the unsub/links box, contains the unsubscribe and links to social media-->
<table align="center" border="1" cellpadding="0" cellspacing="0" width="600">
<tr align="center" >
<!--this contains unsub link and copyright-->
<td bgcolor="50B54D" width="60%">
unsub link
</td>
<td bgcolor="EC552B" width="40%">
social media links
</td>
</tr>
</table>
</tr>
<tr bgcolor="EEEFF1" align="left" style="font-size:15;">
<td style="padding-left:10px; padding-top: 5px; padding-bottom: 5px;">
BigParser | 12020 Sunrise Valley Dr, Sute 101 Reston VA 20191
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
However the address bar does appear to format correctly if i move it above the green and orange boxes,
<table border="1" cellpadding="0" cellspacing="0" width="600">
<!--creates main padded content table-->
<tr width=100% bgcolor= "#ffffff">
<td align="center" style="padding-left: 35px; padding-bottom: 40px; padding-top: 40px; font-size: 30px;">
<!--title formatting-->
Lorem ipsum<!--do not delete-->     <!-- centering title fix-->
</td>
</tr>
<tr width="100%" bgcolor= "#ffffff">
<td align="justify" style="padding-left: 35px; padding-bottom: 20; padding-right: 35; font-size: 23px;">
<!--content formatting-->
content text
</td>
</tr>
<tr bgcolor="EEEFF1" align="left" style="font-size:15;">
<td style="padding-left:10px; padding-top: 5px; padding-bottom: 5px;">
BigParser | 12020 Sunrise Valley Dr, Sute 101 Reston VA 20191
</td>
</tr>
<tr>
<!--this is the unsub/links box, contains the unsubscribe and links to social media-->
<table align="center" border="1" cellpadding="0" cellspacing="0" width="600">
<tr align="center" >
<!--this contains unsub link and copyright-->
<td bgcolor="50B54D" width="60%">
unsub link
</td>
<td bgcolor="EC552B" width="40%">
social media links
</td>
</tr>
</table>
</tr>
</table>
I'm not sure why this is happening, how do I change the code so that the address appears below the green and orange boxes, but stays the same width as the rest of the elements above it?
Move address row to the unsub link/social media links table and make its colspan="2". I hope this is what you are asking for
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>BigParser</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body style="margin: 0; padding: 0;">
<table border="1" cellpadding="0" cellspacing="0" width="100%">
<!--main background color, size, etc.-->
<tr bgcolor="#21A1EC">
<td align="center" style="padding: 40px 0 30px 0;">
<!--this BigParser logo at the top-->
<img src="bigparser.gif" width="186" height="43" style="display:block;" />
</td>
</tr>
<tr bgcolor="#21A1EC">
<td align="center">
<table border="1" cellpadding="0" cellspacing="0" width="600">
<!--creates main padded content table-->
<tr width=100% bgcolor="#ffffff">
<td align="center" style="padding-left: 35px; padding-bottom: 40px; padding-top: 40px; font-size: 30px;">
<!--title formatting-->
Lorem ipsum
<!--do not delete-->    
<!-- centering title fix-->
</td>
</tr>
<tr width="100%" bgcolor="#ffffff">
<td align="justify" style="padding-left: 35px; padding-bottom: 20; padding-right: 35; font-size: 23px;">
<!--content formatting-->
content text
</td>
</tr>
<tr>
<td align="left" valign="top">
<!--this is the unsub/links box, contains the unsubscribe and links to social media-->
<table align="center" border="1" cellpadding="0" cellspacing="0" width="600">
<tr align="center">
<!--this contains unsub link and copyright-->
<td bgcolor="#50B54D" width="60%">
unsub link
</td>
<td bgcolor="#EC552B" width="40%">
social media links
</td>
</tr>
<tr bgcolor="#EEEFF1" align="left" style="font-size:15;">
<td style="padding-left:10px; padding-top: 5px; padding-bottom: 5px;" colspan="2">
BigParser | 12020 Sunrise Valley Dr, Sute 101 Reston VA 20191
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
How can I point the arrow the 'here' row?
I have try putting it in a td tag but makes the row bigger.
https://jsfiddle.net/6vx6033y/
<table cellpadding="4" cellspacing="0" border="0" align="center">
<tr>
<td style=" text-align: right;">test:</td>
<td style=" text-align: left;">-$15.00</td>
</tr>
<tr>
<td style=" text-align: right;">test:</td>
<td style=" text-align: left;">here</td>
</tr>
<tr>
<td style=" text-align: right;">test:</td>
<td style=" text-align: left;">$15.00 </td>
</tr>
<div class="arrow">↙</div>
</table>
you can also use a pseudo element: https://jsfiddle.net/6vx6033y/1/
tr.arrow:after {
content:' \2199';
position:absolute;
font-size:1.5em;
color:red
}
td {
border:solid;
}
<table cellpadding="4" cellspacing="0" border="0" align="center">
<tr>
<td style=" text-align: right;">test</td>
<td style=" text-align: left;">-$15.00</td>
</tr>
<tr>
<td style=" text-align: right;">test:</td>
<td style=" text-align: left;">$0.00</td>
</tr>
<tr class="arrow">
<td style=" text-align: right;">test:</td>
<td style=" text-align: left;">$15.00 </td>
</tr>
<tr>
<td style=" text-align: right;">tset:</td>
<td style="text-align: left;">$0.00</td>
</tr>
</table>
<td style=" text-align: left;">$15.00 <span class="arrow">↙</span></td>
https://jsfiddle.net/eceen7z4/
you can play with nth-child properties, like that:
.arrow2 TR:nth-child(2) TD:nth-child(2):after {
color: red;
content: "↙";
}
<table class="arrow2">
<tr>
<td style=" text-align: right;">test:</td>
<td style=" text-align: left;">-$15.00</td>
</tr>
<tr>
<td style=" text-align: right;">test:</td>
<td style=" text-align: left;">here</td>
</tr>
<tr>
<td style=" text-align: right;">test:</td>
<td style=" text-align: left;">$15.00 </td>
</tr>
</table>
I have 3 tables, cascading one after the other. I have a div, that I want to place on right side of these tables. The height of div may vary according to text inside. Currently the div is displayed below tables, like the image below;
<table class="class1" cellpadding="0" cellspacing="0" style="margin-top: 0px;">
<tr>
<td class="cell1">Cell1</td>
<td class="cell2">Cell2</td>
</tr>
<tr>
<td class="cell1">Cell3</td>
<td class="cell2">Cell4</td>
</tr>
</table>
<table class="class2" cellpadding="0" cellspacing="0" style="margin-top: 0px;">
<tr>
<td class="cell1">Cell5</td>
<td class="cell2">Cell6</td>
</tr>
<tr>
<td class="cell1">Cell7</td>
<td class="cell2">Cell8</td>
</tr>
</table>
<table class="class3" cellpadding="0" cellspacing="0" style="margin-top: 0px;">
<tr>
<td class="cell1">Cell9</td>
<td class="cell2">Cell10</td>
</tr>
<tr>
<td class="cell1">Cell11</td>
<td class="cell2">Cell12</td>
</tr>
</table>
<div class="mydiv">mydiv</div>
But I want to place the div next to tables, so that it can extend downwards.
Here is the working fiddle http://jsfiddle.net/ZHVuf/1/
You should add a container around you table like this :
Html
<div id="container">
<!-- Your table -->
</div>
And make him float left, like your div #myDiv
Css
#container {
float:left;
}
see updated fiddle.
On this second updated fiddle, I added a wrapper with a clearfix !
insertusernamehere commented that you could use overflow:hidden instead of the clearfix, see here for a new working way to do this with less code.
Apply float:left; to all the table and add clear:both; to second and third table.
now you already has float:left; for div just add position:relative;top:0; and see.
OR
create two divs and add tables in one with left floating and you already have second div.
<div class="tableContainerDiv" style="float:left;">
<table><tr><td></td></tr></table>
<table><tr><td></td></tr></table>
<table><tr><td></td></tr></table>
</div>
<div class="yourDiv" style="float:left;"></div>
html
<div class="cl">
<div style="float: left">
your tables
</div>
<div class="mydiv" style="float: left">mydiv</div>
</div>
css
.cl:after{ content: " "; display: block; height: 0px; clear: both; visibility: hidden;}
.cl {display: inline-block;}
/* Hides from IE-mac \\*/
* html .cl {height: 1%;}
.cl {display: block;}
/* End hide from IE-mac */
move tables inside another div , float to left;
HTML
<div class="table-wrap">
<table class="class1" cellpadding="0" cellspacing="0" style="margin-top: 0px;">
<tr>
<td class="cell1">Cell1</td>
<td class="cell2">Cell2</td>
</tr>
<tr>
<td class="cell1">Cell3</td>
<td class="cell2">Cell4</td>
</tr>
</table>
<table class="class2" cellpadding="0" cellspacing="0" style="margin-top: 0px;">
<tr>
<td class="cell1">Cell5</td>
<td class="cell2">Cell6</td>
</tr>
<tr>
<td class="cell1">Cell7</td>
<td class="cell2">Cell8</td>
</tr>
</table>
<table class="class3" cellpadding="0" cellspacing="0" style="margin-top: 0px;">
<tr>
<td class="cell1">Cell9</td>
<td class="cell2">Cell10</td>
</tr>
<tr>
<td class="cell1">Cell11</td>
<td class="cell2">Cell12</td>
</tr>
</table>
</div>
<div class="mydiv">mydiv</div>
CSS
.class1{
width: 100px;
height: 100px;
background: orange;
}
.class2{
width: 100px;
height: 100px;
background: green;
}
.class3{
width: 100px;
height: 100px;
background: gray;
}
.mydiv{
width: 200px;
background: blue;
float: left
}
.table-wrap{float:left;}
<table>
<tr><td>
<table class="class1" cellpadding="0" cellspacing="0" style="margin-top: 0px;">
<tr>
<td class="cell1">Cell1</td>
<td class="cell2">Cell2</td>
</tr>
<tr>
<td class="cell1">Cell3</td>
<td class="cell2">Cell4</td>
</tr>
</table>enter code here
<table class="class2" cellpadding="0" cellspacing="0" style="margin-top: 0px;">
<tr>
<td class="cell1">Cell5</td>
<td class="cell2">Cell6</td>
</tr>
<tr>
<td class="cell1">Cell7</td>
<td class="cell2">Cell8</td>
</tr>
</table>
<table class="class3" cellpadding="0" cellspacing="0" style="margin-top: 0px;">
<tr>
<td class="cell1">Cell9</td>
<td class="cell2">Cell10</td>
</tr>
<tr>
<td class="cell1">Cell11</td>
<td class="cell2">Cell12</td>
</tr>
</table>
</td>
<td>
<div class="mydiv">mydiv</div>
</td>
</tr>
</table>
I am trying to make my selected menu item look like a rounded corner button using images and CSS2.1.
.StaticSelectedStyle a
{
display: block;
padding-left:5px;
height:35px;
width: 100%;
background: transparent url('../images/button_right.png') no-repeat scroll right top;
float:left;
/*FONT*/
color: White;
text-align:center;
vertical-align:middle;
line-height: 32px;
}
.StaticSelectedStyle
{
display: block;
height:35px;
background: transparent url('../images/button_left.png') no-repeat;
text-align:center;
vertical-align:middle;
}
The image (button_right.png) is not displayed, and at the same time ,the text color is displayed as white as indicated in the same CSS class. Any ideas why this might be happening?
Here is the HTML. My menu has 6 items: Reem, Omneya Ismail Siam, Michel, Nevine, Karim and Engy. The selected item is Nevine:
<!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>Untitled Page</title>
<link href="CSS/menu_style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.Menu1_0 { background-color:white;visibility: hidden; display: none; position: absolute; left: 0px; top: 0px; }
.Menu1_1 { text-decoration: none; }
.Menu1_2 { }
.Menu1_3 { border-style: none; }
.Menu1_4 { }
.Menu1_5 { }
.Menu1_6 { border-style: none; }
.Menu1_7 { }
.Menu1_8 { border-style: none; }
.Menu1_9 { }
</style>
</head>
<body bgcolor="black">
<form name="form1" method="post" action="default.aspx" id="form1">
<table id="Menu1" class="menunav StaticMenuStyle Menu1_5 Menu1_2" cellpadding="0" cellspacing="0" border="0">
<tr>
<td onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" >
<table class="StaticMenuItemStyle Menu1_4" cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td style="white-space: nowrap;"><a class="Menu1_1 StaticMenuItemStyle Menu1_3" href="#" style="border-style: none; font-size: 1em;">Reem</a></td>
</tr>
</table>
</td>
<td style="width: 10px;"></td>
<td style="width: 10px;"></td>
<td onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="Menu1n1">
<table class="StaticMenuItemStyle Menu1_4" cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td style="white-space: nowrap;"><a class="Menu1_1 StaticMenuItemStyle Menu1_3" href="#" style="border-style: none; font-size: 1em;">Omneya Ismail Siam</a></td>
</tr>
</table>
</td>
<td style="width: 10px;"></td>
<td style="width: 10px;"></td>
<td onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="Menu1n2">
<table class="StaticMenuItemStyle Menu1_4" cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td style="white-space: nowrap;"><a class="Menu1_1 StaticMenuItemStyle Menu1_3" href="javascript:__doPostBack('Menu1','Michel')" style="border-style: none; font-size: 1em;">Michel</a></td>
</tr>
</table>
</td>
<td style="width: 10px;"></td>
<td style="width: 10px;"></td>
<td onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="Menu1n3">
<table class="StaticMenuItemStyle Menu1_4 StaticSelectedStyle Menu1_7" cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td style="white-space: nowrap;"><a class="Menu1_1 StaticMenuItemStyle Menu1_3 StaticSelectedStyle Menu1_6" href="#" style="border-style: none; font-size: 1em;">Nevine</a></td>
</tr>
</table>
</td>
<td style="width: 10px;"></td>
<td style="width: 10px;"></td>
<td onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="Menu1n4">
<table class="StaticMenuItemStyle Menu1_4" cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td style="white-space: nowrap;"><a class="Menu1_1 StaticMenuItemStyle Menu1_3" href="#" style="border-style: none; font-size: 1em;">Karim</a></td>
</tr>
</table>
</td>
<td style="width: 10px;"></td>
<td style="width: 10px;"></td>
<td onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="Menu1n5">
<table class="StaticMenuItemStyle Menu1_4" cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td style="white-space: nowrap;"><a class="Menu1_1 StaticMenuItemStyle Menu1_3" href="#" style="border-style: none; font-size: 1em;">Engy</a></td>
</tr>
</table>
</td>
<td style="width: 10px;"></td>
</tr>
</table>
<a id="Menu1_SkipLink"></a></div>
<script type="text/javascript">
//<![CDATA[
var Menu1_Data = new Object();
Menu1_Data.disappearAfter = 500;
Menu1_Data.horizontalOffset = 0;
Menu1_Data.verticalOffset = 0;
Menu1_Data.staticHoverClass = 'Menu1_9 StaticHoverStyle';
Menu1_Data.staticHoverHyperLinkClass = 'Menu1_8 StaticHoverStyle';
//]]>
</script>
</form>
</body>
</html>