I just started working with Bulma CSS Framework. However, I am unable to place text and background image side by side. The background image gets cut. Please help me.
Image I want to add:
Here's the Code:
<section class="hero is-halfheight upload-descr" style = "height: 37em">
<div class="hero-body">
<div class="container">
<div class="clearfix"></div>
<hr class = "rm-descr-bar" style = "float: left;"></hr>
<div class="clearfix" style = "clear:both;"></div>
<h1 class = "title">
Loren Ipsum
</h1>
<div class="content rm-has-medium-size">
<p class = "upload-descr-exp" aria-live = "polite" aria-atomic = "true">Sounds traditional, right? Loren Ipsum Does<br />Loren ipsum dolar sit amet. Loren Ipsum<br />Loren Ipsum dolar sit amet. Loren ipsum dolar sit amet.<br />Loren Ipsum dolar sit amet.<br />Loren Ipsum dolar sit amet is cool</p>
</div>
</div>
</div>
</section>
I want to place the image just side to the .upload-descr-exp description. But it just gets cut.
I tried:
<section class="hero is-halfheight upload-descr" style = "height: 37em">
<div class="hero-body">
<div class="container" style = "background: url('/img/cover.jpg') no-repeat right">
<div class="clearfix"></div>
<hr class = "rm-descr-bar" style = "float: left;"></hr>
<div class="clearfix" style = "clear:both;"></div>
<h1 class = "title">
Loren Ipsum
</h1>
<div class="content rm-has-medium-size">
<p class = "upload-descr-exp" aria-live = "polite" aria-atomic = "true">Sounds traditional, right? Loren Ipsum Does<br />Loren ipsum dolar sit amet. Loren Ipsum<br />Loren Ipsum dolar sit amet. Loren ipsum dolar sit amet.<br />Loren Ipsum dolar sit amet.<br />Loren Ipsum dolar sit amet is cool</p>
</div>
</div>
</div>
</section>
Related
HTML:
<div class="top-container">
<div class="primary-text">lorem</div>
<div class="secondary-text">lorem</div>
</div>
<div class="secondary-container">
<h2>Lorem ipsum dolor sit amet.</h2>
</div>
<div class="info-container">
<div class="container-one">
<div class="box1">1</div>
<h3>lorem</h3>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing.</p>
</div>
<div class="container-two">
<div class="box2">2</div>
<h3>lorem</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
</div>
<div class="container-three">
<div class="box">3</div>
<h3>lorem</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing.</p>
</div>
</div>
<div class="info-sec">
<img src="test.png" alt="blah">
<p>Lorem ipsum dolor sit amet.</p>
</div>
Relavent CSS:
.info-sec{
visibility:hidden;
}
.box:hover + .info-sec{
visibility:visible;
}
If I change the hover from the box to the info-container it works fine:
.info-container:hover + .info-sec{
visibility:visible;
}
But hovering using box does not work. I've also tried using display: none; and display: block;
Codepen: https://codepen.io/colton-22/pen/jOwoMxL
The + is adjacent Sibling Selector. So when you use:
.info-container:hover + .info-sec{
visibility:visible;
}
It works because info-sec is the first next sibling of info-container. But when you use:
.box:hover + .info-sec{
visibility:visible;
}
It doesn't work because info-sec is not the sibling of info-container.
According to my knowledge, there is no selector in css which works for you. So, you have to use javascript to achieve this.
I am wondering if it is possible to left align text below center aligned text, so that both texts start from same position.
In the example figure. The TITLEs are center aligned and the copy below is left aligned.
How can you realise something like this with CSS?
Here is a JSFiddle to start from
https://jsfiddle.net/j5p7v8m9/
<div>
<p style="text-align: center;">TITLE</p>
<p style="text-align: left;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
Here is the answer. I've updated your JSFiddle. You need to add some wrappers for each divs, then you can centerize the title as follows:
HTML:
<div class="container">
<div class="col">
<div class="contents">
<p class="title">TITLE</p>
<p class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
</div>
<div class="col">
<div class="contents">
<p class="title">TITLE</p>
<p class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
</div>
<div class="col">
<div class="contents">
<p class="title">TITLE</p>
<p class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
</div>
</div>
CSS:
.container{
display: block;
}
.col{
float: left;
width: 33.33%;
}
.contents{
margin-left: 20px;
margin-right: 20px;
}
.title{
text-align: center;
}
JSFiddle: https://jsfiddle.net/53oLpvqg/
Please try with bootstrap css it my help you for easy css.
<div class="col">
<p class="text-center">Title</p>
<p class="text-left">Test content Content</p>
</div>
Check Fiddle https://jsfiddle.net/0h2nmj3r/
*Look at other answers for directions on align text this is answer will help with getting that column effect
The best way to get three columns like that is to use a type of special display in css called "flex". Flex allows you to easily align elements within the parent html element.
.container{
display:flex;
flex-direction : row;
justify-content: space-around;
}
.text-box{
display: flex;
flex-direction:column;
align-items:flex-start;
width:20%;
}
p{
margin: 0 0 5px 0;
}
<div class="container">
<div class="text-box">
<p >TITLE</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
<div class="text-box">
<p >TITLE</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
<div class="text-box">
<p >TITLE</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
</div>
So as you can see I have applied flex to both the container and the text-box's. Left align can be used like in these other answers but i opted for align-items:flex-start so any element within the text-box will be aligned to the left.
By setting justify-content:space-around it makes each element within the container have equal space around it so if you were to change the window size the spaces would be relative and change. I would recommend studying more about flex and grid to improve your css skills.
We have a container with overflow-y:scroll that must have a footer that is sticky (bottom 0) unless the content inside the scrolling container + the height (which is dynamic) of the footer are bigger than the containers height.
HTML:
<div class="wrapper">
<div class="scroll">
<div class="content">
Lorem ipsum dolor sit amet
</div>
<div class="footer">
This must stick to the bottom until .content is too long, then go below it
</div>
</div>
</div>
.content and .footer can have more or less content.
If possible, we do not want to use JS for this.
I created a fiddle here with several states: http://jsfiddle.net/bqvtf1zo/1/
Removing position: absolute on .footer solves it for case "little content" (see fiddle), but breaks the other 2 cases.
You need to create a flex container. (Though there are other ways to hande this problem as well: https://css-tricks.com/couple-takes-sticky-footer/)
For the container, set the display to flex and flex-direction to column and give the scrollable content a flex value of 1. Remove positioning from footer, and there you have it.
This will cause the content to stretch to fill the height of the container if any is available, and it will cause the footer to be stuck to the bottom of the content.
For implementation: Be sure to follow up on all the cross-browser issues with flexbox, such as prefixes and bugs. https://github.com/philipwalton/flexbugs
.wrapper{
position: relative;
height: 205px;
width: 200px;
}
.scroll{
border: 1px solid red;
overflow-y: scroll;
height: 100%;
width: 100%;
display:flex;
flex-direction: column;
}
.content{
background-color: #ccc;
flex:1;
}
.footer{
background-color: #efefef;
}
<h1>
little content
</h1>
<div class="wrapper">
<div class="scroll">
<div class="content">
Lorem ipsum dolor sit amet
</div>
<div class="footer">
This must stick to the bottom until .content is too long, then go below it
</div>
</div>
</div>
<h1>
large content
</h1>
<div class="wrapper">
<div class="scroll">
<div class="content">
1. Lorem ipsum dolor sit<br>
2. Lorem ipsum dolor sit<br>
3. Lorem ipsum dolor sit<br>
4. Lorem ipsum dolor sit<br>
5. Lorem ipsum dolor sit<br>
6. Lorem ipsum dolor sit<br>
7. Lorem ipsum dolor sit<br>
8. Lorem ipsum dolor sit<br>
9. Lorem ipsum dolor sit<br>
10. Lorem ipsum dolor sit<br>
11. Lorem ipsum dolor sit<br>
12. Lorem ipsum dolor sit<br>
13. Lorem ipsum dolor sit<br>
</div>
<div class="footer">
This must stick to the bottom until .content is too long, then go below it
</div>
</div>
</div>
<h1>
large content with large footer
</h1>
<div class="wrapper">
<div class="scroll">
<div class="content">
1. Lorem ipsum dolor sit<br>
2. Lorem ipsum dolor sit<br>
3. Lorem ipsum dolor sit<br>
4. Lorem ipsum dolor sit<br>
5. Lorem ipsum dolor sit<br>
6. Lorem ipsum dolor sit<br>
7. Lorem ipsum dolor sit<br>
8. Lorem ipsum dolor sit<br>
9. Lorem ipsum dolor sit<br>
10. Lorem ipsum dolor sit<br>
11. Lorem ipsum dolor sit<br>
12. Lorem ipsum dolor sit<br>
13. Lorem ipsum dolor sit<br>
</div>
<div class="footer">
This must stick to the bottom until .content is too long, then go further down<br>
Some additional content
</div>
</div>
</div>
i must use css to alter the positions; the only thing that seems to be working is the right position nav bar and the liquid layout, but the "content" and "right navigation bar" is ot being positioned properly.
I want content to be in the middle, leftnavigation on the left, and right navigation on the right.
<title>CSS liquid layout</title>
<style type="text/css">
.due {
color: #ff0000;
font-weight: bold;
}
#leftnavigation{
position:absolute;
left:10px;
top:10px;
width:250px;
}
#rightnavigation {
float:right;
width:250px;
height:800px;
}
#content {
float:center;
}
</style>
</head>
<body leftmargin="0" topmargin="0" bgcolor="#ccff99">
<div id="app">
<div id="rightnavigation">
<h1>Right Navigation</h1>
link Instructor
Course <a href="http://www,google.com">
Resume
project
</a>
</div>
<div id="content">
<h1>Sample Content</h1>
<p>
This is the content section of the page. Use structural markup
like <p></p>
to keep the page valid in XHTML.
</p>
<h2>Lorem Ipsum</h2>
</div>
<div id="leftnavigation">
<h1>Left Navigation</h1>
<p>
Page 1 Page 2 <a href="http://www,google.com">
Page
3
</a> Page 4 Page 5 <br />
Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor
amum.
</p>
<h2>Lorem Ipsum</h2>
</div>
</div>
You could try this:
CSS
.app {
width: 100%
height: 100%;
}
.due {color: #ff0000;
font-weight: bold;
}
#rightnavigation {
float: left;
width: 33.333%
}
#leftnavigation{
float: left;
width: 33.333%
}
#content {
float: left;
width: 33.333%;
}
HTML
<div class="app">
<div id="leftnavigation">
<h1> Left Navigation </h1>
</div>
<div id="content"></div>
<div id="rightnavigation">
<h1>Right Navigation</h1>
</div>
</div>
Here's a live demo of the example - EXAMPLE
There are some errors in your HTML and CSS that need to be addressed before changing the styles to accomplish what you need.
In your HTML, there are still some unclosed tags. Especially the <div id="rightnavigation"> tag is never closed, so styles applied to #rightnavigation are actually applied to the entire page.
In your CSS, you apply a style to div.content. But that div has an id of content, not a class. The identifier should be div#content.
In your CSS, you give the div with id leftnavigation a position of "left". This should be "absolute" instead.
Once that is all cleaned up, the left nav is on the left, the content is in the center, and the right nav is on the right. But the center content overlaps the right nav (I assume that is unwanted behavior). To clean that up, without changing the HTML any more, you need to give your sections widths, and set their positions based on the width of their neighboring elements.
Your HTML:
<div id="rightnavigation">
<h1>Right Navigation</h1>
</div>
<div id="content">
<h1>Sample Content</h1>
<p>This is the content section of the page. Use structural markup
like <p></p>
to keep the page valid in XHTML.</p>
<p>The styled document should look like your printed version/screenshot.
Add styles to the left navigation links to give them borders and a
background color that changes when moused over (hint: Define navigation
links as display:block;). For the right side links, use a different
background color change and border as ashown.
Make the center column "liquid" or "elastic." Use an external (linked)
CSS file. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum.
Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. Lorem ipsum sit
dolor amum.
Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. </p>
<h2>Lorem Ipsum</h2>
<p> Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum.
Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum.
Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. </p>
<p><span class="due">Due Tuesday, September 22.</span> Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum.
Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum.
Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. </p>
</div>
<div id="leftnavigation">
<h1>Left Navigation</h1>
<p><br>Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. </p>
<h2>Lorem Ipsum</h2>
</div>
And your CSS:
#rightnavigation {
position: absolute;
top: 50px;
right: 0px;
width: 25%;
}
#content {
position: absolute;
top: 50px;
left: 25%;
width: 50%;
}
#leftnavigation{
position: absolute;
top: 50px;
left: 0px;
width: 25%;
}
.due {
color: #ff0000;
font-weight: bold;
}
I am trying to set up a section of a website to have a column of text, a long vertical picture, and another column of text on the other side of the picture. I have been able to achieve the look I want but only by using a negative top margin(not shown in this example).
The code I have tried is here
http://www.bootply.com/3hKEyWGlJp
You don't need the extra row since a new row will create a new block below the previous row. It's how CSS grids work (Bootstrap in your example). Just put the content of step 1/2 in left column, div in center column and step 3/4 content in right column.
<div class="row">
<div class="col-md-3 col-md-offset-1">
<p class="lead text-left">Step 1: asdf asdf asdf </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce blandit, dolor at..</p>
<p class="lead">Step 2: Lorem ipsum dolor sit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce blandit, dolor at</p>
</div>
<div class="col-md-3">
<div class="phone"></div>
</div>
<div class="col-md-3">
<p class="lead text-left">Step 3:Lorem ipsum dolor sit</p>
<p>Start typing your address & we will give you a list of options to choose from.</p>
<p class="lead">Step 4: Lorem ipsum dolor sit</p>
<p>dsadsdad sddasd saddsd dasdsada sdasds d ds ads dadsd dasd sada sdasdsdd sads dadsdda sdsada sdasdsd</p>
</div>
</div>
Example: http://www.bootply.com/rCr1B4wiKD