I am making a page with a bunch of items on it with differing headings and text. I want the headings and text to all line up at the same height. Some headings will be 2 lines, some only 1. It needs to also be responsive, so I can't just set a min-height.
(source: iforce.co.nz)
Is it possible to get the h2's and p's to always be the same height? The hacky way I was thinking was padding out the shorter ones with javascript, but that is a last resort.
The HTML is:
<div class="itemContainer" style="width:25.0%;">
<div class="catItemView groupPrimary">
<div class="catItemHeader">
<h3 class="catItemTitle">
Wairamarama-Onewhero Seal Extension
</h3>
</div>
<div class="catItemBody">
<div class="catItemImageBlock">
<span class="catItemImage">
<a href="/index.php/projects/item/46-wairamarama-onewhero-seal-extension" title="Wairamarama-Onewhero Seal Extension">
<img src="/media/k2/items/cache/64d93d666355a43c4a86679a030d35b6_M.jpg" alt="Wairamarama-Onewhero Seal Extension" style="width:359px; height:auto;" />
</a>
</span>
<div class="clr"></div>
</div>
<div class="catItemIntroText">
<p>Evergreen Landcare have been involved in the Wairamarama-Onewhero Seal Extension as a sub-contractor for Heb Construction.</p>
</div>
<div class="clr"></div>
</div>
<div class="clr"></div>
<div class="catItemReadMore">
<a class="k2ReadMore" href="/index.php/projects/item/46-wairamarama-onewhero-seal-extension">Read more...</a>
</div>
<div class="clr"></div>
</div>
This is generated by K2/Joomla! so there isn't much flexibility in it.
This is the page if you want to see it.
You could "fix" the appearance by setting the height of the elements that have variable content to some value that holds the largest. The follwoing CSS does this for the page you linked to:
div.catItemIntroText {
height: 180px;
}
div.catItemHeader h3.catItemTitle {
height: 45px;
}
This only works because you know in advance the height that looks best.
If you were in a position to alter your HTML you could take a fresh approach and use a grid system. Here is an approach that uses Twitter Bootstrap (demo)
<div class="container">
<div class="row">
<div class="span3">
<h2>Wairamarama-Onewhero Seal Extension</h2>
</div>
<div class="span3">
<h2>Te Rapa Pass</h2>
</div>
<div class="span3">
<h2>Stockton Mine</h2>
</div>
<div class="span3">
<h2>State Highway 88 Dunedin Realignment</h2>
</div>
</div>
<div class="row">
<div class="span3">
<img src="http://placekitten.com/200/300" />
</div>
<div class="span3">
<img src="http://placekitten.com/200/300" />
</div>
<div class="span3">
<img src="http://placekitten.com/200/300" />
</div>
<div class="span3 ReadMore">
<img src="http://placekitten.com/200/300" />
</div>
</div>
<div class="row">
<div class="span3 ReadMore"> <a href='#' class='btn btn-primary'>read more</a>
</div>
<div class="span3 ReadMore"> <a href='#' class='btn btn-primary'>read more</a>
</div>
<div class="span3 ReadMore"> <a href='#' class='btn btn-primary'>read more</a>
</div>
<div class="span3 ReadMore"> <a href='#' class='btn btn-primary'>read more</a>
</div>
</div>
</div>
By putting each row (of text, images and buttons) on it's own <div.row> the spill over is handled automatically.
Related
Sorry for my elementary question, but I have spent a lot of time and I can't understand the mistake. I have a card and I'd like to show the button on the right inside the card footer. Now the button is displayed on the left.
Thank you in advance!
This is my HTML page where I have the card
<div class="row">
<div class="col-100 tablet-auto desktop-auto">
<div class="card">
<div class="card-content card-content-padding">
<div class="row">
<div class="col-100 tablet-auto desktop-80">
<div class="list">
<ul>
<li>
<!--<a class="item-link smart-select smart-select-init">-->
<a href="#" class="item-link smart-select smart-select-init" data-open-in="popup" data-virtual-list="fruits1" data-page-back-link-text="Indietro">
<select name="fruits1">
<option value="">apple</option>
<option value="">banana</option>
</select>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Fruits 1</div>
</div>
</div>
</a>
</li>
<li>
<a href="#" class="item-link smart-select smart-select-init" data-open-in="popup" data-virtual-list="fruits2" data-page-back-link-text="Indietro">
<select name="fruits2"> </select>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Fruits 2</div>
</div>
</div>
</a>
</li>
</ul>
</div>
<!-- ./ list -->
</div>
<!-- ./ block -->
</div>
<!--col-->
</div>
<!--row-->
</div>
<!--card-content-->
<div class="card-footer">
<div class="row justify-content-right">
<div class="col text-align-right">
<a class="button button-fill" href="#">Search</a>
</div>
</div>
</div>
<!--card-footer-->
</div>
<!--card-->
</div>
<!--col-->
You can resolve issue by distribute a footer to two section, one for left, and second one for right, or by custom style....
You can update your code by adding empty span before your button, then the card footer will display your button in right...
Look at this demo.
<div class="card">
<div class="card-header">Card header</div>
<div class="card-content card-content-padding">Card with header and footer. Card headers are used to display card titles and footers for additional information or just for custom actions.</div>
<div class="card-footer"><span></span><a class="button button-fill" href="#">Search</a>
</div>
can someone help me out how to generate multiple cards in HTML without adding separate div for each card? the thing is I want the code length to be shorter so I want to use single that is applicable to shorten the length and generate the cards to display in a HTML page.As I'm new to development I'm not able to solve this problem in spite of many searches.
please see this
<div class="row">
<div class="col m4">
<div class="card">
<div class="card-image">
<img src="http://www.ilikewallpaper.net/ipad-wallpapers/download/2268/Square-Pattern-ipad-wallpaper-ilikewallpaper_com.jpg">
<span class="card-title" style="width:100%; background: rgba(0, 0, 0, 0.5);">Sample1</span>
</div>
<div class="card-content">
<p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.</p>
</div>
<div class="card-action">
This is a link
</div>
</div>
</div>
<div class="col m4">
<div class="card">
<div class="card-image">
<img src="http://www.ilikewallpaper.net/ipad-wallpapers/download/2268/Square-Pattern-ipad-wallpaper-ilikewallpaper_com.jpg">
<span class="card-title" style="width:100%; background: rgba(0, 0, 0, 0.5);">Sample2</span>
</div>
<div class="card-content">
<p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.</p>
</div>
<div class="card-action">
This is a link
</div>
</div>
</div>
</div>
<div class="fixed-action-btn click-to-toggle" style="bottom: 45px; right: 24px;">
<a class="btn-floating btn-large red">
<i class="large material-icons">menu</i>
</a>
<ul>
<li><a class="btn-floating red" class="fbtn" href="test.html"><i class="material-icons">home</i></a></li>
<li><a class="btn-floating yellow darken-1" class="fbtn" href="#"><i class="material-icons">work</i></a></li>
<li><a class="btn-floating green" class="fbtn" href="about.html"><i class="material-icons">account_circle</i></a></li>
<li><a class="btn-floating blue" class="fbtn" href="contact.html"><i class="material-icons">speaker_notes</i></a></li>
</ul>
</div>
<div class="clear" style="clear:both; height: 100px;">
</div>
<footer class="ui-footer" style="background:#fafafa; width:100%; position:fixed; z-index:99; clear:both;">
<div class="container">
<p>© Yogesh Singh Choudhary</p>
</div>
</footer>
Thank you
I have a question about the 2sxc module.
I made a view with the following code:
<div class="animated fadeInUp">
<div class="about_team">
<div class="pe-spacer size40"></div>
<ul class="row list-unstyled">
#foreach(var Content in AsDynamic(Data["Default"])){
<li class="col-sm-3">
<div class="state-wrapper" style="height: 231px;"> <img alt="" src="/portals/2/Afbeeldingen/personen/noord-holland%20noord/person.jpg" width="100%" height="100%" />
<div class="state-info"> <a href="/Noord-Holland-Noord/Ahmet-Boz">
<div class="state-circle"> <span class="glyphicon glyphicon-share-alt"></span></div>
</a> </div>
</div>
<div class="team_content">
<h4>#Content.Naam</h4>
<p style="font-size: x-small;">#Content.Beroep</p>
<div class="team_icon clearafter">
<div class="team_link"> → Meer informatie </div>
</div>
</div>
</li>
#Edit.Toolbar(Content)
}
</ul>
</div>
</div>
Which is resulting in this:
For some reason, I am getting this error when using anything in the toolbar:
I went to the logs to see if there was any more information:
I have no idea what I am doing wrong.
Any advice? Thanks in advance.
I am making the footer in bootstrap which have links like Features, About, FQS, Contact us and logo-image(Hide for copyrights).
For large screens, the position of elements like links and logo-image are fine.
But for medium screens "links" started to display vertically, rather than displaying horizontally and logo-image moves downwards the link, as you can observe in picture provided.
Here i want 2 changes.
1)The links must display horizontally even at medium or small screen.
2) As soon as it reaches to the break-point, the elements should swap the position.(The logo-image should display at link's location and vice versa).
Code:
<div class="container-fluid">
<div class="container">
<div class="row">
<div class="form-group">
<div class="col-md-12">
<h5 align="center" class="copyRightFooterH">BF2F</h5>
</div>
</div>
<div class="form-group">
<div class="col-md-12">
<div class="col-md-2">
<h3 id="FH"><a class="Features">Features</a></h3>
</br>
About
</div>
<div class="col-md-2">
<h3 id="FH"><a class="FQS">FQS</a></h3>
</br>
Contact us
</div>
<div class="col-md-8" align="right">
<img src="images/Logo Name2.png" class="" width="350" height="125" alt=""/>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-12">
<h5 align="center" class="copyRightFooterH">Copy-Right © 2015-2017;</h5>
</div>
</div>
</div><!--End Row-->
</div><!--End container-->
</div><!--End container-fluid-->
I would modify the css outside of bootstrap by giving the logo a specific class. Bootstrap is great framework, adding the custom CSS will let you leverage that framework and still add the manipulations you need. Hope that this helps.
Here is the working codepen.
http://codepen.io/anon/pen/oxJzQd?editors=1100
HTML Changes
<div class="col-md-8 logo">
<img src="images/Logo Name2.png" class="" width="350" height="125" alt=""/>
</div>
CSS
.logo {
text-align:center;
}
/*optional stuffs */
.logo img{ width:100%; height:auto;}
#media only screen and (min-width : 768px) {
.logo { text-align:right;}
/*optional stuffs */
.logo img {width:initial; height:initial;}
}
This is because you are saying at MEDIUM screen size have this column layout:
<div class="col-md-12">
<div class="col-md-2">
<h3 id="FH"><a class="Features">Features</a></h3>
</br>
About
</div>
<div class="col-md-2">
<h3 id="FH"><a class="FQS">FQS</a></h3>
</br>
Contact us
</div>
<div class="col-md-8" align="right">
<img src="images/Logo Name2.png" class="" width="350" height="125" alt=""/>
</div>
</div>
col-md-*
Only effect medium screen sizes and above. If you want to target every device you would use col-xs-*
Like so...
<div class="col-xs-12">
<div class="col-xs-2">
<h3 id="FH"><a class="Features">Features</a></h3>
</br>
About
</div>
<div class="col-xs-2">
<h3 id="FH"><a class="FQS">FQS</a></h3>
</br>
Contact us
</div>
<div class="col-xs-8 col-md-8" align="right">
<img src="images/Logo Name2.png" class="" width="350" height="125" alt=""/>
</div>
</div>
I believe this is the issue you are talking about. But it does not help since you provide no JSFiddle link for people to help you easily. I would recommend you attach JSFiddle link in future reference.
Try to remove div with form-group class as you have your col stacked.
Try this:
<div class="container">
<div class="row">
<h5 align="center" class="copyRightFooterH">BF2F</h5>
</div>
<div class="row">
<div class="col-xs-2">
<h3 id="FH"><a class="Features">Features</a></h3>
<br/>
About
</div>
<div class="col-xs-2">
<h3 id="FH"><a class="FQS">FQS</a></h3>
<br/>
Contact us
</div>
<div class="col-xs-8">
<img src="images/Logo Name2.png" class="" width="350" height="125" alt=""/>
</div>
</div>
<div class="row">
<h5 align="center" class="copyRightFooterH">Copy-Right © 2015-2017;</h5>
</div>
</div><!--End container-fluid-->
Regards.
I have added a Jquery slider (called SudoSlider) to my website, with 'previous' and 'next' buttons that allow users to advance to the next slide, or go back one. I would, however, like to make it so that the slides change automatically.
I have come across questions that are similar to this, but my Javascript is rather limited and so I'm unable to use the codes given to other users.
If anybody can help me achieve this I would be very grateful.
Please see this JSFiddle here for the codes used.
Also, the slider can be seen in action here if the JSFiddle is of no use.
Thanks very much in advance!
Here is the working fiddle: http://jsfiddle.net/surendraVsingh/VN7F8/1/
I just changed the sequence of loading javascript. Below is the complete HTML with javascript included & include external css u have.
HTML Changes:
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"/></script>
<script type="text/javascript" src="http://www.pinknoise-systems.co.uk/userfiles/jquery/slider/js/jquery.sudoSlider.min.js"/></script>
<script type="text/javascript">
$(document).ready(function(){
var sudoSlider = $("#slider").sudoSlider();
});
</script>
</head>
<body>
<div id="container">
<div style="position:relative;">
<div id="slider">
<ul>
<li>
<div style="margin:0 auto;text-align:center;height:300px;">
<img src="http://www.pinknoise-systems.co.uk/userfiles/images/final_slide_6.png" />
</div>
</li>
<li>
<div style="margin:0 auto;width:620px;height:300px;background:url('http://www.pinknoise-systems.co.uk/userfiles/images/final_slide_5.png');">
<div class="product_row_1">
<div class="one">
Sennheiser SKP 300 G3
<div class="p-image"><img src="http://www.pinknoise-systems.co.uk/userfiles/images/monthly/skp300.jpg" /></div>
<div class="p-content">
<img src="http://www.pinknoise-systems.co.uk/userfiles/images/monthly/4_stars.png" />
<p class="slide_product_price">£296.00</p>
<p class="slide_product_price2">EX VAT #20%</p>
</div>
</div>
<div class="two margin-3">
Fostex PM8.4.1
<div class="p-image"><img src="http://www.pinknoise-systems.co.uk/userfiles/images/monthly/pm841.jpg" /></div>
<div class="p-content">
<img src="http://www.pinknoise-systems.co.uk/userfiles/images/monthly/4_stars.png" />
<p class="slide_product_price">£412.50</p>
<p class="slide_product_price2">EX VAT #20%</p>
</div>
</div>
<div class="three margin-3">
Delkin Wingman
<div class="p-image"><img src="http://www.pinknoise-systems.co.uk/userfiles/images/monthly/wingman.jpg" /></div>
<div class="p-content">
<div class="4stars"><img src="http://www.pinknoise-systems.co.uk/userfiles/images/monthly/4_stars.png" /></div>
<p class="slide_product_price">£179.19</p>
<p class="slide_product_price2">EX VAT #20%</p>
</div>
</div>
</div>
<div class="product_row_2">
<div class="one">
D|Focus Street Runner Kit
<div class="p-image"><img src="http://www.pinknoise-systems.co.uk/userfiles/images/monthly/streetrunnerbundle.jpg" /></div>
<div class="p-content">
<div class="4stars"><img src="http://www.pinknoise-systems.co.uk/userfiles/images/monthly/4_stars.png" /></div>
<p class="slide_product_price">£332.50</p>
<p class="slide_product_price2">EX VAT #20%</p>
</div>
</div>
<div class="two margin-3">
D|Focus Field Runner Kit
<div class="p-image"><img src="http://www.pinknoise-systems.co.uk/userfiles/images/monthly/fieldrunnerkit.jpg" /></div>
<div class="p-content">
<div class="4stars"><img src="http://www.pinknoise-systems.co.uk/userfiles/images/monthly/4_stars.png" /></div>
<p class="slide_product_price">£382.50</p>
<p class="slide_product_price2">EX VAT #20%</p>
</div>
</div>
<div class="three margin-3">
D|Focus Austin Rig Bundle
<div class="p-image"><img src="http://www.pinknoise-systems.co.uk/userfiles/images/monthly/austinrigbundle.jpg" /></div>
<div class="p-content">
<img src="http://www.pinknoise-systems.co.uk/userfiles/images/monthly/4_stars.png" />
<p class="slide_product_price">£499.17</p>
<p class="slide_product_price2">EX VAT #20%</p>
</div>
</div>
</div>
</div>
</li>
<li>
<div style="margin:0 auto;text-align:center;">
<img src="http://www.pinknoise-systems.co.uk/userfiles/images/final_slide_3.jpg" />
</div>
</li>
<li>
<div style="margin:0 auto;text-align:center;">
<img src="http://www.pinknoise-systems.co.uk/userfiles/images/final_slide_4.jpg" />
</div>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
Try this, it sets the slider to automatically change.
$(document).ready(function(){
var sudoSlider = $("#slider").sudoSlider({fade: true,auto:true});
});
here is the working link