How do I center this navbar

Report · Dec 10, 2019

I am stuck on trying to center this navbar.

Here is my code/images:

CSS:

.topnav {overflow: hidden; background-color: #0f64aa;}
.topnav a {float: left; color: #ffffff; text-align: center; padding: 15px; text-decoration: none; font-family: Helvetica, Arial, sans-serif; font-size: 17px;}
.topnav a:hover {background-color: #ffffff; color: #0f64aa;}

HTML:

<tr>
<td align="center" class="topnav">
<a href="http://interfaceconferencegroup.com/nlw2019speakers" target="_blank">AGENDA</a>
<a href="http://interfaceconferencegroup.com/nlw2019speakers" target="_blank">SPEAKERS</a>
<a href="http://interfaceconferencegroup.com/nlw2019speakers" target="_blank">REGISTER</a>
<a href="http://interfaceconferencegroup.com/nlw2019speakers" target="_blank">SPONSORS</a>
<a href="http://interfaceconferencegroup.com/nlw2019speakers" target="_blank">VENUE</a>
</td>
</tr>

Report · Dec 10, 2019

Just add to your topnav css selector:

display: flex;
justify-content: center;

So it becomes:

.topnav {

display: flex;
justify-content: center;

overflow: hidden;

background-color: #0f64aa;

}

You dont need 'overflow:hidden;' and you don't need 'float: left;' in your 'topnav a' css selector.

Using a table is not a great approach you could just use a <div></div>:

<div class="topnav">
<a href="http://interfaceconferencegroup.com/nlw2019speakers" target="_blank">AGENDA</a>
<a href="http://interfaceconferencegroup.com/nlw2019speakers" target="_blank">SPEAKERS</a>
<a href="http://interfaceconferencegroup.com/nlw2019speakers" target="_blank">REGISTER</a>
<a href="http://interfaceconferencegroup.com/nlw2019speakers" target="_blank">SPONSORS</a>
<a href="http://interfaceconferencegroup.com/nlw2019speakers" target="_blank">VENUE</a>
</div>

Correctly formated you would use a list:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Centered Navigation</title>
<style>
.topnav {
display: flex;
justify-content: center;
background-color: #0f64aa;
margin: 0;
padding: 0;
}
.topnav li {
list-style: none;
margin: 0;
padding: 0;
}
.topnav a {
color: #ffffff;
text-align: center;
padding: 15px;
text-decoration: none;
font-family: Helvetica, Arial, sans-serif;
font-size: 17px;
display: block;
}
.topnav a:hover {
background-color: #ffffff; color:
#0f64aa;
}
</style>
</head>
<body>

<ul class="topnav">
<li><a href="http://interfaceconferencegroup.com/nlw2019speakers" target="_blank">AGENDA</a></li>
<li><a href="http://interfaceconferencegroup.com/nlw2019speakers" target="_blank">SPEAKERS</a></li>
<li><a href="http://interfaceconferencegroup.com/nlw2019speakers" target="_blank">REGISTER</a></li>
<li><a href="http://interfaceconferencegroup.com/nlw2019speakers" target="_blank">SPONSORS</a></li>
<li><a href="http://interfaceconferencegroup.com/nlw2019speakers" target="_blank">VENUE</a></li>
</ul>

</body>
</html>

Report · Dec 10, 2019

Thanks!!

But I am in the middle of re-doing e-blasts for work and I'm not sure if I can use divs. From what I gathered, eblasts are limited and we can only use tables.

Here is a sample of what I am working with:

<body bgcolor="#ececec" bgproperties="fixed" style="margin: 0; padding: 0;">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="680px">
<tr>
<td align="center" valign="top" style="padding-top: 15px;"></td>
</tr>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0" width="680px" style="border: 1px solid #000000;">
<tr>
<td bgcolor="#ffffff">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td bgcolor="#0f64aa" align="center" valign="top" style="padding: 15px 0 10px 0; margin-top: 0px;">
<span style="font-family: Helvetica, Arial, sans-serif; letter-spacing: 5px; font-size: 55px; color: #ffffff;"><b>ANNOUNCING</b></span>
</td>
</tr>
<tr>
<td align="center" valign="top">
<a href="http://interfaceconferencegroup.com/nlw2019" target="_blank">
<img src="http://casite-619795.cloudaccess.net/IF19/NLW/NLW-Banner.jpg" alt="Register Today!">
</a>
</td>
</tr>
<tr>
<td align="center" class="topnav">
<a href="http://interfaceconferencegroup.com/nlw2019speakers" target="_blank">AGENDA</a>
<a href="http://interfaceconferencegroup.com/nlw2019speakers" target="_blank">SPEAKERS</a>
<a href="http://interfaceconferencegroup.com/nlw2019speakers" target="_blank">REGISTER</a>
<a href="http://interfaceconferencegroup.com/nlw2019speakers" target="_blank">SPONSORS</a>
<a href="http://interfaceconferencegroup.com/nlw2019speakers" target="_blank">VENUE</a>
</td>

<div name="divHrefB" style="display:none;height:0px;width:0px;overflow:hidden;visibility:hidden;mso-hide:all"><a href="http://francemediainc.com/partner-emails/">Distributed by France Media Inc.</a></div>

</tr>
<tr>
<td bgcolor="#ffffff" align="center" style="padding: 20px 20px 20px 20px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" style="font-size: 24px; line-height: 30px; font-family: Helvetica, Arial, sans-serif; font-weight: 700; color: #333333; padding-bottom: 10px;">8th annual InterFace Net Lease West<br>to be held March 5, 2019, in Los Angeles</td>
</tr>
<tr>
<td align="center" style="padding: 0 15px 5px 15px; font-size: 20px; font-family: Helvetica, Arial, sans-serif; font-weight: 600; color: #0f64aa;"><i>Registration and Room Block Now Open</i></td>
</tr>
<tr>
<td align="left" style="padding: 0 15px 0 15px; font-size: 16px; line-height: 23px; font-family: Helvetica, sans-serif; color: #666666;">
<p><i>Shopping Center Business, Western Real Estate Business, California Centers</i> and France Media are pleased to announce that the <b>8th annual InterFace Net Lease West conference will take place March 5, 2019,</b> at the Omni Los Angeles hotel.</p>
<p>The event will bring together leading West Coast NNN, sale leaseback and 1031 market dealmakers, as well as national firms active in the Western United States.</p>
<p><b>More than 175 leading investors, developers, lenders and intermediaries</b> are expected to attend the first NNN conference of 2019 and the only industry event held on the West Coast.</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor="#0f64aa" align="center" style="font-size: 26px; font-family: Minion Pro, Times New Roman, serif; color: #fff; padding: 15px 0 15px 0;">
<i>Early Bird Rate of <b style="font-size: 32px">$295</b> Available Until January 24th</i>
</td>
</tr>
<tr>
<td bgcolor="#ffffff" align="center" style="padding: 40px 20px 40px 20px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center">
<table align="center">
<tr>
<td id="body2">
<a class="button" href="http://interfaceconferencegroup.com/nlw2019register" target="_blank" style="padding: 25px 25px;">Register Now! →</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor="#dce4ea" align="center" style="padding: 20px 20px 20px 20px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left" style="padding: 0 15px 0 15px; font-size: 16px; line-height: 23px; font-family: Helvetica, sans-serif; color: #666666;">
A block of sleeping rooms is available at the Omni Los Angeles for $265. This rate is only available until Monday, February 19th and is subject to availability. To reserve rooms at this group rate, please <a href="https://www.omnihotels.com/hotels/los-angeles-california-plaza/meetings/interface-conference-group" target="_blank">click here</a>.
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>

Any help is appreciated. Thank you.

Report · Dec 10, 2019

Also, any idea as to why my .jpg banner looks fuzzy. It's perfect quality when I export it, but ever since I upgraded to Catalina and downloaded the latest Adobe software, my .jpgs and .pngs look blurry/fuzzy and not as clear in web browsers.

Report · Dec 10, 2019

Hummmm.........email. Ok well don't use display: flex as email clients wont like that.

Maybe insert another table inside the 'topnav' td and then apply - margin: 0 auto; to it, as below:

<table cellspacing="0" cellpadding="0" border="0" style="margin: 0 auto;">
<tr>
<td>
<a href="http://interfaceconferencegroup.com/nlw2019speakers" target="_blank">AGENDA</a>
<a href="http://interfaceconferencegroup.com/nlw2019speakers" target="_blank">SPEAKERS</a>
<a href="http://interfaceconferencegroup.com/nlw2019speakers" target="_blank">REGISTER</a>
<a href="http://interfaceconferencegroup.com/nlw2019speakers" target="_blank">SPONSORS</a>
<a href="http://interfaceconferencegroup.com/nlw2019speakers" target="_blank">VENUE</a>
</td>
</tr>
</table>

</td>

Report · Dec 10, 2019

Back in the old days when everyone used Outlook, tables were appropriate in e-mails but those days are over. Almost everyone uses web based Gmail or Yahoo mail now. So you don't need tables for layouts anymore. Just use a good mobile-friendly template that has been industry tested like this template builder from Campaign Monitor.

https://www.campaignmonitor.com/email-templates/

Blurry images have nothing to do with DW. Check your GPU settings.

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Dec 10, 2019

Thanks for the help. I will look into it.

Report · Dec 10, 2019

How do I fix/check the GPU settings on a Mac?

Report · Dec 10, 2019

Ask Apple.

https://discussions.apple.com/thread/7366693

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Dec 11, 2019

Thanks, but I'm still a little confused. Instead of saving web images as 72 dpi, I should export them as 150?

Report · Dec 11, 2019

Who is your target audience and what kind of displays are they using? That's who you should build for.

If you are having problems editing your photos on the a high res display you can temporarily change the resolution of your screen. Use the System Preferences app. System Preferences > Displays > Change the resolution.

Your high res display is most likely set at the Default resolution. Clicking on larger text will result in a larger image in the photo editing software. When you have completed your photo editing work, return the display to the default resolution.

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Dec 11, 2019

Ok, thanks. Yes, it is set at the default resolution. So I should work in 'large text display' and the view everything else in default? Is there another way? That seems pretty time consuming and annoying since I have to keep switching displays..

Report · Dec 11, 2019

Don't pay attention to the blurry images. Accept the fact that low res images look bad on high res devices.

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Dec 11, 2019

ok, no one else has said anything at work. It is just me and my OCD.

thanks

Adobe Community

How do I center this navbar

1 Correct answer