I would like to place an image on a div which I use for a navigation bar, but when I resize the image to 50px or above, the padding on the div gets bigger as well. I don't like this since the image will either be too small to see or the navigation bar will be too big to look pleasing, any ideas on how to fix this?
.navbar{
background-color:green;
padding:20px;
}
.navbar #image1{
width:40px;
margin-left:950px;
padding:0px;
}
<div class='navbar'>
<a href='home.html'>Home</a>
<a href='1.html'>Profile</a>
<a href='2.html'>Transactions</a>
<a href='3.html'><p>Settings</p></a>
<img src='https://picsum.photos/200/300' id='image1'/>
</div>
You should first start by removing
margin-left:950px
as the margin will exclude your item from your navbar
then apply flex properties to your navbar
.navbar {display : flex}
so your navbar items become in the same line
I recommend checking out this flex-box guide as well flexbox properties
can you please share the image's link so we can help you?
also you most edit margin-left:950px; to margin-left: auto; if you want to center it
and this is an example navbar code (press run to see what is it)
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.navbar{
padding: 10px 20px;
background: black;
color: white;
display: flex;
align-items: center;
}
.navbar li{
list-style: none;
display: inline-block;
padding: 0 20px;
cursor: pointer;
}
.navbar li a{
color: white;
text-decoration: none;
}
.navbar li:hover,
.navbar li a:hover{
color: #666;
}
.navbar img{
width: 50px;
height: 50px; /*or :auto ; */
}
<ul class="navbar">
<li>home</li>
<li>project</li>
<li>contact</li>
<li><a>settings</a></li>
<img src="https://www.calliaweb.co.uk/wp-content/uploads/2015/10/600x600.jpg"/>
</ul>
<br><br><br>
<p>or</p>
<br><br><br>
<ul class="navbar">
<img src="https://www.calliaweb.co.uk/wp-content/uploads/2015/10/600x600.jpg"/>
<li>home</li>
<li>project</li>
<li>contact</li>
<li><a>settings</a></li>
</ul>
I think you need to learn the basics before start doing websites
Related
There is a gap above the top of the image. What is causing it? I want the image to appear from the very top of the page. The image covers takes up half the width of the webpage.
The HTML (Here I have added a navbar and there is a div tag which consists an image.)
<nav class="navbar">
<ul>
<li><div class ="line-effect">Home</div></li>
<li><div class="line-effect">About</div></li>
<li><div class="line-effect">Portfolio</div></li>
</ul>
</nav>
<div class="bg-image">
<img src="newvec.png" height="800px" width="750px">
</div>
The CSS (This is the styling for the navbar. There is no style applied to the image. The "box:sizing:border-box" property has been applied to the whole document.)
.navbar{
padding:5px;
display: flex;
justify-content: flex-end;
align-items: center;
position:fixed;
padding:50px 10px;
width:100%;
height:8vh;
}
.navbar ul{
display: flex;
list-style: none;
padding: 20px 40px;
}
.navbar ul li a{
font-family: Nunito;
color:black;
text-decoration: none;
font-size: 20px;
display: block;
padding: 5px 25px;
}
did you checked your <body> tag?
If you didn't used reset.css there is standard margin in <body> tag.
Just try to add
body {
margin : 0;
}
on your css tag.
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 have a simple website that I've made from scratch. I got confused with the layout of my header:
H1 title
Text line
Logo
Menu (coding from w3school)
These four are within my div header. I'd like to be able to position them wherever I want within the div. The issue I have is that I'm not sure what coding to use for this (margin, position: relative or absolute, padding, top:, right:, etc.).
I've tried all kinds of combinations but it seems they never position where I want them and they mess up each others' position: the menu loses full width, the logo I can't get nicely with same space between top and right of header div, the H1 and tag don't seem to respond to the pixels I set, and so on.
Could someone please take the time and have a look at my code and come with a suggestion how to make this layout stable?
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title></title>
<style type="text/css">
body {
background-color: #F8F8F8;
}
#page {
width: 900px;
margin: 30px auto;
background-color: #FFFFFF;
}
#header {
height: 377px;
width: 100%;
background-image: url(images/banner.jpg);
background-repeat: no-repeat;
background-position: 0px 0px;
}
#header a {
color: black;
text-decoration: none;
}
#header ul {
list-style-type: none;
margin-top: 0;
padding: 0;
overflow: hidden;
background-color: #3399FF;
position: relative;
top: 264px;
}
#header li {
float: left;
}
#header li a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
#header li a.active {
background-color: gray;
}
#header li a:hover:not(.active){
background-color: #3366CC;
}
.p1 {
font-family: Consolas, monaco, monospace;
font-size: 20px;
position: relative;
top: 28px;
left: 50px;
}
.p2 {
font-family: Consolas, monaco, monospace;
font-size: 16px;
position: relative;
top: 5px;
left: 200px;
}
.logo {
float: right;
position: relative;
top: 8px;
right: 8px;
}
#content {
position: relative;
top: 12px;
left: 10px;
}
#footer {
font-size: 14px;
padding-top: 12px;
padding-bottom: 12px;
text-align: center;
border-top: #D3D3D3 0.5px solid;
}
</style>
</head>
<body>
<div id="page">
<div id="header">
<img class="logo" src="images/logo-d.png">
<span class="p1"><h1>This is my H1 Title</h1></span>
<span class="p2">"This is going to be my tag under H1"</span>
<ul>
<li><a class="active" href="">Link menu</a></li>
<li>Link menu 2</li>
<li>Link menu 3</li>
<li>Link menu 4</li>
<li>Link menu 5</li>
<li>Link menu 6</li>
</ul>
</div>
<div id="content">
<h1>H1 Title of the page content<h1>
<p></p>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
<p></p>
</div>
<div id="footer">
The footer of the page
</div>
</div>
</div>
</body>
</html>
Put the contents of the header in an Unordered list as so. If you are using a responsive framework like Bootstrap, this will be completely different - but since you did not specify, here is an example without a framework.
HTML
<div id="header>
<ul>
<li><h1>Your Title</h1></li>
<li><p>some line of text you wanted</p></li>
<li class="logo"><img src="yourlogo.png" /></li>
<li class="spacer"></li>
<li><a href="somepage.html>Some Page</a></li>
<li><a href="somepage.html>Some Page</a></li>
<li><a href="somepage.html>Some Page</a></li>
</ul>
</div>
CSS
#header ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#header li{
padding: 0 20px;
display: inline;
}
#header li.spacer{
width:10%
}
It's just a case of structuring the divs correctly, as Holle points out, this is a list of objects rather than a poster. I think the main issue you are having in positioning is that you're foundation structure within your html isn't beneficial for manipulating.
I would recommend having a container div for each section and then further divs or other content within those. i.e.
<div id="headerContainer">
<h1>Title</h1>
<img id="logo" src="myImagePath">
</div>
<div id="navigation">
<!-- Navigation Bar, your UL list items -->
</div>
<div id="pageContent">
<!-- More content... <img>s, <p>s, <h1>s, probably more divs to structure the content etc-->
</div>
I hope that helps, if you want a suggestion, take a look a DevTips youTube channel, he's great at explaining the design and structuring stages when building a website.
Also, in terms of positioning, check out flexbox froggy (google it), just be aware the browser support isn't fantastic before you jump in.
Cheers,
James
First suggestion: try to think of a webpage as list of objects rather than a poster etc. Screen sizes vary (desktop/mobile) and you should use relative widths and positions to ensure responsiveness of your site. I'm sure you can find a better template to work on.
Second suggestion: If you DO wish to position an element "anywhere" this is an example of correct use of positioning:
<style>
.floatingdiv {
position:absolute;
right:0;
top:0;
}
</style>
<div class="floatingdiv">
<h1>Header</h1>
</div>
I'm trying to get my menu working with an image on the left side. For some reason whenever I try to align the image in same line with the menu it's not working out. This is what the html looks like, I can't get the CSS working at all. It's either throwing the menu under the image or the background disappears and the content overlaps the menu but the image is in the right place. The image is 50px in height as well so it shouldn't be a problem.
HTML:
<div>
<img src="logo_small2.png" alt="" id="banner">
<nav>
<ul>
<li class="selected">Main page</li>
<li>Classes</li>
<li>Game modes</li>
<li>Contact</li>
</ul>
</nav>
</div>
CSS:
header div {
height: 50px;
background: #333333;
}
#banner,
header ul li {
display: inline-block;
}
header nav > ul > li{
box-sizing: border-box;
height: 50px;
padding: 12px;
position: relative;
}
What happens now is that the banner is in place over the background of the div and the menu is under the banner and the background in a new line. If I replace the img with a simple h1 it works as a charm >.> I'm clueless, please help
Your CSS does not match the HTMl, there is no header shown.
Assuming that the div is, in fact the header, the nav needs to be inline-block too I suspect. It's currently block level and so 100% wide.
Then you can just align the elements.
header {
height: 50px;
background: tomato; /* for demo only */
}
header nav {
display: inline-block;
vertical-align: middle;
}
header nav ul {
margin: 0;
padding: 0;
}
#banner,
header ul li {
display: inline-block;
vertical-align: middle;
}
header nav > ul > li {
box-sizing: border-box;
height: 50px;
padding: 12px;
position: relative;
}
<header>
<img src="http://www.fillmurray.com/200/50" alt="" id="banner">
<nav>
<ul>
<li class="selected">Main page
</li>
<li>Classes
</li>
<li>Game modes
</li>
<li>Contact
</li>
</ul>
</nav>
</header>
Possible reason is the width of the image not allowing the inline-block comand:
try this:
img{ float:left; width:50%; vertical-align:middle;}
ul{float:right;width:40%;vertical-align:middle;}
I'm trying to make a navigation bar at the top of my site. But the items wont align horizontally properly. I used display: inline. That should make things align side by side right? Well... Once I set display to inline, the width of the item seems to be set to 100%, so the items are not allowed to go side by side. When I set the display to inline-block, the height seems to triple, but is the items are set side by side. Though, I don't want it to be higher than it is because then the appearance isn't what I want.
How can I make the items align properly!? Please help and thank you if you do.
html code
<div id="Bars">
<ul>
<li><p style="width: 50px">Home</p></li>
<li><p style="width: 73px">Software</p></li>
<li><p style="width: 62px">Gallery</p></li>
</ul>
</div>
css code
#Bars{
height: 30px;
width: 100%;
background-color: #000099;
border-radius: 10px;
}
#Bars ul li p{
color: black;
font-size: 20px;
}
#Bars ul li{
list-style: none;
display: inline;
}
Add below css to your style sheet and set inline-block to li, in your case predefined margin and padding are applying
* {
margin:0;
padding:0;
}
#Bars ul li{
list-style: none;
display: inline-block;
}
Use Fiddle
HTML:
<div id="nav">
<ul>
<li class="current_page_item">[LINK]</li>
<li class="page_item">[LINK]</li>
<li class="page_item">[LINK]</li>
<li class="page_item">[LINK]</li>
<li class="page_item">[LINK]</li>
<li class="page_item">[LINK]</li>
</ul>
</div>
CSS:
#nav ul {
list-style: none;
height:16px;
background: #ccc
}
#nav ul li {
position: relative;
display: inline-block;
}
#nav {
position: relative;
text-align: center;
}
use can use display: inline-block; and need to adjust the margin.
js fiddle link :
`https://jsfiddle.net/2pr2pq78/`