WordPress.org

Support

Support » How-To and Troubleshooting » Beginner's design problems

Beginner's design problems

  • Hello,

    I am working on my first website. http://www.buy-and-benefit.com/

    There are a few problems I can’t solve by myself:
    1. I want to change the design of the blocks so that the background color will chage according to the current page e.g. when the website is loaded with the homepage on, the block with the word HOME will be with a different color. what must be changed so that ii will change?

    2. I want the blocks to have no gaps between them. how do I change that?

    3. how do i add a line that will have the same color as the current webpage (like the nenu in
    http://extension.missouri.edu/main/DisplayCategory.aspx?C=2
    4. Why is there such a significant difference inpages loading time between my website and the other one?

    5. Text design: I want the website font will be “Arial” and that the first letter of the first word in every paragraph will be in :Times New Roman”, font weight = bold, and that the letter will be slightly larger. my attempt failed. I get the first letter in the first line, and the rest of the word in the line below. Why?

    I appreciate your help! Thanks,

    Erez

Viewing 9 replies - 1 through 9 (of 9 total)
  • Moderator Andrew Nevins

    @anevins

    Forum moderator

    1. Are you generating the navigation (links such as HOME, HANDS ON, etc.) or are you using static HTML?
    2. You can add the CSS

    .nav li {
     margin-left: 0;
    }

    3. If you want a line underneath the navigation menu (links such as Home), you can add this CSS;

    .nav ul {
     border-bottom: 5px solid #yourColour;
    }
    
    .nav ul li a {
     display: block;
     /* Just because there is a gap when the anchor tag is left inline */
     /* Below are styles to counter extra spacing created from display: block; */
     padding: 0;
    }

    4. What is the other website?

    5. It’s difficult to set fonts because you’ve used in-line CSS. You can apply styling to the first letter using the CSS pseudo class http://www.w3schools.com/cssref/sel_firstletter.asp .

    In question No. 4. the other website is the one mentioned in question No. 3.

    Moderator Andrew Nevins

    @anevins

    Forum moderator

    4. Your website uses large file-sized images.

    Thanks for the quick replies.

    How do I make headers and images files small sized?

    Moderator Andrew Nevins

    @anevins

    Forum moderator

    Try saving files as .png extension.

    Moderator Jose Castaneda

    @jcastaneda

    2. *element* { margin:0; padding: 0;}

    3. .nav a:hover { text-decoration: underline; }

    4. The images that you are using take much longer than those of the site you are comparing it to. I suggest you try using smaller dimensions for images in order to keep file size down a bit.

    Just put my blog up, however, I can’t get rid of the extra links right below the heading image where the “Home” link is. How can I remove these pages, and reduce that grey panel? Here is my blog:

    http://untamedlady.com/blog/

    thanks!
    Alex

    Moderator Andrew Nevins

    @anevins

    Forum moderator

    Those extra link are probably part of the default navigation, which grabs all the pages created through the Dashboard.

    You could create a custom menu; Appearance > menus, and add fewer selected pages to the menu.

    Moderator Michael

    @alchymyth

    Forum Moderator

    @untamedlady

    please start your own topic.

    you problem is different from the current topic.

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Beginner's design problems’ is closed to new replies.