Hi I am trying to create a complex header for my website. Right now this header is composed for two section.
Logo - Using a div for this. 15% of header. display: inline-block
Navigation - Using nav for this. 85% of header. display: inline-block
But in browser I am seeing logo on top of nav as kept in stack.
How to get rid of this issue.
Following is my code.
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<!-- main css-->
<link rel="stylesheet" type="text/css" href="./css/main.css"/>
</head>
<body>
<header>
<div id='logo'>
<p>LOGO</p>
</div>
<nav>
klkdfglkdfjklg
</nav>
</header>
<footer></footer>
</body>
</html>
**CSS**
body {
padding: 0;
margin: 0;
border: 0;
background-color: #ccc;
}
header {
background-color: #444;
padding: 0;
margin: 0;
text-align: center;
}
#logo {
display: inline-block;
background-color: yellow;
padding: 0;
margin: 0;
border: 0;
width: 15%;
}
nav {
display: inline-block;
padding: 0;
margin: 0;
border: 0;
width: 85%;
background-color: red;
}
In your case nav and div are inside your header element and the div is on the top of nav. You can try
CSS
nav {
float:left;
}
#logo {
float:left;
}
According to what I understand it looks like you want the logo and nav side by side.
In your code you have written only display:inline-block, with this you also need to add vertical-align:top/bottom/middle.
Apart from this, a simple solution is using float left/right according to requirement
<div id='logo'><p>LOGO</p></div><nav>klkdfglkdfjklg</nav>
remove the newline space between div and nav tags
you can read on this article
How do I remove extra margin space generated by inline blocks?
i recommend also using reset css
http://meyerweb.com/eric/tools/css/reset/
Related
With my tags I am trying to stop it from auto creating a line space.
<h1>Title</h1>
Here is my current css rule.
h1
{
font-family: Blackadder ITC;
text-align: left;
}
And in my body rule I have this
body
{
text-align: center;
}
When I add this to my css h1 rule
display: inline;
It does prevent the h1 tags from automatically creating a line space but then it overrides the:
text-align: left;
rule, therefore the text centers in the middle of the page, and I don't want that.
Is there a way to make the text go in the left hand side of the page, as well as to prevent it from creating automatic line spacing?
You can just go ahead and remove the margin on the <h1>.
body {
text-align: center;
margin: auto 0;
}
nav {
position: relative;
}
h1 {
font-family: Blackadder ITC;
text-align: left;
margin: 0;
}
.button {
position: absolute;
top: 0;
right: 50%;
border-width: thin;
border-style: groove;
border-color: alpha;
margin: 3px 0;
}
.paragraph {
background-color: blue;
padding: 10px;
color: white;
font-family: calibri;
font-size: 30px;
}
<!DOCTYPE html>
<html>
<head>
<title>Website Title</title>
<link href="Main.css" rel="stylesheet" type="text/css">
</head>
<body>
<nav>
<h1>Title</h1>
Button 1
</nav>
<br/>
<div class="paragraph">
<h2>Title</h2>
<p>
Information
</p>
</div>
</body>
</html>
EDIT: I had given previously given the solution to reduce the line spacing (which is the space between two lines) on the h1 element. I guess you wanted both the h1 and the button on the same line, which was not clear in the question. To have your two elements in the same line, you can either make use of positioning (like I have done above), or make use of floats after setting the display of h1 to inline.
I am currently creating a company website, and I have the logo, but I am wanting to put it inside the Navigation Bar, align it so it is at the far right, but halfway down through the height of the navigation bar. I am wanting to do this using CSS.
Here is my index.html.
<!DOCTYPE html>
<html>
<head>
<title>Responsive Navigation Bar</title>
<link rel="stylesheet" type="text/css" href="main.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<img src="images/logo.png" alt="Logo" id="logo" onclick="location.replace('index.html', '_top')">
<div class="nav">
<label for="toggle">☰</label>
<input type="checkbox" id="toggle"/>
<div class="menu">
Home
Business
Services
Learn More
<span id="freetrial">Free Trial</span>
</div>
</div>
</body>
</html>
And here is my main.css
html, body {
width: 100%;
height: 100%;
margin: 0;
}
html {
font-family: "helvetica neue", sans-serif;
}
/* Navigation Bar */
#logo {
text-align: right;
float: right;
}
.nav {
border-bottom: 1px solid #EAEAEB;
text-align: right;
height: 70px;
line-height: 70px;
}
.menu {
margin: 0 30px 0 0;
}
.menu a {
clear: right;
text-decoration: none;
color: grey;
margin: 0 10px;
line-height: 70px;
}
#freetrial {
color: #54D17A;
}
label {
margin: 0 40px 0 0;
font-size: 26px;
line-height: 70px;
display: none;
width: 26 px;
float: right;
}
#toggle {
display: none;
}
#media only screen and (max-width: 500px) {
label {
display: block;
cursor: pointer;
}
.menu {
text-align: center;
width: 100%;
display: none;
}
.menu a {
display: block;
border-bottom: 1px solid #EAEAEB;
margin: 0;
}
#toggle:checked + .menu {
display: block;
background-color: white;
}
}
If you require any more explaining or anything at all in aiding you to answer my question, I will be more than happy to help you, providing it is something that I can actually answer haha.
If I was coding this, I would first put the logo inside the nav div with its own div around it. Then I would use flexbox (it is supported everywhere but IE, btw).
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Make sure to apply "display: flex;" to the parent div (the nav div, presumably). Then I would apply "align-items: center;" to the nav div. This will align all of the menu items to the middle vertically as well (not sure if you want that).
I would then use "justify-content" to the nav items. Depending on what you want done with the other items in the nav bar, you might use "flex-end" or "space-between".
If you do not want to use flexbox, you should refer to this stack overflow question after moving your image to inside the nav div: How to vertically align an image inside a div?
Then you would set "right: 0;" on the image or image div.
Also, I think you may be using floats incorrectly...
https://css-tricks.com/all-about-floats/
You seem to be using them the way it "seems" like they should work, but they can be confusing... I would get rid of your floats, it might be messing things up. Sorry, I can take a harder look if you want at a later time. Feel free to ask any questions you have!
I am coding a practice site using Microsoft Expression Web 4 but I am having a lot of difficulty getting past the landing page. I have all code copied below the questions. The first problem is that I have a hover effect on the links in the nav menu that overlaps the nav bar and I want the text centered within the nav bar vertically. I have tried several how-tos on css-tricks.com and the browser display doesn't seem to respond to the edits I make I tried from there. navbar issue and overflowing image I can manually adjust it so that if fits by figuring out pixels by trial and error but this seems clunky and non-responsive. Is there a better way?
The second question is the image I have for the header section is not fitting the screen properly. It overflows on the right side. It didn't do this before, but now it is and I haven't changed any of the code in the #header img {} section, so I am not sure what happened. I'm pretty much a beginner at this so thanks for any help.
HTML
<head>
<link href="css/styles.css" rel="stylesheet" type="text/css" media="screen"/>
<div id="header">
<div class="nav">
<div id="menu">
Home
Travel
Safari
Live
Search
</div>
</div>
<img alt="drakensburg" src="images/drakensburg.jpg" />
<h1>Visit Africa</h1>
</div>
</head>
CSS
#header {
position:relative;
width: 100vw;
height: 600px;
overflow:hidden;
right: .5em;
bottom: 1em;
}
#header .nav {
display:inline-block;
height:40px;
width:100%;
background-color:#a41d0e;
overflow:visible;
z-index: 10;
}
.nav #menu a{
display: inline;
float:left;
position: relative;
vertical-align:middle;
padding: 1em 1em 1em 1em;
text-decoration: none;
color: white;
}
.nav #menu a:hover {
background-color:#7f170b;
}
Use CSS properties display: flex and align-items: center to center vetically items in a row.
body {
margin: 0;
}
nav {
display: flex;
background-color: #a41d0e;
}
nav a {
display: flex;
align-items: center;
height: 40px;
padding: 1em;
text-decoration: none;
color: white;
}
nav a:hover {
background-color: #7f170b;
}
<html>
<body>
<header>
<nav id="menu">
Home
Travel
Safari
Live
Search
</nav>
<img alt="drakensburg" src="images/drakensburg.jpg" />
<h1>Visit Africa</h1>
</header>
<body>
<html>
Nothing except the link tag should be between <head></head> in the exmple you gave! I assume that's a mistake.
#header {
width: 100vw;
height: 600px;
overflow:hidden;
}
technically you don't need any styles for your header. See css for img below. If you want to your header to be 600px, and have your image fill it, you should set your image as a background image in css
background-image: url('path/to/img.jpg');
Alternatively, you could :
/*style your image like so. It won't ever be wider than its immediate parent container*/
img{
max-width: 100%;
height auto;
}
Here is the rest of your css, commented.
#header .nav {
/* no need for any display property here as it is block by default and takes up 100% of the width you probably don't need it to be inline-block either if it'll take up 100% of the width */
height:40px;
background-color:#a41d0e;
/*z-index is only useful for positioned elements (relative, absolute or fixed) so either give position: something to your navbar or ditch the z-index !*/
}
As far as the links go you don't need to give them a top and bottom padding, just give them a line-height that is equal to the height of the container, that is 40px. That way the links will be vertically centered, with the same height as their container, and you will still be able to give them the width of your choice with left and right padding.
.nav #menu a{
/*don't need display: inline as it is negated by the float anyway.
position relative alone like this doesn't serve any purpose. vertical-align middle only works for display: inline-block or table/(s)*/
float:left;
line-height: 40px;
padding: 0 1em 0 1em;
text-decoration: none;
color: white;
}
Very useful link where you'll find a whole lot of very useful explanations on all things CSS : http://tympanus.net/codrops/css_reference/
Hope any of this helps!
you can use this code
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style type="text/css">
body {
margin: 0;
}
nav {
display: flex;
background-color: #a41d0e;
}
nav a {
display: flex;
align-items: center;
padding: 15px 35px;
text-decoration: none;
color: white;
}
nav a:hover {
background-color: #7f170b;
}
.outer {
width: 100%;
overflow: hidden;
}
.inner {
display: inline-block;
position: relative;
right: 0;
left: 0;
width: 100%;
}
img {
position: relative;
left: 0;
right: 0;
width: 100%;
}
h1 {
text-align: center;
position: absolute;
left: 0;
top:0;
right: 0
}
</style>
</head>
<body>
<header>
<nav id="menu">
Home
Travel
Safari
Live
Search
</nav>
<div class="outer">
<div class="inner">
<img src="https://3.bp.blogspot.com/-zvTnqSbUAk8/Tm49IrDAVCI/AAAAAAAACv8/05Ood5LcjkE/s1600/Ferrari-458-Italia-Nighthawk-6.jpg" alt="" />
<h1>Visit Africa</h1>
</div>
</div>
</header>
</body>
</html>
This question have been asked before I'm aware of, but unfortunately still haven't found a solution. Even though I tried using their solutions.
My problem is that I can't get rid of the default 8px margin on around the body/html tag. It looks like that it doesn't even respond to the changes I put in between the curly brackets.
Html:
<div class="header">
Header123
</div>
<div class="nav">
<ul>
<li>HOME</li>
<li>PROJECT</li>
</ul>
</div>
<div class="main">
Article
</div>
<div class="footer">Footer</div>
CSS:
body,html {
margin: 0;
text-align: center;
background-color: blue;
}
.container
{
margin: 0;
background-color: red;
}
.header
{
text-align: left;
height: 90px;
background-color: green;
margin: 0;
}
.nav
{
float: right;
}
.nav ul
{
list-style: none;
height: 30px;
padding: 0px;
margin: 0px;
}
.nav ul li
{
margin: 10px;
}
.footer
{
height:40px;
}
Link: https://jsfiddle.net/RasmusGodske/yg2gsa0t/
For HTML:
<body style="margin:0;padding:0">
For CSS:
body {margin:0;padding:0}
Probably you are having a difficulty because margin and padding are two different things. You should try both and use the one that suits your needs.
You can read more about margin vs padding from here
Remember: margin is outside an element's border; padding is inside.
You need to set the padding of the body element to zero. (The margin of the body element is meaningless; it'd represent a space outside the browser window!)
As an aside, you don't need to set any CSS properties on the html element. body already contains everything that you'd want to set properties on.
You can directly remove the margin using:
body { margin: 0; }
I want 3 text boxes aligned LEFT, CENTER, RIGHT along the horizontal axis, and on the same line.
I am able to use margin-left and margin-right to set a text box in the middle, and then using position:absolute and left:0 I am able to get a text box on the left side (on the same line as the middle box).
Now the problem is the last box, the right box. Using position:absolute and right:0, positions the box on the right, but it shows one line below.
I can't figure out what I'm doing wrong, and to be honest, I have no idea how position:absolute and left:0 made the element appear on the same line as the middle element.
#sectionM,
#sectionL,
#sectionR {
width: 250px;
border: 1px outset black;
padding: 5%;
text-align: center;
}
#sectionM {
margin-left: auto;
margin-right: auto;
}
#sectionL {
position: absolute;
left: 0px;
}
#sectionR {
position: absolute;
right: 0px;
}
header {
text-align: center;
}
nav {
text-align: center;
}
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Misha's Homepage</title>
<link rel="stylesheet" type="text/css" href="mainstyle.css">
</head>
<header>
<h1>Hi!</h1>
</header>
<nav>Archive
</nav>
<article>
<section id="sectionL">
This is the left LEFT.
</section>
<section id="sectionM">
This is the mid MID.
</section>
<section id="sectionR">
This is the right RIGHT.
</section>
</article>
</html>
There are so many ways of doing it. Here is the solution of using inline-block, since it's responsive and works well on nearly all browsers.
http://jsfiddle.net/kop21mbg/
body {
text-align: center;
}
nav {
margin-bottom: 1.5em;
}
article {
font-size: 0; /*fix white space*/
}
article > section {
font-size: 16px;
display: inline-block;
width: 250px;
border: 1px outset black;
padding: 30px;
box-sizing: border-box;
}
<header>
<h1>Hi!</h1>
</header>
<nav>
Nav item
</nav>
<article>
<section>This is the left box.</section>
<section>This is the mid box.</section>
<section>This is the right box.</section>
</article>
In case you don't want it to be responsive, add the following style.
article {
width: 750px;
}