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.
Related
I am trying to make it so one <div> is on the same line/row another <div> by default they just appear below each other. I have found out that this only happens when the text is multiple lines. Here is the code:
h1 {
text-align: center;
}
h2 {
text-align: left;
}
.info {
text-align: left;
font-size: 20px;
float: right;
}
.content {
align-self: auto;
border: 1px solid black;
color: gray;
width: 150px;
max-width: 150px;
float: left;
}
.p1 {
text-align: left;
margin-left: 10px;
}
<h1>Good Health and Well being</h1>
<div class='info'>
<h2><b>What do good health and well-being mean?</b></h2>
<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</p>
<h2><b>Why are good health and well-being so important?</b></h2>
<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</p>
<h2><b>How do you keep good health?</b></h2>
<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</p>
</div>
<div class='content'>
<h1>Content</h1>
<p class='p1'>content</p>
</div>
Here is an image of it.
And here is an image when the text doesn't use multiple lines:
Lastly here is an image of what i want
Reason this is happening is because that having multilines increases the width of your info div. It keeps on adjusting till it becomes (100%-150px) 150 being the width of your content div. Adding width to info will solve the issue , add the width such to give margin in between as I have updated the css.
h1 {
text-align: center;
}
h2 {
text-align: left;
}
.info {
text-align: left;
font-size: 20px;
float: right;
width: calc(100% - 200px)
}
.content {
align-self: auto;
border: 1px solid black;
color: gray;
width: 150px;
max-width: 150px;
float: left;
}
.p1 {
text-align: left;
margin-left: 10px;
}
<h1>Good Health and Well being</h1>
<div class='info'>
<h2><b>What do good health and well-being mean?</b></h2>
<p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT </p>
<h2><b>Why are good health and well-being so important?</b></h2>
<p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEX </p>
<h2><b>How do you keep good health?</b></h2>
<p>T TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT </p>
</div>
<div class='content'>
<h1>Content</h1>
<p class='p1'>content</p>
</div>
The div element is a block level element, but there is a way you can bypass that while styling it through css.
Firstly, you'd give the divs the same id attribute since they have different classes. Then through the css file you could add the float attribute, whose values can be either left or right.
So it could look something like this
<h1>Good Health and Well being</h1>
<div class='info' id="box">
<h2><b>What do good health and well-being mean?</b></h2>
<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</p>
<h2><b>Why are good health and well-being so important?</b></h2>
<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</p>
<h2><b>How do you keep good health?</b></h2>
<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</p>
</div>
<div class='content' id="box">
<h1>Content</h1>
<p class='p1'>content</p>
</div>
#box {
float: left;
}
Playing around with the size (width and height) of each individual div can help you make them fit nicely. Or an alternative is using the position attribute, but I find using float much less of a pain.
There are multiple ways you can inline div's side by side. Using float can be tricky and will require clearing of div elements to stack properly.
There are some good new properties of CSS for setting Grids of elements. One in the example below is using the flex property on the parent container of both div's you want to be side by side. There is another CSS style property grid, which can be a little difficult to understand at first but its best when you get used to it.
<!DOCTYPE html>
<html>
<body>
<style>
.flex {
display: inline-flex;
flex-flow: nowrap;
justify-content: space-between;
}
.info,.content {
width: 49%;
}
.content{
background: lightgray;
padding: 1rem
}
</style>
<div class="flex">
<div class='info'>
<h2>
<b>What do good health and well-being mean?</b>
</h2>
<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</p>
<h2>
<b>Why are good health and well-being so important?</b>
</h2>
<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</p>
<h2>
<b>How do you keep good health?</b>
</h2>
<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</p>
</div>
<div class='content'>
<h1>Content</h1>
<p class='p1'>content</p>
</div>
</div>
</body>
</html>
Hope this helps you.
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 am attempting to design a responsive layout in which there is an image and a paragraph side by side and the image is vertically aligned with the text (the paragraph height changes with adjustments to the browser width).
Here is my currant code,
http://jsfiddle.net/xSrpt/
I have tried using
vertical-align:middle;
and
vertical-align:central;
on the parent div (#intro) and have not been able to get anywhere with it.
I feel like this should be an easy fix and i am missing something but hopefully you guys can help.
please include a working fiddle with your answer.
Thanks a lot!
Just to add a comment to above answer ( rep too low ).
It is unnecessary to convert the div into table.
All you have to do is applying vertical-align:middle to child element and not the parent.
#intro > * { vertical-align:middle }
Here's your forked fiddle.
http://jsfiddle.net/UBD6S/
much simpler solution.
try add to its parent - display:table-cell;
edit:
you need to make the div "act" like a table, as below:
CSS:
#intro{
display:table; /** table **/
width:90%;
background-color: #999;
padding:5%;
}
#pic{
height:100%;
width:80px;
background:black;
display:table-cell; /** table-cell **/
vertical-align:middle;
}
#your_pic {
width:80px;
height:80px;
background:#fff;
}
#p{
display:inline-block;
width:80%;
}
HTML:
<div id="intro">
<div id="pic"><div id="your_pic"></div></div>
<p id="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 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 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>