Why aren't my class id tags working?

StackOverflow https://stackoverflow.com/questions/15651209

Question

Here's my website:

http://violetoeuvre.com/

I have two questions.

1. I can't figure out why the text in the sidebar navigation isn't black! It's blue instead.

#side_wrapper_text a:link{
        font-family: 'Playfair Display', sans-serif;
        font-size: 32px;
        font-style: italic;
        font-weight: 100; 
        color:rgba (255,255,255,1);
        text-decoration: none; 
        text-align: right;
        letter-spacing:0.2em;

}

2. I want the text to align EXACTLY at the top of its box, and I can't figure out why it just doesn't do that automatically. I tried playing with line spacing options to no avail. 

/* CONTENT ********************************************************/

.content_wrapper {
    float: left; 
    width: 980px;
    margin-left: 15px;
    margin-top: 45px;

}
/* Photo Box on Home Page ************************/

.home_photo { 
        display:block;
        height: 400px;
        background: rgba(0,0,255, .5);

}

/* Text Box on Home Page */

.home_text{ 
        display:block;
        float: left;
        background: rgba(255,100,255,.5);
        height: 190px;
        text-align: left;
}

/* WRITING ***************************************/

.home_writing {
    display: block;
    background: rgba(50,50,50,.5);
    height: 1000px;
    text-align: left;
}

Thank you!

Was it helpful?

Solution

For problem #1, remove the space between "rgba" and the following parenthesis, i.e. color: rgba(255,255,255,1).

In Chrome 25, this then made the color white, not black (to be expected). If you want black, just use color: #000; or color: rbga(0,0,0,1); if you want to specify the alpha channel for some reason.

For problem #2: The paragraph <p> tags have a margin of roughly 1em set by the browser's default stylesheet. Set it to zero (or some other value) to modify.

Example:

P { margin: 0; }

You might also consider using a reset stylesheet to normalize behavior across browsers and reset many of the styles set by the browser's default stylesheet.

Or at least reset all padding/margin to zero (which fixes many of the common problems):

* { padding: 0; margin: 0; }

OTHER TIPS

Try changing this line

color:rgba (255,255,255,1);

to this:

color: #000000;

For the text color remove the space after 'rgba':

color:rgba(255,255,255,1);

I am not completely sure that I understand your second question but rather than playing with the line spacing. I think that you want to change the top padding and top margin to 0 for your paragraphs.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top