Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

CSS Layout Help

Posted on 2014-12-22
7
Medium Priority
?
269 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 15

Assisted Solution

by:Edwin Hoffer
Edwin Hoffer earned 2000 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 15

Expert Comment

by:Edwin Hoffer
ID: 40512887
Why don't you use margin for this? try to add
margin-top
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:paddy086
ID: 40512915
Hi Edwin

were do I add margin-top
0
 
LVL 15

Accepted Solution

by:
Edwin Hoffer earned 2000 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 15

Expert Comment

by:Edwin Hoffer
ID: 40514337
You are welcome
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

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

This article discusses four methods for overlaying images in a container on a web page
Find out what you should include to make the best professional email signature for your organization.
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
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…
Suggested Courses

618 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