I'm trying to set the "Nelson Mazda" png to fit within the limits of the navbar, but it's showing larger than the navbar as you can see in the screenshot. I tried setting the max-height and max-width of .brand-logo to 100%, but this doesn't seem to be fixing it. What am I missing?
Note: nav-wrapper is set to the same height as the navbar, so setting .brand-logo's height to 100% of it should theoretically work, right?
HTML:
<!-- Navigation bar -->
<div class="navbar-fixed" id="nav">
<nav>
<div class="nav-wrapper">
<!-- Site name -->
<span class="tighter"><img src="images/NelsonMazdaLogo.png">
</div>
</nav>
</div>
CSS:
nav {
background-color: rgba(255, 255, 255, .95);
.brand-logo,
ul a {
color: $black;
padding: 0 15px;
}
.brand-logo {
font-weight: 400;
letter-spacing: -2px;
height: 100%;
max-width: 100%;
.tighter {
letter-spacing: -3px;
}
}
}
set max-height and max-width on the img itself
.brand-logo img {
max-height:100%;
max-width:100%;
}
Your outer nav has to have a height or width.
See these examples:
http://codepen.io/bootstrapped/details/KwYGwq/
.brand-logo {
height: 50px; /* set to height you want image to be constrained to */
}
.brand-logo img {
height:100%;
width:auto;
}
Plus you have a random span tag that isn't closed.
<div class="navbar-fixed" id="nav">
<nav>
<div class="nav-wrapper">
<!-- Site name -->
<a href="/" class="brand-logo">
<span class="tighter"><img src="images/NelsonMazdaLogo.png"></span><!-- missing closing span tag -->
</a>
</div>
</nav>
</div>
The key thing to think about is when you say 100% you have to think, 100% of what exactly? It needs to be inside a parent or grandparent element that has an actual height.
Also if your image itself wasn't cropped properly it could be adding transparent space around the logo. If the above solution doesn't work, try downloading your image and cropping it to make sure it's actually cropped to the logo edges.
You can also try object-fit:
object-fit: contain;
width: 100%;
Related
I'm trying converting my Photoshop design into a web site, manually writing HTML and CSS. It's my first time doing this type of exercise, so I'm having a little problem from the get-go with page dimensions.
I did my PS design using a 1920px page width, this is the fullscreen result. Writing CSS, I set header width to 1920px and logo width to 150px (as in the PS file). But I obtain this (don't worry about logo position).
As you can see, the page is very "zoomed in" and the scrollbar appears down below. I want to display the whole page without a scrollbar, just as in PS, keeping the same ratio between elements.
This is my HTML & CSS code for the header:
#logo img {
float: left;
width: 150px;
height: 150px;
}
#header {
position: absolute;
top: 0px;
left: 0px;
width: 1920px;
/* I also tried width: 100% */
height: 100px;
background: #000000;
}
<div id="header">
<div id="logo">
<img src="..\codice\export\logo.png" alt="logo">
</div>
</div>
As shown in the code, I also tried setting the header's width to 100% but this way the logo proportion (150 px / 1920 px) was not respected.
How can I write in CSS: "1920 should be your 100% when visualizing the page with the browser"?
I'm sorry if this is a silly question but it's my first time working with these tools.
I made this jsfiddle
You can check with a fluid width: 100% you should not have this horizontally scrollbar
Then i added a header_content div with a fixed width of 520px (then you can see it is centered and well placed. but you will need to change that value according to your photoshop header width.
Note : css margin:0 auto makes your div centered horizontally.
Some additional HTML and CSS may solve the problem for you! And I'm considering you have to add the menu which you not yet done. Here is my solution. I put some helpful comment that you help you to understand the code properly. You can have same code at my codepen example.
body {
padding-top: 150px;
/* if you don't add this your code will be hidden under the #heade */
}
#logo img {
float: left;
width: 150px;
height: 150px;
}
#header {
position: absolute;
top: 0;
/*No need to add 'px' when the value is 0 */
left: 0;
/* I also tried width: 100% */
right: 0;
/*Thsi will cover the right side. So no need to declear a width*/
/* logo has some space at to so we are adding a padding at top*/
padding-top: 25px;
height: 75px;
/* reduce to 75px so header will be just half of the logo image*/
background: #000000;
}
.container {
width: 1170px;
/* hae to make this responsive for smallar devices*/
box-sizing: border-box;
margin: 0 auto;
}
.navigation {
float: right
}
/*Eacaping the proper code for the navigation so here is some face code */
.navigation {
color: #fff;
}
<div id="header">
<div class="container">
<div id="logo">
<img src="http://www.logospng.com/images/22/itunes-12-logopng-wikimedia-commons-22786.png" alt="logo">
</div>
<nav class="navigation">
Home Link1 link2 ecc
<!-- I escaping the coding of nav here -->
</nav>
</div>
</div>
I'm having an issue with the header.main-header element. Header is not visible in viewport. I inserted a height value to make it visible. Can someone help me and explain the reason why it's not visible when there is no height inserted.
.main-header {
background: yellow;
padding: 0 3em;
position: absolute;
width: 100%;
top: 0;
height: 85px;
}
ul {
padding: 0;
list-style: none;
}
.main-nav {
position: relative;
}
.nav-left {
float: left;
}
.nav-right {
float: right;
}
.middle {
position: absolute;
left: 50%;
transform: translate(-50%,0);
}
.nav-right li {
display: inline-block;
}
<header class="main-header">
<nav class="main-nav">
<ul class="nav-left">
<li>Try Dropbox Business</li>
</ul>
<div class="middle">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/47/Dropbox_logo_%28September_2013%29.svg/200px-Dropbox_logo_%28September_2013%29.svg.png" alt="Dropbox Logo" />
</div>
<ul class="nav-right">
Download the app
<li>Sign in</li>
</ul>
</nav>
</header>
Here's my work in Codepen:
http://codepen.io/marcvs/pen/Gjwdov?editors=1100
Also, regarding the positioning of the elements inside the nav, I tried my best to position the elements from left/center/middle. But the right side of the navbar is extending to the right and it gives a bottom scroll bar. What is the best technique to postion the elements?
Kindly give me tips to improve my work. Thank you.
You don't need to add so much style to accomplish that header:
Start by looking at your main-header tag. If the main header's width is 100% of the page, the child block nav will also be 100%.
Now, using percentages, make your menu fit the header. there are 3 children within the nav so you could set each width to 1/3 of the width and that should make them fit. Just keep in mind that borders and padding count (Try 30% width for each, having them with float:left on all 3 of the children).
You need to put clear after last ul where is float:right;
Because you have float, and parent element doesn't have height when float is there.
So after last ul put div class="clear" with css .clear {clear:both;}
Or if you are using bootstrap you have class clearfix. pun in nav class="main-nav clearfix"
I'm currently trying to set up div sections so they take up about 95vh of the web page.
The issue is that when I add vh to one of the sections, the image on the next section overlaps the previous section blocking off some of the content.
All of the divs have relative positioning and this only occurs when I add a vh to the div.
section#showcase{
height:92vh;
}
#contentShowcase{
height:92vh;
}
section#judging {
margin-bottom: 50px;
height: 90vh;
}
section#judging #contentEnter {
margin-top: 50px;
height:350px;
}
#judgingImg {
background: url('../images/beyond-2015-city.jpg') no-repeat 0 0;
background-size: cover;
height:50vh;
}
/* Section Content */
section#mainContent,
section#mainContentEnter,
section#mainContentAttend,
section#gobeyond,
section#event,
section#eventInfo,
section#enter,
section#attend,
section#judging,
section#sponsors,
section#venue,
section#showcase,
section#form,
#eventQuote,
#judgingImg,
#sponsorsImg,
.contentBlock {
width: 100%;
min-width: 100%;
display: block;
position: relative;
}
#scrolltoBeyond2015, #scrolltoEvent, #scrolltoShowcase, #scrolltoJudging, #scrolltoVenue {
padding-top: 68px;
margin-top: -68px;
display:block;
}
<section id="showcase" class="">
<a id="scrolltoShowcase"></a>
<div class="chevronDown chevDkBlue hidden-lg hidden-md"></div>
<div id="contentShowcase" class="row col-DarkBlue bkgrd-LtAccentBlue">
</div>
</div>
</section>
<section id="judging">
<a id="scrolltoJudging"></a>
<a class="chevronDown chevtntBlue" href="#scrolltoJudging"></a>
<div id="judgingImg"></div>
</section>
You could use the z-index to set things right in a kind of a layering style.
section#showcase {
height: 92vh;
z-index: 100;
}
#contentShowcase {
height: 92vh;
z-index: 80;
}
In this case, section#showcase would be at the top of the #contentShowcase for it has the higher value of z-index.
In the sample code the problem was caused due to this css -
#contentShowcase{
height:92vh;
}
you will see that the div#contentShowcase is inside section on which you have set height: 92vh but when you set height: 92vh on the child div #contentShowcase, this div goes out of the boundaries of section and hence the part of this div is below the next section
see this fiddle with your original code, I have added a green border to illustrate how it goes out of section
now see this fiddle in which I have removed height
so stop setting height in vh in div present inside section in which too you have set height in vh, use % instead.
I am a newbie to html style, and I want to make a top nav bar like this site(stackoverflow.com) that will be 100% width and on top of the browser. Here is what I tried:
<style>
body{text-align:center;}
.wrapper{width:80%;margin:0 auto;text-align:left;}
.navbar-default {
background-color: #497093;
border-color: #3e5f7d;
}
#nav-bar{
width:100% !important; <-- here I make the nav-bar 100% width.
float:left;
}
</style>
But it will still fixed as 80% width :-(
How can I make this work?
Here is the snippet of html
<body class="wrapper">
<div class="navbar navbar-default navbar-static-top" role="navigation" id="nav-bar">
</div>
...
...
</body>
Just looked at the image and it is as my comment said. You have your nav inside your wrapper. Move it outside and it will be 100% width of the window.
It was 100% of the parent (wrapper) and the parent had 80% width.
Edit
In your case you have a class on body so any child element will be scaled from 80% width. I would recommend wrapping the content in a div and moving the nav outside of that wrapper.
body {
margin: 0;
}
.nav {
background: red;
}
.wrapper {
width: 80%;
margin: 0 auto;
background: #999;
}
<div class="nav">We can go 100%!</div>
<div class="wrapper">
Content Here
</div>
This is my html:
<div id="Header">
<div id="logoContainer">
<a id='logoClick' href='/'></a>
<p id="welcome">Welcome</p>
<h1 class="logoText">first<img id="logoImage" src="image.jpeg" /><span id="second">second</span></h1>
</div>
</div>
and this is my CSS:
#logoClick {
width: 100%;
height: 100%;
z-index: 1;
display: block;
position: absolute;
}
#loginHeader {
font-family: consola;
width: 100%;
background-color: black;
color: white;
}
#logoContainer {
height: 10px;
width: 200px;
padding: 20px;
}
Form some reason, the link is taking up the width and height of the entire page and has a padding of 20px on the top-left and top.. Any idea why?
The link is positioned absolutely which removes it from the normal flow and positions itself relative to the next positioned element. The parent of the anchor is not a positioned element.
To contain the anchor, add position:relative; to #logoContainer.
depending on the effect you are trying to get, you can change the height/width of the link to inherit or you can change the position to relative