none
need help creating a dwt with 5 colums RRS feed

  • Question

  • need help creating a dwt with 5 colums. im having problems mainly with the css sheets as i attach them but when i modify them it does not change anything in my dwt. i have tried this with one of the pre made templates and the changes work. here is the layout im wanting:

    container w800px h1200px, header w800px h100px, navigation "floating left" w170px h1080px, content_links w610px h30px, content w610px h1000. then a footer outside of the container footer w800px h100.....5px padding on everything, no margins and black backrounds for the entire page. i have a jpg of the layout i want to create but dont see where i can upload it. i have watched several videos on this but just dont seem to be having any luck.

    also have one created with interactive link buttons in the navigation column but when i create a page from the dwt, the links do not work. i have been trying to figure this out for months can someone please help me?

    Sunday, January 30, 2011 7:42 AM

Answers

  • The problem is you have stripped out all the good stuff. ;-)

    The style sheets really are bare bones. What I saw looked like parts of the templates, but I wasn't sure once I saw the skeletal remains of the style sheet.

    You really do need everything that the style sheets had--and more; think about it, you're putting it all back again, just on the DWT instead of in the right place. You deleted the width of the footer in the style seet, but now it's on the DWT, etc. I think you just didn't understand how they were working. Only the layout.css and one of the 3 numbered sheets was active at any one time (the one called in the top of your pages).

    Create a new website from the original template you used (starting fresh). The only thing you need to do to make the layout in that JPG is to add another div under "content". On the DWT, copy the code for the whole content div then paste it directly under that content divand change the id to "content2", since you can't use the same name twice on a page. Then copy the style section for "content" on the style sheet, paste it right under the "content" style, and just change the name to "content2" and change the float to 'right'. It'll snug right up under "content". Then set your widths to total 960/980 px and you're done, ready to start changing colors and filling in the divs with material.

    And don't put a height on any container that holds any text. The web ain't print; you can't control the users' computers; you have to adapt to that.

     


    Eschew obfuscation.
    • Marked as answer by tattoorocky Monday, January 31, 2011 6:16 AM
    Monday, January 31, 2011 5:47 AM

