...

View Full Version : I cannot get this layout to work!!



lost
01-23-2004, 11:50 PM
Hello all.
I'm really having a hard time with this webdesign stuff...:D I'm not a designer by any means... I'm just trying to get this layout to work. I haven't finished the nav or links, color scheme, header, or anything yet.

Could someone look at my code? I can't seem to get this layout to work in 800x600 without a space on the right side... Also, somehow in dreamweaver, I got those spacer.gif's on there and am not sure what they do.

here's the site...

messed up layout (http://www.artistcollaboration.com/~loststudios)

By the way... I know that I'll get slammed for not using CSS (which I don't know) and that the code is outdated, but I just need to get this up for now.

Thanks for any insight or suggestions!
jay

zoobie
01-24-2004, 01:18 AM
Can't really tell with all those crazy images spacers, tables and stuff...but offhand, looks like your col spans are goofed...
You could do that with a fraction of coding btw...just ask:p

lost
01-24-2004, 01:26 AM
I'm asking... :D

How would I do that with the fraction of the code? or perhaps some suggestions on how I fix what I currently got going on?

Thanks again
jay

zoobie
01-24-2004, 01:39 AM
>>without a space on the right side
Ok...First off, what space? At the top-right of the page? You're looking for a basic 3 column layout with a center main and 2 nav bars on both sides?

lost
01-24-2004, 01:53 AM
Originally posted by zoobie
>>without a space on the right side
Ok...First off, what space? At the top-right of the page? You're looking for a basic 3 column layout with a center main and 2 nav bars on both sides?

Thanks for replying again... Yeah.. In 800x600, I'm getting a horizontal scrollbar and have a small space of white on the right of the site.

Secondly... yes, I'm looking for a basic 3 column site... an image header, nav bars on both sides, and the main center area. Right now I'm using background images for each column and the header as well as 2 vertical 9 pixel lines between the left column and center... and between the right column and center.

Any ideas?

thanks a bunch.
I really appreciate it.
jay

zoobie
01-24-2004, 01:59 AM
Alright...Give me a few and check back in an hour or so...

zoobie
01-24-2004, 03:10 AM
See if this works for you...kinda a corporate look. You can change the font size of the links in the head.

<HTML>
<HEAD>
<TITLE>lost studios</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<style>
a {font:normal 15px arial; color:white;display:block}
</style>
</HEAD>
<BODY BGCOLOR=#FFFFFF text="#FFFFFF" link="#FFFFFF" vlink="#FFFFFF" alink="#FFFFFF" leftMargin=0 topMargin=0 >
<div style="width=100%; height:80px /*take height:80px out when you use your header image*/">
<img src="" width="" height="" border="0">
</div>

<div style="float:left; background-color:brown;width:20%;padding-bottom:30px;text-align:center;">
<b>Main Navigation</b><br>
<a href="index.html">home page</a>
<a href="services.htm">services offered</a>
<a href="images.htm">studio images</a>
<a href="staff.htm">staff</a>
<a href="portfolio.htm">portfolio</a>
<a href="rates.htm">studio rates</a>
<a href="policies.htm">studio policies</a>
<a href="policies.htm">studio policies</a>
<a href="contact.htm">contact & booking</a>
<br>
<b>Resources</b><br>
<a target=new href="http://www.rlabels.com">record labels</a>
<a target=new href="http://www.getsigned.com">get signed</a>
<a target=new href="http://www.starpolish.com">star polish</a>
<a target=new href="http://www.discmakers.com">disc makers</a>
<a target=new href="http://www.newmetal.com">new metal</a>
<a target=new href="http://www.taxi.com">taxi</a>
<br>
<b>Friends</b><br>
<a target=new href="http://www.artistcollaboration.com/~jay">LSDesigns</a>
<a target=new href="http://www.sonicvalley.com">sonic valley</a>
<a target=new href="http://www.artistcollaboration.com">artist collaboration</a>
</div>

