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.
Related
I just started with CSS and HTML. I am not able to sync my div and nav tag along the same line. The problem is that my div and nav are too far away from each other. What's the error here?
/* CSS RESET */
* {
margin: 0;
padding: 0;
}
#navbar {
align-items: center;
display: flex;
}
/* Logo And Image */
#logo {
margin: 10px 20px;
}
#logo img {
margin: 0px 0px;
}
/* Navigation Bar:-List Styling */
#navbar ul {
display: flex;
}
<nav id="navbar">
<div id="logo">
<img src="top.png" alt="Image Failed To Load !" width="10%" />
</div>
<ul>
<li class="item">Home</li>
<li class="item">About Us</li>
<li class="item">Recommendations</li>
<li class="item">Contact Me</li>
</ul>
</nav>
<section class="home">
<h1 class="h-primary">
Lorem ipsum
</h1>
</section>
Remove or change this margin:
#logo {
margin: 10px 20px;
}
The 10px adds space to the top and bottom.
The 20px adds space to the left and right.
I checked and tested your code, and from what you asked i understand you want div and ul to be same line, which are located inside nav. Then you should use display:flex; for element.
Don't forget to link your css to your HTML.
<link rel="stylesheet" href="test.css">
It seems perfectly fine in my testing, div and ul at the same line
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
I seem to be having a small problem with the footer on my website.
I have swapped around the code in regards the order it appears in the styling and the html.
Any advice appreciated
Picture of the footer
.left{
text-align:left;
float:left;
}
.right{
float:right;
text-align:right;
}
.centered{
text-align:center;
}
<div class="footer-container">
<footer class="wrapper">
<div id="footer">
<p class="left"><img src="img/map25-redish.png"/> Curaheen, Cork </p>
<p class="right"><img src="img/telephone65-blue.png"/> </p>
<p class="centered"><img src="img/envelope4-green.png"/ </p>
<br/><br/>
</div>
</footer>
I would go further than Alexis's answer with a more modern approach using flexbox:
#footer {
display: flex;
justify-content: space-between;
align-items: center;
/* adjust margin and padding beow to suit your design */
margin: 0;
padding: 0;
}
#footer li {
display: flex;
align-items: center;
}
#footer li img {
margin-right: 5px;
}
<ul id="footer">
<li><img src="http://fakeimg.pl/40"/>Curaheen, Cork </li>
<li><img src="http://fakeimg.pl/40"/>Email address</li>
<li><img src="http://fakeimg.pl/40"/>Phone number</li>
</ul>
That way, the children elements inside #footer will take the space they need, with the same order they are in the HTML, letting space between them (justify-content property) and centered vertically (align-items property).
We follow the same procedure for LI children to align images with text (align-items property)
You'll have to adjust the margin and padding to suit your design, of course.
Actually, it looks like it's a floating problem. To solve this you have many solutions as playing with margin or line-height.
But my advice would be to use a ul list, display your li items in inline-block and give them a width of 33%.
Float remove your elements from the normal flow.
body {
margin:0;
padding: 0;
}
footer {
background: #eee;
padding-top: 30px;
padding-bottom: 30px;
}
ul {
display: block;
width: 100%;
padding: 0;
margin: 0;
}
li {
display: inline-block;
width: 30%;
text-align: center;
}
<footer>
<ul>
<li>#01</li>
<li>#02</li>
<li>#03</li>
</ul>
</footer>
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/`