So, I'm working with squarespace (a WYSIWYG page creator), but I'm attempting to use some custom CSS to create this. Unfortunately, this is happening instead. Here's the code live on jsfiddle.
I'm trying to push my whole page 300 pixels in to the right, because at the moment the code below doesn't do that--it collides with the background and overlaps the other text on the left. I can't just use the body style -- because that affects the entire rest of the page I'm building in, and will shift that to the left. Instead, I'm trying to do it just by offsetting the three frames (framecontentLeft, framecontentRight, and mainContent).
I'm also trying to center these frames in the page horizontally (the same way that the page you're looking at is centered) but again, I can't change the body style. So I'm thinking it's going to be a hack, but every time I try to use relative positioning to change the locations of the frames, I get nothing or it bugs out and stacks the frame in normal flow, vertically, on the left side of the page.
Could anyone help me figure out how to do this? I'll give you the key to the city...
<!--Force IE6 into quirks mode with this comment tag-->
<!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" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Dynamic Drive: CSS Left and Right Frames Layout</title>
<style type="text/css">
body{
margin-top:0px;
margin-left:0px;
position:absolute;
top:0; left:0; bottom:0;right:0;
left: 0%;
font-family:Helvetica;
overflow: hidden;
}
#framecontentLeft, #framecontentRight, #maincontent{
position:absolute;
top:0;
height:1000%;
}
#framecontentLeft,#framecontentRight{
overflow:hidden;
}
#framecontentLeft{
left: 200;
width: 500px; /*Width of left frame div*/
top: 20px;
}
#framecontentRight{
position:relative;
top: 0px;
left: 750px;
}
#maincontent{
left: 250px; /*Set left value to WidthOfLeftFrameDiv*/
right: 300px; /*Set right value to WidthOfRightFrameDiv*/
bottom: 0px;
top: 100px;
width: 500px;
line-height: 1.5;
}
.innertube{
margin: 15px; /*Margins for inner DIV inside each DIV (to provide padding)*/
}
.centered{
text-align = centered;
}
* html body{ /*IE6 hack*/
padding: 0 150px 0 200px; /*Set value to (0 WidthOfRightFrameDiv 0 WidthOfLeftFrameDiv)*/
}
* html #maincontent{ /*IE6 hack*/
height: 100%;
width: 1000%;
}
</style>
<script type="text/javascript">
/*** Temporary text filler function. Remove when deploying template. ***/
var gibberish=["This is a test page for a gym", "We wholly believe in the art of strength", "Ipso liptum facto freako."]
function filltext(words){
for (var i=0; i<words; i++)
document.write(gibberish[Math.floor(Math.random()*3)]+" ")
}
</script>
</head>
<body>
<img src="abelinebanner.png" width="1000" height="100" />
<Font face = "helvetica">
<div id = "pagediv">
<div class = "innertube">
<div id="framecontentLeft" class = "centered">
<div class="innertube">
<table width="100%" height="100%" cellpadding="3" cellspacing="0" border="0">
<tr><td align="left" valign="top">
<br />
<br />
<br />
</td></tr>
<tr><td align="left" valign="top">
<tr><td align="left" valign="top">
<br />
<br />
<iframe width="200" height="200" src="http://www.youtube.com/embed/RR62QMlvI60" frameborder="0" allowfullscreen></iframe>
</td></tr>
<tr><td align="left" valign="top">
<tr><td align="left" valign="top">
<br />
<br />
<iframe width="200" height="200" src="http://www.youtube.com/embed/TVNfjPWzS70" frameborder="0" allowfullscreen></iframe>
</td></tr>
<tr><td align="left" valign="top">
<br />
<br />
<iframe width="200" height="200" src="http://www.youtube.com/embed/iLn-aSGs7VY" frameborder="0" allowfullscreen></iframe>
</td></tr>
</table>
</div>
</div>
<div id="framecontentRight" class = "centered">
<div class="innertube">
<table width="100%" height="100%" cellpadding="3" cellspacing="0" border="0">
<tr><td align="left" valign="top">
<iframe width="200" height="200" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=2110+Pine+St.+Abilene,+TX+79601&aq=&sll=37.0625,-95.677068&sspn=77.57349,131.132813&ie=UTF8&hq=&hnear=2110+Pine+St,+Abilene,+Texas+79601&t=m&z=14&ll=32.473249,-99.731684&output=embed"></iframe><br /><small>View Larger Map</small> <br />
Art of Strength Abilene <br />
Hendrick Heatlh Club <br />
2110 Pine St. Abilene<br />
TX 79601 <br />
</td></tr>
<tr><td align="left" valign="top">
<h2> Contact Us:</h2>
Phone : (325) 670-7682 <br />
Email : abeline#aos.com <br />
Website : Link
</td></tr>
<tr><td align="left" valign="top">
<br />
<br />
<img src="ropes2.jpg" width="160" height="600" />
</td></tr>
</table>
</div>
</div>
<div id="maincontent" class = "centered">
<div class="innertube">
<table width="100%" height="100%" cellpadding="3" cellspacing="0" border="0">
<tr><td align="left" valign="top">
<p><script type="text/javascript">filltext(10)</script></p>
</td></tr>
<tr><td align="left" valign="top">
<h1>About Our Training</h1>
<p><script type="text/javascript">filltext(10)</script></p>
<img src="abilene.jpg" width="307" height="243" />
</td></tr><tr><td align="left" valign="top">
<h1>Staff</h1>
<p><script type="text/javascript">filltext(10)</script></p>
</td></tr>
</table>
</div>
</div>
</div>
</div>
</FONT>
</body>
</html>
After analyzing this, there is no straight forward fix. Simply adding padding does not help.
So what can you do?
You need to change the design altogether. It should be fairly easy to fix (meaning in half an hour or so).
Create a 3 column table layout and put the stuff in the columnn. That means you have to rearrange stuff. What I see so far, the elements are not properly nested, what is why Fixed Positioning is used to make it look right. You have to reorder the contents, remove the Fixed position as much as you can. It should simply be copy and past. you need a good editor for this that will make life a lot easier!
Related
If I use !DOCTYPE html , unwanted borders appear at the lower corners of the header. I used images in order to get these corners. Same issue for Internet explorer and Chrome. How can I remove these borders ? If I use !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN there is not any problem.
The codes are:
body {
font-family : arial, sans-serif;
background-color: #FFFFF0;
margin:0;
}
div.header {
width: 100%;
text-align: center;
background-color: #0000CC;
float: left;
padding:0.001em;
}
<!DOCTYPE html>
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
</HEAD>
<BODY>
<DIV class="header">
<IMG SRC="http://www.usefulchess.com/kq.gif" BORDER="0" WIDTH="80" HEIGHT="63"
ALT=""> <IMG SRC="http://www.usefulchess.com/useful.gif"
BORDER="0" WIDTH="150" HEIGHT="49" ALT=""> <IMG
SRC="http://www.usefulchess.com/chess.gif" BORDER="0" WIDTH="200" HEIGHT="60" ALT="">
<IMG SRC="http://www.usefulchess.com/sembol.gif" BORDER="0" WIDTH="255" HEIGHT="84"
ALT="" class="sembol">
</DIV>
<DIV class="menudesktop"><!-- menu desktop -->
<!-- BUTTON-->
<TABLE bgcolor="#0000CC" WIDTH="100%" BORDER="0">
<TR><TD> </TD></TR>
</TABLE>
<TABLE bgcolor="#0000CC" WIDTH="100%" BORDER="0" cellpadding="0" cellspacing="0">
<TR>
<TD WIDTH="3%" HEIGHT="25"><IMG SRC="http://www.usefulchess.com/left2.gif"
BORDER="0" WIDTH="60" HEIGHT="25" ALT="">
</TD>
<TD align="center" WIDTH="95%" HEIGHT="25">
<A HREF="../index.html" class=button>Home</A>
Play Chess
Chess Rules
Chess Tactics
Problems
Studies
Books
</TD>
<TD WIDTH="2%" HEIGHT="25"><IMG SRC="http://www.usefulchess.com/right2.gif"
BORDER="0" WIDTH="60" HEIGHT="25" ALT="">
</TD>
</TR>
</TABLE>
</DIV><!-- menu desktop end-->
</BODY>
</HTML>
I fix it by using: display: block; Example: <img style="display:block;" .... Details on stackoverflow.com : Fit image to table cell [Pure HTML]
Using bgcolor with !DOCTYPE html created also this unwanted borders.
Having trouble figuring out how to write HTML code that will work on both mobile and desktop email clients. Right now its working well on desktop, but whenever I open it in mobile it renders oddly - see screenshot below.
I've got it into the Apple Mail signature and it looks perfect when I send it and open via desktop Apple or Gmail.
The main issue is that when it the email is opened on mobile, it has each of the columns (separated through tags) on a different line. When I flip my phone to horizontal, it automatically readjusts... Does this mean the float:left property isn't working on mobile? How would I adjust this? Do I need to specify width? Not sure
I've tried making the whole thing smaller which hasn't worked. I purposely chose to make it 600px width because I saw another signature that resized automatically to fit mobile that was 600px.
When I open in Google Chrome and use the toggle device, it reformats perfectly to fit on a mobile screen.
Thanks in advance for the help!
Example of what it looks like on mobile
Here's the code:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Email Signature</title>
</head>
<body>
<div id="container">
<div class="column" style="float:left; margin:0px; font-size:0px;">
<img class="profile" src="http://hamptonyachts.com/uploads/Profile.png" alt="">
</div>
<div class="column" style="float:left; margin:0px; font-size:0px;">
<img class="name" src="http://hamptonyachts.com/uploads/HYG_Robert_Fiala.png" alt="" style="vertical-align:top">
<p class="contact" style="min-height: 60px; background-color: #06243f; font-family: Roboto; color: #FFFFFF; font-size: 15px; font-weight: 400; line-height: 18px; padding-left: 10px; padding-top: 10px; margin: 0px;">
MOBILE: 425.765.7850 <br> OFFICE: 206.623.5200 <br>
<span style=" font-size: 13px;">ROBERT#HAMPTONYACHTGROUP.COM</span></p>
</div>
<div class="column" style="float:left; margin:0px; font-size:0px;">
<div class="news">
<img class="news" src="http://hamptonyachts.com/uploads/Rendezvous.png" alt="">
</div>
<div class="social">
<img src="http://hamptonyachts.com/uploads/Facebook1.png" alt="" style="vertical-align:top">
<img src="http://hamptonyachts.com/uploads/Instagram1.png" alt="" style="vertical-align:top">
<img src="http://hamptonyachts.com/uploads/Web.png" alt="" style="vertical-align:top">
</div>
</div>
</div>
</body>
</html>
I don't suggest divs in email. They don't work with Outlook. Your divs were not configured in the correct manner, so they did not behave as you wanted. For instance, you didn't declare a width on any of your divs or images.
Your social media graphics don't line up in a table cell 226px wide, which is one of the reasons things were not lining up in your signature. I'm not spending time editing them for you, I just made them fit width-wise so that's why they will look wonky.
I tested this in Litmus and it works for Apple, IOS, Android, Gmail, Outlook and others. I turned the background of the table red to show what you still need to fix. You should fill in your ALT information as well.
Try this instead:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Email Signature</title>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0" width="600" bgcolor="#ff0000">
<tr valign="top">
<td rowspan="2" width="115">
<img class="profile" src="http://hamptonyachts.com/uploads/Profile.png" width="115" height="160" alt="Hampton">
</td>
<td width="259"><img class="name" src="http://hamptonyachts.com/uploads/HYG_Robert_Fiala.png" width="259" height="90" alt="" style="vertical-align:top">
</td>
<td width="226"><img src="http://hamptonyachts.com/uploads/Rendezvous.png" width="226" height="114" alt="">
</td>
</tr>
<tr valign="top">
<td style="font-size: 12px;">MOBILE: 425.765.7850 <br />
OFFICE: 206.623.5200 <br />
ROBERT#HAMPTONYACHTGROUP.COM</td>
<td><img src="http://hamptonyachts.com/uploads/Facebook1.png" width="90" height="46" alt="" style="display:inline-block;" />
<img src="http://hamptonyachts.com/uploads/Instagram1.png" width="43" height="46" alt="" style="display:inline-block;" />
<img src="http://hamptonyachts.com/uploads/Web.png" width="70" height="46" alt="" style="display:inline-block;" /></td>
</tr>
</table>
</body>
</html>
Good luck with the yacht sales.
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 want to use CSS to reproduce the behaviour of the simple HTML table below.
The HTML table has a width of 100% with just one row and three columns.
Each column contains an image where image1 is left-aligned; image2 is centered; and image3 is right-aligned.
Importantly, when the browser window is resized to be very small, the images should not overlap or wrap onto the next line. They should simply stay next to each other in the same line (this is what the table solution does).
This sounds like such a simple requirement, but I've been struggling with this for many hours and so any help would be very much appreciated.
<html>
<head>
<title>Test</title>
</head>
<body>
<table width="100%">
<tr>
<td align="left">
<img width="150" height="129" src="image1.gif">
</td>
<td align="center">
<img width="400" height="120" border="0" src="image2.jpg"> <!-- This is the main logo -->
</td>
<td align="right">
<img width="141" height="80" src="image3.png">
</td>
</tr>
</table>
</body>
</html>
You can use display: table and display: table-cell to get similar properties of a table.
html
<div class="table">
<div class="table-cell center">
<p>Center</p>
</div>
<div class="table-cell left">
<p>Left</p>
</div>
<div class="table-cell right">
<p>Right</p>
</div>
</div>
css
.table{
display: table;
}
.table-cell{
height: 100px;
width: 100px;
display: table-cell;
vertical-align: middle;
}
.center{text-align: center;}
.left{text-align: left;}
.right{text-align: right;}
Check out this pen: http://codepen.io/codefancy/pen/PqQjyb/
I finally came up with a rather messy solution. It uses conditional comments to provide a work-around for Internet Explorer (versions 5 upwards). The following code passes W3C markup and css validation. This solution could be extended to produce the 'holy grail' of a fluid 3-column layout without using tables.
<!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" xml:lang="en-GB" lang="en-GB">
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<title>Test</title>
<style type="text/css">
.table{
display: table;
width: 100%;
}
.table-cell{
height: 100px;
width: 100px;
display: table-cell;
vertical-align: middle;
}
.center{text-align: center;}
.left{text-align: left;}
.right{text-align: right;}
</style>
<!--[If IE]>
<style type="text/css">
.table{
display: none;
}
.table-cell{
display: none;
}
</style>
<![endif]-->
</head>
<body>
<div class="table"><div class="table-cell left">
<!--[If IE]></div></div><table width="100%"><tr><td class="left"><![endif]-->
<img width="150" height="129" alt="star" src="image1.gif" />
<!--[If IE]><div><![endif]-->
</div><div class="table-cell center">
<!--[If IE]></div></td><td class="center"><![endif]-->
<img width="400" height="120" alt="logo" src="image2.jpg" /> <!-- This is the main logo -->
<!--[If IE]><div><![endif]-->
</div><div class="table-cell right">
<!--[If IE]></div></td><td class="right"><![endif]-->
<img width="141" height="80" alt="thumbs up" src="image3.png" />
<!--[If IE]><div><div><![endif]-->
</div></div>
<!--[If IE]></td></tr></table><![endif]-->
</body>
</html>
Thanks for all the help - I've been looking for a solution like this for a very long time.
I got a simple question regarding the CSS background image.
My intention was using image to display round corner on table edges (without using border-radius property).
<style type="text/css">
.top
{
background-repeat:repeat;
vertical-align:top;
}
.left
{
text-align:left;
}
.middle
{
}
.right
{
text-align:right;
}
.bottomLeft
{
vertical-align:bottom;
}
.bottom
{
background-repeat:repeat;
vertical-align:bottom;
}
.bottomRight
{
vertical-align:bottom;
}
</style>
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="topLeft">
<img height="16px" src="Images/greenTL.gif" style="vertical-align:bottom" />
</td>
<td class="top">
<img height="4px" width="100%" src="Images/greenT.gif" style="vertical-align:8px" />
</td>
<td class="topRight">
<img height="16px" src="Images/greenTR.gif" style="vertical-align:bottom" />
</td>
</tr>
<tr>
<td class="left">
<img height="100%" src="Images/greenL.gif"/>
</td>
<td class="middle">
</td>
<td class="right">
<img height="100%" src="Images/greenR.gif"/>
</td>
</tr>
<tr>
<td class="bottomLeft">
<img height="16px" src="Images/greenBL.gif" style="vertical-align:top" />
</td>
<td class="bottom" >
<img height="4px" width="100%" src="Images/greenB.gif" />
</td>
<td class="bottomRight">
<img height="16px" width="16px" src="Images/greenBR.gif" style="vertical-align:top"/>
</td>
</tr>
</table>
The HTML & CSS above work perfectly fine in IE from Browser Mode 7 to 9, but it became distorted when changed Document Mode to IE 7 Standard.
It seem like having a gap between left and right vertical.
How can I solve the issue?
Before having CSS3 border-radius, what is the best approach to implement round corner in web page?
thank you in advanced.
I would use something like http://css3pie.com/ which enables some CSS3 features on < IE9
versions. Personally, i'm one of those persons who think that web page shouldn't look 100% the same in all browsers e.g. Chrome/Firefox/Safari should get rounded corners and < IE9 should not.
Don't use tables for layout. For rounded corners in browser that don't support native border-radius, you can use graphics corners as background of absolutely-positioned empty elements.