Results 1 to 4 of 4

Thread: CSS Help

  1. #1
    Join Date
    Sep 2009
    Location
    United Kingdom
    Posts
    46

    Question CSS Help

    Hi Guys,

    Well great thank you for the CSS advice I have started my first CSS page , literallyjust a mess around to get used to stuff. I have a few questions I need answer too, fairly quickly if possible as I have 3 days to redesign my whole site.

    Firstly here is my mess page http://www.mywebstar.co.uk/mess/index.php

    I need to know the following, I have looked around the web but there is so much to offer I would like some feedback on what is best to use.

    1. Is their any possible way to get teh CCS style sheet to insert text links so I only have to edit one file for each of the pages links, I would like the sheet to put in the Site navigation to the site navigationlinks to the left and also teh featured sites to the right. Or is it best just to have the links on each page and not in the style sheet?

    2. In the middle of that page you will see my content in the middle where it says Welcome to my first CSS page, this is where I put the content <Div> I had to make it so the left nav was 20% the right nav was 20% and the content div as 57% as when I tried to make it %20 20% and 60% the content goes below the left nav. is their anyway to get the content tobe smack bang in the middle?

    3. Are layers a good thing to use in a css design? I haven't used any but thinking about it, anything I should know?

    4. When changing links to have different link styles do I have to use span tags?

    5. I wish to use a navigation menu , would u say a drop down or a rollover image nav bar would be best what is your opinion, and I can I add this code to the CSS sheet sdo I only have to edit one file, any ideas would be great.

    6. Does anyone have problems with viewing that page I designed as a test? Anything seem out place of not right?

    I would love it if you could assist me

    Thank you

    James

  2. #2
    Join Date
    Sep 2009
    Location
    United Kingdom
    Posts
    46

    * Getting the middle centered

    On this page http://www.mywebstar.co.uk/mess/index.php I have added a div in the content which has a background http://www.mywebstar.co.uk/mess/back1.jpg I need to also align this to the middle, Anyone know how I could achieve this , how would I make a div centered in that content div, help

    Thank you James

  3. #3
    Join Date
    Sep 2009
    Location
    United Kingdom
    Posts
    46

    Post

    Quote Originally Posted by My Webstar View Post
    On this page http://www.mywebstar.co.uk/mess/index.php I have added a div in the content which has a background http://www.mywebstar.co.uk/mess/back1.jpg I need to also align this to the middle, Anyone know how I could achieve this , how would I make a div centered in that content div, help

    Thank you James
    Ah ha

    margin-left: auto;
    margin-right: auto;

    seemed to do the trick

  4. #4
    Join Date
    Oct 2009
    Location
    San Diego, CA
    Posts
    65
    Ummm... what a loaded question.

    1. Yes there is, you can create a <div class="classname">... However if you wanted to create a site navigation like the one you have now I usually split it into five different elements:
    Code:
    #top-nav {
    	margin:auto;
    	height:100px;
    	background-color:#ffffff;
    }
    
    #top-nav ul {
    	list-style:none;
    	width:1000px;
    	max-width:1000px;
    	float:left;
    	display:block;
    }
    
    #top-nav li {
    	display:inline;
    }
    This will make everything within the <div id="top-nav"></div> have a height of 100px and a background color of white.

    Example:
    Code:
    <div id="top-nav">
     <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="services.html">Services</a></li>
      <li><a href="products.html">Products</a></li>
      <li><a href="contact.html">Contact Us</a></li>
     </ul>
    </div>
    So basically what this is doing it that since it all is inside the top-nav selector it will have a height of 100px, bg color of white, and a margin that auto adjusts.

    The ul will have a list style of none (no bullets or anything), a width of 1000px, a max-width of 1000px (which means that it'll get no smaller than 1000px, this will allow for a horizontal sidebar to enable to prevent the menu from getting messed up), float which well.. floats the ul to either side (or you can position it manually).

    The li within the ul will be an inline display. This is CRUCIAL to having that menu work properly. If left out then you'll get an unwanted result! Notice that all I did was simply add html code and the menu was automatically created for me because of the css I used. I think this answers your question.

    2. Try using a clear:left; or clear:right; It all depends really... You may want to a float:left; to your side menu and add a float:right; to your other sidebar...it really just depends how you site is setup.

    3. What do you mean by layers? Like photoshop layers? Layers as in images what overlap? If they are images that overlap then you'll need a z-index property and you'll have to assign numeric values to everything you want layered. I'd stay away from that if I were you... It seems like it could quickly become confusing and a hassle.

    4. Not necessarily, you can certainly use <span style="color:blue; text-decoration:underline;"><a href="link.php">Link</a></span> if you want. You can also put all of the links inside one div tag or make a global link by using the following css:

    Code:
    a:link, a:visited {
     color:blue;
     text-decoration:underline;
    }
    
    a:hover {
     color:yellow;
     text-decoration:none;
    }
    This will make ALL links within your site have a color of blue and be underlined UNTIL you hover over them with your mouse. Then the links will turn yellow and cease to have the underline. You may also get more selective with your links by adding an additional selector before the pseudo-class anchors (the links). Example: #content a:link, #content a:visited etc...

    5. It depends on what you want. Drop down menus are JavaScript or jQuery based and you can find several free drop down menus online or your can also write your own JavaScript.

    6. Not that I can see, keep up the good work and best of luck to you Please feel free to ask any questions.

    p.s. You might want to look at this http://www.w3schools.com/css/default.asp. This really helped me out a lot when I was learning CSS.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •