here is a link to my repo
trevormolano.bitbucket.io
I need to create
I am having issues trying to create the banner. How do I re-size it so it extends to the whole page? I tried using background-image for CSS as well, but it doesn't work well at all. It showed up as a sliver on the top. I have been messing around trying to get it to work, but here it what I have so far:
<header>
<!-- // Logo / Banner -->
<img src="images/cycleWorld.png" alt="CycleWorld Logo" id="logo">
<div id="bannerbox">
<img src="images/banner.jpg" id="banner"/>
</div>
<!-- Logo / Banner // -->
<nav>
<!-- // Navigation Bar -->
<ul>
<li>Home </li>
<li>Shop </li>
<li>Club Events </li>
<li>Blog </li>
<li>Contact </li>
<li>My Cart </li>
</ul>
<!-- Navigation Bar // -->
</nav>
</header>
But I want to not have the image on the HTML, I want to add it with CSS.
Remove the image form the HTML and refactor the #bannerbox in your css:
#bannerbox {
display: grid;
height: 100%;
max-height: 100%;
max-width: 100%;
min-height: 60vh;
/* ^^ set this to the desire height in whatever unit px, etc. */
background-image: url(../images/banner.jpg);
/* ^^ check the path to the image, depends how you are serving your site*/
background-size: cover;
background-repeat: no-repeat;
}
Remember you are calling the background-image from your css not your html and since the image location is images/banner.jpg and your css is css/home.css when calling from the css you will need to go up a folder and then inside the images folder. But once online you can directly call background-image: url(/images/banner.jpg); because the / is the root of your site.
Related
Poorly worded question I think, however, I'm working on some coursework just now, it's a very basic HTML website. I'm trying to overlay the logo and the navigation on my Hero image. The issue I'm facing is trying to get the white bg from the header div to be transparent or remove it completely and have the nav and logo at the top of the hero image.
Hope Below CSS might help you.
Add this CSS in your CSS file.
I have used absolute position to overlay the navbar. you can read more in detail about the positions in CSS - https://www.w3schools.com/cssref/pr_class_position.asp
header {
position: absolute;
}
The easiest way to do it is just move header section to hero section like that:
<div class="hero">
<a href="">
<h1 class="logo"><strong>FOTO.</strong></h1>
</a>
<header>
<nav>
<ul>
<li>HOME</li>
<li>PORTFOLIO</li>
<li>SERVICES</li>
<li>ABOUT</li>
<li>CONTACT</li>
</ul>
</nav>
</header>
<span class="herotext">THE WILD THROUGH A LENSE</span>
</div>
//HTML
<div class="logo">
<img src="OneDrive/sublime/logo.png" alt="hi">
</div>
<div class="row">
<ul class="main-nav">
<ul>
<li class="active">HOME</li>
<li>ABOUT</li>
<li>CONTACT</li>
<li>STUDY</li>
<li>SERVICE</li>
<li>BLOG</li>
</ul>
</ul>
</div>
//CSS
.logo {
width: 150px;
height: auto;
float: left;
margin: 20px;
background: url('logo.png');
}
I put my image on OneDrive in a folder called sublime and then I put the logo in that folder. I use windows 10. For some reason, the image is cropped. I would expect the whole image to be shown and not just a portion of it. there is a thing called OneDrive and I created a folder called 'sublime' and I put the logo there as 'logo.png'.
remove the background:url('logo.png'); inside the css. Also try object-fit: contain; inside the css
If you are using image tag (), then what is the purpose of using background: url('logo.png') in .logo class ?
I'm trying to set my company logo on my header navigation bar with no luck. I tried by adding before the nav itself but it's not centering the content. The image is shown first and the messy menu after that.
<header>
<img src="http://i.imgur.com/jNwTPBi.png">
<nav id="nav" class="ry">
<ul id="main-menu">
<li>
</i>Home
</li>
<li>
</i>About
</li>
<li>
</i>Our work
</li>
<li>
</i>Work
</li>
<li>
</i>Contact
</li>
</ul>
</nav>
</header>
You can try it right here, by adding <img src="http://i.imgur.com/jNwTPBi.png">: http://codepen.io/anon/pen/XKKPGO
How can I put the logo on the left so I can get something like the following solution? I guess I've to make some changes on the .css but I dont know what do I have to edit.
Thanks in advance.
Your CSS is over whelming. All you would need to do is give/create the wrapper a position of relative and the logo the position absolute.
<header>
<div class="wrapper"> ..
<img src="http://i.imgur.com/jNwTPBi.png" class="logo"> ..
header .wrapper {
width: 1100px;
margin: 0 auto;
position: relative;
}
header .wrapper .logo {
position: absolute;
left: 0;
}
i think it's super easy, so i think it might answer ur question
<header>
<div class="with_class">
<img src="">
</div>
<nav></nav>
</header>
put a wrapper div on your image and put an absolute position with it.
width whatever div width u want and height same as ur header. have you ever tried it before?
Hello all I'm trying to add a logo to my navigation bar using HTML and CSS I have managed to get an image loaded on to my nav bar but it is way to big as seen in the picture.
<div class="nav">
<div class="container">
<ul class="pull-left">
<img src="images/test.png">
<li>Home</li>
<li>How to</li>
</ul>
<ul class="pull-right">
<li>Sign Up</li>
<li>Log In</li>
<li>Help</li>
</ul>
<div class="clear"></div>
</div>
</div>
Well, there are several options.
First is to resize your image with any of editors like Photoshop and others.
Second is to set your image width and height via css:
.pull-left img {
display: block;
width: 30px; /* here put your width */
height: 30px; /* here put your height */
}
But if your logo image not going to scale to it's initial size according to your design and media queries, you should take the first approach. It will reduce file size as well.
I want the vertical border of the vertical tab to run on the whole page instead of finishing off where the tabs end.
however since I have given border-right on the tab it ends
with the last tab that is trending. Giving border-right to the content makes sure the height of the border is right but it spoils the spacing between tab and content.
HTML :-
<div class='tabbable tabs-left'>
<ul class='nav nav-tabs'>
<li class='active'>
All
</li>
<li>
New
</li>
<li>
Featured
</li>
<li>
Ending Soon
</li>
<li>
Trending
</li>
</ul>
</div>
This is not default Bootstrap behavior so you will have to modify the css a little. For this to work, the vertical tab <ul> and all of its parents should have the property height: 100%.
For html and body I would apply the styling directly but for the <div> and <ul> I would use custom class so as not to modify the Bootstrap classes to maintain expected behavior for eventual future use in other layouts.
Here is a demo.
The css to add:
html{
height: 100%;
}
body{
height: 100%;
}
.tabbable.tabs-left.full-height{
height: 100%;
}
.nav.nav-tabs.full-height{
height: 100%;
}
The html to modify:
<body>
<div class='tabbable tabs-left full-height'>
<ul class='nav nav-tabs full-height'>
...........