1. This website uses cookies. By continuing to use this website you are giving consent to cookies being used.
    For information on cookies and how you can disable them visit our Cookie Usage page.
    Dismiss Notice

CSS need helping positioning header.

Discussion in 'Web Development' started by Riot, Apr 10, 2010.

  1. Riot

    Riot New Member

    ok so im trying to edit the Call of duty 2 template and well being my first time with knowing nothing at all of HTML or CSS i cant figure out how to position the header ><

    i made a new image in Photoshop for a friends website it seems the Header.jpg and the menu bar and txt are all contained in one thing.
    i attempted to edit many things but failed horrible :p
    http://img714.imageshack.us/img714/3506/testyg.jpg

    any help would be awesome ^_^ thx alot guys.
     
    Riot, Apr 10, 2010
    #1
  2. ishkey

    ishkey Moderator, Logos, Sports Crests Staff Member Verified Member

    It would stand to reason that if you knew nothing at all about coding and when you looked at the original template you would say to yourself oh look it's centered, so what do I need to do in Photoshop to change the header without messing things up.

    1. You could open the images directory to find the header.jpg and then note it's width and height 777x238. Then create a new header.jpg with the same width and height to replace the old one, that way everything stays the same.

    2. You can always look at the code in the style.css and index.html file for the header.jpg to see how it is coded.
    In COD2 it is defined in the style.css file like this -
    Code:
    #header{
	height:304px;
	width:777px;
	background-image:url(images/header.jpg);
	background-repeat: no-repeat;
}
    The code height:304px is slightly smaller than the graphic in order to fit the template.
    The code sets how the header.jpg is to be displayed.

    Look at the index.html file
    HTML:
    <body>