<div style="text-align:left;float:left;width:58%;margin-left:10px;font:normal 14px verdana;color:black">
<span style="font:bold 18px verdana;color:black">Welcome
to lost studios...</span><br><br>
lost studios is a digital harddisk recording &amp; production studio as well
as a multimedia &amp; design facility. &nbsp;We primarily work with
local New York City area artists, labels, and businesses for songwriter
&amp; band releases, band demos &amp; project CD's, music arrangement
&amp; production, radio &amp; commercial spots, and sound for picture.<br><br>From a simple vocal demo to a full-length, fullblown production, lost studios can accomodate virtually all your recording and multimedia needs.
</div>

<div style="float:right; background-color:brown;width:20%;padding-bottom:30px;text-align:center;color:white;">
<b>Main Navigation</b><br>
<a href="index.html">home page</a>
<a href="services.htm">services offered</a>
<a href="images.htm">studio images</a>
<a href="staff.htm">staff</a>
<a href="portfolio.htm">portfolio</a>
<a href="rates.htm">studio rates</a>
<a href="policies.htm">studio policies</a>
<a href="policies.htm">studio policies</a>
<a href="contact.htm">contact & booking</a><br>
<b>Resources</b><br>
<a target=new href="http://www.rlabels.com">record labels</a>
<a href="portfolio.htm">portfolio</a>
<a href="rates.htm">studio rates</a>
<a href="policies.htm">studio policies</a>
<a href="policies.htm">studio policies</a>
<a href="contact.htm">contact & booking</a>
<br>
<b>Friends</b><br>
<a target=new href="http://www.artistcollaboration.com/~jay">LSDesigns</a>
<a target=new href="http://www.sonicvalley.com">sonic valley</a>
<a target=new href="http://www.artistcollaboration.com">artist collaboration</a>
</div>
</BODY>
</HTML>

lost
01-24-2004, 03:36 AM
Thank you so much!

It looks great and is what I was looking for...

I do have a question. Can I use a background images behind the navs and body section?

Thanks again!
Jay

