...

View Full Version : Banner Links not floating and non fluid image.



far2many
02-13-2011, 04:55 PM
Hello,

Sorry to bother you on a sunday however im at that crucial hit your screen phase lol. Anyway...

I cannot get the banner links to float alongside each other you will see what i mean when you open site.

Secondly i have jquery cycle it wont resize automatically when i drang the screen smaller or larger - only when its refreshed.

Any help with either of these would be greatly appreciated.

Enjoy your sunday dinner :)

site www.bushcottages.co.uk/purecss.htm


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">




<html>
<head>

<meta http-equiv="Content-Language" content="en-gb">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">

<title>Excelsior Academy Microsite</title>

<meta name="description" content="Welcome to the Excelsior Academy Newcastle Microsite. This is a Site in development and there is no content currently hosted.">
<meta name="keywords" content="Excelsior, Academy, Newcastle, School, UK, Denton, Scotswood">
<meta name="author" content="Peter Devlin">

<script type="text/javascript" src="jquery-1.3.js"></script>
<script type="text/javascript" src="jquery.cycle.all.js"></script>

<script type="text/javascript">
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
});
});
</script>

<style type="text/css">

#logos
{
width: 90%;
height: 70px;
background-color: #ffffff;
margin-bottom: 15px;
margin-left: 5%;
background-image: url('logo.jpg');
background-position: left top;
background-repeat: no-repeat;
}

#banner
{
float: left;
width: 90%;
background-color: #000066;
margin-bottom: 2px;
margin-left: 5%;
}

#menu
{
float: left;
width: 90%;
background: #000066;
margin-bottom: 2px;
margin-left: 5%;
font-size: 1em;
text-align: center;
white-space: nowrap;
}

#sidebar
{
float: left;
width: 20%;
height: 200px;
display: inline;
background-color: #013999;
margin-bottom: 2px;
margin-left: 5%;
}

#main
{
float: left;
width : 70%;
height: 200px;
background-color: #000066;
margin-left: 0px;
margin-bottom: 2px;
}

#footer
{
width: 90%;
height: 120px;
background: #000066 url(banner.jpg) no-repeat top left;
clear: both;
margin-left: 5%;
font-size: 0.8em;
font-weight: bold;
float: left;
}

#footerlt
{
float: left;
width: 18%;
}

#footerltmid
{
float: left;
width: 18%;

}

#footercenter
{
float: left;
width: 18%;
}

#footerrtmid
{
float: left;
width: 18%;
}

#footerrt
{
float: left;
width: 18%;
}

#footer ul
{
float: left;
display: inline;
width: 18%;
margin-left: 3%;
margin-top: 2%;
padding: 0px;
white-space: nowrap;
}

#footer ul li
{
list-style-image: url('bullet.png');
margin: 0px;
padding: 2px, 15px;
}

#footer a
{
padding: 0px 10px;
text-decoration: none;
color: white;
border: 0px solid #000066;
}

footer a:hover
{
border: 0px solid #d8d8d8;
color: black;
}

#menu ul {
list-style: none;
margin: 0px;
padding: 0px;
display: block;
text-align: center;
white-space: nowrap;
}

#menu li {
display: inline;
padding: 0px 0px;
text-align: center;
margin: 0px 0px 0px 0px;
list-style: none;
border: 0px solid #c8c8c8;
}

#menu a {
padding: 0% 2%;
text-decoration: none;
color: white;
border: 0px solid #000066;
}

#menu a:hover {
background-color: white;
border: 0px solid #d8d8d8;
color: black;
}

/*#bannerimage
{
width: 100%;
}*/

/*imgmenu
{
width: 100%;
left: 0;
z-index:-1
}*/

body
{
background-color: #FFFFFF;
font-family: "Calibri", Lucida Grande, Verdana, Arial, Sans-Serif;
font-size: 1em;
margin: 0px;
padding: 2px;
color: black;
}

p
{
text-align: right;
}

p.text1
{
font-family: "Calibri", Lucida Grande, Verdana, Arial, Sans-Serif;
text-align: left;
margin-left: 20px;
margin-right: 20px;
margin-top: 20px;
font-size: .875em;
color: white;
}

</style>

</head>

