Solved

CSS Layout Help

Posted on 2014-12-22
7
250 Views
Last Modified: 2014-12-22
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

0
Comment
Question by:paddy086
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3
7 Comments
 
LVL 14

Assisted Solution

by:Edwin Hoffer
Edwin Hoffer earned 500 total points
ID: 40512592
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
 

Author Comment

by:paddy086
ID: 40512884
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
 
LVL 14

Expert Comment

by:Edwin Hoffer
ID: 40512887
Why don't you use margin for this? try to add
margin-top
0
Why Off-Site Backups Are The Only Way To Go

You are probably backing up your data—but how and where? Ransomware is on the rise and there are variants that specifically target backups. Read on to discover why off-site is the way to go.

 

Author Comment

by:paddy086
ID: 40512915
Hi Edwin

were do I add margin-top
0
 
LVL 14

Accepted Solution

by:
Edwin Hoffer earned 500 total points
ID: 40513138
Add it in <div id="content"> tag like below:

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

Adjust 100px as per your need
0
 

Author Closing Comment

by:paddy086
ID: 40513405
Thanks Edwin Hoffer that all works
0
 
LVL 14

Expert Comment

by:Edwin Hoffer
ID: 40514337
You are welcome
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
Find out what you should include to make the best professional email signature for your organization.
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

688 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question