Banner

Sponsor

Login

Welcome Back!
Guest
Guest

Register

Lost your password?

57 users online

CSS/div FAQ

CSS/div FAQ

Forums » Web Development » Client Side - HTML/Javascript/etc. » CSS/div FAQ

Currently viewing this thread: 1 (0 members and 1 guests)

1 2 3 »
Page 2 out of 3
#11
Old Post February 8th, 2004 07:40 PM
Rad

Rad

thinking of something witty to put here
Status: Offline!

You use floats. See:
http://alistapart.com/articles/journey/
http://glish.com/css/

Code:


#box1 {
width: 400px;
float: left;
}

#box2 {
width: 400px;
float: left;
}

Code:


<div id="box1">Sup</div>
<div id='box2">Homies!</div>

#12
Old Post April 10th, 2004 03:50 AM
evan

evan

Neverside Newbie
Status: Offline!

Use separate style sheets for basic formatting and layout.
The basic formatting style sheet should be used for HTML elements only (no classes or IDs should be defined here).
The layout style sheet is used for exactly that, layout. Define classes and IDs in this page.

Use point (pt) for font sizes, not pixel (px).
If you don't define font sizes different browsers will render the fonts different. An example are headers. IE renders the considerably larger than other browsers. Same with defining them with pixels.
Remember though, when defining point sizes, they are not the same as pixel size. 12pt != 12px. 12pt > 12px

Base font sizes off your paragraph font size and remember that paragraph and header 4 are the same, except header 4 is bold.

This is what I am currently working with and it works great for sizes.

Code:

p, h1, h2, h3, h4, h5, h6 {
padding: 0;
margin: 0;
}
p, a {
font-size: 8pt;
}
h1 {
font-size: 14pt;
font-weight: bold;
}
h2 {
font-size: 12pt;
font-weight: bold;
}
h3 {
font-size: 10pt;
font-weight: bold;
}
h4 {
font-size: 8pt;
font-weight: bold;
}
h5 {
font-size: 7pt;
font-weight: bold;
}
h6 {
font-size: 6pt;
font-weight: bold;
}

http://music.fusion-zero.com/font-size-test.html

#13
Old Post April 24th, 2004 03:14 PM
toicontien

toicontien

Perpetual college student
Status: Offline!

Since people new to CSS post that they still "don't get DIVs," I thought I'd post some beginner information.

First, there are two main types of elements (tags) in HTML: 1) Block-level elements, and 2) Inline elements.

Block elements are displayed on a different line from all other elements if no CSS styling is applied. Inline elements are rendered one after another until the browser needs to wrap them to a separate line. Common inline elements include text, images embedded via the <img> tag, <b>, <i> and <span>

A <div> literally means a "division" of the page. It was meant to group inline and block elements together. By default DIVs have no styling, i.e. no padding, margins, borders, fonts, background colors, etc. They also represent very little meaning about the content inside them. That's why you should never place text DIRECTLY inside a DIV tag. Instead, do something like:

Code:


<div>
<p>This is some paragraph text.</p>
</div>


DIVs take up as much width as alotted by it's parent element (the HTML tag that directly contains the DIV). DIVs are only has high as they need to be.

The following is valid code:

Code:


<div>
<p>This is some paragraph text.</p>
</div>

This next chunk would not validate:

Code:


<p>
<[b]div[/b]>This is some paragraph text.</[b]div[/b]>
</p>


DIVs can contain any other HTML tag. Very few HTML tags can contain DIVs, besides other DIVs. Some of these exceptions are: <form>, <td>, <th>, <body> and <html>.

Again, this is because DIV tags have little semantic value. A DIV tag doesn't say much about the content inside it, at least, not nearly as much as a <p> tag, which means the following block of text is a paragraph.

Once a DIV is floated left or right, it becomes ONLY as wide as the longest unwrapped line of text and only has high as it needs to be. The exeption to the rule is Internet Explorer 5.x/Mac, which still gives the floated DIV as much width as possible.

Now that you know DIVs group elements together, you can come up with HTML like:

Code:


<div id="mainNav">
<ul>
<li><a href="">Home</a></li>
<li><a href="">About Us</a></li>
</ul>
</div>


And CSS like this:

Code:


#mainNav ul {
list-style-type: none;
margin: 0;
padding: 0;
}

#mainNav li {
background-color: #e0e0e0;
border-bottom: 1px solid #666;
}


The space character between #mainNav and li is called the descendant selector. The background color and border will be applied to any <li> tag located inside a <div> tag with its ID attribute set to "mainNav."

Doing this requires fewer ID and CLASS attributes in your HTML code and helps to keep that code cleaner and easier to read.

And a final note: DIVs can be given virtually any CSS property. You can style them in any way.

___________________

I can't believe you just hit that car!
-- I couldn't see it!
You couldn't see it!?
-- It was at a funny angle.
... Tyrone. It was RIGHT behind you. When you're in reverse, things come from behind!!

#14
Old Post May 1st, 2004 01:04 PM
AR8

AR8

Status: Offline!

But, how do you make <div>'s with scrollbars as if it were an iFrame? And transparent scrollbars are impossible with <div>'s, right?

#15
Old Post May 2nd, 2004 12:41 AM
freak

freak

Neverside Newbie
Status: Offline!
Quote:

Originally posted by AR8
But, how do you make <div>'s with scrollbars as if it were an iFrame?

Use the overflow CSS property to achieve this effect.

Quote:

Originally posted by AR8
And transparent scrollbars are impossible with <div>'s, right?

You shouldn't be changing scrollbar colors in the first place.

// freak

___________________

Tables for layout is an abuse. -- Internet Explorer is unsafe.

#16
Old Post May 2nd, 2004 02:35 AM
Rad

Rad

thinking of something witty to put here
Status: Offline!

More specifically, overflow: auto;

#17
Old Post May 6th, 2004 02:42 AM
Jewels

Jewels

Neverside Newbie
Status: Offline!
Quote:

Originally posted by AR8
And transparent scrollbars are impossible with <div>'s, right?

In fact they're easier than iframes. You apply the filter to the div and that's it. But it's recommended to leave the scrollbar as it is.

#18
Old Post June 22nd, 2004 06:32 AM
JollyRoger

JollyRoger

Neverside Newbie
Status: Offline!

why is everyone so against changing the color of scroll bars?.:confused:

#19
Old Post June 22nd, 2004 06:34 AM
evan

evan

Neverside Newbie
Status: Offline!

http://www.w3.org/Style/Examples/007/scrollbars.html

#20
Old Post June 22nd, 2004 06:37 AM
JollyRoger

JollyRoger

Neverside Newbie
Status: Offline!

ok thanks

1 2 3 »
Page 2 out of 3
Quick Jump:

Main Navigation

Site & Graphic Design by Aeon Tan
Developed by Jeremie Pelletier & Scott Roach

NeverAPI generated this page in 0.0096 seconds.