Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11

Thread: DIV layout help

  1. #1
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts

    DIV layout help

    i have a DIV layout problem. whatever i do the layout is not what i want. you can see what i mean in the attached files. i watn to make the text (content DIV) to wrap around the flash DIV.

    can anybody write a simple code from scratch, for help. juts the DIVs and their css.


    DIV_layout.jpg - what i want to do
    DIV_layout_false.jpg - what i get

    thanks


    the attached files:

    DIV_layout.jpg - what i want to do



    DIV_layout_false.jpg - what i get


  • #2
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Can you post your code of what you.ve tried? Or better a link to your live test site.
    Teed

  • #3
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts
    i am looking for a simple fresh code, just the divs and the css for them. in my code is a lot of chaos as i was trying to get the layout right, thats why i attatched the images. i am gonna start again. thats why i am looking for a simple DIV layout before i continue.

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello t4si,
    Generally speaking, this forum is kind of geared toward helping you with your code, not giving out free samples. That's why we always ask to see what you've tried so far.

    It's a slow day for me today though, see if this will get you started -
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	margin: 0;
    	background: #FC6;
    }
    #container {
    	width: 800px;
    	margin: 30px auto;
    	padding: 3px;
    	background: #999;
    }
    #header {
    	height: 150px;
    	background: #fc9;
    }
    #menu {
    	height: 30px;
    	margin: 3px 0;
    	background: #3f9;
    }
    #text {
    	height: 400px;
    	background: #c90;
    }
    #swf {
    	height: 200px;
    	width: 300px;
    	float: right;
    	background: #63c;
    }
    </style>
    </head>
    <body>
        <div id="container">
            <div id="header">header</div>
            <div id="menu">menu</div>
                <div id="text">
                	<div id="swf">swf</div>
                <!--end text--></div>
        <!--end container--></div>
    </body>
    </html>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    t4si (11-22-2011)

  • #5
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    OK then try this.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    #content {
    	background-color: #999;
    	width: 960px;
    }
    #content #FLVPlayer {
    	float: right;
    }
    </style>
    <script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
    </head>
    
    <body>
    <div id="content"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="360" height="288" id="FLVPlayer">
        <param name="movie" value="FLVPlayer_Progressive.swf" />
        <param name="quality" value="high">
        <param name="wmode" value="opaque">
        <param name="scale" value="noscale">
        <param name="salign" value="lt">
        <param name="FlashVars" value="&amp;MM_ComponentVersion=1&amp;skinName=Clear_Skin_1&amp;streamName=20051210-w50s&amp;autoPlay=false&amp;autoRewind=false" />
        <param name="swfversion" value="8,0,0,0">
        <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don't want users to see the prompt. -->
        <param name="expressinstall" value="Scripts/expressInstall.swf">
        <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
        <!--[if !IE]>-->
        <object type="application/x-shockwave-flash" data="FLVPlayer_Progressive.swf" width="360" height="288">
          <!--<![endif]-->
          <param name="quality" value="high">
          <param name="wmode" value="opaque">
          <param name="scale" value="noscale">
          <param name="salign" value="lt">
          <param name="FlashVars" value="&amp;MM_ComponentVersion=1&amp;skinName=Clear_Skin_1&amp;streamName=20051210-w50s&amp;autoPlay=false&amp;autoRewind=false" />
          <param name="swfversion" value="8,0,0,0">
          <param name="expressinstall" value="Scripts/expressInstall.swf">
          <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
          <div>
            <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
            <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>
          </div>
          <!--[if !IE]>-->
        </object>
        <!--<![endif]-->
      </object><p>Content for  id "content" Goes Here Content for  id "content" Goes Here Content for  id "content" Goes Here Content for  id "content" Goes Here Content for  id "content" Goes Here Content for  id "content" Goes Here Content for  id "content" Goes Here Content for  id "content" Goes Here Content for  id "content" Goes Here Content for  id "content" Goes Here Content for  id "content" Goes Here Content for  id "content" Goes Here Content for  id "content" Goes Here Content for  id "content" Goes HereContent for  id "content" Goes Here Content for  id "content" Goes Here Content for  id "content" Goes Here Content for  id "content" Goes Here Content for  id "content" Goes Here Content for  id "content" Goes Here Content for  id "content" Goes Here Content for  id "content" Goes Here Content for  id "content" Goes Here Content for
      
    id "content" Goes Here Content for  id "content" Goes Here Content for  id "content" Goes Here Content for  id "content" Goes Here Content for  id "content" Goes HereContent for  id "content" Goes Here Content for  id "content" Goes Here Content for  id "content" Goes Here Content for  id "content" Goes Here Content for  id "content" Goes Here Content for  id "content" Goes Here Content for  id "content" Goes Here Content for  id "content" Goes Here Content for  id "content" Goes Here Content for  id "content" Goes Here Content for  id "content" Goes Here Content for  id "content" Goes Here Content for  id "content" Goes Here Content for  id "content" Goes HereContent for  id "content" Goes Here Content for  id "content" Goes Here Content for  id "content" Goes Here Content for  id "content" Goes Here Content for  id "content" Goes Here Content for  id "content" Goes Here Content for  id "content" Goes Here Content for  id "content" Goes Here Content for  id "content" Goes Here Content for  id "content" Goes Here Content for  id "content" Goes Here Content for  id "content" Goes Here Content for  id "content" Goes Here Content for  id "content" Goes HereContent for  id "content" Goes Here Content for  id "content" Goes Here Content for  id "content" Goes Here Content for  id "content" Goes Here Content for  id "content" Goes Here Content for  id "content" Goes Here Content for  id "content" Goes Here Content for  id "content" Goes Here Content for  id "content" Goes Here Content for  id "content" Goes Here Content for  id "content" Goes Here Content for  id "content" Goes Here Content for  id "content" Goes Here Content for  id "content" Goes Here</p></div>
    <script type="text/javascript">
    swfobject.registerObject("FLVPlayer");
    </script>
    </body>
    </html>
    Last edited by teedoff; 11-22-2011 at 07:53 PM.
    Teed

  • Users who have thanked teedoff for this post:

    t4si (11-22-2011)

  • #6
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Hello t4si,
    Generally speaking, this forum is kind of geared toward helping you with your code, not giving out free samples. That's why we always ask to see what you've tried so far.

    It's a slow day for me today though, see if this will get you started -
    lol Must be a slow day for us both! I even downloaded a flash file to insert for him..haha
    Teed

  • #7
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts
    i can see that this is a really busy forum. thanks for the lighting fast answers.. excavator: thats what i was thinking about, but the text still does not wrap around the swf. teedoff: the text wraps round the swf, but text and swf are on the same div.

    what i am looking for is Excavator's version with text wraping separated int text div and swf div. so that i could fit in some more object or divs into the tex div if necesary.


  • #8
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by t4si View Post
    i can see that this is a really busy forum. thanks for the lighting fast answers.. excavator: thats what i was thinking about, but the text still does not wrap around the swf. teedoff: the text wraps round the swf, but text and swf are on the same div.

    what i am looking for is Excavator's version with text wraping separated int text div and swf div. so that i could fit in some more object or divs into the tex div if necesary.

    I'm pretty sure if we saw your code that you've got your text ahead of your float.
    Floats come first!

    Really, for most issues, a screencap is not what we need. If we get the code then we'll see here locally how it renders.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #9
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts
    it has to do something with the text, when its empty it looks as it should be. how to make the wraping around the swf DIV but at the same time the swf DIV to be conected - attached to menu DIV - like in the DIV_layout.jpg?

  • #10
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	margin: 0;
    	background: #FC6;
    }
    #container {
    	width: 952px;
    	margin: 30px auto;
    	padding: 3px;
    	background: #999;
    }
    #header {
    	height: 150px;
    	background: #fc9;
    }
    #menu {
    	height: 30px;
    	margin: 3px 0;
    	background: #3f9;
    }
    #text {
    	height: 400px;
    	background: #c90;
    }
    #swf {
    	height: 320px;
    	width: 550px;
    	float: right;
    	background: #63c;
    }
    </style>
    </head>
    <body>
    <div id="container">
            <div id="header">header</div>
            <div id="menu">menu</div>
                <div id="text">retertertertert fasdfasdfo some text retertertertert fasdfasdfo some text retertertertert fasdfasdfo some text retertertertert fasdfasdfo some text retertertertert fasdfasdfo some text retertertertert fasdfasdfo some text retertertertert fasdfasdfo some text retertertertert fasdfasdfo some text retertertertert fasdfasdfo some text retertertertert fasdfasdfo some text retertertertert fasdfsome text retertertertert fasdfasdfo some text retertertertert fasdfasdfo some text retertertertert fasdfasdfo some text retertertertert fasdfasdfo some text retertertertert fasdfasdfo some text retertertertert fasdfasdfo some text retertertertert fasdfasdfo some text retertertertert fasdfasdfo some text retertertertert fasdfasdfo some text retertertertert fasdfasdfo some text retertertertert fasdfasdfo some text retertertertert fasdfasdfo some text 
                	<div id="swf">swf</div>
      <!--end text--></div>
        <!--end container--></div>
    </body>
    </html>

  • #11
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts
    SOLVED! i finally understand bit more about the text in divs. thanks guys


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •