Divs align in parent block - css

#Menu
{
position: relative;
width: 90%;
margin: 0 auto;
height; 50px;
min-height: 50px;
padding: 5px;
}
And children blocks:
#MenuItem
{
position: relative;
float: left;
margin: 0 auto;
margin-top: 2px;
margin-left: 5px;
margin-right: 5px;
text-align: center;
width: 142px;
height: 37px;
}
And html:
<div id="Menu">
<div id="MenuItem"><span>Home</span></div>
<div id="MenuItem"><span>Home</span></div>
<div id="MenuItem"><span>Home</span></div>
</div>
How to make MenuItem divs to be centrated horizontally in parent div?


<ul id="nav">
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Clients</li>
<li>Contact</li>
</ul>
and here is the css
#nav{
border:1px solid #ccc;
border-width:1px 0;
list-style:none;
margin:0;
padding:0;
text-align:center;
}
#nav li{
display:inline;
}
#nav a{
display:inline-block;
padding:10px;
}


The following code should do it
#Menu
{
position: relative;
width: 90%;
margin: 0 auto;
height; 50px;
min-height: 50px;
padding: 5px;
text-align: center; /* added this rule */
}
#MenuItem
{
position: relative;
display: inline-block; /* changed from float:left */
margin: 0 auto;
margin-top: 2px;
margin-left: 5px;
margin-right: 5px;
text-align: center;
width: 142px;
height: 37px;
}
Also, I would recommend you'd use
<ul id="Menu">
<li>...</li>
<li>...</li>
</ul>
instead of the nested divs.

Related

why doesn't my menu float to right side and items are displayed itselfs uncurrect?

Sorry for my English!
My menu is displayed incorrect! The problem: It doesn't located on full container! How fix it?
The code is here:
<header id="header">
<div class="center">
SITE NAME
<nav>
<ul>
<li class="active">HOME</li>
<li>ABOUT</li>
<li>SERVICES</li>
<li>PROJECT</li>
<li>BLOG</li>
<li>CONTACT</li>
</ul>
</nav>
<div class="clear"></div>
</div>
</header>
<style>
/*HEADER*/
/*HEADER*/
header{
padding: 20px 0;
/* height: 118px; */
position: fixed;
background: white;
width: 100%;
z-index:300;
}
header .logo{
float: left;
width: 20%;
color: #637f83;
font-size: 2em;
font-weight: bold;
margin: 0;
}
header nav ul {
/* position: absolute;
right: 0;
width: 70%; */
}
header nav{
float: left;
margin-left:50px;
/* width: 50%; */
line-height: 46px;
height: 50px;
}
header nav ul li{
float:left;
padding:0 0 0 1%;
}
header nav ul{
float:right;
}
header nav ul li a{
color:#637f83;
display:block;
float: left;
text-align: center;
padding: 0px 16px;
text-decoration: none;
font-size: 17px;
}
</style>
Thank you!

header {
padding: 20px 0;
/* height: 118px; */
position: fixed;
background: white;
width: 100%;
z-index: 300;
}
header .logo {
float: left;
width: 20%;
color: #637f83;
font-size: 2em;
font-weight: bold;
margin: 0;
}
header nav ul {
/* position: absolute;
right: 0;
width: 70%; */
}
header nav {
float: right;
width: 79%;
}
header nav ul li {
float: left;
padding: 0 0 0 1%;
}
header nav ul {
list-style: none
}
header nav ul li a {
color: #637f83;
display: block;
text-align: center;
padding: 0px 16px;
text-decoration: none;
font-size: 17px;
}
.clear {
clear: both
}
<header id="header">
<div class="center">
SITE NAME
<nav>
<ul>
<li class="active">HOME</li>
<li>ABOUT</li>
<li>SERVICES</li>
<li>PROJECT</li>
<li>BLOG</li>
<li>CONTACT</li>
</ul>
</nav>
<div class="clear"></div>
</div>
</header>
jsfiddler https://jsfiddle.net/3fw0ynLy/

How Can I Center One <li> in a <ul>

