Jump to content
Sign in to follow this  
mindapolis

side by side elements

Recommended Posts

Hi, I have been out of coding for a few years, and I'm having trouble figuring out why the 2 boxes aren't side  by side.  if someone could help me I would really appreciate it. 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
	button {
    background: yellow;
    width: 250px;
    height: 150px;
    margin: 230px;
    transition: transform .8s ease-in-out, color .75s;
    position: relative;
}

button>span {
    display: inline-block;
    transition: opacity .8s;
    position: absolute;
    width: 250px;
    top: 15px;
    left: 0;
	float:  right; 
}

button>.flipped {
    opacity: 0;
    transform: rotate(180deg);
}

button:hover {
    transform: rotate(180deg);
}

button:hover>.normal {
    opacity: 0;
}

button:hover>.flipped {
    opacity: 1;
}
li {
	list-style:none; 
}

buttonMarketing>span {
    display: inline-block;
    transition: opacity .8s;
    position: absolute;
    width: 250px;
    top: 15px;
    left: 0;
	float:right;
}

buttonMarketing>.flipped {
    opacity: 0;
    transform: rotate(180deg);
}

buttonMarketing:hover {
    transform: rotate(180deg);
}

buttonMarketing:hover>.normal {
    opacity: 0;
}

buttonMarketing:hover>.flipped {
    opacity: 1;
}
li {
	list-style:none; 
}

</style>
<link href="MSU.css" rel="stylesheet" type="text/css">
<link href="jQueryAssets/jquery.ui.core.min.css" rel="stylesheet" type="text/css">
<link href="jQueryAssets/jquery.ui.theme.min.css" rel="stylesheet" type="text/css">
<link href="jQueryAssets/jquery.ui.button.min.css" rel="stylesheet" type="text/css">
<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.-->
<script src="jQueryAssets/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="jQueryAssets/jquery.ui-1.10.4.button.min.js" type="text/javascript"></script>
<script>var __adobewebfontsappname__="dreamweaver"</script><script src="http://use.edgefonts.net/bad-script:n4:default;arbutus:n4:default;allan:n7:default.js" type="text/javascript"></script>
</head>

<body>   
<header><span id="BusName"> Media Services Unlimited </span> <br>
  <span id="BizMotto"> Meeting All Your Marketing Needs. . .
  </span>
  <p> </p>
  <nav> 
    	<a href="test1.html" tabindex="1" accesskey="H">Home</a>
        <a href="services.htm" tabindex="2" accesskey="S">Services</a>
        <a href="contact.php" tabindex="3" accesskey="C">Contact Us</a>
    </nav>
</header>
<button><span class="normal">Web Samples</span><span class="flipped">
	<ul>
    	<li>  Website Design </li>
       	<li>  Social Media  </li>
    	<li>  SEO</li>                
    </ul>
</span></button>
<buttonMarketing><span class="normal">Marketing Samples</span><span class="flipped">
	<ul>
    	<li>  Blogs</li>
       	<li>  Marketing Material Creation  </li>  
    </ul>
</span></buttonMarketing>
</body>
</html>

Share this post


Link to post
Share on other sites

You can't just make up element names. There is a formal spec of named elements that you may use.

 

Aside from that, your two buttons are not side-by-side because they have very large margins. Fixed here: http://jsfiddle.net/LntLnky6/

Share this post


Link to post
Share on other sites

Well, I thought everything was set.  i had the button flipping, not fading.  Can anyone please tell me what needs to be changed please? 

Share this post


Link to post
Share on other sites

Originally I had the buttons flip 180 degrees when the mouse hovered  over them , but now they are fading in and out which is not what I want. 

Share this post


Link to post
Share on other sites

Something is not working.  No boxes are on the screen. 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
	button {
    background: yellow;
    width: 250px;
    height: 150px;
    transition: transform .8s ease-in-out, color .75s;
    position: relative;
    display: inline-block;
}

/* entire container, keeps perspective */
.flip-container {
	perspective: 1000;
}
	/* flip the pane when hovered */
	.flip-container:hover .flipper, .flip-container.hover .flipper {
		transform: rotateY(180deg);
	}

.flip-container, .front, .back {
	width: 320px;
	height: 480px;
}

/* flip speed goes here */
.flipper {
	transition: 0.6s;
	transform-style: preserve-3d;

	position: relative;
}

/* hide back of pane during swap */
.front, .back {
	backface-visibility: hidden;

	position: absolute;
	top: 0;
	left: 0;
}

/* front pane, placed above back */
.front {
	z-index: 2;
	/* for firefox 31 */
	transform: rotateY(0deg);
}

