I'm trying to acomplish this:
This is my code:
In the view I add this to the title:
<ion-nav-title>
<div class="progress">
<div class="active"><div>Selección</div></div>
<div><div>Destino</div></div>
<div><div>Pago</div></div>
</div>
</ion-nav-title>
And I use this css:
.bar {
height: 60px !important;
}
.has-header {
top: 60px !important;
}
.progress {
line-height: 4;
display: table;
table-layout: fixed;
width: 100%;
text-align: center;
}
.progress > div {
display: table-cell;
}
.progress > div > div {
color: #ddd;
border-top: 2px solid #ddd;
padding-left: 5px;
padding-right: 5px;
padding-top: 2px;
margin-left: 5px;
margin-right: 5px;
font-size: 50%;
text-transform: uppercase;
font-weight: normal;
}
.progress > div.active > div {
color: #fff;
border-top-color: #fff;
}
You can play with this in codepen (please fork):
http://codepen.io/anon/pen/NqLvMN
But I get this:
And if I change the .progress > div > div display to inline I get this:
Help!
Depending on the first image, I have made the following
CSS changes
.progress > div {
display: inline-block; /* Horizontal alignment */
line-height: 15px; /* Vertical alignment */
width: 33%; /* Equal width 3 columns */
}
Updated Codepen
Related
I have a parent container, with several child containers. Here is the styling of each:
#media print {
#par-container {
width: 100% !important;
position: absolute !important;
top: -10px !important;
left: -25px !important;
margin-left: 5px !important;
margin-right: 5px !important;
}
}
--
.child-container {
margin-top: 50px;
width: 100%;
border: solid;
border-color: grey;
border-radius: 5px;
border-radius: 5px;
display: block;
}
--
<div id="par-container">
<div className="child-container">stuff1</div>
<div className="child-container">stuff2</div>
<div className="child-container">stuff3</div>
<div className="child-container">stuff4</div>
</div>
When I try to print the document, the text inside of the child container overflows the height of the child container, by overflowing the bottom of the container.
Because I used width: 100% !important in par-container, there is no overflow beyond the width. That is fine.
I wish I could show a screenshot of it, but I cannot due to privacy.
This is the solution I can provide from what I understood from your question.
#media print {
#par-container {
width: 100% ;
position: absolute ;
padding: 0 20px;
display: flex;
flex-direction: column;
}
}
.child-container {
margin-top: 50px;
width: 100%;
border: 2px solid grey;
border-radius: 5px;
}
<div id="par-container">
<div class="child-container">stuff1</div>
<div class="child-container">stuff2</div>
<div class="child-container">stuff3</div>
<div class="child-container">stuff4</div>
</div>
your page will be owerflow from top of page in print because of your top -10px code in #par-container
if you remove this code its will be fix and i recommend give a
width 90 or 95% when its have to print because the printed pages are smaller
.child-container {
> margin-top: 50px;
> width: 100%;
> border:5px solid gray;
> border-radius: 5px;
> }
>
> #media print {
> #par-container {
> width: 100%;
> position: absolute;
> top: -10px;
> /* left: -25px; */
> margin-left: 5px;
> margin-right: 5px;
> }
> .child-container {
> width: 90%;
> }
> }
like this ?
This question already has answers here:
Create line after text with css
(8 answers)
CSS technique for a horizontal line with words in the middle
(34 answers)
Closed 1 year ago.
I am trying to get a line through the a tag for decorative effect. The line should span the entire width but not go through content of the tag itself.
This is what I want,
This is what I've got so far.
a {
background: none;
}
a::after {
content: "";
border: 3px solid #000;
display: block;
position: relative;
top: -50%;
}
<a class="fw-bold" href="">Explore Services</a>
And here is the jsfiddle of the above code https://jsfiddle.net/68fkvhcw/
Why is the position relative with negative top margin not working?
This would be a possible way to do that. Wrap the a tag all around the elements, make that a flex container and use settings similar to those of my snippet below:
html,
body {
margin: 0;
}
a.link1:link,
a.link1:visited {
text-decoration: none;
font-size: 24px;
color: green;
}
.link1 {
display: flex;
width: 100%;
justify-content: space-between;
align-items: center;
background: #dfd;
padding: 6px 10px;
}
.text1 {
flex-grow: 0;
display: inline-block;
}
.line {
height: 2px;
background: #fa0;
flex-grow: 1;
margin: 0 20px 0;
}
<a class="link1" href="#">
<div class="text1">Explore all Services</div>
<div class="line"></div>
</a>
I have created a code snippet as you want. But here is a suggestion that doesn't use styles directly on <a> tag else it will affect all your <a> tags on the page. So I have defined a style here .my_underline
You can adjust the thickness of the line and the color of the font.
.my_underline {
overflow: hidden;
text-decoration: none;
font-size: 2rem;
font-weight: bold;
color:aqua;
}
.my_underline:after {
content:"";
display: inline-block;
height: 0.5em;
vertical-align: bottom;
width: 100%;
margin-right: -100%;
margin-left: 10px;
border-top: 1px solid black;
}
<a class="fw-bold my_underline" href="">Explore all Services</a>
Use theses styles ,
a {
color: #000000;
font-family: 'collegeregular';
font-size: 20px;
margin-left: 5px;
position: relative;
width: 93%;
}
a::after {
position: absolute;
content: "";
height: 2px;
background-color: #242424;
width: 50%;
margin-left: 15px;
top: 50%;
}
<a class="fw-bold" href="">Explore Services</a>
I would like to push the text down to be centered in the green part, but I cannot seem to figure it out. I've been messing around with it for some time, but I'm still a novice. Any help would be appreciated. I've added the HTML and CSS below.
.beerimgcontainer {
width: 300px;
height: 400px;
margin-bottom: 20px;
margin-right: 20px;
display: inline-block;
position: relative;
text-align: center;
margin-right: 10px;
overflow: hidden;
max-height: 400px;
}
.beerimgcontainer a {
text-decoration: none;
}
.beerimgcontainer span {
text-decoration: none;
font-size: 23px;
font-family: champagne;
color: black;
}
.beerimgcontainer:hover {
background: #165a11;
color: white;
box-shadow: 0px 0px 0px 2px #3c8837;
box-sizing: border-box;
}
.beerimgcontainer:hover span {
color: white;
}
<div class="beerimgcontainer">
<a href="mug.html">
<img src="images/text2.png" class="positionimg" alt="Mug">
<span>Mug</span>
</a>
</div>
img and span are inline elements. They are initially next to each other. Since your image covers the whole width (that's available; 300px on parent div), it pushes the span down. Margin on the span wouldn't work.
What you should do is to set display: block on the span and then set a margin:
.beerimgcontainer span {
display: block;
margin-top: 15px;
}
JSFiddle
I am trying to make a responsive tweet button with the twitter bird floated left, the text next to it and centered.
My code is:
.flex-rectangle {
float: left;
margin: 0 5px;
max-width: 500px;
text-align: center;
width: 200%;
background: #FFFFFF;
border: 7px solid #00A5EF;
}
/* Styles Twitter Bird png */
.image-wrapper {
padding-top: 10%;
position: relative;
width: 100%;
padding-bottom: 10%;
}
img .tweet {
float: left;
}
/* Tweet This: */
.span-content {
display: block;
color: #00A5EF;
}
.span {
display: block;
text-align: center;
font-family: OpenSans;
font-size: 36px;
color: #00A5EF;
}
<div class="flex-rectangle">
<div class="image-wrapper">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/281152/Twitter_bird_logo_2012.svg" class="tweet" />
</div>
</div>
<div id="buttons">
<div class="span-content">
<span>Tweet This</span>
</div>
</div>
CSS
I've tried pretty much everything under the sun.
I can't seem to get the rectangle to shrink and widen when I resize the page or go into Dev Tools and use the mobile device pane.
I understand CSS less than I do JavaScript at this point. Not sure if I should use flexbox in this instance or how I would do that.
Here is the CodePen
you can use quotes using pseudo element ::before and a::after
Thank you. This works for the most part. However I can't get the
twitter bird to float left and the text to be beside it. Any
suggestions?
I used flexbox the text will be next to the twitter button on desktop view, and below on mobile view.
#import url(https://fonts.googleapis.com/css?family=Open+Sans|Satisfy);
/*Styles for whole page */
img {
max-width: 100%;
border: 7px solid #00a5ef;
}
#page-wrap {
display: flex;
flex-wrap: wrap;
justify-content: center
}
h1 {
font-weight: bold;
text-transform: uppercase;
font-size: 30px;
margin-top: 50px;
width: 300px;
line-height: 1;
font-family: 'Open Sans', sans-serif;
color: #1485C7;
text-align: center;
letter-spacing: 0;
}
/* On: */
h1 .center {
text-transform: capitalize;
font-weight: normal;
font-family: "Satisfy";
vertical-align: text-bottom;
line-height: 10px;
color: #1485C7;
}
h1 .bigger {
font-size: 46px;
color: #1485C7;
display: block
}
/* Rectangle 1: */
.flex-rectangle {
background: #fff none repeat scroll 0 0;
flex: 1 15%;
margin: 0 15%;
max-width: 300px;
padding: 10px;
position: relative;
quotes: "\201C""\201D";
text-align: center;
top: 0;
}
.flex-rectangle::before {
color: #00a5ef;
content: open-quote;
font-family: Georgia;
font-size: 25vw;
left: -15vw;
position: absolute;
top: 50%;
}
.flex-rectangle::after {
color: #00a5ef;
content: close-quote;
font-family: Georgia;
font-size: 25vw;
position: absolute;
right: -15vw;
top: 50%;
}
.text {
align-self: flex-end
}
.span-content {
display: inline-block;
color: #00A5EF;
margin: 0 auto;
padding: 5px;
border: 3px solid #00A5EF;
}
<div id="page-wrap">
<div class="flex-rectangle">
<div class="heading">
<h1>Random Quotes<span class="center">On</span><span class="bigger">Design</span></h1>
</div>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/281152/Twitter_bird_logo_2012.svg" class="tweet" />
<div id="buttons">
<div class="span-content">
Tweet This
</div>
</div>
</div>
<div class="text">
<h1>Random Quotes</h1>
</div>
</div>
you have to place the bird and the text to one div and code for the image element in order to code for the image part you have to call first the first parent div and other div in one code where the image element is located .flex-rectangle .image-wrapper imgto edit the code for image. and also you have to insert the html code for <span>Tweet This</span> inside the .image-wrapper to make the image go left and your text go center.
CSS CODE :
.flex-rectangle {
float: left;
margin: 0 5px;
max-width: 500px;
text-align:center;
width: 200%;
background: #FFFFFF;
border: 7px solid #00A5EF;
}
/* Styles Twitter Bird png */
.image-wrapper {
padding-top: 10%;
position: relative;
margin: auto;
max-width: 125;
max-height: 50px;
width: 100%;
padding-bottom: 15%;
}
.flex-rectangle .image-wrapper img {
float: left;
max-width: 50px;
max-height: 50px;
width: 100%;
}
/* Tweet This: */
.span-content {
display: block;
text-align: center;
color: #00A5EF;
}
.span {
display: block;
text-align: center;
font-family: OpenSans;
font-size: 36px;
color: #00A5EF;
}
HTML Code:
<div class="flex-rectangle">
<div class="image-wrapper">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/281152/Twitter_bird_logo_2012.svg" class="tweet"/>
<div id="buttons">
<div class="span-content">
<span>Tweet This</span>
</div>
</div>
</div>
</div>
I have a container that usually has a width of 400px. When the screen gets smaller, its width is reduced to 300px. These two values are static and don't change.
I have 3 buttons within this container. At the wider width, I'd like to have 2 side by side and the 3rd one on the line below. All of them are centered.
When the container is compressed, I'd like to have all the buttons stack on top of each other centered.
I can get it at the wide width but can't get it at the narrow width.
HTML:
<div id="varied-width">
<div class="pg-sp2 prompt-gate">Did you find what you were looking for?
<div class="pg-3-buttons">
<button class="prompt-gate-button" onclick="PromptGate_sp2(1)">Yes</button>
<button class="prompt-gate-button" onclick="PromptGate_sp2(0)">No, you suck</button>
</div>
<button class="prompt-gate-button" onclick="PromptGate_sp2(2)">No, I need help.</button>
</div>
</div>
CSS:
body {
width: 400px;
}
.prompt-gate {
margin-top: 25px;
margin-bottom: 15px;
background-color: #fefab1;
border: 1px solid #ffd532;
padding: 10px;
text-align: center;
}
.prompt-gate-button {
background-color: #0E80B4;
color: white;
font-size: 12px;
height: 30px;
width: 72px;
border: none;
margin: 15px 25px;
outline: none;
font-style: normal;
cursor: pointer;
}
.pg-3-buttons {
display: inline-block;
margin-top: 10px;
}
.pg-3-buttons .prompt-gate-button {
float: left;
}
.pg-sp2 button {
margin: 5px 15px;
width: 120px;
padding: 10px 0px;
}
.pg-sp2 > button {
}
.small-width {
width: 300px;
}
Fiddle: http://jsfiddle.net/je821vz9/10/
Used flex layout instead: http://jsfiddle.net/je821vz9/7/
Added this to .prompt-gate style and then cleaned up some of the conflicting HTML and CSS.
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
You could use a media query and have the viewport size decided on how to display the elements.
I added the following css to your body:
body {
max-width:400px;
min-width:300px;
}
We can then add a media query to adjust how the items are laid out:
#media (max-width: 300px) {
div.pg-3-buttons .prompt-gate-button {
display:block;
float:none;
}
}
See an updated version of your example and scale down the width of your browser to see the items pop in to place at 300px.
Somehow figured it out... removed floats and moved around the button HTML so that they were all in the same container.
http://jsfiddle.net/je821vz9/19/
<div id="varied-width">
<div class="pg-sp2 prompt-gate">Did you find what you were looking for?
<div class="pg-3-buttons">
<button class="prompt-gate-button" onclick="PromptGate_sp2(1)">Yes</button>
<button class="prompt-gate-button" onclick="PromptGate_sp2(0)">No, you suck</button>
<button class="prompt-gate-button" onclick="PromptGate_sp2(2)">No, I need help.</button>
</div>
</div>
</div>
<style>
body {
width: 400px;
}
.prompt-gate {
margin-top: 25px;
margin-bottom: 15px;
background-color: #fefab1;
border: 1px solid #ffd532;
padding: 10px;
text-align: center;
}
.prompt-gate-button {
background-color: #0E80B4;
color: white;
font-size: 12px;
height: 30px;
width: 72px;
border: none;
margin: 15px 25px;
outline: none;
font-style: normal;
cursor: pointer;
}
.pg-3-buttons {
margin-top: 10px;
}
.pg-sp2 button {
margin: 5px 15px;
width: 120px;
padding: 10px 0px;
}
</style>