beginner need help with basic CSS

emucxg

Finland4559 Posts

November 15 2011 18:00 GMT

Fixed.

Im learning some HTML/CSS, again^^. and I found a problem... I googled for like an hour but still cant find answer -.-

Im trying to print a simple text with top and bottom border:

So, this is what I want:

[image loading]

Here is the code
html:

 <body>
    <h1>CSS border property example</h1>
  </body>

css:

 h1 {
   border-top-width: 1px;
   border-right-width: 0px;
   border-bottom-width: 1px;
   border-left-width: 0px;
   border-style: solid;
 }

however the result is this, which is not what I want:
[image loading]

like u can see the lengths of borders are way too long, I know I can fix this by using the <table> element instead of <h1>, but i wanna know how can I fix this without touching the html code? I guess I need some magic to my CSS file T.T

halp =(

ps. Fixed... thanks everyone

tofucake

Hyrule19200 Posts

November 15 2011 18:16 GMT

use overline and underline instead of borders

emucxg

Finland4559 Posts

November 15 2011 18:17 GMT

On November 16 2011 03:16 tofucake wrote:
use overline and underline instead of borders

THX
I love you!!
Kiss <3

noob question again, How can I change the color of underline?

Blazinghand

United States25558 Posts

November 15 2011 18:24 GMT

I thought this was going to be someone asking for Sc2 help and I was like "yayyyyy i'm going to help"

I saw a screenshot with some computer-ey stuff and was like "oh, clearly he's having trouble installing, I can still help"

then I read the post. D: I can't help, sorry.

emucxg

Finland4559 Posts

November 15 2011 18:26 GMT

OK, I fixed this.^^

here is the solution if someone is curious:


h1 {
     display: inline;
     border-bottom:1px solid black;
     border-top:1px solid black;
     }

Moff

United Kingdom166 Posts

November 15 2011 18:28 GMT

It's doing that because the h1 is a block level element, add:


display: inline;

to the CSS, or additionally set a width on the element:


width: 400px;

See you fixed already! :p

WickedSkies

Netherlands81 Posts

November 15 2011 19:44 GMT

Another helpful thing might be to use firebug or chrome console (F12) so you can edit your javascript/css directly on the css declaration in the page (no need to refresh and seems more intuitive at least to me).

Please or register to reply.

beginner need help with basic CSS

Completed

Ongoing

Upcoming