Announcement Announcement Module
Collapse
No announcement yet.
DIVs on top of DIVs Page Title Module
Move Remove Collapse
Search Search Module
Collapse

Advertisement Advertisement Module
Collapse

Featured Images Featured Images Module
Collapse

Mediabistro Creative Sites Mediabistro Creative Sites Module
Collapse
Latest Topics Latest Topics Module
Collapse

  • KitchWitch
    Comment on Print image quality
    KitchWitch
    I usually go with, "It's illegal to use that image. Sorry."
    Today, 04:41 PM
  • KitchWitch
    Reply to Print image quality
    KitchWitch
    Hi Lacey and welcome to GDF.

    We ask all new members to read very important links here and here. These explain the rules, how the forum runs and a few inside jokes. No, you haven't done...
    Today, 04:40 PM
  • redeyesi
    Reply to New Logo for a Glass Bottle Cutting Device
    redeyesi
    Many thanks again for your help and feedback. My background is that I've worked as a graphic designer for several years some years ago mainly focussing on layouts for magazines and then developing adverts...
    Today, 04:17 PM
  • HotButton
    Reply to Print image quality
    HotButton
    You probably need to have a candid discussion of this matter with someone who is in a position to empower your expertise. Hardening up your language a bit might help get your points across too...
    ...
    Today, 03:52 PM
  • Laceycowgurl
    Print image quality
    Laceycowgurl
    How do you handle client/bosses that don't get it about using picture from the internet for print ad use? I'm about to loose it. Lol I have explained I don't know how many times that first we have to...
    Today, 03:25 PM
Advertisement Advertisement Module
Collapse

Sponsors Sponsors Module
Collapse

X
Conversation Detail Module
Collapse
  • Filter
  • Time
  • Show
