Jump to content

Need Help For Header Css/design


drheinfeld

Recommended Posts

Hey,

 

So I started attempting to do web design and going through tutorials about a week ago. I used to do it about 10 years ago but now am looking to get serious and possibly pursue it as a career path. Anyway, I am currently just trying to copy layouts of websites or remake websites just to get good at coding. Get some practice type thing. Anyway I am currently working on recreating yardbarker.com. (Just a random site I visit often and decided to do. Anyway I have attached what the banner currently looks like compared to the real one.

 

Here is what I have currently, please give me feedback on what is wrong and how I can improve. I really want to become good at this.

 

HTML

 <header>
           <img src="pictures/logo.png" id="logo" alt="Logo">
           <p id="one">
               REALTIME RUMORS, GOSSIP, OPINIONS AND HUMOR FROM THE BEST SPORTS BLOGS
           </p>
           <p id="login">
               <a href="http://www.yardbarker.com/account/signin">Login</a>|<a href="http://www.yardbarker.com/account/signin">Sign Up</a>
           </p>
           <div id="search">
               <input type="text" name="search">SEARCH</input>
           </div>
       </header><!--End Header-->

 

CSS

header {
   width: 970px;
   height: 125px;
   border-top: solid #b72321 5px;
   background: white;
}
header #logo {
   margin: 20px;
   position: relative;
}
header #login {
   position: relative;
   float:right;
   text-align: left;
   left: 0px;
   top: -105px;
   margin: 10px;
   font-family: sans-serif;
}

header a {
   color: #555555;
   text-decoration: none;
   font-size: 15px;
}
header a:hover {
   text-decoration: underline;
}
header #one {
   color: #b72321;
   font-family: sans-serif;
   font-weight: 600;
   font-size: 13px;
   margin-left: 30px;
   float:left;
}
header #search {
   float: right;
   position: relative;
   left: 100px;
   color: #000000;
   font-family: sans-serif;
}

Link to comment
Share on other sites

It is much easier for us to see what you have going on if you can upload your page somewhere. If that's not possible, we need to see all your code (and still won't have any of your images).

 

What is wrong? What is happening that you don't want to happen, or what is not happening that you are trying to get?

 

Without all this detail, I can give you some general feedback:

 

You use IDs for things that show up only one time on a page. You use a class for something that shows up more often. Technically, you could just use classes, but you cannot just use IDs.

 

Not everything needs to have an ID (or class) attached - that is used if you want to style something more specifically, Simple example: <p> - you can style all your regular paragraph text via CSS directly using the p. But if you have a certain paragraph you want to stand out, you'd attach a class (or ID) to just that one.

 

In your code, you do not need anything to go with your image (assuming there is just one image in your header). You could just style your specific header image:

 

header img {whatever;}

 

chances are, you don't need the positions relative - those sometimes get overused, but I'd need to see how things fall (I'm not good enough to tell that kind of thing by just looking at the code).

 

Another thing - since you are attaching IDs to the elements in your header, you don't even need the word 'header' in your CSS. It's not wrong or will cause an error, but it's redundant, and the less code we use, the better.

 

Please let me know if you have any specific questions about any of the above - or any other questions for that matter.

Link to comment
Share on other sites

Andrea is awesome right. I would like to add just this little bit on the id and class thing. Although she explained it very well. Here is how I explain on when to use one over the other. Like she said id's only once per page, classes as many times as you need. I am adding this, use id's for your division of content and your classes for styling. This is just a good rule I read somewhere a while back somewhere and like the simple expination.

Link to comment
Share on other sites

  • 3 weeks later...

Looks good, but it is better that you published this your own even in some free hosting site, so we can check,. Honestly I cannot further see the actual page, I can do check it however, but it is your responsibility to do so,, and like others, I am just here to say some opinion.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...