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
Related
.topnavigatiebar {
width: 1500px;
height: 100px;
background-color: #fafafa;
position: fixed;
top: 0;
overflow: hidden;
z-index: 9;
white-space: nowrap;
}
.topnavigatiebar img {
float: left;
}
.topnavigatiebar #nav {
width: 80%;
height: 50%;
margin-top: 25px;
margin-left: 20px;
float: left;
display: block;
text-decoration: none;
text-align: center;
}
.topnavigatiebar #nav #sector {
width: auto;
height: 75%;
float: left;
margin: 0 15px 0 15px;
padding: 5px 10px 5px 10px;
border-radius: 6px;
}
.topnavigatiebar #nav #sector:hover {
background-color: lightgrey;
transition: 0.25s;
}
.topnavigatiebar #nav .active {
background-color: #b7a483;
}
.topnavigatiebar #nav:visited {
color: black;
}
.topnavigatiebar #nav #sector a {
font-size: 20px;
vertical-align: center;
line-height: 40px;
text-decoration: none;
color: inherit;
}
#logo {
display: inline-block;
margin-top: auto;
height: 100%;
vertical-align: middle;
}
#logo img {
background: #3A6F9A;
vertical-align: middle;
max-height: 100px;
max-width: 100px;
border-radius: 45px;
}
.right {
float: right;
}
<div class="topnavigatiebar">
<img src="https://imgur.com/trhdmMX">
<div id="nav">
<div id="sector">Home</div>
<div id="sector" class="active">KlantenInformatie</div>
<div id="sector">Artikelen</div>
<div id="sector">Instellingen</div>
<div class="right">
<div id="sector">Afmelden</div>
</div>
</div>
<div id="logo"><img src="../Includes/Pictures/ProfielLogo.png"></div>
</div>
So i couldn't find a specific answer to my question, but something in my html is going wrong.
i try to vertical align a image to the center of a navigation bar. the image is for profile pictures, so you can see who is logged in (the login config isn't there yet, but that is for later).
Can anyone look at my code and tell me what i am doing wrong?
It just might be very simple and me stupid enough to forget, but i just can't figure out?
i already tried these methods, but they didn't solve my problem:
How to vertically align an image inside a div?
facebook photo/ image vertical align?
vertical-align image in div
EDIT: here are 2 links for the pictures:
https://imgur.com/trhdmMX
Try adding margin-top: 20% in the #logo img in CSS.
You can also do the same by adding display: block; margin-top: 25%; in #logo img in CSS as well.
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/
I'm simply trying to modify the navigation bar of my site for smaller devices. The site should be remaining with a fixed design for iPads+ resolutions, and then become responsive for smaller resolutions. While the mobile-size specific codes are applying to some classes (container, main, etc.), they don't seem to apply to the navigation div. You can see how it's currently functioning here: http://moore.whiterabbitstudio.us/
Here is a fiddle for permanence: http://jsfiddle.net/ursalarose/xAp72/
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<body>
<div class="container">
<div class="main-hold">
<div class="main">
<div id="nav">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Gallery</li>
<li>Process</li>
<li>Testimonials</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</div>
</body>
CSS:
body
{
display: table;
margin: 0 auto;
letter-spacing: .1em;
text-align: center;
font-size: 16px;
}
*
{
margin:0;padding:0;
}
html,body
{
height:100%;
}
.container {
height: 100%;
display: table-cell;
vertical-align: middle;
}
.main-hold {
height:600px;
width:1000px;
display: table-cell;
vertical-align: middle;
text-align: center;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
.main {
height:540px;
width:900px;
background-position: left top;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
/* MOBILE DEVICES */
#media screen and (max-width: 950px){
.main-hold {
width:500px;
display: table-cell;
vertical-align: middle;
text-align: center;
margin-top: 0px auto;
}
.main {
width:100%;
background-repeat:no-repeat;
background-position:center top;
margin-top: 0px auto;
}
#nav {
margin: 20px auto 0 auto;
float:none;
width: 100%;
}
#nav ul {
list-style:none;
}
#nav li {
width: 100%;
}
#nav li a {
font-size: 14px;
text-decoration:none;
color:#888;
display: block;
text-align:center;
width: 100%;
height: 22px;
display: inline;
background-color:#CCC;
background-image: none;
padding-right: 0px;
padding-top: 6px;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition:.5s;
}
#nav li a:hover, #nav li a.current {
background-color:#FFF;
}
}
/* NAVIGATION */
#nav {
float: left;
height: 250px;
width: 168px;
margin-top: 60px;
}
#nav ul {
list-style:none;
}
#nav li {
width: 168px;
height: 28px;
display: block;
margin-bottom: 8px;
}
#nav li a {
font-size: 14px;
text-decoration:none;
color:#888;
display: block;
text-align: right;
width: 148px;
height: 22px;
display: block;
padding-right: 20px;
padding-top: 6px;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition:.5s;
}
#nav li a:hover, #nav li a.current {
background-color:#fff;
}
Thank you for any help! I've never tried designing for mobile devices before.
Try placing the mobile CSS below the desktop CSS, as the desktop CSS is now overwriting the mobile css.
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;
}
#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.