Apologies for the probably simple question but I am pulling my hair out at the moment with php and have lost my css capability!
All I want to do is to centre the ul #tablist on any size screen - at the moment I am specifying the margin in the css I have tried auto but is not working.
Any help appreciated, thanks
CSS:
HTML Page:
All I want to do is to centre the ul #tablist on any size screen - at the moment I am specifying the margin in the css I have tried auto but is not working.
Any help appreciated, thanks
CSS:
Code:
#main {
width:1000px;
margin: 10px auto;
text-align: center;
}
#header {
height: 160px;
width: auto;
}
#content {
width: 1000px; /*760px;*/
padding: 10px;
}
#tablist{
padding: 0;
margin: 10px 85px; /*112px;*/
float: left;
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
border-top-style: solid;
border-right-style: none;
border-bottom-style: solid;
border-left-style: none;
border-top-color: #ffff00;
border-bottom-color: #ffff00;
}
#tablist li{
padding: 10px;
font-size: 24px;
list-style: none;
display: inline;
}
#tablist li a{
text-decoration: none;
color: #ffff00;
}
#tablist li a:hover{
background: #ffff00;
color: #000000;
}HTML Page:
Code:
<body>
<div id="main">
<div id="header">
<img src="images/theunit46logo.jpg" alt="The Unit 46" align="left" />
<img src="images/addyandtell.jpg" alt="Address" align="right" />
</div>
<ul id="tablist">
<li><a href="index.php?id=main">Home</a></li>
<li><a href="index.php?id=about">About</a></li>
<li><a href="index.php?id=where">Where</a></li>
<li><a href="index.php?id=gallery">Gallery</a></li>
<li><a href="index.php?id=guestbook">Guest Book</a></li>
<li><a href="index.php?id=videos">Videos</a></li>
<li><a href="index.php?id=contact">Contact Us</a></li>
</ul>
<div id="content">
</div>
</div>
</body>