<body>
<div id="logos">
<p>News and Events&nbsp; |&nbsp; Directions&nbsp; |&nbsp; Contact Us</p>
</div>

<div id="menu">
<li><a href="url">Home</a></li>
<li><a href="url">VLE</a></li>
<li><a href="url">Videos</a></li>
<li><a href="url">Email</a></li>
<li><a href="url">VPN</a></li>
<li><a href="url">Podcast</a></li>
<li><a href="url">Forum</a></li>
<li><a href="url">Schools</a></li>
<li><a href="url">Contact</a></li>
</ul>
</div>

<div id="banner">
<div class="slideshow">
<img src="rotate5.jpg" alt="Views of Excelsior Academy" width="100%" align="left" height="190" />
<img src="rotate4.jpg" alt="Views of Excelsior Academy" width="100%" align="left" height="190" />
<img src="rotate3.jpg" alt="Views of Excelsior Academy" width="100%" align="left" height="190" />
<img src="rotate2.jpg" alt="Views of Excelsior Academy" width="100%" align="left" height="190" />
<img src="rotate.jpg" alt="Views of Excelsior Academy" width="100%" align="left" height="190" />
</div>
</div>

<div id="sidebar">
</div>

<div id="main">
<p class="text1">This is a first test for both text and margins. If this works the text will be white and aligned to the left. It will also have a 10px margin</p>
</div>

<div id="footer">
<ul id="footerlt">
<li><a href="url">Principal's Message</a></li>
<li><a href="url">Hadrian School</a></li>
<li><a href="url">Armstrong School</a></li>
<li><a href="url">Milburn School</a></li>
<li><a href="url">Jefferson School</a></li>
<li><a href="url">6th Form College</a></li>
</ul>
</div>

<div id="footer">
<ul id="footerltmid">
<li><a href="url">Inspection Report</a></li>
<li><a href="url">School Uniform</a></li>
<li><a href="url">Location</a></li>
<li><a href="url">Term Dates</a></li>
<li><a href="url">Contact</a></li>
<li><a href="url">Where to find us</a></li>
</ul>
</div>

<div id="footer">
<ul id="footercenter">
<li><a href="url">Key Staff</a></li>
<li><a href="url">Governors</a></li>
<li><a href="url">Specialisms</a></li>
<li><a href="url">Recruitment</a></li>
<li><a href="url">Prospectus</a></li>
<li><a href="url">Disclaimer</a></li>
</ul>
</div>

<div id="footer">
<ul id="footerrtmid">
<li><a href="url">Privacy Policy</a></li>
<li><a href="url">Legal Information</a></li>
<li><a href="url">Site Map</a></li>
<li><a href="url">Latest News</a></li>
<li><a href="url">Documents</a></li>
<li><a href="url">Weather & Transport</a></li>
</ul>
</div>

<div id="footer">
<ul id="footerrt">
<li><a href="url">Excelsior Academy</a></li>
<li><a href="url">Denton Road</a></li>
<li><a href="url">Newcastle</a></li>
<li><a href="url">Tyne and Wear</a></li>
<li><a href="url">NE15 6AF</a></li>
<li><a href="url">Tel: 0191 2280000</a></li>
</ul>
</div>
</div>

</body>
</html>

abduraooft
02-13-2011, 05:39 PM
Fix the errors in your markup first, see http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.bushcottages.co.uk%2Fpurecss.htm

Excavator
02-13-2011, 05:46 PM
Good Morning far2many,
Do you mean for the 5 ul's in the footer to float beside each other?
If so, you need only one #footer for that.

If there is something about your design that needs 5 footer elements, you can do that too. They cannot be the id footer though, would have to be a class since you can use an id only once.

When you post a link there is no need to post the code also. When posting code in the forum, please use the code tags, &#91;code&#93;&#91;/code&#93; - available with the # button in the post edit window.
This will wrap your code in a scroll box which greatly helps the readability of your post.

far2many
02-13-2011, 05:58 PM
Thanks for looking ive almost got it but cant ge the bullet image to distance from the text etc.

Any help or advice woud be great.

Excavator
02-13-2011, 06:27 PM
Thanks for looking ive almost got it but cant ge the bullet image to distance from the text etc.

Any help or advice woud be great.

ul li {padding: 0 0 0 10px;} would move the text 10px from the bullet.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum