The problem is the vertical padding on the psd layout 30px and 30px, but in practice, setting this size in the css code in the browser show padding 35px and 35px.
Reset margin and padding for everything that only it is possible, there is no result.
Help please to understand, maybe somewhere something overlooked.
screenshot https://yadi.sk/d/LsDSh_UZTDZDW
html
<header class="header">
<div class="container">
<nav class="header-menu">
<ul>
<li>Главная</li>
<li>Информация</li>
<li>Новости</li>
</ul>
</nav>
</div>
</header>
css
body {
font-size: 16px;
width: 100%;
}
.container {
margin: 0 auto;
width: 940px;
}
/* Header */
.header {
background: #000000;
width: 100%;
border-top: 1px solid #242424;
}
/* Header --> menu */
.header-menu li {
display: inline-block;
}
.header-menu a {
color: #fff;
display: inline-block;
padding-top: 30px;
padding-bottom: 31px;
padding-left: 22px;
padding-right: 22px;
margin-right: -0.2em;
text-decoration: none;
}
ul element gives you default padding-left and margin-top and body gives margin :
nav.header-menu ul { padding:0; margin:0; }
body {margin : 0}
JSFiddle
Related
I'm new to HTML and CSS.
I'm trying to do a website, and I'm starting by the navbar, but this navbar is not "scalable" for every screen side, when it is on full screen fine but when I minimize it it does not load the part on the right side wich is "About". All of the menus are pointing to the same page and for now that's the objective.
Here's the Code:
body {}
.navbardiv {}
.navbar_ul {
list-style-type: none;
margin: 0;
padding: 0;
/*overflow:hidden;*/
background-color: #333;
border: 5px solid gray;
margin: -8px;
width: auto;
min-width: 600px;
height: 70px;
}
li {
float: left;
padding: 10px 150px;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
<!--NAVBAR-->
<div class="navbardiv">
<ul class="navbar_ul">
<li class="navbar_li_Contact">Contact</li>
<li class="navbar_li_WebHosting">Webhosting</li>
<li class="navbar_li_About">About</li>
</ul>
</div>
You are setting the padding for li to 150px which is very high, you need to reduce.
But if you want the links to take the whole width and to be evenlly spaced, then you can use flex box and justify-content: space-between;
see code snippet:
body {}
.navbardiv {}
.navbar_ul {
list-style-type: none;
margin: 0;
padding: 0;
/*overflow:hidden;*/
background-color: #333;
border: 5px solid gray;
margin: -8px;
width: auto;
min-width: 600px;
height: 70px;
display: flex;
justify-content: space-between;
}
li {
float: left;
padding: 10px 20px;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
<!--NAVBAR-->
<div class="navbardiv">
<ul class="navbar_ul">
<li class="navbar_li_Contact">Contact</li>
<li class="navbar_li_WebHosting">Webhosting</li>
<li class="navbar_li_About">About</li>
</ul>
</div>
Your navbar is not responsive because of min-width: 600px; part. What this one will do is that when screen resolution is below 600px in width it will keep your navbar at 600 px. Thus it will align it to leftmost part of the screen which will leave you a cropped right edge.min-width:100%; wont work either since it will start to crop when inner elements of the navbar will not fit.
It is easy to fix this. Just change it to width:100%;.
**CSS**
#charset "utf-8";
#import 'https://fonts.googleapis.com/css?family=Alegreya+Sans';
/* CSS Document */
*{
margin: 0;
padding: 0;
border: 0;
}
body{
background: #EFEFEF;
color: black;
font-family: Cambria, Hoefler Text, Liberation Serif, Times, Times New Roman, serif;
margin: 0;
}
header{
width: 100%;
background: rgba(10,37,195,0.76);
height: 50px;
}
#header-inner{
max-width: 1200px;
margin: 0 auto;
}
nav{
float: right;
padding: 10px 0;
}
#menu-icon{
height: 40px;
width: 40px;
display: hidden;
background: url(../img/NAV.png) no-repeat center;
}
ul{
list-style-type: none;
}
nav ul li{
font-family: 'Alegreya Sans', sans-serif;
font-size: 150%;
display:inline-block;
float: left;
padding: 10px;
}
nav ul li a{
text-decoration: none;
color:aliceblue;
}
nav ul li a:hover{
color: rgba(208,208,208,0.90);
}
/*---end navbar---*/
#banner{
width: 100%;
height: 200px;
}
#banner-inner{
width: 100%;
height: 50vw;
}
/*------media----*/
#media screen and (max-width: 768px){
header{
position: absolute;
}
#logo{
margin: 15px 0 20px -25px;
background: url(img/RD_mobile.png) no-repeat center;
}
#menu-icon{
display: inline-block;
}
nav ul, nav:active ul{
display: none;
z-index: 1000;
position: absolute;
padding: 20px;
background: #6991AC;
right: 50px;
top: 60px;
border: 1px solid #FFF;
border-radius: 10px 0 10px 10px;
width: 50%;
}
nav:hover ul{
display: block;
}
nav li{
text-align: center;
width: 100%;
padding: 10px 0;
}
}
**HTML**
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style/homecss.css">
</head>
<body>
<header>
<div id="hearder-inner">
<nav>
<ul>
<li>Home</li>
<li><a href="#" >About</a></li>
<li><a href="#" >Gallery</a></li>
</ul>
</nav>
</div>
</header>
<!---ending header-->
<section id="banner">
<img id="banner-img" src="img/20140505211825_YY8Un.jpeg">
</section>
</body>
</html>
Once I add media on the css, whenever the header meets the condition of the media its color will change to darker. I don`t understand. I only add one color on the header, why will it change to second color as the navbar become smaller?
The colour of the header itself does not change. What changes is that it previously occupied space and thus pushed the image down, however, you position the header as an absolute element for sizes up to 768px width. Which means the header is taken out of normal document flow. Now the image isn't pushed down and instead, the header overlaps the image.
As the header has an alpha value of background less than 100 (background: rgba(10,37,195,0.76);) and is thus only at 76% opacity, any change in background colour of element below the header will affect the perceived colour of your header. I am guessing the image is darker than the header and thus the header looks to become darker.
You can fix this by either defining a background of the header with alpha channel at 1 (eg. rgb(10, 37, 195);) - considering your body background is almost white and that the header for widths over 768px only gets mixed with that constant "#efefef" value, it's easy to determine a colour that'll work for you. Or you can solve it by not taking the header out of the normal document flow (by not using position absolute) or by adding padding/margin top to container of the image and (presumably) the rest of the document with the same value as the height of the header (eg 100px, if that's the header's height). Obviously, only add that for screen widths up to 768px.
I have been struggling with some CSS Style. The problem is that i am not able to position the images properly. Due to some reason the image is not displaying in proper expected flow. And I also want to centralize the whole content. It is not properly centralize when you resize the the browser. You can easily notice all this issue once you copy past my code. Here is my code. Thanks
HTML
body {
font-family: 'Open sans',sans-serif;
}
#content p {
padding: 5px;
font-size: 0.8em;
}
#wrap {
max-width: 900px;
padding: 3%;
margin: 0 auto;
}
ul {
list-style-type: none;
padding: 0;
}
#contact a {
padding-left: 35px;
background-repeat: no-repeat;
background-size: 20px;
}
#content a {
width: 100%;
display: inline-block;
height: 100%;
}
#content li img {
width: 100%;
}
a {
text-decoration: none;
}
#content li {
float: left;
width: 25%;
margin: 3%;
box-sizing: border-box;
background-color: bisque;
}
footer {
clear: both;
text-align: center;
}
footer img {
width: 25px;
}
h1 {
font-weight: normal;
font-family: 'Change one', sans-serif;
color: #fff;
font-size: 2.4em;
padding: 0px;
margin: 0px;
display: inline-block;
}
h2 {
font-size: .9em;
font-weight: normal;
color: #fff;
margin: 10px 0;
}
#content ul {
padding: 0;
margin: 0;
}
<div id="wrap">
<div id="content">
<ul>
<li><a href="img/numbers-01.jpg"><img src="img/numbers-01.jpg">
<p>Experimentation with color and texture</p></a>
</li>
<li><a href="img/numbers-02.jpg"><img src="img/numbers-02.jpg">
<p>Experimentation with color and texture Experimentation with color and texture</p></a>
</li>
<li><a href="img/numbers-06.jpg"><img src="img/numbers-06.jpg">
<p>Experimentation with color and texture</p></a>
</li>
<li><a href="img/numbers-09.jpg"><img src="img/numbers-09.jpg">
<p>Experimentation with color and textureExperimentation with color and texture</p></a>
</li>
<li><a href="img/numbers-12.jpg"><img src="img/numbers-12.jpg">
<p>Experimentation with color and texture</p></a>
</li>
</ul>
</div>
<footer>
<img src="img/twitter-wrap.png">
<img src="img/facebook-wrap.png">
<p>© 2014 Chimed.</p>
</footer>
</div>
The issue is that some of your text items in the <p> elements wrap to 3 lines, and some only wrap to 2 lines. This makes them taller than the others. When the next <li> wraps to the next line, it ends up being positioned to the right of the taller item.
Represented visually:
To fix this, you could try to make all your items the same height. That way they would wrap cleanly around each other.
Two "issues" are in your code, as I can see so far.
You're trying to center your content and doing it right with the #wrap. But the list elements inside the list have a width of 25% each, plus 3% margin to the sides, so 31% in total. So the closest you can get to 100% width of the surrounding element is 93%, leaving a gap on the right side, because of your float: left for the list elements. This should fix the problem:
ul {
width: 93%;
margin: 0 auto;
list-style-type: none;
padding: 0;
}
#content li {
display: inline-block;
vertical-align: top;
width: 25%;
margin: 3%;
box-sizing: border-box;
background-color: bisque;
}
I added a width and centering margin to the ul and you're li elements are now inline-block and aligned at their top line.
So, I have a navigation bar and then an <ul> which has some <li>inside. I want it to be vertically aligned with the navigation bar .navbar but it seems it's not working. Do anyone have andy idea what am I doing wrong?
Here is the fiddle and code: http://jsfiddle.net/x7EAg/2/
<style>
.navbar {
width: 100%;
height: 90px;
background: black;
border-radius: 0px !important;
}
.navbar .logo-holder {
background-image: url(../img/logo.png);
width: 75px;
height: 57px;
margin-top: 15px;
}
.navbar .sections {
list-style: none;
margin-left: 70px;
margin-bottom: 50px;
}
.navbar .sections li {
display: inline-block;
padding: 0 25px 0 0;
vertical-align: middle;
}
</style>
<nav class="navbar" role="navigation">
<div class="container">
<div class="logo-holder"></div>
<ul class="sections">
<li>Shop</li>
<li>Team</li>
<li>Events</li>
<li>Experience</li>
<li>Company</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
Thank you!
If I understand what you are trying to achieve. Then you should make the logo absolutely positioned and then aligning the ul can be done with line-height. Full css:
.navbar {
width: 100%;
height: 90px;
line-height:90px;
background: black;
border-radius: 0px !important;
}
.navbar .logo-holder {
position: absolute;
top:0;
left:0;
background-repeat: no-repeat;
background-image: url(../img/logo.png);
width: 75px;
height: 57px;
margin-top: 15px;
}
.navbar .sections {
list-style: none;
margin-left: 70px;
margin-bottom: 50px;
}
.navbar .sections li {
display: inline-block;
padding: 0 25px 0 0;
}
And updated fiddle
i changed the display of your logo-holder to inline-block and then set vertical-align:middle
now it appears next to the logo, and vertically centered.
see here for a fiddle http://jsfiddle.net/gaurav5430/x7EAg/3/
this is the complete css:
.navbar {
width: 100%;
height: 90px;
background: black;
border-radius: 0px !important;
}
.navbar .logo-holder {
background-image: url(../img/logo.png);
width: 75px;
height: 57px;
margin-top: 15px;
display:inline-block;
vertical-align:middle;
}
.navbar .sections {
display:inline-block;
vertical-align:middle;
list-style: none;
margin:0px;
padding:0px;
background:#aaa;
}
.navbar .sections li {
display: inline-block;
padding: 0 25px 0 0;
vertical-align: middle;
}
What I believe is going on is your logo is pushing your ul down. like was mentioned above. You may want to float your logo-holder class left. That would allow you to position your li as you needed. Line-height is a way to do this, you could also use margin, padding, or absolute position for your li as needed. Good luck.
I would like to align logo image with navigation bar so that logo is on left and navigation bar at the center. You can see here what I have tried: http://jsfiddle.net/4fTwh/
HTML:
<body>
<div class="navigation">
<p> <img class="logo-img" src="http://icons.iconarchive.com/icons/tatice/browsers/128/Google-Chrome-icon.png" alt="Logo">
<ul id="nav-list">
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</p>
</div>
</body>
CSS:
.navigation{
width: 100%;
text-align: center;
background-color: #CEE3F6;
}
#nav-list{
list-style-type: none;
}
#nav-list li{
display: inline;
font-size: 18px;
margin: 20px;
}
.logo-img{
float: left;
margin: 0px 15px 15px 0px;
}
Now, I would like for navigation bar text to be bottom aligned with logo image. And also that colored background to be height of the image (not lower around navigation bar text, as it is now). So basically, how to wrap together logo(on left) and navigation bar(centered) so that background is height of higher of these two elements?
Try like this: DEMO
.navigation {
width: 100%;
text-align: center;
background-color: #CEE3F6;
vertical-align:bottom;
line-height:120px;
height:120px;
}
#nav-list li {
display: inline-block;
font-size: 18px;
margin: 20px;
vertical-align:bottom;
line-height:normal;
}
.logo-img {
position:absolute;
left:10px;
top:10px;
margin: 0px 15px 15px 0px;
}
You looking for something like this?
#nav-list{
list-style-type: none;
background: url('http://icons.iconarchive.com/icons/tatice/browsers/128/Google-Chrome-icon.png') no-repeat;
padding: 102px 0 0 0;
}
http://jsfiddle.net/4fTwh/2/
You can try this:
Demo
.logo{
display:inline-block;
float:left
}
#nav-list{
margin-top:55px;
list-style-type: none;
float:left; display:inline-block;
}
In your HTML I would remove the <p> tag. It doesn't add any value here.
You CSS is almost there. Below are the alterations I made to it.
.navigation{
width: 100%;
text-align: center;
background-color: #CEE3F6;
overflow: hidden /* This Allows for the Background to span the entire height */
}
#nav-list{
list-style-type: none;
float: left; /* Keeps the elements side by side*/
margin-bottom: 0 /* fix the spacing to allow the menu to be at the bottom */
}
#nav-list li{
float: left; /* allows the li tags to be side by side. */
font-size: 18px;
margin: 20px 20px 0 0; /* Fixed a little of the spacing, etc. */
padding:69px 0 0 0 /* Moved the LI down to be at the bottom*/
}
.logo-img{
float: left;
margin: 0px 15px 0 0px; /* fixed the spacing. */
}
Here is the jsFiddle