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 CSS Help w/ Charity template

Discussion in 'Web Development' started by dovaboy, Feb 12, 2009.

  1. dovaboy

    dovaboy New Member

    So i downloaded the charity template..., seen here
    https://freewebsitetemplates.com/preview/charity/

    I created 6 pages off this template.....& on 2 of them i want to get rid of the "Latest News" box on the right hand side, & center my text on the left hand side to take up the whole area. BUT when i do this it changes all my pages.
    It was then that i noticed there was a .CSS file, and that was why my changes were seen on all of my pages.

    My Question is...,
    How do i make changes to 1 or 2 pages, and not have it change everything??

    thanks for any of your thoughts
     
  2. ishkey

    ishkey Moderator, Logos, Sports Crests Staff Member Verified Member

    Gee your so close. The css file is the template layout for your pages, when you use "div id's" in the html (index.html, page2.html, etc) such as <div id="left"> your content </div> you are saying in essence "For this division area go to the css file and retrieve all the information for formatting this space, so it displays the way I set it up."
    If you want to get rid of the right side, do not use (<div id="right">) in your html file. Go ahead try it now.
    First half of the problem solved.
    Now you need to expand your text, so you need to add to the css file another "div id" which you will use on the pages you want to only show no right box and centered text. The other pages will remain the same.
    Code:
    #left {  [COLOR=dimgray]/* original left div */[/COLOR]
     float:left;
     width:428px;
     margin-left:27px;
     padding: 0px 10px 30px 0px;
     display:inline;
    }
    #left_center {  [COLOR=dimgray]/* start new div tag */[/COLOR]
     float:left;
     width:638px; [COLOR=dimgray]/* Increased width - added right width to left width for new width*/[/COLOR]
     margin-left:27px;
     padding: 0px 10px 30px 0px;
     display:inline;
    } [COLOR=dimgray]/* end new div tag */[/COLOR]
    Your html pages that need this will be coded like this below
    Code:
    [B]<div[/B] id=[B]"content">[/B]
    [B]<div[/B] id=[B]"left_center">[/B]
    [B]<h1>[/B]Welcome to our organization[B]</h1>[/B]
    [B]</div>[/B]
    
    If you did it right it should look like this. Keep us posted, display you site for review.
     

    Attached Files:

  3. dovaboy

    dovaboy New Member

    Thanks ishkey! I looked over what you said & went back and tinkered with
    it for a bit & finally got things looking like i wanted. I just went right to the code and started making the my changes. Things are coming along & i will post in a couple days once i post the site
    thanks again