This is my CSS.
<style type="text/css"> .chart-legend {
text-align: center;
}
.chart-legend li {
list-style-type: none;
padding-top: 15px;
}
.chart-legend li span {
display: inline-block;
width: 12px;
height: 12px;
margin-right: 5px;
}
</style>
HTML
<div class="col-xs-7 col-md-6" class="thumbnail">
<div class="thumbnail" style="width:100%">
<h4> <span class="label label-primary">{{ a.title }}</span></h4>
<div>
<canvas id="canvas{{loopIndex}}" height="450" width="600"></canvas>
</div>
<div id="js-legend" class="chart-legend">
</div>
</div>
</div>
Here, the first legend entry gets aligned to the center, whereas the second entry does not go right below the aligned first one, but leaving some space towards the right. Below, is the image. Any help would be much appreciated. Thanks in advance :)
They both look centred to me. They are individually centred, and as they are different lengths, they will not have their left edges aligned with each other.
I suspect you want to let them left align inside a div, and then centre the div.
Also, unless I'm missing something, you haven't included all the HTML necessary to generate your attached image.
They are centered,Because of different length its look like this..
If you want something like this.You should set a padding:somthing according to your need and if its and for html element you can set left property as well.
Hope this will help you..
Thanks all :) But this kinda worked well for me! :)
.chart-legend {
width: 50%;
margin: 0 auto;
}
Related
I have two elements as close as I possibly can get them. If you're curious, the first is an scroll-to-top script that the user can click, and below it is a flat background. That hairline is really annoying me.
Any help is appreciated!
/*SCROLL TO TOP*/
.scroll-top-wrapper img{
width: 134px;
display: block;
margin-left: auto;
margin-right: auto;
cursor: pointer;
}
.border_background{
background: #162a53;
height: 416px;
}
...
<!-- SCROLL TO TOP -->
<div class="scroll-top-wrapper">
<span class="scroll-top-inner">
<img src="../images/misc/scroll_to_top.svg" onmouseover="this.src='../images/misc/scroll_to_top_hover.svg';" onmouseout="this.src='../images/misc/scroll_to_top.svg';" />
</span>
</div>
<!-- LIGHT-COLORED BORDER -->
<div class="border_background">
....
Try adding a reset file. or margin: 0; Remember html tags have default style rules so you have to get rid of them.
I think the problem is in your image. There's a slight hairline, left in the original image, when you edited this image. So try to re-edit the image and remove that hairline.
How can I center-justify a list of links in CSS?
This is similar to this question: How to Center-Justify text in CSS?, except using links instead of text. The fiddle from that answer there (http://jsfiddle.net/L4pzm/) doesn't work when I use links instead of text.
This is how they did it in the above fiddle:
.center-justified {
margin: 0 auto;
text-align: justify;
width: 30em;
}
Here is the fiddle I created: http://jsfiddle.net/hsm4w0p5/
<div class="center-justified"><p>
First Second<br>
Third <a href="4">Fourth Fifth</p>
</div>
As you can see in the example above, the links aren't justified. I want to make it so that the word "Second" is aligned to the right to match with the word "Fifth".
I don't think this is possible using text-align: justify, but can use flexbox to do something similar:
Html:
<div class="center-justified">
<div class="row">
First Second
</div>
<div class="row">
Third <a href="4">Fourth Fifth
</div>
</div>
CSS:
.center-justified {
margin: 0 auto;
width: 30em;
}
.row {
display: flex;
justify-content: space-between;
}
a {
text-decoration: none;
}
http://jsfiddle.net/czcegf2d/1/
Be sure to check the browser compatibility of flexbox (which is quite good these days) and see that it fits your needs. http://caniuse.com/#feat=flexbox
If you don't need to be dynamic you could target each link with the :nth-child(n) CSS selector to float left and right inside the .center-justified container.
like:
.center-justified a:nth-child(2n) {float:right}
when I add a border to my <h3> tag it wraps around the row instead of the actual element inside it. I have tried various changes of the HTML structure and CSS however I am unable to find a solution.
Here is my HTML:
<div class="container">
<div class="row">
<div class="brand col-md-5"><img src="media/img/logo.png" alt="Driven Car Sales" class="img-rounded logo-custom"></div>
<h3 class="phone-number col-md-7">01429 7654287</h3>
</div>
</div>
Here is my CSS:
.phone-number {
text-align: right;
margin-top: 2.8em;
diaplay: inline-block;
border: 1px solid orange;
As you can see the text aligns right as I need the number to display right of the page.
Any tips would be much appreciated.
almost good, change
diaplay: inline-block;
to
display: inline-block;
Wrap the h3 with a div with the class col-md-7.
The col-md-7 class is used for a column and in most cases, you don't really apply it directly to elements like a header tag.
I have a problem with regards to achieving a specific design goal, and I hope you can help me out here.
I made a picture in PS that I hope explains to you what I want:
Every part of this picture should be in an individual tag (for example div), and be placed like this.
The logo should be placed on top of the big picture, with just a little bit of space between the edges. The name is placed on level with the bottom of the picture OR in the middle (whatever looks best).
The headline (new 911) is placed along with the top of the big picture, the description is in the middle (always middle, length of text will vary) and the footer (info info) is aligned with the bottom of the picture.
Is this something anyone could help me with?
I have some code, but it doesn't work exactly as planned. Here's my HTML:
<div class="content">
<div class="left">
<div class="poster">
<div class="poster_img">
<img src="https://lh6.googleusercontent.com/-cC6WK7FOx_g/AAAAAAAAAAI/AAAAAAAAAAA/QQ41pWU9UUQ/s100-c-k/photo.jpg" height="50" />
</div>
<div class="poster_name">Porsche</div>
</div>
<div class="img">
<img src="http://i1.ytimg.com/vi/k7dEsMCFfFw/mqdefault.jpg" width="220" />
</div>
</div>
<div class="right">
<div class="header">The new Porsche 911 Turbo. Breaking new ground.</div>
<div class="main">With the new Porsche 911 Turbo, we have once again questioned everything and started from scratch. We pushed the boundaries...</div>
<div class="footer">
<div class="info1">info</div>
<div class="info2">info</div>
</div>
</div>
Here's my CSS:
.content {
position: relative;
clear: all;
margin: 5px;
margin-top: 10px;
}
.left {
display: table-cell;
}
.poster {
position: relative;
margin-bottom: -50px;
height: 50px;
}
.poster_img {
display: table-cell;
position: absolute;
}
.poster_name {
display: table-cell;
padding-left: 52px;
font-size: 15px;
}
.img {}
.right {
display: table-cell;
padding-left: 10px;
}
.header {}
.main {}
.footer {}
.info1 {
display: table-cell;
}
.info2 {
display:table-cell;
padding-left: 25px;
}
Hope you can help me out here! :)
Aleksander.
Positioning elements with CSS is not as complicated as it seems (if your design concept is good).
I like using grids to cleanly position elements. However most of the time position: absolute; with a position: relative; on the parent element will suffice.
Read on about this here: Absolute Positioning Inside Relative Positioning
Also try to find a site that has a similar design and explore the source. It looks like porsche would be a good place to start. There are also lots of "Design Inspiration" sites were you might find what you're looking for.
Good luck.
Rather then going into the depths of positioning, you may want to consider a simple float in combination with clear. usually works well enough - given the right stack order.
I need your help - I have this CSS and HTML; I need the text to align to the right of the image. But for some reason, they keep pushing to the bottom of the image. What I'm looking for infact is to have the details next to the image in a grid from left to right.
Here's my code
<html>
<head>
<style type="text/css">
#container { font-size: 12px; font-family: 'Lucida Grande',Verdana,sans-serif; text-align: center; }
#container a.name_link{
text-decoration: none;
color: #8E190B;
font-weight: bold;
padding-bottom: 8px;
}
#image { width:100px; height:104px; border: 2px solid #e9e3dd; float:left;}
#text { padding-top: 5px; padding-bottom:5px; }
.horizontal_banner {float:left; margin: 2px; padding: 4px 2px 10px 10px; }
</style>
</head>
<body>
<div class="horizontal_banner">
<div id="container">
<a href="details.php?id=42">
<img src="uploads/Lisa.jpg" id="image" title="Lisa"/></a> </div>
<div id="name_container">
<a class="name_link" href="details.php?id=42">Lisa</a> </div>
<div id="text">Not available</div>
<div id="text">Not Specified</div>
<div id="text">Female</div>
</div>
<div class="horizontal_banner">
<div id="container">
<a href="details.php?id=23">
<img src="uploads/Lucky.jpg" id="image" title="Lucky" /></a> </div>
<div id="name_container">
<a class="name_link" href="details.php?id=23">Lucky</a> </div>
<div id="text">Employed</div>
<div id="text">25 Years</div>
<div id="text">Male</div>
</div>
</body>
</html>
Any help will be greatly appreciated.
To do so, you need to specify a fixed width to .horizontal_banner . 200x worked for me when I tried your example.
Something like this? http://jsfiddle.net/CvZWG/
I added new rules to .horizontal_banner to make them float left. Also, you're using the text id on divs multiple times in your HTML. IDs are supposed to be unique, if you want to use it multiple times you should use class instead of id.
You have a number of options depending on how long the text is.
However, looking at your code I would suggest... you kill all those id's and make them classes, the interpreter balks at multiple id's with the same name, that's issue number 1.
Issue 2, float: the to the left, since it's a block element, and give it a height and width. It's good practice to give anything that is floating an height and a width so the browser knows what it's working with. Don't forget clearance for margin and padding, you might want to consider some reset.css rules if you haven't set that up yet. http://sixrevisions.com/css/css-tips/css-tip-1-resetting-your-styles-with-css-reset/
Issue 3, you might have to go as far as floating those "text" divs right, although you might want to consider a or for this situation since all that data looks the same and will be a child of the same class. http://www.codingforums.com/showthread.php?t=186697
Good luck.