How to code logo and company name in header
How to code logo and company name in header
The following HTML file contains just a header at the top (a horizontal shim). https://jsfiddle.net/SSteven/yeamz57o/
body {
/* override browser defaults */
margin: 0px;
padding: 0px;
}
.clearfix {
overflow: auto;
border: 1px solid red;
background-color: lightgray;
}
.center {
padding: 10px;
/* vertical centering of <h1> */
text-align: center;
/* horizontal centering of <h1> */
}
.logo {
position: absolute;
left: 0px;
top: 0px;
border: 1px solid blue;
z-index: 1;
/* Make the logo and <h1> overlap */
}<!--
The logo is given a height of 100px.
Hence, the padding in the .center class
must be set (by trial and error) to 10 px,
to center-align
-->
<div class="clearfix center">
<img class="logo" src="Logo_MarksC.png" alt="Logo" width="278" height="100">
<h1>MY COMPANY</h1>
</div>The header contains:
1) The Company logo at the left.
2) The Company name horizontally and vertically centered in the shim.
The following problems exist:
1) I have not been able to vertically center the logo perfectly in the shim.
Right now, i have had to adjust the padding manually.
What code can I use for perfect vertical centering of the logo?
2) Right now, I have made the logo and the Company name overlap, by using z-index. As a result, the Company name is horizontally centered perfectly in the full width of the web page. However, the problem is when the screen size is reduced horizontally, the Company name shifts left-ward and eventually slides behind the logo.
If I eliminate the overlap, the Company name will not be horizontally centered perfectly in the full width of the web page, but it solves the problem of the name sliding behind the logo when the screen width is reduced.
I'd like to ask in this connection:
If the header should accommodate a logo to the left and the Company name be horizontally centered, what is the normal / best practice?
html css
edited Nov 19 '18 at 14:44
mplungjan
88k21124181
asked Nov 19 '18 at 14:42
SStevenSSteven
372111
add a comment |
How to code logo and company name in header
The following HTML file contains just a header at the top (a horizontal shim). https://jsfiddle.net/SSteven/yeamz57o/
body {
/* override browser defaults */
margin: 0px;
padding: 0px;
}
.clearfix {
overflow: auto;
border: 1px solid red;
background-color: lightgray;
}
.center {
padding: 10px;
/* vertical centering of <h1> */
text-align: center;
/* horizontal centering of <h1> */
}
.logo {
position: absolute;
left: 0px;
top: 0px;
border: 1px solid blue;
z-index: 1;
/* Make the logo and <h1> overlap */
}<!--
The logo is given a height of 100px.
Hence, the padding in the .center class
must be set (by trial and error) to 10 px,
to center-align
-->
<div class="clearfix center">
<img class="logo" src="Logo_MarksC.png" alt="Logo" width="278" height="100">
<h1>MY COMPANY</h1>
</div>The header contains:
1) The Company logo at the left.
2) The Company name horizontally and vertically centered in the shim.
The following problems exist:
1) I have not been able to vertically center the logo perfectly in the shim.
Right now, i have had to adjust the padding manually.
What code can I use for perfect vertical centering of the logo?
2) Right now, I have made the logo and the Company name overlap, by using z-index. As a result, the Company name is horizontally centered perfectly in the full width of the web page. However, the problem is when the screen size is reduced horizontally, the Company name shifts left-ward and eventually slides behind the logo.
If I eliminate the overlap, the Company name will not be horizontally centered perfectly in the full width of the web page, but it solves the problem of the name sliding behind the logo when the screen width is reduced.
I'd like to ask in this connection:
If the header should accommodate a logo to the left and the Company name be horizontally centered, what is the normal / best practice?
html css
edited Nov 19 '18 at 14:44
mplungjan
88k21124181
asked Nov 19 '18 at 14:42
SStevenSSteven
372111
1
Please use placeholder to add an image to the snippet I made
– mplungjan
Nov 19 '18 at 14:45
Use flex-box to vertical center. For overlapping, I would use a negative margin-left
– Simsteve7
Nov 19 '18 at 14:45
add a comment |
How to code logo and company name in header
The following HTML file contains just a header at the top (a horizontal shim). https://jsfiddle.net/SSteven/yeamz57o/
body {
/* override browser defaults */
margin: 0px;
padding: 0px;
}
.clearfix {
overflow: auto;
border: 1px solid red;
background-color: lightgray;
}
.center {
padding: 10px;
/* vertical centering of <h1> */
text-align: center;
/* horizontal centering of <h1> */
}
.logo {
position: absolute;
left: 0px;
top: 0px;
border: 1px solid blue;
z-index: 1;
/* Make the logo and <h1> overlap */
}<!--
The logo is given a height of 100px.
Hence, the padding in the .center class
must be set (by trial and error) to 10 px,
to center-align
-->
<div class="clearfix center">
<img class="logo" src="Logo_MarksC.png" alt="Logo" width="278" height="100">
<h1>MY COMPANY</h1>
</div>The header contains:
1) The Company logo at the left.
2) The Company name horizontally and vertically centered in the shim.
The following problems exist:
1) I have not been able to vertically center the logo perfectly in the shim.
Right now, i have had to adjust the padding manually.
What code can I use for perfect vertical centering of the logo?
2) Right now, I have made the logo and the Company name overlap, by using z-index. As a result, the Company name is horizontally centered perfectly in the full width of the web page. However, the problem is when the screen size is reduced horizontally, the Company name shifts left-ward and eventually slides behind the logo.
If I eliminate the overlap, the Company name will not be horizontally centered perfectly in the full width of the web page, but it solves the problem of the name sliding behind the logo when the screen width is reduced.
I'd like to ask in this connection:
If the header should accommodate a logo to the left and the Company name be horizontally centered, what is the normal / best practice?
html css
edited Nov 19 '18 at 14:44
mplungjan
88k21124181
asked Nov 19 '18 at 14:42
SStevenSSteven
372111
How to code logo and company name in header
The following HTML file contains just a header at the top (a horizontal shim). https://jsfiddle.net/SSteven/yeamz57o/
body {
/* override browser defaults */
margin: 0px;
padding: 0px;
}
.clearfix {
overflow: auto;
border: 1px solid red;
background-color: lightgray;
}
.center {
padding: 10px;
/* vertical centering of <h1> */
text-align: center;
/* horizontal centering of <h1> */
}
.logo {
position: absolute;
left: 0px;
top: 0px;
border: 1px solid blue;
z-index: 1;
/* Make the logo and <h1> overlap */
}<!--
The logo is given a height of 100px.
Hence, the padding in the .center class
must be set (by trial and error) to 10 px,
to center-align
-->
<div class="clearfix center">
<img class="logo" src="Logo_MarksC.png" alt="Logo" width="278" height="100">
<h1>MY COMPANY</h1>
</div>The header contains:
1) The Company logo at the left.
2) The Company name horizontally and vertically centered in the shim.
The following problems exist:
1) I have not been able to vertically center the logo perfectly in the shim.
Right now, i have had to adjust the padding manually.
What code can I use for perfect vertical centering of the logo?
2) Right now, I have made the logo and the Company name overlap, by using z-index. As a result, the Company name is horizontally centered perfectly in the full width of the web page. However, the problem is when the screen size is reduced horizontally, the Company name shifts left-ward and eventually slides behind the logo.
If I eliminate the overlap, the Company name will not be horizontally centered perfectly in the full width of the web page, but it solves the problem of the name sliding behind the logo when the screen width is reduced.
I'd like to ask in this connection:
If the header should accommodate a logo to the left and the Company name be horizontally centered, what is the normal / best practice?
body {
/* override browser defaults */
margin: 0px;
padding: 0px;
}
.clearfix {
overflow: auto;
border: 1px solid red;
background-color: lightgray;
}
.center {
padding: 10px;
/* vertical centering of <h1> */
text-align: center;
/* horizontal centering of <h1> */
}
.logo {
position: absolute;
left: 0px;
top: 0px;
border: 1px solid blue;
z-index: 1;
/* Make the logo and <h1> overlap */
}<!--
The logo is given a height of 100px.
Hence, the padding in the .center class
must be set (by trial and error) to 10 px,
to center-align
-->
<div class="clearfix center">
<img class="logo" src="Logo_MarksC.png" alt="Logo" width="278" height="100">
<h1>MY COMPANY</h1>
</div>body {
/* override browser defaults */
margin: 0px;
padding: 0px;
}
.clearfix {
overflow: auto;
border: 1px solid red;
background-color: lightgray;
}
.center {
padding: 10px;
/* vertical centering of <h1> */
text-align: center;
/* horizontal centering of <h1> */
}
.logo {
position: absolute;
left: 0px;
top: 0px;
border: 1px solid blue;
z-index: 1;
/* Make the logo and <h1> overlap */
}<!--
The logo is given a height of 100px.
Hence, the padding in the .center class
must be set (by trial and error) to 10 px,
to center-align
-->
<div class="clearfix center">
<img class="logo" src="Logo_MarksC.png" alt="Logo" width="278" height="100">
<h1>MY COMPANY</h1>
</div>html css
html css
edited Nov 19 '18 at 14:44
mplungjan
88k21124181
asked Nov 19 '18 at 14:42
SStevenSSteven
372111
edited Nov 19 '18 at 14:44
mplungjan
88k21124181
asked Nov 19 '18 at 14:42
SStevenSSteven
372111
edited Nov 19 '18 at 14:44
mplungjan
88k21124181
edited Nov 19 '18 at 14:44
mplungjan
88k21124181
edited Nov 19 '18 at 14:44
mplungjan
88k21124181
88k21124181
asked Nov 19 '18 at 14:42
SStevenSSteven
372111
asked Nov 19 '18 at 14:42
SStevenSSteven
372111
asked Nov 19 '18 at 14:42
SStevenSSteven
372111
372111
1
Please use placeholder to add an image to the snippet I made
– mplungjan
Nov 19 '18 at 14:45
Use flex-box to vertical center. For overlapping, I would use a negative margin-left
– Simsteve7
Nov 19 '18 at 14:45
add a comment |
1
Please use placeholder to add an image to the snippet I made
– mplungjan
Nov 19 '18 at 14:45
Use flex-box to vertical center. For overlapping, I would use a negative margin-left
– Simsteve7
Nov 19 '18 at 14:45
1
1
Please use placeholder to add an image to the snippet I made
– mplungjan
Nov 19 '18 at 14:45
Please use placeholder to add an image to the snippet I made
– mplungjan
Nov 19 '18 at 14:45
Use flex-box to vertical center. For overlapping, I would use a negative margin-left
– Simsteve7
Nov 19 '18 at 14:45
Use flex-box to vertical center. For overlapping, I would use a negative margin-left
– Simsteve7
Nov 19 '18 at 14:45
add a comment |
2 Answers
2
active
oldest
votes
Avoid absolute positioning. Use flexbox to align the content.
You can create a spacer element to keep the two sides balanced so the heading ends up in the centre.
You should use an @media rule for narrow displays so that the layout changes. A squished heading is almost as bad as an overlapping one. (Note that in this example, due to the small frame Stackoverflow renders the page in, you'll probably have to hit the Full Screen link to avoid the media query switching to the vertical layout for narrow windows)
header {
text-align: center;
}
.spacer {
display: none
}
@media screen and (min-width: 700px) {
header {
display: flex;
}
.logo,
.spacer {
display: block;
width: 278px;
flex: 0 0 auto;
}
.heading {
flex: 1 1 auto;
}
}<header>
<div class="logo">
<img src="https://placekitten.com/278/100" alt="">
<!-- alt is blank because the information conveyed in the image is duplicated by the heading -->
</div>
<div class="heading">
<h1>Kitten Co</h1>
</div>
<div class="spacer">
<!-- This exists just to use up space and so the heading is centred -->
</div>
</div>answered Nov 19 '18 at 14:54
QuentinQuentin
646k718741041
What can I say? Your solution is PERFECT. Thanks indeed for this code. The MQ was great.
– SSteven
Nov 19 '18 at 15:19
add a comment |
You can use css flexbox for perfect centering. It's supported by all major browsers (IE may need a slight workaround), is a CSS standard now and removes all the annoying parts about aligning elements.
.my_class {
display: flex;
}
.my_class--elements {
justify-content: center;
align-items: center;
}
answered Nov 19 '18 at 14:46
DonCarlosIIDonCarlosII
26111
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53376993%2fhow-to-code-logo-and-company-name-in-header%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
Avoid absolute positioning. Use flexbox to align the content.
You can create a spacer element to keep the two sides balanced so the heading ends up in the centre.
You should use an @media rule for narrow displays so that the layout changes. A squished heading is almost as bad as an overlapping one. (Note that in this example, due to the small frame Stackoverflow renders the page in, you'll probably have to hit the Full Screen link to avoid the media query switching to the vertical layout for narrow windows)
header {
text-align: center;
}
.spacer {
display: none
}
@media screen and (min-width: 700px) {
header {
display: flex;
}
.logo,
.spacer {
display: block;
width: 278px;
flex: 0 0 auto;
}
.heading {
flex: 1 1 auto;
}
}<header>
<div class="logo">
<img src="https://placekitten.com/278/100" alt="">
<!-- alt is blank because the information conveyed in the image is duplicated by the heading -->
</div>
<div class="heading">
<h1>Kitten Co</h1>
</div>
<div class="spacer">
<!-- This exists just to use up space and so the heading is centred -->
</div>
</div>answered Nov 19 '18 at 14:54
QuentinQuentin
646k718741041
What can I say? Your solution is PERFECT. Thanks indeed for this code. The MQ was great.
– SSteven
Nov 19 '18 at 15:19
add a comment |
Avoid absolute positioning. Use flexbox to align the content.
You can create a spacer element to keep the two sides balanced so the heading ends up in the centre.
You should use an @media rule for narrow displays so that the layout changes. A squished heading is almost as bad as an overlapping one. (Note that in this example, due to the small frame Stackoverflow renders the page in, you'll probably have to hit the Full Screen link to avoid the media query switching to the vertical layout for narrow windows)
header {
text-align: center;
}
.spacer {
display: none
}
@media screen and (min-width: 700px) {
header {
display: flex;
}
.logo,
.spacer {
display: block;
width: 278px;
flex: 0 0 auto;
}
.heading {
flex: 1 1 auto;
}
}<header>
<div class="logo">
<img src="https://placekitten.com/278/100" alt="">
<!-- alt is blank because the information conveyed in the image is duplicated by the heading -->
</div>
<div class="heading">
<h1>Kitten Co</h1>
</div>
<div class="spacer">
<!-- This exists just to use up space and so the heading is centred -->
</div>
</div>answered Nov 19 '18 at 14:54
QuentinQuentin
646k718741041
What can I say? Your solution is PERFECT. Thanks indeed for this code. The MQ was great.
– SSteven
Nov 19 '18 at 15:19
add a comment |
Avoid absolute positioning. Use flexbox to align the content.
You can create a spacer element to keep the two sides balanced so the heading ends up in the centre.
You should use an @media rule for narrow displays so that the layout changes. A squished heading is almost as bad as an overlapping one. (Note that in this example, due to the small frame Stackoverflow renders the page in, you'll probably have to hit the Full Screen link to avoid the media query switching to the vertical layout for narrow windows)
header {
text-align: center;
}
.spacer {
display: none
}
@media screen and (min-width: 700px) {
header {
display: flex;
}
.logo,
.spacer {
display: block;
width: 278px;
flex: 0 0 auto;
}
.heading {
flex: 1 1 auto;
}
}<header>
<div class="logo">
<img src="https://placekitten.com/278/100" alt="">
<!-- alt is blank because the information conveyed in the image is duplicated by the heading -->
</div>
<div class="heading">
<h1>Kitten Co</h1>
</div>
<div class="spacer">
<!-- This exists just to use up space and so the heading is centred -->
</div>
</div>answered Nov 19 '18 at 14:54
QuentinQuentin
646k718741041
Avoid absolute positioning. Use flexbox to align the content.
You can create a spacer element to keep the two sides balanced so the heading ends up in the centre.
You should use an @media rule for narrow displays so that the layout changes. A squished heading is almost as bad as an overlapping one. (Note that in this example, due to the small frame Stackoverflow renders the page in, you'll probably have to hit the Full Screen link to avoid the media query switching to the vertical layout for narrow windows)
header {
text-align: center;
}
.spacer {
display: none
}
@media screen and (min-width: 700px) {
header {
display: flex;
}
.logo,
.spacer {
display: block;
width: 278px;
flex: 0 0 auto;
}
.heading {
flex: 1 1 auto;
}
}<header>
<div class="logo">
<img src="https://placekitten.com/278/100" alt="">
<!-- alt is blank because the information conveyed in the image is duplicated by the heading -->
</div>
<div class="heading">
<h1>Kitten Co</h1>
</div>
<div class="spacer">
<!-- This exists just to use up space and so the heading is centred -->
</div>
</div>header {
text-align: center;
}
.spacer {
display: none
}
@media screen and (min-width: 700px) {
header {
display: flex;
}
.logo,
.spacer {
display: block;
width: 278px;
flex: 0 0 auto;
}
.heading {
flex: 1 1 auto;
}
}<header>
<div class="logo">
<img src="https://placekitten.com/278/100" alt="">
<!-- alt is blank because the information conveyed in the image is duplicated by the heading -->
</div>
<div class="heading">
<h1>Kitten Co</h1>
</div>
<div class="spacer">
<!-- This exists just to use up space and so the heading is centred -->
</div>
</div>header {
text-align: center;
}
.spacer {
display: none
}
@media screen and (min-width: 700px) {
header {
display: flex;
}
.logo,
.spacer {
display: block;
width: 278px;
flex: 0 0 auto;
}
.heading {
flex: 1 1 auto;
}
}<header>
<div class="logo">
<img src="https://placekitten.com/278/100" alt="">
<!-- alt is blank because the information conveyed in the image is duplicated by the heading -->
</div>
<div class="heading">
<h1>Kitten Co</h1>
</div>
<div class="spacer">
<!-- This exists just to use up space and so the heading is centred -->
</div>
</div>answered Nov 19 '18 at 14:54
QuentinQuentin
646k718741041
answered Nov 19 '18 at 14:54
QuentinQuentin
646k718741041
answered Nov 19 '18 at 14:54
QuentinQuentin
646k718741041
answered Nov 19 '18 at 14:54
QuentinQuentin
646k718741041
646k718741041
What can I say? Your solution is PERFECT. Thanks indeed for this code. The MQ was great.
– SSteven
Nov 19 '18 at 15:19
add a comment |
What can I say? Your solution is PERFECT. Thanks indeed for this code. The MQ was great.
– SSteven
Nov 19 '18 at 15:19
What can I say? Your solution is PERFECT. Thanks indeed for this code. The MQ was great.
– SSteven
Nov 19 '18 at 15:19
What can I say? Your solution is PERFECT. Thanks indeed for this code. The MQ was great.
– SSteven
Nov 19 '18 at 15:19
add a comment |
You can use css flexbox for perfect centering. It's supported by all major browsers (IE may need a slight workaround), is a CSS standard now and removes all the annoying parts about aligning elements.
.my_class {
display: flex;
}
.my_class--elements {
justify-content: center;
align-items: center;
}
answered Nov 19 '18 at 14:46
DonCarlosIIDonCarlosII
26111
add a comment |
You can use css flexbox for perfect centering. It's supported by all major browsers (IE may need a slight workaround), is a CSS standard now and removes all the annoying parts about aligning elements.
.my_class {
display: flex;
}
.my_class--elements {
justify-content: center;
align-items: center;
}
answered Nov 19 '18 at 14:46
DonCarlosIIDonCarlosII
26111
add a comment |
You can use css flexbox for perfect centering. It's supported by all major browsers (IE may need a slight workaround), is a CSS standard now and removes all the annoying parts about aligning elements.
.my_class {
display: flex;
}
.my_class--elements {
justify-content: center;
align-items: center;
}
answered Nov 19 '18 at 14:46
DonCarlosIIDonCarlosII
26111
You can use css flexbox for perfect centering. It's supported by all major browsers (IE may need a slight workaround), is a CSS standard now and removes all the annoying parts about aligning elements.
.my_class {
display: flex;
}
.my_class--elements {
justify-content: center;
align-items: center;
}
answered Nov 19 '18 at 14:46
DonCarlosIIDonCarlosII
26111
answered Nov 19 '18 at 14:46
DonCarlosIIDonCarlosII
26111
answered Nov 19 '18 at 14:46
DonCarlosIIDonCarlosII
26111
answered Nov 19 '18 at 14:46
DonCarlosIIDonCarlosII
26111
26111
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53376993%2fhow-to-code-logo-and-company-name-in-header%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
Please use placeholder to add an image to the snippet I made
– mplungjan
Nov 19 '18 at 14:45
Use flex-box to vertical center. For overlapping, I would use a negative margin-left
– Simsteve7
Nov 19 '18 at 14:45