Oct 24 2007

Preventing Text Wrapping Around Images

etienne @ 9:03 pm

As I was writing the Survey builder article I wanted to prevent text from wrapping around my images. I simply wanted to display the image and have the text start below it rather than having it flow around it. I found that you can do this using HTML or CSS code.

HTML

<br clear=left|right|all>

CSS

clear:  none | left | right | both

 

Tag: images, HTML, CSS

Aug 19 2007

CSS ID and Class usage

etienne @ 8:24 pm

I’ve always been slightly confused about when to use an ID and when to use a Class in my CSS. I’ve done some research which clarified my understanding.

The key thing to understand is that ID’s must be unique on a page and identifies a specific element, so you can only use a specified ID once per page. Classes on the other hand can be used multiple times on a page, if you are going to use a style that will be applied to multiple elements then use a Class.

I start by looking at all the sections and subsections on the page and how they work together. I identify all the unique sections on the page and define these with DIV’s and ID’s. Normally a page would consist of the following main sections:

#container { … }

#header { … }

#content { … }

#left { … }

#right { … }

#footer { … }

I then define all the child elements within each of these sections, so for example if I want the links in the header to be different to those in the content section I can easily do so. One of the main benefits of this approach is that when you look at the CSS file you can easily see why and where each style is being used.

#header a:link, #header a:visited {
color: red;
text-decoration: none;
font-weight: bold;
}

#content a:link, #content a:visited {
color: blue;
text-decoration: none;
font-weight: normal;
}

I define any shared look and feel styles using classes which I then use in different sections, In the case of the sidebar I have a left as well as a right sidebar, they have many look and feel things in common so I create a class called "sidebar" which defines the common styles. I share this common class between the left and right sidebar elements.

CSS:

.sidebar {
width: 170px;
margin: 0;
padding: 0;
}

.sidebar p {
font-size: 0.6em;
color: #555;
padding-left: 5px;
padding-top: 3px;}

#left {
float: left;
}

#right {
float: right;
}

HTML:

<div id="left" class="sidebar">
   <p>This is the left sidebar</p>
</div> <!– left –>

<div id="right" class="sidebar">
   <p>This is the right sidebar</p>
</div>

Another interesting point is that You are able to apply multiple classes to an element by space separating the classes, this allows an element to inherit multiple classes.

<DIV id="left" class="class1 class2 class3">Hello World!</DIV>

 

Tag: CSS, classes

Aug 19 2007

fieldWithErrors Overrides my CSS Field Classes

etienne @ 6:07 pm

When there are errors on a form, Rails will normally create a <DIV> element with the fieldWithErrors class wrapped around the fields input statement. If you have your own CSS class wrapped around a field this will be overridden by the fieldWithErrors <DIV> which is a pain.

I was searching for a solution when I found this post:

I’d like to say I came up with this, but I actually found it somewhere else.

I have the following inside my environment.rb file:

ActionView::Base.field_error_proc = Proc.new do |html_tag, instance|
  msg = instance.error_message
  error_style = "background-color: #f2afaf"
  if html_tag =~ /<(input|textarea|select)[^>]+style=/
    style_attribute = html_tag =~ /style=[’"]/
    html_tag.insert(style_attribute + 7, "#{error_style}; ")
  elsif html_tag =~ /<(input|textarea|select)/
    first_whitespace = html_tag =~ /\s/
    html_tag[first_whitespace] = " style=’#{error_style}’ "
  end
  html_tag
end

I now get the desired effect when an error occurs, in my case it changes the background color of the field red, you can change it to whatever effect you want without it interfering with your field CSS classes…perfect!