I've been trying all day to get the "nav" and "body" divs to sit side by side, but it seems like i'm locked to the width of the nav-bar somehow. I can't for the life of me get them to float next to each other, they only stack...
more specifically, i'm trying to put the body div in the middle of the view port, any ideas?
thanks in advance for any help!
<!Doctype HTML>
<HTML lang="en">
<head>
<meta charset="utf-8">
<title>Dirt Road Magazine - What's YOUR Adventure? - (dirtroad.com)</title>
<link href="stylesheeet.css" rel="stylesheet" type="text/css">
<style>
body {
background-image: url("back.gif");
background-color: #c0c0c0;
width: 100%;
height: 100%;
}
#nav {
padding: 1%;
padding-left: 0;
padding-top: 0;
}
.navbutton {
cursor: pointer;
background-color: #d0d0d0;
color: #4040c0;
width: 100%;
height: 100%;
}
a {
cursor: pointer;
}
#slogan {
padding-top: 0;
padding-bottom: 1%;
padding-left: .5%;
}
#logo {}
#body {}
.outline {
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
#main {}
</style>
<script>
</script>
</head>
<body>
<div text-align="center" id="logo">
<A id="logo" HREF="http://www.dirtroadmagazine.com">
<IMG SRC="http://dirtroadmagazine.com/IMGS/drmlogo.gif" border="0">
</A><br>
<font face="impact" color="yellow" size="6">
<div id="slogan">
<p1 class="outline"> What's YOUR adventure? </font>
</p1>
</div>
</div>
<div id="main">
<div id="nav" align="left">
<table id="navtab" cellspacing=0 cellpadding=0 border=0>
<tr align=left valign=top>
<td width=120>
<center>
<table width=120 cellspacing=0 cellpadding=0 border=0>
<tr align=center valign=top>
<td>
<a class="navlink" id="side1" href="http://www.dirtroadmagazine.com/"><button class="navbutton" style="float: left;">DirtRoad Home</button></a><br>
<a class="navlink" id="side2" href="http://www.dirtroadmagazine.com/about.htm"><button class="navbutton" style="float: left;">About Us</button></a><br>
<a class="navlink" id="side3" href="http://www.dirtroadmagazine.com/list.html"><button class="navbutton" style="float: left;">Content list</button></a><br>
<br>
<br>
<br>
<a class="navlink" id="side4" href="http://www.dirtroadmagazine.com/copyrite.htm">© 1996-2018 DRM</a><br>
<font face=arial size=1>
<a class="navlink" href=http://www.dirtroadmagazine.com alt="It's A JEEP Thing, And WE Understand! Visit Dirt Road Magazine Today - Check Out Our Jeep Parts Reviews!">Welcome To The World's Favorite Jeep Enthusiast Site! It's A JEEP Thing!</a><br>
</td>
</table>
</div>
<div id="body">
<font face="impact" color="yellow" size="6">
<p1 class="outline"> We're back! </font>
</p1>
<br>
<br>
<font face="impact" color="black" size="4">
<p1> Want to know where WE'VE been? Click here to find out! </font>
</p1>
</div>
</div>
</body>
</html>
Use flex-box to overcome this problem
first set display:flex and flex:row on the parent element that contains both the div and navbar then use flex numbers on child elements like flex:1 or flex:2 the highest number flex occupies maximum available space.
Related
I am working on a menu where I want three of the buttons aligned to the left, two things aligned to the right and one other option aligned in the center. I am currently accomplishing this by adding padding to the center aligned one, but I feel as though there is a better way to do this. Especially when someone uses a screen of smaller resolution, such as a cell phone.
Here is what I have so far:
<html>
<head>
<style type="text/css">
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
text-decoration: none;
}
</style>
</head>
<body>
<body bgcolor="#71AAE2">
<div align="center">
<table style="border-collapse: collapse;" border="0" width="1200" cellpadding="0" bgcolor="#6699FF">
<tr>
<td width="800">
<p align="center">
</td>
</tr>
<tr>
<td width="800">
<ul>
<li>Home</li>
<li>Gallery</li>
<li>Contact Us </li>
<li style="float:right"><a href="http://www.gltdc.net/" target="_blank" ><img src="images/GLTDC.png" style="padding:7px 7px;" width="80" height="38"></li>
<li style="float:right;padding:18px 0px;display: block;color: white;text-align: center;text-decoration: none;">PROUD MEMBER OF THE</li></a>
<center><li style="display:inline-block;margin-left: 24%;">Employee Login</li></center>
</ul>
</td>
</tr>
</table>
</div>
</body>
</html>
So what would be the best way to center that "Employee Login"?
I am a creating an email signature using HTML. I am using the HTML table to build it.
Here is my HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p {
padding : 0 0 0 0;
margin: 0 0 2px 0;
}
table {
table-layout: fixed;
}
</style>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" width="329" height="314">
<tr>
<td style="line-height: 0;">
<img src="CC-email-sig_01.png" alt="" style="padding: 0; margin : 0; border : 0; display : block; width: 100%; ">
</td>
<td style="font-family: Helvetica; font-size: 12px; text-align: right; padding-right: 20px; font-weight: bold;">
<p style="color: #3F4B54;">Sean Clough</p>
<p style="color: #3F4B54;">Writer/Owner </p>
<p style="color: #25408F;">Clough Copywriting</p>
<br/>
<p><span style="color: #25408F;">m</span> <span style="color: #3F4B54;">0419 031 052</span> </p>
<p><span style="color: #25408F;">a</span> <span style="color: #3F4B54; font-weight: bold;">PO Box 439</span> </p>
<p style="color: #3F4B54;">Bedford WA 6052</p>
<p>cloughcopywriting.com.au</p>
</td>
</tr>
<tr bgcolor="#25408F">
<td style="padding-left: 22px;">
<p style="font-family: Helvetica; font-size: 12px; font-weight: bold; color : #fff; margin: 10px 0 10px 5px;">Follow me on</p>
<img src="CC-email-sig_06.png" alt="">
<img src="CC-email-sig_08.png" alt="">
<img src="CC-email-sig_10.png" alt="">
</td>
<td width="184">
<img src="CC-email-sig_04.png" alt="" style="padding: 0; margin : 0; border : 0; display : block; width: 100%; ">
</td>
</tr>
<tr style="vertical-align: baseline;">
<td colspan="2" style="line-height: 100%;">
<img src="CC-email-sig_12.png" alt="" width="329" style="padding: 0; margin : 0; border : 0; display : block; width: 100%; ">
</td>
</tr>
</table>
</body>
</html>
Now In the browser, it looks like bellow image:
but in outlook, the image looks like bellow:
If you see then you can notice the red arrow. Here I am using an image for showing the curve but It's not full width in outlook but perfect on the browser.
Also, padding between Man image and text is not same.
How can I solve this issue?
Thanks.
So, basically,because of the outlook limitations, I recommend you to use an entire background image for your last row.
https://jsfiddle.net/pablodarde/css60wL2/
<tr background="https://s20.postimg.org/cz6xu0nz1/bg_Footer.png">
<td style="padding-left: 22px;">
<p style="font-family: Helvetica; font-size: 12px; font-weight: bold; color : #fff; margin: 10px 0 10px 5px;">Follow me on</p>
<img src="CC-email-sig_06.png" alt="">
<img src="CC-email-sig_08.png" alt="">
<img src="CC-email-sig_10.png" alt="">
</td>
<td width="184">
<img src="CC-email-sig_04.png" alt="" style="padding: 0; margin : 0; border : 0; display : block; width: 100%; ">
</td>
</tr>
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 am currently learning HTML and CSS. My problem is: I have a button and a search bar with the search bar currently below the button. I have tried different solutions but to no avail. What should I do so that the button and the search bar are beside each other
Here is my code
<!DOCTYPE html>
<html>
<head>
<title>Sample Dashboard</title>
<style type="text/css">
table, th, td {
border: 1px solid black;
}
p.pos_right {
position: relative;
left: 20px;
}
img {
display: inline-block;
z-index:-1;
}
#mine{
display: inline;
}
</style>
</head>
<body>
<div style="text-align:center;">
<p>Most Number of Referrals for the month of <img src="Red-Ribbon.jpg" alt="redribbon" width="200" height="200" style="vertical-align:top"> </p>
</div>
<div class = "mine" align ="center">
<button style="background-color:yellow" onclick="window.location.reload()"><b>UPDATE</b></button>
<table class = "one" style=border="1" cellpadding="0px" cellspacing="0px">
<tr>
<td style="border-style:solid none solid solid;border-color:#4B7B9F;border-width:1px;">
<input type="text" name="zoom_query" style="width:100px; border:0px solid; height:17px; padding:0px 3px; position:relative;">
</td>
<td style="border-style:solid;border-color:#4B7B9F;border-width:1px;">
<input type="submit" value="" style="border-style: none; background: url('searchbutton3.gif') no-repeat; width: 24px; height: 20px;">
</td>
</tr>
</table>
</div>
</body>
</html>
use .mine not #mine (which is for ID.)
give display:inline-block for childer of mine
.mine>button,.mine>table{
display: inline-block;float:left;
}
table, th, td {
border: 1px solid black;
}
p.pos_right {
position: relative;
left: 20px;
}
img {
display: inline-block;
z-index:-1;
}
.mine>button,.mine>table{
display: inline-block;float:left;
}
refer below code snippet.
<div style="text-align:center;">
<p>Most Number of Referrals for the month of <img src="Red-Ribbon.jpg" alt="redribbon" width="200" height="200" style="vertical-align:top"> </p>
</div>
<div class = "mine" align ="center">
<button style="background-color:yellow" onclick="window.location.reload()"><b>UPDATE</b></button>
<table class = "one" style=border="1" cellpadding="0px" cellspacing="0px">
<tr>
<td style="border-style:solid none solid solid;border-color:#4B7B9F;border-width:1px;">
<input type="text" name="zoom_query" style="width:100px; border:0px solid; height:17px; padding:0px 3px; position:relative;">
</td>
<td style="border-style:solid;border-color:#4B7B9F;border-width:1px;">
<input type="submit" value="" style="border-style: none; background: url('searchbutton3.gif') no-repeat; width: 24px; height: 20px;">
</td>
</tr>
</table>
</div>
One of many ways to achieve this would be to put the button in its own
<td>
tag inside the row of the table. I.e.
<table class = "one" style=border="1" cellpadding="0px" cellspacing="0px">
<tr>
<td>
<button style="background-color:yellow" onclick="window.location.reload()"><b>UPDATE</b></button>
</td>
...
See https://jsfiddle.net/orndorffgrant/189judf0/
.
The reason that there was a line break is that there is an implicit line break before and after every table.
What would be the best way to make a whole block of content clickable in an html email so that it also works in Outlook (2003, 2007, 2010).
For example, I have this Call-To-Action:
So far I've come up with this:
<table cellpadding="0" cellspacing="0" style="border: 1px #ffffff dashed;">
<!-- NAVIGATION AREA START -->
<tr>
<td width="370" style="font-family:'Times New Roman', Times, serif;font-size: 22px;font-weight:bold;line-height:52px;">
<div style="margin-left: 15px; margin-top: 0; margin-bottom: 0; height:100%;">
<a href="http://${servername}/" style="text-decoration:none;color:#fff;">
LEARN MORE ABOUT ABOUT THIS
</a>
</div>
</td>
<td width="160">
<table cellpadding="0" cellspacing="0" height="24">
<tr>
<td>
<div style="background-color:#fff; margin-top: 0; margin-bottom: 0;width:128px;height:24px;color: #000000;text-decoration: none;font-size: 12px;line-height: 24px;">
<a href="http://${servername}/" style="text-decoration:none;color:#000;margin-left: 5px;">
CLICK HERE
</a>
</div>
</td>
<td>
<img style="display: block;" width="13" height="24" border="0" alt="" title="" src="http://${servername}/images/mailing/arrow-white.png" />
</td>
</tr>
</table>
</td>
</tr>
<!-- NAVIGATION AREA END -->
</table>
The problem is that the whole area within the dashed border should be clickable. I tried wrapping the whole table with an a tag, but this doesn't work in Outlook or IE (it works in Firefox).
Or, consider this:
<table width="255" cellspacing="0" cellpadding="0" bgcolor="#000000" style="border: 10px solid #fff;">
<tr>
<td valign="top" style="width:130px;padding-bottom: 15px; padding-top: 15px; padding-left: 15px;">
<p style="color:#ffffff;font-family:'Times New Roman', Times, serif;font-size: 16px;margin-top: 0; margin-bottom: 5px;">
<strong>FAQ</strong>
</p>
<p style="font-family: arial,sans-serif; font-size: 14px; color:#d0d0d0; line-height: 20px; margin-top: 0; margin-bottom: 0;">
Learn more about our services.
</p>
</td>
<td align="center" style="padding-bottom: 15px; padding-top: 15px;">
<p style="margin-top: 0;margin-bottom: 0;">
<img width="54" height="102" border="0" src="http://${servername}/images/mailing/questionmark.png" title="" alt="">
</p>
</td>
</tr>
</table>
Here too, the whole block (within the white border) should be clickable, not just the individual lines of text.
How would you go about this, considering the bad support for CSS in Outlook 2007/2010 (e.g. no display CSS-property)?
Bottom line: How to link a block level alement without being able to wrap it with a (tried with table and div) or using display: block;?
This answer will aim to show how all different options render in Outlook (2013), starting with the "best" solution found so far:
<table width="100%" style="background-color: #ccc;"><tr>
<td style="padding: 15px; text-align: center;">
<a href="http://www.stackoverflow.com" style="text-decoration: none; color: #333;">
Go to some great website!
</a>
</td>
</tr></table>
This will be rendered like this:
Or, with the link hitbox annotated:
Yeah, that sucks: you want the entire block to be clickable. Basically I'm here to tell you that the answer to the question "how to link block elements (outlook-compatible)" is: this is not possible, not without workarounds.
To support my claim (PS. I highly welcome anyone proving this claim wrong!), here's all the variations I've tried, with their respective renderings in Outlook. I've tried to include some solutions suggested in other answers too.
Here's the code I've used to generate e-mails:
<html>
<head>
<title>My e-mail</title>
</head>
<body>
<table width="660px" align="center" border="0" cellspacing="0" cellpadding="0" style="width: 660px;">
<tr>
<td style="padding: 15px;">
<p>1. The "best" text-only version I've found:</p>
<table width="100%" style="background-color: #ccc;"><tr>
<td style="padding: 15px; text-align: center;">
<a href="http://www.stackoverflow.com" style="text-decoration: none; color: #333;">
Go to some great website!
</a>
</td>
</tr></table>
<hr />
<p>2a. Workaround using an image. Setting size through style attribute does not work.</p>
<a href="http://www.stackoverflow.com">
<img alt="Go to some great website!" src="your custom image" style="width: 100%; height: 30px;" />
</a>
<hr />
<p>2b. Workaround using an image. Kind of works, but requires an image of exactly correct size through attributes.</p>
<a href="http://www.stackoverflow.com">
<img alt="Go to some great website!" src="your custom image" width="640px" height="30px" />
</a>
<hr />
<p>3. Attempt to link the entire table. Does not work.</p>
<a href="http://www.stackoverflow.com" style="text-decoration: none; color: #333;">
<table width="100%" style="background-color: #ccc;"><tr>
<td style="padding: 15px; text-align: center;">
Go to some great website!
</td>
</tr></table>
</a>
<hr />
<p>5. Attempt to link the entire div. Does not work.</p>
<a href="http://www.stackoverflow.com" style="text-decoration: none; color: #333;">
<div style="background-color: #ccc; padding: 15px; text-align: center;">
Go to some great website!
</div>
</a>
<hr />
<p>6. Setting anchor tag to display as a block. Does not work.</p>
<a href="http://www.stackoverflow.com" style=" display: block; text-decoration: none; color: #333; background-color: #ccc; padding: 15px; text-align: center;">
Go to some great website!
</a>
<hr />
<p>6. Hacking with line-height, does not work.</p>
<div style="background-color: #ccc; text-align: center;">
<a href="http://www.stackoverflow.com" style="line-height: 3em; text-decoration: none; color: #333;">
<span style="vertical-align: middle;">Go to some great website!</span>
</a>
</div>
</td>
</tr>
</table>
</body>
</html>
And here's how they're rendered by Outlook 2013, annotated with the link hitbox:
Put an <a> in each of the fields. Not elegant, but this works.
If there is a field that is empty, just put a transparent image in there that's the right width and height. (image itself, not resized in html)
Personally I'd add the call to action as an image in the email and simply wrap it with an anchor tag.
<img src="http://myimage.com/image.png" alt="" />
Given that this is for an email, is there a reason you want to build up the call-to-action in HTML?
UPDATE
Alternatively you could do something like this:
http://jsfiddle.net/gv5aZ/
(Quick fiddle i've put together for you)
I've not tested this extensively but I did manage to get something working.
In you header styles and in the 'a href=""' add the below:
Header style:
#outlook a { padding-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; }
Link inline style:
<a style="font-family: #; font-size: #px; text-decoration: #; border: #color #px #; color: #; padding-bottom: #px; padding-top: #px; padding-left: #px; display: inline-block; padding-right: #px; font-style: #;" href="#" target="_blank">Read more...</a>
Replace # with your styles of course except for the display property (leave that one in!)
Again, I haven't tested this extensively but for me it worked so don't miss anything out from what I've written here :)
EDIT: You might not have a border in your design so make it the same colour as your background
Why don't you just put an anchor around the table? Not entirely sure if it works in outlook though, but it's the easiest solution
<table>....</table>