<div id="container">
	<div id="header">
    div id="header" tells the browser to get the information from the style.css file about the header.jpg and display it here.
     
    ishkey, Apr 10, 2010
    #2
  3. Riot

    Riot New Member

    lol now that would make since but the original "Header" wasnt a Banner it did not cross the hole section.

    what would i need to do to Fit this Banner correctly accross the hole top?
    http://img97.imageshack.us/img97/7391/headerqg.jpg

    Banner: Width =1024
    Height = 225

    I put those Codes in my header and it fit perfect sept for.. it moved my Menu bar Down under the Boxes.
     
    Riot, Apr 10, 2010
    #3
  4. ishkey

    ishkey Moderator, Logos, Sports Crests Staff Member Verified Member

    I'm not laughing. If you don't want to take my advice and you do not understand the code there is nothing else I can say, maybe someone else can explain it to you or you can learn some code at w3schools.com.
     
    ishkey, Apr 10, 2010
    #4
  5. ishkey

    ishkey Moderator, Logos, Sports Crests Staff Member Verified Member

    Do not alter your post after someone answers you.
    Others get confused when they are trying to learn and it confuses me when I am trying to answer questions.

    You said it earlier - you do not know code, but you can reason some things out, if you just look around.

    Did you happen to look the style.css file or just the post above, because if you looked at the actual style.css you would have seen this piece of code just above -
    Code:
    #container {
	margin: 0px auto;
	text-align: left;
	width: 860px;
}
    and you would have found that referenced in the index.html file.
    CONTAINER WIDTH 860px not 1024px
    A container is like putting your website in a Box, in this case the box is 860 pixels wide. So guess what happened - your oversize graphic needed more space to fit and didn't play nice with everyone else.

    If you were to look further at the files you would also find background.gif, which draws the black background constrained in the 860px width but unlimited in length.

    So now we are back to the header.jpg which sits right on top.

    Try at least to make your now wider than 860px and let's see if that fixes things a bit.
     
    ishkey, Apr 10, 2010
    #5
  6. Riot

    Riot New Member

    ahah im a jackass thank you for your help :) your a genius

    i suppose you shouldnt add stuff to the code when u dont know what will happen my issue was i added a position to the header >.> sigh :p

    header{
    height:270px;
    width:900px;
    background-image:url(images/header.jpg);
    background-repeat: no-repeat;
    background-position: center;

    i took out the back-position and i edited the content of the image to fit with the correct px as u said and it looks wonderfull.

    thank you man :D
     
    Riot, Apr 10, 2010
    #6
  7. ishkey

    ishkey Moderator, Logos, Sports Crests Staff Member Verified Member

    width:900px; is too large, your container width is only 860px
     
    ishkey, Apr 10, 2010
    #7
  8. Riot

    Riot New Member

    i know that was what i had befor just to give u an idea of what was jacked up.

    Thank you for the help! i have one small issue but i dont wana take up any more of your time. :D
     
    Riot, Apr 10, 2010
    #8
  9. ishkey

    ishkey Moderator, Logos, Sports Crests Staff Member Verified Member

    These templates were written when screen sizes were smaller so if you want your website to match your original size of 1024 you will have to look at the widths for the different areas (div container, div menucontent ,div middle, etc) that are called up by the index.html file and defined in the style.css file do some basic math or trial and error to adjust the sizes and maybe adjust some graphics and sizes. You'll have a wider template.
     
    ishkey, Apr 10, 2010
    #9
  10. Riot

    Riot New Member

    ><!!!!!!!!

    so i saved the index and the CSS file opened the Index in Firefox and OMG the same issue as the start popped up :?
    }
    #container {
    margin: 0px auto;
    text-align: left;
    width: 860px;

    }
    #header{
    height:304px;
    width:860px;
    background-image:url(images/header.jpg);
    background-repeat: no-repeat;
    }
    #content{

    Template in firefox
    http://img89.imageshack.us/img89/4691/testkf.jpg

    Header Image
    http://img191.imageshack.us/img191/7982/headervub.jpg

    It Seems the Container is not as big as the websites Menu bar
     
    Riot, Apr 10, 2010
    #10
  11. ishkey

    ishkey Moderator, Logos, Sports Crests Staff Member Verified Member

    here is your graphic placed in the template - looks fine to me.
     

    Attached Files:

    • ff.jpg
      ff.jpg
      File size:
      30.1 KB
      Views:
      572
    ishkey, Apr 10, 2010
    #11
  12. Riot

    Riot New Member

    is there a way to get the Graphics to Stretch the length of the Menu Bar?

    i can see that the Container is what is holding every thing in a certain area the boxes,header.. ect
    the Menu bar is exempt from the container?
    if so how can i get the Header to be the same size as the menu bar?
     
    Riot, Apr 10, 2010
    #12
  13. ishkey

    ishkey Moderator, Logos, Sports Crests Staff Member Verified Member

    The container holds everything - The Menu bar is not exempt it is flush left. - The header is flush left.

    So you want it to be this size.
     

    Attached Files:

    ishkey, Apr 10, 2010
    #13
  14. Riot

    Riot New Member

    the top menu bar that is holding the links Join now|Links|Login
    it stretches the hole screen while every thing else is placed inside the container.
    how can i make the header the same size as that bar?
     
    Riot, Apr 10, 2010
    #14
  15. ishkey

    ishkey Moderator, Logos, Sports Crests Staff Member Verified Member

    That bar stretching across comes from the line of code in the style.css file - background-image:url(images/background.gif);
    Code:
    body {
	background-image:url(images/background.gif);
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	margin: 0px;
	padding: 0px;
	background-repeat: repeat-x;
	background-color: #000000;
}
    If you look at the index.html file the body comes before the container, therefore it is outside the constraints on the container.
    Code:
    <body>
<div id="container">
	<div id="header">
    You can't and have it display on all monitor screens like it should. It will be a distorted graphic. The bar on the other hand is just a black line the stretches to fit the screen size. Part of making websites is compromise. If everybody had only one browser and one screen size then no problem.
     
    ishkey, Apr 10, 2010
    #15
  16. Riot

    Riot New Member

    ahh ok then thank you.
    what i did was edit the Graphics of the border edges to be Black to blend it into the site.

    thank you alot man u been great help.
     
    Riot, Apr 10, 2010
    #16