?
Solved

CSS Layout Help

Posted on 2014-12-22
7
Medium Priority
?
260 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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 

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

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering 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

The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

777 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