I'm trying to create info graphics / data panels on a hobby site that I'm working on. I'm wishing to display text for one of the stat totals vertically rotated with supporting text wrapping around this however I'm having great difficulty getting this aligned correctly.
Instead of pasting code I can show my work in progress page at:
http://www.footy-results.co.uk/
The info graphic panel that I can't get to work is the '148 TEAMS' ... hopefully the problem is obvious to css wizards!
Any hints or tips would be much appreciated and anyone who can help me resolve this issue will be credited on the site when I launch!
I have a solution fou you but its not 100% clean. In my opinion its just not allowed to use negative margin but I can't find another solution. And furthermore you have do define height and width of the element...
You have to place the rotaded <span> element into anothe <div>. Then you can position the <div> properly and the text is floating around it. Here the code:
HTML:
<div class="infoPanel">
<span class="infoPanelVertical">
<div class="spanwrapper">
<span class="infoNumberVertical">148 TEAMS</span>
</div> your text here...
</span>
</div>
CSS:
.spanwrapper {
float: left;
height: 157px;
position: relative;
width: 48px;
}
.infoNumberVertical {
background-color: #F5F5F5;
border: 1px dotted #DDDDDD;
color: #1A3C7B;
float: left;
font-size: 32px;
font-weight: bold;
margin-left: -56px;
margin-top: 60px;
transform: rotate(-90deg);
width: 150px;
}
The problem is that you have to give a hight and a width to the wrapping <div> or the span in it otherwise the text does not know where it should get floated. If you don't define any width or height the text is just wrapping around the rotated text which is a big rectangle.
I you use a CMS or want to fill in the content dynamicly this is a bad solution. But you could also define the width and height trough js but thats kinda hacky solution I think.
Related
So I've been looking for days and can't find a way to do that.
I made a WordPress site, and my homepage is displaying the most recent posts I've made.
Thing is, the content of a post is written with some specific layout, and it is meant to stay that way. The layout cannot change! I need the text to stay in the exact same place, even if it becomes way smaller and less readable when looking at the site on a smartphone.
Of course, the site is responsive. Only thing I don't want to be responsive is the content of a post.
I've tried a lot of things, but I can't find a way to make it... This page shows exactly what I'm looking for, except that I don't want the post to be re-sizable by the user. I just need it to fit the parent div.
.responsive-wrapper {
border: 3px solid black;
}
.post-content {
position: relative;
width: 100%;
height: 100%;
padding: 10px;
}
.txt-top-right {
display: block;
float: right;
margin-left: auto;
padding-right: 20px;
}
.txt-under-top-right {
clear: both;
}
.txt-center {
text-align: center;
}
.post-content img {
display: block;
max-width: 200px;
float: right;
padding-right: 20px;
}
<div class="responsive-wrapper">
<div class="post-content">
<p class="txt-top-right"><em>Div right-top corner</em></p>
<p class="txt-under-top-right">
Div following the one on right-top corner
</p>
<div class="txt-center">
<h2>h2 in the middle of the page</h2>
<h1>h1 in the middle of the page</h1>
<h3>h3 in the middle of the page</h3>
</div>
<img src="http://cs.pes.edu/wp-content/uploads/2016/06/default.jpg" />
<p>
paragraph<br> on the left side<br> of the page<br> describing<br> a lot of things<br> on a lot of lines
</p>
<p>
Adress<br> City<br> Country
</p>
</div>
</div>
I understand HTML/CSS/JS, but I am struggling with JavaScript... I can insert some <script> tags in my html header with functions in it, but I have hard times understanding what these functions do.
I'd like the layout to stay the exact same way, doesn't matter which device the user is on. For instance, I want the .txt-top-right paragraph to take this amount of space. On a smartphone, the font size shouldn't re-size and fill up more than this amount of space of the container...
This is an example of what is happening right now when re-sizing the window. The layout changes completely !
Thank you for reading, hope it was clear enough :)
I want to align an text to an exactly position, like 2cm from right not the pre-stabled positions like right, left and center. There's an example: Example
How can I center the Regular, upgraded and exclusive cases like that?
per my comment, here is how the text is centered, but the price tag is included as an inline element with the text.
html
<p class="container">
Text goes here
<span class="block">
$3
</span>
</p>
CSS
.block {
padding: 4px;
background: lightblue;
border-radius: 2px;
margin-left: 4px;
}
.container {
max-width: 400px;
text-align: center;
border: 1px solid;
}
EDIT:
based on the additional information you provided, it's not just aligning text that you were having an issue with, but also layout in general.
I've updated my example to show how you could align elements within a container using text-align: center; and converting the different text/price items to have display: inline-block;.
This is just an entry point to get you started. There are many other ways to layout content with CSS, from floats, flex-box and new CSS Grids. I suggest you review each to determine what is appropriate for your project.
Updated Demo: https://codepen.io/scottohara/pen/oWLxXN
I am completely stuck trying to get a left chevron and a right chevron to display on either side of a date in an h1 tag. I want a user to be able to click on either chevron to move forward or backward one day. However, no matter what combination of div or img classes and position, float, display it still looks like the screenshot attached, even though I've made sure the document is updating.
How can I modify the HTML/CSS so the chevrons are placed on the same line as the date?
<div class= "dater">
<div class="chevron-left">
<img src="glyphicons-225-chevron-left.png"/>
</div>
<h2><%= #todie %></h2>
<div class="chevron-right">
<img src="glyphicons-224-chevron-right.png"/>
</div>
</div>
EDIT: My solution based on Rob's answer.
.chevron-right img {
float: right;
}
.chevron-left img {
float: left;
}
.dater {
margin-left: auto;
margin-right: auto;
width: 100%;
margin-top: 60px;
margin-bottom: 40px;
}
.dater h2 {
text-align: center;
font-weight: 400;
float: left;
}
The reason for your problem is you have the images contained within block level elements which occupy the full width of the browser viewport. Even then it won't work exactly as you wish but there are many ways to accomplish it.
First, you can put the images inside the <h2> to the left and right of the text. That's the easiest way.
Second, you can use the CSS pseudo classes ::before and ::after
You can also set the width of the <h2> and float the everything, images included but the must be set to inline to help this along.
There are more ways than just those.
I have the following: jsfiddle.net
What I'm trying to do is have the image float left of the text such that it fills the parent (.box). Note that the .box can vary in height depending on the number of lines of text.
The end result should look like this:
How would this be done?
.box {
position: relative;
display: block;
width: 600px;
padding: 24px;
margin-bottom: 24px;
border: 2px solid red;
}
.img {
float: left;
}
.text {
font-size: 14px;
}
<div class="box">
<div class="img" style="background-image: url('https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg');"></div>
<div class="text">This box is one line.</div>
</div>
<div class="box">
<div class="img" style="background-image: url('https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg');"></div>
<div class="text">This box has two lines. This box has two lines. This box has two lines. This box has two lines. This box has two lines. This box has two lines.</div>
</div>
You can use display: table on the parent element and display: table-cell on the children.
PLUNKER
SNIPPET
<!DOCTYPE html>
<html>
<head>
<style>
html,
body {
height: 100%;
width: 100%;
}
figure {
display: table;
width: 600px;
height: auto;
margin-bottom: 24px;
border: 2px solid red;
}
img {
float: left;
display: table-cell;
min-height: 100%;
margin-right: 20px;
}
figcaption {
font-size: 14px;
height: 100%;
}
</style>
</head>
<body>
<figure>
<img src="http://i.imgur.com/MhHgEb1.png">
<figcaption>This box is one line.</figcaption>
</figure>
<figure>
<img src="http://i.imgur.com/MhHgEb1.png">
<figcaption>This box has two lines. This box has two lines. This box has two lines. This box has two lines. This box has two lines. This box has two lines.</figcaption>
</figure>
</body>
</html>
As far as I know there is no HTML/CSS only solution to make this work - correct me if I'm wrong. The OP wants to have an image with unknown size dynamically scaled to the parent's container's height. This container on the other hand depends dynamically on the text length and has no fixed height. The image size can vary, the text size can vary.
Here a proof of concept solution using jQuery and <img> instead of background-image with the following result:
HTML:
<div class="box">
<img class="img" data-src='https://placehold.it/500x500'>
<div class="text">This box is one line.</div>
</div>
JavaScript / jQuery
var $boxes = $('.box');
var $imgs = $boxes.find('.img');
for (var i = 0; i < $boxes.length; i++) {
var heightParent = $boxes.eq(i).outerHeight() - 4;
// -4 because of border 2px top + 2px bottom
$imgs.eq(i).attr('src', $imgs.eq(i).attr('data-src'));
$imgs.eq(i).height(heightParent);
}
CSS (only changed part):
.img {
float:left;
margin-left: -24px;
margin-top: -24px;
margin-right: 10px;
}
It's not such a trivial thing to achieve what you want as you don't want to set height. Not on the image and not on the parent container.
Problems using background-image:
With the background-image approach it would easy be possible to position the image correctly scaled to the left with position:absolute, but the margin to the right (to the text) would not work, as the width can be different.
Problems using img:
On the other side with the use of <img> you have the problem, that the parent <div> will always be in the original height of the image, as long as no parent has a fixed height - which is the case in your example.
JavaScript for partly making it work:
To avoid this you can avoid the creation of the image on page load by setting the url to a data attribute, I called it data-src. Now when the page is load, you can look for the parent's <div> natural height. Next you pass the URL from the data-src attribute to the src attribute so that the image is rendered.
As we know the former parent's height we can set it as the image height.
The CSS negative margins are there to undo your setting of padding: 24px on the parent's container so that the image is correctly positioned. If you ask yourself why I subtract 4 from the height - this is because you want your image to be within the border, so we need to subtract the 2px to the top + the 2px to the bottom of your border.
Note: Of course this solution would not work responsive without further scripting, but your parent <div> seems not to be responsive anyway.
Fiddle: https://jsfiddle.net/av9pk5kv/
Problems with the layout wish and the above example:
You could argue that the wished layout is not worth aspiring to in the first place, it will not work with more amount of text if you don't change something else. At some point there is so much text, so that it's just impossible to place the image filling the parent:
To avoid it partly you would have to remove the fixed width of the parent.
But the same (or similar) result will happen if the dynamically including of the image via JavaScript leads to more text lines as there were before (the text is squeezed).
How would I solve these problems: I'd use another layout.
I'm working on a project to better my knowledge of Spring MVC practices. To do this, I've been creating a very scaled down version of Twitter. Basically, a user can sign in and post a little blurb and also see a timeline of their previous blurbs and all their follower's blurbs.
I have a background image across the whole page and a container in the middle with a light blue background for just the post blurb box and the timeline. The light blue background only goes to the bottom of the visible page. If the timeline goes down past a single page view where you have to scroll down, the light blue background stops at the bottom of what was visible on the initial load.
I have my page defined like this:
The div class=blurb is the blurbs in the timeline.
<div id="container">
<div id="mainPanel">
<div id="timeline">
<div class="class="blurb"">
<span class="user">test</span> <span
class="displayName">Test User</span> <span class="bodytext">This is a small blurb.</span>
<span class="timestamp">1 hours ago</span>
</div>
<div class="blurb">
<span class="user">admin</span> <span
class="displayName">Test admin</span> <span class="bodytext">This is another small blurb.</span>
<span class="timestamp">1 hours ago</span>
</div>
</div>
</div>
</div>
The CSS style for the container is shown below.
#container {
width: 650px;
height: 100%;
margin: 0 auto;
padding: 10px;
background-color: #DDEEF6;
}
Can I modify that container CSS in a way to make it be as long as the timeline is? The timeline grows with every blurb post.
Screenshot with height defined to 100%
Screenshot with height undefined
UPDATE:
Okay, so it absolutely has to do with the floats. Thanks to the two commenters below. The #socialPanel is defined as such:
#socialPanel {
width: 250px;
float: right;
}
Using Chrome's developer tools, if I clear the float is drops the social panel below my blurbs/tweets and moves the light blue background all the way down the list of blurbs.
Any suggestions on what I could research to keep the socialPanel floating left at the top, but still have my light blue background use all the available height? Many thanks on helping me figure it out this far!
UPDATE TWO:
I combined the methods shown in the answer below to solve my problem. I added a div with class clearer with clear:both; and then removed the height: 100%; from the #container styling. This resolved the problem.
NOTE:
Adding the overflow: hidden; to my container's styling made the page cut off after the light blue area, it did not make the light blue area go all the way down.
Many thanks to all the help! I'm still learning and it was all very appreciated!!
Place overflow:hidden on the #container.
How does it work?
One would think placing this style on a container would hide the floats instead of containing them. What actually happens is that overflow:hidden makes the element establish a new block formatting context. This fixes the float containment of any children floating within it. This CSS fix is more practical then including an additional element in the HTML styled with clear:both and works on all modern browsers, including IE7+.
You probably just need to add a clearing div after your two inner divs. http://jsfiddle.net/c3vTU/1/
<div class="outer">
<div class="inner-left"> Stuff on the left</div>
<div class="inner-right">Stuff on the right <br/><br/></div>
<div class="clearer"> </div>
</div>
CSS
.outer {
width: 520px;
padding: 10px;
background-color: #eee;
}
.inner-left {
float: left;
width: 300px;
background-color: red;
}
.inner-right {
float: right;
width: 200px;
background-color: yellow;
}
.clearer {
clear: both;
}
As #MichaelIrigoyen noted, you can also just add overflow: hidden or overflow:auto (I think makes more sense) to your container. http://jsfiddle.net/c3vTU/4/ This is cleaner and I love it!
If you simply remove the height declaration (height: 100%;) from #container, it will expand as its children do (and the background of course, too).