Alright, this one should be pretty easy for you front-end guys out there. I have the styled purple link all set to go. I'm just having trouble getting the vertical line to look OK. Assume the line is 1px #000 solid
I kind-of got it working making a div w/ a bottom-border and floating the styled link to the right. If I do that, I can't seem to get there to be space between the divider line and the link.
The following involves some extra markup and uses table-cells.
HTML:
<div class="wrapper">
<span class="leader">
<b></b>
</span>
<span class="cell">
<button>Sample Button</button>
</span>
</div>
CSS:
.wrapper {
border: 1px dotted gray;
display: table;
width: 100%;
}
.wrapper .leader, .wrapper .cell {
display: table-cell;
vertical-align: middle;
}
.wrapper .leader {
width: 100%;
padding: 0 10px;
}
.wrapper .leader b {
display: block;
border-bottom: 1px solid red;
}
.wrapper button {
white-space: nowrap;
}
Demo at: http://jsfiddle.net/audetwebdesign/8aSBA/
There are a few advantages to this approach:
You can control the spacing to the left and right of the horizontal line
Vertical alignment is independent of font-size, line-height
You don't need to specify the width of the button
You can use a :before selector in css, though im not sure is compatable in < ie7
.button:before {
background: none repeat scroll 0 0 #000000;
content: "";
float: left;
height: 1px;
margin-top: 12px;
width: 59%;
}
Related
I'm trying to vertically center a text which is inside a div (.site-title), itself inside a div (.site-title-wrapper), and all of this inside another div (.site-header), which is the menu of the website.
Here are some pictures:
In green: .site-title-wrapper
In red: .site-title
and in white: .site-header
And I have the following CSS for these divs:
.site-title-wrapper {
display: table;
height: 100%;
position: absolute;
padding: 23px;
background-color: green;
}
and
.site-title {
font-family: "Roboto", sans-serif;
display: table-cell;
vertical-align: middle;
}
I've seen that using table and table-cell to vertically center a div inside another one was a good solution. It works fine, but the only thing I need to do is to force .site-title-wrapper to take all available height, so the green box goes down to the end of the white one (the menu).
The idea is to simply center the title with the menu elements.
I can't really change the html part, so I'm trying to fix it only with CSS.
Do you know how I can fix it?
.site-header{
width: 100%;
height: 100px;
border: 2px solid black;
}
.site-title-wrapper {
display: table;
height: 100%;
padding: 23px;
background-color: green;
}
.site-title {
font-family: "Roboto", sans-serif;
display: table-cell;
vertical-align: middle;
background-color: red;
}
<div class='site-header'>
<div class='site-title-wrapper'>
<div class='site-title'>
Some Text
</div>
</div>
</div>
EDIT: Here is a fiddle, in which what I tried works (I just removed the absolute) : https://jsfiddle.net/0xhL76gk/2/
I have an outer div and 2 inner divs - one left-alignd and another is right next to it. The issue I am having is that the left div is shorter then the right and then right wraps around the left.
Below is my html and CSS:
<div id='green'>
<div id="orange">test</div>
<div id="red">
Effects<br/>
Add Class<br/>
Color Animation<br/>
Easing<br/>
Effect<br/>
Hide<br/>
Remove Class
Show
Switch Class
Toggle
Toggle Class
</div>
</div>
and here is CSS:
#green {
padding-top: 0.75em;
padding-bottom: 0.25em;
padding-right: 1em;
overflow: hidden;
border:20px solid green;
}
#orange {
width:185px;
border:10px solid orange;
float:left;
}
#red {
border:5px solid red;
width: 100%;
display: block;
}
My question is how can I prevent the right div from wrapping around the left? Preferable without setting a margin on the right div.
I also want the red div to always be on the right of the orange div, never going under it or wrapping around it, even if the page is resized or if the page is viewed on a mobile browser
You can use flexbox for this. Using the following changes to your CSS above:
#green{
display: flex;
align-content: top;
padding-top: 0.75em;
padding-bottom: 0.25em;
padding-right: 1em;
overflow: hidden;
border:20px solid green;
}
#orange{
align-self:flex-start;
width: 185px;
border:10px solid orange;
}
#red{
width: 100%;
border:5px solid red;
}
If you want #orange to be the same height as #red, remove align-self: flex-start
Demo: http://codepen.io/anon/pen/YwOjyP
I got it working by adding display: inline-flex; to #green.
Look: https://jsfiddle.net/4k1ohc10/
By the way, you didn't ask for a specific browser, so you can check this page: http://caniuse.com/#feat=flexbox
How can I make two elements that are inline-block fit within a fixed width?
I don't necessarily know the width of the first element, and the second, longer, element (with white-space: nowrap) takes the width of the fixed element, so overflows the container.
/---------------------/
/Label: |Other content/ that just |
/ |keeps going a/nd overflows|
/---------------------/
JSFiddle
.fixed-width-container{
border: 1px red solid;
width: 200px;
white-space: nowrap;
}
.inline-block-1{
display: inline-block;
border: 1px blue solid;
vertical-align: top;
}
.inline-block-2{
display: inline-block;
white-space: normal;
}
<div class="fixed-width-container">
<div class="inline-block-1">Label:</div>
<div class="inline-block-2">Some really long text that is going to go down to the next line</div>
</div>
I would use display: table and display: table-cell. This is supported by all modern browsers (and IE > 7), and it isn't a float hack.
.fixed-width-container{
border: 1px red solid;
width: 200px;
display: table;
}
.inline-block-1{
white-space: nowrap;
display: table-cell;
border: 1px blue solid;
vertical-align: top;
}
.inline-block-2{
display: table-cell;
}
<div class="fixed-width-container">
<div class="inline-block-1">Label word:</div>
<div class="inline-block-2">Some really long text that is going to go down to the next line</div>
</div>
I'm a bigger fan of the float-overflow trick.
Change the css to this:
.fixed-width-container{
border: 1px red solid; /* Get rid of white space rule */
width: 200px;
}
.inline-block-1{
float: left;
border: 1px blue solid;
}
.inline-block-2{
display: block;
overflow: hidden;
}
Also, I would suggest using css class names that don't rely on "inline-block" in the name. If you ever need to change the display to something else (block, table-cell, etc.) it could get confusing.
I want to put a colorful outline around a bunch of inline elements. Is there any easy way to make this look right within the flow of the text?
Here's the HTML:
<span>Text Before</span>
<div class="border">
<div>This</div>
<div>is</div>
<div>not</div>
<div>a</div>
<div>public</div>
<div>service</div>
<div>announcement.</div>
</div>
<span>Text After</span>
Here's the CSS:
.border {
display: inline;
background-color: pink;
word-spacing: 10px;
padding: 2px 0 2px 0;
border: solid;
}
.border > div {
display: inline;
font-size: 30px;
background-color: lavender;
}
Screenshot with .border display: inline:
Screenshot with .border display: inline-block:
I want it to look roughly like this (accomplished with a mixture of manual line height, padding, and relative positioning... ugh!):
Basically, inline-block elements do everything right, but they don't break apart between lines as would inline elements. But inline elements collapse their height and have to be manually adjusted. Is there really no way around this?
Try adding a line-height on container div.
.border {
display: inline;
background-color: pink;
word-spacing: 10px;
padding: 2px 0 2px 0;
border: solid;
font-size: 30px;
}
.border > div {
display: inline-block;
margin-bottom: 15px;
background-color: lavender;
}
This is a cop-out answer on my part, but It Works™, at least for my purposes, so I'm using it until something better comes up.
If you're willing to commit the relatively minor crime of putting a span around the content of each inner div and setting the text style for the span instead of the div, you can make each of the divs an inline-block, give the background and border style to each individual div instead of the parent div, set the left/right margin of each div, to 0, and extend the borders of the divs via padding to make it seem like one continuous background rect. If you want an outline, you can use the nth-item selectors and set the borders accordingly.
Here's the revised HTML (also compressed onto one line, to get rid of the spaces between inline-block elements):
<span>Text Before</span>
<div class="border">
<div><span>This</span></div><div><span>is</span></div><div><span>not</span></div><div><span>a</span></div><div><span>public</span></div><div><span>service</span></div><div><span>announcement.</span></div>
</div>
<span>Text After</span>
And here's the revised CSS:
.border {
display: inline;
word-spacing: 0;
}
.border > div {
display: inline-block;
vertical-align: middle;
background-color: pink;
padding: 5px;
margin: 2px 0 2px 0;
border-top-style: solid;
border-bottom-style: solid;
}
.border > div:nth-child(1) {
border-left-style: solid;
}
.border > div:last-child {
border-right-style: solid;
}
.border > div > span {
background-color: lavender;
font-size: 30px;
vertical-align: middle;
}
And here's what it looks like:
This technique breaks down if you want something more complex than a background color with a border, but for my purposes, the benefits — those being far simpler CSS and mostly automatic layout — outweigh the cons.
I am trying to center align an image that is wrapped in a <span>, but I am having trouble doing so. I have uploaded my CSS and HTML to jsfiddle: http://jsfiddle.net/7nHhu/1/
I am trying to get the image to center align itself with the content in a "block" style (ie. all text above and below it, not wrapped to the left or right)
Any help would be greatly appreciated.
.imgframe {
border: 1px solid #EAEAEA;
display: inline-block;
margin: 8px;
}
.imgframe img {
border: 1px solid #FFFFFF;
margin: 0;
background: #F6F6F6;
padding: 8px;
-moz-box-shadow: 2px 2px 5px #CCCCCC;
-webkit-box-shadow: 2px 2px 5px #CCCCCC;
}
<span class="imgframe centerimg"><img src="http://i48.tinypic.com/31368e9.jpg" /></span>
I think it's more appropriate to use text-align for centering text rather than images. You could center an image by setting left and right margin auto.
img {
display: block;
margin-left: auto;
margin-right: auto;
height: auto;
padding-top: 10px; //margin-top doesn't work
}
Demo
Just make image wrapper block level element and text-align:center; it.
FIDDLE
or wrap it in another element if needed;
FIDDLE
In .imgframe, add width: 100%;
Given your requirements, to keep the .imgframe element in-line, to avoid it taking up the full width of the enclosing element, and working without adding wrapping elements to your mark-up, the following works:
body {
text-align: center;
}
body p {
text-align: left;
}
JS Fiddle demo.
This would, probably, be less intrusive if you had the elements from your Fiddle wrapped in a specific, target-able, element; rather than the body, as the method, above, requires you to reset the text-align for all elements contained within the body. So, personally, I'd use:
<div id="contentWrapper">
<p>...</p>
<span class="imgframe">
<img src="..." />
</span>
<p>...</p>
</div>
And:
#contentWrapper {
text-align: center;
}
#contentWrapper p {
text-align: left;
}
Just in order to minimise the amount of work required to tidy up afterwards.
span {position: absolute; top:0; left: 0; width: 100%; text-align: center;}
img {width:yourimagewidth; heigth: width:yourimageheigth}