I have a top menu made by a list. All <li>s centers depending on the text though I want to center one the <li>s and then the rest of the <li>s should center on both sides. I want to center the image.
The top menu looks like this:
<div id="topMenu">
<ul>
<li>Forside</li>
<li>Kampe</li>
<li>Truppen</li>
<li><img id="logoMenu" src="images/logo.png"></li>
<li>Galleri</li>
<li>Statistik</li>
<li>Om Klubben</li>
</ul>
</div>
Then I have some CSS:
#topMenu {
background: #51a047;
width: 100%;
height: 50px;
line-height: 25px;
margin: 0 auto;
}
#topMenu ul {
list-style-type: none;
margin: 0;
padding: 10px;
text-align: center;
}
#topMenu li {
display: inline;
padding: 0 20px;
text-transform: uppercase;
}
#logoMenu {
background-image: url("images/logo.png");
width: 80px;
}
#topMenu img {
vertical-align: text-top;
}
Here's a jsFiddle

Personally I wouldn't have the logo as an element in the navigation. Semantically it doesn't make sense and its difficult to style. If you divide the menu items in to two ULs you can do the following:
HTML
<div id="topMenu">
<ul id="menu-left">
<li>AAA</li>
<li>BBB</li>
<li>CCC</li>
</ul>
<img src="URL" />
<ul id="menu-right">
<li>DDD</li>
<li>EEE</li>
<li>FFF</li>
</ul>
</div>
CSS
#topMenu {
background: #51a047;
width: 100%;
height: 50px;
line-height: 25px;
margin: 0 auto;
position: relative;
}
#topMenu ul {
list-style-type: none;
text-align: center;
margin: 0;
padding: 10px;
box-sizing: border-box; /* percentage width + padding */
width: 45%;
position: absolute;
top: 0;
}
#topMenu #menu-left {
left: 0;
}
#topMenu #menu-right {
right: 0;
}
#topMenu li {
display: inline;
padding: 0 20px;
text-transform: uppercase;
}
#topMenu a {
color: white;
text-decoration: none;
}
#logoMenu {
display: block;
width: 10%;
margin: 0 auto; /*center*/
}
#topMenu img {
margin: 0 auto;
display: block;
max-height: 100%;
max-width: 100%;
}
https://jsfiddle.net/vvu5k79r/2/

css image autoresize not working

I am trying to get 2 columns :
one div called words and
other ul called snaps which has li of images
currently when i resize the images instead of resizing it just moves to next row...how do i get them to resize based on screen width
below is the example
<div class="main">
<div class="subfooter">
<div class="words">
this is test messgae
</div>
<ul class="snaps">
<li><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcR6HIp-1dv221Es0Hk1E9OuQMzcavdw51paj4T0-zrZfxKgXmUXfA"/></li>
<li><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcR6HIp-1dv221Es0Hk1E9OuQMzcavdw51paj4T0-zrZfxKgXmUXfA" /></li>
<li><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcR6HIp-1dv221Es0Hk1E9OuQMzcavdw51paj4T0-zrZfxKgXmUXfA"/></li>
<li><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcR6HIp-1dv221Es0Hk1E9OuQMzcavdw51paj4T0-zrZfxKgXmUXfA" /></li>
</ul>
</div>
</div>
below is the working example
FIDDLE

This should be what you are looking for :
FIDDLE
You need to specify the width of <li> elements and then you can use width:100%; height:auto; on the images so they resize according to the width of <li> elements.
CSS :
.main {
width: 100%;
height: auto;
float: left;
display: inline-block;
position: relative;
}
.subfooter {
width: 100%;
background-color: #99CC66;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
float: left;
display: block;
}
.words {
float: left;
width: 45%;
display: inline-block;
background-color: #996633;
padding-left: 20px;
padding-right: 20px;
margin-left: 50px;
}
.snaps li {
width: auto;
float: left;
display: block;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
box-sizing:border-box;
width:50%;
}
.snaps li img {
width:100%;
height:auto;
}
.snaps {
width: 45%;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
float: left;
display: inline-block;
list-style-type: none;
}

Add following instead of width 200:
.snaps li img {
max-width:100%;
height:auto;
}

This is because the images has a fixed with, use percentages instead of setting them to be 200px
This is what i did:
.snaps li {
width: 50%;
float: left;
display: block;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
}
.snaps li img{
width: 100%;
}

Try this. I've updated you fiddle.
.words {
float: left;
width: 45%;
background-color: #996633;
}
.snaps {
width: 45%;
margin: 0;
float: left;
list-style-type: none;
}
.snaps li img {
width:23%;
float:left;
margin:1%;
}
Fiddle

iPad specific CSS Div issue

I have an issue regarding a div we have on our test site, only when viewed on an iPad (or, I'm guessing, a screen that is tablet size)...
http://jmldirect.uat.venda.com
The Join Us (social icons) // Newsletter bar bleeds out of the main wrapper and I have no idea why.
Here is the HTML and relevant CSS:
HTML:
<div id="socialfooter">
<ul class="getSocial">
<li><a class="join-us">JOIN US</a></li>
<li><a class="foot-fb" href="https://www.facebook.com/JMLDirect" target="_blank" alt="JML on Facebook"></a></li>
<li><a class="foot-tw" href="https://twitter.com/JML_Direct" target="_blank" alt="JML on Twitter"></a></li>
<li><a class="foot-yt" href="http://www.youtube.com/user/JMLdirect" target="_blank" alt="JMl's YouTube Channel"></a></li>
</ul>
<ul class="newsletter">
<li><label for="emailsignup"><a class="join-us">SIGN UP TO OUR NEWSLETTER</a></label></li>
<li><form></form></li>
</ul>
</div>
CSS:
#socialfooter {
background: url("../images/social_icons/social_footer_wrapper_1010.png") no-repeat scroll 0 0 transparent;
clear: both;
display: block;
height: 55px;
margin: 0 auto;
width: 1010px;
}
#socialfooter ul.getSocial {
display: inline;
float: left;
list-style-type: none;
margin: 7px 0 0 46px;
width: 192px;
}
#socialfooter ul.newsletter {
display: inline;
float: right;
height: 38px;
list-style-type: none;
padding: 7px 11px 9px 0;
width: 564px;
}

You have set a width on the parent div:
#socialfooter{ width:1010px;}
and then floated the newsletter ul to the right of that div:
#socialfooter ul.newsletter{float:right; width:564px;}
The problem with this is that the iPad doesn't have the resolution to display such a wide div (#socialfooter).
If you want the content to show up, use percentage based widths like this:
#socialfooter {
background: url("../images/social_icons/social_footer_wrapper_1010.png") no-repeat scroll 0 0 transparent;
clear: both;
display: block;
height: 55px;
margin: 0 auto;
width: 100%;
}
#socialfooter ul.getSocial {
display:inline-block;
box-sizing: border-box;
float:left;
list-style-type:none;
margin:.5em 0 0 2em;
width:50%;
}
#socialfoter ul.newsletter {
display: inline-block;
box-sizing: border-box;
float:right;
vertical-align: middle;
list-style-type: none;
padding:0 2em 0 0;
width:50%;
}
EDIT:
#socialfooter {
background: url("../images/social_icons/social_footer_wrapper_1010.png") no-repeat scroll 0 0 transparent; //
^ This background is causing the issue. It is an image that is set to 1010px, so even CSS isn't going to help you there.
clear: both;
display: block;
height: 55px;
margin: 0 auto;
width: 100%;
}
#socialfooter ul.getSocial {
display:inline-block;
box-sizing: border-box;
float:left;
list-style-type:none;
margin:.5em 0 0 2em;
width:30%;
}
^ Changed the width to accommodate the large input field on the right side
#socialfoter ul.newsletter {
display: inline-block;
box-sizing: border-box;
float:right;
vertical-align: middle;
list-style-type: none;
padding:0 2em 0 0;
width:70%;
}
^ And gave this right side more width to make room for your input.

