Hello everyone,

 

I'm new to this forum and I was very pleased to see how things have grown in the last few years.

I've done some webdesign in the past (I even used those awful animated gifs back in 1997) and, as a guitar and amp technician, I'm attempting to build a website for my guitar repair shop. It's based in Portugal, so you probably won't understand what's written in the layout I attached.

 

Nevertheless, I think you could help me with some issues here:

 

- As I said above, I'm kinda on the rusty side when it comes to webdesign, but I learn fast and used to be quite keen using HTML, CSS and PHP/MySQL... even though I forgot almost everything.

 

- Now, as for the layout: my main concern is how to translate this to a nice, fast loading website. Also, I don't have a clue about how should I implement it. For instance, would you use tables and an iframe for the content area (which would be something similar to the text box at the right, with the opacity thing and all)? Would it be possible using CSS? To begin with, I'd rather prefer a static website, because it's less demanding for me to code, I suppose. I considered doing it in flash, but quit that idea because I feel it's important to my business to have all the relevant data about the visitor paths and search engine hitting,

 

- For last but not least... that menu is supposed to have submenu options. How would you implement that? Using typical text menu extensions, for instance?

 

All of your input is extremely welcome, so I thank you all in advance.

 

Best regards from Portugal

I'm sure someone will be along to help you. All I wanted to say that I love that layout, looks really, really good.

Welcome to WDF!

 

That design is acutally very simple to do with CSS...

 

An unordered list for the menu

A floated <div> for the news box

The big image is a background

Hello all,

 

Thank you both for your help and input.

 

I think I managed to implement the menu with CSS using unordered lists.

Now have a couple more questions, so please bear with me for two seconds:

 

- In order to have a faster site, I wanna compress the background image as much as I can, but compressing it to jpg will ruin the shop's logo. Would it be a good idea to use a floating div just for the logo?

 

- As for the content area, is it possible (or too much of a pain in the neck) to define an opacity % for the div background, but not applying it to the text? Also, I'll probably need to use some scrolling in that text box. Any suggestions besides going javascript?

 

Again, thanks for your patience.

Here's what I've worked out so far, thanks to bluedreamer: http://themedusa.net/afinas/

 

Regards

Your solution for the shop logo is correct, that is the way I would do it, make the background a .jpg and the logo a (24bit) .PNG with transparency floating on top in its own div. For the content div background there are a few different solutions. The easiest would be to make a 1px by 1px PNG (24 bit again) with the level of transparency you want and set it as the background image for the div (repeating). To make the div scroll use the overflow:auto; property on it.

 

http://www.w3schools.com/Css/pr_pos_overflow.asp

I think that there are many tutorial available online, which will help you to learn converting photoshop layout to html...

 

Howver this layout can be done using css

use <div> for big box

use <ul> for menu

use main image for image background

dreamcon: i have no problem converting a layout from photoshop to html, but I'm trying to figure out the best way to do it (avoiding tables, iframes and that whole shebang). Nevertheless, the people on this forum have proven to be extremely helpful when it comes to referring to techniques I'm not familiar with.

 

calumbrodie: I will try that for the content box. Thanks. About the scroll thing, I would like to avoid the browser's scroll bar, if possible.

Hey there,

 

The website is developing well, but I couldn't figure out a way to center it both vertically.

Perhaps you could take a swift look at my css below:

 

@charset "utf-8";

 

/*===========COLORS=============

 

Darker red - #6c1114

Red - #960f0f

Light pink - #e4dfc1

Dark pink - #c59797

Light grey -

=============END COLORS=======*/

 

/* CSS Document */

 

body {

font-size:100%;

font-family:Verdana, Arial, Helvetica, sans-serif;

font-style:normal;

line-height: 1.4;

padding: 0;

background-color: #000;

background-image: url(../images/back_main.jpg);

background-repeat: no-repeat;

background-position: center;

}

 

/* COR E TIPO */

 

a:link { color: #960f0f; }

a:hover { color: #6c1114; }

a:visited { color: #960f0f; }

 

h1 {

color: #960f0f;

font-family:Verdana, Arial, Helvetica, sans-serif;

font-style:normal;

font-size: 12px;

}

 

h2 {

color: #EEEEEE;

font-family:Verdana, Arial, Helvetica, sans-serif;

font-size: 10px;

font-weight:normal;

font-style: normal;

}

 

h3 {

color: #960f0f;

font-family:Verdana, Arial, Helvetica, sans-serif;

font-size: 10px;

font-weight: bold;

font-style: normal;

}

 

p {

font-size: 8Px;

}

 

/* Homepage */

 

#main {

margin: 0 auto;

width: 1002px;

height: 554px;

 

}

 

h1#welcome {

display: none;

}

 

p#tagline {

display: none;

}

 

