 |
|
|
| View previous topic :: View next topic |
| Author |
Message |
Mike H
Joined: 28 Sep 2009 Posts: 17
|
Posted: Wed Oct 07, 2009 6:14 pm How do I position text just to the right of something? |
|
|
|
My webpage is here:
http://www.masoncreekstudios.com/
I want to position text just to the right of the FLV Player. The text would be:
Mastering by Brian Lucey
followed by a link to his website http://www.magicgardenmastering.com/,
Would I best use this:
style="float: right" ?
If so, it is not clear to me (1) how to position it vertically, and (2) how to control the space between the player and the new text.
Help would be much appreciated!
The code I am now using is this (thanks mainly to sticks464):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Mason Creek Studios</title>
<style type="text/css">
body {background:#7C90B4;}
h1 {
font-size:40px;
font-style:italic;
font-weight: bold;
margin: 0;
padding: 0;
border: 0;
outline: 0;
}
h3 {
font-size:28px;
font-style:italic;
font-weight: bold;
margin: 0;
padding: 0;
border: 0;
outline: 0;
}
p {
font-size:18px;
font-style:italic;
font-weight: bold;
margin: 0;
padding: 0;
border: 0;
outline: 0;
}
h5 {
font-size:20px;
font-style:italic;
font-weight: bold;
margin-top: 30px;
margin-bottom: 0px;
padding: 0;
border: 0;
outline: 0;
}
#mediaspace {
width:470px;
height:282px;
border:4px solid #DF3232;
}
.band {
border:10px solid #000;
margin-top:10px;
width:1027px;
}
</style>
</head>
<body>
<h1>Mason Creek Studios</h1>
<h3>Current Mixes</h3>
<p>Note: Download Adobe Flash Player if you can't play these m4a files: <a href="http://get.adobe.com/flashplayer/">flashplayer download site</a></p>
<script type='text/javascript' src='swfobject.js'>
</script>
<div id='mediaspace'>Note: Download Adobe Flash Player if you can't play these m4a files: http://get.adobe.com/flashplayer/ </div>
<script type='text/javascript'>
var so = new SWFObject('player-licensed.swf','mpl','470','282','9.0.124');
so.addParam('allowfullscreen','true');
so.addParam('allowscriptaccess','always');
so.addParam('wmode','opaque');
so.addVariable('file','playlist.xml');
so.addVariable('playlistsize','240');
so.addVariable('playlist','bottom');
so.addVariable('skin', 'metarby10.swf');
so.write('mediaspace');
</script>
<h5>Ellisville High School auditorium, 1963</h5>
<p class="band"><img src="High school band photo.jpg" height="549" width="1027" alt="High School Band"></p>
</body>
</html> |
|
PayneLess Designs

Joined: 28 Feb 2007 Posts: 3597 Location: Biloxi, MS
|
Posted: Wed Oct 07, 2009 6:26 pm |
|
|
|
| Could make two more divs. One for the text you want added to right of media player and a complete wrapper div for it and the media player div. You can then float left/right as you want inside the wrapper div. |
|
sticks464

