Solved

CSS Layout Help

Posted on 2014-12-22
7
231 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
  • 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
Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

 

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

Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

Question has a verified solution.

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

Suggested Solutions

This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
Find out what you should include to make the best professional email signature for your organization.
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

776 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