0

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

4
Contributors
18
Replies
50
Views
3 Years
Discussion Span
Last Post by diafol
0

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

0

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 {...}
0

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

0

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

0

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.

0

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

0

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.

0

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

0

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

0

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.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.