cssboss



Clearing Floated Elements


When a floating element is bigger than the containing element, some pretty weird things can happen.

To avoid layout errors, make sure to put this line of code before the closing tag of the containing element.

<br style="clear:both;" />

for example,

<div>
<img src="myimg.jpg" alt="my  image" style="float:left;" />
<p>just some example text to get my point across.</p>
<br style="clear:both;" />
</div>

How To Wrap Text Around Images



Okay so today someone asked me how to get text to wrap around an image on a website. This is yet another very common feature that can be used on almost every single website, so get ready to learn this easy trick!

Let’s say we have an image. The code would look like

<img src="this_awesome_image.jpg" alt="" />

First we ad a class to the image so that we can style it from our CSS file. I’m going to call this class “about_image”, it’s a good idea to create two classes, one “alignleft” and one “alignright” so that you can apply them to any elements that you wish on your site. I’ll reference that later.

Now our html looks like

<img src="this_awesome_image.jpg" alt="" class="about_image" />

Opening up your CSS file (style.css normally, could be something else though) we want to declare our new class, and define some style properties. Specifically, the float: property, and margin: property.

.about_image {
float: right;
margin: 10px;
}

You can either float the image to the right, or to the left. Which ever you prefer. They both behave the same.

You want to give your image a margin so that it doesn’t push up against your text, and that theres a clear separation from the surrounding elements.

BOSS TIP :
Setting up 2 classes that allow you to float any element to the left or right is insanely worth while.

.align_right { float: right; }
.align_left { float: left; }

Now all you have to do is apply those classes to any and every element on your website, and things will start floating all over!

How To Style Text That You Highlight With CSS


Okay so the other day I noticed on a website that when I selected some text, that the “highlight” was styled, the font color changed, the background color changed, and it really made the appeal of the website so much nicer. I never knew such a small thing would make such a difference to me, or stand out so much. Needless to say I dug right in and figured out how to do it.

Turns out, it is as simple as anything else with CSS! Great news, let’s take a look at the code.

The working CSS I use now is simply the declaration of

::selection { }

Then I simply applied a new color, and background-color.

::selection {
color: #ffffff;
background-color: #888888;
}

There it is! you’re all set. I would take the time to find a color that really looks good on your content and lets the user know that they’re highlighting something. Think bright yellow markers for example. The site I found this on used a BRIGHT pink that really rocked with their design.

Thanks for checking me out!

Peace out,