I have a inline ul inside a dd element, which shows like this,
Now I'm trying to match the "second" line with selectors, is that even possible?
Items on each line varies (depends on the screen size) so I can't just match them when I print them in PHP.
Why I'm doing this:
I have a margin-bottom defined for all li, I'm trying to remove that for items in the "last-line", otherwise there would be extra margins.
Attached a minimal example:
<html>
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-3 col-xs-3">
<dl>
<dt>Title:</dt>
<dd>
<ul class="list-inline">
<li>Item</li><li>Item</li>
<li>Item</li><li>Item</li>
<li>Item</li><li>Item</li>
<li>Item</li><li>Item</li>
<li>Item</li><li>Item</li>
<li>Item</li><li>Item</li>
</ul>
</dd>
</dl>
</div>
</div>
</div>
</body>
</html>
You can't match on a "last line", even more so in this case because it is dynamic. But you could apply a negative margin-bottom to the ul to cancel out the li margins:
.container {
background-color:#ccc;
}
.container ul {
margin-bottom:-50px;
}
.container ul li {
margin-bottom:50px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-3 col-xs-3">
<dl>
<dt>Title:</dt>
<dd>
<ul class="list-inline">
<li>Item</li><li>Item</li>
<li>Item</li><li>Item</li>
<li>Item</li><li>Item</li>
<li>Item</li><li>Item</li>
<li>Item</li><li>Item</li>
<li>Item</li><li>Item</li>
</ul>
</dd>
</dl>
</div>
</div>
</div>
<div>Some other content</div>
Its possible with javascript/jQuery. you said you want it based on screen size so you have to call function every time the screen changes.
The way i see it done is:
get the screen size and start looping the li elements by saving their widths in temporary variable, when this variable value becomes higher than the screen size, break and apply to next li the margin.
EDIT:
Noticed the responsive classes on div, so for this way - just take the div's width and not the screen size.
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-3 col-xs-3">
<dl>
<dt>Title:</dt>
<dd>
<ul id="li_container" class="list-inline">
<li>Item</li><li>Item</li>
<li>Item</li><li>Item</li>
<li>Item</li><li>Item</li>
<li>Item</li><li>Item</li>
<li>Item</li><li>Item</li>
<li>Item</li><li>Item</li>
</ul>
</dd>
</dl>
</div>
</div>
</div>
for start add id to the ul "li_container"
then with jQuery :
function fix_margins(){
$("#li_container li").css("margin-bottom","your_default_margin_goes_here"); // reset margins
var container_width = $("#li_container").outerWidth();
var temp_width = 0;
var i=1;
$.each($("#li_container li"),function(){
temp_width += $(this).outerWidth();
if(temp_width > container_width)
{
$("#li_container li:nth-child("+(i)+") ").nextAll().css("margin-bottom","0"); // remove bottom margins for all in second row
return false;
}else {i++;}
});
}
$(document).ready(function(){
fix_margins();
$( window ).resize(function() {
fix_margins();
});
});
Related
I have a navigation that is horizontal. Under every choice I have a div that opens up on click. But the problem is that it binds it's position to the parent navigation button. I want every div that opens on the exact same spot. I want every child div that opens to open from the first element in the navigation bar.
So in this case i want the white open div to bind to "Nyheter" instead. I really can't solve it, I tried set a div element before the navigation that all div that opens binds to in css but it not seems to work.
<div class="Container">
<nav class="NavHorizontal Grid Grid--alignMiddle">
#Navigation.RenderNavigation("master/navigationDesignHeader.cshtml", navigationSettings)
</nav>
</div>
//NavigationDesignheader.cshtml under this line
var elementId = 1;
foreach (var node in nodes)
{
var idElement = "megaMenu" + elementId;
<div class="NavHorizontal-item Grid-cell u-sizeFit" id="#idElement">
<a class="Button Button--tab navigationHeaderLink u-pointer" onclick="toggleMenu('#elementId')">
#node.Name
</a>
#RenderMegaMenu(node.Nodes, node.Link, node.Name)
</div>
elementId++;
}
Megamenu:
<div>
<div id="megaMenuDropdown" class="Container megaMenuDropdown-content displayNone">
<div class="Grid Grid--withGutter">
<div class="Grid-cell u-sizefull u-mt-10">
#nodeName
<div class="megaMenuToggle-closeBars u-pointer" style="float:right">
<span class="megaMenuToggle-closeBar"></span>
<span class="megaMenuToggle-closeBar"></span>
</div>
</div>
</div>
<hr class="colorBlue" />
<div class="Grid Grid--withGutter">
<div class="Grid-cell u-size12of12 u-md-size6of12 u-lg-size6of12">
<ul>
#foreach (var node in firstColumn)
{
<li class="u-mb-10 linkHover">
<a class="userLink colorBlue" href="#node.Link">#node.Name</a>
</li>
}
</ul>
</div>
#if (moreThanTen)
{
<div class="Grid-cell u-size12of12 u-md-size6of12 u-lg-size6of12">
<ul>
#foreach (var node in secondColumn)
{
<li class="u-mb-10 linkHover">
<a class="userLink colorBlue" href="#node.Link">#node.Name</a>
</li>
}
</ul>
</div>
}
</div>
</div>
</div>
Any suggestions?
Title says all basically. I want the text right next to the slideshow.
<div class="displayBorder">
<div class="displayContainer">
<div class="pictureContainer">
<div class="photoContainer">
<div class="switchPhoto" id="switchLeft-wexford" onclick="lastPhoto('wexford-1')"><</div>
<img src="css/img/wexford-1.jpg" id="wexford-image" />
<div class="switchPhoto" id="switchRight-wexford" onclick="nextPhoto('wexford-1')">></div>
</div>
</div>
<h2 id="wexford">17 My Street - Some Town, New York</h2>
<h3>$1,249,999</h3>
</div>
</div>
H tags have a specific purpose, to act as a header under which other content will fall. To use h tags side by side goes against their intended use (and is invalid html). The span tag does what an H tag does, but is an inline element (display:inline), where a H tag is a block level element (and acts like a div)(display:block). You can change the 'display' property of an H tag's css to do what a span does.
With that in mind, I would actually use 'display:inline-block' in your situation.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
h1 {
display: inline-block;
}
h2.asCouple {
display: inline-block;
margin-left: 15px;
}
</style>
</head>
<body>
<div>
<h1>Topic - <h2 class="asCouple">Subtopic</h2></h1>
</div>
</body>
</html>
Hope this helps.
You can do it inline when declaring the HTML element, I did something like this:
<h6 style="display: inline">Posted by <h4 style="display: inline">{{.}}</h4></h6>
By doing this, you don't change the style of all <hSOMETHING> elements
<div class="displayBorder">
<div class="displayContainer">
<div class="displayTable">
<div class="pictureContainer">
<div class="photoContainer">
<div class="switchPhoto" id="switchLeft-wexford" onclick="lastPhoto('wexford-1')"><</div>
<img src="css/img/wexford-1.jpg" id="wexford-image" />
<div class="switchPhoto" id="switchRight-wexford" onclick="nextPhoto('wexford-1')">></div>
</div>
</div>
<div class="txt-con">
<h2 id="wexford">Location</h2> <br />
<h3>$1,249,999</h3>
<p>Custom Built Home With Every Bell And Whistle !/ Ch Colonial With 6 Generous Bdrms, 2 Master Suites Or Use Lge Area For Office, 5 Full Baths, Wood Floors Thru-Out, Granite Eik W/ Center Isle, Top Appliances, Andersen Windows, Lots Of Details, Full Finished Basement W/ Ose, Full Wet Bar, Theater Tv Area, Playrm, Lots Of Storage, Custom Freeform Salt Pool, Custom Pool House</p>
</div>
</div>
<button class="learn-btn">LEARN MORE</button>
</div>
#Jared Scarito is this what you need??
CSS
.displayContainer{
display:table;
}
.photoContainer,.txt-con{
display:table-cell;
vertical-align:middle;
}
HTML
<div class="displayBorder">
<div class="displayContainer">
<div class="pictureContainer">
<div class="photoContainer">
<div class="switchPhoto" id="switchLeft-wexford" onclick="lastPhoto('wexford-1')">
<</div> <img src="https://i.stack.imgur.com/rhy46.png" id="wexford-image" />
<div class="switchPhoto" id="switchRight-wexford" onclick="nextPhoto('wexford-1')">></div>
</div>
</div>
<div class="txt-con">
<h2 id="wexford">1234 My Street - Sometown, New York</h2>
<h3>$1,249,999</h3>
</div>
</div>
</div>
changed the image to demonstrate
Pretty much the same HTML, added extra div around h3 and h2..
In my test page, at the bottom, there is a large white gap between the footer and the body, I can't figure out why.
Test page
HTML:
<div id="content">
<article>
<div class="social">
<!--Widget code-->
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<!--End Widget code-->
<!--FACEBOOK BUTTON
<div class="fb-like" data-layout="button_count" data-action="like" data-show-faces="true" data-share="true"></div> -->
<!--End FACEBOOK BUTTON-->
<div class="sslbreadcrumbs">
<!--first level-->
You are here: Cancer Fighters homepage / Sweat
<!--second level-->
<!--third level-->
</div>
</div>
<div id="content-area">
<!-- Content Placeholder -->
</div>
<div>
[[S63:3]]
<!--Button will only load on Homepage, this is NOT using Luminate Conditional code, see hmpgonly.js -->
<div class="button-container" id="hmpgonly"> Start a Fundraiser
</div>
</div>
<!-- //Content Placeholder -->
</div>
</div>
</article>
</div>
<!--================================================================
FOOTER
==============================================================-->
<footer>
<div id="footer-bottom">
<div class="footer-cell-container">
<div id="footer-cell-one" class="footer-cell">
<h2>Be a Cancer Fighter</h2>
<ul>
[[S51:GEN_ON_Reus_CancerFighter_IFE_Footer]]
<br>
</ul>
</div>
<div id="footer-cell-two" class="footer-cell">
<h2>About the Program</h2>
<ul>
<li>About the Program</li>
<li>About the Society</li>
<li>Where your money goes</li>
<li>FAQs</li
</ul>
</div>
<div id="footer-cell-three" class="footer-cell">
<h2>Get Started</h2>
<ul>
<li>Create a fundraiser</li>
<li>Join a fundraiser</li>
<li>Participate as an<br />individal</li>
<li>Pledge a participant<br />or fundraiser</li>
<li>Donate now</li>
</ul>
</div>
<div id="footer-cell-four" class="footer-cell">
<h2>Canadian Cancer Society</h2>
<ul>
<li><a title="What we do" href="http://www.cancer.ca/en/?region=on"target="_blank">What we do</a></li>
<li><a title="Privacy policy" href="http://www.cancer.ca/en/about-our-site/privacy-policy/?region=on"target="_blank">Privacy policy</a></li>
<br />
<br />
</ul>
</div>
<div id="footer-cell-five" class="footer-cell">
<br>
<ul>
<li>Copyright [[S9:pattern:yyyy]] Canadian Cancer Society </li>
<li>Charitable Registration no. 118829803 RR00001</li>
<br />
</ul>
</div>
</div>
</div>
</footer>
the CMS conditional S tag you'll see there [[S63:3]] it inserts the body of text and such that you see on the test page.
The css for div id=content:
#content {
width: 100%;
max-width: 970px;
margin: 0 auto 122px auto;
overflow: auto;
overflow-y: hidden;
}
When I inspect the page it shows me that content is 970 x 1802, I don't understand where 1802 is being pulled from?
Any suggestion is greatly appreciated! thank you for your time.
Open your dev tools and look at .button-container
Remove the min-height and margin-top rules and you will see that space disappear.
Granted, now your button is not positioned properly. You may want to rethink the layout of your article body, and as Mr Lister mentioned, not set the position of the final element as relative since it is still taking up space even though it is visually in a separate place.
at first your div #content has a margin-bottom setted.
try with this code:
#content {
margin-bottom: 0
}
at second I think you have some javascript that resize some div.
try to disable some script in your test page (or provide a working plunker)
Change the margin on #content to -100px;
#content {
width: 100%;
max-width: 970px;
margin: 0 auto -100px auto;
overflow: auto;
overflow-y: hidden;
}
I am using a child theme, on one page I want margin left 30 on the other not. But it will effect all pages how do I make it unique?
CSS:
.description.style-16 ol, ul {
margin-left: 30px;
}
.eo-events-shortcode ol, ul {
margin-left: 0; (this one will have no effect)
}
HTML:
<div class="one_third">
<div id="homeboxheader">
<h3 class="highlight">Agenda</h3>
<ul class="eo-events eo-events-shortcode">
<li class="eo-event-cat-agenda eo-event-future">
<li class="eo-event-cat-agenda eo-event-future">
</ul>
<div id="homebox_tabs">
</div>
<div class="one_third">
<div class="description clearfix style-16">
<h3 class="highlight">Werken bij SVHW</h3>
<ul>
<li>
<li>
</ul>
</div>
adding the inline to this
[one_third]
<div id="homeboxheader">
<h3 class="highlight">Agenda</h3>
[eo_events event_start_before='+1 week' event_category=party,birthday's no_events="no events." showpastevents=false numberposts='3'] %event_title% %start{D d/m}{, H:i}% till %end{H:i}{}% [/eo_events]
<div id="homebox_tabs">
<div class="homeboxtab">[button link="http://intranet/wordpress/?page_id=2418" size="small" color="blue"]Go to agenda[/button]</div>
</div>
</div>
[/one_third]
To differentiate the two either adding an ID or class will allow you to specifically target each element.
You need to create something that will uniquely identify the page you want it to apply to.
You can either have the CSS apply only if the <body> has a certain class; or you could use a second stylesheet, or inline styles for that page.
How can I make the following search bar and its button at left of a page and the pagination at right, at the same line, please ?
Here is the template that I'm working on : http://jsfiddle.net/ht97t/1/
<form role="search" method="get" action="/Accueil/Rechercher">
<div class="col-xs-8">
<input type="text" name="rech" class="form-control" placeholder="Rechercher">
</div>
<button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button><br />
<label style="margin-left:20px;"><input type="radio" name="type" value="nomPoste" /> Nom du poste de travail</label><label style="margin-left:12px;"><input type="radio" name="type" value="nomAppMetier" checked /> Nom de l'application métier</label>
</form>
<ul class="pagination pagination-sm" style="float:right;">
<li class="disabled">«</li>
<li class="active">1 <span class="sr-only">(current)</span></li>
<li>2 </li>
<li>3 </li>
<li>4 </li>
<li>5 </li>
<li>»</li>
</ul>
I've tried this, but, this haven't work : http://jsfiddle.net/ht97t/2/
Note : I'm using bootstrap.
Thanks a lot !
From the the bootstrap CSS;
.pagination {
border-radius: 4px;
display: inline-block;
margin: 20px 0;
padding-left: 0;
}
You will need to override that margin, for now just set an inline style on your UL to confirm;
<ul class="pagination pagination-sm" style="float:right; margin: 0!important;">
Edit
You should use the Bootstrap grid as documented (http://getbootstrap.com/css/), that is to define a row and then to specify the placement of content within that row by setting div classes.
For example if you wanted to have a search box top left and a pagination control top right of a row then try this:
<div class="row">
<div class="col-xs-8"><!--search here --></div>
<div class="col-xs-4"><!--pagination here --></div>
</div>
If you want to leave some space between the left and right content then use the offset class:
<div class="row">
<div class="col-xs-6"><!--search here --></div>
<div class="col-xs-4 col-xs-offset-2"><!--pagination here --></div>
</div>
In your original example you had a Search Box left, Radio buttons middle and Pagination right, so you might just be best to go with a 4 4 4 grid:
<div class="row">
<div class="col-xs-4"><!--search here --></div>
<div class="col-xs-4"><!--radio buttons here --></div>
<div class="col-xs-4"><!--pagination here --></div>
</div>
One possible solution for this is to make the .pagination absolute and move it accordingly.
Example Fiddle
CSS:
body {position: relative;}
.pagination {
position: absolute;
right: 0px;
top: 0px;
margin: 5px 0;
}
In this case I set the body to have position:relative; but you probably would want to switch that to the closest containing element.
You have several options to do this.
The quickest fix would be just to do a margin top of like 18px
<form role="search" method="get" action="/Accueil/Rechercher">
<span style="float:left; margin:18px 0 0 10px;">