hey guys! when i discovered googles Dart, I decided to get back into web design, but im a little rusty on my css. on my index page i want to make a news section for updates to the site, but i cant find any styles for the <article> tag on google. can anyone help? i want the style to be this:

------------------------------------------------- [<-- except thats an actual line and not dashes]

  • Header -
    ---------- [<-- except its a box and not lines]
    text

and i want the header box and text in another box

Member Avatar

diafol

Perhaps if you mock up your preferred style as an image and upload it (or provide a link to it)?

Member Avatar

diafol

If you could supply the HTML markup too, it'll give us a better example of which elements within the container could accept styling.

e.g.

article h3{..}

article div{...}

hr {...}

i actually got it figured out. it turns out i was googling wrong. this is what it looks like now

Member Avatar

diafol

Erm... like what?

huh i thought i had uploaded a picture. oh well. its solved now. thanks

i actually got it figured out. it turns out i was googling wrong. this is what it looks like now

If you post how you solved the issue, this would be helpful to others with a similar problem.

sure thing. so here is the html:

        <div id="news">
            <div id="article">
                <h2 id="artheader">Header</h2>
                <p id="content">Here is some content</p>
            </div>
            <br /><div id="artsep"></div><br />
            <div id="article">
                <h2 id="artheader">Header</h2>
                <p id="content">Here is some content</p>
            </div>
            <br />
        </div>

here is the css:

#article {
    background: black;
    width: 100%;
    padding: 10px;
    border: 5px solid gray;
    margin: 0px;
}

#artheader {
    text-align: center;
}

#content {
    text-align: center;
}

#artsep {
    height: 1px;
    background: white;
    border-bottom: 1px solid white;
}

just insert that anywhere in body. how i use it:
when ever i want a new article i put in that code and each is seperated by the line (artsep) with the top one having no line above it and the bottom having a <br /> to put a margin on the bottom

great-thank you for following up.

Member Avatar

diafol

Great, however I thought you were using the html5 <article> tag as opposed to the <div> with id="article"

One caveat - an ID should be unique to an element. If you need multiple elements with the same styling, you should use class="article" instead.

i was going to use article, but i thought this would work better. and i was going to use class, but at some point im going to make it automated with dart and php

Member Avatar

diafol

That's fine, but if you have more than one article on a page, you still need to use class and not id.

yes what he told is correct. ID means unique purpose and Class means no limitation.

how do i select it with javascript or dart then?

Member Avatar

diafol

Select what? What are you going to do with js/dart?

dynamically add content to the dom with it

Member Avatar

diafol

dynamically add content to the dom with it

I don't see why styling with CSS classes instead of ids should be a problem. In fact providing cases for unique ids in your CSS file would be a massive headache.

With regard to functionality of added elements to the DOM -
I'm not familiar with Dart, but I'm assuming it's a js framework/language of some description. jQuery allows binding of added DOM nodes with '.on' - I'm sure that Dart would have something similar. Again the 'class' trumps 'id' for this for a collection of similar elements.