NameSilo

I can't center my H2 tag

Spaceship Spaceship
Watch
H

henrikjt

Established Member
โ˜… 15 โ˜…
Impact
0
http://www.15jewellplace.com/description.html

I have created this page from a template and inside the editable region i created a text box with rounded corners. I am now having trouble centering the headline. THis is my first site so i may have messed something up in the html code or css code.

I'm sure it's easy for you guys to figure out what i did wrong.

Thanks
 
Reply
0
0 Like
0 Thanks
•••
The views expressed on this page by users and staff are their own, not those of NamePros.
Unstoppable Domains โ€” AI StorefrontUnstoppable Domains โ€” AI Storefront
Sort by date Sort by points
Do this:

HTML: 
<h2 style="text-align:center;">Headline Here</h2>
 
Reply
0
0 Like
0 Thanks
•••
nasaboy007 said:
Do this:

HTML: 
<h2 style="text-align:center;">Headline Here</h2>
Click to expand...

that code didnt work for me, it appears on tha page as well
 
Reply
0
0 Like
0 Thanks
•••
what do you mean? i assume you're referring to the part that has <h2>Headline Here</h2> that you want centered, right? (in div class rbcontent). replace that code with what i gave, and it shouldn't "appear on the page".
 
Reply
0
0 Like
0 Thanks
•••
Your CSS is a mess, just replace what you have with the following:

Code: 
* {
margin:0;
padding:0;
}
#container {
	height: 100%;
	width: 801px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	padding: 0px;
	position: relative;
}
#header {
	height: 100px;
	width: 100%;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #CCC;
}
#headerlogo {
	float: left;
	height: 60px;
	width: 301px;
	padding-top: 40px;
}
#footerdisclaimer {
	height: 150px;
	width: 33%;
	float: left;
	text-align: center;
	padding-top: 20px;
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 10px;
}
#footerlogo {
	float: left;
	height: 150px;
	width: 34%;
	text-align: center;
}
#footercopyright {
	height: 150px;
	width: 33%;
	float: left;
	text-align: center;
	padding-top: 20px;
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 10px;
}
body {
	margin: 0px;
	padding: 0px;
	top: 0px;
	height: 100%;
	background-color: #001326;
	font-family: Georgia, "Times New Roman", Times, serif;
}
#content {
	height: 100%;
	width: 100%;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #CCC;
	padding-bottom: 10px;
	padding-top: 10px;
}
#footer {
	height: 150px;
	width: 801px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	padding-top: 10px;
	color: #CCC;
}
#footer2 {
	background-color: #090;
	height: 100px;
	width: 800px;
}
#headernav {
	float: right;
	height: 25px;
	width: 500px;
	margin-top: 75px;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 11px;
	text-decoration: none;
	color: #CCC;
	text-transform: capitalize;
	text-align: center;
	font-style: normal;
}
a:link {
	text-decoration: none;
	color: #CCC;
}
a:visited {
	text-decoration: none;
	color: #CCC;
}
a:hover {
	text-decoration: none;
	color: #FFF;
}
a:active {
	text-decoration: none;
	color: #FFF;
}
.rbroundbox { background: url(Assets/images/nt.gif) repeat; }
.rbtop div {
	background-image: url(Assets/images/tl.gif);
	background-repeat: no-repeat;
	background-position: left top;
}
.rbtop { background: url(Assets/images/tr.gif) no-repeat top right; }
.rbbot div { background: url(Assets/images/bl.gif) no-repeat bottom left; }
.rbbot { background: url(Assets/images/br.gif) no-repeat bottom right; }

.rbtop div, .rbtop, .rbbot div, .rbbot {
width: 100%;
height: 7px;
font-size: 1px;
}
.rbcontent {
	margin: 0 20px;
	color: #333;
}
.rbroundbox {
	width: 795px;
	margin-top: 1em;
	margin-right: auto;
	margin-bottom: 1em;
	margin-left: auto;}
#container #content .rbroundbox .rbcontent p {
	color: #999;
}

.boltitest {
	font-weight: bold;
	color: #C03;
}
.rbcontent h2 {
	color: #333;
	text-align: center;
}

