Skip to content
View in the app

A better way to browse. Learn more.
Web Designer Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Please review mine :)

Guezala
in Website Reviews and Feedback

Featured Replies

I would give you full score for markup.

The design, though, needs work.

 

 

I would suggest:

 

-Loose the background image in repeat, and rather use the image creatively as a cropped header (if you have it it a good resolution). Find a complimentary background colour or subtle texture. -You don't have to be totally symmetric about it.

 

-make the menu a complete bar, put a no-decoration on the menu links. You don't need the link underline in a menu. And change the colours while you're at it.

 

-Loose the boxy-look, or at least soften it with either pale background colours, complimentary (small) borders or slightly rounded corners.

 

-It is admirable that the site is validated, but chances are that that is not of paramount interest to the customers of Fisher carpentry. Put in a smaaaaal footer, and write in text that it is validated, and how to contact the webmaster. Having that on every page like that, it looks like it is part of the content.

p {  color: black;
   text-align: left;
}
p b { color: navy; }

li { color: black; }

a.link {color: blue; }

a.visited {color: purple; }

a.active {color: gray; }

a.hover {color: red; }

body {	[b][i]background-color:#39065B; [/i][/b]
font-size: 0.9em;
color: black;
     font-family: arial, helvetica;
       letter-spacing: 0.1em;
       word-spacing: 0.2em;
line-height: 1.5;
text-align: center
[b][i]text-decoration:none;[/i][/b]
}

h1 {	
color: black;
background: white;
border: solid 1px;
margin-left: 7em;
margin-right: 5.5em; 
padding: 0.2em;

}

h2 {	
color: black;
background-image=url(blocks.jpg);
[b][i]background-repeat:no-repeat;
background-position:center center;[/i][/b]
border: solid 1px;
margin-left: 11em;
margin-right: 9em; 
padding: 0.2em;
[b][i]width:400px;
height:300px;[/i][/b]
}
h3 {
text-align: center;
}

.centeredimage {
text-align:center;
margin-top:0px;
margin-bottom:0px;
padding:0px
}

.leftimage {
text-align:left;
margin-top:0px;
margin-bottom:0px;
padding:0px;
}

.rightimage {
text-align:right;
margin-top:0px;
margin-bottom:0px;
padding:0px
}
.justifyimage {
text-align:justify;
margin-top:0px;
margin-bottom:0px;
padding:0px
}



.toolbar li {

display:inline;
background: #d3d3d3;
border:1px solid;
border-color: black;
margin:0;
padding:.5em;
}
.a li{
list-style-type: disc;
padding: 0;
margin: 0;
text-align: left;
}
.b li{
list-style-type: circle;
padding: 0;
margin: 0;
text-align: left;
}
.c li{
display:inline;
}

div#page{
width: 700px;
margin-left: auto;
margin-right: auto;
background-color: white;
border: solid 1px;
padding: 1em;
}

 

I have changed four lines of your CSS to show you what he ment I find its easier to learn if i'm shown...

  • Author

Thanks folks! Will have a look when my little man is asleep lol. No peace for wicked mum.

 

Quick question.....did you access my css through the website?

If so how and should I think about protecting it in separate files?

 

Cheers

  • Author

Stylewebdesign; I have had a little play and can see the possibility of using the jpg in the header background although it gets a bit and hard to get it to the right size for the heading without losing some image. Also I lose the text visibility so thought of making it opaque??

 

My biggest irritation at the moment is trying to get rid of the text decoration in my toolbar...not sure where it is inheriting from so tried inserting 

p {  color: black;
text-align: left;
}
p b { color: navy; }

li { 
color: black;
text-decoration: none;

}

a.link {color: blue; }

a.visited {color: purple; }

a.active {color: gray; }

a.hover {color: red; }

body {	
background-color:#39065B; 
font-size: 0.9em;
color: black;
	  font-family: arial, helvetica;
	letter-spacing: 0.1em;
	word-spacing: 0.2em;
line-height: 1.5;
text-align: center;
text-decoration: none;

}

h1 {	
color: black;
background: white;
border: solid 1px;
margin-left: 7em;
margin-right: 5.5em; 
padding: 0.2em;

}

h2 {	
color: black;
background-image: url("blocks.jpg");
background-repeat: no-repeat;
background-position: center center;
border: solid 1px;
margin-left: 11em;
margin-right: 9em; 
padding: 0.2em;
width: 300px;
height: 150px;
}
h3 {
text-align: center;
}

.centeredimage {
text-align:center;
margin-top:0px;
margin-bottom:0px;
padding:0px
}

.leftimage {
text-align:left;
margin-top:0px;
margin-bottom:0px;
padding:0px;
}

.rightimage {
text-align:right;
margin-top:0px;
margin-bottom:0px;
padding:0px
}
.justifyimage {
text-align:justify;
margin-top:0px;
margin-bottom:0px;
padding:0px
}



