WEB HTML designer cr00: how would you go about modeling this div

Discussion in 'OT Technology' started by pharmokan, Feb 24, 2010.

  1. pharmokan

    pharmokan OT Supporter

    Joined:
    Oct 18, 2002
    Messages:
    102,276
    Likes Received:
    496
    Location:
    L.A.
    if i wanted to have information inside a "picture frame" that looks like this

    [​IMG]



    how would you go about coding it so that text is inside, no scrollbar

    would you use old fashioned tables with backgrounds of the segment of the frame

    top, top left, top right, middle (y-repeat), bottom, bottom right, bottom left

    or would you use divs and floats with same segments mentioned above?

    can you avoid using segments? will it be a bitch to get it working right?
     
  2. pharmokan

    pharmokan OT Supporter

    Joined:
    Oct 18, 2002
    Messages:
    102,276
    Likes Received:
    496
    Location:
    L.A.
  3. kingtoad

    kingtoad OT Supporter

    Joined:
    Sep 2, 2003
    Messages:
    55,923
    Likes Received:
    11
    Location:
    Los Angeles
    You're thinking too hard. Keep it simple.

    Wrapper container element with expandable background image supporting flexible content.

    A header and footer element containing the background images of the corresponding header and footer. Each background will contain the corners.

    A content element centered between the wrapper element with a specified width, and an additional padding element within that for padding support without fucking up ie box model.

    Code:
    <div class="picture-frame">
      <div class="picture-frame-header" />
      <div class="picture-frame-content">
        <div class="padding">
          <p>Hello World</p>
        </div>
      </div>
      <div class="picture-frame-footer" />
    </div>
    
     
  4. drpepper

    drpepper Active Member

    Joined:
    Nov 13, 2006
    Messages:
    38,076
    Likes Received:
    2
    Location:
    San Antonio
    i would slice the mid section to about 2 or 3 pixels and have them repeat on y. would help with the image load.
     
  5. drpepper

    drpepper Active Member

    Joined:
    Nov 13, 2006
    Messages:
    38,076
    Likes Received:
    2
    Location:
    San Antonio
    and holy shit kingtoad is back :love:
     
  6. pharmokan

    pharmokan OT Supporter

    Joined:
    Oct 18, 2002
    Messages:
    102,276
    Likes Received:
    496
    Location:
    L.A.
    ok i know i got it wrong but i am following what you say and i come up with this layout

    [​IMG]


    im misunderstanding 1 element that you describe, either its the header or the overall div class "picture-frame"
     
  7. quid

    quid I Piss Excellence OT Supporter

    Joined:
    Aug 28, 2004
    Messages:
    50,352
    Likes Received:
    3
    Location:
    california
    thats how i would do it.
     
  8. pharmokan

    pharmokan OT Supporter

    Joined:
    Oct 18, 2002
    Messages:
    102,276
    Likes Received:
    496
    Location:
    L.A.
    but there would be a huge empty space in top if i wanted to put text in there.

    do i have to work around that and design something that "fits" in that long header?
     
  9. drpepper

    drpepper Active Member

    Joined:
    Nov 13, 2006
    Messages:
    38,076
    Likes Received:
    2
    Location:
    San Antonio
    you can set those images as background images. this will give you the ability to put text on top of the images without any margin issues.

    send me the precut images and i can probably code it for you in a few minutes.
     
  10. kingtoad

    kingtoad OT Supporter

    Joined:
    Sep 2, 2003
    Messages:
    55,923
    Likes Received:
    11
    Location:
    Los Angeles
    I know.

    You can essentially put anything between <header /> and <footer />. If you don't want to, there is the margin attribute that you can apply to the <content /> element.
     
  11. kingtoad

    kingtoad OT Supporter

    Joined:
    Sep 2, 2003
    Messages:
    55,923
    Likes Received:
    11
    Location:
    Los Angeles
    hello sexies :love:
     
  12. pharmokan

    pharmokan OT Supporter

    Joined:
    Oct 18, 2002
    Messages:
    102,276
    Likes Received:
    496
    Location:
    L.A.
    thats for a static design

    what if i wanted it to be for a dynamic design if lets say the information i wanted in there would be passed on in there by php
     
  13. pharmokan

    pharmokan OT Supporter

    Joined:
    Oct 18, 2002
    Messages:
    102,276
    Likes Received:
    496
    Location:
    L.A.
    u know what im getting into semantics here, that works ill just use the 3 div rule thanks kingtoad
     
  14. quid

    quid I Piss Excellence OT Supporter

    Joined:
    Aug 28, 2004
    Messages:
    50,352
    Likes Received:
    3
    Location:
    california
    no way dude. i PMd you
     
  15. kingtoad

    kingtoad OT Supporter

    Joined:
    Sep 2, 2003
    Messages:
    55,923
    Likes Received:
    11
    Location:
    Los Angeles
    If you have any useful advice that is relevant to this thread, you should keep it public instead of PM. Many people could use that information and would prevent duplicate thread creations in the future.

    :coold:
     
  16. quid

    quid I Piss Excellence OT Supporter

    Joined:
    Aug 28, 2004
    Messages:
    50,352
    Likes Received:
    3
    Location:
    california
    I'm just not comfortable posting the link that i used this style sheet arrangement for :dunno:, so i hope this helps

    [​IMG]

    Code:
    body {
    	font: 100% Verdana, Arial, Helvetica, sans-serif;
    	background: url(gfx/bk.jpg); /* GREEN- Vertical repeating section of picture frame */ 
    	background-color: #000000; 
    	background-position: 50% 0%; /* center it */
    	margin: 0; 
    	padding: 0;
    	text-align: center; 
    	color: #000000;
    }
    .oneColFixCtr #bigwrapper {
    	background: url(gfx/bk-title.jpg) no-repeat; /* BLUE - Top Part of the frame */
    	background-position: 50% 0%; /* center it */
    	height: 500px;
    	margin: 0 auto;
    	padding: 285px 0 0 0; /* padded to clear  the top bar of the picture frame */
    	border: 0;
    	text-align: center;
    	
    }
    .oneColFixCtr #container { /* i needed this but his design might not */
    	width: 980px;  
    	margin: 0 auto;
    	padding: 0;
    	border: 0px solid #000000;
    	text-align: left;
     
     
    }
     
    .oneColFixCtr #wrapper	{  /* my content went in this one */
    	float: right;
    	background: #FFFFFF url(gfx/white-grad.gif) repeat-x; 
    	width: 960px;
    	padding: 10px;
    	margin: 0px 0px 10px 0px;
    the body gets the middle section repeating background. GREEN AREA
    the bigwrapper on top of it gets the top part of the frame. BLUE AREA
    the container is for the content.
    the wrapper is for the black background and the content. Inside his frame (in his case he could probably do with out this bit, but in my project the background color wasnt cooperating)

    The red section, bottom of the frame, could go in a container using a negative margin or something like that probably :dunno:
     
    Last edited: Feb 25, 2010

Share This Page