Highlighted

How do I center this navbar

Community Beginner ,
Dec 10, 2019

Copy link to clipboard

Copied

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>

 

Screen Shot 2019-12-10 at 12.09.30 PM.pngScreen Shot 2019-12-10 at 12.10.05 PM.pngScreen Shot 2019-12-10 at 12.10.23 PM.png

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>

TOPICS
Code, How to

Views

597

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

How do I center this navbar

Community Beginner ,
Dec 10, 2019

Copy link to clipboard

Copied

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>

 

Screen Shot 2019-12-10 at 12.09.30 PM.pngScreen Shot 2019-12-10 at 12.10.05 PM.pngScreen Shot 2019-12-10 at 12.10.23 PM.png

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>

TOPICS
Code, How to

Views

598

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Dec 10, 2019 0
LEGEND ,
Dec 10, 2019

Copy link to clipboard

Copied

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>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 10, 2019 1
Community Beginner ,
Dec 10, 2019

Copy link to clipboard

Copied

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>
<!-- // stealth link // -->
<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>
<!-- // stealth link // -->
</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! &#8594;</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.Screen Shot 2019-12-10 at 1.37.16 PM.png

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 10, 2019 0
Community Beginner ,
Dec 10, 2019

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 10, 2019 0
LEGEND ,
Dec 10, 2019

Copy link to clipboard

Copied

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:

 


<td class="topnav">


<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>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 10, 2019 0
Adobe Community Professional ,
Dec 10, 2019

Copy link to clipboard

Copied

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, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 10, 2019 1
Community Beginner ,
Dec 10, 2019

Copy link to clipboard

Copied

Thanks for the help. I will look into it.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 10, 2019 0
Community Beginner ,
Dec 10, 2019

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 10, 2019 0
Adobe Community Professional ,
Dec 10, 2019

Copy link to clipboard

Copied

Ask Apple.

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

 

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 10, 2019 0
Community Beginner ,
Dec 11, 2019

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 11, 2019 0
Adobe Community Professional ,
Dec 11, 2019

Copy link to clipboard

Copied

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, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 11, 2019 0
Community Beginner ,
Dec 11, 2019

Copy link to clipboard

Copied

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..

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 11, 2019 0
Adobe Community Professional ,
Dec 11, 2019

Copy link to clipboard

Copied

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

 

 

 

 

 

 

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 11, 2019 0
Community Beginner ,
Dec 11, 2019

Copy link to clipboard

Copied

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

 

thanks

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 11, 2019 0