/* back, initially hidden pane */
.back {
	transform: rotateY(180deg);
}
</style>
<link href="MSU.css" rel="stylesheet" type="text/css">
<link href="jQueryAssets/jquery.ui.core.min.css" rel="stylesheet" type="text/css">
<link href="jQueryAssets/jquery.ui.theme.min.css" rel="stylesheet" type="text/css">
<link href="jQueryAssets/jquery.ui.button.min.css" rel="stylesheet" type="text/css">
<link href="jQueryAssets/jquery.ui.tabs.min.css" rel="stylesheet" type="text/css">
<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.-->
<script src="jQueryAssets/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="jQueryAssets/jquery.ui-1.10.4.button.min.js" type="text/javascript"></script>
<script src="jQueryAssets/jquery.ui-1.10.4.tabs.min.js" type="text/javascript"></script>
<script>var __adobewebfontsappname__="dreamweaver"</script><script src="http://use.edgefonts.net/bad-script:n4:default;arbutus:n4:default;allan:n7:default.js" type="text/javascript"></script>
</head>

<body>   
<header>

<img src="assets/logo.png" width="274" height="103" alt=""/><br />
Meeting All Your Marketing Needs. . .
<p> </p>
  <nav>
    <p> </p>
    <p><a href="test1.html" tabindex="1" accesskey="H">Home</a> <a href="services.htm" tabindex="2" accesskey="S">Services</a> <a href="contact.php" tabindex="3" accesskey="C">Contact Us</a></p>
  </nav>
</header>
<section>  
Running a business, of any size, is rough, but it's especially rough for small  businesses.  as an owner of a small business, you wear so many hats!  You are the salesperson, the producer of the product, and sometime you have to do all the marketing work.  Wouldn't it be nice if there was a way to hand the marketing tasks to someone else, and not have to hire a full-time marketing staff?  Well, fortunately there is!  Media Services Unlimited is a full-service marketing company specifically geared towards small businesses.  We handle all the marketing tasks, so you can focus on producing high-quality products and your customers!  
</section>
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
	<div class="flipper">
		<div class="front">
			<!-- front content -->
		</div>
		<div class="back">
			<!-- back content -->
		</div>
	</div>
</div>
</body>
</html>

Share this post


Link to post
Share on other sites

It 's working sort of.  I want it below the section and the aside elements.  I set it to clear both elements but it 's not putting it below everything. 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">

/* entire container, keeps perspective */
.flip-container {
	perspective: 1000;
}
	/* flip the pane when hovered */
	.flip-container:hover .flipper, .flip-container.hover .flipper {
	transform: rotateY(180deg);
	clear: both;
	}

.flip-container, .front, .back {
	width: 320px;
	height: 480px;
}

/* flip speed goes here */
.flipper {
	transition: 0.6s;
	transform-style: preserve-3d;

	position: relative;
}

/* hide back of pane during swap */
.front, .back {
	backface-visibility: hidden;

	position: absolute;
	top: 0;
	left: 0;
}

/* front pane, placed above back */
.front {
	z-index: 2;
	/* for firefox 31 */
	transform: rotateY(0deg);
}

/* back, initially hidden pane */
.back {
	transform: rotateY(180deg);
}
</style>
<link href="MSU.css" rel="stylesheet" type="text/css">
<link href="jQueryAssets/jquery.ui.core.min.css" rel="stylesheet" type="text/css">
<link href="jQueryAssets/jquery.ui.theme.min.css" rel="stylesheet" type="text/css">
<link href="jQueryAssets/jquery.ui.button.min.css" rel="stylesheet" type="text/css">
<link href="jQueryAssets/jquery.ui.tabs.min.css" rel="stylesheet" type="text/css">
<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.-->
<script src="jQueryAssets/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="jQueryAssets/jquery.ui-1.10.4.button.min.js" type="text/javascript"></script>
<script src="jQueryAssets/jquery.ui-1.10.4.tabs.min.js" type="text/javascript"></script>
<script>var __adobewebfontsappname__="dreamweaver"</script><script src="http://use.edgefonts.net/bad-script:n4:default;arbutus:n4:default;allan:n7:default.js" type="text/javascript"></script>
</head>

<body>   
<header>

<img src="assets/logo.png" width="274" height="103" alt=""/><br />
<span id="catchPhrase">Meeting All Your Marketing Needs. . .</span>
<p> </p>
  <nav>
    <p> </p>
    <p><a href="test1.html" tabindex="1" accesskey="H">Home</a> <a href="services.htm" tabindex="2" accesskey="S">Services</a> <a href="contact.php" tabindex="3" accesskey="C">Contact Us</a></p>
  </nav>