-->
 
Reply
0
0 Like
0 Thanks
•••
i dont see any changes to my code, this is what i already have as far as i can see
gaucho1976 said:
Your CSS is a mess, just replace what you have with the following:

Code: 
* {
margin:0;
padding:0;
}
#container {
	height: 100%;
	width: 801px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	padding: 0px;
	position: relative;
}
#header {
	height: 100px;
	width: 100%;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #CCC;
}
#headerlogo {
	float: left;
	height: 60px;
	width: 301px;
	padding-top: 40px;
}
#footerdisclaimer {
	height: 150px;
	width: 33%;
	float: left;
	text-align: center;
	padding-top: 20px;
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 10px;
}
#footerlogo {
	float: left;
	height: 150px;
	width: 34%;
	text-align: center;
}
#footercopyright {
	height: 150px;
	width: 33%;
	float: left;
	text-align: center;
	padding-top: 20px;
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 10px;
}
body {
	margin: 0px;
	padding: 0px;
	top: 0px;
	height: 100%;
	background-color: #001326;
	font-family: Georgia, "Times New Roman", Times, serif;
}
#content {
	height: 100%;
	width: 100%;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #CCC;
	padding-bottom: 10px;
	padding-top: 10px;
}
#footer {
	height: 150px;
	width: 801px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	padding-top: 10px;
	color: #CCC;
}
#footer2 {
	background-color: #090;
	height: 100px;
	width: 800px;
}
#headernav {
	float: right;
	height: 25px;
	width: 500px;
	margin-top: 75px;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 11px;
	text-decoration: none;
	color: #CCC;
	text-transform: capitalize;
	text-align: center;
	font-style: normal;
}
a:link {
	text-decoration: none;
	color: #CCC;
}
a:visited {
	text-decoration: none;
	color: #CCC;
}
a:hover {
	text-decoration: none;
	color: #FFF;
}
a:active {
	text-decoration: none;
	color: #FFF;
}
.rbroundbox { background: url(Assets/images/nt.gif) repeat; }
.rbtop div {
	background-image: url(Assets/images/tl.gif);
	background-repeat: no-repeat;
	background-position: left top;
}
.rbtop { background: url(Assets/images/tr.gif) no-repeat top right; }
.rbbot div { background: url(Assets/images/bl.gif) no-repeat bottom left; }
.rbbot { background: url(Assets/images/br.gif) no-repeat bottom right; }

.rbtop div, .rbtop, .rbbot div, .rbbot {
width: 100%;
height: 7px;
font-size: 1px;
}
.rbcontent {
	margin: 0 20px;
	color: #333;
}
.rbroundbox {
	width: 795px;
	margin-top: 1em;
	margin-right: auto;
	margin-bottom: 1em;
	margin-left: auto;}
#container #content .rbroundbox .rbcontent p {
	color: #999;
}

.boltitest {
	font-weight: bold;
	color: #C03;
}
.rbcontent h2 {
	color: #333;
	text-align: center;
}

-->
Click to expand...
 
Reply
0
0 Like
0 Thanks
•••
Nasaboy is correct....

Code: 
<h2 style="text-align: center;">Headline Here</h2>
 
Reply
0
0 Like
0 Thanks
•••
DomainManDave said:
Nasaboy is correct....

Code: 
<h2 style="text-align: center;">Headline Here</h2>
Click to expand...

where do i put that code, please be specific, thanks
 
Reply
0
0 Like
0 Thanks
•••
henrikjt said:
where do i put that code, please be specific, thanks
Click to expand...

You should put it where you already have that h2 tag, in your page it is where it says
Code: 
<h2>Headline here</h2>

Of course, doing it this way all the errors will be still there and you'll face trouble in the future since that solution will just center that, making you have to fix errors every single time you make a change. Just use what I gave you and all your CSS problems are solved at once (of course, within the limits of that lousy CSS sheet, I just fixed the obvious mistakes and nothing else).

For future reference, CSS is made to style everything at once from external style sheets or to the very least, embedded styles, inline styling is a big no-no unless you love to waste your time and redo everything every time you need to do a change
 
