I have a DIV with an icon on left side, and text on right side.
The text is dynamic and can be short or long.
If the text is short (A row or two) I want it to be centered to the icon.
If it's long, I want them to be vertically top-aligned.
Is there a way to do it with CSS only (no line counting)?
<div class="container" >
<div class="container__left">
<div class="container__left__icon" />
</div>
<div class="container__right">
// some react code with dynamic text in <div>s and <span>s
</div>
</div>
You can use display: table-cell and different vertical aligns - top for the first cell and middle for the second.
.inner1{
display:table-cell;
vertical-align:top;
}
.inner2{
display:table-cell;
vertical-align:middle;
}
<div>
<div class="inner1"><img src="https://via.placeholder.com/140x100"></div>
<div class="inner2">some text some text some text some text some text some text some text some </div>
</div>
<div>
<div class="inner1"><img src="https://via.placeholder.com/140x100"></div>
<div class="inner2">some text some text some text some text some text some text some text some some text some text some text some text some text some text some text some some text some text some text some text some text some text some text some some text some text some text some text some text some text some text some some text some text some text some text some text some text some text some some text some text some text some text some text some text some text some some text some text some text some text some text some text some text some </div>
</div>
.container {
display: flex;
flex-direction: row;
align-items: center;
}
You can use Flex Box CSS to do this very easily. You apply the flex to the parent div, establish the direction you want the boxes to fill the space (vertical or horizontal - in this case horizontally so we want to add a "row" direction"), and finally center those elements vertically using align-items set to center. This will account for any changes in the content in your right hand box. It also later makes making it responsive very easy.
Related
Is there a way to put two images one above the other in the same line with text? This example for three lines, and the second line has two images one above the other after the words "of text" and then continue the text normally? whether using css or a table or anything?
I tried putting them in a div or an image block, but nit sure how to implement it. They can be put one above the other in a table cells, however tables doesn't go side by side with text, they can be either float right or left of a paragraph, not in the middle I think.
Example pictures links: 1, 2. You can use them to make an demo in jsfiddle.net or something if possible.
Using line-height and display:inline-block
p{
line-height:40px;
}
span{
display:inline-block;
vertical-align:middle;
}
img{
width:20px;
display:block;
}
<p>Is there a way to put two images one above the other in the same line with text? This example for three lines, and the second line has two images one above the other after <span><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ_-6FYKDSRJ2Qz8CTZLADbDgHmPaGKQjBMhbCqgEbgR7YkR7mS"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTZYEcLppt4iu9tRNmH0KpP-_AZL62ZSgk8P36_4jG--MMXRg1xag"></span> the words "of text" and then continue the text normally? whether using css or a table or anything?</p>
https://jsfiddle.net/kb1tc9r4/11/
Here is a solution where the css code uses flexbox to achieve that
.images {
display: inline-flex;
flex-direction: column;
}
<div>
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text texttext text text text text text text text text text text <div class='images'>
<img width='20' src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ_-6FYKDSRJ2Qz8CTZLADbDgHmPaGKQjBMhbCqgEbgR7YkR7mS'>
<img width='20' src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTZYEcLppt4iu9tRNmH0KpP-_AZL62ZSgk8P36_4jG--MMXRg1xag'>
</div>text text text text texttext text text text text text text text text text text text text text text texttext text text text text text text text text text text text text text text texttext text text text text text text text text text text text text text text text
</div>
Here is another fiddle https://jsfiddle.net/y7notgbp/
You just a tiny css and html. Setting height of images to 0.5em makes sure your images fit into the line. Outer element needs inline-block set to display property while images need block set to the display property.
.inline-images{
display: inline-block;
}
.inline-images img{
height: 0.5em;
display: block;
}
Blaaa
<span class="inline-images">
<img src="http://www.stickpng.com/assets/images/58afdad6829958a978a4a693.png">
<img src="http://www.stickpng.com/assets/images/58afdad6829958a978a4a693.png">
</span>
blaa
I have a paragraph with some text in it. The <p> has text-align:center;. Imagine that the text is bigger than one line. The linebreak is always placed leaving all the posible words in the first line, and just a few in the second line.
Screenshot example:
And here is a screenshot of how I would like my html/css to position the breaklines:
Since the text is dynamic, and the page is to be responsive, I dont want to do this by hardcoding <br>s or wrapping the text into <span style="display:inline-block;">s to define preferred linebreaks. I wouldn't like to change the font-size either
Is there any trick to do this automatically without JavaScript?
You could do this by adding left and right padding. padding: 0 50px; but without using javascript this would pretty much be your only option.
Try this
<div class="container">
<p>
Text text Text text Text text Text text Text text Text text text Text text Text text Text text Text text Text text text Text text Text text Text text Text text Text text text Text text Text text Text text Text text Text text text Text text Text text Text text Text text Text text text Text text Text text Text text Text text Text text text Text text Text text Text text Text text Text text text Text text Text text Text text Text text Text text
</p>
</div>
.container {
font-size: 18px;
padding:0 20%;
text-align: center;
}
#media screen and (max-width: 600px) {
.container {
padding: 0 20px;
}
}
live demo - https://jsfiddle.net/grinmax_/hLzko135/
I have a website that I'm trying to make responsive.
Some divs have to change places as mentioned in my older post: How to swap sides of 2 elements (one with float:left, the other is with float:right)
But this time it's much more complex.
This is how the page looks:
On the left div: an image.
On the right div: baner of the client, "the challange", some text, "out results", some text. "read more" link.
(right after it there is the same structure just with the image on the right and text on the left - using float on the divs).
And this is how it should look on a mobile:
First comes the banner - then the image - then the rest of the text.
This is my HTML structure:
<div class="cs">
<div class="leftDiv">
<img src="http://www.example.com/wp-content/themes/twentyfifteen-child/images/big-image.png">
</div>
<div class="rightDiv">
<a href="http://www.example.com/clients/theClientsName-case-study/">
<img src="http://www.example.com/wp-content/themes/twentyfifteen-child/images/banner.png" class="mini-logo-l">
</a>
<h1>The <span class="babyblue">Challenge</span></h1>
<p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text . </p>
<h1>Our <span class="babyblue">Results</span></h1>
<p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text .</p>
<p class="read-more text-yellow">Read more</p>
</div>
</div>
As you notice, the tags are inside tags on the desktop version, which is ok.
But when looking on the page on a mobile - a lot of tags inside the "left" and "right" divs have to swap places.
Here is a jsfiddle: http://jsfiddle.net/uh8L0g4t/
Here's the fiddle for what I described in the comments. I've used !important because you are unnecessarily increasing the priority of the elements so I'm a bit lazy to clone them to gain the priority for the elements in mobile view.
.desktop{
display:block;
}
.mobile{
display:none;
}
#media screen and (max-width:600px){
.desktop{
display:none;
}
.mobile{
display:block;
}
}
And for your HTML
<div class="left">
<img class="mobile" ... />
</div>
<div class="right">
<img class="desktop" ... />
</div>
It's the most 'elegant' way for your case. If you try to move things around without cloning the image, you will end up either using more code, or high chance of breaking something else.
I started yesterday with learning HTML and got stuck with a (simple) example:
Here's my HTML:
<!DOCTYPE html>
<html lang="en-GB">
<head>
<title>stylish</title>
<link rel="stylesheet" href="stylish_sheet.css" />
</head>
<body>
<header> Header </header>
<nav>
<p>short</p>
<p>longernav</p>
<p>verylongnavigation</p>
</nav>
<section>
<div class="entry"> <h1> Section 1 </h1>
<p> text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text </p>
</div>
<div class="entry"> <h1> Section 2 </h1>
<p> text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text </p>
</div>
<div class="entry"> <h1> Section 3 </h1>
<p> text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text </p>
</div>
<div class="entry"> <h1> Section 4 </h1>
<p> text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text </p>
</div>
</section>
<footer> Footer </footer>
</body>
</html>
and the CSS code:
.entry {
float:left;
margin:10px;
padding:15px;
width:auto;
min-width:200px;
max-width:250px;
height:200px;
border:1px solid black;
}
header, footer {
background-color:black;
color:white;
text-align:center;
padding:5px;
width:100vw;
height:20px;
}
footer {
clear:both;
}
nav {
line-height:30px;
background-color:lightgrey;
height:100vh;
width:10%;
max-width:150px;
float:left;
padding:5px;
}
section {
width:80%;
min-width:250px;
max-width:100%;
float:right;
padding:5px;
}
Now I have 3 problems and one minor issue:
1) I want the min-width of the navigation to adapt to the longest text in it (in this case "verylongnavigation"). It doesn't matter if the text wraps. I set the max-width fix to 150px so I dont know what happens when the text is then actually longer than that. In this case the idea was that it still adapt to the text, i.e., text size has higher priority than max-width.
2) I want the height of the navigation to go from the header to the footer. It is colored lightgreyish but it never fills the total space. It seems height:100% only adapts to the text itself. I tried height:100vh but then the area gets higher than necessary, i.e., it gets bigger than the section part.
3) When I make the browser window width small then the "section" wraps below the "nav". How can I disable this s.t. I would have to scroll to the right to see the text in the sections?
4) The minor issue: for the header and the footer there is a small (~5px) white space to the left but not on the right. I tried to set width:100%-5px but it seems thats not possible. So I found margin-right:5px but this does nothing (whereas margin-top and margin-left does what I seek). Is there another way where I can merge relative sizes with absolute sizes or am I using it wrong?
Thank you in advanced,
Jan
Simply remove both, width and max-width from nav. This way the menu background will always cover the longest text.
To set the height of the nav background to the same as the content, you either have to define both to the same height or use faux columns (more on this can be read on many documentation on the web, one of them is this one).
Using faux columns (as explained above) section would not wrap below nav anymore. Basically they would be 2 different columns that would stand side by side always.
Elements in CSS have default styling. To get rid of those, one usually 'resets' those values by setting them to 0 as follows:
* {
padding:0;
margin:0
}
Here is some more info on resetting css.
Here is the link to the problem. http://garethjweaver.com/portfolio/gjw/index.php?page=gjw
Trying to create a container without having to use overflow. I have my main container for all of the content like so.
.container {
max-width: 1000px;
margin-left: auto;
margin-right: auto;
padding: 10px;
}
So far so good, I test it by placing a border around it and it shows it covers all of the content.
Now when I try and do another container for another section it doesn't work. Like so.
http://jsfiddle.net/4wN8q/
This is the other container I'm trying to create..
.portfolio-container {
width: 980px;
margin-left:auto;
margin-right:auto;
}
But when I add a border around it it doesn't cover all of the content, it just stays at the top covering nothing. overflow:auto can fix this although when I'm trying to make my images responsive the scroll bar shows up down the bottom and it doesn't scale and it will work if I take overflow out.
Thanks in advance.
EDIT: Updated to include the code for it
<div class="portfolio-container">
<div class="content-container">
<div class="content">
Text Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text
</div>
<div class="arrows">
<a class="portfolio-button" href="#">Visit Website</a>
<i class="float-left fa fa-arrow-circle-o-left fa-3x"></i>
<i class="float-right fa fa-arrow-circle-o-right fa-3x"></i>
</div>
</div>
<div class="portfolio-images">
<img class="image-padding"src="./images/cz1-chrome.png">
<img src="./images/cz-chrome.png">
</div>
Had to change the image stylings instead of removing overflow