/******** BARRA DE NAVEGAÇÃO / LOGO **********/

 

#logo {

position: relative;

}

 

#logo ul {

list-style-type: none;

margin: 0;

padding: 0;

}

#logo a {

position: relative;

display: block;

text-indent: -800px;

}

#logo ul li {

position:relative

}

 

 

 

#logoimage {

width: 205px;

height: 90px;

background-image: url(../images/logo.png);

}

 

 

#nav {

position: relative;

float: left;

top: 0px;

left: 37px;

}

 

#nav ul {

list-style-type: none;

margin: 0;

padding: 0;

}

 

#nav ul li {

position: relative;

}

 

#nav a {

position: relative;

display: block;

text-indent: -800px;

}

 

ul.subnav {

display: none;

list-style: none;

position: absolute;

left: 78px;

top: 0px;

width: 450px;

}

 

ul.subnav:after {

content: ".";

display: block;

height: 0;

clear: both;

visibility: hidden;

}

 

ul.subnav li {

list-style: none;

float: left;

display: inline;

}

 

#atelier {

width: 78px;

height: 26px;

background-image: url(../images/nav_atelier_off.gif);

}

 

#atelier a:hover {

background-image: url(../images/nav_atelier_on.gif);

}

 

#atelier:hover ul.subnav {

display: block;

z-index: 10000;

}

 

.subnav #sobre {

width: 44px;

height: 26px;

background-image: url(../images/subnav_sobre_off.gif);

}

 

.subnav #sobre a:hover {

background-image: url(../images/subnav_sobre_on.gif);

}

 

.subnav #novidades {

height: 26px;

width: 62px;

background-image: url(../images/subnav_novidades_off.gif);

}

 

.subnav #novidades a:hover {

background-image: url(../images/subnav_novidades_on.gif);

}

 

.subnav #servicos {

height: 26px;

width: 54px;

background-image: url(../images/subnav_servicos_off.gif);

}

 

.subnav #servicos a:hover {

background-image: url(../images/subnav_servicos_on.gif);

}

 

.subnav #goodies {

height: 26px;

width: 49px;

background-image: url(../images/subnav_goodies_off.gif);

}

 

.subnav #goodies a:hover {

background-image: url(../images/subnav_goodies_on.gif);

}

 

#faq {

width: 78px;

height: 26px;

background-image: url(../images/nav_faq_off.gif);

}

 

#faq a:hover {

background-image: url(../images/nav_faq_on.gif);

}

 

#tips {

width: 78px;

height: 26px;

background-image: url(../images/nav_tips_off.gif);

}

 

#tips a:hover {

background-image: url(../images/nav_tips_on.gif);

}

 

 

#blog {

width: 78px;

height: 26px;

background-image: url(../images/nav_blog_off.gif);

}

 

#blog a:hover {

background-image: url(../images/nav_blog_on.gif);

}

 

#contacto {

width: 78px;

height: 26px;

background-image: url(../images/nav_contacto_off.gif);

}

 

#contacto a:hover {

background-image: url(../images/nav_contacto_on.gif);

}

 

#container {

width:700px;

height:360px;

position:relative;

left:55px;

top:0px;

margin:0 15px;

border-style: solid;

border-width: 1px;

border-color: #6c1114;

padding: 15px;

overflow:auto;

background:url('../images/transblack_86.png');

}

 

#newscontainer {

width:250px;

height:350px;

position:relative;

left:470px;

top:0px;

margin:0 15px;

border-style: solid;

border-width: 1px;

border-color: #6c1114;

padding: 15px;

overflow:auto;

background:url('../images/transblack_86.png');

}

 

I know it's kind messy but feel pretty novice about using CSS to lay out a site, so I'd be happy only if it worked... then i'll move to the streamlining part.

Thanks!

 

Here's the site, once again:

 

>> http://www.themedusa.net/afinas

 

edit: also, I can't seem to link the logo. Can someone tell me why? I used the same principle I used on the navigation bar.