September 14, 201214 yr Ok, so after a little bit of playing around the design is getting there. home page is almost finished. Any thought or advice? Dont hold back! One thing that is bothering me is I cant seem to get the image to center itself! Thoughts on logos etc also greatly appreciated because I used gimp and bluefish (cheap cheap) . Here is my css: body { height: 100%; background: #222; font-family: 'Metamorphous', cursive; } #page-container { height: 800px; width: 100%; border: 1px solid #fff; margin-top: 50px; } #sidebar { height: 100%; width: 20%; float: left; background: #222; } #sidebar-logo { height: 30%; width: 100%; background: #222; } #sidebar-logo h1 { margin-left: 0; } #sidebar-nav { height: 60%; width: 100%; background: #222; } #sidebar-nav ul { height: 100%; list-style: none; } #sidebar-nav li { margin-left: 50px; font-size: 20px; line-height: 100px; } #sidebar-nav li a { text-decoration: none; color: #fff; opacity: 0.4; } #sidebar-nav li a:hover { opacity: 1; } #footer { height: 5%; width: 100%; margin-left: 10px; color: #fff; } #content { height: 100%; width: 80%; float: right; background: url(../images/Block.jpg) no-repeat top left; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } #welcome-box { height: 200px; width: 600px; border: 2px solid rgb(255, 255, 255); border-radius: 25px; -moz-border-radius: 25px; background: url(../images/pattern.png) repeat; margin-top: 550px; float: right; margin-right: 2%; } #welcome-text { height: 200px; width: 550px; margin-left: 25px; } #welcome-text h2 { text-align: center; color: #fff; line-height: 70px; } #welcome-text p { color: #fff; text-align: center; } As I said any thought or advice to tidy it up/improve would be greatly appreciated.
September 14, 201214 yr You canno't center an image in your CSS. You can make an other div around arround all your code, but under the body tag. You can call this for an example <body> <div id="backgroundimage"> All your code... </div> </body> You can then with css specify your image, just make sure your image is big enough for widther screens, for example 1920*1080 and for mac 2560 x 1440 Hope this helps you out Cheers
September 14, 201214 yr Author I already have a <div> that surrounds my cone its called #page-container. I have managed to get the image to work ok in all browser except ie, the background-sice: cover; function just doesnt seem to play ball with ie. I saw something somewhere about using filter: but I have never used it before. Any advice on getting a large image to shrink into <div> with ie would be useful if anyone can help?? Cheers
September 14, 201214 yr Author Ok an update (only really the image so far. There is a lot of dead space to the right hand side so I would like to utilise it a little but am stuck for ideas. Was thinking engraved text instead of the text box and move it up a bitmore central.
September 14, 201214 yr On the welcome to my portfolio bit I'd get rid of the border and background, shift it up a bit and find a nice font. Really just spend an hour or two browsing fonts to find the perfect one as I think on minimal sites they make a huge difference.
September 14, 201214 yr Author He is happy with it, but i wanted the opinion of other web designers see if they can see something wrong/ways to improve it
September 14, 201214 yr I reckon it looks pretty good, but it's tricky to give fully informed feedback without a link to a test server so I can see it fullscreen in my browser. One thing that caught my attention though is a more content orientated point. When it comes down to it, you've got 3 seconds to convince a visitor that they'll be able to find out what, where, why, when in relation to the business. The current website doesn't appear to do that from the screenshots, but I don't know whether this is still in the works or if the client deliberately doesn't want that?
Create an account or sign in to comment