• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

vertical align text Dreamweaver header

New Here ,
May 07, 2020 May 07, 2020

Copy link to clipboard

Copied

Full disclosure:  I'm a novice.

I added logo image to header and the header box became wider, making a line of text to the right of the logo sit on the bottom of the header.  I want the line of text to be in the center of the header box.  I tried using "vertical-align: 50px" in the html code following the text but it didn't do anything.

Simple suggestions for how to accomplish the re-alignment is appreciated.  This is the code:

<header>
<div class="primary_header">
<blockquote>
<blockquote>
<h1 class="headermain.title"> <img src="Magnus Logo.png" width="67" height="100" alt=""/><span class="headermain" style="font-family: lato; font-style: normal; font-weight: 400; font-size: 50px;">&nbsp;<span style="font-family: maven-pro; font-style: normal; font-weight: 400; font-size: 50px; text-align: center;">COMPANY NAME</span></span><span style="font-family: maven-pro;font-style: normal;font-weight: 400;line-height: 50px">&nbsp;</span></h1>
</blockquote>
</blockquote>
</div>
<nav class="secondary_header" id="menu">
<ul>
<li>ABOUT</li>
<li>SERVICES</li>
<li>CONTACT</li>
</ul>
</nav>
</header>

Views

1.6K

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
community guidelines
LEGEND ,
May 07, 2020 May 07, 2020

Copy link to clipboard

Copied

Simplify your html structure:

 

<div class="primary_header">

<img src="Magnus Logo.png" width="67" height="100" alt="">

<h1>COMPANY NAME</h1>

</div>

 

Then use css to add styling to the elements (do you know how to deploy css in a linked css stylesheet or embedded between <style></style> tags in the <head></head> section of your page?)

 

Css stylings:

 

.primary_header {

display: flex;

align-items: center;

}

 

.primary_header h1 {

margin: 0;

padding: 0;

font-family: helvetica, sans-serif;

font-size: 50px;

font-weight: 400;

}

 

 

 

 

Votes

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
community guidelines
LEGEND ,
May 07, 2020 May 07, 2020

Copy link to clipboard

Copied

Hi Bobby,

if I understand you in the right way, so you could use the source code of my test-website

http://hansgd.de/DWTest/TextUmfliessen/TextUmfliessenInitialeBild02.php 

Please feel free to play with their diverse parameters.

 

Hans-Günter

Votes

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
community guidelines
Community Expert ,
May 07, 2020 May 07, 2020

Copy link to clipboard

Copied

LATEST

I agree that the markup needs to be cleaner.   See screenshot and code.

 

image.png

 

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML5 Document</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 0 auto;
padding:0 3%;
display:flex;
flex-direction:column;
height:100vh;
font-size: 16px;
font-size: 1rem;
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
}
/**Header**/
header img {
vertical-align: middle;
max-width: 100%;
}
header h1 {
display: inline;
text-align: center;
font-size: 2rem;
}
/**Navigation Menu**/
nav ul {
display: flex;
align-items: stretch;
justify-content: space-around;
width: 100%;
background: rgb(2,139,174);
padding: 0.5rem 0;
white-space: nowrap;
font-size: small;
}
nav li {
display: block;
list-style-type: none;
text-align: center;
}
/**Nav links**/
nav li a {
text-decoration: none;
font-weight: 600;
color: #FFF;
padding: 0 0.5rem;
}
nav li a:hover, 
nav li a:active, 
nav li a:focus { text-decoration: underline; 
}
main {
height:auto;
flex:1;
}
</style>
</head>

<body>
<!--Header-->
<header> <img src="https://dummyimage.com/200x200" alt="XYZ Brand Logo">
<h1>COMPANY NAME </h1>
</header>

<hr>
<!--Navigation-->
<nav>
<ul>
<li><a href="#">ABOUT</a></li>
<li><a href="#">SERVICES</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</nav>

<hr>
<!--Main Content-->
<main>
<h3>Main Content</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam ratione delectus, ea, placeat magni labore. Tenetur autem earum architecto, ad debitis, eveniet iure assumenda, quos repellendus alias cupiditate dolor labore.</p>
<h4>Heading 4</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam ratione delectus, ea, placeat magni labore. Tenetur autem earum architecto, ad debitis, eveniet iure assumenda, quos repellendus alias cupiditate dolor labore.</p>
</main>

<hr>
<!--Footer-->
<footer>
<small>©2020 XYZ Company, all rights reserved</small>
</footer>
</body>
</html>

 

 

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

Votes

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