</header>
<section>  
Running a business, of any size, is rough, but it's especially rough for small  businesses.  as an owner of a small business, you wear so many hats!  You are the salesperson, the producer of the product, and sometime you have to do all the marketing work.  Wouldn't it be nice if there was a way to hand the marketing tasks to someone else, and not have to hire a full-time marketing staff?  Well, fortunately there is!  Media Services Unlimited is a full-service marketing company specifically geared towards small businesses.  We handle all the marketing tasks, so you can focus on producing high-quality products and your customers!  
</section>
<aside>
testimonial quotes will go here 
</aside>
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
	<div class="flipper">
		<div class="front">
			did I 
	  </div>
		<div class="back">
do it?  
		</div>
	</div>
</div>
</body>
</html>

Edited by mindapolis

Share this post


Link to post
Share on other sites

Is there a way to get the whole green area to flip, not just the words? 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">


/* entire container, keeps perspective */
.flip-container {
	perspective: 1000;
}
	/* flip the pane when hovered */
	.flip-container:hover .flipper, .flip-container.hover .flipper {
	transform: rotateY(180deg);
	}

.flip-container, .front, .back {
	background-color: #99cc99;
	width: 320px;
	height: 200px;
	clear: both;
	border-radius: 35px;
}
/* flip speed goes here */
.flipper {
	transition: 0.6s;
	transform-style: preserve-3d;

	position: relative;
}

/* hide back of pane during swap */
.front, .back {
	backface-visibility: hidden;
	position: absolute;
	top: 0;
	left: 0;
}

/* front pane, placed above back */
.front {
	z-index: 2;
	/* for firefox 31 */
	transform: rotateY(0deg);
}

/* back, initially hidden pane */
.back {
	transform: rotateY(180deg);
}
li {
	list-style:none; 
}
marketingPortfolio, multimediaPortfolio  {
	float:right;
}
websitePortfolio {
	float:left; 
}
</style>
<link href="MSU.css" rel="stylesheet" type="text/css">
<link href="jQueryAssets/jquery.ui.core.min.css" rel="stylesheet" type="text/css">
<link href="jQueryAssets/jquery.ui.theme.min.css" rel="stylesheet" type="text/css">
<link href="jQueryAssets/jquery.ui.button.min.css" rel="stylesheet" type="text/css">
<link href="jQueryAssets/jquery.ui.tabs.min.css" rel="stylesheet" type="text/css">
<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.-->
<script src="jQueryAssets/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="jQueryAssets/jquery.ui-1.10.4.button.min.js" type="text/javascript"></script>
<script src="jQueryAssets/jquery.ui-1.10.4.tabs.min.js" type="text/javascript"></script>
<script>var __adobewebfontsappname__="dreamweaver"</script><script src="http://use.edgefonts.net/bad-script:n4:default;arbutus:n4:default;allan:n7:default.js" type="text/javascript"></script>
</head>

<body>   
<header>

<img src="assets/logo.png" width="274" height="103" alt=""/><br />
<span id="catchPhrase">Meeting All Your Marketing Needs. . .</span>
<p> </p>
  <nav>
    <p> </p>
    <p><a href="test1.html" tabindex="1" accesskey="H">Home</a> <a href="services.htm" tabindex="2" accesskey="S">Services</a> <a href="contact.php" tabindex="3" accesskey="C">Contact Us</a></p>
  </nav>
</header>
<section>  
Running a business, of any size, is rough, but it's especially rough for small  businesses.  as an owner of a small business, you wear so many hats!  You are the salesperson, the producer of the product, and sometime you have to do all the marketing work.  Wouldn't it be nice if there was a way to hand the marketing tasks to someone else, and not have to hire a full-time marketing staff?  Well, fortunately there is!  Media Services Unlimited is a full-service marketing company specifically geared towards small businesses.  We handle all the marketing tasks, so you can focus on producing high-quality products and your customers!  
</section>
<aside>
testimonial quotes will go here 
</aside>
<div id="websitePortfolio">
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
	<div class="flipper">
		<div class="front">
			Website Portfolio 
	  </div>
		<div class="back">
   			<ul>
            	<li>Website Design </li>
                <li>Content Management </li>
                <li>SEO</li>
            </ul>
		</div>
	</div>
</div>
</div>
<div id="marketingPortfolio">
  <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
	<div class="flipper">
		<div class="front">
			Marketing Portfolio 
	  </div>
		<div class="back">
   			<ul>
            	<li>Marketing Material Creation  </li>
                <li>Social Media Management </li>
                <li>Creative Writing </li>
            </ul>
    	</div>
    </div>
 </div>
