I need to center the contents of a DIV, specifically the position of where the 'script' is displayed.
<div id="header">
<script type='text/javascript' src='components/inc/javasc
ript/quick
menu.js'><
/script>
</div>
However when I use
<div id="header" style="margin:0px auto;text-align:center;wid
th:50%;">
<script type='text/javascript' src='components/inc/javasc
ript/quick
menu.js'><
/script>
</div>
The contents of the script (a menu in this case) are centered as well.
So, in the first example the menu appears all th way to the left of the screen, but the menu and sub menu items are left justified.
In the second option the menu is centered based on the screen width but the menu items and sub menu items are centered - annoying.
How can I center the position of the script but not affect what the script displays?
Just for completeness:
#header {
clear:both;
float:left;
width:100%;
}
#header {
border-bottom:1px solid #000;
}
#header p,
#header h1,
#header h2 {
padding:.4em 15px 0 15px;
margin:0;
}
#header ul {
clear:left;
float:left;
width:100%;
list-style:none;
margin:10px 0 0 0;
padding:0;
}
#header ul li {
display:inline;
list-style:none;
margin:0;
padding:0;
}
#header ul li a {
display:block;
float:left;
margin:0 0 0 1px;
padding:3px 10px;
text-align:center;
background:#eee;
color:#000;
text-decoration:none;
position:relative;
left:15px;
line-height:1.3em;
}
#header ul li a:hover {
background:#369;
color:#fff;
}
#header ul li a.active,
#header ul li a.active:hover {
color:#fff;
background:#000;
font-weight:bold;
}
#header ul li a span {
display:block;
}
If you need the entire CSS file I will upload it.
THANKS
Start Free Trial