I've created a nice header for my site but when I try to add content after that such as a simple paragraph it's just getting placed in the same spot under my header container. I've attempted some clear fixes but that did not solve my issue. Thanks for your help in advance!
#back-container {
width: 1214px;
height: 809px;
background-image: url("coffee-beans 2.jpg");
}
#page-container {
width: 900px;
height: 100%;
background-color: rgba(214,214,214, .8);
margin-left: auto;
margin-right: auto;
}
header {
width: auto;
height: 130px;
background-color: D8A071;
border-bottom: 3px solid 864C1B;
position: fixed;
font-family: "Trattatello";
}
#logo {
margin-top: -75px;
}
nav {
float: right;
width: 550px;
padding-top: 40px;
}
nav a {
text-decoration: none;
color: black;
border-radius: 20px;
border: 2px solid black;;
background-color: 864C1B;
padding-top: 15px;
margin-right: 20px;
display: inline-block;
text-align: center;
width: 100px;
height: 45px;
}
<html>
<head>
<title>New Coffee Site</title>
<link rel="stylesheet" type="text/css" href="coffeestyles.css">
</head>
<body>
<div id = "back-container">
<div id = "page-container">
<header>
<img id = "logo" src = "coffelogo1.png">
<nav>
Home
Menu
About us
Something
</nav>
</header>
<article>
<p>
asdfasfasfasfasfasfasfasf
</p>
</article>
</div>
</div>
</body>
</html>
Your header is fixed and so anything after it in the HTML will flow beneath it. Move the <header> to be outside of the .page-container and add margin to the top of the .page-container that is equal to the height of your header. This will push the content down so that it starts at the same point as your header ends.
You also need to add where your header will be with top:0; and width:100%;.
Here is a fiddle showing the changes I mae: http://jsfiddle.net/87c9wduf/
It has to do with the position: fixed. Add margin-top to the element you are using as a container that will move everything down.
Related
Hello I want to try get this title to be in the centre. as shown here it just does not go to the centre and its really annoying me.
screenshot of issue: https://i.imgur.com/tJhbKS1.jpg
If there is anyway in which you can also make this better that would be great. My goal is eventually to maker the centre box stretch 100% of the screen down
My main focus for this post is to make the text in the centre body box to basically have the title test to be in the centre and then the
test to be underneath a little bit in the centre so when I write it will be in the centre and when it reaches the end of the box it will make a new line/.
I also want it so the box is fixed to where it is and it doesn't ever move.
* /*Main Navbar (at top) */ .navbar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: darkgrey;
border-bottom: 0.05px solid black;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
a:hover:not(.active) {
background-color: #a0a0a0;
border-bottom: 0.05px solid black;
border: 0.05px solid black;
}
/*The body in the center of website */
.body-container {
height: 100%;
width: 50%;
margin-left: auto;
margin-right: auto;
}
.menu {
padding: 20px;
display: flex;
margin-left: auto;
margin-right: auto;
width: auto;
background-color: darkgrey;
text-decoration-color: black;
}
.body-container .menu .title {
margin-left: auto;
margin-right: auto;
text-align: center;
padding-left: 50%;
}
.body-container .body-text {
text-align: center;
margin-top:10%;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="./css/header.css">
<link rel="stylesheet" type="text/css" href="./css/site.css">
</head>
<body>
<ul class="navbar">
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li style="float: right; ">Login</li>
</ul>
<div class="body-container">
<div class="menu">
<div class="title">
<h1>test</h1>
</div>
<div class="body-text">
<p>test </p>
</div>
</div>
</div>
</body>
</html>
Remove padding-left:50%; in .body-container .menu .title to center your headline. Furthermore, you used display:flex, this will occur that the subline doesn't get centered.
Have a look into this Codepen.
https://codepen.io/dmnktoe/pen/wOyxor
(Update: I would recommend you, not to use an absolute position for your element, since it isn't very responsive.)
I tried this and worked:
.body-container .menu .title {
margin-left: auto;
margin-right: auto;
text-align: center;
.body-container .body-text {
text-align: center;
margin: auto;
display: block;
position: absolute;
top: 115px;
left: 315px;
I always use margin: 0 auto; and it works almost all the times
I have a problem where my navigation bar seems to scale with the .container in CSS. Now, I'm quite a novice but I've tried messing with the values in CSS, but to no avail. Here's the code for both the HTML and CSS:
* {
margin: 0px;
padding: 0px;
}
body {
font-family: verdana;
background-image: url(images/bg2.jpg);
max-width: 100%;
max-height: auto;
background-position: 0px 100px;
background-repeat: repeat-x;
background-color: black;
background-size: 100%;
}
#header {
background-color: #000000;
height: 100px;
width: 100%;
}
.container {
background-color: grey;
width: 960px;
height: auto;
margin: 0 auto;
color: rgb(200, 200, 200);
}
#logoArea {
width: 300px;
height: 100px;
background-image: url(images/logo.png);
float: left;
display: block;
}
#navArea {
height: 50%;
float: right;
}
#nav {
list-style: none;
margin-top: 5%;
}
#nav a {
color: #C8C8C8;
text-decoration: none;
width: 75px;
height: 50px;
display: table-cell;
vertical-align: middle;
padding: 0;
}
#nav li {
width: 75px;
height: 50px;
float: left;
margin-left: 30px;
background-color: #252525;
border: 2px solid silver;
border-radius: 8px;
padding: 0px;
text-align: center;
display: table-cell;
vertical-align: middle;
}
#nav li:hover {
background-color: grey;
}
.page {
background-color: rgba(19, 19, 19, 0.9);
padding: 20px;
padding-bottom: 1px;
}
p {
margin-bottom: 20px;
}
.box1 {
position: relative;
width: 300px;
height: 100px;
background-image: url(images/logo.png);
background-repeat: no-repeat;
float: left;
}
#imageLogo {
width: 960px;
height: 324px;
background-image: url(images/Triicell-logo.png);
background-repeat: no-repeat;
background-position: center;
}
<html>
<head>
<meta charset="UTF-8">
<title>Test site</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body a link="#C8C8C8" vlink="#C8C8C8" alink="#C8C8C8">
<div id="Header">
<div class="container">
<div class="box1">
<a id="logoArea"></a>
</div>
<div id="navArea">
<ul id="nav">
<li>wp_1
</li>
<li>wp_2
</li>
<li>wp_3
</li>
<li>wp_4
</li>
<li>wp_5
</li>
</ul>
</div>
</div>
</div>
<div id="mainArea">
<div class="container page">
<div id="welcome">Test site</div>
</div>
</div>
</body>
</html>
As I said, I'm a novice, so if there's something painfully obvious that I've missed, I'd be appreciative if you could point me in the right direction. I've been racking my brains all morning, trying to think what it could be.
Here are a couple of screenshots to reference what I'm talking about:
Before scaling the .container:
After scaling the .container:
What I'm doing to scale it is I'm changing the width of the .container to 50%;. Don't worry about anything else - I know what I'm going to do about scaling the rest, i.e. images, etc. - but it's just that navigation bar that seems to jump out of place.
But yeah, I'd be very greatful if anyone can help me with this issue. Failing that, at least point me in the right direction.
Hey thanks for making your question a lot more understandable, the the thing is that if you make the container 50%, then there isn't any more room left for the nav because the #logoArea width is to big so it pushes the nav to the next line, if you want it to work you should decrease the width of the #logoArea and/or the #navArea. I hope this helps.
You need to clear floats
For this you can add the .clear class after #Header.
.clear{
clear:both;
}
Or add .clearfix class in Header
#clearfix:after {
clear: both;
content: "";
display: block;
}
Then you can manage easily you .container width 50% or whatever.
and here is some mistake in your html code like-
<li>wp_1</a>
</li>
It should be like this -
<li>
wp_1
</li>
I hope it will helps to achieve which you want.
Ah... I see what's wrong here. There wasn't enough real estate for the navigation bar for it to be positioned where I wanted it. You see, there is supposed to be a logo beside the navigation bar, but since removing it, the navigation bar is now where I want it to be, even after scaling.
The only thing now would be to find out how to scale the navigation bar itself (i.e. make it so the nav bar changes size in correspondence to what resolution it's being displayed on), but I think that's a fight for another day.
Thank you to everyone who contributed to the question. I knew my foolishness would somehow get the better of me. Thank you, nevertheless.
Since #navArea is nested inside #Header you would have to remove #navArea from the natural flow of the page to achieve what you're after.
This would look something like;
#navArea {
position: absolute;
top: 20px;
right: 20px;
}
Can someone take a look at my code please and tell me:
How can I get the image to go over the <header> and <nav> so that everything else centres properly. I have tried playing with z-index and nothing seems to work.
How do I get the <section> to start under the <nav> rather than right at the top of the page behind the other elements without using loads of <br>s?
#CHARSET "ISO-8859-1";
body {
font-family: "Comic Sans MS", cursive, sans-serif
}
header {
background-color: #ffd800;
color: black;
height: 119px;
width: 100%;
margin: -20px -10px;
min-width: 800px;
position: fixed;
margin: -20px -10px;
text-align: center;
}
.logo {
float:left;
width: 118px;
height: 118px;
margin-right: 50px;
}
header h2 {
min-width: 800px;
}
nav ul {
background-color: #ffd800;
text-align:center;
list-style: none;
width: 800px;
margin: 0 auto 0 auto;
}
nav li {
display: inline;
}
nav a {
display: inline-block;
padding: 0 30px;
text-decoration: none;
}
nav a:hover {
color: white;
}
section {
width: 800px;
margin: 0 auto 0 auto;
background-color: #ffff80;
border-bottom-right-radius: 40px;
border-bottom-left-radius: 40px;
padding: 0 40px 5px 40px
}
section h3 {
text-align: center;
}
.clear {
clear: both;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Chris Atkinson</title>
<link rel="stylesheet" type="text/css" href="resources/css/styles.css">
</head>
<body>
<header>
<img class="logo" src="resources/img/chris.gif" alt="logo">
<br>
<h2>Web Design by Chris Atkinson</h2>
<nav>
<ul>
<li>home</li>
<li>projects</li>
<li>blog</li>
<li>about</li>
<li>contact</li>
</ul>
</nav>
</header>
<section>
<br>
<br>
<br>
<br>
<h3>Welcome to my site</h3>
<p>Please take a good look around, and send me some feedback in
the 'contact' section. I'd love to hear from you</p>
</section>
</body>
</html>
Change these css properties and you should be able to get rid of all the breaks:
section {
width: 800px;
background-color: #ffff80;
border-bottom-right-radius: 40px;
border-bottom-left-radius: 40px;
padding: 100px 40px 5px 40px
}
.logo {
position: absolute;
width: 118px;
height: 118px;
z-index: 20;
}
No need to float left on the logo if you are doing an absolute position. Also, you you want to add top padding (the first value in the padding property) of your section to shift it down below the nav.
http://jsbin.com/woyilesoka/2/edit?html,css,output
You need to break your logo away from your other stuff. Make your logo position: absolute; and create a z-index greater than the divs below it. This way it's above your other divs, and not included in the divs. This will keep the rest of your stuff centered.
Directions:
.logo {
position: absolute;
z-index : 9000;
float:left;
width: 118px;
height: 118px;
}
then move the logo left.
You can make your logo position absolute so that the float of other elements do not interfere with your logo:
.logo {
position: absolute;
width: 118px;
height: 118px;
margin-right: 50px;
}
This is how your make your section below the nav bar by changing margin on the top of the section:
section {
margin: 2opx auto 0 auto;
width: 800px;
background-color: #ffff80;
border-bottom-right-radius: 40px;
border-bottom-left-radius: 40px;
padding: 0 40px 5px 40px;
}
Title says it all, my svg logo div with the iframe in it is pushing down my navigation on the right side of my webpage. I don't understand why it is doing that, so I am here to see if I can find some guidance. As always all help is appreciated.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<link rel="stylesheet" href="css/style.css"/>
<link rel="stylesheet" href="css/normalize.css"/>
<title></title>
</head>
<body>
<Header>
<div id="logo"><iframe src="img/logo/caseywoelfle.com.svg" width="150" height="76" frameborder="none"></iframe></div>
<nav>
<ul>
<li>home</li>
<li>about me</li>
<li>portfolio</li>
<li>blog</li>
<li>contact</li>
</ul>
</nav>
</Header>
<div id="homepage">
<div id="banner-h">
<p id="bht">
</p>
</div>
</div>
<footer>
<span id="fom">
<h1>find out more about me</h1>
</span>
</footer>
</body>
</html>
body {
width: 100%;
background: #444444; }
/*Header styles*/
header {
width: 100%;
height: 77px;
background: #ffffff; }
header nav {
height: 100%;
vertical-align: middle;
float: right;
margin-right: 60px; }
header nav #logo {
width: 150px;
margin-left: 60px;
float: left; }
header nav ul {
list-style-type: none;
margin: 0;
padding: 0; }
header nav li {
height: 100%;
line-height: 77px;
display: inline-block;
margin-left: 55px; }
header nav a {
color: #000000;
text-decoration: none;
text-transform: uppercase; }
/*Homepage Styles*/
#homepage {
width: 100%;
background: #444444; }
#homepage #banner-h {
margin-top: 56px;
height: 751px;
background: #ffffff; }
#homepage #banner-h #bht {
height: 88px;
margin: auto;
color: #000000; }
footer {
margin-top: 56px;
background: #ffffff;
width: 100%;
height: 166px; }
footer #fom {
height: 90%;
text-align: center;
display: table;
width: 100%; }
footer h1 {
display: table-cell;
vertical-align: middle; }
/*# sourceMappingURL=style.css.map */
The problem you have is because your iframe is taking up the whole row, so the menu is pushed down.
You can add this bit of CSS #logo {display:inline-block;} to make the iframe act like an inline element (so everything can co-exists on the same line, much like these words you are reading). Then all you have to do is to ensure your nav element is narrow enough to fit onto the page (or else it will be pushed down because there isn't enough space). This demo should explain it better.
Also of note, you CAN have an SVG without an iframe. Take a look at this website I am developing (http://yamichi.me/tour.php), the logo in the page is an SVG tag and it is not in an iframe. This page has more information on using SVG.
For small images, I'd suggest using a PNG instead, as it does not affect loading time much, and has much better support in browsers.
I'm working in a project and I have this
<html>
<head>
<title><?php $title; ?></title>
<link rel="stylesheet" type="text/css" href="recursos/css/main.css">
<link rel="stylesheet" type="text/css" href="recursos/css/menu.css">
<meta charset="utf-8">
<script type="text/javascript" src="js/jquery-ui-1.10.4.custom/js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.10.4.custom/js/jquery-ui-1.10.4.custom.min.js"></script>
<script type="text/javascript" src="js/menu.js"></script>
</head>
<body>
<header class="centrado">
<div class="loginregister"></div>
<div class="espacio"></div>
<div class="menu">
<p class="home">Home</p>
</div>
<hr>
</header>
Now I'm working in the menu bar and I want to put the <p> home in the center of the menu div
When I put margin-top: 10px to centre the home button it moves all the menu div
I have this css:
body {
background-image: url('../../img/madera.jpg');
}
.centrado {
height: 100%;
width: 80%;
background-color: red;
margin: 0 auto;
}
.menu {
height: 50px;
width: auto;
background-color: blue;
border-radius: 15px;
}
.espacio {
height: 10px;
}
.home {
text-align: center;
background-color: yellow;
width: 60px;
margin-top: 10px;
border-radius: 15px;
}
What can I do?
Use padding-top on .menu instead of margin-top on .home.
use position relative and absolute concept
.menu {
height: 50px;
width: auto;
background-color: blue;
border-radius: 15px;
position:absolute;//it make parent
}
.home {
text-align: center;
background-color: yellow;
width: 60px;
margin-top: 10px;
border-radius: 15px;
position:relative;// it make child now
}
now if you change css of home its doesn't effect all element
fore more see http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
Try this
<header class="centrado">
<div class="loginregister"></div>
<div class="espacio"></div>
<div class="menu">
<center>
<p class="home">Home</p>
</center>
</div>
<hr>
</header>
add float property float:left;
Try this code:
DEMO
.home {
text-align: center;
background-color: yellow;
width: 60px;
margin-top: 15px;
border-radius: 15px;
float:left;
}
If you want to make vertical center then simple adjust the line-height for menu to 50px that make text inside menu vertical-align middle.
.menu {
height: 50px;
line-height:50px;
width: auto;
background-color: blue;
border-radius: 15px;
}