Reply
0
0 Like
0 Thanks
•••
ok, i got it working, but i still cant go through design view in DW and add a new rule, when i do that it doesnt show up in the browser correctly. How would i center the h2 tag with the CSS panel in Dw design mode
 
Reply
0
0 Like
0 Thanks
•••
gaucho1976 said:
Your CSS is a mess, just replace what you have with the following:

Code: 
* {
margin:0;
padding:0;
}
#container {
	height: 100%;
	width: 801px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	padding: 0px;
	position: relative;
}
#header {
	height: 100px;
	width: 100%;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #CCC;
}
#headerlogo {
	float: left;
	height: 60px;
	width: 301px;
	padding-top: 40px;
}
#footerdisclaimer {
	height: 150px;
	width: 33%;
	float: left;
	text-align: center;
	padding-top: 20px;
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 10px;
}
#footerlogo {
	float: left;
	height: 150px;
	width: 34%;
	text-align: center;
}
#footercopyright {
	height: 150px;
	width: 33%;
	float: left;
	text-align: center;
	padding-top: 20px;
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 10px;
}
body {
	margin: 0px;
	padding: 0px;
	top: 0px;
	height: 100%;
	background-color: #001326;
	font-family: Georgia, "Times New Roman", Times, serif;
}
#content {
	height: 100%;
	width: 100%;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #CCC;
	padding-bottom: 10px;
	padding-top: 10px;
}
#footer {
	height: 150px;
	width: 801px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	padding-top: 10px;
	color: #CCC;
}
#footer2 {
	background-color: #090;
	height: 100px;
	width: 800px;
}
#headernav {
	float: right;
	height: 25px;
	width: 500px;
	margin-top: 75px;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 11px;
	text-decoration: none;
	color: #CCC;
	text-transform: capitalize;
	text-align: center;
	font-style: normal;
}
a:link {
	text-decoration: none;
	color: #CCC;
}
a:visited {
	text-decoration: none;
	color: #CCC;
}
a:hover {
	text-decoration: none;
	color: #FFF;
}
a:active {
	text-decoration: none;
	color: #FFF;
}
.rbroundbox { background: url(Assets/images/nt.gif) repeat; }
.rbtop div {
	background-image: url(Assets/images/tl.gif);
	background-repeat: no-repeat;
	background-position: left top;
}
.rbtop { background: url(Assets/images/tr.gif) no-repeat top right; }
.rbbot div { background: url(Assets/images/bl.gif) no-repeat bottom left; }
.rbbot { background: url(Assets/images/br.gif) no-repeat bottom right; }

.rbtop div, .rbtop, .rbbot div, .rbbot {
width: 100%;
height: 7px;
font-size: 1px;
}
.rbcontent {
	margin: 0 20px;
	color: #333;
}
.rbroundbox {
	width: 795px;
	margin-top: 1em;
	margin-right: auto;
	margin-bottom: 1em;
	margin-left: auto;}
#container #content .rbroundbox .rbcontent p {
	color: #999;
}

.boltitest {
	font-weight: bold;
	color: #C03;
}
.rbcontent h2 {
	color: #333;
	text-align: center;
}

-->
Click to expand...

aa, didn't see you replied. Believe me, there are a few changes, just copy and paste and see it by yourself, the CSS not only centers your H2 title, but it's meant to have different colors and font styling, which you don't have right now. Just copy, paste and be happy :)

henrikjt said:
ok, i got it working, but i still cant go through design view in DW and add a new rule, when i do that it doesnt show up in the browser correctly. How would i center the h2 tag with the CSS panel in Dw design mode
Click to expand...

Just use notepad, why would you use DW to make a text change?
 
Reply
0
0 Like
0 Thanks
•••
gaucho1976 said:
aa, didn't see you replied. Believe me, there are a few changes, just copy and paste and see it by yourself, the CSS not only centers your H2 title, but it's meant to have different colors and font styling, which you don't have right now. Just copy, paste and be happy :)



Just use notepad, why would you use DW to make a text change?
Click to expand...

Hey Gaucho,

