I tried this: https://jsbin.com/qidesiqada/edit?html,output
also pasted here:
<html>
<head>
<style>
p.two {
float: right;
color: white;
font-family: Century Gothic, sans-serif;
font-size:20px;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
p.one {
float: left;
font-family: Century Gothic, sans-serif;
color: white;
font-size:27px;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
p.three {
text-align: center;
margin-top: 12px;
font-family: Century Gothic, sans-serif;
color: white;
font-size:20px;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
#container {
width:45px;
}
p { margin: 0; }
</style>
</head>
<body>
<div id="container">
<p class="one">1</p><p class="two">20</p><br>
<p class="three">3</p></div>
</body>
</html>
however, when 1 element is large than the other, it shoves the other ones out of the way. Note how the big 1 shoves the little 3 slightly to the right. This is what I want to avoid
I want each element to be exactly in the same place no matter the size of the font or the size of the others. So it would seem that position-absolute would do this, right? But no, When I use position-absolute on that bottom element, it doesn't center in the div. When I use tricks like transform: translate(-50%, -50%); it move it half way across the screen as though its ignoring the fact that it exists inside of the container div.
Any help on this? Thanks!
this is where the numbers are supposed to fit. You'll notice that even here they are slightly off, but you can get the general idea. The "pie chart" on the back is not part of the desired affect. I simply wish to show that each number should be positioned in one of the quadrants.
There's a few things going on in your question so I'll answer what I think will be the most help to you (also not entirely sure what you're doing).
The reason #3 is centering to the body instead of the div is because absolute position is relative to the first dom it finds up the tree with absolute or relative positioning. Since the parent dom element has the default static positioning it is positioned relative to the body.
css-
#container { position: relative; }
jsbin-
https://jsbin.com/hamepicage/1/edit?html,output
Edit:
Closer what what you're trying to achieve. Use absolute position on all elements so their bounding boxes don't collide. Instead of float: left; use:
left: 0;
Instead of float: right; use:
right: 0;
And for the centering you can calculate the center if you know the width.
calc(50% - 12px);
Or make it width: 100%; and center align the text.
text-align: center;
width: 100%;
Also, don't forget to give your container div a height.
https://jsbin.com/tovopiseqe/1/edit?html,output
Related
I am trying to apply a style to a like of HTML text. What I want is basically:
What I get is basically:
As you can see, the first line is indented, but not any other line. So far, I have the text inside of a <span>, which is nested inside of a <div>.
.slide-text .text {
background-color: rgba(0, 0, 0, .6);
color: #FFF;
padding: 8px 17px;
}
.slide-text .slide-title {
font-family: "Titillium Web", Arial, Helvetica, sans-serif;
font-weight: 700;
}
.slide-text .slide-content {
font-family: "Open Sans", Arial, Helvetica, sans-serif;
font-weight: 500;
}
My HTML code is:
<div class="slide-text">
<div class="slide-title"><span class="text">[TITLE]</span>
</div>
<div class="slide-content"><span class="text">[TEXT]</span>
</div>
</div>
They work great, as long as neither the title or the content are more than one line. As soon as they go over two or more lines, the span loses its inner padding. Changing the inner span to display: inline-block; gives it a block display as soon as it goes into two lines. Is there a way to get the effect I am looking for?
The CSS guru Chris Coyier has an article on CSS-Tricks listing several methods to solve this. One method is the one with box-shadow. It is already mentioned as an answer, but it needs some more love to work in modern Firefox :).
.multi-line-padded {
background: black;
color: white;
/* For the top and bottom padding */
padding: 0.5em 0;
/* Text height (1.0) + compensate for padding (0.5 * 2) */
line-height: 2;
/* For the left and right padding */
/* Vendor prefixes FIRST */
-webkit-box-shadow: 1em 0 0 black, -1em 0 0 black;
-moz-box-shadow: 1em 0 0 black, -1em 0 0 black;
box-shadow: 1em 0 0 black, -1em 0 0 black;
/* Firefox defaults to `box-decoration-break: split`, we need `clone` */
box-decoration-break: clone;
}
<p><span class="multi-line-padded">You think water moves fast? You should see ice. It moves like it has a mind. Like it knows it killed the world once and got a taste for murder.</span></p>
<p style="text-align: right;"><span class="multi-line-padded">Samuel L. Ipsum</span></p>
Try following the example in the best answer to this similar question. It essentially suggests using a box-shadow to create padding.
span {
background:#ff0;color:#000;
box-shadow:0.2em 0 0 #ff0,-0.2em 0 0 #ff0;
-moz-box-shadow:0.2em 0 0 #ff0,-0.2em 0 0 #ff0;
-webkit-box-shadow:0.2em 0 0 #ff0,-0.2em 0 0 #ff0;
}
will indent all of your text equally and add yellow padding (change the #ff0 to any HTML color value you need). However, you will have to reformat the existing code, since it will indent further than the shadow.
You can try to use
style='width: fit-content;'
For more info: https://developer.mozilla.org/en-US/docs/Web/CSS/fit-content
I want to modify my html/css to obtain something like these modification in red, adding two stylized quote, and adapt image to the size of my <blockquote></blockquote> element.
My html is
<img src="presentation-images/bernardlee.jpg" style="width:300px";
class = "author"/>
<blockquote> [...] <mark>The project started with the philosophy that
much academic information should be freely available to anyone.</mark>
It aims to allow information sharing within internationally dispersed
teams, and the dissemination of information by support groups. -- Tim
Berners-Lee (1991)</blockquote>
My css :
mark {
background-color: #EBEBE4;
color: black;
}
.author
{
float:left;
clear:both;
margin:8px 8px 8px 8px;
}
blockquote {
display: block;
margin: 1.5em 0 1.5em -1.5em;
padding: .75em .5em .75em 1em;
background: #fff;
font-family: 'Crimson Text';
border-left: 0.5em solid green;
font-size: 0.8em;
font-style: italic;
line-height: 1.5;
-webkit-box-shadow: 0 0 5px rgba(20,20,20,0.5);
-moz-box-shadow: 0 0 5px rgba(20,20,20,0.5);
box-shadow: 0 0 5px rgba(20,20,20,0.5);
}
You can see fiddle here : http://jsfiddle.net/h6m80gqb/
As you tagged this HTML5 and even awarded a bounty on it I decided to have a play with this myself, despite my solution ending up with the same weakness as Clint Brown's answer has, but at least I am not using tables in my css and my quotes are a bit more stylized :P .
The DOM structure
<div class="quote">
<blockquote> [...] <mark>The project started with the philosophy that
much academic information should be freely available to anyone.</mark>
It aims to allow information sharing within internationally dispersed
teams, and the dissemination of information by support groups. -- Tim
Berners-Lee (1991)</blockquote>
</div>
Is what I ended up with, if you need to include the image url in the generated HTML (as you likely will), you will need to put a separate tag for that as well.
Getting the image to adapt to the size of the box
Although flexible box model is a bit overkill here, it works splendidly none the less. A simple display:flex; on the container and flex: 0 0 20%; on the image element will cause it to get the height of the container and as the height of the container is defined by the amount of text in the <blockquote> this means the image element is adapting to the <blockquote>. Next all you need is setting the image as a background and either background-size:cover; or background-size:contain; for the image (if you choose contain you would want to add background-repeat:no-repeat; background-position:right; as well).
.quote{
display:flex;
box-shadow: 0 0 5px rgba(20,20,20,0.5);
border-left: 0.5em solid green;
margin:10px;
}
div:before{
content:'';
display:block;
flex: 0 0 30%;
padding-left:0.5em;
background:url('http://www.enlactualidad.com/wp-content/uploads/2013/03/Tim-Berners-Lee.jpg');
background-size:cover;
background-position:center;
}
The quotes
As you were talking about stylized quotes I believe you wanted more than just inserting the relevant character, so instead you can float the first quote with a big font size and inline the second to give the following final look
Playing around with fonts and stuff could still greatly enhance the look of everything, but this does bring the point across.
blockquote:before,blockquote:after{
display:block;
font-size:60px;
height:0.5em;
overflow:hidden;
position:relative;
top:-0.15em;
color:red;
margin-bottom:-0.15em;
}
blockquote:before{
float:left;
padding-right:10px;
content:'“';
}
blockquote:after{
content:'”';
display:inline-block;
padding-left:10px;
vertical-align:top;
}
The 'flaw' in this answer
Just like Brown's answer the height adapts to the text as required, however the width is fixed which is somehow 'solved' by the image being partially covered. A solution that would adapt both the width and the height would quite definitely require Javascript as it is sort of circular dependency (by changing the width, the height of the blockquote changes, thus the width of the height of the image changes, thus the width changes, which can be resolved, but not in HTML/CSS).
Trickier than I first thought using only CSS. This is the approach I tried but it's not quite there yet -
blockquote {
display: table;
margin: 1.5em 0 1.5em -1.5em;
padding: .75em .5em;
font-family: 'Crimson Text';
border-left: 0.5em solid green;
font-size: 0.8em;
font-style: italic;
line-height: 1.5;
-webkit-box-shadow: 0 0 5px rgba(20,20,20,0.5);
-moz-box-shadow: 0 0 5px rgba(20,20,20,0.5);
box-shadow: 0 0 5px rgba(20,20,20,0.5);
}
blockquote .image {
display: table-cell;
width: 20%;
}
blockquote .quote {
margin-left: 10px;
}
blockquote .quote:before,
blockquote .quote:after {
content: '"';
color: red;
font-size: 1.6em;
line-height: 0;
vertical-align: middle;
}
blockquote .quote:after {
display: inline;
}
mark {
background-color: #EBEBE4;
color: black;
}
<blockquote>
<div class="image" style="background: url('http://www.enlactualidad.com/wp-content/uploads/2013/03/Tim-Berners-Lee.jpg') no-repeat center right; background-size: auto 100%;"></div>
<div class="quote">[...] <mark>The project started with the philosophy that
much academic information should be freely available to anyone.</mark>
It aims to allow information sharing within internationally dispersed
teams, and the dissemination of information by support groups. -- Tim Berners-Lee (1991)</div>
</blockquote>
I would move the <img> tag into the <blockquote> tag and remove the style='' attribute.
I modified the CSS like this:
mark {
background-color: #EBEBE4;
color: black;
}
.author {
float:left;
clear:both;
margin:8px 8px 8px 8px;
}
blockquote {
position:absolute;
display: block;
margin: 1.5em 0 1.5em -1.5em;
padding: .75em .5em .75em 1em;
background: #fff;
font-family:'Crimson Text';
border-left: 0.5em solid green;
font-size: 0.8em;
font-style: italic;
line-height: 1.5;
-webkit-box-shadow: 0 0 5px rgba(20, 20, 20, 0.5);
-moz-box-shadow: 0 0 5px rgba(20, 20, 20, 0.5);
box-shadow: 0 0 5px rgba(20, 20, 20, 0.5);
width:100%;
height:100px;
padding-bottom:15px;
}
blockquote img {
height:100%;
width:auto;
}
To get special " marks, you could have the quotes in a <span> tag and style them appropriately.
I am attempting to create a style that applies a background color to header text. This is simple enough by including an inline element within my header, but problems arise when there is a line wrap because the left padding is only applied to the first line of text. To solve this issue I am applying a left-border to my header tags, which properly maintains left padding during line wraps. However, I'm having serious issues matching the left-border height with the inline element background across browsers. I get it matched up in Chrome/Safari, and it's off in Firefox, etc. I've created a fiddle to demonstrate:
http://jsfiddle.net/spidercoder/4KJn2/1/
My approach is:
HTML:
<h1><span>Lorem ipsum dolor sit amet consectetur adipiscing elit.</span></h1>
CSS:
h1{
color: white;
text-transform: uppercase;
font-family: sans-serif;
font-size: 34px;
line-height: 44px;
border-left: 10px solid black;
padding: 8px 0 7px 0;} // This tweaks the height of the left-border
h1 span{
white-space: pre-wrap;
background: black;
padding: 10px 10px 10px 0;}
I've attempted several different approaches, but unfortunately nothing is working. This seems like a fairly simple effect to pull off, but I have been unable to properly match the height of the border with the span background across browsers, which ruins the effect.
Does anyone have any ideas on how to pull this off so it works across browsers? An approach that doesn't require the left-border would probably be best, so that we don't have to match element heights.
Thanks for any suggestions!
Add to the span:
box-shadow: 10px 0 0 black, -10px 0 0 black;
Or Just:
box-shadow: -10px 0 0 black;
Used this myself after finding it here:
http://css-tricks.com/multi-line-padded-text/
There are many other methods by which this can be done listed there.
The problem is that the span is overflowing the h1 by a pixel or so. One easy way around this is to add:
overflow: hidden;
to the h1 style.
Demo on jsFiddle.
HTML
<div class="padded-multiline">
<h1><span>Lorem ipsum dolor sit amet consectetur adipiscing elit.</span></h1>
</div>
CSS
.padded-multiline {
line-height: 1.3;
padding: 2px 0;
border-left: 20px solid #000;
width: 400px;
margin: 20px auto;
}
.padded-multiline h1 {
background-color: #000;
padding: 4px 0 5px;
color: #fff;
display: inline;
margin: 0;
}
.padded-multiline h1 span {
position: relative;
left: -10px;
}
Use margin-left instead of a border-left.
h1 {
font-size: 3em;
line-height: 1em;
margin-left: 15px;
}
h1 span {
background: rgb(241,241,241);
box-shadow: 15px 0 0 rgb(241,241,241), -15px 0 0 rgb(241,241,241);
}
i made a demo http://jsfiddle.net/pa8J8/
I have a page with an image on the left side, and text on the right. When the browser window is resized, or a smaller resolution is used, the text goes behind the image. I want the text to always be beside of the image, and not go behind it.
Any suggestions? http://jsfiddle.net/TYpCq/ (The layout on jsfiddle is a bit off. Nevermind this, I just need to know how to prevent the text going behind the image)
HTML:
<div id="indishopmain">
<p><strong>Test shop image</strong> by <strong>no one</strong></p>
<div id ="canvasshopwrap">
<div id="canvasshophead">
<p>Blabla</p>
</div>
<div id="canvasshoptext"</p>
<p>The high-quality print on a <span style="color:#01A07E;font-family:Cusmyrb;">stretched canvas</span> lets the artwork just pop of the wall, it’s almost magical. It’s easy to hang up and will keep it’s color brillance as well as the shape for a long time. We are sure, you will love it forever. Note: the size 20 x 20cm comes with a complementary easel.</p>
</div>
</div>
<div id="indishopimg">
<img src="frontgallery/1.jpg" alt="gallery image 1" width="500px" />
</div>
</div>
CSS:
#indishopmain {
width:100%;
padding:0em;
}
#indishopmain p {
text-align:center;
font-family:Logo;
color:#343234;
margin-top:4em;
font-size:90%;
}
#indishopimg img {
margin-top:-11.9em;
margin-left:10%;
-moz-box-shadow: 5px 5px 10x #000000;
-webkit-box-shadow: 5px 5px 10px #000000;
box-shadow: 5px 5px 10px #000000;
}
#canvasshophead {
display:inline-block;
width:11em;
background-color:#5020B8;
height:2em;
border-radius:3px;
-moz-border-radius:3px;
}
#canvasshophead p {
font-family:Cusmyrb;
color:#ffffff;
font-size:30px;
text-align:center;
line-height:2;
margin-top:0;
}
#canvasshopwrap {
margin-left:60%;
width:11em;
display:inline-block;
}
#canvasshoptext p {
font-family:Cusmyr;
font-size:14px;
color:#343234;
text-align:left;
}
#canvasshoptext {
width:11em;
}
Without knowing what it is you're trying to accomplish (things in your code make me wonder if they are by design or not) I will assume you're trying to have a static element centered in the middle of the page. If you're going for a fluid layout (something that will automatically degrade into mobile devices for instance) the solution will look different.
jsfiddle here: http://jsfiddle.net/RbA92/
I find that adding temporary background colors to elements can be very helpful when debugging. For the purpose of this exercise I've left them in there for you so you can easily see what's going on. I would also suggest putting these colors on your original fiddle (and change margin to padding to REALLY see what's going on). You had a few things in there that weren't behaving as you intended... I think :)
Here's a little breakdown of the styles for you. I commented out the styles I "removed" and annotated the things I added and why.
body { text-align: center; } /* centers all content */
#indishopmain {
padding:0em;
/*width: 100%;*/
background-color: blue;
overflow: hidden; /* allows us to float elements inside a non-floated element */
width: 700px; /* gives the browser a literal size to render, which keeps the elements from moving when the window is resized */
text-align: left; /* keeps child elements from inheriting the text-aling: center we put on the body */
margin: 0 auto; /* this is what actually centers our item. use this with body {text-align: center;} */
}
#indishopmain p {
text-align:center;
font-family:Logo;
color:#343234;
margin-top:4em;
font-size:90%;
}
#indishopimg img {
/*margin-top:-11.9em;
margin-left:10%;*/
-moz-box-shadow: 5px 5px 10x #000000;
-webkit-box-shadow: 5px 5px 10px #000000;
box-shadow: 5px 5px 10px #000000;
float: left; /* float this bad boy all the way to the left */
}
#canvasshopwrap {
/*margin-left:60%;*/
width:11em; /* having this in em could break your layout. consider putting this in px to keep it from getting too big for it's area and being pushed to the bottom */
/*display:inline-block;*/
background-color: red;
float: right; /* float this one all the way to the right */
}
#canvasshophead {
/*display:inline-block;*/
width:11em;
background-color:#5020B8;
/*height:2em;*/
border-radius:3px;
-moz-border-radius:3px;
padding: 0 0 .5em 0; /* it's better to size the CONTENT how you want, so this box will always contain it. size thie box but leave the contents dynamic and you could end up with the content outside of your container */
}
#canvasshophead p {
font-family:Cusmyrb;
color:#ffffff;
font-size:2em;
text-align:center;
line-height:2;
margin:0; /* remove any browser-specific formatting */
padding: 0; /* ditto */
}
#canvasshoptext {
width:11em;
}
#canvasshoptext p {
font-family:Cusmyr;
font-size:14px;
color:#343234;
text-align:left;
padding: 0; /* remove any browser-specific formatting */
margin: 0; /* ditto */
}
Hopefully this is the answer you are looking for.
Remove this margin-top:
#indishopimg img {
margin-top:-11.9em; <--- here
margin-left:10%;
-moz-box-shadow: 5px 5px 10x #000000;
-webkit-box-shadow: 5px 5px 10px #000000;
box-shadow: 5px 5px 10px #000000;
}
If you want the image beside the text, move the image into the paragraph containing the text and add float:left to the CSS above.
I have a problem positioning an inputfield with variable size and a post button with fixed size inside of a div with fixed "outer-margin".
I've provided a jfiddle example where you can see the wrong version.
Here you can see my problem:
Wrong version: Actual website
"Should-be" version: This is what it should look like
Textual description:
As you can see in the 2nd picture, it's important for me that the bottom-part always sits on the bottom...
.submitform {
display: block;
position: fixed;
bottom: 0;
...more on jfiddle...
}
... and the post-button always on the right. The bottom-part should have the same gap on the left and right as the upper-part. The difficult thing is, that the inputfield should have flexible size but should take all the space between left gap and post-button.
I hope you can help me because hours of trying and searching on the web didn't brought me the right solution.
Try this: http://jsfiddle.net/jgHAA/1/
.submitform {
background: white;
display: block;
position: fixed;
/* Instead of applying margin and width, simply set the bottom, left,
and right properties to 13px */
bottom: 13px;
left: 13px;
right: 13px;
/*box-shadow: 0 2px 7px rgba(0, 0, 0, 0.1);*/
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
padding: 7px;
overflow:hidden;
box-sizing:border-box;
}
to have the textbox fill the width, you can use the same technique: http://jsfiddle.net/jgHAA/2/
.submitform #post_input {
display: block;
font-size: 18px;
border: none;
outline: none;
padding: 3px;
/* set left and right, and z-index to make it appear behind the button.*/
left:7px;
right:7px;
position:absolute;
z-index:-1;
}