Clear All
new posts

  • DIVs on top of DIVs

    Hi,

    I am looking for a way to put a div with text in it on top of another div with an image in it. I don't necessary know that this is normally done so i may be missing something wiht the way im placing my background images.
    .

    Version 1 - I have used a background image in the top right portion of my header. When the page is at max width on large monitors it looks fine. However as you decrease the browser window width the rounded image is cut off long before the content area is finished scaling.
    http://www.s86design.com/makennas_website/index.html


    Version 2 I have use an actual image inside the div here and I am getting the effect I desire. You can see the rounded header image when the main content area has stopped scaling. However now i have no way to put text on that portion of the header. I have tried to use the z-index to make a div with text in it appear above the rounded header image but to no avail.
    http://www.s86design.com/makennas_website/index2.html

    Any suggestions?

  • #2
    Many of these issues come from the fact that your treating web like print. You really need a change in mindset. The web is not print. There are ways to rectify some of them but what would help you most is to change your thinking/design to better mesh with the available technology. Any other means of thinking is putting the design before the delivery of content which is the wrong way to approach any web problem. Useability, accessibility and technological limitations always should be considered before pure aesthetics. probably not what you want to hear but your just not really getting this. Whether that is due to lack of experience or what not I don't know but it is important to understand. Especially, when working alongside more technical people.

    I'm going to mention this as well because I've already gotten this far but divs are not the solution to every piece of content. That is plain wrong, period. You might as well be using tables… it is no better. You have what is commonly diagnosed as divitis and see I absolutely no excuse for it. If you were using Joomla, Drupal or some other CMS at least I could it is probably the CMS, alight even though it still sucks. However, your usng static files so I can't even do that – all the mark-up is yours. I would say "not every ejaculation needs a condom" but your not even using the proper, semantic elements and adding extra wrappers. Your simply, wrapping everything in a div it looks like headings, images, paragraphs, lists – everything!!!

    I get that you want to build your pretty little site as quickly as possible without learning how to program. However, if you want anyone to take you seriously as a web expert you need to learn the proper way to do things. The mark-up there is simply not it.

    Also, anything that be achieved with CSS3 is generally better achieved with CSS3 than extra image requests. The shadows, corners, etc. It may take a little tweaking of the design but the pay off in regards to efficiency and maintenance will be worth the sacrifice.
    Last edited by tZ; 05-02-2012, 04:23 AM.

    Comment


    • #3
      Actually this is all coming from inexperience. This isn't an actual site for production. This is me attempting to put together my first liquid layout and using this forum as a to discover and understand what is is that I'm doing wrong... which apparently is EVERYTHING!! So now that we have identified that... do you know of any good places to start. Good resources are hard to find as they usually focus on one aspect of something, which is fine but clearly I'm missing the bigger picture here.

      Comment


      • #4
        Well before worrying about the CSS I would recommend some time be spent in getting the HTML right. The HTML is where you should start than look into the CSS. Think of HTML as a prerequisite for CSS.

        Comment


        • #5
          Originally posted by bROKEN View Post
          This is me attempting to put together my first liquid layout and using this forum as a to discover and understand what is is that I'm doing wrong... which apparently is EVERYTHING!!
          I wouldn't say that at all. You're doing a great deal right. For one thing, you're learning to write this stuff by hand, learning to understand it and learning its limitations. That's an extremely good start.

          You do, however, seem to want to make HTML/CSS do things that it's not especially good at. Shadows, hyphenation, rounded corners, precise alignments of type, etc., aren't the strong points in HTML. The support for and implementation of these kinds of features differs considerably from one browser to the next. Another few years down the road and this might change, but today, it's iffy stuff that is best to avoid for mission-critical purposes.

          There's nothing wrong with pushing the envelope, but in web design, it's important to do so in a way that gracefully degrades when it's not supported. Making a successful layout contingent upon pixel-perfect alignments, for example, will result in lots of time spent on something that is best avoided. I'd recommend playing to the strengths of HTML rather than battling its weaknesses.

          I worked at a newspaper for 15 years. My first year there was tough because I just couldn't get used to the limitations of crummy printing on crummy newsprint paper. Once I stopped fighting those limitations, however, and began embracing what it did well, I began to love working with it. It's much the same with HTML. Embrace what it does well and design with those things in mind instead of forcing it to conform to what you want it to do.

          There are solutions and hacks to solve the problems you've run into and mentioned here, but they're sometimes awkward and complex. Your designs shouldn't depend on awkward coding anymore than good writing depends upon big words and overly complex sentences. Keep things simple and play to the mediums strengths, not its weaknesses.

          If you're mostly just interested in getting your site to work right, I'd rethink a few of your requirements. If you're also interested in really learning web design, I think you're probably at the point where you could benefit enormously from buying a comprehensive book on HTML/CSS, then methodically studying it to fill in the gaps. You've obviously learned the basics, but you're floundering a bit due to some bad assumptions and lack of direction on what constitutes the next step.

          Comment


          • #6
            Originally posted by <b> View Post
            I worked at a newspaper for 15 years. My first year there was tough because I just couldn't get used to the limitations of crummy printing on crummy newsprint paper. Once I stopped fighting those limitations, however, and began embracing what it did well, I began to love working with it. It's much the same with HTML. Embrace what it does well and design with those things in mind instead of forcing it to conform to what you want it to do.
            This is a GREAT way to put it.
            "Go ahead, make your logos in PS. We charge extra money to redraw your logo into vector art so it can be printed on promotional product. Cha CHING! " - CCericola

            Comment


            • #7
              A lot of the tutorials and walkthroughs may be too advanced, but you should find something useful here, maybe in the Basix section?

              http://webdesign.tutsplus.com/

              Comment


              • #8
                Ill help you out a bit.

                For your links on the left, you have this:

                <div id="left_sidebar_links">
                <div id="menu">
                <p><a href="#index.html">Home</a></p>
                <p><a href="www.google.com">Weddings &amp; Events</a></p>
                <p><a href="www.google.com">Holidays</a></p>
                <p><a href="www.google.com">Custom Work</a></p>
                <p><a href="www.google.com">About Us</a></p>
                <p><a href="www.google.com">Contact</a></p>
                <p>&nbsp;</p>
                </div>
                </div>

                What you should use, is an un-ordered list for things like this. It should be written like this:

                <div id="left_sidebar_links">
                <!-- This DIV isn't entirely necessary, the <ul> element can control most if not all settings you need for positioning and styling the list, but it's not a big deal at all -->
                <ul>
                <li><a href='#index.html'></a>Home</li>
                <li><a href='www.google.com'>Weddings &amp; Events</a></li>
                <li><a href='www.google.com'>Holidays</a></li>
                <li><a href='www.google.com'>Custom Work</a></li>
                <li><a href='www.google.com'>About Us</a></li>
                <li><a href='www.google.com'>Contact</a></li>
                </ul>
                </div>

                It's best to keep things semantic and call things what they are. It's a list of links, you should write it as a list of links. You can also reference things without having ID's on everything, and a UL will position itself just as well as a DIV, so there's no benefit to using DIVs religiously. Also, the extra paragraph at the end with the blank space for vertical spacing, that's done pretty easily with CSS. Here is some sample CSS for managing the code above:

                #left_sidebar_links {
                width: ##px;
                margin: 0;
                padding 15px;
                text-align: center;
                overflow: hidden;
                }

                #left_sidebar_links>ul {
                margin: 0;
                padding: 0;
                list-style-type: none;
                }

                #left_sidebar_links>ul>li {
                margin: 0;
                padding: 0;
                }

                #left_sidebar_links>ul>li>a,
                #left_sidebar_links>ul>li>a:visited {
                color: rgba(255,255,255,1);
                font-weight: bold;
                }

                #left_sidebar_links>ul>li>a:hover {
                text-decoration: none;
                border-bottom: 2px solid rgba(255,255,255,1); /* I would use this because
                the single pixel underline
                looks pretty weak in
                contrast to the heavy
                text. This will size it up a
                bit. Text-decoration
                controls the underline, this
                removes it and just
                replaces it with a border
                on the bottom so that you
                can control the thickness
                of the underline.
                */
                }

                #left_sidebar_links>ul>li>a:active {
                color: rgba(255,255,255,1);
                font-weight: bold;
                }

                As far as the stacked DIV's a better way to do that would to build a list and have each column created by a list element and then set the style of the list elements to display the list items inline.

                Then, inside those list items, put your image and display that as a block element.

                Following the image, add your <h1> element for the title and its already a block element by default, so immediately after that, you can start putting your paragraphs for the bottom bit of text.

                So your HTML could look like this:

                <ul id='example'>
                <li> <!-- This is the first column -->
                <img src='' alt='' />
                <h1>Title</h1>
                <p>Whatever you want the content to say<p>
                </li>
                <li> <!-- This is the second column -->
                <img src='' alt='' />
                <img src='' alt='' />
                <h1>Title</h1>
                <p>Whatever you want the content to say<p>
                </li>
                <li> <!-- This is the third column -->
                <img src='' alt='' />
                <img src='' alt='' />
                <h1>Title</h1>
                <p>Whatever you want the content to say<p>
                </li>
                </ul>

                And the CSS should look something similar to the following:

                ul#example {
                list-style-type: none;
                display: inline;
                padding: 20px;
                margin: 0;
                background-color: rgba(61,153,65,.8); /* Green @ 80% opacity */
                overflow: hidden;
                /* Border-Radius for the rounded corners */
                -webkit-border-radius: 10px;
                -moz-border-radius: 10px;
                border-radius: 10px;
                /* Box-shadow for the shadow */
                -webkit-box-shadow: rgba(0,0,0,.8) 5px 5px 10px 3px;
                -moz-box-shadow: rgba(0,0,0,.8) 5px 5px 10px 3px;
                box-shadow: rgba(0,0,0,.8) 5px 5px 10px 3px;
                }

                ul#example>li {
                width: 269px;
                /*This is for universal styling of the list elements */
                /* Box-shadow for the shadow */
                -webkit-box-shadow: rgba(0,0,0,.8) 5px 5px 10px 3px;
                -moz-box-shadow: rgba(0,0,0,.8) 5px 5px 10px 3px;
                box-shadow: rgba(0,0,0,.8) 5px 5px 10px 3px;
                /* Border-Radius for the rounded corners... This is covered in the UL, and overflow is set to hidden, but browsers get a little janky with this sometimes, so its safer to have it set on all elements that will reside in the respective corner. */
                -webkit-border-radius: 10px;
                -moz-border-radius: 10px;
                border-radius: 10px;
                }

                ul#example>li>img {
                width: 100%;
                height: 172px; /* if you're making it responsive and want images to scale, leave this out */
                /* Rounded corners on top */
                -webkit-border-top-left-radius: 10px;
                -moz-border-top-left-radius: 10px;
                border-top-left-radius: 10px;
                -webkit-border-top-right-radius: 10px;
                -moz-border-top-right-radius: 10px;
                border-top-right-radius: 10px;
                }

                ul#example>li>h1 {
                width: 100%; /* This is needed to make sure the background color stretches the full width of the <li> */
                color: rgba(255,255,255,1); /* White */
                background-color: rgba(61,153,65,1); /* Solid Green */
                text-transform: capitalize;
                font-size: 1.2em;
                font-weight: bold;
                font-family: "Whatever You Like" Arial, sans-serif;
                margin: 10px 0;
                padding: 12px 0;
                }

                ul#example>li>p {
                margin: 0;
                padding: 0 20px;
                width: 229px; /* This is needed to make sure the background color stretches the full width of the <li>, it's set to the width of the parent minus 20px for the left padding and 20px for the right padding */
                color: rgba(0,0,0,1); /* Black */
                background-color: rgba(255,255,255,.5); /* White @ 50% opacity */
                font-size: 1em;
                font-family: "Whatever You Like" Arial, sans-serif;
                }

                I rushed through this, so I may have missed a few things. This is a bit much for a post really, but with all the disrespect in the thread, I figured some constructive comments would be a bit helpful.

                I like your design though, good work.

                Comment


                • #9
                  Originally posted by Mathew J. Smith View Post
                  with all the disrespect in the thread, I figured some constructive comments would be a bit helpful.
                  What disrespect?
                  Sketching not only helps you work out good ideas, it helps you get past the bad ones.

                  Comment


                  • #10
                    Mathew, if you see someone disrespecting another member, please notify the moderators by clicking the "Report Post" triangle under the post's avatar.

                    That said, I have to agree with Pan Toshi, I don't see anything actionable here.
                    This post is brought to you by the letter E and the number 9. Those are the buttons I push to get a Twix out of the candy machine.
                    "I put my heart and my soul into my work, and have lost my mind in the process."

                    Comment

                    Mediabistro A division of Prometheus Global Media home | site map | advertising/sponsorships | careers | contact us | help courses | browse jobs | freelancers | content | member benefits | reprints & permissions terms of use | privacy policy Copyright © 2014 Mediabistro Inc. call (212) 389-2000 or email us
                    Working...
                    X