I want to use display:inline-block per this SO Post here so that a div will take the dimensions of its children.
It works as stated in the post. The problem I'm having is that now my centering is broken by this change.
I was centering the div using
margin: 0px auto;
I want the div centered and I also want it to take the dimensions of it children.
Here is the CSS for the containing div:
#container-1{
display: inline-block;
position: relative;
top: 50px;
width: 1000px;
margin: 0px auto;
background: rgba(255, 255, 255, 0.5);
}
Here is the HTML - just two p tags in a div.
<div id="container-1">
<p id='si_but' class='si_match blue_but radius_all medium_white'>SignIn</p>
<p id='su_but' class='si_match orange_but radius_all medium_white'>SignUp</p>
</div>
and if needed the CSS for the 2 p tags:
.si_match{
cursor: pointer;
display: inline-block;
padding: 14px 14px;
text-decoration: none;
font-size: 14px;
}
#si_but{
position: relative;
left: 50px;
float: left;
}
#su_but{
position: relative;
right: 50px;
float: right;
}
Update:
The larger concern is why is my containing div about 200 px to the left. There is nothing indicating why this is.
Here you need to add a "text-align: center" to the parent element. So considering "< body >"to be its parent element.
body{
text-align: center;
}
#container-1{
display: inline-block;
position: relative;
top: 50px;
width: 1000px;
margin: 0px auto;
background: rgba(255, 255, 255, 0.5);
}
Here's the related HTML.
<body>
<div id="container-1">
<p id='si_but' class='si_match blue_but radius_all medium_white'>SignIn</p>
<p id='su_but' class='si_match orange_but radius_all medium_white'>SignUp</p>
</div>
</body>
Hope this helps. Cheers!!
You could add text-align:center to the body element:
body{
text-align:center;
}
Answer copied from here: CSS center display inline block?
You just need to use display table instead of inline-block.
#container-1{
display: table;
position: relative;
top: 50px;
width: 1000px;
margin: 0px auto;
background: rgba(255, 255, 255, 0.5);
}
text-align:center on the parent will center inline-block children.
Any misalignment is probaby related to the positioning you have applied. Just remove it along with the float.
#container-1 {
text-align: center;
}
.si_match {
cursor: pointer;
display: inline-block;
padding: 14px 14px;
text-decoration: none;
font-size: 14px;
border: 1px solid grey;
}
<div id="container-1">
<p id='si_but' class='si_match blue_but radius_all medium_white'>SignIn</p>
<p id='su_but' class='si_match orange_but radius_all medium_white'>SignUp</p>
</div>
Related
I need to display a border around a div tag with a title in the border itself. In order to do this, this is what I have come up with so far
.componentWrapper {
border: solid cadetblue;
border-radius: 40px;
padding: 10px;
width: 95%;
}
.componentTitle {
font-size: 18px;
width: 15%;
background-color: white;
margin-top: -25px;
}
<div class='componentWraper'><p class='componentTitle'>This is the title</p>This is the component body text</div>
As you can see I am using margin property to push the title up on top of the border. I am not sure if this is the proper approach to do this and I have the following questions.
I am positioning the title using pixels (margin) and a fixed value (-25px). This is a site that has to work on mobile phones, tablets as well. Is this an acceptable approach?
I am setting the background-color to white so that the border does not appear behind the text, is this an ok approach?
Is there a better and more acceptable way to do this, I do not want to use fieldset because we have little control over the border (border-radius).
There are three logical ways you can use to achieve this.
You can use a <fieldset> with a legend which is the basic HTML way of doing this. You can find more information about this here.
Use custom CSS with positioning, not negative margins or etc.:
body {
background: #fff;
}
.componentWraper {
margin: 40px; /* just for contrast */
position: relative;
border: 2px solid tomato;
border-radius: 12px;
padding: 20px;
}
.componentWraper .componentTitle {
position: absolute;
top: -25px;
background: #fff;
padding: 0 10px;
}
<div class='componentWraper'>
<p class='componentTitle'>This is the title</p>This is the component body text</div>
Use custom CSS with pseudo-elements:
body {
background: #fff;
}
.componentWraper {
margin: 40px; /* just for contrast */
position: relative;
border: 2px solid tomato;
border-radius: 12px;
padding: 20px;
}
.componentWraper::before {
content: 'This is the title';
position: absolute;
top: -10px;
padding: 0 10px;
background: #fff;
}
<div class='componentWraper'>This is the component body text</div>
I think you're on the right track. I'd make a few changes to have more control over the styling. You can use ems or pixels.
Wrap the title and content in a new div and give that a negative margin:
<div class='componentWrapper'>
<div>
<div class='componentTitle'>This is the title</div>
<div class='componentContent'>
<p>This is the component body text</p>
</div>
</div>
.componentWrapper div {
margin-top: -1em;
}
Set your title to display: inline-block and use padding to control the white space around it (instead of using width)
.componentTitle {
font-size: 18px;
background-color: white;
display: inline-block;
padding: .5em;
}
codepen
snippet:
.componentWrapper {
border: solid cadetblue;
border-radius: 40px;
padding: 10px;
width: 95%;
margin-top: 1em;
}
.componentWrapper div {
margin-top: -1.2em;
}
.componentTitle {
font-size: 18px;
background-color: white;
display: inline-block;
padding: .5em .3em;
}
<div class='componentWrapper'>
<div>
<div class='componentTitle'>This is the title</div>
<div class='componentContent'>
<p>This is the component body text</p>
</div>
</div>
This is what I came up with. I wanted to get rid of the negative margin, but couldn't figure out a way to do that.
See the Pen offset title by Yvonne Aburrow (#vogelbeere) on CodePen.
HTML
<div class="componentWrapper">This is the component body text</div>
CSS
.componentWrapper {
border: 1px solid blue;
border-radius: 40px;
padding: 16px;
width: 95%;
margin: 3em;
}
.componentWrapper:before {
content: "this is the title";
font-size: 18px;
width: 10%;
background-color: white;
border: 1px solid blue;
border-radius: 12px;
display: block;
margin-top: -29px;
padding: 3px;
}
I am not sure how a screen reader would deal with the title text being in the CSS (or how you would scale that up if you have a lot of different titles.
The project is to create a micro-blogging website similar to Twitter. I chose to name the site Chirper (how clever of me). Each post is structured by a parent div, an avatar div and a content div. The avatar and content divs are displayed inline, but they are not aligned properly. Any help is appreciated.
HTML:
<div class="chirp">
<div class="chirp_avatar_region">
<img src="img/avatar/default.png" alt="Avatar" width="64" height="64">
</div>
<div class="chirp_content">
<p>
USER
<span class="timeStamp">2013-11-22 16:43:59</span>
</p>
<p>
COMMENT
</p>
<p>
ReChirp!
</p>
</div>
The div's aren't aligned how I want them to be (level and 100% of the parent).
I can't post images, so here is a link to an imgur page: http://imgur.com/Mn9mE5q
Relevant CSS:
body {
font-family: Verdana, Geneva, sans-serif;
color: #000;
background-color: #666;
font-size: 1em;
}
/* Containers */
div {
margin-top: auto;
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
border-style: solid;
border-width: 3px;
border-color: #000;
padding: 10px;
}
div.pane {
width: 70%;
background-color: 0099FF;
}
div.chirp {
border-width: 1px;
margin-bottom: -1px;
width: 80%;
padding: 5px;
}
div.chirp_avatar_region {
display: inline-block;
width: 10%;
height: 100%;
text-align: center;
/*border-style: none;*/
}
div.chirp_content {
display: inline-block;
width: 80%;
height: 100%;
/*border-style: none;*/
}
div.chirp_avatar_region > img, div.chirp_content > p {
margin-top: 0;
vertical-align: middle;
}
You can either float your inner divs then clear the float following the container
or
use vertical-align:top to position your divs at the top of the container
Not entirely sure, but what I think is happening is that by defining position:inline-block, it's putting them on the same line, and making the line-height the height of the chirp_content container. In a sense anyway.
Set to vertical-align:top; and it should solve it.
Ex.
.chirp_content, .chirp_avatar_region{ vertical-align:top; }
JS Fiddle
Give to the avatar_region a float: left, and remove its width: and height: setting. Remove the chirp_content div, it circumvents the inlining.
I have 2 problems, but the second one can't be address until the first one is corrected. The page was looking and working as intended but when I came to work and started working on the page, it seems to be broken. I am using the same browser in both locations.
The problem is that the background for the div is set to auto, like all my other divs on the same page, but the last one for some reason is not spanning to the bottom of the image.
http://i.imgur.com/9DJa3Fp.png?1
<div class="items">
<h2><a name="friday">Friday catch of the day:</a></h2>
<img src="images/catch.png" align="right" alt="Sage-rubbed Double-cut Pork Chop" />
<p><span class="title">Alaskan Halibut with a Rich Loire Valley Beurre Blanc Sauce</span> - served with mashed purple Peruvian potatoes and haricot verts.</p>
<p><span class="title">Recommended pairing:</span> '98 Passi Emilio Vineyards Sauvignon Blanc</p>
</div>
CSS
.items {
margin: 20px;
height: auto;
width: 910px;
background-color: rgba(0, 0, 0, .7);
padding: 10px;
z-index: 1;
}
.items img {
float: left;
margin-right: 10px;
float: right;
border-radius: 6px;
width: auto;
padding: 8px;
background-color: #FFFFFF;
}
.items p {
font-family: 'PT Sans';
font-size: 16px;
}
.items a {
color: #FFFFFF;
text-decoration: none;
}
.items img {
float: left; <---- ???
margin-right: 10px;
float: right; <---- ???
border-radius: 6px;
width: auto;
padding: 8px;
background-color: #FFFFFF;
}
You're floating right and left. Choone one. You also need to clear your floats afterwards for normal flow to resume
add overflow: auto to items class.
.items {
margin: 20px;
height: auto;
width: 910px;
background-color: rgba(0, 0, 0, .7);
padding: 10px;
z-index: 1;
overflow: auto;
}
One solution could be adding an empty div and clear: both
HTML:
<div class="items">
...
<div class="clear"></div>
</div>
CSS:
.clear {
clear: both;
}
JSFiddle
Here you go. Save this code as a snippet for any future development. Just add the class .clearfix to the parent container if it contains floating childs and you're good to go :)
.clearfix{*zoom:1;}
.clearfix:before,.clearfix:after{display:table;content:"";line-height:0;}
.clearfix:after{clear:both;}
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.
I am working on WP using a template and I'm trying to get a button to float outside the main container. I went through some already posted questions here, but no luck.
I have tried with padding, margin, overflow, etc. The one thing that seems to work is by setting negative margin, but in that case the div is hidden by the main container.
Here's the HTML:
<div class="purchase_options_meta clearfix">
<div class="purchase_options">
<div id="deal_attributes_wrap" class="section ">
</div>
<div class="buy_button gb_ff font_x_large">
</div>
</div>
</div>
And here's the CSS I'm using:
.container.main {
width: 980px;
padding: 20px;
overflow: visible;
}
.purchase_options {
position: relative;
}
.buy_button {
position: absolute;
background: url(http://topgreekgyms.fitnessforum.gr/wp-content/uploads/2012/12/Button12.png) no-repeat center;
color: white;
height: 100px;
width: 375px;
left: -54px;
top: -16px;
}
.button {
background-color: transparent;
color: #ffffff;
}
.button:hover {
background-color: transparent;
color: #cccccc;
}
.buy_button a {
font-weight: bold;
font-size: 29px;
font-family: arial;
padding: 12px;
display: block;
white-space: nowrap;
position: relative;
margin: 15px 0 0 50px;
}
.buy_button a span {
position: absolute;
right: 33px;
padding: 0 5px;
}
And here's a link to the page. My problem is with the top red button at the left.
I would greatly appreciate any help!
Just in case that helps someone in the future:
I had to add this part of CSS in my code:
#deal_single.clearfix:after {
clear: both !important;
}
Just to be more specific '#deal_single' is the page id.