Trying to center link between block 3 and block 2 and make it at the top.
Also, the text is suppose to be white with a blue background.
Can not get it centered and inline with the top of the two block and the text is a purple color instead of white, it's like the blue is filtering the white text.
I stink at css and need some help please.
<!DOCTYPE html>
<html>
<head>
<title>Blocks</title>
<!-- Do not change this file - add your CSS styling
rules to the blocks.css file included below -->
<link type="text/css" rel="stylesheet" href="block2.css">
</head>
<body>
<div id="one">
Turns out you have a really fun time if you
go to work every day and focus on being
silly and funny and happy! - Hannah Murray
</div>
<div id="two">
All you need in this life is ignorance and confidence,
and then success is sure. - Mark Twain
</div>
<div id="three">
Well, if crime fighters fight crime and fire fighters
fight fire, what do freedom fighters fight? They never
mention that part to us, do they? - George Carlin
</div>
<div id="four">
Great minds discuss ideas; average minds discuss events;
small minds discuss people. - Eleanor Roosevelt
</div>
<p id="link">
<a href="https://www.brainyquote.com/" target="_blank">
Brainy Quote
</a>
</p>
</body>
</html>
body{
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
margin: 10em ;
border: 2px solid black ;
height: 25em;
}
#three {
display: inline-block;
left:1%;
width: 12em;
margin-top: .25em;
margin-left: .25em;
border: 7px solid orange;
}
#link {
display: inline-block;
text-align: center;
margin-left: auto;
margin-right: auto;
background-color: blue;
color: white;
width: 7em;
}
#two {
float: right;
right: 75%;
width: 12em;
margin-top: .25em;
margin-right: .25em;
border: 7px solid green;
}
#four {
position: absolute;
margin-top: 8.25em;
width: 12em;
margin-bottom: 12em;
margin-left: .25em;
border: 7px solid yellow;
}
#one {
position: absolute;
margin-top: 17em;
margin-right: 2em;
left: 70.50%;
width: 12em;
border: 7px solid blue;
}
Add color to a tag instead of #link
#three {
display: inline-block;
left:1%;
width: 12em;
margin-top: .25em;
margin-left: .25em;
border: 7px solid orange;
}
#link {
display: inline-block;
text-align: center;
margin-left: auto;
margin-right: auto;
background-color: blue;
width: 7em;
transform: translateX(50%);
vertical-align: top;
position: relative;
}
#link a{
color: white;
}
#two {
float: right;
right: 75%;
width: 12em;
margin-top: .25em;
margin-right: .25em;
border: 7px solid green;
}
#four {
position: absolute;
margin-top: 8.25em;
width: 12em;
margin-bottom: 12em;
margin-left: .25em;
border: 7px solid yellow;
}
#one {
position: absolute;
margin-top: 17em;
margin-right: 2em;
left: 70.50%;
width: 12em;
border: 7px solid blue;
}
<div id="one">
Turns out you have a really fun time if you
go to work every day and focus on being
silly and funny and happy! - Hannah Murray
</div>
<div id="two">
All you need in this life is ignorance and confidence,
and then success is sure. - Mark Twain
</div>
<div id="three">
Well, if crime fighters fight crime and fire fighters
fight fire, what do freedom fighters fight? They never
mention that part to us, do they? - George Carlin
</div>
<div id="four">
Great minds discuss ideas; average minds discuss events;
small minds discuss people. - Eleanor Roosevelt
</div>
<p id="link">
<a href="https://www.brainyquote.com/" target="_blank">
Brainy Quote
</a>
</p>
So in order to get your link to change colors, as Master.Deep has stated you need to add the a tag to #link like so:
#link a{
color: white;
}
There are many ways to center something and bring something to the top. I changed your code around a little bit in order to achieve this and to fix some position issues that you have. Pretty much what I did was wrap everything into a container, made that container have position: relative; then set your 4 boxes to their respective corners using position: absolute; on each of them and using the appropriate left right top bottom tags to do so. Then I placed your link to the top with vertical-align: top; and centered it with text-align: top; in the container.
Please see this example:
.container{
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
margin: 10em ;
border: 2px solid black ;
height: 25em;
position: relative;
text-align: center;
}
#three {
display: inline-block;
width: 12em;
border: 7px solid orange;
position: absolute;
top: 0;
left: 0;
margin: .25em;
}
#link {
display: inline-block;
background-color: blue;
color: white;
vertical-align: top;
width: 7em;
}
#link a {
color: white;
}
#two {
position: absolute;
right: 0;
top: 0;
width: 12em;
margin: .25em;
border: 7px solid green;
}
#four {
position: absolute;
width: 12em;
border: 7px solid yellow;
bottom: 0;
left: 0;
margin: .25em;
}
#one {
position: absolute;
bottom: 0;
right: 0;
width: 12em;
margin: .25em;
border: 7px solid blue;
}
<!DOCTYPE html>
<html>
<head>
<title>Blocks</title>
<!-- Do not change this file - add your CSS styling
rules to the blocks.css file included below -->
<link type="text/css" rel="stylesheet" href="block2.css">
</head>
<body>
<div class="container">
<div id="one">
Turns out you have a really fun time if you
go to work every day and focus on being
silly and funny and happy! - Hannah Murray
</div>
<div id="two">
All you need in this life is ignorance and confidence,
and then success is sure. - Mark Twain
</div>
<div id="three">
Well, if crime fighters fight crime and fire fighters
fight fire, what do freedom fighters fight? They never
mention that part to us, do they? - George Carlin
</div>
<div id="four">
Great minds discuss ideas; average minds discuss events;
small minds discuss people. - Eleanor Roosevelt
</div>
<p id="link">
<a href="https://www.brainyquote.com/" target="_blank">
Brainy Quote
</a>
</p>
</div>
</body>
</html>
Related
I'm trying to keep my footer down no matter the size of the page. But it gets thrown about when about div encroaches. I want it to display over the about content but for the about content to be scrollable it's too big to display.
Here's the code
fiddle
.footer {
background-color:#FFF;
width: 100%;
border-top: 1px solid #ccc;
padding-top: 1em;
height: 140px;
display: block;
.about {
font-family: HindMedium;
font-size: 13px;
min-width: 800px;
text-align: left;
width:100%;
min-height: 100%;
margin-bottom: -140px;
}
You need to clear the float. Add clear:both; to the .footer.
(function() {
var img = document.getElementById('container').firstChild;
img.onload = function() {
if (img.height > img.width) {
img.height = '100%';
img.width = 'auto';
}
};
}());
* {
margin: 0;
}
html,
body {
height: 100%;
}
.footer,
{
height: 140px;
display: block;
}
p {
font-family: HindRegular;
font-size: 13px;
font-weight: normal;
display: block;
margin-top: 1.5em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
}
.article {
float: left;
font-family: HindRegular;
width: 21%;
padding-right: 4%;
color: #999;
}
.article-right {
float: left;
font-family: HindRegular;
width: 21%;
padding-left: 4%;
color: #999;
}
.article-centre {
float: left;
font-family: HindRegular;
width: 21%;
padding-left: 2%;
padding-right: 2%;
color: #999;
}
.blurb {
font-family: HindMedium;
font-size: 24px;
padding-bottom: 100px;
color: #999;
}
.about {
font-family: HindMedium;
font-size: 13px;
min-width: 800px;
text-align: left;
width: 100%;
min-height: 100%;
/* equal to footer height */
margin-bottom: -140px;
}
.heading {
font-family: HindMedium;
font-size: 24px;
color: #666;
margin-top: 1em;
}
.copyright {
float: left;
}
.contact {
float: right;
font-family: HindRegular;
color: #999;
}
#container {
width: 100%;
}
#container img {
width: 100%;
}
h8 {
font-family: HindRegular;
color: #999;
padding-right: 5px;
font-style: normal;
}
.footer {
clear: both;
background-color: #FFF;
height: 120px;
width: 100%;
border-top: 1px solid #ccc;
padding-top: 1em;
}
a {
border-bottom: 1px solid #219edf;
padding: 0;
margin: 0 0 2px 0;
clear: both;
color: #666;
text-decoration: none;
font-weight: normal;
outline: none;
transition: all .15s ease;
}
.services {
width: 100%;
}
a:hover {
text-decoration: none;
color: #999;
border-bottom: 1px solid #999;
}
#details {
color: #666
}
#header {
color: #999;
}
<div class="about">
<div class="blurb">Stunning Imagery and resourceful imaging
</div>
<div class="article">
<div id="container">
<img src="http://www.nathanielmcmahon.com/assets/images/about_page/OMA%20cctv%20building_.jpg" alt="CCTV building in Beijing By Rem Koolhaas's OMA" />
</div>
<div class="heading">Architectural Photography
</div>
<p>Since 2011 Nathaniel has been scaling China's highs and lows documenting it's varied architectural manifestations for a range of western and Local clients. Often a lone cameraman amongst a sea of Chinese hard hats, part of the job has been to negotiate
sites with little more than a grid reference and reference pictures in inhospitable new cities on the fringes of boom or bust development. Scrambling his way up a half finished sky scrapper fire escapes with little more than a telephone number and
the name of a contractor called Zhou. In the summer of 2017 he relocated to London. He looks forward to shooting a very different type of architecture back home.
</p>
</div>
<div class="article">
<div id="container">
<img src="http://www.nathanielmcmahon.com/assets/images/about_page/Aerial_drone_photography-.jpg" alt="Aerial Photography with UAV drone" />
</div>
<div class="heading"> Aerial Services
</div>
<p>Large range of services utilizing our fleet of custom built UAS (Unmanned Aerial Systems - AKA drones)</p>
<p>Registered CAA pilot with commercial flight permissons</p>
<p>Up to High resolution stills at 42mp and rich 4k full frame video</p>
<p>Photogrametry - Developing accurately positioned 3D site models up to a 10cm level accuracy</p>
<p>Agronomy - Crop analysis, multispectral imaging</p>
<p> </p>
</div>
<div class="article-centre">
<div id="container">
<img src="http://www.nathanielmcmahon.com/assets/images/about_page/blank.jpg" alt="Verified View image of existing site with proposed building outline." />
</div>
<div class="heading">Verified Views
</div>
<p>We provide AVR's (Accurate Visual Representations) aka verified views to back up your project proposals with accurate siting in the current landscape.</p>
<p>We don't outsource the photography or site survey whole process is in house</p>
<p>Levels of representation from AVR0 - outlining of proposed project to AVR3 - description of architectural form and materials.</p>
</div>
<div class="article-right">
<div id="container">
<img src="http://www.nathanielmcmahon.com/assets/images/about_page/Rhizome_logo_square.jpg" alt="Architectural Services by Rhizome" />
</div>
<div class="heading">Rhizome
</div>
<P>Company started in London 2017 to explore and provide bespoke services to small and mid sized architectural firms and developers utilsing emerging technologies in architectural and related fields.</P>
<P>Comming Soon</P>
</div>
<br style="clear: left;" />
</div>
<footer class="footer">
<div class="article"><span id="header">Contact Details</span>
</div>
<div class="article">
<span id="header">Address</span>
<br /><span id="details">Nathaniel McMahon Photography<br />
Maynards Farmhouse<br />
A21, Lamberhurst QTR<br />
Kent<br />
TN3 8AL</span>
</div>
<div class="article-centre">
<span id="header">Mobile</span> <span>+44 (0)7377673765
</span><br/>
<span id="header">Email </span>
nathaniel.mcmahon#gmail.com
</div>
<div class="article-right"> Website and all images <br /><span id="details">© 2017 Nathaniel McMahon Photography</span>
</div>
</footer>
Remove these from your .about class. You should practice some with margin. It doesn't work the way you're trying to use it.
min-height: 100%;
margin-bottom: -140px;
Add clear:both; to your footer declaration.
Also change your body style from height to min-height, so that your body can be larger than the browser.
You can use overflow: hidden on .about and .footer so the floats will stay contained within those containers. You don't need the negative margin on the .about. If you are trying to make the footer stay at the bottom of the page even when the content is very little, you could try positioning the footer absolutely. Here's an example below. You'll need to wrap everything in .wrapper or whatever name you want to use.
.wrapper { min-height: 100%; position: relative; }
.article { overflow: hidden; }
.footer { overflow: hidden; position: absolute; bottom: 0; }
With less content, footer is at the bottom:
https://jsfiddle.net/suefeng/u4coohpp/1/
With more content, footer is still at the bottom:
https://jsfiddle.net/suefeng/u4coohpp/3/
If you want elements to stick out of the .article and .footer containers, or just another option, here's an alternative solution to clearing floats:
You could remove floats on your article and footer containers, but use display: inline-block; with vertical-align: top; instead. You'll need * { box-sizing: border-box; } or change your padding into margin.
https://jsfiddle.net/suefeng/u4coohpp/4/
Also added this to the footer so the email address wouldn't run into the next column:
.footer a[href*="mailto"] {
word-break: break-all;
}
Here's an example of having a fixed footer:
https://jsfiddle.net/suefeng/gv7Lg3e0/1/
.footer {
position: fixed;
bottom: 0;
}
If you are simply trying to pin an element to stay at the bottom of the page and have content scroll under it. You should use position:fixed.
If you update your footer content like so:
.footer {
background-color: #FFF;
border-top: 1px solid #ccc;
padding-top: 1em;
height: 140px;
display: block;
overflow: hidden;
position: fixed;
left:0;
right:0;
bottom:0;
clear:both;
}
The footer will pin to the bottom. You will also need a spacer after your footer to ensure your scroll bar is sufficient to scroll all content into view.
HTML:
<div class='footer-spacer'></div>
CSS:
.footer-spacer {
height: 160px;
}
Remove these from your .about class. Negative margins will cause odd behavior when it moves an element off page.
min-height: 100%;
margin-bottom: -140px;
I am trying to place some text underneath a picture with a variable height (absolute positioned) I tried setting it to 'relative' but then it won't have the effect of the variable height which I really want for my site.
CSS
header{
background-color: #f49b42;
}
body{
font-family: Lora;
margin: 0;
padding: 0;
}
img{
width: 100%;
height: auto;
clip: rect(0px,10000px,400px,0px);
position: absolute;
}
h1{
font-family: Pacifico;
margin: 0 20px;
}
p#feelgood{
position: absolute;
color: wheat;
margin: 80px 0;
text-align: center;
width: 100%;
text-shadow: 0px 1px #4c2816;
}
p{
margin: 20px;
text-align: justify;
}
span{
font-family: Pacifico;
}
<body>
<header>
<h1> Music </h1>
<img src="https://images.pexels.com/photos/542515/pexels-photo-542515.jpeg?w=940&h=650&auto=compress&cs=tinysrgb">
<p id="feelgood"> makes me feel good</p>
</header>
<div class="music-quotes">
<p> One good thing about music, when it hits you, you feel no pain.<br>
<span>Bob Marley</span> </p>
<p> If music be the food of love, play on. <br><span>William Shakespeare</span></p>
<p> Where words fail, music speaks. <br><span>Hans Christian Andersen</span></p>
<p> Music is the movement of sound to reach the soul for the education of its virtue. <br><span>Plato</span>
</p>
<p>Music can change the world because it can change people. <br><span>Bono</span></p>
</div>
</body>
here is my jsfiddle (you might not see the effect of the difference of absolute positioning to relative because you can't get it wide enough)
https://jsfiddle.net/goblincake/htgq07pb/
I think this is what you were going for...
https://jsfiddle.net/htgq07pb/5/
header{
background-color: #f49b42;
}
body{
font-family: Lora;
margin: 0;
padding: 0;
}
img{
width: 100%;
height: auto;
clip: rect(0px,10000px,400px,0px);
position: relative;
}
h1{
font-family: Pacifico;
margin: 0 20px;
}
p#feelgood {
position: absolute;
display: inline-block;
color: wheat;
margin: -40% 0;
text-align: center;
width: 100%;
text-shadow: 0px 1px #4c2816;
}
p{
margin: 20px;
text-align: justify;
}
span{
font-family: Pacifico;
}
<body>
<header>
<h1> Music </h1>
<img src="https://images.pexels.com/photos/542515/pexels-photo-542515.jpeg?w=940&h=650&auto=compress&cs=tinysrgb">
<p id="feelgood"> makes me feel good</p>
</header>
<p> One good thing about music, when it hits you, you feel no pain.<br>
<span>Bob Marley</span></p>
<p> If music be the food of love, play on. <br><span>William Shakespeare</span></p>
<p> Where words fail, music speaks. <br><span>Hans Christian Andersen</span></p>
<p> Music is the movement of sound to reach the soul for the education of its virtue. <br><span>Plato</span>
</p>
<p>Music can change the world because it can change people. <br><span>Bono</span></p>
</body>
I'm not the best at CSS and cannot figure out what's wrong. Think it might be the tags I'm using in my sidebar. I would like the nav element with the "vert" id and the div element with the "text-container" id to be NEXT to each other, but the way it is going, it's sending my stuff in the "text-container" into the footer, which is unacceptable.
I'm baffled as to how to get them next to each other. I know elements can be next to each other as it worked in my nav element with the "hor" id with all the a elements next to each other with no problem.
I think it might be the tags, but don't know what I can do about it. I could just axe the navbar as I already have that in the header, but I just spent a lot of time on the navbar to now have to kill it and wish I could keep it.
<html>
<head>
<title> The Resorts </title>
<link rel="stylesheet" type="text/css" href="./main.css">
</head>
<body>
<style>
h1
{
font-family: "MV Boli", Times, Serif;
font-style: bold;
text-align: center;
font-size: 40px;
}
h2
{
font-family: "MV Boli", Times, Serif;
font-style: bold;
text-align: center;
font-size: 26px;
}
#text-container
{
width: 1045px;
height: 690px; */
zoom: 1;
margin: 0;
display: inline-block
}
#text-container:after
{
clear: both;
content: ".";
display: block;
height: 0;
visibility:hidden;
}
#text-container > p
{
font-family: "Myriad Web Pro", Times, Serif;
font-size: 18px;
}
</style>
<div id="content">
<div id="logo">
<img src="./logo.png"></img>
</div>
<div id="container">
<nav id="hor">
<div> Home </div>
<div> The Mountains </div>
<div> The Resorts </div>
<div> Snow Reports </div>
<div> Events & Activities </div>
<div> Plan A Trip </div>
</nav>
<div id="middle">
<nav id="vert">
Home <br/>
The Mountains <br/>
The Resorts <br/>
Snow Reports <br/>
Events & Activities <br/>
Plan A Trip
</nav>
<div id="text-container">
<h1> The Resorts </h1>
<h2> The West Resort </h2>
<p>
The West Resort has everything from wide-open beginner areas to challenging terrain parks to gladed tree skiing hideaways. It has a young, energetic feel, but there's more to it than just jumps and jibs. West is
home to the Children's Sports Center, the Bullwheel Bar and Grill and the Foggy Goggle where fashion shows, movie premieres and live performances are held on a regular basis.
</p>
<h2> The East Resort </h2>
<p>
The East Resort boasts the longest trails in the region serviced by a single high-speed quad. Its long, groomed, cruising trails make it perfect for carving, but it is also home to the Olympic Bowl, the longest,
steepest bump run in the region. After a quick ascent on the Diamond Peaks Express, you'll find an additional 20 acres of beginner terrain up top. With 1,600 vertical feet of uninterrupted corduroy, the East
Resort offers traditional skiers and snowboarders a true alpine experience without having to journey far from home.
</p>
<h2> The North Resort </h2>
<p>
The North Resort is the perfect family-friendly ski resort with 70 acres of gently rolling terrain and historic, log cabins that are terrific for exploring. It is big enough to offer a true winter experience but small
enough to maintain its historical warmth and charm. Spend the afternoon shushing down the slopes or warm up by the fireplace with a cup of hot chocolate at the North Lodge. It is one of the region’s oldest
base lodges with ties that go back to the Big Pines ski clubs of the 1940s.
</p>
</div>
</div>
</div>
<div id="footercontainer">
<footer>
© 2016
</footer>
</div>
</div>
</body>
</html>
==main.css==
#logo
{
border: 1px dashed purple;
width: 1050;
height: 75;
}
#logo > img
{
width: 1050;
height: 75;
}
#content
{
border-left: 3px solid #283379;
border-right: 3px solid #283379;
text-align: left;
margin: 0 auto;
width: 960px;
background-color: #ffffff;
background-repeat: repeat-y;
height: 500;
}
nav
{
border: 10px solid transparent;
padding: 15px;
border-image-source: url(./blue-diamond.gif);
border-image-repeat:repeat;
border-image-slice: 30;
background-color: 2211ff;
font-family: "Impact", Times, serif;
font-size: 170%;
}
nav#vert
{
width: 220;;
height: 540;
margin: 0;
}
body {
color: #000000;
margin: 0;
padding: 0;
font-family: Helvetica, Arial, sans-serif;
font-size: 16px;
background-color: #422520;
background-image: url(./image8.jpg);
background-repeat:no-repeat;
background-size:cover;
text-align: center;
background-attachment: fixed;
background-position: center;
}
#footerContainer
{
border-left: 3px solid #283379;
border-right: 3px solid #283379;
text-align: left;
margin: 0 auto;
width: 980px;
background-color: #ffffff;
background-repeat: repeat-y;
}
footer
{
border: 10px solid transparent;
padding: 15px;
text-align: left;
margin: 0 auto;
width: 1000px;
background-repeat: repeat-y;
border-image-source: url(./blue-diamond.gif);
border-image-repeat:repeat;
border-image-slice: 30;
background-color: 2211ff;
font-family: "Impact", Times, serif;
font-size: 170%;
}
#container
{
border-left: 3px solid #283379;
border-right: 3px solid #283379;
text-align: left;
margin: 0 auto;
width: 1045px;
background-color: #ffffff;
background-repeat: repeat-y;
height: 690px;
}
nav > a
{
color: #ccccff;
}
nav#hor > div
{
border: 1px solid white;
float: left;
padding: 10px;
}
nav#hor
{
width: 1000px;
height: 50px;
margin: 0;
}
nav#hor > div > a
{
color: #ccccff;
}
nav#hor>div:hover
{
background-color: #01ff02;
}
Here you go...
https://jsfiddle.net/og9wpLmw/
I coloured the two blocks green and red to make them obvious
I fixed & amp; by putting ; on the ends
I fixed by making it
I made boxes next to each other using display:table-cell;
I put all the CSS into the css file
I fixed the widths in nav#vert by including px in the measurement.
Here is the css that makes the difference:
#text-container {
width: 1045px;
height: 690px;
*/ zoom: 1;
margin: 0;
display: table-cell;
background-color:red;
}
nav#vert {
background-color:green;
width: 220px;
height: 540px;
margin: 0px;
display:table-cell;
}
it might be because your "vert" and/or your "text-container" have too big of widths.
You have a fixed width nav - the width is set to 220px, but then you've got padding / margin etc. so it ends up being 270px wide (nb. If you're not familiar, right click on an element in a modern web browser and select "inspect" you can easily measure elements and check out their properties in CSS).
So to fit your other text-container to the right of it you need to reduce it's width to allow for the width of your nav. This can be achieved easily by using calc
width: calc(100% - 270px);
Add that CSS to your text-container (and remove other width declarations) and it'll work. It's not best practice, but you can enforce this declaration to take precedence by adding !important giving you:
#text-container {
width: calc(100% - 270px) !important;
}
You just need to add that in, or amend your existing CSS and you're good to go.
That works, but the problem I noticed later down the line is that if I have an iframe as the first element in "text-container" and don't have something before that iframe, then the nav bar is messed up again.
Is there another display thing I could use?
Every time I include the code for the facebook friends like box the div element box below it goes wacky. I cannot control where its positioned. It either disappears or overlaps a different div. Originally I just wanted specials, events, then fbFriends in a row then the box div below the three divs. I have been trying to wrap the divs to control everything better but am still unsuccessful. Any help would be appreciated
specials events fbFriends
box -------------------box
<div id="specialsWrapper">
<div id="specials" ><p>Featured Specials</p></div>
<div id="events" ><p>What's happening at the hub</p></div>
<div id="fbFriends">
<div class="fb-like-box"
data-href="https://www.facebook.com/pages/********"
data-height="395" data-width="250" data-show-faces="true"
data-colorscheme="dark" data-stream="false" data-header="true" />
</div>
</div>
</div>
<div id="box" ></div>
#specialsWrapper
{
height: 450px;
width: 920px;
color: white;
}
#specials {
float: left;
border:2px dashed white;
height:390px;
width: 270px;
color: white;
margin: 25px 10px 0px 48px;
}
#specials p {
margin: 0px;
padding: 15px;
text-transform:uppercase;
font-size: 24px;
font-style: oblique;
}
#events {
float: left;
border:2px dashed white;
height:390px;
width: 270px;
color: white;
margin: 25px 15px 15px 15px;
}
#events p {
margin: 0px;
padding: 15px;
text-transform:uppercase;
font-size: 24px;
font-style: oblique;
}
#fbFriends {
float: left;
margin: 25px 15px 15px 15px;
width: 250px;
height:390px;
}
#box
{
clear: left;
border: 2px dashed white;
height: 60px;
width: 853px;
color: white;
margin: 25px 15px 15px 48px;
}
Here's anwser for your question
EXAMPLE ON CODEPEN
Your build of these box's is weird thats why I had to use top: 40px; with position: relative;
btw. that's how you do on jsfiddle or codepen exampl, thats all community ask. Spend 5 min for your question isnt much to ask?
hope thats help.
EDIT:
I found what what the issue, you didnt closed specialsWrapper div thats why margin dint work.
I also cancel margin-botton from boxes inside specialWrapper and put overflow: auto to specialWrapper to countheight.
Now top: no need to be writen.
I think what you might want it display: inline-block; but without something to see I can't really know what's going on. And your description isn't enough. Could you post what's going on on js.fiddle.net or give us an example site?
Continuing my last question on this thread (Play button centred with different image/video sizes), I will open this one regarding to #Marc Audet request.
Basically I had this code:
.playBT{
width: 50px;
height: 50px;
position: absolute;
z-index: 999;
top: 25%;
left: 25%;
margin-left: -25px;
margin-top: -25px;
}
However I can't use the example given by Marc on the last thread, because the play button doesn't work as expected when the video size changes...
Here is the code
You need to tweak your HTML a bit, here is one way of doing it:
<div id="video-panel">
<div id="video-container" class="video-js-box">
<div id="play" class="playBT"><img class="imgBT" src="http://2.bp.blogspot.com/-RnPjQOr3PSw/Teflrf1dTaI/AAAAAAAAAbc/zQbRMLQmUAY/s1600/player_play.png" /></div>
<video id="video1">
<source src="http://video-js.zencoder.com/oceans-clip.mp4"/>
</video>
</div>
<div id="video-controls">
<div id="footerplay"><img src="http://www.cssaddons.com/uploads/goruntulenme/jQueryPausePlay/images/play.png" /></div>
<div id="footerpause"><img src="http://www.cssaddons.com/uploads/goruntulenme/jQueryPausePlay/images/pause.png" /></div>
<div id="progressbar">
<div id="chart"></div>
<div id="seeker"></div>
</div>
</div>
</div>
and the CSS is as follows:
#video-panel {
border: 4px solid blue;
padding: 4px 50px;
}
.video-js-box {
width: auto;
height: auto;
outline: 1px dotted blue;
position: relative;
display: block;
}
video {
outline: 1px dotted blue;
margin: 0 auto;
display: block;
}
#play {
position:absolute;
top: 50%;
left: 50%;
outline: 1px dotted red;
}
.imgBT{
width:50px;
height:50px;
vertical-align: bottom;
margin-left: -25px;
margin-top: -25px;
}
#video-controls {
outline: 1px solid red;
overflow: auto;
}
#footerplay {
float: left;
margin-left: 27px;
}
#footerpause {
float: left;
margin-left: 27px;
}
#progressbar {
float: left;
outline: 1px dotted black;
display: inline-block;
width: 200px;
height: 27px;
margin-left: 27px;
}
#footerplay img, #footerpause img{
height:27px;
}
Fiddle Reference: http://jsfiddle.net/audetwebdesign/EnDHw/
Explanation & Details
User a wrapper div to keep everything tidy, video-panel, and use a separate div for the video video-container and for the controls video-controls.
The play button and the <video> element are positioned with respect to the video-container and note the negative margin trick to position the arrow button image.
The control elements can be positioned in their own div video-controls. I simply floated them to the left with a 27px left margin.
This should help you get started. The outlines and borders are for illustration only and are optional.
Good luck!