I have a table of buttons functioning as my navigation bar, and it's centered to my page.
I want to put my logo either directly on the left of the table, or float all the way to the left of the page. However, the logo's presence affects my navigation bar to where my navigation bar is no longer centered.
Is there any way I can have multiple alignments in one line? Have my logo left-aligned, and my navigation bar centered to the page?
I'm fairly new at code so I'd appreciate any other tips and suggestions as well.
html {
background-color: #305a5c;
text-align: center;
font-family: "Kelly Slab", Monospace;
font-size: 24px;
}
/* top */
header {
overflow: hidden;
background-color: #0D282A;
padding: 0px;
margin: -8px;
}
.nav {
position: relative;
margin: auto;
}
.logo {
height: 150px;
}
.nav a {
text-decoration: none;
color: #FFFFFF;
filter: grayscale(.8);
}
.nav a:hover {
filter: grayscale(0);
text-shadow: 1px 1px rgb(69, 69, 69);
}
/* nav bar buttons */
.nav-about {
background-image: url(https://66.media.tumblr.com/ab95b7b5602ea34655eeb3ec4dcc4ed8/tumblr_pz6lc97U0K1v1yf1ao1_250.png);
background-position: center;
display:block;
padding: 20px;
background-repeat: no-repeat;
}
.nav-b-f {
background-image: url(https://66.media.tumblr.com/f12e97ce99afa0b33426401ff86f4a8d/tumblr_pz6lc97U0K1v1yf1ao9_r1_250.png);
background-position: center;
display:block;
padding: 20px;
background-repeat: no-repeat;
}
.nav-commission {
background-image: url(https://66.media.tumblr.com/2a8d52f5d1745d2feb9148696ad617ff/tumblr_pz6lc97U0K1v1yf1ao4_r1_250.png);
background-position: center;
display:block;
padding: 20px;
background-repeat: no-repeat;
}
.nav-gallery {
background-image: url(https://66.media.tumblr.com/d24fe4e4e21ca1bb03f8a036f3c31813/tumblr_pz6lc97U0K1v1yf1ao6_r1_250.png);
background-position: center;
display:block;
padding: 20px;
background-repeat: no-repeat;
}
.nav-characters {
background-image: url(https://66.media.tumblr.com/996d587c1f1ac3e30cbb199fe0fde939/tumblr_pz6lc97U0K1v1yf1ao3_250.png);
background-position: center;
display:block;
padding: 20px;
background-repeat: no-repeat;
}
.nav-queue {
background-image: url(https://66.media.tumblr.com/3b75f06c8be0f9156e1ba80269a06f05/tumblr_pz6lc97U0K1v1yf1ao7_250.png);
background-position: center;
display:block;
padding: 20px;
background-repeat: no-repeat;
}
.nav-tos {
background-image: url(https://66.media.tumblr.com/32bb677ea2343351074b563cdde3bf47/tumblr_pz6lc97U0K1v1yf1ao8_250.png);
background-position: center;
display:block;
padding: 20px 0px 20px 0px;
background-repeat: no-repeat;
}
.nav-contact {
background-image: url(https://66.media.tumblr.com/a4bbf4f8b1cc7f592c5b4897d62f2d9c/tumblr_pz6lc97U0K1v1yf1ao5_250.png);
background-position: center;
display:block;
padding: 20px;
background-repeat: no-repeat;
}
<!doctype html>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css?family=Kelly+Slab&display=swap" rel="stylesheet">
<html lang="en">
<title>KLUDGE'S ART</title>
<!-- nav bar -->
<header>
<a href="http://kludges.art"><img class="logo" src="https://66.media.tumblr.com/14455a8b8cb4f6151aa46ecee052bf6f/7600395af9cd6f59-40/s250x400/085278c95d13a8ea01beaf03fb019c3a95297985.png" align="left" alt="Kludge's Art logo"></a>
<nav>
<table class="nav" align="center">
<col width="200px">
<col width="200px">
<col width="200px">
<col width="200px">
<tr>
<td><a class="nav-about" href="http://kludges.art">About</a></td>
<td><a class="nav-b-f" href="http://kludges.art/buoy-friend">B-F</a></td>
<td><a class="nav-commission" href="http://kludges.art/commission">Commission</a></td>
<td><a class="nav-gallery" href="http://kludges.art/gallery">Gallery</a></td>
</tr>
<tr><td><a class="nav-characters" href="http://kludges.art/characters">Characters</a></td>
<td><a class="nav-queue" href="http://kludges.art/queue">Queue</a></td>
<td><a class="nav-tos" href="http://kludges.art/terms-of-service">Terms of Service</a></td>
<td><a class="nav-contact" href="http://kludges.art/contact">Contact</a></td>
</tr></table>
</nav>
</header>