How do I align the Logo and Title on same line? Right now the logo is above the title.
/***** Header *****/
.mh-header {
background: #fff;
}
.mh-site-logo {
padding: 20px;
overflow: hidden;
}
.mh-header-text {
margin: 5px 0;
text-transform: uppercase;
}
.mh-header-title {
font-size: 32px;
font-size: 2rem;
line-height: 1;
}
.mh-header-tagline {
display: inline-block;
font-size: 14px;
font-size: 0.875rem;
line-height: 1;
color: #e64946;
padding-top: 10px;
margin-top: 10px;
border-top: 1px solid #e5e5e5;
}
put the logo and title in the same div with a class wrapper element, then for this div element add this css styling
wrapper{ display: flex;}
Related
still learning flexbox. I can´t find the reason about how the items on the nav element are not vertically aligned with the h1 text. Would love some help! Link for the codepen at the end.
The expected result should be both the nav and the h1, inside the .main-header, vertically aligned.
HTML:
<div class="container">
<header class="main-header clearfix">
<h1>📘 The Code Magazine</h1>
<nav>
<!-- <strong>This is the navigation</strong> -->
Blog
Challenges
Flexbox
CSS Grid
</nav>
</header>
</div>
CCS:
* {
/* border-top: 10px solid #1098ad; */
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
color: #444;
font-family: sans-serif;
border-top: 10px solid #1098ad;
position: relative;
}
.main-header {
background-color: #f7f7f7;
/* padding: 20px;
padding-left: 40px;
padding-right: 40px; */
padding: 20px 40px;
margin-bottom: 60px;
/* height: 80px; */
}
nav {
font-size: 18px;
/* text-align: center; */
}
h1,
h2,
h3 {
color: #1098ad;
}
h1 {
font-size: 26px;
text-transform: uppercase;
font-style: italic;
}
a:link {
color: #1098ad;
text-decoration: none;
}
a:visited {
/* color: #777; */
color: #1098ad;
}
a:hover {
color: orangered;
font-weight: bold;
text-decoration: underline orangered;
}
a:active {
background-color: black;
font-style: italic;
}
nav a:link {
/* background-color: orangered;
margin: 20px;
padding: 20px;
display: block; */
margin-right: 30px;
display: inline-block;
}
.main-header {
display: flex;
align-items: center;
}
Here is the link for the codepen:
https://codepen.io/Swanbe/pen/OJzpjor
Thanks in advance!
For past 10 minutes, I have been debugging your code.
Wrote another code like this to see if the problem persists. But that was vertically aligned.
So I dug deeper and tried changing and tags. Nothing Great.
....
Until I just removed that blue rubber(Emoji or whatever you call that ) and added a property in nav.
nav {
height: 100px;
display: flex;
flex-direction: row;
align-items: center;}
and that's it.
Try removing that emoji and see if it helps.
I am wondering why I can't move my .workButton to the center :D? I have tried text-align, or margin:0 auto, but nothing seems to work...
If you see some mistakes/or something that could be done differently, let me know, please!
Any tips would be really helpful!
Here is the link to the code (i wrote it in scss)
* {
margin: 0;
padding: 0; // box-sizing: border-box;
}
body {
font-family: "Titillium Web", sans-serif;
}
.container {
max-width: 1140px;
width: 100vw;
height: 100vh;
margin: 0 auto;
overflow: hidden; // grid-template-rows: 600px 750px 900px 650px 1420px 900px 820px 100px;
}
#hero {
max-height: 600px;
height: 100vh;
background-color: #87509c;
h1 {
text-align: center;
color: #f7f3ea;
font-size: 42px;
line-height: 50px;
margin-top: 140px;
margin-bottom: 60px;
}
.workButton {
text-align: center;
font-size: 18px;
font-weight: 600;
color: #ffffff;
padding: 20px 80px;
text-transform: uppercase;
text-decoration: none;
border: 1px solid #eb7d4b;
border-radius: 5px;
background-color: #eb7d4b;
box-shadow: 0 2px #c86a40;
}
}
.navbar {
display: flex;
margin: 60px 20px 20px 40px;
ul {
margin-left: auto;
list-style-type: none;
align-self: center;
li {
float: left;
a {
text-decoration: none;
color: #ffffff;
padding: 5px 20px;
text-transform: uppercase;
transition-duration: 1.5s;
}
a:hover {
background-color: #643a79;
border-radius: 3px;
transition-duration: .4s;
}
}
}
}
https://codepen.io/anon/pen/ZvXZLe
Apply text-align: center to your #hero wrapper and your link will center just fine.
The <a></a> does'nt has specific width. So, just add on .workButton,
#hero {
.workButton {
width: 100px;
text-align: center;
}
}
That's it...Thank You...
I made have made my first CSS class, but I have got a little problem, the buttons are centered, but thats not what I want.
View: http://prntscr.com/6i30xg
I would like them so they start at the left side only. But when using float: left;to the .body class it will results in
View: http://prntscr.com/6i327q
But I would like that the buttons are on the edge like the homepage.
#import url(http://fonts.googleapis.com/css?family=Muli:300,400,300italic,400italic);
/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */
h1, h2, h3, h4, h5, h6
{
margin-top: 0;
margin-bottom: 2rem;
font-weight: 300;
}
h1
{
font-size: 4.0rem;
line-height: 1.2;
letter-spacing: -.1rem;
}
h2
{
font-size: 3.6rem;
line-height: 1.25;
letter-spacing: -.1rem;
}
h3
{
font-size: 3.0rem;
line-height: 1.3;
letter-spacing: -.1rem;
}
h4
{
font-size: 2.4rem;
line-height: 1.35;
letter-spacing: -.08rem;
}
h5
{
font-size: 1.8rem;
line-height: 1.5;
letter-spacing: -.05rem;
}
h6
{
font-size: 1.5rem;
line-height: 1.6;
letter-spacing: 0;
}
p
{
margin-top: 0;
}
/* Buttons
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.btn
{
display: inline-block;
height: 38px;
padding: 0 30px;
color: #555;
text-align: center;
font-size: 11px;
font-weight: 600;
line-height: 38px;
letter-spacing: .1rem;
text-transform: uppercase;
text-decoration: none;
white-space: nowrap;
background-color: transparent;
border-radius: 4px;
border: 1px solid #bbb;
cursor: pointer;
box-sizing: border-box;
}
.btn
/* Form
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Programming :D
–––––––––––––––––––––––––––––––––––––––––––––––––– */
code {
padding: .2rem .5rem;
margin: 0 .2rem;
font-size: 90%;
white-space: nowrap;
background: #F1F1F1;
border: 1px solid #E1E1E1;
border-radius: 4px;
}
pre > code
{
display: block;
padding: 1rem 1.5rem;
white-space: pre;
}
/* Content
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.content
{
border-width: 20px 20px 0px 20px;
border-radius: 28px 28px 0 0;
box-sizing: border-box;
margin-top: 120px;
max-width: 1280px;
margin-left: auto;
margin-right: auto;
min-height: 100%;
}
.header
{
}
.header span
{
color: #fff;
float: left;
margin-left: 28px;
margin-top: 28px;
font-family: 'Muli', sans-serif;
font-weight: 300;
font-size: 24px;
}
.header ul
{
color: #fff;
float: right;
margin-right: 28px;
margin-top: 28px;
}
.header ul li
{
float: right;
border: 1px solid #fff;
padding: 5px 20px;
border-radius: 11px;
margin-right: 12px;
}
.header ul li a
{
color: #fff;
font-family: 'Muli', sans-serif;
font-weight: 300;
font-size: 11px;
text-decoration: none;
}
.body
{
padding-top: 148px;
}
.footer
{
}
Just remove margin-left: auto; and margin-right:auto; from your content class. OR You can replace auto with any fixed number of pixels like 10px. Setting the margins left and right to auto makes the content to align center of the page. So do not use auto.
You content class should look like,
.content
{
border-width: 20px 20px 0px 20px;
border-radius: 28px 28px 0 0;
box-sizing: border-box;
margin-top: 120px;
max-width: 1280px;
margin-left: <some value in pixels>;
margin-right: <some value in pixels>;
min-height: 100%;
}
Remove text-align: center; from .btn class
I have a css element #main that for some reason is set to 0px x 0px (it was working earlier, I'm not sure what changed.) when #main ul is at 800px x 39px, so therefore the entire element is hidden
Is there a way to have the dimensions of #main automatically change without having to hard-code it in?
I've tried:
overflow: hidden, auto
float: left, center, right
width: 100%
display: block, inline-block, inline
but none of them work.
Here's the link to the html page:
http://goo.gl/Ml2FIo
here's the css code:
/* HEADERS*/
h1 {
margin-top: 80px;
text-align: center;
font-family: Baskerville, 'Baskerville Old Face', 'Hoefler Text', Garamond, 'Times New Roman', serif;
font-size: 50px;
font-weight: 200;
color: #212121;
}
/* MAIN NAVIGATION */
#main {
/*width: 800px;
height: 100px;*/
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
background-color: #fa5858;
position: fixed;
top: 0;
left: 0;
text-align: center;
overflow: auto;
display: inline-block;
}
#main ul {
/*overflow: hidden;*/
margin: 0 auto;
padding: 0;
position: fixed;
width: 800px;
}
#main ul li {
width: 100px;
display: block;
padding: 10px 20px;
text-align: center;
float: left;
list-style: none;
background-color: #FA5858;
border-right: 1px solid #ffffff;
border-bottom: 1px solid #ffffff;
}
#main ul li a {
text-decoration: none;
color: #ffffff;
}
/*
#main li a:hover{
opacity: 0.8;
}
*/
/*SIDE NAVIGATION*/
#side {
min-width: 100px;
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
background-color: #ffffff;
position: fixed;
top: 0px;
right: 0px;
text-align: center;
overflow: hidden;
margin: 0 auto;
padding: 0;
display: inline-block;
border: 1px solid #fcacac;
padding: 0px 10px;
text-align: center;
float: left;
list-style: none;
}
#side a {
font-size: .75em;
text-decoration: none;
color: #505050;
line-height: 40px;
}
body {
background-image: url("http://commentnation.com/backgrounds/images/argyle_pattern_background_seamless_light_gray.gif");
background-attachment: fixed;
}
/* PARAGRAPH */
section {
background-color: #ffffff;
width: 600px;
margin: 0 auto;
/*margin-: 50px 150px 50px 150px;*/
font-family: Baskerville, 'Baskerville Old Face', 'Hoefler Text', Garamond, 'Times New Roman', serif;
font-size: 1em;
font-weight: lighter;
line-height: 30px;
padding: 20px 50px;
border: 1px solid #fcacac;
text-align: justify;
text-justify: inter-word;
color: #393939;
}
/* FOOTER */
footer {
display: block;
background-color: #ffffff;
padding: 30px 100px;
margin-top: 150px;
position: relative;
/*width: 100%;
bottom: -10px;
left: -10px;*/
border-top: 1px solid #e6e6e6;
}
/* TITLE IMAGE */
#title-img {
/*position: relative;i*/
display: block;
margin-top: 80px;
margin-left: auto;
margin-right: auto;
}
EDIT 1:
I just realized that the #main element is actually visible on a Windows Chrome, but not on Mac Chrome or Safari (which I've been using) while still having the 0px x 0px dimensions.
You can use flex. It's a nice and easy way to set width, margins, paddings for things.
Here's a wonderful "Complete guide to flexbox":
http://css-tricks.com/snippets/css/a-guide-to-flexbox/
You could do something like this:
nav {
display: flex;
flex: 1;
/* you can set some width if you want
width: 400px;
*/
background-color: #eee;
}
nav ul {
margin: 0;
padding: 0;
display: flex;
flex: 1;
list-style-type: none;
background-color: #ddd;
border: 1px solid #00f;
}
nav ul li {
display: flex;
flex: 1;
padding: 5px 10px;
margin-right: 10px;
background-color: #bbb;
border: 1px solid #f00;
}
nav ul li:last-child {
margin-right: 0;
}
<nav>
<ul>
<li>aaaa</li>
<li>bbbb</li>
<li>cccc</li>
<li>dddd</li>
<li>eeee</li>
</ul>
</nav>
You can change width of nav to whatever you like, or not set it at all and give the nav flex: 1 for "100%".
I hope you all are doing great.
I just wanted to see how my website would look if I moved logo to the right, and the search bar to the left. I edited the style.css to make the logo float right, but when doing that with the search bar, nothing moves ,I tried "center"-ing it and putting it to the "left" but it won't work. Here have a look at some of the code :
/* Horizontal Category List (Default & Flyout) */
#SideCategoryList h2 {
display: block;
border-bottom: #ACA9A9 dashed 1px;
}
/* Logo */
#Logo {
float: left;
margin-bottom: 20px;
}
#Logo h1 {
font-size: 63px;
font-weight: normal !important;
letter-spacing: -1px;
text-transform: none;
padding: 0;
margin: 0 0 15px;
font-family: 'Sacramento', Arial, Sans-Serif;
letter-spacing: normal;
}
#Logo #LogoImage {
}
/* Top Search Form */
#SearchForm{
margin: 15px 0 0 0;
padding: 0px;
width: auto;
position: relative;
border-bottom: 1px dashed #ACA9A9;
overflow: auto;
float: center;
}
#SearchForm form {
padding: 0;
margin: 0;
}
#SearchForm label {
display: none;
}
#SearchForm input {
color: #aca9a9;
width: 145px;
height: 18px;
font-size: 0.8em;
font-weight: 400;
text-transform: uppercase;
padding: 2px 3px 2px 3px;