Adam Things

Dynamically Center Div Within Div

Coding, CSS, ,

Dynamically Center Div Within Div turned out to be a bit harder to accomplish with CSS than I wanted. I had to handle a case with internationalization where a div with text was contained in a div and need to be centered vertically. The catch was that the text could be from one line to multiple lines. This was the solution I found.

Html Code:

<div id="page">
 <div id="content_container">
   <div id="content">
     <p>your contentyour contentyour contentyour contentyour contentyour contentyour contentyour contentyour contentyour contentyour contentyour contentyour contentyour contentyour contentyour contentyour contentyour contentyour contentyour contentyour contentyour contentyour contentyour contentyour contentyour contentyour contentyour contentyour contentyour contentyour contentyour contentyour contentyour content</p>
   </div>
 </div>
</div>

Css Code:

#content-outer {
 display:table;
 overflow:hidden;
 margin:0px auto; 
 height:100%;
 width:465px;
}

#content-inner {
 display:table-cell;
 vertical-align: middle;
}

html, body {
 height:100%;
}

Jsfiddle Here

If anyone has a better solution for dynamically vertically centering a div within a div I would love to hear it.

HTML CSS Progress Bar

Simple HTML CSS Progress Bar Using Squares with JSFiddle

Coding, CSS, ,

It took awhile to come across a progress bar that was light and had rounded sections like I wanted. I created a progress bar that is mainly HTML and CSS except for updating the width using JavaScript. The concept is quite simple, we overlay however many squares we want with a background div for the progress meter. Lets take a look at the HTML markup for this.

<div class="Progressbar">
    <div class="ProgressbarMeter"></div>
    <div class="InnerDivs"></div>
    <div class="InnerDivs"></div>
    <div class="InnerDivs"></div>
    <div class="InnerDivs"></div>
    <div class="InnerDivs"></div>
</div>

Its really simple, we have a containing div that holds it all together and controls the main width for the progress bar. Inside Progressbar we have 6 divs total; 1 div is the progress meter bar and the other 5 are the div overlays for the squares.

Now for the CSS portion.

.Progressbar {
    background-color: #d7d7d7;
    width: 110px;
    margin-top: 1px;
    position: relative;
    height: 41px;
    border-radius: 3px;
}
.ProgressbarMeter {
    background-color: #669900;
    width: 40%; /*This controls the green progress bar.*/
    margin-top: 1px;
    height: 40px;
    border-radius: 3px;
    position: absolute;
}
.InnerDivs {
    border: 1px solid black;
    width: 20px;
    height: 40px;
    border-radius: 3px;
    float: left;
    position:relative;
}

The only item really to take note of within the CSS is the width under ProgressbarMeter. This controls the width of the progress bar.

Here is a quick image of what it looks like.

HTML CSS Progress Bar

HTML CSS Progress Bar

JSFIDDLE Link to the above progress bar example: JsFiddle HTML CSS Progress Bar

Div Border With Rounded Corners And Gradient Background

Coding, CSS, , , ,

Getting a div to have rounded corners with CSS is not too difficult of a task. I came across a solution I would like to share quickly and briefly. Please note I found it only works in IE9, Firefox and Chrome. It’s really only a couple lines of CSS so lets’ take a look.

.roundedCorners {
   -webkit-border-radius:10px;
    -moz-border-radius:10px;
    border-radius: 10px;
}

By setting these 3 values, you get a pretty nice rounded edge. Now here is a weird edge case I came across. I used a gradient background through CSS in a div and in IE9 the gradient was not rounded off. So the fix for that was to surround it with a div and use an overflow: hidden to mask the colors.


<div class="roundedCorners mask">
    <div class=" roundedCorners gradientBackground">
    </div>
</div>

//CSS
.gradientBackground {
    /* for IE */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ccc', endColorstr='#fff');
    
    /* for webkit browsers */
    background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#fff)); /* for webkit browsers */
    
    /* for firefox 3.6+ */
    background: -moz-linear-gradient(top,  #ccc,  #fff); /* for firefox 3.6+ */
}

.mask {
     overflow: hidden;
}

The above code properly rounded the corners of my div and provided a gradient with rounded corners as well in IE9, Firefox, and Chrome.  The rounded corners don’t work in older versions of IE.


Targeting IE6 and IE7 in CSS

Coding, CSS,

Targeting IE6 and IE7 in CSS, as many of you know, becomes an extremely useful yet hack type of way of coding when you have to support these old browsers.  Some CSS hacks have made it a lot easier to handle the little quirks and override the main CSS to target a specific version.  There are two characters, one for IE6 and one for IE7.  Here is how it looks.

#divName
{
     padding: 5px;  /* shows in all browsers */
     *padding: 5px; /* shows in IE7 and earlier */
      _padding: 5px; /* shows in IE6 and earlier */
}

Really simple; by adding the preceding characters, it can change your CSS world.  I try at all costs to avoid doing such things because I don’t like how it clutters up my CSS page.  However, sometimes it’s just the easiest/quickest way to get the desired result you need when you have a deadline to meet.

There is another way to try and force CSS that is not working at that is by using a modifier called !important. However, this can make code messy and hard to maintain and I recommend avoiding at all costs.

Here is an example:

p {
    color: blue !important;
}

This means, regardless of what color style you use on an paragraph tag in other CSS, it will be trumped and will show up blue. Use wisely my friends.


Friends

Alpha 46 Studios - Custom Web Design
Developer Memes : Hilarious!
Mr. D's Carpet Cleaning In Arizona
Alienware Fx Themes

StackOverflow Profile

profile for Adam at Stack Overflow, Q&A for professional and enthusiast programmers