ANSWER:
1. Markup:
<div class=“socialfooter”>
<ul class="getSocial">
<li><a class="join-us">JOIN US</a></li>
<li><a class="foot-fb" href="https://www.facebook.com/JMLDirect" target="_blank" alt="JML on Facebook"></a></li>
<li><a class="foot-tw" href="https://twitter.com/JML_Direct" target="_blank" alt="JML on Twitter"></a></li>
<li><a class="foot-yt" href="http://www.youtube.com/user/JMLdirect" target="_blank" alt="JMl's YouTube Channel"></a></li>
<li><a class="foot-pin" href="http://www.pinterest.com/JMLdirect" target="_blank" alt="JMl on Pinterest"></a></li>
</ul>
<ul class="cards">
<li><a class="mastercard"></a></li>
<li><a class="visa"></a></li>
<li><a class="maestro"></a></li>
<li><a class="visaElectron"></a></li>
<li><a class="Paypal"></a></li>
</ul>
</div>
2. CSS:
.socialfooter {
height:55px;
width:100%;
background:url("../images/social_icons/social_footer_wrapper_1010.png") repeat-y 50% 0 transparent;
clear:both;
position:relative;
}
.socialfooter ul.getSocial {
display:inline-block;
box-sizing: border-box;
float:left;
list-style-type:none;
margin:.5em 0 0 -38em;
width:30%;
position:absolute;
}
.getSocial li {
position:relative;
float:left;
}
.socialfooter ul.cards {
display: inline-block;
float: right;
list-style-type: none;
margin: 1.35em 0 0 13em;
position: absolute;
width: 30%;
}
.socialfooter li {
display: inline-block;
list-style-type: none;
background:none;
}
.cards li {
float:left;
padding:0 7px;
}
.cards li a {
background: url("../images/social_icons/elements.png") no-repeat transparent;
}
.cards li a.mastercard {
background-position: -15px -385px;
display: block;
height: 24px;
margin-left: 5px;
width: 38px;
}
.cards li a.visa {
background-position: -58px -386px;
display: block;
height: 24px;
margin-left: 5px;
width: 38px;
}
.cards li a.maestro {
background-position: -102px -385px;
display: block;
height: 24px;
margin-left: 5px;
width: 38px;
}
.cards li a.visaElectron {
background-position: -145px -385px;
display: block;
height: 24px;
margin-left: 5px;
width: 38px;
}
.cards li a.Paypal {
background-position: -189px -385px;
display: block;
height: 24px;
margin-left: 5px;
width: 38px;
}

Position to the right when it's float to the left

I have a menu and a logo on the header, and I am struggling to make the logo to be at the far edge of the left side of the website and the menu to the edge of the right side.
The problem is, when both of them are displayed as inline-block which means they are going to float to the default orientation which is left, I can't figure out a way to change this, please help.
Here's the CSS code:
/*Header*/
.wrapperHeader{
background-color: #FFFFFF;
border-bottom: 1px solid #DDDDDD;
width: 100%;
padding: 15px 0px;
z-index: 1000;
}
.content{
width: 1000px;
max-width: 100%;
margin: auto;
}
.header-logo, #logoImage{
width: 250px;
max-width: 100%;
display: inline-block;
vertical-align: middle;
}
/*Main Menu*/
.header-menu{
width: 690px;
max-width: 100%;
display: inline-block;
vertical-align: middle;
}
#MainMenu li{
position: relative;
padding: 15px;
display: inline-block;
right: 0px;
}
Note: in the html, the logo is in a section and the menu is in anther section and both of them are inside a divide.
HTML code:
<header>
<div class="wrapperHeader">
<div class="content">
<section class="header-logo">
<img id="logoImage" src="assets/elements/logo.png" alt="LOAI Design Studio Logo"/>
</section>
<section class="header-menu">
<nav id="MainMenu">
<ul>
<li><a class="active" href="index.html">Home</a></li>
<li id="PortfolioMenu"><a id="Portfolio" href="#">Portfolio</a>
<ul class="subMenu">
<li>Web Design</li>
<li>Visual Identity</li>
<li>Photography</li>
</ul>
</li>
<li>Testimonials</li>
<li>About Me</li>
<li>Get In Touch</li>
<li><a class="getStartedButton" href="get-started.html">Get Started</a></li>
</ul>
Menu<p id="SmartMenu-logo">LOAI Design Studio</p>
</nav>
</section>
</div>
</div>
</header>

Here I've edited your CSS code, so you can try this
/*Header*/
.wrapperHeader{
background-color: #FFFFFF;
border-bottom: 1px solid #DDDDDD;
padding: 15px 0px;
z-index: 1000;
overflow: hidden;
}
.content{
width: 1000px;
margin: auto;
}
.header-logo, #logoImage{
width: 250px;
float: left;
}
/*Main Menu*/
.header-menu{
width: 690px;
float: right;
}
#MainMenu ul{
margin: 0;
padding: 0;
list-style: none;
}
#MainMenu li{
position: relative;
padding: 5px 15px;
float: left;
list-style: none;
}
li#PortfolioMenu{
padding: 0;
}
li#PortfolioMenu > a{
padding: 5px 15px;
}
ul.subMenu{
display: none;
position: absolute;
}
li:hover ul.subMenu{
display: block;
}
I've used float:left; for the logo, float:right; for the header-menu, removed display:inline-block; and did some other fixes ...
Hope this will help you ...

I would float logo section left, float menu section right and then clear the wrapper using clear:both. Remove the inline-block for this to work properly.

Resources