I am building an online store using Ruby on Rails 3.2 that includes a 'do' loop to pull product details from the DB and wrap the results in a Div. problem is when multiple products are populated the Div wrapping each product info are not horizontally aligned. I currently have the Div set up to float-left this positions them horizontally next to each other but they are not lined up properly (the each div to the right is positioned a little lower than the one that precedes it.
I've included the html and CSS code below. any assistance on this would be much appreciated
HTML Code
<% #products.each do |product| %>
<div class="Primary span 3">
<p id="offer-title"> <%= product.title %> </p>
<%= image_tag(product.image_url, :alt =>product.title, :width =>90, :height=>180)%>
<hr />
<div id="promo-header">
<dl id="tier">
<dt >Tier</dt>
<dd class="tier-details tier1-style">1</dd>
<dd class="tier-details tier2-style">2</dd>
<dd class="tier-details tier3-style">3</dd>
</dl>
<dl id="save">
<dt >Save</dt>
<dd class="tier-details tier1-style">$0.50</dd>
<dd class="tier-details tier2-style">$1.00</dd>
<dd class="tier-details tier3-style">$1.50</dd>
</dl>
<dl id="units">
<dt >Units</dt>
<dd class="tier-details tier1-style">1000</dd>
<dd class="tier-details tier2-style">3000</dd>
<dd class="tier-details tier3-style">5000</dd>
</dl>
</div>
CSS Code
.Primary {
padding-right: 10px;
float:left;
position:relative; left:185px;
margin-right: 20px;
width: 265px;
display: block;
height: 320px;
background: white;
border: 1px solid;
}
I have been struggling with this for 3 days now and would appreciate any assistance.
it was a simple mistake text was overflowing from a paragraph outside the div and pushing the boxes down. once i corrected that they all lined up perfectly.
Related
I am creating a pdf file using snappy1.4,
I want create 2 pages ,each of them divided in 2 parts (vertically),
I have created them: when they are empty its ok but when I fill for example a part1 with some data the part2 is shifted down.
How can I fix the 4 parts in a way that they still fixed (in hight) if they are empty or some of them filled
example1 with empty data (ok):
shifted pdf:
My code:
return new Response(
$this->get('knp_snappy.pdf')->getOutputFromHtml($html,array(
'orientation'=>'Landscape',
'default-header'=>null,
// 'custom-header' =>false,
//'page-size' =>'A4',
// 'no-custom-header-propagation'=>false,
'encoding' => 'utf-8',
'images' => true,
'enable-javascript' => true,
'margin-right' => 1,
'margin-left' =>2,
'margin-top' =>0,
'margin-bottom' =>0,
'javascript-delay' => 5000
)),
200,
array(
'Content-Type' => 'application/pdf',
'Content-Disposition' => 'attachment; filename="file1.pdf"'
)
);
my twig:
<body>
<div style=" padding-left:3em;margin-top: 10px;display:inline-block;height: 0.3in ">
<div style="width:35px;display:inline-block;vertical-align: middle;height: 0.3in"><img style="width:35px " src="{{ absolute_url(asset('images/visa.png' ))}} " id="imgtun"></div>
</div>
<div style=" padding-left:20em;margin-top: 10px;display:inline-block;height: 0.3in">
<div style="width:35px;display:inline-block;vertical-align: middle;height: 0.3in"><img style="width:35px " src="{{ absolute_url(asset('images/visa.png' ))}} " id="imgcenter"></div>
<div style=" display:inline-block;font-size: 20px; font-weight: bold;vertical-align: middle; text-align: center;height: 0.3in">
<span style="text-align: center">My file with 4 parts </span></div>
</div>
<div id="Page1" style="width: 100%; height: 7.8in">
<div id="Partie_presentation" style="display:inline-block;height: 7.8in; width: 30%">
<div style="height:0.3in" id="header_presentation">
<p style="height:25px;background-color:darkseagreen;font-weight: bold;font-size: 20px">
Part1</p>
</div>
<div style="height: 7.5in" id="partie_presentation" >
<div style="height:1.8in">
<p>
<span class="detailtitre" style="font-weight: bold">Adress :</span>
<span class="detailcont">My adress</span>
</p>
<p>
<span class="detailtitre" style="font-weight: bold">Tél :</span>
<span class="detailcont">3389652368</span>
</p>
<p>
<span class="detailtitre" style="font-weight: bold">E-mail :</span>
<span class="detailcont">email#gmail.com</span>
</p>
<p>
<span class="detailtitre" style="font-weight: bold">Website :</span>
<span class="detailcont">my webste</span>
</p>
</div>
</div>
</div>
<div id="Part2"style="height: 7.8in; display:inline-block;width: 69%">
<div style="height:0.3in" id="entete_res">
<p style="height:25px;background-color:darkseagreen;font-weight: bold;font-size: 20px">
Part2</p>
</div>
<div style="height: 7.5in" id="partie_res" >
<div id="partie_budget" style="height: 3.8in">
</div>
<div id="partie_pers" style="height: 4in">
</div>
</div>
</div>
</div>{#end page1#}
<div id="Page2" style="width: 100%; height: 8.1in">
{# partie_ac #}
<div id="Part3" style=" margin-top:2px;display:inline-block;height: 8.1in; width: 49%">
<div style="height: 0.3in">
<p style="height:19px;background-color:darkseagreen;font-weight: bold;font-size: 19px">
Part3</p>
</div>
<div style="height: 7.8in" id="partie_ac" >
</div>
</div>
{# partie_per #}
<div id="Part4" style="display:inline-block;height: 8.1in; width: 50%">
<div style="height: 0.3in">
<p style="height:19px;background-color:darkseagreen;font-weight: bold;font-size: 19px">
Part4</p>
</div>
<div style="height: 7.8in" id="partie_per" >
</div>
</div>
</div>
</body>
This is a CSS problem. Here's one way to fix it:
#Partie_presentation {
float: left;
}
#Part2 {
float: right; /* or left */
}
See JSFiddle
If it's possible in your case (I don't know how Snappy works), move the CSS styles to a <style> tag or to a separate CSS file. Now you are using inline styles so the HTML is very messy.
I'm trying to bottom align an img in a jumbotron, but cannot figure it out.
<div class="jumbotron">
<div class="container">
<div class="row">
<div class="col-lg-8">
<h1>Hello, world!</h1>
<p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
<p><a class="btn btn-primary btn-lg">Learn more »</a></p>
</div>
<div class="col-lg-4 text-center">
<img src="http://via.placeholder.com/200x200">
</div>
</div>
</div>
</div>
I tried adding the following to the CSS
.vertical-bottom {
display: flex;
align-items: bottom;
}
And then added the additional class to the DIV containing the img
<div class="col-lg-4 text-center vertical-bottom">
This didn't work, why is it so hard to vertically align things in bootstrap?
Here a kind of code:
Bootply
Css:
The media query is set to 1200 because I see you're using col-lg-xx
#media screen and (min-width:1200px) {
.flex_container img{
object-fit: contain;
object-position: 100% 100%;
}
.flex_container {
display: flex;
}
}
Html:
<div class="jumbotron">
<div class="container">
<div class="row flex_container">
<div class="col-lg-8">
<h1>Hello, world!</h1>
<p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
<p><a class="btn btn-primary btn-lg">Learn more »</a></p>
</div>
<div class="col-lg-4 text-center flex_container">
<img src="http://via.placeholder.com/200x200" style="">
</div>
</div>
</div>
</div>
<div class="alertCount" tooltip="" data-placement="top" data-toggle="aa" title="" data-original-title="Bin">
<img src="sample/red.png" style="width:20px">
<span class="ng-binding" style="font-weight: bold; margin-left: 5px;margin-top: 5px">0</span>
</div>
<div class="alertCount" tooltip="" data-placement="top" data-toggle="aa" title="" data-original-title="Bin">
<img src="sample/green.png" style="width:20px">
<span class="ng-binding" style="font-weight: bold; margin-left: 5px;margin-top: 5px">0</span>
</div>
i want to print only text from red.png's div.
That image doesn't actually contains the text but what I guess is that its the following sibling Span which has a text '0' If I understood it correctly then use xpath as it is in below java code :
String Text = driver.findElement(By.xpath("//img[#src='sample/red.png']/following-sibling::span")).getText();
and print the Text.
I have been using a video tutorial for Bootstrap Carousel and somehow my code is same as per the video yet the links are not working...
The code...
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Portfolio Document</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<script src="js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js">
</script>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<div class="navbar-brand">Photo Gallery</div>
</div>
<ul class="nav navbar-nav">
<li><a href='#'>Home</a></li>
<li><a href='#'>Nature Gallery</a></li>
<li><a href='#'>Science Gallery</a></li>
</ul>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="carousel slide" data-ride="carousel" id="slider">
<ol class="carousel-indicators">
<li data-target="#slider" data-slide-to="0" class="active"></li>
<li data-target="#slider" data-slide-to="1"></li>
<li data-target="#slider" data-slide-to="2"></li>
<li data-target="#slider" data-slide-to="3"></li>
</ol>
<div class="carousel-inner">
<div class="item active"><img src="img/slide01.png"></div>
<div class="item"><img src="img/slide02.png"></div>
<div class="item"><img src="img/slide01.png"></div>
<div class="item"><img src="img/slide02.png"></div>
</div>
<a href="#slider" data-slide="prev" class="left carousel-control">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a href="#slider" data-slide="next" class="right carousel-control">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
</div>
</div>
</body>
</html>
Another issue is, I am using images of 750px*300px and in desktop view there is grey shade area on the right of the image. While in the mobile or responsive view that grey shade area isnt visible. Can someone please suggest how to rectify the issue?
Please help people, I am new to web-designing and new to stackoverflow too :)
Your links wont work because you need to load jquery.js before bootstrap.js so just flip these around in your head section. Also you need to load jquery and not jquery ui so it should look something like the following
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
Then your images need to have some css to get them to fill the carousel
#slider .item {
height: 250px;
}
#slider .item img{
width: 100%;
height: 100%;
}
Here is a fiddle for you to see this working Fiddle
The only thing about this is images can become skewed in responsive design and images have different sizes so you may want to create a background image for each of the carousel items. Like so
#slider .item {
padding-bottom: 50%;
}
#slider .first-item{
background: url('http://placehold.it/350x150');
background-size: cover;
background-position: center;
}
#slider .second-item{
background: url('http://placehold.it/350x150');
background-size: cover;
background-position: center;
}
#slider .third-item{
background: url('http://placehold.it/350x150');
background-size: cover;
background-position: center;
}
#slider .fourth-item{
background: url('http://placehold.it/350x150');
background-size: cover;
background-position: center;
}
and your html for the carousel inner will look like this:
<div class="carousel-inner">
<div class="item active first-item"></div>
<div class="item second-item"></div>
<div class="item third-item"></div>
<div class="item fourth-item"></div>
</div>
Here is a fiddle of that working Fiddle
I need to place a div below my top navbar which should not scroll with the page content just like the navbar.
I've tried to create it as a second navbar but it is still scrolling or causing a blank area above the two navbars.
How can I do this?
UPDATE
In this sample the green bar is on top of the navbar, but I need it to stay below the navbar: http://jsfiddle.net/julianonunes/y8YqK/
If I move the green bar code (code sample below) before the navbar, it is hidden by the navbar.
Ex:
<div class="navbar navbar-decoration navbar-fixed-top"></div>
<div class="navbar navbar-default navbar-remote navbar-fixed-top">
<div class="navbar-header"> Brand
</div>
</div>
Ok. The problem is your second div includes 'navbar-fixed-top' which is glueing it to the top of your screen. You don't want it fixed to the top - you just want it fixed in place below the main navbar. Change your html for the second nag to:
<div class="navbar navbar-default navbar-remote navbar-decoration ">
And add to your navbar-decoration class:
width: 100%
position: fixed;
You may have tried this already, but in the css for the second navbar put
position: fixed;
If you don't want to add to your stylesheet, you can put it in the div like this:
<div style="position: fixed;"> </div>
I am not sure, but you may also have to add display:block like this:
<div style="position: fixed; display: block;"> </div>
With Bootstrap, use this logic within their html/css:
<div class="navbar" style="position: fixed; display: block;">
<div class="navbar-inner">
<a class="brand" href="#">Title</a>
<ul class="nav">
<li class="active">Home</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
</div>
My last guess:
<div class="navbar" style="margin-top: 10px;">
<div class="navbar-inner">
<a class="brand" href="#">Title</a>
<ul class="nav">
<li class="active">Home</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
</div>
Hope one of those works.
I've got it fixed by adding margin-top to the second navbar with navbar-fixed-top.
<div class="navbar navbar-default navbar-remote navbar-fixed-top">
<div class="navbar-header"> Brand
</div>
</div>
<div class="navbar navbar-decoration navbar-fixed-top"></div>
CSS
.navbar-decoration {
margin-top: 50px;
min-height: 5px;
max-height: 5px;
/* ... */
}