Skip navigation
arteisfoto
Currently Being Moderated

I am building a simple site, but I can't build it...

Feb 21, 2013 5:22 AM

Tags: #image #dreamweaver #layout

Hello,

 

My name is Arturo, and I am visual artist. I decided to build my own website but I am having diffuculties. I was wondering if someone could give me a hand and help me figure out my problem. In short, all I want is a title, a spry menu (centered) and icons of previews of my work aligned on the page, thats it... I've come up with a mokup of my site to show you what I am talking about. I've spend hours trying to figure this out, watched video tutorials, and I can't figure out, I am sure its a simple glitch, but I am not an expert on designing sites or html. If you could help me, it would mean I can get on actually having a website! Thank you.

Here is a pic of what I would like:

websiteproblem.jpg

 

Also I must say, that I've tried to creating CSS rules, by modifying the box property, and the positioning option, and I can not make them move to where I would like them. I've tried different combinations.. and I've also tried adding the images inside Div tags and then applying the rules to it, but no luck. I've also added the images by just inserting the images and then applying the CSS rules

 

Message was edited by: me

 
Replies
  • Currently Being Moderated
    Feb 21, 2013 5:45 AM   in reply to arteisfoto

    Don't use positioning.  Best options for you are to look for a CMS with a template that closely matches what you are looking for, or look to a framework.  Looking at what you have and trying to write it into the twitter bootstrap would be something like:

     

    row 1 - header - span12

    row 2 - menubar - span12

    row 3 - contains 5 nested rows each span4

     

    Obviously that's not the HTML markup, but that is the base of it.  Include a few files and learn to mark up the code and you'll be fine.  This is a basic enough example that I think you will be able to handle it just fine.  But if you run into any issues feel free to post back with your example page and we can go from there.

     

    Bootstrap - http://twitter.github.com/bootstrap/

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 21, 2013 6:32 AM   in reply to arteisfoto

    There are also some very nice DW templates out there. You still need to know a bit about coding, but I finally went that route for my site becasue I couldn't figure out how to get the coding down. I'm referring to third party templates, not the ones that comes with DW. And mine was not free, but it was worth every penny!

     

    Not sure I'm allowed to post a link to where I bought my template (assuming the OP is interested). Is that okay on this forum?

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 21, 2013 10:30 AM   in reply to arteisfoto

    without the coding, like used to be 5 years ago.

     

     

    Five years ago is gone. You need to know basic coding, even for the templates - there is no getting around this.  Since you don't want to go the template route do you have any books, or have you looked at any tutorials?

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 21, 2013 1:08 PM   in reply to arteisfoto

    Have a look at this link.  View source in browser to see the code. You may use this as a startup layout if you wish.

    http://alt-web.com/TEMPLATES/Dark-Grid-II.shtml

     

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 23, 2013 1:50 PM   in reply to arteisfoto

    #slideshowcentered {

              width: 500px;    /**adjust width as needed**/

              margin:0 auto;  /**with width, this is centered**/

              border: 1px dotted red; /**for demo purposes only, you may remove this**/

              position: fixed;

              left: auto;

              right: auto;

    }

     

    HTML & CSS Tutorials:

    http://www.html.net/

    http://w3schools.com/

     

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 23, 2013 2:25 PM   in reply to arteisfoto

    You'll need to upload your work to a public web space you control (a test folder on your remote server, for example) & post the URL so we can see what you have in our browsers.

     

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 23, 2013 3:21 PM   in reply to arteisfoto

    Try this:

     

     

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Works</title>
    <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
    
    <style type="text/css">
    body {
        font: "Trebuchet MS", Arial, Helvetica, sans-serif;
        width: 1000px;
        margin: 0 auto;
        font-size: 100%;
        background: #FFF;
    }
    h1 {font-size: 36px;}
    
    #pix01 {
    width: 300px;
    border: 1px dotted red;
    margin: 0 auto;
    }
    #pix01 img {
        height: 130px;
        width: 130px;
        vertical-align:middle;
    }
    #pix01 p {
        font-size:12px;
    } 
    
    #footer {
        font-size:12px;
        border-top: 10px solid #900;
    }
    
    /**re-usable classes**/
    .center {text-align:center}
    .right {text-align:right}
    
    /**clear floats**/
    .clearLt {clear:left; display:block; height:1px; visibility:hidden;}
    
    </style>
    </head>
    
    <body>
    <div id="header">
    <h1 class="center">Arturo Herrera</h1>
    <ul id="MenuBar1" class="MenuBarHorizontal">
    <li><a href="index.html">Home</a></li>
      <li><a href="Works.html">Works</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Dossier</a> </li>
      <li><a href="Contact.html">Contact</a></li>
      <li><a href="#">Links</a></li>
      <li><a href="#">New Exhibitions</a></li>
      <li><a href="#">Video</a></li>
    </ul>
    <!--clear floats in menu-->
    <hr class="clearLt" />
    
    <!--end header-->
    </div>
      
    <!--begin thumbnails-->
    <div id="pix01">
    
    <p><a href="foodsculptures.html" target="new"><img src="A0000831.jpg" alt="#" width="130" height="130" /></a><a href="foodsculptures.html">1. Food Sculptures</a></p>
    
    <p><img src="A4518359-Edit.jpg" alt="#" width="130" height="130" />2. Makeshift Identies</p>
    
    <p><img src="A4518396.jpg" alt="#" width="130" height="130" />3. Makeshift Skin and Nerves</p>
    
    <p><img src="A4519144.jpg" alt="#" width="130" height="130" />4. Makeshift Head Adorments</p>
    
    <p><img src="A4518627.jpg" alt="#" width="130" height="130" />5. Makeshit Diet Tools</p>
    
    <p><img src="A4519073.jpg" alt="#" width="130" height="130" />6. Chiles Picantes</p>
    
    <p><img src="A0001171.jpg" alt="#" width="130" height="130" />7. Snail Shell Project: Idendity</p>
    
    <p><img src="_MG_6028.jpg" alt="#" width="130" height="130" />8. Army of Vegetable Warrious</p>
    
    <p><img src="_MG_0093-Edit.jpg" alt="#" width="130" height="130" />9. Background #2</p>
    
    <p><img src="_MG_1439.jpg" alt="#" width="130" height="130" />10. Head Adorments: the beginning</p>
    
    <p><img src="_MG_7968-Edit.jpg" alt="#" width="130" height="130" />11. Background #1</p>
    
    <p> <img src="_MG_5512.jpg" alt="#" width="130" height="130" />12. Human as Objects
    </p>
    <!--end pix01-->
    </div>
    
    <div class="center" id="footer">
    Copyright 2002-2013 © Arturo Herrera. This is site is contantly changing.
    </div>
       
    <script type="text/javascript">
    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
      </script>
    </body>
    </html>

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 23, 2013 3:31 PM   in reply to arteisfoto

    Change the width of this div to whatever you like:

     

    #pix01 {
    width: 300px;
    border: 1px dotted red;
    margin: 0 auto;
    }

     

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 23, 2013 3:53 PM   in reply to arteisfoto

    I suggest you use the code I gave you as a template for the rest of your site.

     

     

    Nancy O.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points