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
Related
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.
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
I am trying to align a menu to the right of a div. As it stands the menu is sitting in the div top left. I want it top right... what am I missing? I have added text-align: right.... Ive tried float: right... I just can't get it.
<div id="UserPanel">
<div id="menu">
<ul>
<li>All Apps | </li>
<li>My Account | </li>
<li>Support | </li>
<li>Register / Login</li>
</ul>
</div>
</div>
The CSS CODE is
#UserPanel
{
width: 962;
height: 98;
background-image: url('bg-topbar.png');
}
#menu
{
text-align: right;
width: 962;
}
#menu ul /* Remove The Bullets */
{
list-style: none;
padding: 0;
margin: 0;
}
#menu li /* Place list in line */
{
float: left;
margin: 0 0.15em;
}
#menu li a /* Design it */
{
font-size: 0.75em;
background: url(background.gif) bottom left repeat-x;
height: 2em;
line-height: 2em;
float: left;
width: 8em;
display: block;
/* border: 0.1em solid #dcdce9; */
color: #C0C0C0;
text-decoration: none; /* Remove Underline */
text-align: center;
}
use this
#menu {
float: right;
text-align: right;
width: auto;
}
here is the jsFiddle Link
Try this:
#UserPanel
{
width: 962;
height: 98;
background-image: url('bg-topbar.png');
float : right;
}
JSFiddle
Add float:right; to #userpanel
Try this-
#menu
{
position:absolute;
top:0;
right:0;
width: 962;
}
LIke this
DEMO
CSS
#menu
{
text-align: right;
float:right;
}
First of all you have not defined width and height attribute properly. What i mean is either defined it with px or %; e.g width:962px;
By the way here is an working example http://jsfiddle.net/hT4Bd/1/
Update #menu styles as follows.
#menu
{
text-align: right;
width: 962;
float: right;
}
None of these worked but I did find Arif Khan gave me an idea. I solved this by doing...
#menu
{
position: relative;
left: 500px;
}
I have a problem centering the copyright footer on my website. I have two icons on the left (Facebook and Twitter), but if I add another for MySpace, it goes off. How can I fix this? Can it be indefinitely centered so I won't have to change it every time? Thanks.
TEMPLATE:
<div id="footer">
<div class="social">
<ul>
<li><img src="../images/icons/facebook.png" /></li>
<li><img src="../images/icons/twitter.png" /></li>
</ul>
</div>
<div class="copyright">
Copyright © 2011 Ricky Wai Kit Tsang. All rights reserved.
</div>
<div class="clear"></div>
</div>
CSS:
#footer {
margin: 0px auto;
padding-bottom: 60px;
width: 850px;
}
#footer .social {
float: left;
}
#footer .social ul {
list-style: none;
margin: 10px 0px 0px;
padding: 0px;
}
#footer .social li {
float: left;
margin-right: 5px;
}
#footer .social img {
border: 0px;
}
#footer .copyright {
color: #fff;
float: left;
line-height: 32px;
margin-left: 200px;
margin-top: 10px;
text-align: center;
}
#footer .resize {
float: right;
width: 400px;
}
HTML
<div id="footer">
<div class="copyright">
Copyright © 2011 Ricky Wai Kit Tsang. All rights reserved.
</div>
<div class="social">
<ul>
<li><img src="../images/icons/facebook.png" /></li>
<li><img src="../images/icons/twitter.png" /></li>
<li><img src="../images/icons/myspace.png" /></li>
</ul>
</div>
</div>
CSS
#footer {
margin: 0px auto;
width: 850px;
}
#footer .social {
padding: 30px 0;
width: 425px;
text-align: center;
}
#footer .copyright {
float: right;
padding: 30px 0;
width: 425px;
text-align: center;
}
By floating your copyright and not specifying a width, your "text-align:center;" rule has little effect. A floated element without a defined width shrinks to fit its content. What is giving you your perceived sense of center is your "margin-left:200px;" rule. It is pushing your copyright to the right of the bookmarks by 200px.
--edit--
Centered in footer
#footer { position:relative; width:850px; } /* position children relative to parent */
#footer .social { position:absolute; left:0; top:0 } /* take the bookmarks out of the flow and position in upper left corner of the footer */
#footer .copyright { text-align:center; } /* since bookmarks are out of normal flow, this div stretches entire length, so all you have to do is center it */
Centered in space to right of bookmarks
#footer .social { float:left; width:200px; } /* give a specific width and float left */
#footer .copyright { float:left; width:650px; text-align:center; } /* center in remaining space */
To keep the text centered no matter what, take the list containing the social icons out of the flow, Absolutely position the social list relative to the footer, that way it has no bearing on the centering of the actual text
Working example of the following code : HERE
CSS:
#footer {
margin: 0px auto;
padding-bottom: 60px;
width: 850px;
background: #444;
position: relative; /* so social list can be positioned relative to the footer*/
text-align: center; /* center the copyright text */
}
#footer .social {
position: absolute; /* position the list */
top: 0; /* adjust to suit */
left: 10px; /* adjust to suit */
}
#footer .social ul {
list-style: none;
margin: 10px 0px 0px;
padding: 0px;
}
#footer .social li {
float: left;
margin-right: 5px;
}
#footer .social img {
border: 0px;
}
#footer .copyright {
/* no need to float so no need for the clearing div at the bottom of your HTML */
color: #fff;
line-height: 32px;
margin-top: 10px;
}
#footer{position:relative}
#footer .copyright{position:absolute;top:10px;left:40%;}
position absolute the copyrights will do the trick as it will take it out of the flow.
but dont forget to set parent(footer) to relative. so it would contain the copyright element inside it.
You don't --have-- to position absolute to make this work. Just left float both columns, set width to ensure they don't overrun the container, and clearfloat at the end if you have anything that will follow. Pretty easy, really.