Topic: BR or HR or Div with class or Other? (Page 1 of 1) Pages that link to <a href="https://ozoneasylum.com/backlink?for=27286" title="Pages that link to Topic: BR or HR or Div with class or Other? (Page 1 of 1)" rel="nofollow" >Topic: BR or HR or Div with class or Other? <span class="small">(Page 1 of 1)</span>\

 
Karl
Bipolar (III) Inmate

From: Phoenix
Insane since: Jul 2001

posted posted 01-08-2006 22:07

I have a series of divs that stack up nicely, and they all share the same vertical repeating background which creates a left embozed look. Very cool. Now I want to throw in a break between these divs to give seperation, creating little islands. What do you suggest as a break element? I've come up with the following options:

BR element (but box model doesn't seem to work like i'd expect)
HR element,
DIV element

I run into problems with the DIV element because the parent DIV element has already been defined accordingly, infact the parent DIV element is the one defined with the backround repeating image, so there is a conflict here.

Any ideas? Need to see an example?
Karl..

Karl
Bipolar (III) Inmate

From: Phoenix
Insane since: Jul 2001

posted posted 01-08-2006 22:35

Another problem with DIV, I can't get make the height of the DIV much smaller than 20PX.

reisio
Paranoid (IV) Inmate

From: Florida
Insane since: Mar 2005

posted posted 01-08-2006 23:07

use a top or bottom margin

Karl
Bipolar (III) Inmate

From: Phoenix
Insane since: Jul 2001

posted posted 01-08-2006 23:13

I'm sure I've tried this, using a top and a bottom margin.
Here is what I have so far:
http://arizonasunrays.com/_default.asp

In this example, I am using a DIV tag, class="break" to create the effect of a break. Here is the class for this:

#COL_LEFT div.break {margin:0; border:0; padding:0; height:5px; background-image: url(../images2/left-spacer.gif);}

Here is a photoshop rendered example of the problem and the fix
www.arizonasunrays.com/problem_03.jpg

(Edited by Karl on 01-08-2006 23:15)

Ramasax
Maniac (V) Inmate

From: PA, US
Insane since: Feb 2002

posted posted 01-09-2006 01:44

Looks like the top margin of the ul element could be causing the gap.

As far as the div not being smaller than 20px, have you tried setting either the font-size or line height to 1px?

Ram

DL-44
Lunatic (VI) Inmate

From: under the bed
Insane since: Feb 2000

posted posted 01-09-2006 02:35

Of course, using the <div> to add space is again using your mark-up to make stylistic changes. Margins should be all you need to make this work the way you want.

Will need to see an example - the link you posted above doesn't work.

Karl
Bipolar (III) Inmate

From: Phoenix
Insane since: Jul 2001

posted posted 01-09-2006 03:28

Sorry, here it is (corrected)
http://www.arizonasunrays.com/_default.aspx

poi
Paranoid (IV) Inmate

From: Norway
Insane since: Jun 2002

posted posted 01-09-2006 09:46

the style is borken in OP9tp1, FF1.5 and in IE6 it looks kinda like http://www.arizonasunrays.com/problem_03.jpg
Please, please, please, don't tell me you are trying to design an (x)HTML+CSS website using IE. Even if the target audience use massively IE ( gargl ), you should always design using a standard compliant browser then introduce a few workaround to fix some of the rendering bugs of the other browser. What will happen when all of the sudden, around 2023, IE 9 will respect the standards ? you'll have to rewrite completly your CSS instead of simply removing a few workarounds.

Karl
Bipolar (III) Inmate

From: Phoenix
Insane since: Jul 2001

posted posted 01-09-2006 14:45

~sneaks from around the corner to say~ I am. I didn't figure things would be so broke though. For the most part, I have kept the layout simple.

Karl..

divinechaos
Obsessive-Compulsive (I) Inmate

From:
Insane since: Dec 2001

posted posted 01-10-2006 23:35

Use Firefox, if only for the web developer toolbar:
http://chrispederick.com/work/webdeveloper/

Using the outline features, disable javascript/css, edit css, etc, makes figuring out what your CSS is doing so much easier.

Not to mention that it (usuallly) renders properly.

Cheers,
Derek

Blaise
Paranoid (IV) Inmate

From: London
Insane since: Jun 2003

posted posted 01-10-2006 23:47

Internet Explorer now has it's own Web Developer toolbar, it's basically the same as the FF one, but has few more features, it's still better to work in FF or Opera as they render sites correctly more often than IE does, but the toolbar will make development much easier with IE.

Cheers,



Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« BackwardsOnwards »

Show Forum Drop Down Menu