Header/nav advice

Report · Apr 04, 2023

Hello,

One big question I've had while creating a portfolio for myself is how to make my name (h1) align with my logo. So far, the only way I know of adjusting the leading is the line-height (3.5vw) decloration. The distance between "Matthew" and "Jablonski" satisfies me.

However, I end up having my whole name slightly lower than I would like (in relation to my logo). What revision(s) do I need to make to move the phrase up slightly? Please make any additional suggestions to how I've done my coding.

Matthew

Report · Apr 04, 2023

Have a look at using flexbox as shown in https://www.geeksforgeeks.org/how-to-vertically-and-horizontally-align-flexbox-to-center/

Wappler, the only real Dreamweaver alternative.

Report · Apr 04, 2023

Thanks for the reference. I tried using the following decloration, having so slightly effect of a reduction in the padding-left: .75%.

display: flex;
justify-content: center;
align-items: center;
height: 100%;

I guess my real question might be: is there a way to only effect the "Jablonski"'s leading - like, making class for that name???

Matthew

Report · Apr 05, 2023

Most of your h1 css makes no sense at all. Certainly using 3.5vw line height IS NOT going to close the vertical gap between the 2 words as that refers to 'width' NOT height, use 3.5vh which refers to height and see if that gives you the required result. Personally I dont set font properties using either vw or vh so I cant guarantee anything.

Seriously you just need to use the flexbox example provided then close the line-height if you require less vertical space between the 2 words. This will verticallly center align the words with your logo.

Report · Apr 05, 2023

Don't style individual elements. That's a bad habit to get into. Instead create a layout structure similar to an artist's grid into which you place your items. Working within a grid makes designing pages & canvases a lot simpler to manage.

Floats fell out of favor quite a while ago -- too hard to control. Whenever possible, use CSS Flexbox or newer CSS Grids instead of Floats.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Apr 05, 2023

I think I'd hit the old easy button on this one and simply move the name text into Photoshop and turn it, and the MJ circle, into a single image.

Report · Apr 05, 2023

I'm all for easy but for web images, Illustrator vector image & text exported to SVG would be better for this than a raster image.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Apr 05, 2023

Full discloser: As you can see, I am no expert with DW. However, all of your advise is hugely informative to me and very valuable to me. To Nancy's point about the logo: it actually is an SVG. And to Osgood: I would mean a lot to me if you could please show me how you would approach the h1 issue, if possible.

Matthew

Report · Apr 05, 2023

CSS Grids

Copy & paste this code into a new, blank document and save.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Grids</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.item1 { grid-area: header; }
.item2 { grid-area: nav; letter-spacing:3px; }
.item3 { grid-area: main; }
.item4 { grid-area: footer; text-align:center }

.grid-container {
display: grid;
/**how many rows & columns to span**/
grid-template-areas:'header header nav nav nav' 
'main main main main main' 
'footer footer footer footer footer';
min-height:15vh;
align-items:center;
}
</style>
</head>
<body>
<div class="grid-container">
<header class="item1">
<img src="https://dummyimage.com/350x125" alt="logo placeholder">
</header>
<nav class="item2">Link | Link | Link</nav>
<main class="item3">
<h1>CSS Grids Layout</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate expedita sequi eaque error, enim, ipsa fugit debitis quam vero quasi reprehenderit minus molestias iure natus labore. Laboriosam quae praesentium perspiciatis.</p>
</main>
<footer class="item4">
<p>Footer goes here | footer text here | more footer text here</p>
</footer>
</div>
</body>
</html>

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Apr 05, 2023

And to Osgood: I would mean a lot to me if you could please show me how you would approach the h1 issue, if possible.

Matthew

By Trains1985

Sure below is some example code:

Just replace the <div class="logo"></div> with your roundal graphic image and set it to the size you want. In this example case its 85px x 85px.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example Code</title>
</head>
<style>
body {
margin: 0;
font-family: helvetica, sans-serif;
font-size: 16px;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #333333;
padding: 20px 50px;
}
.logoName {
display: flex;
align-items: center;
}
.logo {
width: 85px;
height: 85px;
background-color: tomato;
border-radius: 50%;
}
.logoName h1 {
padding: 0;
font-size: 25px;
line-height: 28px;
margin: 0 0 0 10px;
color: #d9d9d9;
font-family: 'georgia' , serif;
font-weight: 500;
}
.mainNav ul {
display: flex;
flex: 1;
margin: 0;
padding: 0;
}
.mainNav li {
list-style: none;
margin: 0 0 0 20px;
padding: 0;
}
.mainNav li a {
text-decoration: none;
color: #d9d9d9;
font-size: 20px;
}
</style>
<body>
<header>
<div class="logoName">
<div class="logo"></div>
<h1>Matthew<br>Jablonski</h1>
</div>
<nav class="mainNav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Illustrations</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
</body>
</html>