All replies

  • heres the site im wanting to create the dwt for: http://artistictattoodesigns.com

    as well as use it to redo my other site

    Sunday, January 30, 2011 7:45 AM
  • This does not help:
     <div id="content" style="height: 45px">
         <!-- #BeginEditable "content" -->
         <h2 ...>three repeated  h2 tags;</h2>
         <!-- #EndEditable "content" --></div>
     <div id="content" style="height: 1200px">
     <!-- #BeginEditable "content" -->
     <h2 style="border-left-color: #000000; border-color: #000000; height: 1200px; border-bottom-width: thin; border-right-color: #000000; border-top-color: #000000;" class="style6">
     &nbsp;</h2>
     <!-- #EndEditable "content" --></div>

    Note the divs and editible regions with the same IDs or names...
    You cannot use the same id more than once in a single page.  And you cannot use the the same name for more than one editable region in single page (or single DWT).
    Correct these errors first - then see how things progress.

    Also, see the learning resources in the Before Posting thread -
    http://social.expression.microsoft.com/Forums/en-US/web/thread/99c95aee-bfe6-4c4d-80d4-8d197194a942

    Also, remove heights from containers that will eventually hold text - leaving the height in place will break the site in any browser that is set up with different a text size to yours. (think high resolution notebook with large fonts, for example).


    Ron Symonds
    Microsoft MVP (Expression Web)

    www.rxs-enterprises.org/fp
    Sunday, January 30, 2011 9:38 AM
  • There is obviously a lot of good information out there about how to create the type of multi-column layout you're looking for using CSS. One of the most creative and effective approaches comes from Matthew James Taylor's design blog, particularly his article Equal Height Columns with Cross-Browser CSS and No Hacks. He also has some very interesting stuff on liquid layouts.

    His CSS is brilliant but not intuitive, yet his explanations are among the best I've ever seen. It still might take some digging and experimenting before you get it.

    When working on a new layout, I recommend forgetting about content and dealing only with boxes. Make a single HTM file with an on-page style sheet - no external CSS files and no DWT. Once you have your solution and understand it, you will find it easy to make the DWT and put the CSS in a file.


    Will
    Baltimore, MD USA - www.fastie.com
    Sunday, January 30, 2011 1:48 PM
  • A couple of things before you start over...

    I don't know what is going into the 5 columns, pictures? text? But when you put 5px of padding on each side, you're left with only 150px for each column if you're going to make it 800px wide (it's currently much narrower). That's nothing; pictures will be too teeny to see anything and text lines will be annoyingly short. Make the site to the current standard width, 960-980 px (look at CNN, MSNBC, etc., they are all a similar width, which fits inside a browser on a 1024 px-wide screen).

    Better yet, drop the idea of 5 columns. There's probably a good reason that you never see a site with 5 columns--they are too skinny and monitors are too low resolution to give good results with a max width photo of 180px (at 960-980 px). One thing you could do is have a horizontal menu. That would save one column right there, leaving 4 for the content--probably still too small.

    Don't use H1, H2 for sizing that code means something to search engines. You are only allowed one H1 on a page, and it should be the most important title. Read about semantic markup for correct use of headings.

    The text on the menu buttons is jaggedy on my very good monitor. The lower case letters are only 5 px tall and the uppercase are only about 12 px; that's too few pixels to have good legibility. I'd suggest dropping the use of those buttons altogether, and using a standard CSS menu. The buttons slow down page loading because they are graphical elements. The page is already 139 KB (largely because of those buttons) and there's no content yet. Ideally, pages should be no more than 100 KB total. For a graphics-heavy page (which yours may be), that may not be possible. But to keep visitors happy and not having to wait an eternity for the page to load, you need to wring all the excess out of the page that you can. Nobody cares what the menu looks like--it's a utility for navigation. But there are cool things you can do with CSS menus (and the text is much clearer, since it's real text, not a graphical image of text). To see what's possible with text-based menus that load in a flash, go to cssplay.co.uk.

    If it helps to figure things out, while you are experimenting with layouts, make each div a different color so you can see what's going on.

    Have fun.


    Eschew obfuscation.
    Sunday, January 30, 2011 3:08 PM
  • Will,

     Thanks for the link to Matthew James Taylor's blog- its another great information resource. I must admit in spite of all the books I have I am still hungry for new ways to rationalize CSS- this is another good one.

    I agree 5 columns is too much. We fretted and fretted over just 4 on one site we were doing and after looking at it with differing screens sizes and browser windows we went with just 3 columns. One consideration was images but also the standard ad sizes they wanted to insert. I often do work on a 24 monitor and then go look at it on a laptop just to make sure its still optimal for both. Its about averages when trying to look good across the realm of displays.

    Sunday, January 30, 2011 3:31 PM
  • I meant to say this earlier - I don't think the OP really wants 5 columns. The post mentions 5 divs, but they are basically an outer container, header, footer, left nav, and right content. It appears to be a classic 2 column design.
    Will
    Baltimore, MD USA - www.fastie.com
    Sunday, January 30, 2011 3:57 PM
  • Start over, please. What you have is a mess that doesn't display in IE 8 very well.

    Quit using the toolbar buttons for everything and why are you using black text on a black background? You  have #content defined twice in the head section and with inline styles. Same with the h2, its defined in the head section then again inline every single time you are using it - incorrectly too.

    Lose the navigation buttons, they don't go with an artist's site. You don't want large bright buttons to take away from you tattoo designs. You want your visitor's attention focused on your creations.

    I would also suggest that you stick to a 2 column layout for your page and use a table to hold your tattoo designs. Something more like http://wizerways.net/tattoo/index.html though frankly I'd change the masthead into a better graphic that more reflects your artwork like the Tattoo Rockys.com masthead and pick a different color scheme. That one uses colors you specified in the your code.

    May I suggest that you work your way through the learning resources in the Before Posting sticky? That will help yo understand a bit more how standards based web design works.

    Also, ditch the image of your web stats, nobody cares except you and it really does detract from your site.


    MS MVP Expression Tutorials & Help http://by-expression.com & Expression Web forums
    Sunday, January 30, 2011 4:51 PM
  • Yeah, I think you may be right. If his header is any indication, the page is destined to be about 670 pixels(?) wide. Not usre why such an odd, small value, but there you are. Even with columns at 150px or so (like the menu), you still can't squeeze five columns in there.

    OTOH, since he is a tattooist, he may plan four columns of thumbnails linked to larger images on each category page, like a catalog layout. If so, obviously, that row/column layout is perfectly suited for a table, so even in that case you're still looking at only two columns structurally, one for the menu and one for the table.

    Perhaps the OP will drop back by and clue us in on what his actual intent is, so we can stop guessing and maybe offer more concrete suggestions.

    cheers,
    scott


    Please remember to "Mark as Answer" the responses that resolved your issue. It is common courtesy to recognize those who have helped you, and it also makes it easier for visitors to find the resolution later.
    Sunday, January 30, 2011 4:56 PM
  • Well, he really does say 5 columns, not 5 divs..."need help creating a dwt with 5 colums."

    And while he has code in his post indicating that it will be 800px wide, the sample is only 670px, leaving only 124 px for content in each column (after deducting for 5px padding on each side of each column). That's really skinny.

    The current menu column is only 140 px, so that does seem as though he's trying for 5 columns.


    Eschew obfuscation.
    Sunday, January 30, 2011 10:35 PM
  • Yes, and looking at the titles of his other pages, essentially artwork categories, is what made me think that perhaps his objective was samples of the type of work he offers in each category, which would point to a gallery-style thumbnail array on each page.

    And really, when you think about it, 100–120 pixels is plenty for an image thumbnail in such a gallery. I've seen much smaller used in such applications (e.g. the example page in the recent thread on unwanted sizing being applied to images). So, maybe five columns (more accurately, two columns with a four-column table in one of them) is actually what he is looking for.

    Of course, we can sit here and speculate all day long, and reach all sorts of insightful conclusions, and until the OP comes back and says, "Here, this is what I'm trying to do," it's all just so much brain vapor.  ;-)

    cheers,
    scott


    Please remember to "Mark as Answer" the responses that resolved your issue. It is common courtesy to recognize those who have helped you, and it also makes it easier for visitors to find the resolution later.
    Sunday, January 30, 2011 11:27 PM
  • thanks for all the replys need to sort through and rad them good. here a link to the layout i had in mind guess its actually 2 columns with only 2 of them being editable i.e. the content_links and content. as far as the interactive buttons go i used them so i can use my own font that will show even if they dont have those fonts installed on their machine. the site that is uploaded now is the first one i made and the images were just meant to be tempory until i had the dwt the way i wanted it. and im just putting images on this site and a page of links to various artists and sites

    http://tattoorocky.com/dwt_layout.htm

    Monday, January 31, 2011 2:42 AM
  • http://tattoorocky.com/dwt_layout.htm

    actually my site is going to be 2 columns with a header, footer and a module for links. in the dwt im wanting 2 of these to be editable the content_links and the content. the goal is that the only thing that will be different through the site is the content which will be pictures and the page title plus links. for example in my navigation column i will have a link for "floral" when the floral page is displayed in the content_links box will have the page title as well as links to say 3 different floral pages.

    you are right though about the interactive buttons slowing down page loading. my thought on those was to have a font i like on the site. i think eliminating them will ease some of my problems. my thinking is to have 30 pictures per pg, do you think that is to many? originally i wasnt planning on this site for anyone using dial up, but everyone browses the web with cell phones these days.

    i just finished uploading the entire new site/dwt im working on

    http://artistictattoodesigns.com/

    heres the dwt im working on the links do not work when i make a page from the dwt

    tattoorocky.com/public_html/artistictattoodesigns/master.dwt

    the content that is on there is only temporary

    Monday, January 31, 2011 3:40 AM
  • yes thats correct 5 divs with 2 of them being columns. sorry i wasnt more clearer on that.

    http://tattoorocky.com/dwt_layout.htm

    cant figure out why the link to the master.dwt wont work

    http://tattoorocky.com/public_html/artistictattoodesigns/master.dwt


     

    Monday, January 31, 2011 3:54 AM
  • Glad you're not doing 5 columns. You scared me for a moment there! ;-) A couple of things I noticed on the new one:

    There are heights on the divs that will hold your page content. Never put a height on a div that has text in it. People with high resolution screens (laptops, netbooks, etc.) often set the browser to zoom text-only (not the whole page, just the text). If you set a fixed height, the text has nowhere to go, and the site breaks badly.

    The footer is set to:
    <div style="position: absolute; width: 890px; height: 100px; z-index: 2; left: 10px; top: 1415px" id="footer" class="style1">
    The first rule of web design is: Never ever ever ever ever use absolute positioning (layers). Ever. Well, almost ever. The uses for layers are so few and the pitfalls so serous that only people with a deep understanding of them should use them. And there's no reason to on your site. I never use them. They are deceptively simple for the new user, but dangerous. They display differently on every computer. Disaster awaits. You may not have done this on purpose; you may have just dragged the footer in the Design Pane. Can't do that--EW automatically changes the layout of what you dragged to absolute since it has no other idea of what you want to do.

    Plus, all of that styling stuff (width, etc.) should be on the external style sheet. The start of a div should just be <div id="footer"> or <div id="masthead">
    Everything else should be on the style1.css sheet so it loads only once and doesn't have to be loaded with each page.

    Get rid of all the z-indexes too. Not needed.

    Get used to working in split view and get used to dealing with the code. Preview in many different browsers, too.

    30 pix on a page? If you keep them the same file sizes that you have on the tattoorocky portfolio page, that'll probably be okay. The 100 KB page size isn't written in stone, it's just a rule of thumb. You'll have to experiment with jpg compression to see what looks best when making the thumbnails.

    Take the tutorials in the BEFORE POSTING thread and play with the site templates that come with EW. See how they are laid out and how the style sheets work. Experiment a little. In fact, the included templates fit what you want to a T. Use one of them and the basics will have been done for you. You'l need to change the widths in the style sheet and the colors, but they'll give you the properly coded layout already done.


    Eschew obfuscation.
    Monday, January 31, 2011 4:22 AM
  • the original site i had uploaded was made from  one of the templates i stripped down because i was having issues with the css sheets. the templates all have way more bells and whistles than i need on this site which is why i just wanted to make my own. i have been working on the dwt since i updated my post here and will get back to it after i finish replying to you. thank you for taking the time to help me this dwt has been driving me crazy for months. i have been trying to find a client who knows about ew or dwts but with no luck. would gladly give someone ink to get this figured out for me as i plan on using this dwt for several sites for my work, the shop ect.
    Monday, January 31, 2011 4:34 AM
  • The problem is you have stripped out all the good stuff. ;-)

    The style sheets really are bare bones. What I saw looked like parts of the templates, but I wasn't sure once I saw the skeletal remains of the style sheet.

    You really do need everything that the style sheets had--and more; think about it, you're putting it all back again, just on the DWT instead of in the right place. You deleted the width of the footer in the style seet, but now it's on the DWT, etc. I think you just didn't understand how they were working. Only the layout.css and one of the 3 numbered sheets was active at any one time (the one called in the top of your pages).

    Create a new website from the original template you used (starting fresh). The only thing you need to do to make the layout in that JPG is to add another div under "content". On the DWT, copy the code for the whole content div then paste it directly under that content divand change the id to "content2", since you can't use the same name twice on a page. Then copy the style section for "content" on the style sheet, paste it right under the "content" style, and just change the name to "content2" and change the float to 'right'. It'll snug right up under "content". Then set your widths to total 960/980 px and you're done, ready to start changing colors and filling in the divs with material.

    And don't put a height on any container that holds any text. The web ain't print; you can't control the users' computers; you have to adapt to that.

     


    Eschew obfuscation.
    • Marked as answer by tattoorocky Monday, January 31, 2011 6:16 AM
    Monday, January 31, 2011 5:47 AM
  • will try and find time tomorrow to start over with a new template. those are just confusing in the way they have several css sheets that are attached to the various pages. also the templates has each page in a separate folder and pages that i do not want. i have made a dwt since last post but im using inline css and not an attached sheet. is there a way i can transfer that over? still having the same issue with my links not working on my index that was made from the dwt. do my links have to be in an editable region for them to work? im also having a problem as ew saves the page as a .htm but my server wants it to be a .html. i have even tried changing my domain pointing settings. the way it is now i have rename it every time make changes and upload it.

    http://artistictattoodesigns.com/

    my latest

    Monday, January 31, 2011 6:16 AM
  • No, there's only one style sheet attached at a time There are 3 so that you can choose from different looks and colors; just change the number in your DWT and presto!, a whole new look. Just ignore the ones that you don't use. The only one in use is the one that's referenced in the top of your page (ignore the layout one for now--it is used, but it's called from the style sheet you are using, so you don't have to worry about it). It's useful, but not something you need to wworry about right now--just leave it alone.

    You don't have to use the folder structure of the templates (which everyone here agrees is overly complex for a small site). You can safely delete those folders and just create new pages from the DWT and name them something meaningful (flowers.html, dragons.html, etc.) and put them in the root folder of your site, where the index.html is. That makes building the navigation much easier. Just keep folders for the other files (photos, docs, etc.). That will make life a lot simpler.

    You can set the htm/html choice in Options. All customization is done there.


    Eschew obfuscation.
    Monday, January 31, 2011 3:04 PM
  • Don't use interaction buttons just to get the fonts yon want. Create an image of your text in your graphics program. Then export the text as a gif with a transparent background. be the gif as your link. Then youcan use the same background image for all the rollovers saving bandwidth and allowing yon to use cssinstead of Javascript for the rollovers.
    MS MVP Expression Tutorials & Help http://by-expression.com & Expression Web forums
    Monday, January 31, 2011 4:01 PM
  •  Not everyone uses cellphone browsers and even those who do outside of major meta areas they don't have 3G or 4G. At my dad's house you are lucky to get 74k on a cellular which beats dial-up but not by a lot.
    MS MVP Expression Tutorials & Help http://by-expression.com & Expression Web forums
    Monday, January 31, 2011 4:05 PM
  •  Browsers and servers don't understand Dwts. Create a page from the DWT and post the link to it. However, you'd be better off if you wait until after you have a page display how you want before you createthe DWT.
    MS MVP Expression Tutorials & Help http://by-expression.com & Expression Web forums
    Monday, January 31, 2011 4:08 PM
  • "those are just confusing in the way they have several css sheets that are attached to the various pages."

    They have one CSS sheet attached, and that sheet calls another one (the "layout" one).  There are 3 style sheets with a number in the name, but those are just choices for you.  Change the number of the one the DWT uses, and the look of your site will change.  Experiment, and pick the one you want to start with.

    "also the templates has each page in a separate folder and pages that i do not want."

    Easy to fix.  In the File Panel, drag the pages you want out of the folders into the top of your site.  EW will fix the links and point to the new location for the file. Similarly, if there are images in subfolders, drag them up to wherever you want them.

    Now delete the empty folders.

    For the page names, pick a name you don't want and change it to one you do want: Right click the file and change the file name to something that refects what you want (e.g., if you wanted a "tatoo-options" page but not a "calendar" page, rename the calendar.html file to tatoo-options.html).

    Now edit the DWT to change the navigation: rename the links to reflect the pages you want (the text on the Calendar link should be edited to Tatoo Options, for example), and remove the links to pages that don't remain in the site at all.

    Now, of course, edit the individual pages to put the headings, content, etc. that you want.

    "still having the same issue with my links not working on my index that was made from the dwt. do my links have to be in an editable region for them to work?"

    No.  Links not working has to do with them not pointing to existing files in the right location.  That's basic: look in Code View and see where the hyperlinks are pointing to.  But you want your links to be in a non-editable region, so you only have to change them in one place: as mentioned above, that would be in the DWT.

     

    Monday, January 31, 2011 4:17 PM
  • I have made a new dwt from one of the templates. I still think there is some stuff in the css sheet that i still do not need, but it works so I think I'm just going to leave it alone.  So far I only have one editable region "the right column" needing to add a 2nd one above it. Tried copying and pasting the code for it and renaming it to "content2" but it is not positioning where i want it to. Not sure if I like the white border around the columns, header and footer. Open to suggestions on this.

    http://artistictattoodesigns.com/

    Thank you for your time everyone!

    Monday, January 31, 2011 9:05 PM
  • Open to suggestions on this.

    OK, how about this one: Stop what you are doing right now and work through some of the training resources in the BEFORE POSTING thread.

    Working  on a production site, especially one for a business, is no place to be getting your Web development chops. You would no more let an inexperienced tyro near one of your clients with a needle than you should be going anywhere near the live Web on a business site at your knowledge level.

    See the BEFORE POSTING thread, work through Cheryl's "Build A Basic Web Site" video tutorial, and take the w3schools HTML and CSS courses, not necessarily in that order.

    You're a professional at what you do, and you know the importance of knowledge, experience, and talent. Well, let me clue you in: When it comes to producing a professional-quality commercial sites, Web development is not for clueless amateurs either. To produce anything on the Web that you would want your current or prospective clients to see, you will have to learn something about the technologies you're working with—HTML and CSS. Might as well get started now...

    cheers,
    scott


    Please remember to "Mark as Answer" the responses that resolved your issue. It is common courtesy to recognize those who have helped you, and it also makes it easier for visitors to find the resolution later.
    Monday, January 31, 2011 11:01 PM
  • You are still dragging things around in design view creating fixed heights. As for creating editable regions maybe you should get the free DWT ebook, there should be a link in the Learning Resources section of the Before Posting sticky.
    MS MVP Expression Tutorials & Help http://by-expression.com & Expression Web forums
    Monday, January 31, 2011 11:01 PM