I am trying to make a navigation bar in the top of my website and my logo appears but the "home" doesn't when i try to float left. What am I doing wrong?
When I make the site as small as it will go, it appears left of the logo, but I want it to be to the right.
<html>
<head>
</head>
<style>
body{
margin: 0px;
padding: 0px;
}
#topBar{
background-color: #242424;
height: 63px;
}
#logo{
height: 40px;
}
#logo-item{
float: left;
margin-left: 90px;
padding-top: 10px;
}
.menu-item{
float: left;
margin-top: -28px;
font-size: 110%
margin-right: 20px;
font-color: white;
}
.topBarItems{
}
</style>
<body>
<div id="topBar">
<div id="logo-item"> <img id="logo" src="backflip-logo.png"> </div>
<div class="menu-item">HOME</div>
</div>
</body>
</html>
Here is your code with a few edits:
<body>
<div id="topBar">
<img id="logo" class="menu-item logo-item" src="backflip-logo.png"><!-- Updated the class -->
<div class="menu-item">HOME</div><!-- Updated the tag placement to fall within top bar -->
</div>
</body>
Also edited your CSS a bit:
#topBar{
background-color: #242424;
height: 63px;
}
#logo{
height: 40px;
}
.logo-item{
float: left;
margin-left: 90px;
}
.menu-item{
padding-top: 10px;
float: left;
font-size: 110%
margin-right: 20px;
color: #ffffff;
}
.topBarItems{
}
But, instead of doing everything from scratch, you may just want to use a framework such as Bootstrap : http://getbootstrap.com
Here is a fiddle for it: https://jsfiddle.net/windrunn3r1990/fck4zsue/
There are several problems with this HTML
First you have the style tag between the head and body tag, it should go inside the head tag - which may cause strange behavior or simply not work depending on the browser
You are using a margin of -28px, which effectively moves the inner div above the outer div which in turn renders it invisible (as it is above the visible page).
font-color should be color
You can solve your issue by using display:inline-block; rather than floating components. https://jsfiddle.net/oxycm856/
HTML
<body>
<div id="topBar">
<div id="logo-item"> <img id="logo" src="backflip-logo.png"> </div>
<div class="menu-item">HOME</div>
</div>
</body>
CSS
#topBar{
width:100%;
background-color:#242424;
height: 63px;
}
#logo-item, .menu-item{
display:inline-block;
color:#fff;
}
Related
I am pretty new at HTML, and I am experimenting with some div tags to move along when zooming in or out the page. The structure of my HTML code is:
<header>
<div class="header">
<div class="title">
<h1>Here goes a title</h1>
</div>
<div class="logo">
<img class="logo" src="my/image/path.png">
</div>
</div>
</header>
And the corresponding CSS code:
header{
padding-left: 260px;
padding-top: 65px;
padding-right: 0px;
padding-bottom: 20px;
}
.title{
float: left;
width: 50%;
}
img.logo{
width: 243.77px;
height: 73.43px;
padding-top: 3px;
position: absolute;
}
Both my title and the logo image moves when zooming.
Any help would be appreciated.
Regards.
That is because you use the padding-left to change the position of the full header, but also you use the px unit which makes its position seems keep changing in different screen size.
A solution is to use percentage instead or use media screen query.
An off-topic suggestion, it is not always a good practice to use padding to change position, use margin is always better.
*This is an example use percentage you could change based on what you want.
header{
padding-left: calc(20vw);
padding-top:calc(5vh);
padding-right: 0;
padding-bottom: calc(10vh);
}
.title{
float: left;
width: 50%;
}
img.logo{
width: 243.77px;
height: 73.43px;
padding-top: 3px;
position: absolute;
}
<header>
<div class="header">
<div class="title">
<h1>Here goes a title</h1>
</div>
<div class="logo">
<img class="logo" src="my/image/path.png">
</div>
</div>
</header>
I know this is a common problem, but I can't get my header the same size like my screen.
I already tried to wrap the header into another div and make width: 100%. This didn't help.
Thanks for your help!
body {
font-family: 'avenirregular';
padding: 0;
margin: 0;
background-color: #f4f4f4;
width: 100%
}
/* Global */
.container {
width: 85%;
margin: auto;
overflow: hidden;
}
/* Header **/
header {
background: #16205E;
color: #ffffff;
padding-top: 30px;
min-height: 7.5vh;
border-bottom: #2B8AFF 3px solid;
display: table-cell;
vertical-align: middle;
}
header a {
color: #ffffff;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
}
header li {
float: left;
display: inline;
vertical-align: top;
padding: 0 20px 0 20px;
}
header #branding {
width: 20%;
float: left;
padding-top: 0px;
padding-bottom: 20px;
}
header #home img {
width: 100%;
height: 100%;
}
header nav {
float: right;
margin-top: 20px;
}
<header>
<div class="container">
<div id="branding">
<a id='home' href="index.html"><img src='./img/test_logo_v1.svg'></a>
</div>
<nav>
<ul>
<li>Content1</li>
<li>Content2</li>
<li>Content3</li>
</ul>
</nav>
</div>
</header>
Just remove the display:table-cell from the header
body{
font-family: 'avenirregular';
padding:0;
margin:0;
background-color:#f4f4f4;
width:100%
}
/* Global */
.container{
width:85%;
margin:auto;
overflow:hidden;
}
/* Header **/
header{
background:#16205E;
color:#ffffff;
padding-top:30px;
min-height:7.5vh;
border-bottom:#2B8AFF 3px solid;
}
header a{
color:#ffffff;
text-decoration:none;
text-transform: uppercase;
font-size:16px;
}
header li{
float:left;
display:inline;
vertical-align:top;
padding: 0 20px 0 20px;
}
header #branding{
width:20%;
float:left;
padding-top:0px;
padding-bottom:20px;
}
header #home img{
width:100%;
height:100%;
}
header nav{
float:right;
margin-top:20px;
}
<body>
<header>
<div class="container">
<div id="branding">
<a id='home' href="index.html"><img src='./img/test_logo_v1.svg'</a>
</div>
<nav>
<ul>
<li>Content1</li>
<li>Content2</li>
<li>Content3</li>
</ul>
</nav>
</div>
</header>
</body>
I have a good convention for you to follow which I have designed for myself and it works pretty well. Look Below.
Side-Note: I would remove the UL list. And just use links straight up then you can use CSS to style your menu links. it will make your life easier.
Every page must have a wrapper div to wrap all of your html.
Then inside your wrapper you can manage your content. But your wrapper must always have a width of 100%, and your box-width will will never be full width, the name explains it's purpose. This standard allows you to control your pages full width content such as banner or whatever you may want full width at any level on the page. And then if you have something like text content you use the box-width style class to center you content.
The way in which I have left the code for you will also take mobile into consideration, responsive design is important. But you can optimize it however you feel. :)
To get all your elements inline, investigate these functionalities based on what works best for you.
https://www.w3schools.com/css/css_inline-block.asp ->inline-block
and
https://www.w3schools.com/css/css_float.asp ->float
Then apply the appropriate style to your div elements inside the surrounding div.
<div class="wrapper">
<!-- Header Div -->
<div class="header">
<!-- Your header Content goes here -->
</div>
<!-- Body Div -->
<div class="body box-width">
<!-- Your body Content goes here -->
<!-- This body will be box width -> 1200px -->
</div>
<div class="body-2">
<!-- Your body Content goes here -->
<!-- This body will be full width -->
</div>
<!-- Footer Div -->
<div class="footer">
<!-- Your footer Content goes here -->
</div>
</div>
<style type="text/css">
#media only screen and (min-width: 1024px) {
.wrapper{
width: 100%;
max-width: 100%;
}
.box-width{
width: 1200px;
max-width: 100%;
margin: 0px auto;
}
}
#media only screen and (max-width: 1023px) {
.box-width {
max-width: 90%;
margin: 0px auto;
}
}
</style>
header{
display:inline-block;
width:100%;
}
You have display: table-cell; that means it baheve like table cell... and table cells are content related. You can just remove it and then your header will be display:block that means its automaticly 100%. Retrospectively my answer is not as good as the other one here... so just remove display:table-cell.
I am trying to code a basic HTML navigation header for fun and teach myself some CSS/HTML but I cannot get things to arrange in the way I had intended.
I would like to have a logo on the far left, some links to pages in the middle and a user icon on the right, here is a moc idea:
This is the result of butchering code together :(
I think for my idea to work I need to create 3 element locations inside one overall container.
Something like this but I can't seem to find a efficient way of doing so:
This is my current CSS code:
html {
height:100%;
background-color: #f8f8ff;
min-width: 800px;
max-width: 1000px;
margin: auto;
}
body {
background-color: #FFF;
}
.topnav-logo{
float:left;
background-color: #f8f8ff;
margin: 0;
padding: 0;
}
.topnav-profile{
float:right;
background-color: #f8f8ff;
}
.topnav{
background-color: #f8f8ff;
margin: 0;
padding: 0;
width: auto;
}
ul.topnav {
list-style-type: none;
overflow: hidden;
}
/* Float the list items side by side */
ul.topnav li {
float: left;
line-height: 110px;
}
/* Style the links inside the list items */
ul.topnav li a {
display: inline-block;
color: RGB(120,200,250);
padding: 0px 10px;
text-decoration: none;
transition: 0.3s;
font-size: 30px;
}
and the HMTL to go with it currently looks like this:
<html>
<head>
<link rel="stylesheet" href="stylesheet.css" type="text/css"/>
<title> </title>
</head>
<body>
<a class="topnav-logo" href="index.html"><img src="images/logo.jpg" alt="site-logo"></a>
<ul class="topnav" id="Topnav">
<li>Link</li>
<li>Link</li>
<a class="topnav-profile" href="index.html"><img src="images/profile.png" alt="user profile"></a>
</ul>
body content
</body>
Thanks for the length read and any help is appreciated :)
Edit: So many great replies, thanks all! Sorry for the late feed-back, NYE distractions :(
Just for clarification, I am not looking to put physical visable lines between the logo, links and the profile. I am only using those images as a demonstration as to where I would like each element container. I am looking to align the link text and the profile image as follows:
Links: vertical middle, horizontal middle
Profile img: vertical middle, horizontal right.
Since you're doing for fun i think this is simplest as it gets :)
I didnt do all the tweaking for perfect layout but here is what i think you wanted.
Simply make 3 inline blocks give them text-align:left , center and right and width 33% approx ( including Borders and stuffs) so they take nett 33% each block.
UPDATE for vertical alignment .
div{
display: inline-block;
width:32%;
height: 50px;
line-height:50px;
background-color: pink;
}
.left{
text-align: left;
}
.middle{
text-align: center;
}
.right{
text-align: right;
}
<div class="left">
<span>Logo here on far left</span>
</div>
<div class="middle">
<span>link1</span>
<span>link2</span>
<span>link3</span>
</div>
<div class="right">
<span>User Icon on far right</span>
</div>
Please try this:
<html>
<head>
<link rel="stylesheet" href="stylesheet.css" type="text/css"/>
<title> </title>
</head>
<body>
<div class="header">
<a class="topnav-logo" href="index.html"><img src="images/logo.jpg" alt="site-logo"></a>
<ul class="topnav" id="Topnav">
<li>Link</li>
<li>Link</li>
<li><a class="topnav-profile" href="index.html"><img src="images/profile.png" alt="user profile"></a></li>
</ul>
</div>
body content
</body>
</html>
Here is css:
html {
height:100%;
background-color: #f8f8ff;
min-width: 800px;
max-width: 1000px;
margin: auto;
}
body {
background-color: #FFF;
}
.header{
display:inline-block;
}
.topnav-logo{
background-color: #f8f8ff;
margin: 0;
padding: 0;
}
.topnav-profile{
background-color: #f8f8ff;
}
.topnav{
background-color: #f8f8ff;
margin: 0;
padding: 0;
width: auto;
}
ul.topnav {
list-style-type: none;
overflow: hidden;
}
ul.topnav li a {
color: RGB(120,200,250);
padding: 0px 10px;
text-decoration: none;
transition: 0.3s;
font-size: 30px;
}
Give necessary padding and margin.
Try this -
Make a container like structure with 3 divs aligned in the same line for Top navigation. You have 2 options to align - (i) use display:inline-block or (ii) float
<div class="container">
<div class="nav-container">
<div class="left">
<a>
<img width="100" height="100" src="https://cdn2.iconfinder.com/data/icons/social-media-8/512/image3.png" alt="site-logo"></a>
</div>
<div class="mid">
<ul class="topnav" id="Topnav">
<li>Link</li>
<li>Link</li>
</ul>
</div>
<div class="right">
<a class="topnav-profile" href="index.html"><img width="100" height="100" src="http://www.aspirehire.co.uk/aspirehire-co-uk/_img/profile.svg" alt="user profile"></a>
</div>
</div>
</div>
CSS -
.container {
position:relative;
width:80%;
margin:0 auto;
border:1px solid #cccccc;
}
.nav-container {
border:1px solid #cccccc;
height:100px;
}
.left {
float:left;
border:1px solid #cccccc;
width:20%;
height:100%;
}
.mid {
float:left;
border:1px solid #cccccc;
width:59%;
height:100%;
}
.right {
float:right;
width:20%;
height:100%;
border:1px solid #cccccc;
}
See Fiddle
the your super close to the way I usually handle that. If you put your entire nav-bar in a div tag or even better a nav tag and give it an appropriate class name, then you can style it much easier.
<html>
<head>
<link rel="stylesheet" href="stylesheet.css" type="text/css"/>
<title> </title>
</head>
<body>
<nav class="primaryNav">
<a class="topnav-logo" href="index.html"><img src="images/logo.jpg" alt="site-logo"></a>
<ul class="topnav" id="Topnav">
<li>Link</li>
<li>Link</li>
<li><a class="topnav-profile" href="index.html"><img src="images/profile.png" alt="user profile"></a></li>
</ul>
</nav>
body content
</body>
CSS
.primaryNav{
height: whatever;
width: whatever:
}
.primaryNav ul{
list-style:none;
width: whatever;
float: right
}
.primaryNav li{
display:inline-block;
margin:I usually give a margin here;
}
.primaryNav a{
padding:10px;
}
something like this. I also closed your a tag in an li if you want to control just that one you can also use .primaryNav li:nth-last-child(1)
also about that image you have there, check out Font Awesome, they have tons of easy to use icons, you can use their cdn, or get the whole css file. It can be deff be fun to play with.
Check this out, similar to what you want.
It is based on the moc idea image you provided.
Use it as a guide.
#main{
width: 99%
height: 700px;
border: 1px solid grey;
}
#content{
width: 90%;
height: inherit;
border-right: 1px solid grey;
border-left: 1px solid grey;
margin: 0 auto ;
}
#header{
width: 100%;
border-bottom: 1px solid grey;
height: 80px;
}
.logo{
width: 20%;
height: inherit;
float: left;
border-right: 1px solid grey;
}
.logo img{
max-width: 80px;
max-height: 80px;
padding: 5px;
}
.nav{
width: 50%;
float: left;
margin-right: 5px;
padding: 5px;
}
.icon{
width: 20%;
float: left;
margin-left: 5px;
padding: 5px;
}
.icon img{
max-width: 60px;
max-height: 60px;
}
.nav ul li{
display: inline;
text-decoration: none;
padding: 5px;
border: 1px dashed orangered;
margin: 5px;
}
.text p{
padding: 10px 10px 0;
}
<body>
<div id="main">
<div id="content">
<div id="header">
<div class="logo">
<img src="http://res.cloudinary.com/wisdomabioye/image/upload/v1462961781/about_vbxvdi.jpg" alt="Image" />
</div>
<div class="nav">
<ul>
<li> link 1 </li>
<li> link 2 </li>
<li> link 3 </li>
</ul>
</div>
<div class="icon">
<img src="http://res.cloudinary.com/wisdomabioye/image/upload/v1477218723/images_a0xbmx.png" alt="icon" />
</div>
</div>
<div class="text">
<p>
What is Stick Checking?
The act of using the hockey stick to knock the puck off of the puck carrier's stick or to clear it away from their vicinity.
Sporting Charts explains Stick Checking
Stick checking is a defensive move where a player will stop the puck carrier's progression by knocking the puck off of their stick and out of their possession. It's often done when the defender isn't in a position to stop the attacker by using their body. Stick checking has been used in hockey since day one. There are several variations of the move, such as the poke, tap, sweep, and press check. Another common stick check is lifting the opponent's stick while they're in possession of the puck and then taking it away from them. A good stick check will result in the defending player gaining possession of the puck which will then allow them to start an offensive play. Stick checking can also be considered an offensive play when it's performed in the opponent's zone by a fore checker. A successful stick check in the offensive zone can often lead to a scoring chance.
</p>
<p>
What is Stick Checking?
The act of using the hockey stick to knock the puck off of the puck carrier's stick or to clear it away from their vicinity.
Sporting Charts explains Stick Checking
Stick checking is a defensive move where a player will stop ion of the puck and then taking it away from them. A good stick check will result in the defending player gaining possession of the puck which will then allow them to start an offensive play. Stick checking can also be considered an offensive play when it's performed in the opponent's zone by a fore checker. A successful stick check in the offensive zone can often lead to a scoring chance.
</p>
</div>
</div>
</div>
</body>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title></title>
<style>
html {
height:100%;
background-color: gold;
min-width: 800px;
max-width: 1000px;
margin: auto;}
body {
background-color: #ddd;}
.topnav-logo{
float:left;
background-color: red;
margin: 0;
padding: 0;
width:calc(10% - 2*1px);height:110px;
border:1px solid}
.topnav-profile{
float:right;
background-color: pink;
width:calc(10% - 2*1px);height:110px;
border:1px solid}
.topnav{
margin: 0;
padding: 0;
width: 80%;}
ul {
list-style-type: none;
overflow: hidden;}
/* Float the list items side by side */
.topnav li {
float: left;border:1px solid;
margin-right:.5em;
line-height: 110px;
width:calc(100% /3 - 1*.5em - 2*1px)}
/* Style the links inside the list items */
.topnav li a {
color: RGB(120,200,250);
text-decoration: none;
transition: 0.3s;
font-size: 30px;}
</style>
</head>
<body>
<header>
<div class="topnav-profile">
<img src="images/profile.png" alt="user profile"></div>
<div class="topnav-logo">
<img src="images/logo.jpg" alt="site-logo"></div>
<nav>
<ul class="topnav" id="Topnav">
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</nav>
</header>
<div>2 logos: user profile must be first to float right . Each logo has width:calc(10% - 2*1px)*2, and the nav element:width:calc(100% / the number of links you want - 1*.5em -margin-- -2*1px --border--). See in codepen </div>
</body>
I've got to fix a page that has an href image in the h1 tag, like so:
<h1>Header text <img src="image.png"></h1>
and the page looks fine as is. However, having a link in the h1 tag is doing bad things to my SEO, so I need to separate them. Problem is, when I take the two apart:
<h1>Header text</h1><img src="image.png">
It puts the logo below the header, pushing all of the other containers down and breaking the layout of the page completely. What I want to do is use CSS to make the two elements behave like they're nested without actually needing to be.
You can use float:left; or display:inline-block; to your h1 tag so that image and header text would be in same line:
h1 {
float: left;/*prefer to use inline-block though*/
}
You may also be interested with the following structure for more SEO tuning:
<hgroup>
<h1>Header text</h1>
<h1><img src="image.png"></h1>
</hgroup>
The answer Bhojendra Nepal is good or you could put them in two divs a right div and left div
Example here I have center, right, left:
#wrapper {
margin-right: 200px;
background-color: transparent;
background-image:
linear-gradient(
to right,
lightblue, blue, lightblue, #0008ED, lightblue
);
border-radius: 15px 15px 15px 15px;
}
#left {
float: left;
width: 30%;
height: 70px;
padding-top:5px;
padding-bottom: 5px;
}
#center{
float: left;
width: 30%;
height: 70px;
padding-top:5px;
padding-bottom: 5px;
}
#right{
float: right;
width: 30%;
height: 70px;
padding-top:5px;
padding-bottom: 5px;
margin-left: -60%;
}
<div id="wrapper">
<div id="left"> text</div>
<div id="center"> text</div>
<div id="right">text</div>
<div id="cleared"></div>
</div>
Sorry if this is dumb but it is my first day learning CSS and I am following a course and creating a sample layout and I seem to have made some kind of mistake or got carried away adding my own little mods. I desperately want to fix this as I am enjoying learning and worry that if I get stuck on this I wont feel like proceeding.
I have 3 divs at the bottom on my page with the class .Featurebox within which are nested 3 other divs with a class .Boximage
For the life of me I cannot get them to line up horizontally despite floating them. I suspect it is because I have used margin-left:auto and margin-right:auto in a parent nav. I have played with this solution for a full hour LOL and so I am asking for help here as my first time.
Here is my CSS:
#maincontent {
width: 960px;
margin-left: auto; margin-right:auto;
}
body {
background-color: lightgrey;
}
h1 {
color: orange; font-family: ubuntu; padding-top: 10px;
}
header {
margin-top: 2;
width:100%;
height: 100px;
background: url(grey.png) repeat;
}
#headercontainer {
width: 960px; height: 100px;
margin-left: auto; margin-right: auto;
background-color: olive;
}
#navbar {
width: 960px; height: 20px; margin-left: auto; margin-right: auto; background-color: red;
}
#logo {
background-color: lightgrey; height: 100px; width: 100px;
}
nav {
width: 100%; height: 20px; background-color: #f0f0f0; float:left;
}
article {
width: 960px; height: 500px; background-color: orange;
}
.Featurebox {
background-color: darkgrey;
width: 310px;
height: 200px;
float: left;
}
.Boximage {
background-color:blue; width:285px; height: 130px;
float:left;
}
footer {
width: 100%; height: 80; background-color: 000000; clear: left;
}
.center {
margin-left: auto;
margin-right: auto;
}
Here is my HTML:
<html>
<head>
<link rel="stylesheet" href="styles.css" />
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<header>
<div id="headercontainer">
<div id="logo">logo</div>
</div>
<nav>
<div id="navbar">navigation bar</div>
</nav>
</header>
<div id="maincontent">
<article>article here
</article>
<div class="Featurebox">
<div class="Boximage"</div>
</div>
<div class="Featurebox">
<div class="Boximage"</div>
</div>
<div class="Featurebox">
<div class="Boximage"</div>
</div>
</div>
<footer>
</footer>
</body>
</html>
<div class="Featurebox">
<div class="Boximage"</div>
I suspect your issue is the above. Look carefully, and you will see a syntax error. It should be:
<div class="Featurebox">
<div class="Boximage"></div>
For further testing purposes I suggest putting in some inline content in the box to ensure it renders. (if no height or width is specific it will be empty, this is not a problem if a width and height is specified, but I like to cover my bases.) My suggestion would be to simpyl add a paragraph with text.
<div class="Featurebox">
<div class="Boximage"><p>Box 1</p></div>
It should also be noted that if you are floating Featurebox to the left, then it's child does NOT also need to be floated. So you can remove the float: left; on .Boximage
Further more I would suggest you find a good editor to write your code in, something that will color code your elements and highlight the ends of your tags when you are clicked within an element. I personally use notepad++ and dreamweaver, though a lot of people paint a bad picture of dreamweaver, as long as you stay strictly within Code view, then it is a great application to write code with and it features a build in FTP manager.
You're missing the > after the opening part of the .Boximage tag:
<div class="Boximage"</div>
It seems to work if you correct that.
http://jsfiddle.net/CLUTP/1/