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>
Related
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!
making a website for the first time and I found that when I zoom out, my layout size get messed up. can anyone help explain to me why? and how to fix it Thanks!
This is what its like at 100% zoom: http://puu.sh/peI6R/c7f45747a0.png
When I zoom out: http://puu.sh/peI80/f5fb16d6d0.png
Also, how can I make my footer have a vertical list on the left side? I tried using float: left but it just scrambled the words.
After trying to make this website, I realized that my CSS properties knowledge is HORRIBLE. I've only done the HTML/CSS/JS on Codecademy and maybe that's not enough, so any tips would be appreciated!
body {
margin: 5px 225px 225px;
background-color: #FFA500;
font-family: Comic Sans MS;
}
.banner {
background-image: url(http://miriadna.com/desctopwalls/images/max/Orange-space.jpg);
height: 250px;
background-size: cover;
background-position: center center;
margin: 0;
}
.heading {
text-align: center;
background-color: #3232FF;
border-bottom: 5px solid black;
}
.Content {
width: 900px;
height: 700px;
margin: auto;
background-color: white;
}
.Profile {
margin-left: 100px;
}
.mypic {
margin-left: 50px;
}
.footer {
width: 900px;
height: 120px;
color: black;
margin: auto;
background-color: #aaa;
}
.footer ul {
list-style: none;
}
.footer li {
display: block;
}
nav {
display: block;
background: #aaa;
}
ul {
text-align: center;
list-style: none;
margin: 0;
padding: 0;
}
li {
display: inline-block;
margin: 5px 100px;
}
a {
color: black;
font-weight: bold;
text-decoration: none;
}
a:hover {
color: white;
}
<html>
<head>
<title>Simon's First Website!</title>
<meta charset="UTF-8">
<meta name="description" content="Simon's Portfolio">
<meta name="keywords" content="Simon Fu First Portfolio">
<meta name="author" content="Simon Fu">
<link rel="stylesheet" type="text/css" href="First.css">
</head>
<body>
<div class="banner"></div>
<nav>
<ul>
<li>Home</li>
<li>About Me</li>
</ul>
</nav>
<div class="Content">
<div class="heading">
<img src="http://vignette1.wikia.nocookie.net/yogscast/images/c/c0/Simon_Banner_png.png/revision/20140308175434">
</div>
<div class="base">
<h1 class="Profile">Profile</h1>
<figure class="mypic">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Smiley.svg/2000px-Smiley.svg.png" height="250" width="250">
<figcaption>My beautiful face</figcaption>
</figure>
</div>
</div>
<div>
<div class="footer">
<div align="center"><strong>Contact Me</strong></div>
<ul class="left">
<li>Email: dontmessiiii#gmail.com</li>
<li>Melee: JK</li>
<li>League of Legends: jk</li>
</ul>
</div>
</body>
</html>
What's happening?
Follow me
This is your layout, basically.
body
banner
nav
content
footer
As you don't use CSS to style our sections yet, all of them have width: auto. In simple words, and only to understand this problem, in the case we can say our sections have the width of your browser's window.
You styled your body element with margin: 5px 225px 225px, so in other words, bacause of the margin shorthand property:
top margin is 5px
right and left margins are 225px
bottom margin is 225px
So now our elements' width is the result of 100% (in this case, browser window's width) - 225px * 2 (because of left and right body's margins).
Then, you set content and footer's width to 900px
.content {
width: 900px;
}
footer {
width: 900px;
}
So, if you back to our layout we see that
body
banner has width: auto => browser window's width - 225 * 2
nav has width: auto => browser window's width - 225 * 2
content has width: 900px
footer has width: 900px
The width of content and footer are static, while the width of banner and nav depends of your browser window's width.
How to solve it
Defining the width of banner and navas you did with content and footer. You can do a div, called for example container to set the width off all element, so if you want to change it in the future you only have to modify one line.
.container {
width: 600px;
margin: 0 auto;
}
Height of .banner and nav must be defined like .Content and footer (900px). margin:0 auto is added to make it always center;
.banner, nav { width: 900px; margin:0 auto; }
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/
I am doing something wrong here but what is it I am not being able to figure out. Is something wrong with my code? Whenever I try to make the screen size smaller the content must be fixed up to a certain width but it's adjusting itself and nothing is displayed beyond it. And here is the jsFiddle with the image of what is wrong below.
HTML
<div class="sitefeed">
<!-- this is the start of site -->
<header>
<div class="wrap head-rel">
<ul class="nav">
<li>Home
</li>
<li>Contact
</li>
<li>Services
</li>
</ul>
<ul class="logo">
<h1>Naveen Niraula</h1>
</ul>
</div>
</header>
<div id="main">
<article>
<div class="wrap">
<h1>This</h1>
<p>My dear has kinda some typo somewhere.</p>
</div>
</article>
</div>
<!-- and here is the end -->
</div>
CSS
* {
margin: 0;
padding: 0;
font-family: consolas;
}
html {
height: 100%;
overflow: hidden;
}
body {
width: 100%;
height: 100%;
overflow: auto;
}
.sitefeed {
display: table;
table-layout: fixed;
width: 100%;
height: 100%;
}
.wrap {
max-width: 901px;
min-width: 900px;
margin: auto;
padding: 0 5px;
}
/* ------------- header here ------------------- */
header ::-moz-selection {
color: #6cccf2;
}
header ::selection {
color: #6cccf2;
}
.head-rel {
position: relative;
}
header {
background: #3b5998;
color: #fff;
}
/* ----------- navigation goes right here ---------------- */
.nav {
list-style-type: none;
position: absolute;
bottom: 0;
right: 0;
}
.nav li {
display: inline-block;
}
.nav li a {
text-decoration: none;
color: #fff;
padding: 10px;
display: block;
}
.nav li:hover {
background: #000;
}
.nav li a:hover {
color: #fff;
}
/* ------------------------ main content goes here ------------------------ */
#main ::-moz-selection {
color: #a0249c;
}
#main ::selection {
color: #a0249c;
}
#main {
background: #e1e1e1;
}
I want it to display the whole content even when the viewport is small but if the viewport exceeds the webpage I want the background color to measure up to fill that space(left and right). Like the image below . But when I remove the width from .sitefeed it's not possible.
Solved.
It seems like table-layout:fixed; was causing the problem but now I fixed it!
Try taking the overflow:hidden out of your HTML style.
In this case when you work with the fixed width, just add this with to header and #main, which are both parents of .wrap with fixed width.
header, #main {width: 900px;}
http://jsfiddle.net/cj9pvz5o/
If I understand your question right, you don't want the following code:
.sitefeed { width: 100% }
If you remove this width, you get the background over the whole layout no matter if its outside of the viewport or not. Block elements (display: block) will always take as much width as they can, if not used in conjunction with float. I guess they same is true for display: table. This will take only 100% of the viewport and thus cut the background color at the point where the other content overflows.
Here is an updated jsFiddle: https://jsfiddle.net/nkwxw9gj/3/ Do you wanted to achieve this?
Note: the reason why it overflows from the viewport is your use of min-width: 900px within .wrap-rule. Change that in case you don't want to overflow for reasonable resolutions.
Images I place are blocking me from clicking links, and I think it is because the image is possibly larger than I thought (though I think I cropped it and I am not sure if it is something else.
Here is a picture (I moved he image as far over as I could in order to avoid this issue, but I would like to move the image closer if this problem can be fixed and I feel it will be helpful to know in the future):
Note: If I move it right it does not push the content or anything, it just makes the links in the nav bar unclickable (if that was not clear).
Here is the HTML:
<nav>
<ul>
<li class="current">Home</li>
<li>Jehovah's Witness</li>
<li>Wood Block Print</li>
<li>Jazz</li>
<li>Being Ethical and Socially Responsible </li>
</ul>
</nav>
<div class="container">
<header>
<h1>
<img src="images/banner.png" alt="banner">
Designer Websites
</h1>
</header>
and my CSS:
nav ul
{
list-style-type: none;
text-align: center;
}
nav ul li
{
padding: 5px;
display: inline-block;
border: solid 1px black;
color: black;
background-color: tan;
}
.current
{
background-color: yellow;
}
body
{
background-color: tan;
font-family: Arial, "Times New Roman", "Sans Serif", Georgia;
}
.container
{
width: 80%;
max-width: 960px;
margin:0px auto;
}
h1 img
{
height: 40%;
position:absolute;
left:-15px;
top: -30px;
}
New picture with the absolute position removed:
I think your "absolute" positioned banner image was floating over navbar. That's the reason it was not clickable.
Remove this code (You may keep the "height" to set fixed height for your image)
h1 img {
height: 40%;
position: absolute;
left: -15px;
top: -30px;
}
Now image and heading will be left aligned. You can simply align them by adding text-align:center in .container. Or you can add this code:
header {
text-align: center;
}
Try adding this in order to put anchor "above" the img
h1 img {
z-index: 1;
}
h1 a {
position: relative;
z-index: 2;
}