I am a motion media designer trying to incorporate some of my work for a client into a website for her Christmas gift. I am trying to resize a .swf to match the browser size, as the fixed size is really messing with my otherwise-resizing layout.
Every time I set the width/height of the .swf to "100%" or "auto", the movie gets cut off at the top and bottom under the div containers. When I change the size of the container to 100%, I get a long, thin movie. I've copied my code below, and I would really appreciate your help. Feel free to criticize anything else about my code, too--I'm a CSS virgin.
Thanks so much! :)
<!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" lang="en" xml:lang="en">
<head>
<script src="SpryAssets/SpryEffects.js" type="text/javascript"></script>
<script type="text/javascript">
function MM_effectAppearFade(targetElement, duration, from, to, toggle)
{
Spry.Effect.DoFade(targetElement, {duration: duration, from: from, to: to, toggle: toggle});
}
</script>
<title>Eat, Drink, and Be Mary</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<style type="text/css" media="screen">
body {
background:url('images/home.jpg');
background-repeat:no-repeat;
background-size:cover;
position:absolute;
}
html, body {
height:100%;
width:auto;
min-width:700;
}
body { margin:0; padding:0; overflow:hidden; }
.swfcontainer {
margin-top:3%;
width:100%;
height:30%;
margin-bottom:1px;
}
.swfcontainersmall {
margin-left:10%;
height:300px;
margin-right:10%;
}
.flashfile {
width:100%;
height:100%;
text-align:center;
margin:2;
padding:0;
overflow:hidden;
}
.textcontainer {
margin-bottom:3px;
margin-top:0;
margin-left:0;
width:100%;
margin-right:0;
}
.textcontainersmall {
margin-top:1px;
margin-bottom:1px;
margin-left:25%;
margin-right:25%;
}
#flashContent {
width:100%;
height:100%;
}
#wrap { min-height: 100%;}
#main {overflow:auto;
padding-bottom: 150px;} /* must be same height as the footer */
#footer {position: relative;
margin-top:-100px; /* negative value of footer height */
height:100px;
clear:both;
border-bottom:solid 4px #333;
}
/*Opera Fix*/
body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<body>
<div id="wrap">
<div id="main">
<div class="swfcontainer">
<div class="swfcontainersmall">
<div class="flashfile">
<div id="flashContent">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://fpdownload.macromedia.com/
pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="300" height="300" align= "middle">
<param name="SRC" value="EatDrinkAndBeMary.swf">
<param name="wmode" value="transparent" />
<param name="SCALE" value="noborder" />
<param name="BGCOLOR" value= />
<embed src="EatDrinkAndBeMary.swf" width="300" height="300" align="middle" scale="noborder" wmode="transparent" bgcolor="transparent"></embed>
</object>
</div>
</div>
</div>
</div>
<div class="textcontainer">
<div class="textcontainersmall">
<img src="Images/tasteful.png" alt="Eat, Drink, and Be Mary is a locally-owned catering favorite specializing in delicious appetizers and comforting American favorites for events big and small. We can provide your party with a full, friendly staff to complete your amazing experience." width="auto" height="auto" class="textcontainer" onload="MM_effectAppearFade(this, 3000, 0, 100, false)" />
</div>
</div>
</div>
<div id="footer">
<img src="Images/MenuBottom.gif" width="100%" height="100px" alt="MenuBottom" />
<div>
</body>
</html>
Thats simply a lot of code. to mutch for a stack overflow question i think.
If you want a reponsive flash object with css your should look here or for a shorter version here
CSS:
.embed-wrapper {
width: 100%;
max-width: YOURMAXWIDTHpx;
}
* html .arve-embed-container {
margin-bottom: 45px;
margin-bot\tom: 0;
}
.arve-embed-container {
position: relative;
padding-bottom: 56.25%; /* 16/9 ratio */
padding-top: 30px; /* IE6 workaround*/
height: 0;
overflow: hidden;
}
.arce-embed-container div,
.arve-embed-container iframe,
.arve-embed-container object,
.arve-embed-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
take that css and with this html
<div class="embed-wrapper">
<div class="arve-embed-container">
<object YOURSTUFF=HERE>
</object>
</div>
</div>
you sould get everything inside the embed-wrapper work resizeing automatically so 16:9 so u soudl get rid of most of your code and implement something like this
In the flash file
Set
Stage.scaleMode = "noScale";
html file
set object width 100%
Hope this can point you in the right direction. But as yunzen points an online example, where we can actually see the elements your are embedding would be great.
<html>
<head>
<style>
.menu li {
display: inline;
}
.menu {
float: left;
padding: 0;
border: solid;
}
img {
float: left;
width: 200px;
margin: 0 30px;
border: solid;
}
#header {
margin-left: 20%;
margin-right: 20%;
padding: 0 5%;
}
</style>
<title>
</title>
</head>
<body>
<div id="header">
<ul class="menu left">
<li>Elemento 1</li>
<li>Elemento 2</li>
</ul>
<img src="http://www.google.com/logos/2012/steno12-hp.jpg">
<ul class="menu right">
<li>Elemento 3</li>
<li>Elemento 4</li>
</ul>
</div>
</body>
</html>
You should take a look at http://fitvidsjs.com/. Sounds like it is what you need.
Related
I am putting in new code as I have been studying, Hopefully this is a clearer picture of what my goal is.
I want to go from a table based to a div setup, I have tried
<div class="image"></div>
with this CSS
div.image:before {
content:url(http://placehold.it/350x150);
}
But I am unsure of the placement of the text, also putting an image in the div as well as making sure the dimension is correct.
HTML code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>My Site</title>
<meta http-equiv="Content Type" content="text/html; charset=utf-8" />
<style type="text/css">
.bgimg {
background-image: ('file:///C:/Location/somimg.jpg');
}
</style>
</head>
<body>
<img src="somimg.jpg" width="246" height="94" alt="sm pic'/>
<div class="bgimg">
</div>
<div class="mainsection">
</div>
</body>
</html>
CSS code:
td {
text-align: left;
vertical-align: top;
font-family:Tahoma;
font-weight: bold;
font-size:15px;
color: #E5E5E5;
}
.div-with-bg
{
width: 263px;
height: 94px;
background-image:url('smpic.jpg');
margin:0;
padding:0;
}
a {
text-decoration: underline;
color:#9D5FBB;
}
A:Hover {
color : #DBACF2;
text-decoration : underline;
}
h1 {
color: #9929bd;
font-weight: normal;
font-size: 20px;
font-family: Tahoma;
}
H3 {
color: #7F409E;
font-weight: bold;
font-size : 20px;
font-family:Tahoma;
}
My goal is to have the div's go out to the edge of the browsers as I have multiple tables that I would like to replace with div elements. I have viewed this setup in a browser and the div and image show up but not at the edge of the page.
I don't know if I understand what you're asking but I just copied your HTML in Sublime text, and did this for css:
div.image:before {
width: 263px;
height: 94px;
background-image:url('somepic.jpg');
content:url(http://placehold.it/350x150);
margin:0;
padding:0;
}
It works for me. I have the left div on the left and the right div next to it.
Also, I would the the style of the divs in the css file:
div.right {
float: "middle"
}
div.left {
float: "left";
}
And for the HTML:
<body>
<div class="image left">Left Div</div>
<div class="right"">Right Div</div>
</body>
And if you want to make your life easier just learn flexbox. The way i learned it was using this site.
.container{
display:flex;
}
<div class="container">
<div>
<img src="http://placehold.it/350x150" />
</div>
<div>
RIGHT
</div>
</div>
This is one way to do it.
However i think that you should change the question into how i can learn to design in the browser (e.g. https://hackernoon.com/css-box-model-45ecf4ac219e) or something like that.
My divs do not stack up next to each other
What do I do?
One div comes below the other.
I tried all types of positioning and even relative but it doesn't work.
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<meta name="author" content="Chaitanya Gupta">
<meta name="keywords" content="Fashion, Learning, Resources ">
<link href='http://fonts.googleapis.com/css?family=Luckiest+Guy&effect=3d-float' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Bad+Script&effect=3d-float' rel='stylesheet' type='text/css'>
<link rel="icon" type="image/png" href="favicon.ico">
<title>FLR</title>
CSS
<style type="text/css">
hr
{
color:white;
border-width: 2px;
border:medium silver dashed;
}
a:link,a:visited
{
display:block;
color:white;
}
a:hover,a:active
{
background-color:#7C868E;
text-decoration: underline;
border-radius:8px
}
a
{
font-family: "Century Gothic";
font-variant:small-caps;
font-size: 20px;
}
#emboss
{
border-right: 4px solid #2b2b2b;
border-bottom: 4px solid #2b2b2b;
}
#subTopic
{
font-family: 'Luckiest Guy', cursive;
font-size:60px;
font-weight:lighter;;
font-variant:small-caps;
}
#content
{
color:white;
font-family: 'Bad Script', cursive;
font-size:20px;
}
div.menu
{
background-color:#4A5662;
float:left;
width:150px;
height:210px;
border-radius:8px;
margin-top:20px;
margin-left:5px;
text-align:center;
padding-top:10px;
padding-bottom:10px
}
div.content
{
float:right;
}
</style>
<script>
</script>
</head>
HTML
<body background="denim.jpg">
<img src="fas.jpg" style="float:right; height:80px; width:200px;">
<br>
<br>
<br>
<br>
<br>
<br>
<hr>
<div id="emboss" class="menu" >
About</span>
<br>
<a href="" >Careers</a>
<br>
Clients
<br>
Blogs
<br>
Contact Us
</div>
<div class="content" id="display">
<h1 id="subTopic" class="font-effect-3d-float">About</h1>
<p id="content">FASHION LEARNING RESOURCES (FLR) is a Gurgaon,
India based small company pioneering Fashion Education &
Training Technology(FETT) products, services, consulting and
delivery services in FETT for the fashion institutes,
industry bodies and government. FLR also offers E learning
& multimedia content in Fashion / apparel Domain.
FLR is started by founding alumni batch of NIFT.</p>
</div>
<!--<hr style="position:absolute; bottom:30px; width: 1200px">
<code style="color:white; position:absolute; bottom:10px">Copyright © 2013 Fashion Learning Resources. All rights reserved.</code>
-->
</body>
</html>
Try this
div.content
{
margin:0 0 0 160px;
}
It may also be useful to wrap a div around menu and content with a spacific width and then make sure menu and content added together with margins and padding are that width.
div.wrap { width 800px}
div.content {width:640px}
Use the display property in your div, and all divs with this will stack horizontally.
display: inline-block
Use display:inline-block within the CSS definition, that should stack them horizontally for you.
div.content
{
width:calc(100% - 160px);
float:right;
}
This should work
This will keep the div with class menu to the left and the content div in the right
Fiddle
div.menu
{
background-color:#4A5662;
height:210px;
border-radius:8px;
margin-top:20px;
margin-left:5px;
text-align:center;
padding-top:10px;
padding-bottom:10px
}
div.menu a{
display:inline-block;
}
and remove <br/> tag after every anchor
<div id="emboss" class="menu" >
About</span>
<a href="" >Careers</a>
Clients
Blogs
Contact Us
</div>
Its easy just do
div.content
{
/*float:right;*/
}
if you want to make it float:right just give it width, check my fiddle http://jsfiddle.net/GafgA/1/
Remove float: right and add a margin - http://jsfiddle.net/xEGRg/
div.content {
margin-left: 230px;
}
I have a main div which contains another 3 divs, inner divs are each separated into widths of 20% 50% and 30%. I encountered an issue, when resizing window to smaller sizes I get that squeezed effect ass all elements resize, however I want to keep element 1 and 3 at certain sizes (40px and 75px respectively). I tried setting element 1 to 40px, element 2 to 100% and element 3 to 75px widths, but eneded up with getting element 2 to occupy all space and push other elements out. I'll include image of normal state, resized state and desired state (on resize) that I wan't to achieve. How could I achieve it?
As you can see I only want middle section (element 2) to resize as windows is resized.
<div class="div-contain">
<div class="div-1"><div>
<div class="div-2"><div>
<div class="div-3"><div>
<div>
.div-contain {
position: relative;
}
.div-1 {
width: 20%;
min-width: 40px;
float: left;
}
.div-2 {
width: 50%;
position: abosolute;
margin: 0 auto;
}
.div-3 {
width: 30%;
min-width:75px;
float: right;
}
You could also use a media query and directly specify widths when it reaches a break point. add a margin to the center div the size of the left div
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body{
margin:0;
padding:0;
}
.wrapper{
width:100%;
height:400px;
display:table;
}
#n1{
width:20%;
min-width:40px;
background:red;
display:table-cell;
}
#n2{
width:50%;
background:green;
display:table-cell;
}
#n3{
width:30%;
min-width:75px;
background:blue;
display:table-cell;
}
</style>
<script type="text/javascript">
window.onload = function()
{
document.getElementById('n1i').value = document.getElementById('n1').offsetWidth;
document.getElementById('n2i').value = document.getElementById('n2').offsetWidth;
document.getElementById('n3i').value = document.getElementById('n3').offsetWidth;
}
window.onresize = function()
{
document.getElementById('n1i').value = document.getElementById('n1').offsetWidth;
document.getElementById('n2i').value = document.getElementById('n2').offsetWidth;
document.getElementById('n3i').value = document.getElementById('n3').offsetWidth;
}
</script>
</head>
<body>
<div class="wrapper">
<div id="n1">
</div>
<div id="n2">
</div>
<div id="n3">
</div>
</div>
First div width:<br />
<input type="text" id="n1i" readonly="true" /><br />
<br />
Second div width:<br />
<input type="text" id="n2i" readonly="true" /><br />
<br />
Third div width:<br />
<input type="text" id="n3i" readonly="true" />
</body>
</html>
The easiest way might be to do away with element 2 altogether and just put its contents directly within the parent div. Then you can float elements 1 and 2, and when the page is resized only the space between them will change:
<style type="text/css">
#parent {position:relative;width:100%;height:100%;}
#parent div {position:relative;height:100%;}
#element1 {width:40px;float:left;}
#element3 {width:75px;float:right;}
</style>
<div id="parent">
<div id="element1"></div>
<div id="element3"></div>
<!-- Place the contents of element 2 here -->
</div>
i don't know if this works for you but basically i made all three inner divs absolute positioned. and had to use calc to calculate the middle div's width. there might be a better solution without using calc, but this is what came to my mind at this point.
http://jsfiddle.net/btevfik/VRU8V/
body{
margin:0;
}
.container {
height:20px;
position:relative;
}
.div1 {
width: 40px;
position:absolute;
left:0;
border:1px solid blue;
}
.div2 {
width: calc(100% - 120px);
position:absolute;
left:40px;
border:1px solid red;
}
.div3 {
width: 75px;
position:absolute;
right:0;
border:1px solid yellow;
}
On my computer I have it perfectly looking, it is a 17"
I went to see my web under development on www.hrcprojectconsulting.com on another computer, an old screen of 1080 x 600 i think
and the right panel has dislocated itself from its position and taken the middle container
I conceived it as One main container that wraps, a left container, a center container and a right container. I positioned the main container centered with margin: 0 auto; and it all looked good. Then I had to had the banner, the blue stripe that you will see:
This is my blueprint for all pages:
<link rel="stylesheet" href= "<?php echo base_url() ?>css/style.css" />
<script type ="text/javascript" src="<?php echo base_url()?>js/1.8.js"></script>
<div id = "contenedor_principal">
main wrapper
<div id = "left_container">
content for left panel
</div>
<div id="container-center"><!-- 1 -->
content for the center panel
</div> <!-- end of container center 1 -->
<div id = "right_container">
and for the right panel
</div>
</div>
and this is the header:
<!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 profile="http://gmpg.org/xfn/11">
<link rel="stylesheet" href= "<?php echo base_url() ?>css/main_style.css" />
<link rel="stylesheet" href= "<?php echo base_url() ?>css/webform.css" />
<script type ="text/javascript" src="<?php echo base_url()?>js/1.8.js"></script>
</head>
<div id="header" class = "header"><h1 class="header">Real Estate Worldwide</h1>
<body>
And this is the CSS:
#contenedor_principal
{
background:orange;
width:1040px;
margin: 0 auto;
}
div.panel,p.flip
{
margin:0px;
padding:5px;
text-align:center;
background:#FFFFFF;
}
#container-center{
width:635px; /*** Set to = center col width ***/
height:500px;
font-size:8px;
display:inline;
position:absolute;
left:485px;
top:80px;
/* \*/
margin-left:-1px;
/* Hidden from IE-mac */
}
#left_container{
width:200px; /*** Set to = center col width ***/
height:500px;
float:right;
margin-right:0px;
font-size:8px;
display:inline;
position:absolute;
left:275px;
top:80px;
/* \*/
margin-left:-1px;
/* Hidden from IE-mac */
}
#right_container{
width:202px; /*** Set to = center col width ***/
margin-left:0px;
height:600px;
float:right;
font-size:8px;
display:inline;
position:absolute;
right:260px;
background:url('../assets/uploads/miweb/bg_body.png');
background-repeat:repeat-x;
top:80px;
/* \*/
margin-left:-1px;
/* Hidden from IE-mac */
}
#header {
float:inherit;
background: url("../jq185/css/start/images/ui-bg_gloss-wave_75_2191c0_500x100.png") repeat-x scroll 50% 50% #2191C0;
font-family: 'trebuchet ms',geneva,arial,tahoma,sans-serif;
font-size: 10px;
margin: 0 auto;
margin-top: 2px;
padding: 0;
width: 1050px;
height:75px;
h2 {color:#ffffff;}
}
Than can anyway be seen live on my web like I said. I am using 1660 x 900 and 17" but it should be viewable on any resolution and screen.
Any clue as to why it went all upside down?
thank you
The layout you are using is wrong. no need to use position: absolute for every div and then set the top and left.
Instead of that follow the below structure.
HTML
<html>
<head>
<title>Website</title>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="content">
<div id="left_content"></div>
<div id="middle_content"></div>
<div id="right_content"></div>
</div>
</div>
</body>
</html>
CSS
#container {
width:960px;
margin:0 auto;
}
#header {
background: blue;
height:50px;
margin-bottom:20px;
}
#left_content {
float: left;
width:150px;
background: red;
min-height: 600px;
margin-right:20px;
}
#middle_content {
float: left;
width:620px;
background: green;
min-height: 600px;
margin-right:20px;
}
#right_content {
float: right;
width:150px;
background: red;
min-height: 600px;
}
Live Demo
Hope this will help you.
Well, in your css, you clearly coded everything in order it comes correctly only on your screen.
In particular what is going wrong is your #right_container in which you say float:right and than right:260px.
A quick (but bad) solution to your css would be to put float:left instead of float:right and define the number of pixels from the left left:1190px (1190 is approximate)
A better solution would be learn properly css and play with it afterwards!
My HTML is simple, I have a content area that wraps around everything and inside it I want three columsn. Two of them have to have fixed widths, and main content area should be flexible.
I wonder what I'm doing wrong - EDIT here is the complete code sorry if it's a bit long!:
<%# Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %>
<!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 runat="server">
<title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
<link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">
<img src="../../Content/images/cumaviLogo.png" alt="Cumavi.com - Compras y ventas online en Bolivia!" />
<ul id="topuserbar">
<li>Bienvenidos, <span class="userSalute">Sergio!</span></li>
<li>Mis Anuncios</li>
<li>Perfil</li>
<li>Ayuda<img class="helpicon" src="../../Content/images/helpIcon.png" alt="Help icon." width="20" height="20"/></li>
<li>Cerrar Sesion</li>
</ul>
</div>
<div id="headershadow">
</div>
<div id="body">
<div id="leftnavigation"></div>
<div id="contentarea"></div>
<div id="advertisingarea">
</div>
</div>
<asp:ContentPlaceHolder ID="MainContent" runat="server" />
</body>
</html>
body
{
background-image: url('images/test.png');
background-repeat:repeat;
margin:0;
padding:0;
}
#header
{
background-image: url('images/headerBackground.png');
background-repeat:repeat;
width:auto;
}
#headershadow
{
background-color:Black;
min-height:2px;
}
#topuserbar
{
font-family:Georgia;
font-size:large;
float:right;
margin-top:35px;
margin-right:15px;
}
#topuserbar ul
{
}
#topuserbar li
{
display:inline;
margin-left:10px;
color:#fff;
}
#topuserbar .helpicon
{
position:relative;
top:4px;
left:2px;
}
#topuserbar a
{
color:White;
}
#topuserbar a:hover
{
color:Yellow;
}
/*****************BODY AREA*******************/
#body
{
border: 1px solid red;
min-height:800px;
width:960px;
}
#leftnavigation
{
border: 1px solid green;
min-height:500px;
float:left;
width:190px;
}
#contentarea
{
border:1px solid blue;
min-height:500px;
float:left;
width:590px;
}
#advertisingarea
{
border:1px solid orange;
width:150px;
float:left;
min-height:500px;
}
Could it be because of the cumulative 1 pixel border?
Sergio, I'm not sure if this is going to be the answer but try replacing borders with outlines. Borders have a pixel width whereas outlines don't. This may, possibly, solve your problem.
CSS usage: outline{1px solid red;}
Could it be:
#headershadow
{
background-color:Black;
min-height:2px;
The height and padding above/below the <ul id=topuserbar> is pushing down the second and third divs.
Add height:43px; (or greater) to #header to push elements below it down and that will line up the 3 body divs.
Firebug is your friend!