Joined: 31 Dec 2006 Posts: 2311
|
Posted: Wed Oct 07, 2009 7:21 pm |
|
|
|
Something like this
| Code: |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Mason Creek Studios</title>
<style type="text/css">
body {background:#7C90B4;}
h1 {
font-size:40px;
font-style:italic;
font-weight: bold;
margin: 0;
padding: 0;
border: 0;
outline: 0;
}
h3 {
font-size:28px;
font-style:italic;
font-weight: bold;
margin: 0;
padding: 0;
border: 0;
outline: 0;
}
p {
font-size:18px;
font-style:italic;
font-weight: bold;
margin: 0;
padding: 0;
border: 0;
outline: 0;
}
h5 {
font-size:20px;
font-style:italic;
font-weight: bold;
margin-top: 30px;
margin-bottom: 0px;
padding: 0;
border: 0;
outline: 0;
}
#mediaspace {
width:470px;
height:282px;
border:4px solid #DF3232;
float:left;
}
.band {
border:10px solid #000;
margin-top:10px;
width:1027px;
}
#outer{
width:800px;
text-align:left;
margin:20px 0 0 0;
}
.mixer{
float:left;
width:299px;
position:relative;
left:-1px;
}
.mixer p{margin:0 0 0 20px;padding:5px;color:#fff;}
.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix {
display:inline-block;
}
/* mac hide \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide */
</style>
</head>
<body>
<h1>Mason Creek Studios</h1>
<h3>Current Mixes</h3>
<p>Note: Download Adobe Flash Player if you can't play these m4a files: <a href="http://get.adobe.com/flashplayer/">flashplayer download site</a></p>
<script type='text/javascript' src='swfobject.js'>
</script>
<div id="outer" class="clearfix">
<div id='mediaspace'>Note: Download Adobe Flash Player if you can't play these m4a files: http://get.adobe.com/flashplayer/ </div>
<script type='text/javascript'>
var so = new SWFObject('player-licensed.swf','mpl','470','282','9.0.124');
so.addParam('allowfullscreen','true');
so.addParam('allowscriptaccess','always');
so.addParam('wmode','opaque');
so.addVariable('file','playlist.xml');
so.addVariable('playlistsize','240');
so.addVariable('playlist','bottom');
so.addVariable('skin', 'metarby10.swf');
so.write('mediaspace');
</script>
<div class="mixer">
<p><strong><em>Mastering by Brian Lucey</em></strong><br>
<a href="Mastering by Brian Lucey">Mastering by Brian Lucey</a></p>
</div>
</div>
<h5>Ellisville High School auditorium, 1963</h5>
<p class="band"><img src="High school band photo.jpg" height="549" width="1027" alt="High School Band"></p>
</body>
</html> |
|
|
Mike H
Joined: 28 Sep 2009 Posts: 17
|
Posted: Wed Oct 07, 2009 9:30 pm |
|
|
|
| sticks464 wrote: |
Something like this
|
Outstanding..........thanks!
However.........I screwed it up
I wanted to move the new text and link down and to the right a little. I did this......but it squeezed the two lines into several lines.
I thought I could solve it by increasing the outer width from 800 to 900.....but this didn't work.
What width is causing the problem?
You can see my problem here:
http://www.masoncreekstudios.com/
My current code is:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Mason Creek Studios</title>
<style type="text/css">
body {background:#7C90B4;}
h1 {
font-size:40px;
font-style:italic;
font-weight: bold;
margin: 0;
padding: 0;
border: 0;
outline: 0;
}
h3 {
font-size:28px;
font-style:italic;
font-weight: bold;
margin: 0;
padding: 0;
border: 0;
outline: 0;
}
p {
font-size:18px;
font-style:italic;
font-weight: bold;
margin: 0;
padding: 0;
border: 0;
outline: 0;
}
h5 {
font-size:20px;
font-style:italic;
font-weight: bold;
margin-top: 30px;
margin-bottom: 0px;
padding: 0;
border: 0;
outline: 0;
}
#mediaspace {
width:470px;
height:282px;
border:4px solid #DF3232;
float:left;
}
.band {
border:10px solid #000;
margin-top:10px;
width:1027px;
}
#outer{
width:900px;
text-align:left;
margin:20px 0 0 0;
}
.mixer{
float:left;
width:299px;
position:relative;
left:-1px;
}
.mixer p{margin:50px 0 0 200px;padding:5px;color:#fff;}
.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix {
display:inline-block;
}
/* mac hide \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide */
</style>
</head>
<body>
<h1>Mason Creek Studios</h1>
<h3>Current Mixes</h3>
<p>Note: Download Adobe Flash Player if you can't play these m4a files: <a href="http://get.adobe.com/flashplayer/" target="_blank">flashplayer download site</a></p>
<script type='text/javascript' src='swfobject.js'>
</script>
<div id="outer" class="clearfix">
<div id='mediaspace'>Note: Download Adobe Flash Player if you can't play these m4a files: http://get.adobe.com/flashplayer/ </div>
<script type='text/javascript'>
var so = new SWFObject('player-licensed.swf','mpl','470','282','9.0.124');
so.addParam('allowfullscreen','true');
so.addParam('allowscriptaccess','always');
so.addParam('wmode','opaque');
so.addVariable('file','playlist.xml');
so.addVariable('playlistsize','240');
so.addVariable('playlist','bottom');
so.addVariable('skin', 'metarby10.swf');
so.write('mediaspace');
</script>
<div class="mixer">
<p><strong><em>Mastering by Brian Lucey</em></strong><br>
<a href="http://www.magicgardenmastering.com/" target="_blank">Magic Garden Mastering</a></p>
</div>
</div>
<h5>Ellisville High School auditorium, 1963</h5>
<p class="band"><img src="High school band photo.jpg" height="549" width="1027" alt="High School Band"></p>
</body>
</html> |
|
sticks464

Joined: 31 Dec 2006 Posts: 2311
|
Posted: Thu Oct 08, 2009 4:41 am |
|
|
|
The simplest way to do this is not by changing widths but doing a little trickery on the right div. IE7 doesn't like this method so we add a conditional statement to get this culprit to comply.
| Code: |
#outer{
width:800px;
text-align:left;
margin:20px 0 0 0;
}
.mixer{
float:left;
width:299px;
height:282px;
position:relative;
text-align:right;
display:table;
}
.mixer p{
margin:0 0 0 20px;
color:#fff;
display:table-cell;
vertical-align:middle;
}
.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix {
display:inline-block;
}
/* mac hide \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide */
</style>
<!--[if lte IE 7]>
<style type="text/css">
.mixer{
float:left;
width:299px;
height:282px;
position:relative;
text-align:right;
}
.mixer p{
margin:120px 0 0 0;
color:#fff;
}
</style>
<![endif]-->
|
|
|
Mike H
Joined: 28 Sep 2009 Posts: 17
|
Posted: Thu Oct 08, 2009 6:14 am |
|
|
|
| sticks464 wrote: |
The simplest way to do this is not by changing widths but doing a little trickery on the right div. IE7 doesn't like this method so we add a conditional statement to get this culprit to comply.
|
Perfect.
Thanks!! |
|
|
|
You cannot post new topics in this forum You cannot reply to topics in this forum You cannot edit your posts in this forum You cannot delete your posts in this forum You cannot vote in polls in this forum
|
|
|
|
|