zoobie
01-24-2004, 03:56 AM
Sure...just insert this is the corresponding div's style:
background-image: url(images/hat.jpg);
and take out background-color:brown
Best to read up on this here (http://www.w3.org/TR/REC-CSS1) because there's many variations of background css...or post back with a link online so we can see. :D

lost
01-24-2004, 04:55 AM
God!?! I'm getting so frustrated.

Alright... I can't for the life of me get it the way I want. You definately got me in the right direction though!

I want to make the background images for the header, nav's, and the center area a fixed size so it fits perfectly in 800x600. In any higher resolution it would remain the same size, but just center and have space on either side. The reason I want to make the background images for the navs and the center area is so I can make it more graphical and have color changes and some lines to break things up visually.

I can't for the life of me get a image to sit within the div like you mentioned. The background image for each nav is 150x450...It doesn't seem to work when I try it...

<div style="background-image:images/leftnavbackground.gif;text-align:center;">

One more thing... is 770px as big horizontally as you can go before you get scroll bars @ 800x600? My header is 770 by 75 and this is how I inserted it...

<div style="width=100%" align="center"> <img src="images/header.gif" width="770" height="75" border="0">

Sorry I'm such a newb... and thanks for the patience and help.


Any insight?
jay

zoobie
01-24-2004, 05:22 AM
Your header should be ok...
For the left nav bar, try:
<div style="float:left; background-image: url(images/leftnavbackground.gif);width:20%;padding-bottom:30px;text-align:center;">

lost
01-24-2004, 05:52 AM
hmm... it's not working for me.

I uploaded that left nav bar with my original code, but with the background image in it so you can see what I'm trying to do...

take a look at the left nav bar... I want to do things like this with the other nav bar and the center box as well.

http://www.artistcollaboration.com/~loststudios

zoobie
01-24-2004, 06:08 AM
That's the old page...Put your new page on so I can see it

rmedek
01-24-2004, 07:09 AM
Hi lost,

Try www.w3schools.com (http://www.w3schools.com) . It's a good place to get some background on coding before you take on the task of building a page without an editor.

Hope this helps,

Rich

lost
01-24-2004, 09:31 PM
Ok... zoobie.

I've re-put up the new version...This is the code that you gave me with background images that I've put in the divs... I still can't for the life of me get the thing layed out the way I want! The right nav bar is below everything else and I can't get the entire site to center at higher resolutions. I'm not sure about that float: tag...

What I want is it to fit perfectly in 800x600, and then in higher resolutions, I want the site not to stretch but to remain the same size and just center...

Could you please take another gander at my code and tell me whats the deal?

thanks a million!
Jay

http://www.artistcollaboration.com/~loststudios

zoobie
01-24-2004, 10:22 PM
You changed the percentages I gave you...so, of course, it won't fit now.
I think I see what you're trying to do now...but the text won't line up because it's one image. You'd have to split the nav bar into 2 seperate pieces.
Ever consider a image map? That's where the whole nav bar is an image complete with text...and you tell each piece of the image (in this case, the text) to become a link...

lost
01-24-2004, 10:35 PM
I couldn't use the percentages because I want the divs to stay a fixed size so I could use the background images...

lost
01-24-2004, 10:38 PM
Basically... right now, my problem is the right nav bar is dropping down below everything else on the right...

and the other problem is I can't get the entire page to center at resolutions higher that 800x600... Is there some way to put all 4 divs within one div?

thanks again
jay

zoobie
01-24-2004, 10:50 PM
Ok...Try making the main center column a little les wider...until it fits. You could try putting the whole page within another <div align="center"> and see what happens.

lost
01-24-2004, 11:10 PM
hmm... I did both of those suggestions and it still stays right where it is... I can't for the life of me figure out what's going on with that right nav bar and how to get all 4 divs to sit together inside one div??

zoobie
01-25-2004, 02:01 AM
If you use <font size="2" face="Verdana, Arial, Helvetica, sans-serif">, it won't line up properly on your navbackground because users have their browsers set differently. Go to view>text size>normal. Now, click on other sizes and your design is screwed. This is why by using css, you can control the font size so it fits your navbackground. You'll have to tackle one thing at a time.

Center alignment:

Put this in after <body>:

<div style="text-align:center">
<div style="margin-left:auto; margin-right:auto;width:780px"

your present code here

</div>
</div>
</body>
</html>

I'll try to fix the rest tonight

lost
01-25-2004, 04:41 AM
Zoobie...

I monkeyed with what you gave me in the post before last...

I think I got it... take a look and tell me what you think.

I really can't thank you enough!!!!!!!!!!!!

later.
Jay

http://www.artistcollaboration.com/~loststudios

zoobie
01-25-2004, 05:11 AM
Go to the top of your browser and click view>text size>larger...which is what I have my browser set on. Lots of people set their browsers on different sizes. Yours is obviously set on normal...but on mine, your page looks fooked. As long as you keep using <font size=2> and not css, it will never be uniform because people set their browsers differently.

Here's what I came up with using css. You can change your view>text size>normal to anything and it will remain the same because I used css to display a standard size and not <font size=2>.

<HTML>
<HEAD>
<TITLE>lost studios</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<style>
a {font:normal 12px verdana; color:#435676;display:block}
</style>
</HEAD>
<BODY BGCOLOR=#FFFFFF text="#FFFFFF" link="#435676" vlink="#435676" alink="#FF6600" leftMargin=0 topMargin=5>
<div style="text-align:center">
<div style="margin-left:auto; margin-right:auto;width:773px">
<div style="width=100%; height:80px;"><img src="images/header.jpg" width="765" height="75" border="0"></div>

<div style="float:left;background-image: url(images/navbackground.gif);width:150px;height:515px;text-align:center;">
<p style="margin-top:-2px">
<b><span style="font:normal 17px verdana; color:white">Main Navigation</span>
<p style="margin-top:15px">
<a href="index.html">home page</a>
<a href="services.htm">services offered</a>
<a href="images.htm">studio images</a>
<a href="staff.htm">staff</a>
<a href="portfolio.htm">portfolio</a>
<a href="rates.htm">studio rates</a>
<a href="policies.htm">studio policies</a>
<a href="contact.htm">contact & booking</a>
<p style="margin-top:18px">
<b><span style="font:normal 17px verdana; color:white;">Resources</span>
<p style="margin-top:35px">
<a target=new href="http://www.rlabels.com">record labels</a>
<a target=new href="http://www.getsigned.com">get signed</a>
<a target=new href="http://www.starpolish.com">star polish</a>
<a target=new href="http://www.discmakers.com">disc makers</a>
<a target=new href="http://www.newmetal.com">new metal</a>
<a target=new href="http://www.taxi.com">taxi</a>
<p style="margin-top:43px">
<b><span style="font:normal 17px verdana; color:white;">Friends</span></b>
<p style="margin-top:45px">
<a target=new href="http://www.artistcollaboration.com/~jay">LSDesigns</a>
<a target=new href="http://www.sonicvalley.com">sonic valley</a>
<a target=new href="http://www.artistcollaboration.com">artist collaboration</a>
</div>

<div style="text-align:left;float:left;width:460px;height:350px;padding:25px 10px 0 10px;font:normal 14px verdana;color:black;background-image: url(images/bodybackground.gif)">
<span style="font:bold 18px verdana;color:black">Welcome
to lost studios...</span><br><br>
lost studios is a digital harddisk recording &amp; production studio as well
as a multimedia &amp; design facility. &nbsp;We primarily work with
local New York City area artists, labels, and businesses for songwriter
&amp; band releases, band demos &amp; project CD's, music arrangement
&amp; production, radio &amp; commercial spots, and sound for picture.<br><br>From a simple vocal demo to a full-length, fullblown production, lost studios can accomodate virtually all your recording and multimedia needs.
</div>

<div style="float:left;background-image: url(images/navbackground.gif);width:150px;height:515px;text-align:center;">
<p style="margin-top:-2px">
<b><span style="font:normal 17px verdana; color:white">Main Navigation</span>
<p style="margin-top:15px">
<a href="index.html">home page</a>
<a href="services.htm">services offered</a>
<a href="images.htm">studio images</a>
<a href="staff.htm">staff</a>
<a href="portfolio.htm">portfolio</a>
<a href="rates.htm">studio rates</a>
<a href="policies.htm">studio policies</a>
<a href="contact.htm">contact & booking</a>
<p style="margin-top:18px">
<b><span style="font:normal 17px verdana; color:white;">Resources</span>
<p style="margin-top:35px">
<a target=new href="http://www.rlabels.com">record labels</a>
<a target=new href="http://www.getsigned.com">get signed</a>
<a target=new href="http://www.starpolish.com">star polish</a>
<a target=new href="http://www.discmakers.com">disc makers</a>
<a target=new href="http://www.newmetal.com">new metal</a>
<a target=new href="http://www.taxi.com">taxi</a>
<p style="margin-top:43px">
<b><span style="font:normal 17px verdana; color:white;">Friends</span></b>
<p style="margin-top:45px">
<a target=new href="http://www.artistcollaboration.com/~jay">LSDesigns</a>
<a target=new href="http://www.sonicvalley.com">sonic valley</a>
<a target=new href="http://www.artistcollaboration.com">artist collaboration</a>
</div>
</div>
</div>
<br>
</BODY>
</HTML>

lost
01-25-2004, 06:01 AM
Ahh.... yikes... i see what you mean!

Darn it!

Would it be possible for you to edit the code that I've recently uploaded... it seems you're still using the code that I uploaded a while back and I've changed some of the background image sizes since then and a few other things. When I cut and pasted the code in the above post everything went all wacky...

Besides the text problem (font size=2), the page I recently uploaded looked great in IE and mozilla...that is with view>text size>medium set. But I understand that I still have a big problem.

I noticed that what I did myself within each individual div tag is different than what you have just written as well...

If you have time, could you have a look at the most recent code and apply that CSS that you've mentioned... I've tried, but can't get the layout the same way as I have right now.

thanks zoobie...
I won't forget this!
Jay

http://www.artistcollaboration.com/~loststudios

Paul Jr
01-25-2004, 06:05 AM
Originally posted by zoobie
You can change your view>text size>normal to anything and it will remain the same because I used css to display a standard size and not <font size=2>.
That is only true for Internet Explorer. In any other good browser, the text will change as I adjust it in my browser settings. :rolleyes:

zoobie
01-25-2004, 08:05 AM
Well Paul, you're basically right. But since IE is used to browse the internet by over 95% of non-geeks, I'd focus on this browser first. I did mention cross browser image maps but you'd have to have read the whole thread. Sure...things don't display properly in Freds browser, either.

I'll take a look at it tomorrow if I have the time. :D

lost
01-25-2004, 08:06 AM
Thanks zoobie!

Jay

zoobie
01-25-2004, 11:33 PM
Ok man...but look. You're designing as you go which is fine if you know the languages. But if someone else is doing the coding, it doesn't work too well. Next time, get your layout design finalized on paper...then ask for help.

<HTML>
<HEAD>
<TITLE>lost studios</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<style>
a {
font:normal 12px verdana, arial, helvetica, sans-serif;
line-height:14px;
color:#435676;
display:block
}
a:link {color:#435676}
a:visited {color:#435676}
a:hover {color:#FF6600}
a:active {color:#43567}
.navCat {font:normal 17px verdana;color:white}
</style>
</HEAD>
<BODY leftMargin="0" topMargin="8" style="overflow:auto">

<div style="text-align:center">
<div style="margin-left:auto; margin-right:auto;width:773px">

<div style="margin-bottom:8px"><img src="images/header.jpg" width="765" height="75" border="0"></div>

<div style="float:left;background-image: url(images/navbackground.gif);width:150px;height:350px;text-align:center;margin-left:2px">
<p style="margin-top:-2px">
<span class="navCat">Main Navigation</span>
<p style="margin-top:15px">
<a href="index.html">home page</a>
<a href="services.htm">services offered</a>
<a href="images.htm">studio images</a>
<a href="staff.htm">staff</a>
<a href="portfolio.htm">portfolio</a>
<a href="rates.htm">studio rates</a>
<a href="policies.htm">studio policies</a>
<a href="contact.htm">contact & booking</a>
<p style="margin-top:18px">
<span class="navCat">Resources</span>
<p style="margin-top:18px">
<a target=new href="http://www.rlabels.com">record labels</a>
<a target=new href="http://www.getsigned.com">get signed</a>
<a target=new href="http://www.starpolish.com">star polish</a>
<a target=new href="http://www.discmakers.com">disc makers</a>
<a target=new href="http://www.newmetal.com">new metal</a>
<a target=new href="http://www.taxi.com">taxi</a>
<a target=new href="http://www.afm.org/public/musicbiz/music_copyright.php">copyrights</a>
<a target=new href="http://www.futureproducers.com">future producers</a>
<a target=new href="http://www.guitartabs.cc/home.php">guitar tabs</a>
</div>

<div style="text-align:left;float:left;width:453px;height:350px;padding:25px 10px 0 10px;font:normal 14px verdana;color:black;background-image: url(images/bodybackground.gif);margin-left:4px">
<span style="font:bold 18px verdana;color:black">Welcome
to lost studios...</span>
<p style="margin-top:15px;text-indent:20px">
lost studios is a digital harddisk recording &amp; production studio as well
as a multimedia &amp; design facility. &nbsp;We primarily work with
local New York City area artists, labels, and businesses for songwriter
&amp; band releases, band demos &amp; project CD's, music arrangement
&amp; production, radio &amp; commercial spots, and sound for picture.
<p style="margin-top:15px;text-indent:20px">
From a simple vocal demo to a full-length, fullblown production, lost studios can accomodate virtually all your recording and multimedia needs.
</div>

<div style="float:left; background-image: url(images/navbackground.gif);width:150px;height:350px;text-align:center;margin-left:4px">
<p style="margin-top:-2px">
<span class="navCat">Friends</span>
<p style="margin-top:18px">
<a target=new href="http://www.artistcollaboration.com/~jay">LSDesigns</a>
<a target=new href="http://www.yourmusicforums.com">yourmusicforums</a>
<a target=new href="http://www.artistcollaboration.com">artistcollaboration</a>
<a target=new href="http://www.audioforums.com">audioforums</a>
<a target=new href="http://www.traversing.cjb.net">traversing</a>
<a target=new href="http://www.amdzone.com">AMDzone</a>
<a target=new href="http://www.recordingproject.com">recordingproject</a>
<a target=new href="http://www.americanmovie.com">Mark & Mike</a>
<p style="margin-top:15px">
<span class="navCat">Fans</span>
<p style="margin-top:18px">
<a target=new href="http://www.dredg.com">dredg</a>
<a target=new href="http://www.birthsound.com">birth</a>
<a target=new href="http://www.drumsandtuba.com">drums & tuba</a>
<a target=new href="http://www.toolband.com">tool</a>
<a target=new href="http://www.deftones.com">deftones</a>
<a target=new href="http://www.pinkfloyd.com.uk">pink floyd</a>
<a target=new href="http://www.sonyclassical.com/artists/horowitz_vladimir/">Vladimir Horowitz</a>
<a target=new href="http://www..com">Maniac Marvin</a>
<a target=new href="http://www..com">the lost</a>
</div>

</div>
</div>
</BODY>
</HTML>

If you know somone else who needs basic webpage design help, I'm available for a reasonable price. :D

lost
01-26-2004, 02:36 AM
I apologize for designing as I went and changing a few things. I hope I haven't inconvenienced you in any way. I can't thank you enough for taking the time to help me out. Everything look great!

On a lighter note, I'm in the middle of doing a CSS tutorial... ;)

later zoobie!
Jay

spufi
01-26-2004, 05:44 PM
Originally posted by zoobie
If you know somone else who needs basic webpage design help, I'm available for a reasonable price. :D

The problem being that your code doesn't validate. You defined CSS within the tags instead of using classes and ids within tags and then defining the CSS externally. This code below..

<p style="margin-top:-2px">
<span class="navCat">Main Navigation</span>
<p style="margin-top:15px">

...should be a well styled header tag in all reality. You do that type of coding multiple times within the code you posted.

The links code code be shrunk down to this...

a {
font:normal 12px verdana, arial, helvetica, sans-serif;
line-height:14px;
color:#435676;
display:block;
}
a:hover {
color:#F60;
}

Granted I would put the links in a unordered list and get rid of the need to use display block. Also note px isn't exactly the best unit of measurement to use when defining text because IE can't resize it.

How about a case of over code?

<div style="text-align:center">
<div style="margin-left:auto; margin-right:auto;width:773px">
<div style="margin-bottom:8px">
<img src="images/header.jpg" width="765" height="75" border="0">
</div>

No use of the alt attribute in the <img> tag either, so if the logo image doesn't appear, nothing in regards to the logo does.

zoobie
01-26-2004, 10:22 PM
Originally posted by spufi
Also note px isn't exactly the best unit of measurement to use when defining text because IE can't resize it.

Ummm...That's the whole idea. If you had actually checked this thread and see what jay is trying to do, you wouldn't make such silly statements. It could have been tightened up a teeny bit more...but not really necessary.

This was simply an exercise in css display outta the kindness of my big heart. The usual response to jays question is "learn html/css".

Alt tag? Oh dear...:rolleyes:

_________________________________________

If you're not part of the solution, you're part of the problem - John Lennon

spufi
01-27-2004, 06:56 PM
I went back and reread the thread to see what I missed, and I still say using px to just make it work with images is a lack in better design. The alt attribute is also required in strict mode accorrding to the W3C.

zoobie
01-28-2004, 07:10 PM
Well, so is the missing doc type. Anyway, I still think jay would be better off with image maps so he wouldn't be trying to align text specifically on backgrounds. Then, you could go hog wild with your alt tags...alt tags! But as long as he's happy...:p



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum