Jump to content

side by side elements

mindapolis

By mindapolis
in CSS Help

 Share

Recommended Posts

mindapolis Advanced Member

mindapolis

Posted
Posted

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>
Link to comment
Share on other sites
mindapolis Advanced Member

mindapolis

Posted
  • Author
Posted

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>
Link to comment
Share on other sites
mindapolis Advanced Member

mindapolis

Posted
  • Author
Posted (edited)

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
Link to comment
Share on other sites
mindapolis Advanced Member

mindapolis

Posted
  • Author
Posted

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>
Link to comment
Share on other sites
mindapolis Advanced Member

mindapolis

Posted
  • Author
Posted

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>
Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

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.

×
 Share
Go to topic listing
×
×
  • 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.