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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Oct 2012
    Posts
    7
    Thanks
    3
    Thanked 0 Times in 0 Posts

    CSS Positioning help

    hey guys having a little trouble with positioning some text on a webpage i'm building very simple page just a video small menu and some text. i just want to the small block of text to appear below the menu to the right of the video not under the video. any help with this would be much appreciated. http://transitionexhibition.co.uk
    Code:
    <!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" />
    <title>Transition</title>
    <link type="text/css" rel="stylesheet" href="style.css" />
    
    
    
    </head>
    
    <body style="background-color:#1A1A1A;">
    <!--<iframe width="1000" title="YouTube video player" src="http://www.youtube.com/embed/60D-u4BuWoo?modestbranding=1;showinfo=0;HD=1;rel=0;showinfo=0;autoplay=1;controls=0" frameborder="0"></iframe>
    -->
    <div id="menu">
    <ul>
    <li><a href='events.html'>Events</a></li>
    <li><a href='artists.html'>Artists</li>
    <li><a href='index.html'>Home</a></li>
    </ul>
    
    </div>
    <div style=""><video style="margin:0px auto;" width="70%" height="auto" autoplay="1">
    	<!-- MP4 must be first for iPad! -->
    	<source src="WEBREADY.mp4" type="video/mp4" /><!-- Safari / iOS video    -->
    	<source src="__VIDEO__.OGV" type="video/ogg" /><!-- Firefox / Opera / Chrome10 -->
    	<!-- fallback to Flash: -->
    		<!-- fallback image. note the title field below, put the title of the video there -->
    	
    </video>
    <p style="float:right;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec justo a turpis lacinia ornare. Cras iaculis fringilla lorem, et feugiat diam feugiat sit amet. Quisque nibh ante, eleifend eu sapien. Maecenas at suscipit elit. Integer porttitor blandit elit, a gravida velit rhoncus vitae. Etiam tempus commodo iaculis. Donec faucibus elit a lorem tempor at auctor magna suscipit. Curabitur cursus, lectus nec pulvinar tristique, lorem dolor fermentum dolor, non faucibus dui felis id odio. Aliquam nunc sapien, imperdiet ac tempor at, tincidunt at turpis. Ut ornare molestie est et tincidunt. Nunc risus est, porta sed bibendum et, pharetra vel libero. Aliquam in libero ante. Nam ut turpis vitae magna pulvinar pharetra. Nunc non hendrerit arcu.
    </p>
    </div>
    
    <!-- you *must* offer a download link as they may be able to play the file locally. customise this bit all you want -->
    
    </body>
    </html>
    Code:
    @charset "UTF-8";
    /* CSS Document */
    
    #menu Li{
    	
    	font-size: 25px;
    	font-style: normal;
    color:#F0F0F0;
    	text-align: center;
    	height: auto;
    	width: auto;
    	margin-top: 20px;
    	margin-right:50px;
    	border-top-style: none;
    	border-right-style: none;
    	border-bottom-style: none;
    	border-left-style: none;
    	position: relative;
    	list-style-type: none;
    	display:inline-block;
    	font-family:"monaco", monospace;
    	float:right;
    
    	
    }
     p{font-size:14px;
    	 font-style: normal;
    	color:#F0F0F0;
    	text-align: left;
    	height: auto;
    	width: auto;
    	margin-top: 5px;
    	margin-right:30%;
    	border-top-style: none;
    	border-right-style: none;
    	border-bottom-style: none;
    	border-left-style: none;
    	position: relative;
     }
    	img{
    		padding-right: 30px;
    	float:left;}
    a { color:inherit;
    	text-decoration:none;
    	}
    	a:hover{
            color:#999;
        }
       a:active{
            color:white;
       }h1 {
    	font-family: monaco;
    	font-size: 20px;
    	color: #F0F0F0;
    	text-align: left;
    
    	display: none;
    	position: relative;
    }
    #events{
    	padding-left: 100px;
    	padding-right: 100px;
    	position:relative;
    	top: 120px;
    }
    #artists{
    	padding-left: 100px;
    	padding-right: 100px;
    	position:relative;
    	top: 120px;
    
    }

  • #2
    New Coder
    Join Date
    Oct 2012
    Posts
    44
    Thanks
    7
    Thanked 3 Times in 3 Posts
    when I view the page (latest FF and Chrome), the video is on the left, menu upper right, text below the menu.

  • #3
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,452
    Thanks
    23
    Thanked 631 Times in 630 Posts
    You have the <p> in the div that contains the video, that's why it's under the vid.

    I'd put the video div first and float it left. The menu div next float right. The text in it's own div with the same style as the menu. A fast look at it:
    Code:
    <!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" />
    <title>Transition</title>
    <style type="text/css">
    #menu Li{
    	font-size: 25px;
    	font-style: normal;
    color:#F0F0F0;
    	text-align: center;
    	height: auto;
    	width: auto;
    	margin-top: 20px;
    	margin-right:50px;
    	border-top-style: none;
    	border-right-style: none;
    	border-bottom-style: none;
    	border-left-style: none;
    	position: relative;
    	list-style-type: none;
    	display:inline-block;
    	font-family:"monaco", monospace;
    	float:right;
    }
    </style>
    </head>
    <body>
    <div style="border: red solid 1px;height:100px;width: 600px;float:left;">
    <video style="margin:0px auto;" width="70%" height="auto" autoplay="1">
    	<source src="WEBREADY.mp4" type="video/mp4" /><!-- Safari / iOS video    -->
    	<source src="__VIDEO__.OGV" type="video/ogg" /><!-- Firefox / Opera / Chrome10 -->
    </video>
    </div>
    <div id="menu" style="float: right;color: black;width: 500px;">
    <ul>
    <li><a href='events.html'>Events</a></li>
    <li><a href='artists.html'>Artists</li>
    <li><a href='index.html'>Home</a></li>
    </ul>
    </div>
    <div style="float: right;color: black;width: 500px;">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec justo a turpis lacinia ornare. Cras iaculis fringilla lorem, et feugiat diam feugiat sit amet. Quisque nibh ante, eleifend eu sapien. Maecenas at suscipit elit. Integer porttitor blandit elit, a gravida velit rhoncus vitae. Etiam tempus commodo iaculis. Donec faucibus elit a lorem tempor at auctor magna suscipit. Curabitur cursus, lectus nec pulvinar tristique, lorem dolor fermentum dolor, non faucibus dui felis id odio. Aliquam nunc sapien, imperdiet ac tempor at, tincidunt at turpis. Ut ornare molestie est et tincidunt. Nunc risus est, porta sed bibendum et, pharetra vel libero. Aliquam in libero ante. Nam ut turpis vitae magna pulvinar pharetra. Nunc non hendrerit arcu.
    </p>
    </div>
    </body>
    </html>


  •  

    Posting Permissions

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