PDA

View Full Version : Button problem



AlCapwn
Apr 5th, 2010, 03:35 AM
Okay well I recently have taken an interest in web design and used only what I needed to make a website for my small community. Now I am going back and wanting to learn all about HTML & CSS. I'm working on a horizontal navigation bar right now and from what I remember, w3schools was no help on this(I haven't touched this in about 2 weeks). I have the buttons centered below the Title and main body but for some reason the buttons act as if I were using a break line. Here is what I have right now, as I stated above I'm trying to learn html and css so I would appreciate if you would tell me what I need to do rather than just do it for me.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>

<link href="style.css" rel="stylesheet" type="text/css" />
<title>My Blog</title>

</head>

<body>

<h1>My Blog</h1>

<center>
<a href="#home">Home</a>
<a href="#about">About Me</a>
</center>

<div class="ex"><p>This is my blog and I will be using it while I learn HTML/XHTML, CSS, and Javascript to help progress my skills.<br><hr><p>March 25th - So far I've started to learn about background colors along with margins and padding. I've also got an external style sheet to save space and a lot of work. My next interest is to add a horizontal navigation bar below the title.</p></div>

</body>


Sorry I don't have an online preview I'm currently just viewing/editing this from an html file on my pc.

DJCMBear
Apr 5th, 2010, 03:58 AM
It would help if we knew what your css file had in it aswell.

AlCapwn
Apr 5th, 2010, 04:00 AM
I was going to include that at first, although I didn't see any importance in it.



body
{
background-color:#FAEBD7;
margin: 20px;
width: auto;
}
div.ex
{
background-color:#FBCEB1;
width:600px;
padding:0px;
margin: auto;
}
a:link,a:visited
{
display:block;
width:120px;
font-weight:bold;
color:black;
background-color:#B2936C;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:tan;
}
h1{text-align:center;font-size:40px;}
p {text-align:center;padding: 20px 100px;}


P.S. I know the colors are kind of horrible lol, I'll go back and make them match later :P

Excavator
Apr 5th, 2010, 04:08 AM
Hello ALCapwn,
The HTML Center tag (http://www.w3schools.com/TAGS/tag_center.asp) is deprecated and should not be used.
To center your links, put them in an unordered list and center that. See some simple menu examples at http://nopeople.com/design/CSS%20tips/index.html

You should also have a look at the links about validation in my signature line. With that little bit of code you have 13 errors.

Instead of using more markup to space out your text, all those <br>'s you're using, have a look at some better ways of formatting your text using CSS at http://www.yourhtmlsource.com/stylesheets/csstext.html

Excavator
Apr 5th, 2010, 04:10 AM
I was going to include that at first, although I didn't see any importance in it.

How do we know what your site looks like if we don't see how your styling it?

DJCMBear
Apr 5th, 2010, 04:15 AM
The reason the line break is there is because your useing display:block;, if I was you i would take that out and do something like this which you can learn from.

Wrap you links in a div tag like this and you can name the class what you want and then in your css file you set the height and width and put the background color to the same as the buttons.


<div class="menu">
<a href="#home">Home</a>
<a href="#about">About Me</a>
</div>


And your css could look like this with your sizes and all that:


.menu {
height: 20px;
width: 600px;
background-color:#B2936C;
}


And because your just starting out if you want to make a navbar look better take a look at html li tags (lists) which with the right css codes you can make the list go horizontal for a navbar.