I know I could use float and put the image to the left, but how can I then have those numbers, the header, and those three columns?
HTML:
<div class="images">
<ul>
<li class="image"><img src="https://www.ofbizdemo.com/images/products/PC001/large.png" />
<p class="padding">Text Here</font>
</ul>
</div>
CSS:
.images ul li {
display: inline;
}
.image {
float: left; // float to the left
}
p.padding {
float: right;
padding-top: 0px;
padding-bottom: 0px;
padding-right: 500px;
padding-left: 150px;
}
I'm using that for my CSS, but my text does not get exactly aligned to the right hand side, and I'm unsure of how I can add those numbers that the picture shows.
Just as a starting point:
http://jsfiddle.net/wpQb9/1/
.col {
float: left;
padding: 0 20px;
width: 300px;
text-align: right;
position: relative;
}
.col:before {
position: absolute;
top: 20px;
left: 30px;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
border-radius: 20px;
background: yellow;
display: block;
}
.col:nth-child(1):before {
content:"1";
}
.col:nth-child(2):before {
content:"2";
}
.col:nth-child(3):before {
content:"3";
}
p {
margin-left: 100px;
}
.col being one of columns, a div element.
But seriously now: there are thousands of way to do it. My example is lacking: background images, proper paddings/margins, fonts(?), width of columns themself. That much please do your best to figure out. Protip: use google.
use a separate DIV for each of the 3 columns. a class for the text header and another for the text and then a class for the circle. Border-radius to make it round and I think you can figure out the rest. Does that answer your question?
Related
How can I align all my bullets perfectly?
Expected result: Bullets line up to one another
Actual result: They move depending on how big the text is for the
JSFiddle for clarification:
https://jsfiddle.net/hk12hhp1/
Result I want (look at red line):
http://prntscr.com/grt24m (make bullets aligned just like red line is straight)
Fiddle code:
<div id='center-everything'>
<ul>
<li>test1wef</li>
<li>test2ferwfwergwerg</li>
<li>test3grew</li>
</ul>
</div>
#center-everything{
text-align: center;
background-color: gray;
height: 100px;
width: 200px;
list-style-position: inside;
}
Note: I still want text-align to be center
An alternative solution, using pseudo-element to create the bullet, with position: absolute positioning it on the left.
#center-everything {
text-align: center;
background-color: gray;
height: 100px;
width: 200px;
list-style-position: inside;
}
ul {
list-style: none;
}
li {
padding-left: 20px;
position: relative;
}
li:before {
content: '☻';
position: absolute;
left: 0;
top: 1px;
font-size: 10px;
}
<div id='center-everything'>
<ul>
<li>test1wef</li>
<li>test2ferwfwergwerg</li>
<li>test3grew</li>
</ul>
</div>
Your question isn't at all clear about exactly what you mean by wanting the bullets vertically aligned on a centered list.
Having the bullets all the way to the left in a centered list is not any sort of standard typography conventions, so I think you might really be asking is for the entire left-aligned list inside the container? I've seen this asked more often than having the bullets float all the way to the left.
#center-everything {
text-align: center;
background-color: gray;
height: 100px;
width: 300px;
list-style-position: inside;
}
ul {
text-align: left;
padding-left: 0; /* remove any padding to stop it throwing off the "center" */
margin: auto; /* center the ul */
display: inline-block; /* hack to make the ul only as wide as its contents */
}
<div id='center-everything'>
<ul>
<li>test1wef</li>
<li>test2ferwfwergwerg</li>
<li>test3grew</li>
</ul>
</div>
To do this, you just need to change the styling for the ul, nothing else.
#center-everything{
background-color: gray;
height: 100px;
width: 300px;
}
li {
display: inline-block;
}
li:before {
content: "■"
}
span {
position: absolute;
left: 150px;
transform: translateX(-50%);
}
<div id='center-everything'>
<ul>
<li></li><span>test1wef</span><br>
<li></li><span>test2wef</span><br>
<li></li><span>test3wef</span><br>
</ul>
</div>
This is my HTML code:
<img class="centeredimage" src="BLACK.jpg"><br><br>
<p align="center" class="new"><b><span class="main_text">This is regarding....</span></b><br><br>
<span class = "a2017">Welcome to 2017</span><br><br>
<span class="coming_soon">Coming Soon</span></p><br><br>
This is my CSS code:
.centeredimage {
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
width: 200px;
height: 200px;
}
.new{
color:#FFFFFF;
}
.main_text{
font-size:20px;
letter-spacing: 8px;
}
.a2017{
font-size:15px ;
letter-spacing:2px ;
}
.coming_soon{
letter-spacing: 1px;
}
The image is aligned at center of the screen but the text instead of getting displayed after the image is displayed coinciding with the image.How do I make it come after the image so that both are aligned at middle of the screen at center?
Try this
.centeredimage {
display : block;
width: 200px;
margin: auto;
...
I use this code to center things in the middle of the screen, for example, a loader. It can have multiple parts, it doesn't matter. You just put all the parts into one div. I used to use the "margin" trick, and still do here and there, but these days I'm using the table/tablecell thing to get the job done. It works everywhere, phones etc. (note I don't deal with 10-year-old browsers). Below is some code straight from an instructional sample:
<style>
.app_style {
width: 100%;
height: 100%;
display: table;
}
.loader_style {
display: table-cell;
text-align: center;
vertical-align: middle;
}
.loader_icon_style {
border: 2px solid lightgray;
border-radius: 5px 5px 5px 5px;
}
.loader_bar_padding {
padding-top: 10px;
}
.loader_blurb {
width: inherit;
text-align: center;
font-size: 14px;
font-weight: bold;
color: yellow;
font-style: italic;
}
</style>
</head>
<body>
<sample-app class="app_style">
<div class="loader_style">
<img class="loader_icon_style" src="assets/images/r2-d2.jpg" />
<div class="loader_blurb loader_bar_padding">
May the force be with you...
</div>
<img class="loader_bar_padding" src="assets/images/loader-bar.gif" />
</div>
</sample-app>
</body>
If you want center the image and the text, not align only the image otherwise the text follow an other logic on the DOM, mostly if you use the absolute position for the image and not for the text.
You can use a wrapper div aligned to the center and put all content in it.
body {
background-color:#ff00ff;
}
.wrapper {
position: absolute;
top: 50%;
left: 50%;
margin-top: -150px;
margin-left: -100px;
width: 200px;
height: 300px;
}
.your_image {
width: 200px;
height: 200px;
}
.new {
color: #FFFFFF;
}
.main_text {
font-size: 20px;
letter-spacing: 8px;
}
.a2017 {
font-size: 15px;
letter-spacing: 2px;
}
.coming_soon {
letter-spacing: 1px;
}
<div class="wrapper">
<img class="your_image" src="https://upload.wikimedia.org/wikipedia/en/thumb/8/80/Wikipedia-logo-v2.svg/1122px-Wikipedia-logo-v2.svg.png"><br><br>
<p align="center" class="new"><b><span class="main_text">This is regarding....</span></b><br><br>
<span class="a2017">Welcome to 2017</span><br><br>
<span class="coming_soon">Coming Soon</span></p><br><br>
</div>
I prefer to use Flexbox. It simplifies a lot of the coding you need to do.
In your situation, just wrap your HTMl code in a div and make this your CSS:
div{
display: flex;
flex-direction: column;
justify-content: center;
}
.centeredimage {
display: block;
margin: 0 auto;
width: 200px;
height: 200px;
}
I have a simple inner/outer div problem where it's probably easier to explain through pictures. Here is my issue:
The comment "This is a witty comment." is not breaking down underneath the other 2 labels. Here is my HTML:
<div class="commentOuter">
<div class="commentAuthor">someauthor</div>
<div class="commentDate">17 minutes ago</div>
<div class="commentText"><span>This is a witty comment.</span></div>
</div>
And here's the CSS:
.commentOuter
{
border-radius: 4px;
width: 100%;
height: 20px;
float: left;
background-color: black;
margin-top: 10px;
padding: 5px;
}
.commentAuthor
{
float: left;
font-size: smaller;
color: #68a5d9;
display: block;
height: 15px;
}
.commentDate
{
float: left;
font-size: smaller;
margin-left: 5px;
color: #AAA;
display: block;
height: 15px;
}
.commentText
{
display: block;
width: 100%;
}
I don't understand that when I highlight the element in the dev tools, the div is not showing to be underneath the labels, as seen in this pic:
Any help is much appreciated.
Because you floated the previous 2 elements. If you need to move it below. Use a clear:
.commentText
{
clear:both;
display: block;
width: 100%;
}
You also have to remove the specified height for the .outerComment element.
Just because it's not floated, doesn't mean it won't be next to other elements.
See more here: https://css-tricks.com/all-about-floats/
I'm laying out a product page in HTML. My attempt to make the desc below the photo take up the width of the photo was to use absolute positioning. This worked well until I got a longer desc and I remembered it takes the element out of the flow causing the problem below. How should this be done?
I could not find a question that included the vertical and dynamic aspects of my question. If you are closing this as a dup please provide a link.
More details: At the top it has a div "item details" with two columns. Left column has a photo of variable height/width. Below that I have a text description of variable size that I want exactly as wide as the photo. Right column is "item details" with a max-width div. Below all of that I have more divs which should take the entire width.
Live url: http://www.morphmarket.com/snakes/ball-pythons/14074
HTML
<div class="detail-container">
<div class="item-details">
<div class="image-col">
<div class="image">
...
</div>
<div class="desc">
<b>Description.</b> {{ snake.desc }}
</div>
</div>
<div class="details-col">
...
</div>
</div> <!-- item details -->
<div class="store-details">
...
</div>
</div> <!-- item container -->
<div class="more-from-store">
...
</div>
CSS
.snake-page {
.detail-container {
margin-top: 10px;
//display: table-cell;
width: 100%;
.item-details {
display: table-row;
//display: table;
//width: 1px;
.image, div.desc, .details-col {
.white-box();
margin: 10px 0px;
}
.image-col {
display: inline-block;
position: relative;
.image {
position: relative;
.sold {
size: 10rem;
}
.img-thumbnail {
}
}
div.desc {
max-height: 150px;
padding: 10px;
position: absolute;
overflow:auto;
left: 0px;
right: 0px;
margin: 0 0 10px 0;
}
}
.details-col {
.title {
font-weight: bold;
font-size: 1.4em;
text-align: center;
margin-bottom: 10px;
}
font-size: 1.20em;
max-width: 400px;
padding: 10px;
margin-left: 10px;
display: inline-block;
//display: table-cell;
vertical-align: top;
background: #white;
.details {
.dl-horizontal {
#width: 120px;
dt {
width: #width;
}
dd {
margin-left: #width + 20px;
}
}
.label.trait {
margin-right: 0px;
}
}
.button-col {
div {
margin: 0 auto;
width: 85%;
}
}
}
}
.store-details {
display: table-cell;
width: 1px;
> * {
.white-box();
margin: 0 0 10px 0;
padding: 10px;
}
.store-policy {
}
.about-store {
}
}
} // detail container
}
I couldn't find documentation that says this, but we can see that a table-caption element takes the width of its containing table (as opposed to stretching out based on its own amount of text like a block element does).
Paste this at the bottom of your CSS file to see it in action (I overrode the properties that are in the way. If you adopt this solution you can merge the styles of course).
.snake-page .detail-container .item-details .image-col {
margin-top: 10px;
}
.snake-page .detail-container .item-details .image-col .image {
display: table-row;
}
.snake-page .detail-container .item-details .image-col div.desc {
position: static;
display: table-caption;
caption-side: bottom;
margin-top: 5px;
}
My solution makes both elements table related elements, the description into a table-caption and the image into a table-row, so they basically act as one table. By giving the description caption-side: bottom I moved the description to the bottom of the table.
I'm thinking you can do this by setting rows and cols with Bootstrap and vary the sizes for the cols based on what you need. Like this: http://jsfiddle.net/4d5WR/124/
For example, for the image,
<div class="row">
<div class="col-lg-3">
<div class="image">
<img src="http://www.pet-care-portal.com/images/BallPythonT3Pic1.jpg">
</div>
</div>
</div>
I have small problem with some design.
I have this very simple html:
<div>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
This is just a small part of a bigger widget. To make thsi widget work, I need at least this css:
div {
position: relative;
width: 400px;
height: 200px;
}
ul {
z-index: 99;
}
li {
display: block;
float: left;
width: 16px;
height: 16px;
}
Now I want to put list down into the midst of div. There is no problem with putting it down, but it is impossible for me to put it into middle. List can have any number of items.
JSfiddle: http://jsfiddle.net/MBxNU/1/
So far, I tried for example:
ul {
width: 100%;
display: block;
text-align: center;
}
But it didnt work and I have no clue why.
If you could give me some help, I'd appreciate it.
Your code with text-align: center doesn't work because you have floated items inside ul. You can use display: inline-block instead of float:
li {
display: inline-block;
width: 16px;
height: 16px;
background-color: red;
margin: 5px;
}
JSfiddle: http://jsfiddle.net/caprella/r2RjM/1/
Here you are ;)
div {
position: relative;
left: 20px;
top: 20px;
background-color: #EEE;
width: 400px;
text-align: center;
height: 200px;
}
ul {
padding: 0;
display: inline-block;
z-index: 99;
list-style: none inside;
}
li {
float: left;
width: 16px;
height: 16px;
background-color: red;
margin: 5px;
}
So the main idea is to set text-align: center for parent div and display: inline-block for ul, that's it )