Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 8 of 8
  1. #1
    Junior Member
    Join Date
    Dec 2011
    Posts
    7
    Member #
    30360
    Liked
    1 times
    Just getting started, trying to throw together a simple website. I have created pages with 1 css script, but now I want to combine them, and don't know how to do this...any help would be greatly appreciated, the more explicit, the better!

    Here's what I want for my background/menu, and the page that I made to provide the html code: http://www.stonezoneco.com/opentrial.html

    Here's what I want for my gallery, which would be inserted below the menu:
    http://www.stonezoneco.com/gallery.html

    Here's my failed attempt of combining them:
    http://www.stonezoneco.com/gallery2.html

    And here are my CSS scripts:

    css/style.css

    body { width: 100%; height:1000PX;}
    #menu {width: 100%; height: 100px;}
    #gallery {width: 100%; height: 900px;}

    css/hoverbox.css

    *
    {
    border: 0;
    margin: 0;
    padding: 0;
    }

    /* =Basic HTML, Non-essential
    ----------------------------------------------------------------------*/

    a
    {
    text-decoration: none;
    }

    body
    {
    background: #fff;
    color: #777;
    margin: 0 auto;
    padding: 50px;
    position: relative;
    width: 620px;
    }

    h1
    {
    background: inherit;
    border-bottom: 1px dashed #ccc;
    color: #933;
    font: 17px Georgia, serif;
    margin: 0 0 10px;
    padding: 0 0 5px;
    text-align: center;
    }

    p
    {
    clear: both;
    font: 10px Verdana, sans-serif;
    padding: 10px 0;
    text-align: center;
    }

    p a
    {
    background: inherit;
    color: #777;
    }

    p a:hover
    {
    background: inherit;
    color: #000;
    }

    /* =Hoverbox Code
    ----------------------------------------------------------------------*/

    .hoverbox
    {
    cursor: default;
    list-style: none;
    }

    .hoverbox a
    {
    cursor: default;
    }

    .hoverbox a .preview
    {
    display: none;
    }

    .hoverbox a:hover .preview
    {
    display: block;
    position: absolute;
    top: -33px;
    left: -45px;
    z-index: 1;
    }

    .hoverbox img
    {
    background: #fff;
    border-color: #aaa #ccc #ddd #bbb;
    border-style: solid;
    border-width: 1px;
    color: inherit;
    padding: 2px;
    vertical-align: top;
    width: 100px;
    height: 75px;
    }

    .hoverbox li
    {
    background: #eee;
    border-color: #ddd #bbb #aaa #ccc;
    border-style: solid;
    border-width: 1px;
    color: inherit;
    display: inline;
    float: left;
    margin: 3px;
    padding: 5px;
    position: relative;
    }

    .hoverbox .preview
    {
    border-color: #000;
    width: 250px;
    height: 175px;

  2.  

  3. #2
    Junior Member
    Join Date
    Dec 2011
    Posts
    7
    Member #
    30360
    Liked
    1 times
    css/tree_frog_horizontal.css

    #outer {width:880px; height:600px; border:1px solid #ddd;}


    #menu {list-style-type:none; padding:0 0 20px 0; margin:0 auto; width:800px; position:relative;}
    #menu ul {list-style-type:none; padding:0; margin:0; background:#fff;}
    #menu li {float:left; background:#657; position:relative;}
    #menu li.sub {background:#d30; margin-right:1px; }

    #menu li, #menu li a {display:block; color:#fff; font-family:arial, sans-serif; font-size:11px; line-height:24px; width:125px; text-decoration:none; text-align:center; cursorointer; font-weight:bold;}

    #menu ul li a {text-align:left; text-indent:5px;}

    #menu ul {position:absolute;left:-9999px;}
    #menu li.click ul ul {position:absolute;left:-9999px;}
    #menu li.click ul li.hover ul ul {position:absolute;left:-9999px;}

    #menu li.hover {background:#663; z-index:500;}
    #menu li.click {background:#663;}

    #menu li.click ul li {margin-top:1px; border-right:0;}

    #menu li.click ul {left:0px; top:24px; background:#fff; border-right:1px solid #fff;}
    #menu li.click ul li.hover ul,
    #menu li.click ul li.hover ul li.hover ul {left:110px; top:-1px; border-left:1px solid #fff; background:#fff;}

    #menu li.click ul li.hover ul li {background:#c60;}
    #menu li.click ul li.hover ul li.hover ul li {background:#780; z-index:500;}

    #menu li.click ul li.hover ul li.hover {z-index:500; background:#fa4;}
    #menu li.click ul li.hover ul li.hover a {color:#000;}

    #menu li.click ul li.hover ul li.hover ul li.hover {background:#aa0;}
    #menu li.click ul li.hover ul li.hover ul li.hover a {color:#fff;}

    #outer img.frog {display:block; float:left; margin:0 20px 20px 0;}
    #outer p {margin:0px; padding:17px 20px 0 0; color:#000; font-size:12px; font-family:arial, sans-serif; text-align:justify;}

  4. #3
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    I don't get it. What are you wanting?
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  5. #4
    Junior Member
    Join Date
    Dec 2011
    Posts
    7
    Member #
    30360
    Liked
    1 times
    hmmm, how else can I explain this...What I want is probably something very simple.

    I want to be able to have a page with the css menu here(http://www.stonezoneco.com/menutrial.html) - this is my site, btw.

    Then, I want to be able to insert the hover box gallery underneath said menu on the page. If you look at this page (http://www.stonezoneco.com/opentrial.html) I would just like to replace the text and pictures on this page with the gallery that I have made on this page (http://www.stonezoneco.com/gallery.html), while maintaining the rectangular background and red horizontal menu.

    I provided the links to the sites so you could view my source code, and above is are the css codes. I don't know where I need to make my changes. I made an attempt at creating this page, but http://www.stonezoneco.com/gallery2.html didn't quite work. I got a portion of my menu page to appear (the background rectangle), but the menu isn't present. The gallery is though...so I am unsure it is a css thing or a div thing. I'm new to this type of design.

    Thank you for your reply!

  6. #5
    Senior Member Webzarus's Avatar
    Join Date
    May 2011
    Location
    South Carolina Coast
    Posts
    3,322
    Member #
    27709
    Liked
    770 times
    Let's take a step backwards.

    Create a basic page... But for each div defined, Add the attribute border:1px solid #ff0000;

    For each div, change the color ... What this will do will show you exactly how the divs are being displayed in relation to each other.

    Normally, when starting a layout, I'll do this before I start building out the elements that fill the divs.

    One common thing that ia overlooked, for each div element that has any relation to height or width, it's always a good to define the following 4 attributes on each div: height, width, margin, padding... Even if the padding or margins are 0, it's best to define them in the CSS.

    If you don't define them, sometimes browsers will define them for you and they won't show up correctly ( or at least as you expect then to display ).

    Also, I've seen where some will create separate sections of CSS, 1 section that defines colors, 1 section that defines layout elements. Either way, try to put all the definitions for the elements in one part... Remember, the last layout definition to be read by the browser is what the browser will display.

  7. #6
    WDF Staff AlphaMare's Avatar
    Join Date
    Oct 2009
    Location
    Montreal, Canada
    Posts
    4,570
    Member #
    20277
    Liked
    878 times
    Quote Originally Posted by Webzarus, post: 228768
    Let's take a step backwards.

    Create a basic page... But for each div defined, Add the attribute border:1px solid #ff0000;

    For each div, change the color ... What this will do will show you exactly how the divs are being displayed in relation to each other.
    Just a suggestion - do the attribute as : outline: 1px solid #000000;
    That way it will not take up any space the way a border will, so you won't have to adjust widths etc. later on when you remove it.
    Good design should never say "Look at me!"
    It should say "Look at this." ~ David Craib


    http://digitalinsite.ca ~ my current site . . info@digitalinsite.ca ~ my email

    If you feel that someone's post helped you fix your problem, answered your question, or just made you feel better, feel free to "Like" their post. The "Like" link is at the bottom right of each post, along side the "reply" link. And if you are being helped here, try to help someone else - pass it on!

  8. #7
    Junior Member
    Join Date
    Dec 2011
    Posts
    7
    Member #
    30360
    Liked
    1 times
    Thanks for the input. I have to say, i'm just not well versed enough in this stuff yet to have a handle on what you are saying. Are either of you willing to take a look at the links above and throw a sample together using values that would work for me? I feel like if I could get the basic idea, I can tinker with spacing and whatnot afterwards...Everything just sounds like chinese to me.
    Andrew Yurlov likes this.

  9. #8
    Senior Member Andrew Yurlov's Avatar
    Join Date
    Apr 2011
    Location
    Portland, OR
    Posts
    1,306
    Member #
    27566
    Liked
    181 times
    Quote Originally Posted by Gummy Joe, post: 228772
    Thanks for the input. I have to say, i'm just not well versed enough in this stuff yet to have a handle on what you are saying. Are either of you willing to take a look at the links above and throw a sample together using values that would work for me? I feel like if I could get the basic idea, I can tinker with spacing and whatnot afterwards...Everything just sounds like chinese to me.
    Exactly how I felt while my friend explained how he made his social networking site that is more complicated then facebook. (when I didn't start learning coding yet)
    Artificial intelligence is nothing compared to natural stupidity -Someone

    Design is a funny word. Some people think design means how it looks.
    But of course, if you dig deeper, itís really how it works.
    -Steve Jobs




Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 07:38 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com