I've settle up sizes, table-cell, and stuff, yet it is not working. I need to align the girl image on the bottom of the div, the text and button are fine.
Here is my code:
<style type='text/css'>
.wrapperbannerbanner{
overflow:hidden;
color:#FFFFFF;
font-family:Arial, Helvetica, sans-serif;
font-size:15px;
font-weight:bold;
position: relative;
float: left;
left: 0px;
width: 200px;
background-color:#FF9900;
}
.toppadding {
margin-top: 5px;
margin-left: 2px;
margin-right: 2px;
}
.left2222{
position: relative;
/* float: left; */
left: 12px;
text-align:left;
}
.generalbanner001 {
background-color: #FFFFFF;
margin-top: 0.5%;
/* margin-bottom: 8px; */
margin-left: auto;
margin-right: auto;
width: 80px;
height: 35px;
position: relative;
float:left;
-webkit-border-radius: 4px;
-khtml-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
text-shadow: none;
}
.generalbanner001:hover {
background: #0a0d0f;
text-decoration: none;
-webkit-border-radius: 4px;
-khtml-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
text-shadow: none;
}
.conferir001 {
padding:8px 0 0 10px;
}
.imageleft1222{
float: left;
left: 4px;
min-width: 90px;
height:120px;
display:table;
}
.imgalign {
width:90px;
height:95px;
vertical-align:bottom;
display:table-cell;
}
</style>
<div class="wrapperbannerbanner">
<div class="toppadding">
<div class="imageleft1222"><div class="imgalign" style="background:url(http://0-media-cdn.foolz.us/ffuuka/board/foolz/thumb/1390/58/13905801439073s.png) no-repeat;"></div></div>
<div class="left2222">
<span>Vai criar um site? Hospede com quem entende do assunto</span>
<div class="generalbanner001"><div class="conferir001" style="color:#FF9900;">Conferir</div></div>
</div>
</div>
</div>
The Fiddle:
http://jsfiddle.net/4SmV7/1/
The crux here is setting the background-position on .imgalign
Demo Fiddle
Change your CSS for .imgalign to:
.imgalign {
width:90px;
height:95px;
vertical-align:bottom;
display:table-cell;
background-image:url(http://0-media-cdn.foolz.us/ffuuka/board/foolz/thumb/1390/58/13905801439073s.png);
background-position:bottom;
background-repeat:no-repeat;
}
And take the inline styles out for .imgalign:
<div class="wrapperbannerbanner">
<div class="toppadding">
<div class="imageleft1222">
<div class="imgalign"></div>
</div>
<div class="left2222"> <span>Vai criar um site? Hospede com quem entende do assunto</span>
<div class="generalbanner001">
<div class="conferir001" style="color:#FF9900;">Conferir</div>
</div>
</div>
</div>
</div>
More on background-position from MDN
The background-position CSS property sets the initial position,
relative to the background position layer defined by background-origin
for each defined background image.
You try to align bottom a div with a background-image. You need to set the height of this div equal to his parent height, and set the background-image alignment to bottom center
So you're using a background image that you need to align to the bottom, correct?
In that case, I would get rid of the class "imgalign" altogether, and have the below CSS on its container:
.imageleft1222{
float: left;
left: 4px;
min-width: 90px;
height:120px;
display:table;
background-image:url(http://0-media-cdn.foolz.us/ffuuka/board/foolz/thumb/1390/58/13905801439073s.png);
background-repeat: no-repeat;
background-position: bottom;
}
It's better to list the background properties separately because the Firefox browser doesn't always display it properly if you group them all into 'background'.
Related
I have a div representing a lesson that is dynamically "filled up" with a green span according to the student's percentage of completion of the lesson. So the height of the span is dynamically assigned. This works perfectly in all browsers except for Internet Explorer, where the span doesn't start from the bottom of the div, but it's half way in the middle,
as you can see from the pictures where the first lesson is 100% complete and the second is 25% complete:
Chrome, Firefox, Safari, Opera:
Internet Explorer:
My HTML is:
<div style="display:table; margin:0 auto;">
<div class="detail_image">
<div class="detail_image_cont">
<img src="images/thamatho/chapters/img.png" />
</div>
<span style="height:<?php echo $completepercentage."%";?>">
</span>
</div>
</div>
My CSS is:
.detail_image{
display: table-cell;
border: 4px solid #39C;
width:48px;
height:48px;
vertical-align: middle;
text-align:center;
-webkit-border-radius: 35px 35px 35px 35px;
-moz-border-radius:35px 35px 35px 35px;
border-radius: 35px 35px 35px 35px;
position:relative;
overflow:hidden;
background-color:transparent;
}
.detail_image > span {
width: 101%;
overflow: hidden;
left: -0.4px;
position: absolute;
background-color: #CFC;
bottom: 0px;
height: 0%;
z-index:1;
}
.detail_image_cont{ /* to center image in the div */
display:block;
width:100%;
text-align:center;
margin:0 auto;
position:relative;
z-index:999;
}
Add display: block to your span, it should help.
Problem is about , it works great on desktop but on mobile fails....
[http://jsfiddle.net/9vv914uL/][1]
i want to make this divider responsive... because it is working very well on higher resolutions , as you can see....
and bonus is to make words inside tag in different colors...
this is css stylesheet:
.divider {
text-align:center;
font-family: 'montserrat';
}
.divider hr {
margin-left:auto;
margin-right:auto;
width:40%;
}
.left {
float:left;
}
.right {
float:right;
}
this is
<div style="padding-top:10px; padding-bottom:20px;"class="divider">
<hr class="left" style="margin-top:12px;"/>BLUE RED<hr class="right" style="margin-top:12px;"/>
</div>
I dont know what to say about this problem, this is just plain text. I must go back to the stars <3
:)
There are other ways that this can be handled that would work better for what you are trying to do. In my example, I am using both a heading element and an empty div. The text in the heading element can be expanded as much as you would like without needing to worry about available space, and the solution is responsive out of the box.
HTML
<h3 class="divider">
<span>Title</span>
</h3>
<div class="divider">
<span></span>
</div>
CSS
.divider {
border-color: #000;
border-style: solid;
border-width: 0 0 1px;
height: 10px;
line-height: 20px;
text-align:center;
overflow: visable;
}
.divider span {
background-color: #FFF;
display: inline-block;
padding: 0 10px;
min-height: 20px;
min-width: 10%;
}
Fiddle: http://jsfiddle.net/6uux0cbn/1/
I'd probably do it like this rather than messing with floats:
.divider {
text-align: center;
}
.divider:after {
content: "";
height: 1px;
background: #000;
display: block;
position: relative;
top: -8px; /* this value depends on the font size */
}
.divider > span {
background: #fff;
padding: 0 10px;
position: relative;
z-index: 1;
}
<div class="divider"><span>BLUE RED</span></div>
HTML:
<div style="padding-top:10px; padding-bottom:20px;"class="divider">
<hr class="left" style="margin-top:12px;"/>
<div class="title">BLUE RED</div>
</div>
CSS:
.divider {
text-align:center;
font-family: 'montserrat';
position:relative;
height: 68px;
}
.div hr {
width:100%;
position: absolute;
z-index: 888;
}
.title {
position: absolute;
left:50%;
width:100px;
margin-left: -50px;
z-index: 9999;
top:15px;
background: white;
}
Container #666 has margin: 20px; overflow: hidden;.
Nodes #333 have margin: 20px 0 0 20px; float: left;.
Example, http://jsbin.com/owejal/3/edit or picture:
However, the intended result is:
container with 20px margin,
children with 20px margin in-between, but not with the container.
This could be achieved using negative padding (i.e. if container had padding: -20px 0 0 -20px), though such thing does not exist.
The desired result can be achieved using additional element (http://jsbin.com/owejal/4/), though I am keen to learn whether there is CSS only solution.
If you only care about the spacing between the elements, you can discard the pseudo element. It's only there for the background.
http://codepen.io/cimmanon/pen/mucDv
<div class="foo"></div>
<div class="group">
<div class="node"></div>
<div class="node"></div>
<div class="node"></div>
<div class="node"></div>
<div class="node"></div>
<div class="node"></div>
<div class="node"></div>
</div>
<div class="foo"></div>
The CSS:
.group {
overflow: hidden;
margin: -10px 0 -10px 10px;
padding-right: 10px;
position: relative;
}
.group:before {
display: block;
content: '';
position: absolute;
z-index: -1;
top: 10px;
right: 20px; /* 20px instead of 10px due to padding */
bottom: 10px;
left: 10px;
background: #666;
}
.node {
width: 100px;
height: 100px;
float: left;
background: #333;
margin: 10px;
}
.foo {
height: 20px;
background: #00f;
margin: 20px;
}
This is a little hacky, but how about just hiding the top and left margin areas with some strategically placed pseudo-elements?
http://jsfiddle.net/SUJtd/
.foo {height:20px; background:#00f; margin:20px 20px 0;}
.group {overflow:hidden; margin:0 20px 20px 0; background:#666; position:relative;}
.group:before{content:""; position:absolute; top:0; left:0; right:0; height:20px; background:#fff;}
.group:after{content:""; position:absolute; top:0; bottom:0; left:0; width:20px; background:#fff;}
.node {width:100px; height:100px; float:left; background:#333; margin:20px 0 0 20px;}
No extra HTML tag - but a class change & No Pseudo elements
A simple trick which probably should work for you :
http://jsbin.com/owejal/65/edit
Screenshot:
Will work with all possible number of nodes :)
<div class="foo"></div>
<div class="group">
<div class="node"></div>
<div class="node"></div>
<div class="node"></div>
<div class="node"></div>
<div class="node"></div>
<div class="node"></div>
<div class="node"></div>
</div>
<div class="foo2"></div>
CSS:
.group { overflow: hidden; margin: 20px; margin-bottom:0px; /* margin is required */ background: #666; }
.node { width: 100px; height: 100px; float: left; background: #333; margin: 0px 20px 20px 0px; /* there must 20px gap between every node, but not the container */ }
.foo { height: 20px; background: #00f; margin: 20px;}
.foo2{
height:20px;
background:#00f;
border-top:20px solid white;
margin:20px;
margin-top:-20px;
}
Since you didn't mention resizability as requirement, you could simple use a nth child declaration like in here:
http://jsbin.com/owejal/51/
However, this solution is optimized for fixed widths of parent container, so there should always be 4 elements in a row for example. Nevertheless, its css only.
Change the margin of the node to:
.node { margin: 0 20px 20px 0; }
See http://jsbin.com/owejal/52/edit. Note that this will still give you extra padding at the bottom, but this is a common issue that isn't easily solved. See http://css-tricks.com/spacing-the-bottom-of-modules/ for various ways to solve this (though in the case you presented, none of these solutions work).
The following CSS will get you the desired result, actually you will still have 2 limitations:
If you change the background of body, you need to update the border color for element .foo
The inner nodes still have right margin, this is also the case your desired result screen shot (.group can have 5 nodes, but in this solution it will only have 4).
.group {
overflow: hidden;
margin: 20px; /* margin is required */
background: #666;
}
.node {
width: 100px;
height: 100px;
float: left;
background: #333;
margin: 0px 20px 20px 0px;
}
.foo {
height: 20px;
background: #00f;
margin: 20px;
}
.group + .foo {
height: 20px;
background: #00f;
margin: 20px;
position: relative;
top:-40px;
border-top: 20px solid #fff;
}
You can still find the solution here
Given the following html:
<div class="body">
<div class="banner">
<div class="name">
<h2>
<a href="http://www.example.com">
<span class="bold">Test Link</span><br/>
</a>
</h2>
</div>
<div class="title">
<h3>A Connections Learning Partner Program</h3>
<p>Quality online learning for high school students in Oakland County and surrounding counties.
</p>
</div>
<div class="link">
Learn More
</div>
</div>
</div>
How can I vertically align .link a (the button) within .link without giving a height or width? Like this...
Here's my fiddle
Here is one way that you can do it. Your HTML is good, no need to change anything.
For the CSS:
.body { width: 920px; }
.banner {
background-color: #454545;
border-bottom: 3px solid #F9F9F9;
height: 100px;
margin: 0 0 5px;
padding: 0;
display: table;
}
.banner > div {
outline: 1px dotted yellow; /* optional to show cell edges... */
display: table-cell;
}
.banner .name {
width: 25%;
vertical-align: top;
padding-top: 25px; /* control top white space */
text-align: center;
}
.banner .name h2 {
color: #F9F9F9;
max-height: 55px;
text-transform: uppercase;
margin: 0;
padding: 0;
}
.banner .title {
width: 50%;
vertical-align: top;
padding-top: 25px;
}
.banner .title h3 {
font-size: 15px;
font-weight: bold;
line-height: 15px;
margin: 0px 0 0 0;
padding: 0;
}
.banner .title p {
font-size: 12px;
max-height: 35px;
overflow: hidden;
margin: 0;
padding: 0;
}
.banner .link {
width: 25%;
vertical-align: middle;
text-align: left; /* set to left, center or right as needed */
}
.banner .link a {
margin-left: 25px; /* controls left offset */
background-color: #FA9800;
border-radius: 5px 5px 5px 5px;
cursor: pointer;
display: inline-block; /* use inline-block if you want to center element */
font-size: 12px;
font-weight: bold;
height: 23px;
line-height: 23px;
text-align: center;
text-decoration: none;
width: 100px;
}
See the fiddle at: http://jsfiddle.net/audetwebdesign/jsG8F/
How This Works
The trick is to use display: table on your .banner container and then display: table-cell on your child div elements, and set the % widths to 25%, 50%, 25% respectively for .name, .title, .link.
You can then use vertical-align and text-align to control vertical and horizontal placement of the various text blocks.
I added comments related to using padding-top to control white space from the top of the banner.
For the .link a element, you can adjust the left margin (or right) as needed.
These CSS rules offer you a lot of fine control over the placement of the various elements within the banner.
Backwards Compatibility
The display: table-cell property is backwards compatible back to IE8.
Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/display
If the size of the element and banner are fixed, use margin-top to offset the element.
Marc Audet was very close but I ended up going a slightly different route.
I gave .link a a fixed top margin and made margin-left: auto; and margin-right: auto; and that did the trick.
Here is the fiddle for reference.
Please take a look at this laytout which i built with divs:
First of all you can ignore Header section
So Content has to be centered exactly at the center and it has a fixed width which is easy, but Left Column needs to extend from left side until it reaches Content and here is the difficult part, since the gap betwen Left Column and Content can be any length it's hard to know what width to set.
Now i know it would be fairly easy to do this with javascript but i would like to avoid that if possible.
EDIT as requested here is the code:
<div class="left_column"></div>
<div class="content"></div>
.left_column{
width:100px;
height:100px;
float:left;
}
.content{
width:100px;
height:100px;
margin:auto;
position:relative;
}
Take a look at Object-Oriented CSS. In particular, check out their grids page
tried percentages?
overflow: auto;
padding: 10px;
width: 45%;
try float left float right as well as display inline, you could also try width auto but that don't work too well
float:left;
width:auto;
height: auto;
display: inline;
there is also one more trick used in menus
<div id="mail_menu">
<ul>
<li><a href=something</a></li>
</ul>
</div>
css
#mail_menu {
position: relative;
top: 0px;
left: 0px; /* LTR */
z-index: 3;
color: #000;
}
#mail_menu ul {
list-style-type: none;
}
#mail_menu li {
display: inline;
float:left;
margin: 0px;
padding: 3px;
}
#mail_menu a {
color: #000;
background: #FFF;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
margin: 1px;
border-color:#CCC;
border-width:1px 0;
padding: 2px;
float:left;
border-width:1px;
border-style:solid;
border-bottom-color:#aaa;
border-right-color:#aaa;
border-top-color:#ddd;
border-left-color:#ddd;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
}
#mail_menu a:hover {
color: #0000DD;
text-decoration: none;
background-image: url(/images/lyel.png);
background-repeat: repeat-x;
}
css to middle something
.middle {
display: block;
width: 50em;
margin-left: auto;
margin-right: auto
}
and finally some table values for display to mess with
.td {
display: table-cell;
display:inline
}
.wrap{
position: inherit;
}
.tr {
display: table-row;
display:inline
}
table {
border-collapse: collapse;
}
th {
text-align: left; /* LTR */
padding-right: 1em; /* LTR */
border-bottom: 3px solid #ccc;
}
I would use percentages, but go 1% short of where you should. I've found a lot of times a browser will "round up" a pixel or something, so if you have your percentages totaling 100%, any extra added will push a div below.
For instance, if you wanted two divs, one on the right and one on the left, have one of them have width:49%; and the other width:50%;.
This can be accomplished using this hack, please try this:
div.header { height: 50px; line-height: 50px; background-color: #222; color: #eee; }
div.wrapper { background-color: #b261da;position: relative;z-index: 0; }
div.wrapper div.content { width: 600px;margin: 0 auto; background-color: #6189fe; color: #fefefe; }
div.wrapper div.left-column { background-color: #00fe72; position: relative;width: 550px;float: left;z-index: -1000; }
with this markup:
<div class="header">Header</div>
<div class="wrapper">
<div class="left-column">Left Column</div>
<div class="content">Content</div>
</div>
Note the left-column will be cutted if you resize the screen too much. Either way, I hope it helps.