I hope you can all help :)
I have a sidebar on my website but because I don't want it going under the fold I would like to split this ten li sidebar into two 5 li sidebars with a div inbetween them showing content using Jquery. I have coded up the website so it looks good but I need the sidebars to act as one menu instead of two so only one selection can be made at a time , one current class etc. Anyone know how to do this? My mark-up is as follows:
<div id="sidebar">
<ul class="list2"><em>
<li class="current1">Bilgorajski</li>
<li>Rzeszowski</li>
<li>Kasuby</li>
<li>Mazur</li>
<li>Lubelski</li>
</em>
</ul>
</div>
<div id="repcontent">
</div>
<div id="sidebar">
<ul class="list2"><em>
<li>Powislainski</li>
<li>Podhalainski</li>
<li>Kujuwiak Oberek</li>
<li>Krakowiak</li>
<li>Szlansk</li>
</em>
</ul>
</div>
You just have to remove tags that commented in the following code:
<div id="sidebar">
<ul class="list2"><em>
<li class="current1">Bilgorajski</li>
<li>Rzeszowski</li>
<li>Kasuby</li>
<li>Mazur</li>
<li>Lubelski</li>
</em>
</ul>
<!-- </div> -->
<div id="repcontent">
</div>
<!-- <div id="sidebar"> -->
<ul class="list2"><em>
<li>Powislainski</li>
<li>Podhalainski</li>
<li>Kujuwiak Oberek</li>
<li>Krakowiak</li>
<li>Szlansk</li>
</em>
</ul>
</div>
Edited: To get three columns layout, I will use zurb-foundation CSS framework as follows:
<body>
<div id="header" class="row">
<div class="twelve columns">
Header
</div>
</div>
<div class="row">
<div id="left-sidebar" class="three columns">
<ul class="list2"><em>
<li class="current1">Bilgorajski</li>
<li>Rzeszowski</li>
<li>Kasuby</li>
<li>Mazur</li>
<li>Lubelski</li>
</em>
</ul>
</div>
<div id="repcontent" class="six columns">
Middle contents
</div>
<div id="right-sidebar" class="three columns">
<ul class="list2"><em>
<li>Powislainski</li>
<li>Podhalainski</li>
<li>Kujuwiak Oberek</li>
<li>Krakowiak</li>
<li>Szlansk</li>
</em>
</ul>
</div>
</div>
</body>
take it easy.. use
-webkit-column-count: 2;
this will splits your contents into two columns..Or if you want to display the sidebars in two sides separately then use 2 separate divisions and float:left|right; property. Or you can query for this using JQuery.
<body>
<div class="container">
<div class="sidebar1">
<ul class="nav">
<li>Link one</li>
<li>Link two</li>
<li>Link three</li>
<li>Link four</li>
</ul>
<p> </p>
<!-- end .sidebar1 --></div>
<div class="content">
<!-- end .content --></div>
<div class="sidebar2">
<!-- end .sidebar2 --></div>
<!-- end .container --></div>
</body>
css
.sidebar1 {
float: left;
width: 20%;
background-color: #93A5C4;
padding-bottom: 10px;
}
.content {
padding: 10px 0;
width: 60%;
float: left;
}
.sidebar2 {
float: left;
width: 20%;
background-color: #93A5C4;
padding: 10px 0;
}
Try this code. this may clarifies your problem .
Related
White row appeared below main menu and above jumbotron on a drupal site. I am unable to remove it.
I think that it is css problem but I can't find what exactly causing it. Here is the link to codepen: https://codepen.io/lomachx/pen/WNbLgYa
<body class="html front not-logged-in no-sidebars page-node i18n-ru">
<div id="skip-link" class="skip-link">
Skip to main content
</div>
<div class="menu-wrap">
<div class="full-wrap logo-wrap"><!--c-->
<div id="logo">
<img src="img/logo.png"/>
</div>
<h1 id="site-title">
Cool Site
</h1>
<nav id="main-menu" role="navigation">
<a class="nav-toggle" href="#">Navigation</a>
<div class="menu-navigation-container">
<ul class="menu"><li class="first leaf">Main</li>
<li class="leaf">Articles</li>
<li class="last leaf">About</li>
</ul>
</div>
</nav>
</div>
</div>
<div class="header"><!--c-->
<div class="homebanner">
</div>
<!--New navbar -->
<div>
<nav class="navbar-lower" role="navigation">
<div class="region region-second-menu">
<div id="block-system-navigation" class="block block-system block-menu">
<div class="content">
<ul class="menu">
<li class="first last leaf">Главная</li>
</ul>
</div>
</div> <!-- /.block -->
</div>
</nav>
</div>
</div>
<div class="bckgr-wrap">
<div><H1>Nest</H1></div>
</div>
</body>
</html>
Change body margin-top:50px to the height of your header like below
css
body {
color: #333;
background: #fff;
background-size: cover;
font-family: 'Philosopher', sans-serif;
font-size: 14px;
line-height: 180%;
margin-top: 35px;
}
Sorry if this has been asked before, but I've looked at several other similar questions trying to incorporate the solution with little success. I have a bootstrap row with two col-md-6's. In the first column is the image, and in the second column is a list . What i would like to do is vertically center the list relative to the image.
Here is what my HTML looks like:
<div class="row ">
<div class="col-md-6">
<img class="img-responsive" src="500-by-700-image.jpg" >
</div> <!-- col-md-6 -->
<div class="col-md-6" >
<h4 style="font-size: 20px; line-height: 2; ">
My heeader:
<br>
<ul style="text-align: left; ">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
</h4>
</div> <!-- col-md-6 -->
</div> <!-- row -->
Any idea on how I can accomplish this, thanks.
Looking around I managed to find this bit of code that works:
<!-- CSS -->
.vcenter {
display: inline-block;
vertical-align: middle;
float: none;
}
<!-- HTML -->
<div class="row ">
<div class="col-md-6 vcenter"> <!-- NEW -->
<img class="img-responsive" src="500-by-700-image.jpg" >
</div> <!-- col-md-6 -->
<div class="col-md-6 vcenter" > <!-- NEW -->
<h4 style="font-size: 20px; line-height: 2; ">
My heeader:
<br>
<ul style="text-align: left; ">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
</h4>
</div> <!-- col-md-6 -->
</div> <!-- row -->
try this. it works for me....
you must add this css to your code:
.col-md-6 ul{
height:inherit;
display: table-cell;
vertical-align:middle;
width: 100%;
}
i am trying to use the flex box technique in https://css-tricks.com/couple-takes-sticky-footer/ to responsively push down the footer in my page http://apple.mdsc1.com/test/
i used:-
<style>
#wrapper {flex: 1 0 auto;}
body, html {height: 100%}
body {
display: flex;
flex-direction: column;
}
</style>
but it failed. something in the ready made layout that i am using is spoiling the flex
how i make it work?
because the parent of #wrapper is not a flex element, so you need to change the rules from body to jPanelMenu-panel and add height:100% to it
body,
html {
height: 100%;
margin: 0
}
.jPanelMenu-panel {
display: flex;
flex-direction: column;
height: 100%
}
#wrapper {
flex: 1;
}
#footer-bottom {
background: lightgreen
}
<div class="jPanelMenu-panel">
<div id="wrapper">
<!-- Top Bar
================================================== -->
<div id="top-bar">
<div class="container">
<!-- Top Bar Menu -->
<div class="sixteen columns">
<ul class="top-bar-menu" style="float: right">
<li><i class="fa fa-phone"></i>00 971 2 6130700</li>
</ul>
</div>
</div>
</div>
<div class="clearfix"></div>
<!-- Header
================================================== -->
<div class="container">
<!-- Logo -->
<div class="four columns">
<div style="margin-top: 18px; margin-bottom:15px; float: left">
<h1>
<img src="images/mdsc1logo.png" alt="mdsc1">
</h1>
</div>
</div>
</div>
<!-- Navigation
================================================== -->
<div style="background-color: #292929">
<div class="container">
<div class="sixteen columns">
<i class="fa fa-bars"></i> Menu
<nav id="navigation">
<ul class="menu js-enabled arrows" id="responsive" style="margin: 0px">
<li>Home</li>
<li>About Us</li>
<li class="dropdown">
Solutions
<ul style="display: none;">
<li>Apple</li>
<li>Microsoft</li>
<!-- <li>Online Ordering</li>-->
</ul>
</li>
<li>Contact Us</li>
</ul>
</nav>
</div>
</div>
</div>
<!-- Slider
================================================== -->
<div class="container">
<div class="sixteen columns">
<p style="font-size: 50px; margin-top: 40px">The Home Page For MDS ONE As A Whole</p>
</div>
</div>
</div>
<div id="footer-bottom">
<!-- Container -->
<div class="container">
<div class="eight columns">© Copyright 2017 by MDSC1. All Rights Reserved.</div>
</div>
<!-- Container / End -->
</div>
</div>
I'm using Bootstrap and my issue is that the content (ul) within the "forecastDiv" is not inside the "forecastDiv" border. The content stays inside the border once I remove Bootstrap's grid system but I need to align my content properly so I need to be using the grid system. Below is the code I have in a codepen (go to "6-day forecast" comment in HTML). Any help is appreciated. Thank you.
HTML
<div id="forecastDiv">
<div class="col-md-1" id="boxInfo0">
<p id="forecast0">0
</p>
<p id="forecast0TempC">0
</p>
<p id="day0">Test
</p>
</div>
<div class="col-md-1" id="boxInfo1">
<p id="forecast1">0
</p>
<p id="forecast1TempC">0
</p>
<p id="day1">Test
</p>
</div>
<div class="col-md-1" id="boxInfo2">
<ul id="forecast2">0
</ul>
<ul id="forecast2TempC">0
</ul>
<ul id="day2">Test
</ul>
</div>
<div class="col-md-1" id="boxInfo3">
<ul id="forecast3">0
</ul>
<ul id="forecast3TempC">0
</ul>
<ul id="day3">Test
</ul>
</div>
<div class="col-md-1" id="boxInfo4">
<ul id="forecast4">0
</ul>
<ul id="forecast4TempC">0
</ul>
<ul id="day4">Test
</ul>
</div>
<div class="col-md-1" id="boxInfo5">
<ul id="forecast5">0
</ul>
<ul id="forecast5TempC">0
</ul>
<ul id="day5">Test
</ul>
</div>
</div> <!-- end forecastDiv -->
CSS
#forecastDiv {
width: 100%;
border: solid black;
margin: 0 auto; }
https://codepen.io/mcmaster-99/pen/ybWvyy
add a "container" or "container-fluid" class to your <div id="forecastDiv">. "container" is a bootstrap class that will keep everything inside the div.
<div class="container" id="forecastDiv">
been trying to align the logo in the middle between menus trying to make it using foundation zurb.
something like [menu1] [menu2] --[logo]-- [menu3] [menu4].
Sure it might work using the grid system:
<div class="panel hide-for-small-down">
<div class="row">
<div class="large-4 columns">
<nav>
<ul>
<li>About</li>
<li>Portfolio</li>
</ul>
</nav>
</div>
<div class="large-4 columns">
<img src="http://placehold.it/350x150">
</div>
<div class="large-4 columns">
<nav>
<ul>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
</div>
</div>
</div>
Haven't tried any CSS yet apart from this simple one, don't mind the top-nav class but.
ul li{
list-style: none;
display: inline-block;
padding: 15px;
background: #ccc;
}
I would use display: inline-block and vertical-align: middle
DEMO http://jsfiddle.net/AA49p/1/
.large-4 {
display: inline-block;
vertical-align: middle;
}
Your are having this problem because Foundation grid columns have a certain width which does not depend on the content.
Currently you logo is actually exactly in the center, but of course it doesn't look like it is. That's because the content is justified to the left and your navs are much narrower than their parents ("large-4"s)
It's easier to show.
You will find that this code brings you much closer the desired result:
<div class="panel hide-for-small-down">
<div class="row">
<div class="large-3 columns">
<nav>
<ul>
<li>About</li>
<li>Portfolio</li>
</ul>
</nav>
</div>
<div class="large-5 columns">
<img src="http://placehold.it/350x150">
</div>
<div class="large-4 columns">
<nav>
<ul>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
</div>
</div>
All I did was change the first column to "large-3" and the second to "large-5".
Now it looks like it is centered.
May be this result will satisfy you. But know that it's just not the best way to center a logo using grid-columns.
Another easy solution is to "float: right" the right nav.