...

View Full Version : Header underlines the whole width



Vytfla
05-30-2012, 02:18 AM
Is there any special way to have a header underline go the width of the div without having to place it into its own special div? Right now to get a clean div-wide underline I put the header in a separate div and use the border-bottom property.

sunfighter
05-30-2012, 03:37 AM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
</head>
<body>
<div style="height:120px;width:100px;color:blue;text-align:center;"><h3>Sammy</h3><hr /></div>
</body>
</html>

Vytfla
05-30-2012, 10:28 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
</head>
<body>
<div style="height:120px;width:100px;color:blue;text-align:center;"><h3>Sammy</h3><hr /></div>
</body>
</html>


Awesome, thanks a bunch.

Vytfla
05-30-2012, 11:00 PM
Another question:

I'm trying to style it in CSS and it's not working (using <h3>Sammy</h3><hr />); can I only do it in HTML following the character? (<hr style=" " etc...)

badwolf
05-30-2012, 11:46 PM
Another question:

I'm trying to style it in CSS and it's not working (using <h3>Sammy</h3><hr />); can I only do it in HTML following the character? (<hr style=" " etc...)

no you can designate what the horizontal rule will look like in your style sheet. or you can do it inline. If its a one time only application then inline styling should be fine. If your going to use Horizontal Rules several times throughout your site then you should create a set of rule in your stylesheet.

badwolf
05-31-2012, 07:38 AM
I'm trying to style it in CSS and it's not working
http://www.cupr.info/songht1.jpghttp://www.cupr.info/song2.jpghttp://www.cupr.info/song12.jpghttp://www.cupr.info/song14.jpg

Ok, well try this in your stylesheet. The current design makes a Horizontal rule red in color, 80% of the container in width, 4 pixels high with rounded edges;



.test{
width:80%;
height:4px;
background:#ee0000;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
}


You can name the class anything you want, it dosent have to be "test"
Everything is totally adjustable and the border radius's round the edges. You can also call an image instead for the HR simply by adding this behind the color url(images/your_image.png)

Call a styled Horizontal Rule like this;

<hr class="test"/>

Vytfla
06-01-2012, 03:19 AM
Ok, well try this in your stylesheet. The current design makes a Horizontal rule red in color, 80% of the container in width, 4 pixels high with rounded edges;



.test{
width:80%;
height:4px;
background:#ee0000;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
}


You can name the class anything you want, it dosent have to be "test"
Everything is totally adjustable and the border radius's round the edges. You can also call an image instead for the HR simply by adding this behind the color url(images/your_image.png)

Call a styled Horizontal Rule like this;

<hr class="test"/>

If I only use it once, can I just leave it as <hr />? Then in CSS, it would be:

hr {
width
height
color
background color
}

Also- if I wanted to be a single straight line of a certain color, the only attribute I'd assign something to is color, right?

The reason I seem confused is I'm trying to mess around with it in dreamweaver, and when I change colors it shows up in dreamweaver but not when I preview in Chrome, though I haven't been setting a height or anything.

badwolf
06-01-2012, 03:07 PM
If I only use it once, can I just leave it as <hr />? Then in CSS, it would be:

hr {
width
height
color
background color
}

Also- if I wanted to be a single straight line of a certain color, the only attribute I'd assign something to is color, right?

The reason I seem confused is I'm trying to mess around with it in dreamweaver, and when I change colors it shows up in dreamweaver but not when I preview in Chrome, though I haven't been setting a height or anything.

You seemed to be having an issue with your own styling. And I know the method I gave you works. But there is no reason why your way shouldnt work.

Vytfla
06-03-2012, 07:21 PM
You seemed to be having an issue with your own styling. And I know the method I gave you works. But there is no reason why your way shouldnt work.

I'll play around with it some more. It just seems like dreamweaver is giving my one result and my browser test is giving me another.

Apostropartheid
06-04-2012, 01:47 AM
I'll play around with it some more. It just seems like dreamweaver is giving my one result and my browser test is giving me another.

Repeat after me: Dreamweaver is not a browser! If you want to use it, just keep it in code view. It is all but useless for the preview element.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum