Quick question, I need help and have no idea what to do, because I know nothing about html/css and got this as a bonus task along with other programming things.
What I have:
What I would like to have:
Here is css code
.offer-small { width: 278px; height: 209px; position: relative; margin-bottom: 25px; }
.offer-small img { width: 278px; height: 209px; }
.offer-small .mask { width: 278px; height: 209px; cursor: pointer; position: absolute; top: 0; left: 0; background: url('../images/photo-small-mask.png'); }
.offer-small .desc { display: none; font-size: 10pt; width: 258px; height: 189px; padding: 10px; position: absolute; top: 0; left: 0; background: url('../images/photo-small-black-transparent.png'); color: white; text-shadow: 1px 1px #000000}
.offer-small .desc p { font-size: 9pt; color: #f2f0e4; }
.offer-small .desc table.compare { width: 160px; height: 48px; margin: 0 auto 0 auto; background: url('../images/offer-table.png'); color: #f2f0e4; }
.offer-small .desc table td { text-align: center; padding-bottom: 10px; }
.offer-small .desc table td.small { font-size: 8pt; }
.offer-small .title { width: 258px; background: url('../images/offer-transparent.png'); padding: 2px 10px; position: absolute; top: 120px; left: 0; }
.offer-small .title strong { font-size: 9pt; color: #ffffff; }
.offer-small .title small { font-size: 8pt; color: #f2f0e4; }
.offer-small .title small strong { font-size: 8pt; color: #f2f0e4; }
.offer-small .view-offer { position: absolute; top: 160px; left: 150px; }
.view-offer { display: block; width: 120px; height: 44px; background: url('../images/button-view-offer.png'); }
.btnSendOrder { width: 260px; height: 75px; border: 0; background: url('../images/button-send-order.png'); cursor: pointer; }
.toLeft { float: left; margin-right: 25px; }
Html/smarty code:
{if $random}{foreach item=item from=$random}
<div class="offer-small">
<img src="{$smarty.const.APP_URL}/userfiles/photos/{if $item.item_photo}s_{$item.item_photo}{else}blank_small.jpg{/if}" alt="" />
<div class="desc">
<strong>{$item.item_name|truncate:30}</strong>
<p>{$item.item_short_description|truncate:120}</p>
<p align="right"></p>
</div>
<div class="title">
<strong>{$item.item_name|truncate:30}</strong><br/><small>Cena teraz: <strong>{$item.item_cost_now|money} zł</strong> zamiast <strong>{$item.item_cost_before|money} zł</strong></small><br/><br/>
<strong>OSZCZĘDZASZ <big>{$item.item_cost_before-$item.item_cost_now|money}</big> zł</strong>
</div>
</div>
{/foreach}{/if}
Tips are welcome too.
I mean I can handle making grid if someone will show me how to break this stupid list.
An easy way is to just float the divs of class .offer-small left:
.offer-small {
width: 278px;
height: 209px;
position: relative;
margin-bottom: 25px;
float:left;
}
As long as you have them all within a container element with a fixed width, they should fit next to each other nicely, wrapping to the next line automatically.
Related
I'm trying to overlap the text over the div below it. The problem is that I need it all in the bottom right of the page so it already has position: absolute.
This is what I currently have.
And this is what I'm trying to make it look like:
https://jsfiddle.net/7ow5p192/
body {
background-color: black;
}
.title {
color: white;
text-align: left;
}
.artist {
color: black;
font-size: 60px;
line-height: 60px;
}
.artist-container {
text-align: left;
width: 100%;
background-color: white;
display: block;
}
.nameContain {
font-weight: bold;
position: absolute;
display: block;
right: 0;
bottom: 0;
max-width: 50%;
font-size: 50px;
}
.nameContain2 {
position: relative;
}
<div class="nameContain">
<span class="title">Smells Like Teen Spirit</span>
<div class="artist-container"><span class="artist">Nirvana</span></div>
</div>
A simple text-align: right should do the trick.
body {
background-color: black;
}
.title {
color: white;
}
.artist {
color: black;
font-size: 60px;
line-height: 60px;
}
.artist-container {
width: 100%;
background-color: white;
display: block;
}
.nameContain {
font-weight: bold;
position: absolute;
display: block;
right: 0;
bottom: 0;
max-width: 50%;
font-size: 50px;
text-align: right;
}
<div class="nameContain">
<span class="title">Smells Like Teen Spirit</span>
<div class="artist-container"><span class="artist">Nirvana</span></div>
</div>
Im making a pricing page for my website but as I'm making my website responsive, (only when the page is less than 110 pixels wide),
* {
margin: 0;
padding: 0;
font-family: "Poppins", sans-serif;
}
#pricing {
height: 95vh;
width: 100vw;
background-color: #E5EDFB;
margin-top: none;
}
h1 {
color: #0E0A24;
padding-left: 8.75%;
padding-top: 5vh;
font-size: 300%;
}
h2 {
color: #0E0A24;
text-align: center;
margin-top: 4vh;
font-weight: 600;
font-size: 175%;
}
p {
color: #0E0A24;
text-align: center;
font-weight: 300;
}
span {
font-size: 120%;
font-weight: 400;
}
.smallTile {
background-color: white;
width: 23vw;
height: 65%;
border-radius: 15px;
}
.largeTile {
background-color: white;
width: 28vw;
height: 70%;
border-radius: 15px;
}
#photo {
margin-left: 8.75%;
position: relative;
top: 27%;
transform: translateY(-27%);
float: left;
}
#video {
margin-right: 8.75%;
position: relative;
top: 27%;
transform: translateY(-27%);
float: right;
}
#combo {
margin-right: 8.75%;
position: absolute;
left: 50%;
top: 60%;
transform: translate(-50%, -60%);
}
hr {
margin-top: 6%;
margin-bottom: 6%;
width: 20%;
position: relative;
left: 50%;
transform: translateX(-50%);
background-color: #0E0A24;
border: none;
height: 0.1px;
;
}
.topHR {
width: 50%;
margin-top: 4vh;
margin-bottom: 4vh;
height: 2px;
border-radius: 1px;
;
}
#comboHeader {
font-weight: 900;
font-size: 200%;
}
#media screen and (max-width: 1100px) {
body {
background-color: red;
}
.smallTile {
display: block;
position: relative;
width: 86vw;
height: 95vh;
}
.largeTile {
display: block;
position: relative;
width: 86vw;
}
#photo {}
#video {
margin-top: 100vh;
}
#combo {
margin-top: 100vh;
position: relative;
}
h1 {
margin-bottom: 20px;
}
}
<div id=p ricing>
<h1>Our Pricing:</h1>
<div class="smallTile" id="photo">
<h2>Photography<br>Plan</h2>
<hr class="topHR">
<p><span>0 - 10 Pictures</span><br>$100</p>
<hr>
<p><span>10 - 20 Pictures</span><br>$175</p>
<hr>
<p><span>20+ Pictures</span><br>$250</p>
</div>
<div class="smallTile" id="video">
<h2>Videography<br>Plan</h2>
<hr class="topHR">
<p><span>0 - 5 Videos</span><br>$100</p>
<hr>
<p><span>5 - 10 Videos</span><br>$150</p>
<hr>
<p><span>Edited Video</span><br>Additional $50</p>
</div>
<div class="largeTile" id="combo">
<h2 id="comboHeader">Combo<br>Plan</h2>
<hr class="topHR">
<p><span>Combined price of both plans</span><br>$50 Reduced</p>
<hr>
</div>
</div>
I noticed that the combo package text is at the bottom of the page instead of in the div where I placed it. Additionally, is it possible to change the order of the divs so that the combo package is last on the responsive site only? Thanks for your help in advance!
I noticed you did not specify the float value for the combo div. Add float to the combo styles as such:
#combo{
margin-right: 8.75%;
position: absolute;
left: 50%;
top: 60%;
transform: translate(-50%, -60%);
float: left;
}
I am trying to emulate this nutrition label format in CSS, but I can't get the shapes right at all. The best I can come up with is fiddling with border-radius, but that gives me more of a pill shape, and still not way to get the black cut-out shape at the bottom. Has anyone replicated such a nutrition label in CSS? Would anyone be willing to try? Any help would be greatly appreciated.
Here is a link to what I have so far: jsfiddle.net/f5jczunf/
#block {
border-radius:50%/10px;
background: #ccc;
padding: 20px;
width: 50px;
height: 100px;
border: 1px solid #000;
background-color:#FFF;
text-align:center;
}
.number {
font-weight:bold;
font-size:18pt;
text-align:center;
}
<div id="block">
<span class="number">150</span>
<br/>Calories
</div>
Maybe this small example can help.
.label {
position: relative;
width: 100px;
height: 140px;
text-align: center;
border: 1px solid #000;
border-radius: 100px/50px;
overflow: hidden;
}
.title {
display: inline-block;
margin-top: 30px;
}
.bottom {
position: absolute;
bottom: -10px;
left: 0;
right: 0;
height: 50px;
color: #fff;
line-height: 40px;
border-top: 1px solid #000;
border-radius: 100px/50px;
background-color: #000;
}
<div class="label">
<span class="title">Title</span>
<span class="bottom">Bottom</span>
</div>
https://jsfiddle.net/9xs2wcbL/1/
Here's my take on it. It does require some advanced, bleeding edge CSS, however.
#import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300');
body {
padding: 3em;
font-size: 16px;
font-family: 'Open Sans Condensed', sans-serif;
}
.label-list {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
}
.label-list .label-item {
text-align: center;
border: 1px solid;
position: relative;
border-radius: 2em / 0.65em;
padding: 0.2em 0.25em 1.5em;
min-width: 3.5em;
overflow: hidden;
margin: 0.1em;
z-index: 1;
background: white;
color: black;
}
.label-list .label-item h1 {
font-size: 3em;
line-height: 1em;
font-weight: 900;
margin: 0;
}
.label-list .label-item h1.smaller {
font-size: 1.75em;
margin-top: 0.5em;
}
.label-list .label-item h1 small {
font-size: 0.4em;
text-transform: none;
}
.label-list .label-item small {
font-size: 1em;
line-height: 1em;
font-weight: 900;
text-transform: uppercase;
}
.label-list .label-item span {
position: absolute;
bottom: 0.5em;
left: 0;
right: 0;
color: white;
font-size: 0.8em;
line-height: 1em;
}
.label-list .label-item span:before {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 0;
background: black;
z-index: -1;
border-radius: 40%;
transform-origin: center;
width: 100%;
height: 0;
padding-top: 100%;
margin: auto;
transform: rotate(45deg) translate(20%, 20%);
}
<div class="label-list">
<div class="label-item">
<h1>140</h1>
<small>Calories</small>
</div>
<div class="label-item">
<h1 class="smaller">1<small>g</small></h1>
<small>Sat Fat</small>
<span>5% DV</span>
</div>
</div>
I believe the only way to have this sort of shape in pure CSS is with a few overlapping shapes, something similar to the code below:
.wrapper {
position: relative;
height: 112px;
width: 80px;
overflow: hidden;
}
.rectangle,
.circle {
position: absolute;
box-sizing: border-box;
}
.rectangle {
height: 96px;
width: 80px;
top: 8px;
border-left: 1px solid black;
border-right: 1px solid black;
}
.circle {
width: 200px;
height: 200px;
left: -60px;
border-radius: 200px;
border: 1px solid black;
}
.top {
top: 0;
}
.bottom {
bottom: 0;
}
<div class="wrapper">
<div class="circle top"></div>
<div class="rectangle"></div>
<div class="circle bottom"></div>
</div>
https://jsfiddle.net/dylanstark/01hck5dv/
here my approach for that. I'm using before and after pseudo-elements.
before contains black bg with border-radius and it is overflowing the main #block which has overflow: hidden;.
aftercontains text that is coming from data-text attribute of #block
#block {
border-radius: 50%/10px;
background: #ccc;
padding: 20px;
width: 50px;
height: 100px;
border: 1px solid #000;
background-color: #FFF;
text-align: center;
position: relative;
overflow: hidden;
}
#block:before {
display: block;
content: " ";
position: absolute;
bottom: -15px;
left: 0;
width: 100%;
height: 50px;
border-radius: 50%;
background: black;
z-index: 0;
}
#block:after {
display: block;
content: attr(data-label);
position: absolute;
bottom: 5px;
color: white;
text-align: center;
z-index: 1;
}
.number {
font-weight: bold;
font-size: 18pt;
text-align: center;
}
<div id="block" data-label="5% DY">
<span class="number">150</span>
<br/>Calories
</div>
I'm trying to position a text on a contentslider. Sadly it seems like nothing could change the text margin to what I want it to be.
Actually it does look like: https://gyazo.com/dd9ef0f78b5caaf7a582d9825955284b
Live Preview: http://projects.helpful.ninja/BlackzDesignz/Template_1/index.php
This is how I want it to look: https://gyazo.com/631efa979e78732c2c817fb2abf08716
Css code:
#fc_slider_wrap,
#fc_slider_wrap * {
padding: 0;
margin: 0;
outline: 0;
}
#fc_slider_wrap {
width: 755px;
height: 239px;
margin: auto;
font-family: Verdana, Arial;
color: #fff;
font-size: 11px;
overflow: hidden;
position: relative;
}
#fc_slider_img {
width: 550px;
height: 239px;
z-index: 50;
clip: rect(0 0 550px 287px);
float: left;
overflow: hidden;
}
#fc_slider_slide > div > span {
display: none;
}
#fc_slider_slide {
}
#fc_slider_slide > div {
border-radius: 2px;
overflow: hidden;
}
#fc_slider_slide > div > img {
display: block;
border-radius: 2px;
}
#fc_slider_nav {
width: 203px;
height: 287px;
float: right;
}
#fc_slider_nav > div {
height: 47px;
width: 198px;
background: url(../fc_slider/img/nav_opt_bg.png) repeat-x left top transparent;
padding-right: 5px;
margin-bottom: 1px;
cursor: pointer;
}
#fc_slider_nav > div.active {
background-image: url(../fc_slider/img/nav_opt_bg_h.png);
color: #212121;
}
#fc_slider_nav > div > img {
float: left;
margin: 2px;
margin-top: 11px;
}
#fc_slider_nav > div > span {
line-height: 15px;
padding: 2px 12px 2px 0;
text-align: left;
}
#fc_slider_caption {
position: absolute;
padding: 10px;
bottom: 0;
width: 530px;
background: url(../fc_slider/img/black_semi.png) repeat left top transparent;
float: left;
border-radius: 2px;
z-index: 50;
}
#fc_slider_pause {
display: none;
position: absolute;
width: 18px;
height: 18px;
left: 4px;
top: 4px;
z-index: 50;
}
Does anyone have a idea, what I'm doing wrong? Apreciate any kind of help.
Adding Top:5px; position:relative; in #fc_slider_nav > div > span should make it work
I'm trying to make a timeline in pure CSS however I seem to be running into some problems.
When I try to set the timeline div as overflow-x: scroll it still scrolls on the y access.
This is what I've got:
#timeline {
height: 500px;
width: auto;
margin: 0;
background: red;
}
.event {
height: 500px;
}
.founded {
width: 400px;
float: left;
background: blue;
}
.grant {
width: 800px;
background: yellow;
}
<ol id="timeline">
<li class="event founded"></li>
<li class="event grant"></li>
</ol>
I just want each additional entry to follow the previous one and for it all be scroll-able horizontally. If anyone could point me in the right direction that would be amazing.
Thanks.
I literally JUST had to make one of these. This is what I came up with:
body {
padding: 25px;
font-family: sans-serif;
}
.timeline {
white-space: nowrap;
overflow-x: scroll;
padding: 30px 0 10px 0;
position: relative;
}
.entry {
display: inline-block;
vertical-align: top;
background: #13519C;
color: #fff;
padding: 10px;
font-size: 12px;
text-align: center;
position: relative;
border-top: 4px solid #06182E;
border-radius: 3px;
min-width: 200px;
max-width: 500px;
}
.entry img {
display: block;
max-width: 100%;
height: auto;
margin-bottom: 10px;
}
.entry:after {
content: '';
display: block;
background: #eee;
width: 7px;
height: 7px;
border-radius: 6px;
border: 3px solid #06182E;
position: absolute;
left: 50%;
top: -30px;
margin-left: -6px;
}
.entry:before {
content: '';
display: block;
background: #06182E;
width: 5px;
height: 20px;
position: absolute;
left: 50%;
top: -20px;
margin-left: -2px;
}
.entry h1 {
color: #fff;
font-size: 18px;
font-family: Georgia, serif;
font-weight: bold;
margin-bottom: 10px;
}
.entry h2 {
letter-spacing: .2em;
margin-bottom: 10px;
font-size: 14px;
}
.bar {
height: 4px;
background: #eee;
width: 100%;
position: relative;
top: 13px;
left: 0;
}
<div class="bar"></div>
<div class="timeline">
<div class="entry">
<h1>1990</h1>
<h2>Entry Title</h2>
<img src="http://dummyimage.com/300x200/000/fff" /> Here's the info about this date
</div>
<div class="entry">
<h1>1995</h1>
Here's the info about this date
</div>
<div class="entry">
<h1>2000</h1>
Here's the info about this date
</div>
<div class="entry">
<h1>2005</h1>
Here's the info about this date
</div>
<div class="entry">
<h1>2010</h1>
Here's the info about this date
</div>
</div>
You can refer the below link also
#import url(https://fonts.googleapis.com/css?family=Dosis:500);
body{
background: #F1F1F1;
}
.container{
width: 1200px;
margin: auto;
}
.timeline{
counter-reset: year 2016;
position: relative;
}
.timeline li{
list-style: none;
float: left;
width: 33.3333%;
position: relative;
text-align: center;
text-transform: uppercase;
font-family: 'Dosis', sans-serif;
}
ul:nth-child(1){
color: #4caf50;
}
.timeline li:before{
counter-increment: year;
content: counter(year);
width: 50px;
height: 50px;
border: 3px solid #4caf50;
border-radius: 50%;
display: block;
text-align: center;
line-height: 50px;
margin: 0 auto 10px auto;
background: #F1F1F1;
color: #000;
transition: all ease-in-out .3s;
cursor: pointer;
}
.timeline li:after{
content: "";
position: absolute;
width: 100%;
height: 1px;
background-color: grey;
top: 25px;
left: -50%;
z-index: -999;
transition: all ease-in-out .3s;
}
.timeline li:first-child:after{
content: none;
}
.timeline li.active{
color: #555555;
}
.timeline li.active:before{
background: #4caf50;
color: #F1F1F1;
}
.timeline li.active + li:after{
background: #4caf50;
}
<h1>DevelopersTips</h1>
<div class="container">
<ul class="timeline">
<li class="active">Bacon</li>
<li>Rib</li>
<li>Sausage</li>
</ul>
</div>