I want to separate find an event and post an eventand put them on the same line below Events
Html:
<div class="lasvegas">
Events</div>
<div class="findanevent"> </div>
<div class="event_wrapper"><a href="https://adsler.co.uk/find-an-
event/"><span id="findanevent" class="event">Find an Event</span>.
</a>
<a href="https://adsler.co.uk/post-an-event/"><span id="postanevent"
class="event">Post an Event</span></a></div>
Page:https://adsler.co.uk/events/
Tried css .events {display: block;} didn't work
This worked in mobile but how to replicate in desktop?
.event {float :right;} .findanevent br {display: none;}
.event_wrapper {
text-align: center;
margin-top: 20px;
}
<div class="lasvegas" style="text-align: center">
Events
</div>
<div class="event_wrapper">
<div>
<span id="findanevent" class="event">Find an Event</span>
</div>
<div>
<span id="postanevent" class="event">Post an Event</span>
</div>
</div>
Related
I am not very expert at all when it comes to html layouts.
I am trying to generate an invoice report which looks exactly like this:
Print dimensions must be 13.9cm x 22.8 cm
but I am finding a very hard time since it's in Arabic, and Arabic is a pure nightmare in web development, and that's my first project in arabic.
I've tried pdfmake's angular library which gives a better way to produce such reports, but it does not support Arabic fonts :(!
So instead, I am trying to replicate the same layout in html/css:
which looks much uglier than the original; and it's hard to get the same page dimension on print here.
My html layout:
<div ng-if="printVar === true " style="width:13.9cm; height:22.8cm; border:1px solid black;">
<style>
.navbar-primary {
display: none !important;
}
.navbar {
display: none !important;
}
</style>
<h3 style="text-align: center"> شركة ففف فف ش.م.ل </h3>
<br>
<br>
<div style= "text-align: center;">
الدورة - شارع الضمان الاجتماعي - لبنان
هاتف: ٠١\فففف- فففف</div>
<hr>
<div style="margin:0px 30px 0px 20px; text-align: right">
<span style="float: right;">:المرجع</span> <span style="padding:20px"> {{reference}} </span> <br>
<span style="float: right;">:التاريخ</span> <span style="padding:20px"> {{datenow |date: "MM/dd/yy" }} </span> <br>
<hr>
<br>
<div style="margin:0px 30px 0px 20px; text-align: right">
<br>
<br> <span style="float: right;">رقم الشاحنة</span> <span style="padding:20px"> {{truckNumber}} </span>
<br>
<br> <span style="float: right;"> الشركة </span> <span style="padding:20px"> {{company}} </span>
<br>
<br> <span style="float: right;"> السائق </span> <span style="padding:20px">{{driverName}} </span>
<br>
<br> <span style="float: right;"> نوع البضاعة </span> <span style="padding:20px"> {{commodity}}</span>
<br>
<br> <span style="float: right;">شركة الشحن </span> <span style="padding:20px">{{freightCompany}}</span>
<br>
<br>
<br>
<div style="border:1px solid black;">
<br> <span style="float: right;"> :(الوزنة الأولى (كلغ</span>    <span style="padding:20px"> {{firstWeight}} </span>
<br> {{firstWeightDate|date: "MM/dd/yy - hh:mm:ss"}}
<br> <br> <span style="float: right;"> :(الوزنة الثانية (كلغ </span>    <span style="padding:20px"> {{secondWeight}} </span>
<br> {{secondWeightDate|date: "MM/dd/yy - hh:mm:ss"}}
<br>
<span style="float: right;">:الوزن الصافي </span> <span style="padding:20px"> {{secondWeight- firstWeight}} </span>
</div>
<br> <br> <br>
<div style= "width:150px; height: 110px; border:1px solid black; float:left; text-align:center; margin-right:60px" >
إمضاء المسؤول عن الموقع</div>
<div style= "width:150px; height: 110px ;border:1px solid black; float:left ;text-align:center" >
إمضاء السائق </div>
</div>
</div>
My questions:
What approach should I adopt to improve the layout and make it more similar to the original?
Is there a pdfmake alternative that supports arabic? I have tried pdfkit and jspdf and all are failing to produce arabic letters correctly, is there anyone who could make it with a rtl language with any of these libraries?
So when it comes to structuring something like this, I would recommend using either Flexbox or CSS Grid. It will handle quite a bit of the alignment on its own and, assuming your HTML is structured correctly, make a fairly good looking page.
I threw together a short example to help you get started using Flexbox. I would recommend reading up on it if this seems like the route you want to take.
h2,
h4 {
text-align: center;
}
.bordered {
border: 1px solid black;
}
.centered {
text-align: center;
display: block;
}
.container {
margin-bottom: 1em;
}
.row {
display: flex;
justify-content: space-between;
margin-bottom: 0.5em;
}
.row.right {
justify-content: flex-end;
}
.cell {
margin: 0 0.5em;
}
.expanded {
min-width: 45%;
height: 100px;
}
.sub-header {
border-left: none;
border-right: none;
padding: 0.5em 2em;
}
<div ng-if="printVar === true ">
<style>
.navbar-primary {
display: none !important;
}
.navbar {
display: none !important;
}
</style>
<h2> شركة ففف فف ش.م.ل </h2>
<h4>الدورة - شارع الضمان الاجتماعي - لبنان هاتف: ٠١\فففف- فففف</h4>
<div class="container bordered sub-header">
<div class="row">
<span class="cell"> {{datenow |date: "MM/dd/yy" }}</span>
<span class="cell">التاريخ</span>
<span class="cell">{{reference}}</span>
<span class="cell">المرجع</span>
</div>
</div>
<div class="container text-body">
<div class="row right">
<span class="cell">{{truckNumber}}</span>
<span class="cell">رقم الشاحنة</span>
</div>
<div class="row right">
<span class="cell">{{company}}</span>
<span class="cell">الشركة</span>
</div>
<div class="row right">
<span class="cell">{{driverName}}</span>
<span class="cell">السائق</span>
</div>
<div class="row right">
<span class="cell"> {{commodity}}</span>
<span class="cell">نوع البضاعة</span>
</div>
<div class="row right">
<span class="cell">{{freightCompany}}</span>
<span class="cell">شركة الشحن</span>
</div>
</div>
<div class="container bordered">
<div class="row">
<span>{{firstWeightDate|date: "MM/dd/yy - hh:mm:ss"}}</span>
<span>{{firstWeight}}</span>
<span>(الوزنة الأولى (كلغ</span>
</div>
<div class="row">
<span>{{secondWeightDate|date: "MM/dd/yy - hh:mm:ss"}}</span>
<span>{{secondWeight- firstWeight}}</span>
<span>الوزن الصافي</span>
</div>
</div>
<div class="row">
<div class="cell bordered expanded">
<span class="centered">إمضاء المسؤول عن الموقع</span>
</div>
<div class="cell bordered expanded">
<span class="centered">إمضاء السائق</span>
</div>
</div>
</div>
I've a html page with two span tag's which displays the same content but nested in a div with different class name:
<div class='class1'>
<span class='test-icon'>1</span>
</div>
<div class='class2'>
<span class='test-icon'>2</span>
</div>
Is there a way i can show only one <span> at a time based on the nested class, e.g. i've tried with the div.class1 span.test-icon {display: none}but it hides both.
You didn't close your span tags!
Here you are:
.class1 .test-icon{
display: none;
}
/*.class2 .test-icon{
display: none;
}*/
<div class='class1'>
<span class='test-icon'>Hola</span>
</div>
<div class='class2'>
<span class='test-icon'>Adios</span>
</div>
This seems to work as it should:
div.class1 span.test-icon {display:none;}
<div class='class1'>
<span class='test-icon'>Span 1</span>
</div>
<div class='class2'>
<span class='test-icon'>Span 2</span>
</div>
I have the following piece of code where an icon and text are displayed
<div class="group-block last">
<a class="w-inline-block" href="news.html" data-load="1">
<div class="group-image bg3"><img src="images/coffee.png" align="middle"></div>
<div class="group-title">
<div class="title-text">Relaxar-te</div>
</div>
</a>
</div>
I want to change the color of the text "Relaxar-te" after visiting this section. That means, once I returned to this page, the color of the text changed. The CSS of "title-text" is
.title-text {
line-height: 68px;
}
If tried to insert
.title-text:visited {
color: blue;
}
Unfortunately, this doesn't work. I saw many forums where they are using this way, however, it doesn't work for me or I'm missing something.
:visited only works for links. So what you need is
.title-text {
line-height: 68px;
}
a.w-inline-block:visited .title-text {
color: blue;
}
<div class="group-block last">
<a class="w-inline-block" href="news.html" data-load="1">
<div class="group-image bg3"><img src="images/coffee.png" align="middle"></div>
<div class="group-title">
<div class="title-text">Relaxar-te</div>
</div>
</a>
</div>
You can target the text in this manner:
a:visited .title-text{
color: pink;
}
<div class="group-block last">
<a class="w-inline-block" href="news.html" data-load="1">
<div class="group-image bg3"><img src="images/coffee.png" align="middle"></div>
<div class="group-title">
<div class="title-text">Relaxar-te</div>
</div>
</a>
</div>
:visisted only works on the a tag. .title-text is pointed to a div
you could change your code like this to fix it:
.custom-link:visited {
color:blue;
}
<div class="group-block last">
<a class="w-inline-block custom-link" href="news.html" data-load="1">
<div class="group-image bg3"><img src="images/coffee.png" align="middle"></div>
<div class="group-title">
<div class="title-text">Relaxar-te</div>
</div>
</a>
</div>
I have 4 columns in a row that become 1 column on mobile. The way this looks on mobile is fine, but I want to center the content in divs 2 and 4 in each row. What would be the best way to do this?
Apparently my edit was deleted or the site messed up, but I had said I want to do this vertical and horizontal. However, it was my fault I forgot to link to the page. Sorry, guys. - http://www.dismantledesign.com/testsite2/clients.html
Edit: I appreciate all the answers, but I don't think anyone understands that this div has no set height. I just want that text and icons to stay centered as the screen moves. The flex didn't seem to work because it required setting a height to the div.
I also simplified my HTML
Code
.clientsdetail {
text-align: center;
margin: 0px;
padding: 0px;
overflow-x: hidden;
}
.clientinfo h3 {
padding-top: 10px;;
}
.clientinfo p {
padding: 0px 30px;
font-size: 15px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-md-3 nopadding">
<img class="img-responsive" src="img/clients/ivey.jpg">
</div>
<div class="col-md-3 nopadding cinfo">
<div class="clientinfo text-center">
<h3>IVEY</h3>
<p>Clarksville, TN</p>
<div class="social-icons-clients">
<span class="icon-sprite sprite-ig"> </span>
<span class="icon-sprite sprite-fb"> </span>
<span class="icon-sprite sprite-gp"> </span>
<span class="icon-sprite sprite-sc"> </span>
<span class="icon-sprite sprite-tw"> </span>
</div>
</div>
</div>
<div class="col-md-3 nopadding cinfo">
<img class="img-responsive" src="img/clients/rufus.jpg">
</div>
<div class="col-md-3 nopadding">
<div class="clientinfo text-center">
<h3>RUFUS DAWKINS</h3>
<p>Clarksville, TN</p>
<div class="social-icons-clients">
<span class="icon-sprite sprite-ig"> </span>
<span class="icon-sprite sprite-fb"> </span>
<span class="icon-sprite sprite-gp"> </span>
<span class="icon-sprite sprite-sc"> </span>
<span class="icon-sprite sprite-tw"> </span>
</div>
</div>
</div>
</div>
You can use flex properties to make your content to center.
for more details, you can check
Flexbox: center horizontally and vertically
(UPDATED)
You can use the Pseudoclass to select the 2 and 4 div.
.row div:nth-child(2n) {
/* Your CSS Style */
}
If the content inside the 2 and 4 div are inline/inline-block, just use text-align: center;.
Demo
Here is the simple demo for the pseudoclass.
.row > div {
padding: 10px;
}
.row > div:nth-child(2n) {
color: #fff;
background: red;
text-align: center;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
}
<div class="row">
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
</div>
Hope this is helpful for you.
Thanks.
Try a different approach. Bootstrap's floating grid system will not get you where you want.
First, remove row and col- classes so you have something like this:
<div class="my-row">
<div></div>
<div></div>
<div></div>
</div>
Then use CSS to achieve the same result as before, but with the content aligned center:
#media (min-width: 992px) {
.my-row {
display: flex;
align-items: stretch;
}
.my-row > div {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}
}
If you are using SASS, then replace hardcoded 992px with the #screen-md-min variable.
Here's a JsFiddle of your simplified example:
https://jsfiddle.net/mpnz9b30/1/
<div class="col-md-6 nopadding cinfo">
<div class="clientinfo">
<h3>IVEY</h3>
<p>Clarksville, TN</p>
<div class="social-icons-clients">
<span class="icon-sprite sprite-ig"> </span>
<span class="icon-sprite sprite-fb"> </span>
<span class="icon-sprite sprite-gp"> </span>
<span class="icon-sprite sprite-sc"> </span>
<a href="https://twitter.com/contracoda" target="_blank">
<span class="icon-sprite sprite-tw"> </span>
</a>
</div>
</div>
</div>
I've got the following...
<div id="nav-above" class="navigation">
<div class="nav-previous"><span class="meta-nav">«</span> title</div>
<div class="nav-next">title <span class="meta-nav">»</span></div>
</div><!– #nav-above –>
using external CSS alone is it possible to force all of that to remain on just one line?
Try this: http://jsfiddle.net/dT49F/
HTML:
<div class="container">
<div id="nav-above" class="navigation">
<div class="nav-previous">
<a href="link" rel="prev">
<span class="meta-nav">«</span>
much much longer link title here and here and here
</a>
</div>
<div class="nav-next">
<a href="link" rel="next">
much much longer link title here and here and here
<span class="meta-nav">»</span>
</a>
</div>
</div>
</div>
CSS:
.container div {
display: inline;
white-space: nowrap;
}
Any reason for the inner DIVs? I'd just drop them - and if you need the classes, assign them directly to the links:
<div id="nav-above" class="navigation">
<span class="meta-nav">«</span> title
title <span class="meta-nav">»</span>
</div><!– #nav-above –>
div[class^=nav-] {
float: left;
}
That should work. Please note my snippet is using CSS3 selectors, so it might not work in less-advanced browsers. Provide the same class to both divs, and then you can use normal selectors.
UPDATE:
This won't work in IE6, unless you do something like this:
<div id="nav-above" class="navigation">
<div class="nav-previous navigation-links"><span class="meta-nav">«</span> title</div>
<div class="nav-next navigation-links">title <span class="meta-nav">»</span></div>
</div><!– #nav-above –>
(Notice the new class .navigation-links)
And then just change the css selector:
div.navigation-links {
float: left;
}