I am having a problem on my portfolio site where the content is not wrapping properly. It looks fine in the three column view for widths greater than 480px, but when it's under that it switches to the two column layout / mobile view and it doesn't quite wrap properly anymore.
There's that huge space and I'm trying to figure out how to correct it. The homepage is the only problem. Any help would be appreciated!
HTML Skeleton:
<div id="wrapper">
<section>
<ul id="gallery">
<li></li>
</ul>
</section>
</wrapper>
Relevant CSS:
#wrapper {
overflow: auto;
margin: 0 auto 100px auto;
max-width: 940px;
padding: 0 5%;
}
#gallery {
margin: 0;
padding: 0;
list-style: none;
}
#gallery li {
float: left;
width: 45%;
margin: 2.5%;
background-color: #f2f2f2;
}
#gallery li a p {
margin: 0;
padding: 5%;
font-size: 0.5em;
color: #3b4145;
}
Add #gallery li:nth-child(odd) {clear: left;} for the mobile version and undo it for the three column.
You should also make a relevant rule for the three column layout #gallery li:nth-child(3n+1) {clear: left;}.
It currently works by luck (due to the contents of the specific items, if you change their order it would fail)
That's due to the floating of elements that don't have he same height. Try to use flexbox instead of floats:
#gallery {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-wrap: wrap;
}
Remove the floats and add some margin-bottom from/to your li rule to preserve some vertical distance
I would recommend you to add a clearfix after each two elements for small devices.
Here's an example of what it will look like.
#media screen and (max-width: 479px) {
.clearfix-sm:after {
display: table;
clear: both;
content: " ";
}
}
<div id="wrapper">
<section>
<ul id="gallery">
<li></li>
<li></li>
<div class="clearfix-sm"></div>
<li></li>
<li></li>
<div class="clearfix-sm"></div>
<li></li>
<li></li>
<div class="clearfix-sm"></div>
</ul>
</section>
</div>
Related
I am currently working with a webshop, and I have some trouble centering the top menu.
The code look like this:
<div id="webshop-topmenu" class="row logoRow ProductMenu_TD">
<div align="center">
<div class="small-12 columns menus">
<nav class="top-bar productmenu" data-topbar role="navigation">
<ul class="title-area">
<li class="name"></li>
<li class="toggle-topbar menu-icon"><span>Menu</span></li>
</ul>
<section class="top-bar-section">[[ProductMenu]]</section>
</nav>
<div class="sub-nav pagelinks TopMenu_TD hide-for-small">[[TopMenu]]</div>
</div>
</div>
</div>
No matter what code I use, the menu always aligns to the right, and I want to center it.
I have tried the <div align"center"> and <center> and a couple of other codes, but nothing seems to work.
Hope you can help me here.
What it looks like
<center> and "align"
are deprecated.
After getting a link to the page:
If you want to center the ul#ProductMenu_List, change your CSS:
.top-bar-section #ProductMenu_List {
margin: 0 auto;
//float: right;
//margin-right: -10px;
}
.top-bar-section ul li {
//float: left;
display: inline-block;
}
If you want to center your div.TopMenu_TD, do following in CSS:
.logoRow .menus .pagelinks {
//float: right;
}
If you want to center elements, "float" is in most case the opposite of helpful. Text-align: center, display: inline-block and/or margin: 0 auto are in most case the solution.
And take your to google for Html5 and CSS3. You will need it.
Update
After seeing that you only have access to the templates - add following code to "Kodefelter" - Head:
<style>
.top-bar-section #ProductMenu_List {
margin: 0 auto;
float: none;
max-width: 400px;//or another value
display: block;
}
#ProductMenu_List > li {
float: none;
display: inline-block;
}
.logoRow .menus .pagelinks {
float: none;
display: block!important;
margin: 0 auto;
max-width: 500px;
}
</style>
I am running into an issue centering my ul element within my div. I used the margin: 0 auto technique, but it isn't working in this scenario. In addition, I always had a question related to whether setting the width to a ul element within a div was necessary to use the margin: 0 auto is there a way around this?
html:
<div class="col-3-12">
<div class="sidebar-personal-information">
<div id="sidebar-social-media">
<ul id="sidebar-social-media-list">
<li><img class="sidebar-social-media-icons" src="images/linkedin.png"></li>
<li><img class="sidebar-social-media-icons" src="images/twitter.png"></li>
</ul>
</div>
</div>
</div>
css:
.sidebar-personal-information {
background-color: #00a8df;
}
#sidebar-social-media {
margin: 0 auto;
padding: 10px;
vertical-align: center;
}
ul#sidebar-social-media-list{
width: 100%;
margin: 0 auto;
}
#sidebar-social-media ul li {
display: inline;
}
Take a look at this Fiddle
By adding text-align: centerto #sidebar-social-media in your CSS the problem should be solved.
Credits go to Vitorino Fernandes, I would like to comment but I don't have enough reputation.
I'm a really new at this but I don't manage to ge the menu bar to get in line with the rest of the content on the page. Can someone just explain how to think to get everything in line and so everything scale nicely?
HTML:
<div id="all">
<ul id="menu1">
<li><img src="Pic/Homemini.png"></li>
<li><img src="Pic/MeMINI.png"></li>
<li><img src="Pic/portfolioMINI.png"></li>
<li><img src="Pic/contactMINI.png"></li>
</ul>
<ul id="menu2">
<li><img src="Pic/Home.png"></li>
<li><img src="Pic/Me.png"></li>
<li><img src="Pic/portfolio.png"></li>
<li><img src="Pic/Contact.png"></li>
</ul>
<div id="box1MINI"><img src="Pic/box1MINI.png"></div>
<div id="main"><img src="Pic/main.png"></div>
<footer>
<p>DID YOU KNOW?</p>
<p>alsdjaljsdkasjd askldjalksdj <br> asdlkjaslkd asldkjasldj asldk <br> alsdkjalksdj lakdj</p>
</footer>
</div>
CSS:
/* ALL CONTENT */
* {
max-width: 100%;
}
#all{
margin: auto;
}
/* END ALL CONTENT */
/* HEADER */
ul li{
display: inline-block;
width: 20%;
}
#menu2{
display: none;
}
#box1MINI{
max-width: 80%;
min-width: 60%;
margin: auto;
}
/* END HEADER*/
/* MAIN SPACE */
#main{
margin: auto;
max-width: 80%;
}
/* END MAIN SPACE */
/* FOOTER*/
footer{
background-color: darkgreen;
width: 80%;
padding: 1px;
margin: auto;
text-align: center;
}
/* END FOOTER*/
The issue you were getting because you gave "60%" width to "#box1MINI" and "80%" to "#main and footer". And no width to "Menus"
Whereas you should give width to the "Outermost" container which is "#all" in your case. and set that to center by "margin: 0 auto;" property. And keep everything else inside the "#all" container.
I have updated your code and made some modifications as per good practice.
Please find the Updated code below:
HTML
<div id="all">
<ul id="menu1">
<li>
<img src="Pic/Homemini.png">
</li>
<li>
<img src="Pic/MeMINI.png">
</li>
<li>
<img src="Pic/portfolioMINI.png">
</li>
<li>
<img src="Pic/contactMINI.png">
</li>
</ul>
<ul id="menu2">
<li>
<img src="Pic/Home.png">
</li>
<li>
<img src="Pic/Me.png">
</li>
<li>
<img src="Pic/portfolio.png">
</li>
<li>
<img src="Pic/Contact.png">
</li>
</ul>
<div id="box1MINI">
<img src="Pic/box1MINI.png">
</div>
<div id="main">
<img src="Pic/main.png">
</div>
<footer>
<p>DID YOU KNOW?</p>
<p>
alsdjaljsdkasjd askldjalksdj
<br>
asdlkjaslkd asldkjasldj asldk
<br>
alsdkjalksdj lakdj
</p>
</footer>
</div>
CSS
html,
body {
height: 100%;
}
body {
margin: 0 auto;
}
#all {
margin: 0 auto;
width: 80%;
}
/* END ALL CONTENT */
/* HEADER */
ul {
margin: 0;
padding: 0;
}
ul li {
display: inline-block;
width: 24.6%;
margin: 0;
padding: 0;
}
#menu2 {
display: block;
}
#box1MINI {
min-width: 60%;
margin: auto;
}
/* END HEADER*/
/* MAIN SPACE */
#main {
margin: auto;
}
/* END MAIN SPACE */
/* FOOTER*/
footer {
background-color: darkgreen;
padding: 1px;
margin: auto;
text-align: center;
}
/* END FOOTER*/
Working Fiddle: http://jsfiddle.net/96ft87ev/1/
Hope this will help!
Let me know if you were looking for something else!
Add this selector:
#menu1 {
text-align:center;
}
Since you've set the li elements to be displayed as inline, they conform to text-alignment rules.
Edit: After this, the nav bar was still slightly off-center. This is due to a couple reasons. First of all, parts of your HTML are invalid, resulting in tags not being nested properly. Your link, img, and br tags all need to be self-closing. That just means you need to add a / (slash) before the > symbol on the tag.
After you've fixed that, simply remove the padding that is added to the li elements by adding padding:0 to the #menu1 selector.
Here is an example (I've added borders, but you can remove them).
When using percentages, it uses the parent to calculate. You want each li to be 20% of the page, not 20% of the parent (ul). Set the width for menu1 as 80%, then each li is 25% of that. Give the ul auto margins and it will line up with content.
#menu1{
margin: auto;
width:80%; //same as content
padding: 0px;
}
ul li{
display:inline-block;
width: calc(25% -4px); //each image is 25% of the parent, parent is 80% of page
box-sizing: border-box; //includes border and padding in box size
}
fiddle
This is my code: http://jsfiddle.net/2h6p3vvd/
I'm trying to align my list to the right of the logo, however it seems to sit on the line below, but still to the right.
HTML
<header>
<nav class="container">
<img src="#">
<ul>
<li>Add</li>
</ul>
</nav>
</header>
CSS
header {
padding-top: 65px;
padding-bottom: 65px;
}
.container {
width: 960px;
margin: 0 auto;
}
header nav {
height: 50px;
line-height: 50px;
}
header ul {
float: right;
}
ol, ul {
list-style: none;
}
Is this an issue with the float, and should I be using some sort of overflow rule to correct it?
The problem is that your li has inherited the line-height from nav parent... Reset it, and it will be inline:
Updated Fiddle
header ul li {
line-height: 0px;
}
EDIT
Also, keep in mind that float makes an element float over the element that comes after it. So, your ul must be put before the logo, so that it can float accordingly.
The ul is applying a top margin, which pushes the list down.
To avoid this, add the following to your header ul style:
margin: 0 auto;
Write your html structure following way
<header>
<nav class="container">
<div class="logo">
<img src="" alt="" />
</div>
<div class="menu">
<ul>
<li>Add</li>
</ul>
</div>
</nav>
</header>
and write css like
.container {
width: 960px;
margin: 0 auto;
}
.logo{width: 300px;float:left;}
.menu{float:left;}
Change line height to zero and add float left http://jsfiddle.net/2h6p3vvd/4/
try this
header {
padding-top: 65px;
padding-bottom: 65px;
}
.container {
width: 960px;
margin: 0 auto;
}
.container img{
position:absolute;
}
header nav {
height: 50px;
line-height: 0px;
}
header ul {
margin-left:0px;
float:left;
}
ol, ul {
list-style: none;
}
Better put them in table columns with border="0px" and width=100% with one extra column in the middle
eg:
<header>
<nav class="container">
<table width=100% border=0px>
<tr>
<td><img src="#"></td>
<td width=100%><!--This column is only needed only when you want to push image and list to extreme left and right respectively--></td>
<td><ul>
<li>Add</li>
</ul></td>
</tr>
</table>
</nav>
</header>
<div class="pull_down">
<ul class="zvuc">
<li class="prod">
<div class="conutine">
<div class="prod_name">Asus 15.6-Inch Versati...</div>
<img src="../images/test/lotr.jpg">
<div class="timer"></div>
</div>
</li>
</ul>
</div>
CSS:
div.pull_down
{
padding: 20px 20px 20px 30px;
}
li.prod
{
background: url("../images/test/bg-horizontal.png") no-repeat;
height: 286px;
width: 170px;
text-align: center;
padding-top: 0;
display: list-item;
width: 170px;
min-height: 286px;
float: left;
}
ul
{
list-style: none outside none;
margin: 0;
padding: 0;
text-align: left;
}
When i mouse over the division with firebug, it doesn't contain anything. Why is this?
Your are floating your LI's so you most likely need a "clearfix" on the parent DIV.
A "clearfix" will force an element to self-clear it's children.
http://css-tricks.com/snippets/css/clear-fix/
Demo: http://jsfiddle.net/wdm954/Dxkpx/
You can just add the .group classes to your CSS file and add class="group" to any parent that you need to clearfix.
This is a semantic and scale-able solution. You should avoid adding empty DIVs to your markup or extra CSS to parents (such as floats). That can produce undesirable results and become confusing in the long run.
Hi you need to add <div style="clear:both"></div> after the </ul> to close the float
or to add float: left; to the class .div.pull_down