Beginner's design problems

erez_moledet
(@erez_moledet)

11 years, 8 months ago

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)

Andrew Nevins
(@anevins)

WCLDN 2018 Contributor | Volunteer support

11 years, 8 months ago
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 .
Thread Starter erez_moledet
(@erez_moledet)

11 years, 8 months ago

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

Andrew Nevins
(@anevins)

WCLDN 2018 Contributor | Volunteer support

11 years, 8 months ago

4. Your website uses large file-sized images.

Thread Starter erez_moledet
(@erez_moledet)

11 years, 8 months ago

Thanks for the quick replies.

How do I make headers and images files small sized?

Andrew Nevins
(@anevins)

WCLDN 2018 Contributor | Volunteer support

11 years, 8 months ago

Try saving files as .png extension.

Moderator Jose Castaneda
(@jcastaneda)

THEME COFFEE MONKEY

11 years, 8 months ago

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.

untamedlady
(@untamedlady)

11 years, 8 months ago

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

Andrew Nevins
(@anevins)

WCLDN 2018 Contributor | Volunteer support

11 years, 8 months ago

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.

Michael
(@alchymyth)

11 years, 8 months ago

@untamedlady

please start your own topic.

you problem is different from the current topic.