I really appreciate that you are taking the time to help me, i am changing it right now. I went into my main template file and changes the main css code. after that i will go into my description page which is attached to my template and change the rest of the css code, will that be the correct way to do it. I assume if i changed all the css code in the template file that all my other pages would be effected as well and i dont need that text box on my other pages. Hoepfully it will work and i wont screw it up, ill let you know

gaucho1976 said:
aa, didn't see you replied. Believe me, there are a few changes, just copy and paste and see it by yourself, the CSS not only centers your H2 title, but it's meant to have different colors and font styling, which you don't have right now. Just copy, paste and be happy :)



Just use notepad, why would you use DW to make a text change?
Click to expand...

Ok, so i changed the Css in the main template and then the rest of the css in the descrioption page, now the text is looking like it should but the white box is gone and only the rounded edges appear on the page. What did i mess up now??

Thanks so much for your help

</style>
<!-- InstanceBeginEditable name="head" -->
<style type="text/css">
<!--
} *****I deleted this thing here and now it works)
.rbroundbox { background: url(Assets/images/nt.gif) repeat; }
.rbtop div {
background-image: url(Assets/images/tl.gif);
background-repeat: no-repeat;
background-position: left top;

ok, i got it to work now, i deleted a bracket that had a green line under it indications something was wrong, thanks so much for your help again

gaucho1976 said:
aa, didn't see you replied. Believe me, there are a few changes, just copy and paste and see it by yourself, the CSS not only centers your H2 title, but it's meant to have different colors and font styling, which you don't have right now. Just copy, paste and be happy :)



Just use notepad, why would you use DW to make a text change?
Click to expand...

http://www.15jewellplace.com/contactedstephens.html

Hey Gaucho,

I inserted the same white box with rounded corners in my contact page and then inserted a div and then 2 other divs inside of that div so i could make 2 columns. When i type text in any of those 2 divs the white box expands further down leaving a large amount of empty white space on the bottom, how to i avoid that?
 
Reply
0
0 Like
0 Thanks
•••
henrikjt said:
Hey Gaucho,

I inserted the same white box with rounded corners in my contact page and then inserted a div and then 2 other divs inside of that div so i could make 2 columns. When i type text in any of those 2 divs the white box expands further down leaving a large amount of empty white space on the bottom, how to i avoid that?
Click to expand...

you have a bunch of empty <p> tags. Look out for

Code: 
<p>ย </p>

and delete all of them if you want, personally I think it looks fine right now since your page is vertically centered and the white space looks balanced, but if you want to get ride of the blank spaces, just delete those lines (open it with notepad to make sure DW doesn't add unneeded <p> tags)
 
Reply
0
0 Like
0 Thanks
•••
Log in or sign up to reply here.
Dynadot โ€” .com TransferDynadot โ€” .com Transfer

Similar threads

H
I cannot change the color of my text
1 reply
749 views
gaucho1976
G
vlad230
CSS corners and background
3 replies
836 views
vlad230
vlad230
Name Trader
How do I change color of an H1 tag in CSS
2 replies
4K views
Name Trader
Name Trader
H
  • Locked
Need basic div and css review
0 replies
420 views
henrikjt
H
pixelbypixel
Php Sessions - Can't spot my problem.
6 replies
1K views
CrackFeed.Com
CrackFeed.Com

We're social

Escrow.com

New posts โž”

Spaceship

Auction activity โž”

Domain Recover

How do you think a potential buyer first checks if your domain is for sale?

Polls of interest โž”

CryptoExchange.com

Hot this week โž”

Catchy

Community favorite โž”

Hot this month โž”

NameMaxi - Your Domain Has Buyers

Blog favorites

DomDB

  1. exosen.com

    • Make Offer

  2. FGCM.com

    • Make Offer

  3. verticalsaas.org

    • Make Offer

  4. PrimaveraBank.com

    • Make Offer

  5. iGlobe.net

    • Make Offer

  6. Bikko.Com

    • Make Offer

  7. YTWallet.com

    • Show Price

  8. car-detailer.com

    • Make Offer

  9. SparklyTech.com

    • Make Offer

  10. OurSouls.com

    • Make Offer
  • The sidebar remains visible by scrolling at a speed relative to the pageโ€™s height.
Back