I have a list of divs with a variable height that which needs to be float'ed next to each other. The problem is the comment 4 should be placed above comment 2. But of course it can't do that because the comment 3 is taking its place.
Is this somehow doable in css with out changing the markup too much? The comments are added dynamically so its not always 5 comments. I made a jsfiddle showing the problem http://jsfiddle.net/Kv2Qf/ - What I have currently is this:
<div id="CommentsContainer">
<div class="Comment">
<div class="CommentContent" style="height: 250px;">
Comment 1
</div>
</div>
<div class="Comment">
<div class="CommentContent" style="height: 100px;">
Comment 2
</div>
</div>
<div class="Comment">
<div class="CommentContent" style="height: 200px;">
Comment 3
</div>
</div>
<div class="Comment">
<div class="CommentContent" style="height: 250px;">
Comment 4
</div>
</div>
</div>
With the styling:
#CommentsContainer
{
width: 783px;
height: 500px;
background-color: #f2f2f2;
}
.Comment
{
width: 229px;
float: left;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;
margin-bottom: 10px;
margin-right: 10px;
border: 1px solid #aaaaaa;
background-color: #fffec7;
}
Result:
Expected Result:
You can try giving a negative margin-top to the fourth box:
<div class="Comment" style="margin-top:-90px;">
<div class="CommentContent" style="height: 250px;">
Comment 4
</div>
</div>
Works in IE and Firefox, never tested in other browsers.
Related
I'm having trouble trying to implement the styling shown in this image using CSS. My problem is how to make the horizontal yellow line over the title "nossos numeros" and the vertical blue lines between "Cursos", "Alunos" and "Aulas".
I'm using also Bootstrap 4.
I want this:
I did this:
<section class="bg-light" id="portfolio" style="background-color: #ffffff;">
<div class="container-fluid">
<div class="row text-center">
<div class="col-sm-3">
<p class="font-square2" style="border-top: 5px yellow solid;">
NOSSOS <br> NÚMEROS</p>
</div>
<div class="col-sm-3" style="padding-top: 50px; border-right: 1px blue solid; ">
<img class="img-fluid" src="img/icone_cursos.png">
<div class="portfolio-caption">
<p class="font-square"> 1123 </p>
<p class="font-square"><strong>Cursos</strong></p>
</div>
</div>
<div class="col-sm-3" style="padding-top: 50px; border-right: 1px blue solid;">
<img class="img-fluid" src="img/icone_alunos.png">
<div class="portfolio-caption">
<p class="font-square"> 34534 </p>
<p class="font-square"><strong>Alunos</strong></p>
</div>
</div>
<div class="col-sm-3" style="padding-top: 65px;">
<img class="img-fluid" src="img/icone_aulas.png">
<div class="portfolio-caption">
<p class="font-square"> 4566 </p>
<p class="font-square"><strong>Aulas</strong></p>
</div>
</div>
</div>
</div>
</section>
but now how I can set the size of the border that I want with a color ?
Thanks in advance!
In this way you can't. You have to use preudoelements. Example:
div {
width : 200px;
height : 50px;
}
div:before {
content : "";
position: absolute;
left : 0;
bottom : 0;
height : 1px;
width : 50%;
border-bottom:1px solid yellow;
}
<div>Item 1</div>
<div>Item 2</div>
You can use pseudo elements for this
Try this
#fortopborder:before {
height: 10px;
display: block;
width: 100px;
background: red;
content: '';
}
#forrightborder:after {
display: block;
content: '';
background: blue;
Width: 10px;
height: 100px;
margin-top: -120px;
Float:right;
}
I've got a 4-col page and I'm inserting content. It works OK, but I can't get my first div to align to top in inline-blocks. I'm pretty newbie so I'm thinking I'm missing something. (Tried padding 0; in divs.)
Thanks. Milt.
<html>
<style>
html, body, #content { margin: 0px; height: 100%; width: 100%; padding: 0px;}
div.outer { background-color: lightgreen }
div.inner { display: inline-block; }
div.WebTopic { width: 190px;}
.col {
position: absolute;
top: 0px; bottom: 0px;
margin: left: 10px;
border: 1px solid black;
background-color: seashell;
}
.col-1 { left: 0px; width: 400px; top: 0px;}
.col-2 { left: 401px; width: 200px; top 0px; }
.col-3 { left: 601px; width: 400px; }
.col-4 { left: 1001px; width: 50px; }
</style>
<body>
<div id="content">
<div class="col col-1">
<div class="outer">
<div class="inner">
<div class="WebTopic">
<p>??? Why is this at the foot of the frame? Would like it at top.</p>
</div>
<p class="fanRating">HTML Fan rated #1</p>
</div>
<div class="inner">
<div class="WebTopic">
<p>CSS is used for describing the presentation of web pages. The CSS tutorial section will help you learn the essentials of CSS, so that you can fine control the style and layout of your HTML document.</p>
</div>
<p class="fanRating">CCS Fan Rated #3</p>
</div>
</div> <!-- OUTER 1 END -->
<p>Stuff here in usual block mode</p>
<!-- OUTER 2 START -->
<div class="outer">
<div class="inner">
<div class="WebTopic">
<p>HTML is a markup language that is used for creating web pages. </p>
</div>
<p class="fanRating">HTML Fan rated #1</p>
</div>
<div class="inner">
<div class="WebTopic">
<p>CSS is used for describing the presentation of web pages. Loads more words. Loads more words. Loads more words. Loads more words. Loads more words. Loads more words. Loads more words. </p>
</div>
<p class="fanRating">CCS Fan Rated #3</p>
</div>
</div> <!-- OUTER 2 END -->
</div>
<div class="col col-2">
COLUMN 2 -------------
</div>
<!-- COLUMN 3 START -->
<div class="col col-3">
<div class="outer">
<div class="inner">
<div class="WebTopic">
<p>??? Why is this at the foot of the frame? Would like it at top. Tons of text. Tons of text. Tons of text. Tons of text. Tons of text. </p>
</div>
<p class="fanRating">HTML Fan rated #1</p>
</div>
<div class="inner">
<div class="WebTopic">
<p>CSS is used for describing the presentation of web pages. The CSS tutorial section will help you learn the essentials of CSS, so that you can fine control the style and layout of your HTML document.</p>
</div>
<p class="fanRating">CCS Fan Rated #3</p>
</div>
</div>
</div>
<div class="col col-4">
COL 4
</div>
</body>
<html>
Since it's not explicitly declared, you will probably need to add vertical-align: top to the inline-block elements.
e.g.
div.inner {
display: inline-block;
vertical-align: top;
}
Here it is applied to your code:
Before: https://jsfiddle.net/hu6yosgq/1/
After: https://jsfiddle.net/hu6yosgq/2/
This is probably much easier than I'm making it sound.
Basically I have 6 Images, each with a button underneath...
This is what it looks like:
I just place them like this:
<img src="Image.png" width="350" height="208" style="margin: 0px 16px">
<img src="Image.png.png" width="350" height="208" style="margin: 0px 16px">
<img src="Button.png" width="282" height="84" style="margin: 0px 16px">
<img src="Button.png" width="282" height="84" style="margin: 0px 16px">
It looks great on a typical browser window. But when I make the window narrower, it goes like this:
Which makes sense give how I list my images/buttons.
But I want them to look like this when the window is narrowed:
What can I add to my very basic HTML to keep this in a nice and format no matter how wide the window is?
Ideally I'd like to go from a 2 by x grid as max, down to a 1 by x grid as seen in the first and final images.
A push in the right direction would be amazing.
I did look HERE on Stackoverflow, but it's far more complex as only works with squares.
I look forward to your help :D
UPDATE
https://jsfiddle.net/du6Lu4ge/
looks like this:
when resized, looks like this:
:(
I would do something like this:
https://jsfiddle.net/du6Lu4ge/3/
Hope it helps you out!
What I did was to wrap the image and the button in a div .img-wrapper styled with display: inline-block
this example is working full responsive, you can simply edit the css and add viewports.
html:
<div class="imageContainer">
<div class="imageBlock">
<!--<img class="image" src="image.png">-->
<div class="image">
your image
</div>
</div>
<div class="buttonBlock">
<!--<img class="button" srck="button.png">-->
<div class="button">
your button
</div>
</div>
</div>
<div class="imageContainer">
<div class="imageBlock">
<!--<img class="image" src="image.png">-->
<div class="image">
your image
</div>
</div>
<div class="buttonBlock">
<!--<img class="button" srck="button.png">-->
<div class="button">
your button
</div>
</div>
</div>
<div class="imageContainer">
<div class="imageBlock">
<!--<img class="image" src="image.png">-->
<div class="image">
your image
</div>
</div>
<div class="buttonBlock">
<!--<img class="button" srck="button.png">-->
<div class="button">
your button
</div>
</div>
</div>
<div class="imageContainer">
<div class="imageBlock">
<!--<img class="image" src="image.png">-->
<div class="image">
your image
</div>
</div>
<div class="buttonBlock">
<!--<img class="button" srck="button.png">-->
<div class="button">
your button
</div>
</div>
</div>
css:
.imageContainer {
width: 400px;
display: inline-block;
}
.imageContainer .imageBlock {
display: inline-block;
}
.imageContainer .imageBlock .image {
display: inline-block;
width: 400px;
height: 300px;
background-color: darkred;
}
.imageContainer .buttonBlock {
display: inline-block;
text-align: center;
}
.imageContainer .buttonBlock .button {
display: inline-block;
width: 300px;
margin: 10px 50px; /* simple way to center it */
height: 100px;
background-color: cyan;
}
you can test it on https://jsfiddle.net/q10fbesm/
edit: if you need a 2 line grid, simply put a container arround this html, style it with max-widht: 801px;
Sorry for the title, couldn't think about a better description for now.
Situation: Mouse over the progress bar to show a title. The small area (in my real case it is bigger) from the gray that mix with the green did not show the title. Looks like the number is a layer ahead of the progress bar.
http://jsfiddle.net/w6fpszkx/
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading text-center">Title</div>
<div class="panel-body" style="padding: 0px 15px 15px 15px;">
<p class="text-center" style="font-size: 110px; line-height: 1;">82<span style="font-size: 23px;">%</span></p>
<div class="progress">
<div title="" data-html="true" class="progress-bar progress-bar-success" style="width: 82%" data-original-title="ON TIME<br><span class='label label-success' style='display: inline-block; width: 100%; margin-bottom: 5px;'>9 (82%)</span>">
<span>9 (82%)</span>
</div>
<div title="" data-html="true" class="progress-bar progress-bar-danger" style="width: 18%" data-original-title="EXPIRED<br><span class='label label-danger' style='display: inline-block; width: 100%; margin-bottom: 5px;'>2 (18%)</span>">
<span>2 (18%)</span>
</div>
</div>
</div>
</div>
</div>
Is it possible to reduce the top and bottom gray area from the "82" number to the top and bottom limits of the numbert itself? Thanks.
Yes. you have to adjust better the line-height of your element.
.text-center {
line-height: 0.75;
}
(and I removed the value "1" you added as style online in the html)
JSFIDDLE
Edited: But to be sure your tooltip will always show just add:
.progress {
position:relative;
z-index:1;
}
so your bar will always be OVER the number:
updated FIDDLE
This is probably a pretty basic question, but I have a banner with an image on the left and text on the right. Under the banner is just a block of color. When the page gets smaller, my expectation is that the bits in the banner would stack (maintaining the background color for both) and the block of color (class="blue-line") would fall beneath them.
Here is the mark-up:
<section>
<div class="row header">
<div class="col-sm-6">
<img src="../images/logo.png" height="100px" />
</div>
<div class="col-sm-6 title">
<h2>Some Title Text</h2>
</div>
</div>
<div class="row">
<div class="col-sm-12 blue-line"></div>
</div>
</section>
and the css
.header {
background-color: #F2EBCC;
border: 10px solid #F2EBCC;
height: 120px;
}
.row > .title {
text-align: right;
top: 45%;
}
Thanks in advance!
JSFiddle: http://jsfiddle.net/3n6Kd/
try this:
<section>
<div class="row header">
<div class="col-sm-6">
<img src="../images/logo.png" height="100px" />
</div>
<div class="col-sm-6 title">
<h2>Some Title Text</h2>
</div>
</div>
<div class="row">
<div class="col-sm-12 blue-line"></div>
</div>
and:
.header {
background-color: #F2EBCC;
height: 120px;
}
.title {
text-align: right;
display: block;
padding: 10px;
}
.blue-line {
margin-top:10px;
height: 15px;
background-color: blue;
}
the text go under the first column not the blue-line, but it seems to appear above the blue-line so try it in your computer because some time jsfiddle.net don't show code correctly.
hope it will help you.