</div>
<div id="multimediaPortfolio">   
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
	<div class="flipper">
		<div class="front">
			Multimedia Portfolio 
	  </div>
		<div class="back">
   			<ul>
            	<li>Video Editing  </li>
            </ul>
		</div>
</div>
</div>
</div>
</body>
</html>

Share this post


Link to post
Share on other sites

Sorry, one more question.  I'm trying to get the portfolio blocks to line up horizontally, not vertically?  I thought the float would work but it 's not doing anything. 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">


/* entire container, keeps perspective */
.flip-container {
	perspective: 1000;
}
	/* flip the pane when hovered */
	.flip-container:hover .flipper, .flip-container.hover .flipper {
	transform: rotateY(180deg);
	}

.flip-container, .front, .back {
	background-color: #99cc99;
	width: 320px;
	height: 200px;
	clear: both;
	border-radius: 35px;
}
/* flip speed goes here */
.flipper {
	transition: 0.6s;
	transform-style: preserve-3d;

	position: relative;
}

/* hide back of pane during swap */
.front, .back {
	backface-visibility: hidden;
	position: absolute;
	top: 0;
	left: 0;
}

/* front pane, placed above back */
.front {
	z-index: 2;
	/* for firefox 31 */
	transform: rotateY(0deg);
}

/* back, initially hidden pane */
.back {
	transform: rotateY(180deg);
}
li {
	list-style:none; 
}
marketingPortfolio, multimediaPortfolio  {
	float:right;
	width: 320px;
}
websitePortfolio {
	float:left; 
	width:320px;
}
</style>
<link href="MSU.css" rel="stylesheet" type="text/css">
<link href="jQueryAssets/jquery.ui.core.min.css" rel="stylesheet" type="text/css">
<link href="jQueryAssets/jquery.ui.theme.min.css" rel="stylesheet" type="text/css">
<link href="jQueryAssets/jquery.ui.button.min.css" rel="stylesheet" type="text/css">
<link href="jQueryAssets/jquery.ui.tabs.min.css" rel="stylesheet" type="text/css">
<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.-->
<script src="jQueryAssets/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="jQueryAssets/jquery.ui-1.10.4.button.min.js" type="text/javascript"></script>
<script src="jQueryAssets/jquery.ui-1.10.4.tabs.min.js" type="text/javascript"></script>
<script>var __adobewebfontsappname__="dreamweaver"</script><script src="http://use.edgefonts.net/bad-script:n4:default;arbutus:n4:default;allan:n7:default.js" type="text/javascript"></script>
</head>

<body>   
<header>

<img src="assets/logo.png" width="274" height="103" alt=""/><br />
<span id="catchPhrase">Meeting All Your Marketing Needs. . .</span>
<p> </p>
  <nav>
    <p> </p>
    <p><a href="test1.html" tabindex="1" accesskey="H">Home</a> <a href="services.htm" tabindex="2" accesskey="S">Services</a> <a href="contact.php" tabindex="3" accesskey="C">Contact Us</a></p>
  </nav>
</header>
<section>  
Running a business, of any size, is rough, but it's especially rough for small  businesses.  as an owner of a small business, you wear so many hats!  You are the salesperson, the producer of the product, and sometime you have to do all the marketing work.  Wouldn't it be nice if there was a way to hand the marketing tasks to someone else, and not have to hire a full-time marketing staff?  Well, fortunately there is!  Media Services Unlimited is a full-service marketing company specifically geared towards small businesses.  We handle all the marketing tasks, so you can focus on producing high-quality products and your customers!  
</section>
<aside>
testimonial quotes will go here 
</aside>
<div id="websitePortfolio">
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
	<div class="flipper">
		<div class="front">
			Website Portfolio 
	  </div>
		<div class="back">
   			<ul>
            	<li>Website Design </li>
                <li>Content Management </li>
                <li>SEO</li>
            </ul>
		</div>
	</div>
</div>
</div>
<div id="marketingPortfolio">
  <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
	<div class="flipper">
		<div class="front">
			Marketing Portfolio 
	  </div>
		<div class="back">
   			<ul>
            	<li>Marketing Material Creation  </li>
                <li>Social Media Management </li>
                <li>Creative Writing </li>
            </ul>
    	</div>
    </div>
 </div>
</div>
<div id="multimediaPortfolio">   
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
	<div class="flipper">
		<div class="front">
			Multimedia Portfolio 
	  </div>
		<div class="back">
   			<ul>
            	<li>Video Editing  </li>
            </ul>
		</div>
</div>
</div>
</div>
</body>
</html>

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.