.toolbar li {

text-decoration: none;
display:inline;
background: #d3d3d3;
border:1px solid;
border-color: black;
margin:0;
padding:.5em;
}
.a li{
list-style-type: disc;
padding: 0;
margin: 0;
text-align: left;
}
.b li{
list-style-type: circle;
padding: 0;
margin: 0;
text-align: left;
}
.c li{
display:inline;
}

div#page{
width: 700px;
margin-left: auto;
margin-right: auto;
background-color: white;
border: solid 1px;
padding: 1em;
}

 

Blimey what a pain in the bum am I??!!

..I think you can put the decoration-none directly in the .toolbar li

Personally, great markup, but the site doesn't really have a 'design' to it, and looks very amateur (not a complaint, just my honest observation). If I were you I'd find a friend or hire someone to design it from scratch and use your content, but that's just me :)

  • Author
Personally, great markup, but the site doesn't really have a 'design' to it, and looks very amateur (not a complaint, just my honest observation). If I were you I'd find a friend or hire someone to design it from scratch and use your content, but that's just me :)

Thanks for your honesty but this website would not be happening at all if I hadn't volunteered to do it, more as a working opportunity for me to learn.

It is my first go EVER and am using it to learn how to improve. There isn't really a budget at all apart from hosting costs.

If I make too much of a fuss about needing this or that, I think the 'boss' will just tell me to leave it.

SOB!

 

Any ideas how I make buttons and divs curved instead of boxy? I have no clue. Lol and take away the gaps in my menu bar?

And perhaps a brain transplant lmao!!!!

A sense of shape and form is a good start, and try to notice sites you come across, and the small things that makes them work/pleasing/user friendly - or not.

There is no real need to sit down with a blank piece of paper and code from scratch - we are all standing on the shoulders of giants.

 

This might help - the code is in the source code.

http://www.cssplay.co.uk/menus/

 

http://www.w3.org/Style/Examples/011/firstcss

:pardon:

Visit My Website and let me know what you think. Thanks!

 

I think the website is great for a carpentry website, but if you wanted to develop it in the future it would mean completely whiping it and starting again because theres little room for development.

 

but it's great none the less.

Stylewebdesign; I have had a little play and can see the possibility of using the jpg in the header background although it gets a bit and hard to get it to the right size for the heading without losing some image. Also I lose the text visibility so thought of making it opaque??

 

My biggest irritation at the moment is trying to get rid of the text decoration in my toolbar...not sure where it is inheriting from so tried inserting 

p {  color: black;
text-align: left;
}
p b { color: navy; }

li { 
color: black;
text-decoration: none;

}

a.link {color: blue; }

a.visited {color: purple; }

a.active {color: gray; }

a.hover {color: red; }

body {	
background-color:#39065B; 
font-size: 0.9em;
color: black;
	  font-family: arial, helvetica;
	letter-spacing: 0.1em;
	word-spacing: 0.2em;
line-height: 1.5;
text-align: center;
text-decoration: none;

}

h1 {	
color: black;
background: white;
border: solid 1px;
margin-left: 7em;
margin-right: 5.5em; 
padding: 0.2em;

}

h2 {	
color: black;
background-image: url("blocks.jpg");
background-repeat: no-repeat;
background-position: center center;
border: solid 1px;
margin-left: 11em;
margin-right: 9em; 
padding: 0.2em;
width: 300px;
height: 150px;
}
h3 {
text-align: center;
}

.centeredimage {
text-align:center;
margin-top:0px;
margin-bottom:0px;
padding:0px
}

.leftimage {
text-align:left;
margin-top:0px;
margin-bottom:0px;
padding:0px;
}

.rightimage {
text-align:right;
margin-top:0px;
margin-bottom:0px;
padding:0px
}
.justifyimage {
text-align:justify;
margin-top:0px;
margin-bottom:0px;
padding:0px
}



.toolbar li {

text-decoration: none;
display:inline;
background: #d3d3d3;
border:1px solid;
border-color: black;
margin:0;
padding:.5em;
}
.a li{
list-style-type: disc;
padding: 0;
margin: 0;
text-align: left;
}
.b li{
list-style-type: circle;
padding: 0;
margin: 0;
text-align: left;
}
.c li{
display:inline;
}

div#page{
width: 700px;
margin-left: auto;
margin-right: auto;
background-color: white;
border: solid 1px;
padding: 1em;
}

 

Blimey what a pain in the bum am I??!!

 

 

.toolbar li a {
text-decoration:none;
}

... should get rid of the underlined links in your toolbar.

  • Jo 90 locked this topic
Guest
This topic is now closed to further replies.
Go to topic listing

Account

Navigation

Search

Search

Configure browser push notifications
Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.