CSS Layout Help

Hi I need help with 2 things on my css and html my logo at the top will not align in the middle

and second issue is my video height is not to the end of the page is there any way of fixing this

Thanks

HTML
<!DOCTYPE html>
<html>
<head>
<title>Tv Web</title>

<link rel="stylesheet" type="text/css" href="style.css" />

<script src="scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="scripts/jquery.cycle.all.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
	$('#myslides').cycle({
		fit: 0, pause: 2, speed: 'slow',
	});
});
</script>

</head>

<body bgcolor="#A9A9A9">
    <div id="wrapper">
        <div id="header">
            <img align="middle" name="Logo" src="Logo.jpg" width="50%" height="75px" alt="">
        </div>
        <div id="contentliquid"><div id="content">
           <video width="100%" max-width:500px; height="auto" controls autoplay loop> //EDIT: loop="true" is deprecated nowadays>

  <source src="Wheelchair Association.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>
       </div></div>
        <div id="leftcolumn">
            <?php
$directory = 'images/slideshow/'; 	
try {    	
	// Styling for images	
	echo "<div id=\"myslides\">";	
	foreach ( new DirectoryIterator($directory) as $item ) {			
		if ($item->isFile()) {
			$path = $directory . "/" . $item;	
			echo "<img src=\"" . $path . "\" />";	
		}
	}	
	echo "</div>";
}	
catch(Exception $e) {
	echo 'No images found for this slideshow.<br />';	
}
?>


        </div>
        <div id="footer">
        <p></p>
        <p></p>
        <p></p>
            <p>This is the Footer</p>
        </div>
    </div>
</body>
</html>

Open in new window


CSS
body {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 13px;
    color:#333
}

p {
    padding: 10px;
}

#wrapper {
    width: 100%;
	height: 100%;
    min-width: 1000px;
    max-width: 2000px;
    margin: 0 auto;
}

#header {
    float: middle;
    height: 75px;
    width: 100%;
    background: #A9A9A9;
}

#contentliquid {
    float: left;
    width: 100%;
	height: 100%;
}

#content {
    background: #A9A9A9;
    margin-left: 400px;
	height: 100%;
}

#leftcolumn {
    float: left;
    background: #A9A9A9;
    width: 400px;
    margin-left: -100%;
}
#footer {
    height: 100%;
    width: 100%;
    background: #A9A9A9;
    clear: both;
}

#myslides {
	height: 100%;
	width: 340px;		
    padding: 0;	
    margin:  0 auto;	
	margin-top: 20px;	
} 	
 
#myslides img {
    padding: 10px;	
    border:  1px solid rgb(100,100,100);
    background-color: rgb(230,230,230);
    width: 320px;
    top:  0;	
    left: 0	
}

Open in new window

paddy086Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Edwin HofferTechnical ExpertCommented:
Hello paddy086,

To make your logo in center replace:

 <img align="middle" name="Logo" src="Logo.jpg" width="50%" height="75px" alt="">

Open in new window


to:

<img style="margin-left:25%;" name="Logo" src="Logo.jpg" width="50%" height="75px" alt="">

Open in new window


And please explain about video issue, what changes you wants in it.

Thanks
Edwin
0
paddy086Author Commented:
Hi Edwin

Thanks for the help

The iframe is about 2 inches away from the footer i need or would like it to reach the footer. It could be keeping it all in scale  and that  why it dose not reach the footer but i am not sure

TV.png
0
Edwin HofferTechnical ExpertCommented:
Why don't you use margin for this? try to add
margin-top
0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

paddy086Author Commented:
Hi Edwin

were do I add margin-top
0
Edwin HofferTechnical ExpertCommented:
Add it in <div id="content"> tag like below:

<div id="content" style="margin-top:100px;">

Adjust 100px as per your need
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
paddy086Author Commented:
Thanks Edwin Hoffer that all works
0
Edwin HofferTechnical ExpertCommented:
You are welcome
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.