...

View Full Version : DIV layout help



t4si
11-22-2011, 06:52 PM
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

http://www.mediafire.com/imgbnc.php/ccaeba7c9d755dd4f4de45d602a47eb4a642eade50eb5d80d69a667602c0bd824g.jpg

DIV_layout_false.jpg - what i get

http://www.mediafire.com/imgbnc.php/02de5f74c23d3ec9cfc92286d1f19618a57e401800e00704023a8bc0ad3916564g.jpg

teedoff
11-22-2011, 07:07 PM
Can you post your code of what you.ve tried? Or better a link to your live test site.

t4si
11-22-2011, 07:29 PM
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.

Excavator
11-22-2011, 07:40 PM
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 -
<!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>

teedoff
11-22-2011, 07:50 PM
OK then try this.


<!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>

teedoff
11-22-2011, 07:52 PM
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

t4si
11-22-2011, 09:26 PM
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.

http://www.mediafire.com/imgbnc.php/23d8b84f8d3d800f7339d41b7d73c046a5a982e10314052d9e6d5002b0afe9d76g.jpg

Excavator
11-22-2011, 09:38 PM
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.

t4si
11-22-2011, 09:42 PM
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?

t4si
11-22-2011, 09:44 PM
<!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>

t4si
11-22-2011, 09:47 PM
SOLVED! i finally understand bit more about the text in divs. thanks guys



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum