I know this is a silly question but I can't seem to fix it.
In my index page, I called the header.php and below that I put an Iframe
<body>
<?php include 'header.html' ?>
<div class="clear"></div>
<iframe class="fr" width="100%" height="100%" align="center" marginheight="0" align="top" src="aboutus1.php" frameborder=0 scrolling="no" border="0" framespacing="0" id="bodyframeid" name="bodyframename" onLoad="autoResize('bodyframeid');" ></iframe>
</body>
The problem is, the iframe is aligning with the header at the very top of the page.. I tried padding-top to the iframe, so the iframe moved below the header but when zoomed out it shows whitespace in between.
I'd like to make my page like this:
+------------------------------+
| Header |
+------------------------------+
| Iframe |
| (contents of Iframe) |
+------------------------------+
Header.html
<div class="centered">
<table id="tbheader">
<tr height="100px">
<td id="tdlogonavleft"><img src="images/cti-logo.png" alt="logo" /></td>
<td id="tdlogonavright"><!--img src="images/menu.jpg" /-->
<div class="menu">
<ul id="navbar">
<li><img id="active-home" onmouseover="this.src='images/hover-home.jpg'" onmouseout="this.src='images/home.jpg'" src="images/home.jpg" /></li>
<li><img id="active-aboutus" onmouseover="this.src='images/hover-aboutus.jpg'" onmouseout="this.src='images/aboutus.jpg'" src="images/aboutus.jpg" />
<ul>
<li class="x" style="left:-20px;">ABOUT CTI</li>
<li class="x" style="left:-20px;">OUR CLIENTS</li>
<li style="left:-20px;">MISSION / VISION </li>
</ul>
</li>
<li><img id="active-partners" onmouseover="this.src='images/hover-partners.jpg'" onmouseout="this.src='images/partners.jpg'" src="images/partners.jpg" /></li>
<li><img id="active-products" onmouseover="this.src='images/hover-products.jpg'" onmouseout="this.src='images/products.jpg'" src="images/products.jpg" /> </li>
<li><img id="active-contactus" onmouseover="this.src='images/hover-contactus.jpg'" onmouseout="this.src='images/contactus.jpg'" src="images/contactus.jpg" /></li>
</ul>
</div>
</td>
</tr>
<tr>
<td colspan="2" class="bar"></td>
</tr>
</table>
<div class="clear"></div>
CSS
* {
font-family: verdana;
color:#514f4d;
}
html { overflow-y:scroll; }
body {
margin:0;
padding:0;
}
img { border:0; }
.blue { border:1px solid #00b1ef; }
.pageContent {
width:830px;
margin:0 auto;
}
.container { padding-top:7.5em; }
.bar {
background: url('images/heading-top.jpg') repeat-x;
height:20px;
z-index:1;
}
.centered {
margin:0 auto;
width:830px;
}
.footer {
background:url('images/heading-bottom.jpg') repeat-x;
height:20px;
z-index:5;
width:830px;
}
p.copyright {
font-weight: bold;
text-align: center;
line-height:11px;
}
#tbheader {
border-collapse:collpase;
margin:0;
padding:0;
position:absolute;
text-align:center;
width:830px;
border-spacing:0;
top:1em;
}
td#tdlogonavleft {
text-align:left;
vertical-align:top;
width:190px;
}
td#tdlogonavright {
vertical-align:bottom;
}
.menu {
height:58px;
width:425px;
float:right;
text-align:left;
z-index:0;
margin-right:-1px;
margin-bottom:-1px;
background:url('images/menu.jpg') no-repeat;
}
#d_home {
position:absolute;
width:85px;
height:58px;
display:inline-block;
background:url('images/home.jpg') no-repeat;
}
#d_home:hover {
position:absolute;
width:85px;
height:58px;
background:url('images/hover-home.jpg') no-repeat;
}
#d_about {
position:absolute;
margin-left:85px;
width:85px;
height:58px;
display:inline-block;
background:url('images/aboutus.jpg') no-repeat;
}
#d_about:hover {
position:absolute;
margin-left:85px;
width:85px;
height:58px;
background:url('images/hover-aboutus.jpg') no-repeat;
}
#d_partners {
position:absolute;
margin-left:170px;
width:85px;
height:58px;
display:inline-block;
background:url('images/partners.jpg') no-repeat;
}
#d_partners:hover {
position:absolute;
margin-left:170px;
width:85px;
height:58px;
background:url('images/hover-partners.jpg') no-repeat;
}
#d_products {
position:absolute;
margin-left:255px;
width:85px;
height:58px;
display:inline-block;
background:url('images/products.jpg') no-repeat;
}
#d_products:hover {
position:absolute;
margin-left:255px;
width:85px;
height:58px;
background:url('images/hover-products.jpg') no-repeat;
}
#d_contact {
position:absolute;
margin-left:340px;
width:85px;
height:58px;
display:inline-block;
background:url('images/contactus.jpg') no-repeat;
}
#d_contact:hover {
position:absolute;
margin-left:340px;
width:85px;
height:58px;
background:url('images/hover-contactus.jpg') no-repeat;
}
.x { line-height:1.5em; }
.box {
border:1px solid #cccccc;
width:270px;
height:290px;
-moz-box-shadow 3px 5px 4px rgba(235, 235, 235, 1);
-webkit-box-shadow: 3px 5px 4px rgba(235, 235, 235, 1);
box-shadow: 3px 5px 4px rgba(235, 235, 235, 1);
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#060606')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#060606');
}
.clear { clear:both; }
/**Navigation**/
#navbar {
margin: 0;
padding: 0;
}
#navbar li {
list-style: none;
float:left;
}
#navbar li a {
display: block;
padding:0;
background-color:#03beff;
text-decoration: none;
}
#navbar li ul {
display: none;
width:5.3em;
}
/**
#navbar li:hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0; }
#navbar li:hover li {
float: none; }
#navbar li:hover li a {
background-color: #69f;
border-bottom: 1px solid #fff;
color: #000; }
#navbar li li a:hover {
background-color: #8db3ff; }
Jus simple thing..
First of All set this to your iFrame:
position:relative;
Then Add one more thing for the same:
margin-top: 'some int value' px;
You can even set -ve values to this.. Try setting a perfect value..
Try adding height to the ".centered" class so it takes up space on the page. Sometimes the contents of a div can be larger than the div itself.
Related
Following is the all in one code i.e. html and style. Question is that why the "Box" div is being overlapped on to the "Footer" div. You can copy paste the code and see it yourself in the browser. I have checked the styles and div's starting and ending myself by so far no success. Am i missing something?
.shell { width:950px; margin:0; position:relative; }
#main { background:#f8f8f8 url(images/main.jpg) left top repeat-x; }
#main .box { float:left; width:306px; padding:0 19px 0 0; }
#main .shell { padding:25px 0; }
#footer { background:url(images/footer.jpg) left top repeat-x; color:#b3adad; padding:24px 4px; font-size:10px; }
#footer a { color:#b3adad; text-decoration:none; }
#footer a:hover { text-decoration:underline; }
#footer .footer-navigation { }
#footer .footer-navigation ul { list-style:none; }
#footer .footer-navigation ul li { float:left; padding-right:8px; margin-right:8px; border-right:1px solid #b3adad; height:10px; line-height:10px; }
#footer .footer-navigation ul li.last { padding-right:0; margin-right:0; border-right:0; }
#footer .footer-navigation ul li a { }
#footer .right { float:right; font-family:Verdana, Arial, Sans-Serif; }
#footer .right a { color:#dad7d7; font-weight:bold; text-decoration:underline; }
#footer .right a:hover { text-decoration:none; }
.box { float:left; width:306px; padding:0 19px 0 0; }
.last-box { padding-right:0; }
.box .entry { height:217px; padding-left:2px; }
.box .big-image { padding:4px 0 10px 0; }
.box .big-image img { border:2px solid #fff; }
.box .buttons .button,
.box .buttons .button span { background:url(images/main-button.jpg) repeat-x; height:29px; line-height:29px; float:right; display:inline; border:1px solid #bfbebe; padding:0 8px; }
.box .buttons .button span { float:left; border:0; background:url(images/main-button-span.jpg) left top no-repeat; padding:0 0 0 7px; }
<div id="main">
<div class="shell">
<div class="box">
<h2 style="color:#565656;">Latest News</h2>
<div class="entry">
<div class="news">
newsstring;
</div>
</div>
</div>
<div class="box">
</div>
</div>
</div>
<!-- End of Main -->
<!-- Footer -->
<div id="footer">
<div class="shell">
<div class="footer-navigation">
<ul>
<li>Home</li>
<li>About</li>
<li>Gallery</li>
<li>Location</li>
<li class="last">Contact</li>
</ul>
</div>
<div class="container">
<table align="center" border="0" cellpadding="0" cellspacing="0" style="height:10px; width:1000px">
<tbody>
<tr>
<td style="height:75px; text-align:center; vertical-align:middle; width:560px">
<p><img alt="Seertech Solutions Pvt. Ltd" src="./css/images/seertechbanner.jpg" style="height:55px; width:660px" /></p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
Just add "display: inline-block" and "width:100%" in your main div and footer.
CSS:
#footer, #main {
display: inline-block;
width: 100%;
}
Add class .clr to element has class .shell as below:
CSS
.clr:after {
content: "";
display: block;
clear: both;
height: 0;
margin: 0;
padding: 0;
}
HTML
...
<div class="shell clr">
...
Jsfiddle:
https://jsfiddle.net/merLdd2y/
.shell { width:950px; margin:0; position:relative; }
#main { background:#f8f8f8 url(images/main.jpg) left top repeat-x; }
#main .box { float:left; width:306px; padding:0 19px 0 0; }
#main .shell { padding:25px 0; }
#footer { background:url(images/footer.jpg) left top repeat-x; color:#b3adad; padding:24px 4px; font-size:10px; }
#footer a { color:#b3adad; text-decoration:none; }
#footer a:hover { text-decoration:underline; }
#footer .footer-navigation { }
#footer .footer-navigation ul { list-style:none; }
#footer .footer-navigation ul li { float:left; padding-right:8px; margin-right:8px; border-right:1px solid #b3adad; height:10px; line-height:10px; }
#footer .footer-navigation ul li.last { padding-right:0; margin-right:0; border-right:0; }
#footer .footer-navigation ul li a { }
#footer .right { float:right; font-family:Verdana, Arial, Sans-Serif; }
#footer .right a { color:#dad7d7; font-weight:bold; text-decoration:underline; }
#footer .right a:hover { text-decoration:none; }
.box { float:left; width:306px; padding:0 19px 0 0; }
.last-box { padding-right:0; }
.box .entry { height:217px; padding-left:2px; }
.box .big-image { padding:4px 0 10px 0; }
.box .big-image img { border:2px solid #fff; }
.box .buttons .button,
.box .buttons .button span { background:url(images/main-button.jpg) repeat-x; height:29px; line-height:29px; float:right; display:inline; border:1px solid #bfbebe; padding:0 8px; }
.box .buttons .button span { float:left; border:0; background:url(images/main-button-span.jpg) left top no-repeat; padding:0 0 0 7px; }
<div id="main" style="display:inline; width:100%">
<div class="shell">
<div class="box">
<h2 style="color:#565656;">Latest News</h2>
<div class="entry">
<div class="news">
newsstring;
</div>
</div>
</div>
<div class="box">
</div>
</div>
</div>
<!-- End of Main -->
<!-- Footer -->
<div id="footer">
<div class="shell">
<div class="footer-navigation">
<ul>
<li>Home</li>
<li>About</li>
<li>Gallery</li>
<li>Location</li>
<li class="last">Contact</li>
</ul>
</div>
<div class="container">
<table align="center" border="0" cellpadding="0" cellspacing="0" style="height:10px; width:1000px">
<tbody>
<tr>
<td style="height:75px; text-align:center; vertical-align:middle; width:560px">
<p><img alt="Seertech Solutions Pvt. Ltd" src="./css/images/seertechbanner.jpg" style="height:55px; width:660px" /></p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
You're not properly clearing your floats.
#footer {
background: url(images/footer.jpg) left top repeat-x;
color: #b3adad;
padding: 24px 4px;
font-size: 10px;
clear: both;
}
This will clear the floats of the header.
You can also create the following class and add that to the parent of any container containing floated elements.
.clearFix:after {display: table; clear: both; content: "";}
An element will float around the next content found in the flow, in this case, footer's text. Check this link for more info about floats: https://css-tricks.com/all-about-floats/
In this case, depending on what you plan for your .shell i would add the following style:
.shell:after {
content: ' ';
display: table;
clear: both;
}
.shell { width:950px; margin:0; position:relative; }
.shell:after {content: ' '; display: table; clear: both;}
#main { background:#f8f8f8 url(images/main.jpg) left top repeat-x; }
#main .box { float:left; width:306px; padding:0 19px 0 0; }
#main .shell { padding:25px 0; }
#footer { background:url(images/footer.jpg) left top repeat-x; color:#b3adad; padding:24px 4px; font-size:10px; }
#footer a { color:#b3adad; text-decoration:none; }
#footer a:hover { text-decoration:underline; }
#footer .footer-navigation { }
#footer .footer-navigation ul { list-style:none; }
#footer .footer-navigation ul li { float:left; padding-right:8px; margin-right:8px; border-right:1px solid #b3adad; height:10px; line-height:10px; }
#footer .footer-navigation ul li.last { padding-right:0; margin-right:0; border-right:0; }
#footer .footer-navigation ul li a { }
#footer .right { float:right; font-family:Verdana, Arial, Sans-Serif; }
#footer .right a { color:#dad7d7; font-weight:bold; text-decoration:underline; }
#footer .right a:hover { text-decoration:none; }
.box { float:left; width:306px; padding:0 19px 0 0; }
.last-box { padding-right:0; }
.box .entry { height:217px; padding-left:2px; }
.box .big-image { padding:4px 0 10px 0; }
.box .big-image img { border:2px solid #fff; }
.box .buttons .button,
.box .buttons .button span { background:url(images/main-button.jpg) repeat-x; height:29px; line-height:29px; float:right; display:inline; border:1px solid #bfbebe; padding:0 8px; }
.box .buttons .button span { float:left; border:0; background:url(images/main-button-span.jpg) left top no-repeat; padding:0 0 0 7px; }
<div id="main">
<div class="shell">
<div class="box">
<h2 style="color:#565656;">Latest News</h2>
<div class="entry">
<div class="news">
newsstring;
</div>
</div>
</div>
<div class="box">
</div>
</div>
</div>
<!-- End of Main -->
<!-- Footer -->
<div id="footer">
<div class="shell">
<div class="footer-navigation">
<ul>
<li>Home</li>
<li>About</li>
<li>Gallery</li>
<li>Location</li>
<li class="last">Contact</li>
</ul>
</div>
<div class="container">
<table align="center" border="0" cellpadding="0" cellspacing="0" style="height:10px; width:1000px">
<tbody>
<tr>
<td style="height:75px; text-align:center; vertical-align:middle; width:560px">
<p><img alt="Seertech Solutions Pvt. Ltd" src="./css/images/seertechbanner.jpg" style="height:55px; width:660px" /></p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
Keep in mind that there are more solutions. You could use flex-box approach, you could use display:inline-block approach, you coul even use grid approach. It all depends on what you want to achieve and what browsers you want to support.
If you have floated children (.box), your parent block don't know about that until you tell him. Just add to parent block (.shell) style overflow :hidden.
#main .shell { overflow :hidden; }
I currently have a Header in my HTML which is a Unordered List with List Items display = inline. What I am try to accomplish is to spread each of the 5 items into an equaled space (20% Width for each) and step them centered in their respective spaces. I was able to accomplish this with a lot of ease on the Footer, but instead of List Items, I used Divs for each of the Options. Can anyone help me do the same with list? I can redo it as Divs, but I'd like to at least know how to make the list work.
How it should be
html, body {
margin:0;
padding:0;
height:100%;
}
a:link {
text-decoration:none;
}
#page {
position:relative;
background:#E9EAEE;
min-height:100%;
}
#header {
position:fixed;
left:0px;
top:0px;
z-index:1;
width:100%;
background-color:#3f5c99;
padding-top:10px;
}
#header .holder {
width:100%;
float:left;
}
#header a {
color:#ffffff;
font-size:11px;
font-weight: bold;
padding:0px 10px 0 0;
text-transform:uppercase;
}
#header li {
display:inline;
margin-left:-10px;
padding:0 4px 0 6px;
border-left: 1px solid #2F477A;
}
.logo {
border-radius:2px;
}
<body>
<div id="page">
<div id="header">
<div class="holder">
<ul>
<li style="border-left:0px;"><img class="logo" src="../img/logo.png"/></li>
<li>Comics</li>
<li><img src="../img/friendOff.png"/></li>
<li><img src="../img/mailChatOff.png"/></li>
<li><img src="../img/globeOff.png"/></li>
</ul>
</div>
</div>
...
</div>
</body>
I hope I was able to illustrate what I am trying to accomplish, but if it is still unclear please let me know. Thanks in advance for any help.
You can try like this ,I hope it will helps you.
html, body {
margin:0;
padding:0;
height:100%;
}
a:link {
text-decoration:none;
}
#page {
position:relative;
background:#E9EAEE;
min-height:100%;
}
#header {
position:fixed;
left:0px;
top:0px;
z-index:1;
width:100%;
background-color:#3f5c99;
}
#header .holder {
width:100%;
float:left;
}
#header ul {
display: table;
margin: 0;
padding: 0;
width: 100%;
}
#header a {
color: #ffffff;
display: inline-block;
font-size: 11px;
font-weight: bold;
text-transform: uppercase;
}
#header li {
display: table-cell;
padding: 5px 0;
position: relative;
text-align: center;
vertical-align: middle;
width: 20%;
}
#header li:after {
border-left: 1px solid #2f477a;
content: "";
height: 20px;
position: absolute;
right: 0;
top: 8px;
}
.logo {
border-radius:2px;
}
<body>
<div id="page">
<div id="header">
<div class="holder">
<ul>
<li style="border-left:0px;"><img class="logo" src="../img/logo.png"/></li>
<li>Comics</li>
<li><img src="../img/friendOff.png"/></li>
<li><img src="../img/mailChatOff.png"/></li>
<li><img src="../img/globeOff.png"/></li>
</ul>
</div>
</div>
...
</div>
</body>
ul {
display: flex;
}
#header li {
...
flex: 1;
display: flex;
align-items: center;
justify-content: center;
...
}
https://jsfiddle.net/234zzgn7/
Add this css. Ofcourse this is using flexbox which is something that I found to be extremely awesome. But you should investigate whether your users support it or not.
http://caniuse.com/#search=flexbox
Here try this. Changes are on #header li and #header a
html, body {
margin:0;
padding:0;
height:100%;
}
a:link {
text-decoration:none;
}
#page {
position:relative;
background:#E9EAEE;
min-height:100%;
}
#header {
position:fixed;
left:0px;
top:0px;
z-index:1;
width:100%;
background-color:#3f5c99;
padding-top:10px;
}
#header .holder {
width:100%;
float:left;
}
#header a {
color:#ffffff;
font-size:11px;
font-weight: bold;
padding:0px 10px 0 0;
text-transform:uppercase;
display:block;
width:100%;
box-sizing:border-box;
}
#header li {
display:inline-block;
box-sizing:border-box;
width:20%;
margin-left:-10px;
padding:0 4px 0 6px;
border-left: 1px solid #2F477A;
}
.logo {
border-radius:2px;
}
<body>
<div id="page">
<div id="header">
<div class="holder">
<ul>
<li style="border-left:0px;"><img class="logo" src="../img/logo.png"/></li>
<li>Comics</li>
<li><img src="../img/friendOff.png"/></li>
<li><img src="../img/mailChatOff.png"/></li>
<li><img src="../img/globeOff.png"/></li>
</ul>
</div>
</div>
...
</div>
</body>
I essentially have two problems. The first being that my links to each of my web pages do not work. I used intellisence to select the URL for the page files so I am not sure why I keep getting a "resource cannot be found" error when I run the solution and click on the links. The second problem is that I am trying to create my first responsive website. I am currently working on modifying the navigation menu so that when the screen goes below a specific width, it changes to being combined into a single dropdown menu (with styles to make it look good). I am using open source script to run the change. The script file is called responsivemobilemenu.js.
This is my HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Atlas Web Pages</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
<script src="#Url.Content("~/Scripts/knockout-2.1.0.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-1.7.1.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/responsivemobilemenu.js")" type="text/javascript"></script>
</head>
<body>
<div class="box-effect">
<header id="header">
<div class="web-header">
<div class="logo-image">
<img style="vertical-align:top" src="~/Images/WebPageLogo.png" height="85" width="820" alt="Atlas Logo" />
<br />
</div>
<div id="follow-icons">
<img src="~/Images/FBIcon.png" alt="Follow on Facebook" height="40" width="40" />
<img src="~/Images/TwitIcon.png" alt="Follow on twitter" height="40" width="40" />
<img src="~/Images/YTIcon.png" alt="Subscribe on Youtube" height="40" width="40" />
<img src="~/Images/GMailIcon.png" alt="Send me an Email" height="40" width="40" />
</div>
</div>
</header>
<div class="rmm">
<ul>
<li>Home</li>
<li>The Team</li>
<li>Current Line-Up</li>
<li>Retired Equipment</li>
<li>Tournaments</li>
<li>Videos</li>
<li>Sponsors</li>
</ul>
</div>
<div id="body-content">
#RenderSection("featured", required: false)
<section class="content-wrapper clear-fix">
#RenderBody()
</section>
</div>
#Scripts.Render("~/bundles/jquery")
#RenderSection("scripts", required: false)
</div>
</body>
</html>
this is the css for the menu:
.rmm {
display:block;
position:relative;
width:100%;
padding:0px;
margin:0 auto !important;
text-align: center;
line-height:19px !important;
}
.rmm * {
-webkit-tap-highlight-color:transparent !important;
font-family:Arial;
}
.rmm a {
color:#ebebeb;
text-decoration:none;
}
.rmm .rmm-main-list, .rmm .rmm-main-list li {
margin:0px;
padding:0px;
}
.rmm ul {
display:block;
width:auto !important;
margin:0 auto !important;
overflow:hidden;
list-style:none;
}
/* sublevel menu - in construction */
.rmm ul li ul, .rmm ul li ul li, .rmm ul li ul li a {
display:none !important;
height:0px !important;
width:0px !important;
}
.rmm .rmm-main-list li {
display:inline;
padding:0px;
margin:0px !important;
}
.rmm-toggled {
display:none;
width:100%;
position:relative;
overflow:hidden;
margin:0 auto !important;
}
.rmm-button:hover {
cursor:pointer;
}
.rmm .rmm-toggled ul {
display:none;
margin:0px !important;
padding:0px !important;
}
.rmm .rmm-toggled ul li {
display:block;
margin:0 auto !important;
}
/* GRAPHITE STYLE */
.rmm.graphite .rmm-main-list li a {
display:inline-block;
padding:8px 30px 8px 30px;
margin:0px -3px 0px -3px;
font-size:15px;
text-shadow:1px 1px 1px #333333;
background-color:#444444;
border-left:1px solid #555555;
background-image:url('../rmm-img/graphite-menu-bg.png');
background-repeat:repeat-x;
}
.rmm.graphite .rmm-main-list li a:hover {
background-image:url('../rmm-img/graphite-menu-bg-hover.png');
}
.rmm.graphite .rmm-main-list li:first-child a {
-webkit-border-top-left-radius: 6px;
-webkit-border-bottom-left-radius: 6px;
-moz-border-radius-topleft: 6px;
-moz-border-radius-bottomleft: 6px;
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
}
.rmm.graphite .rmm-main-list li:last-child a {
-webkit-border-top-right-radius: 6px;
-webkit-border-bottom-right-radius: 6px;
-moz-border-radius-topright: 6px;
-moz-border-radius-bottomright: 6px;
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
}
.rmm.graphite .rmm-toggled {
width:95%;
background-color:#555555;
min-height:36px;
border-radius:6px;
}
.rmm.graphite .rmm-toggled-controls {
display:block;
height:36px;
color:white;
text-align:left;
position:relative;
background-image:url('../rmm-img/graphite-menu-bg.png');
background-repeat:repeat-x;
border-radius:6px;
}
.rmm.graphite .rmm-toggled-title {
position:relative;
top:9px;
left:15px;
font-size:16px;
color:white;
text-shadow:1px 1px 1px black;
}
.rmm.graphite .rmm-button {
display:block;
position:absolute;
right:15px;
top:8px;
}
.rmm.graphite .rmm-button span {
display:block;
margin-top:4px;
height:2px;
background:white;
width:24px;
}
.rmm.graphite .rmm-toggled ul li a {
display:block;
width:100%;
background-color:#555555;
text-align:center;
padding:10px 0px 10px 0px;
border-bottom:1px solid #333333;
border-top:1px solid #777777;
text-shadow:1px 1px 1px #333333;
}
.rmm.graphite .rmm-toggled ul li a:active {
background-color:#444444;
border-bottom:1px solid #444444;
border-top:1px solid #444444;
}
/* MINIMAL STYLE */
.rmm.minimal a {
color:#333333;
}
.rmm.minimal a:hover {
opacity:0.7;
}
.rmm.minimal .rmm-main-list li a {
display:inline-block;
padding:8px 30px 8px 30px;
margin:0px -3px 0px -3px;
font-size:15px;
}
.rmm.minimal .rmm-toggled {
width:95%;
min-height:36px;
}
.rmm.minimal .rmm-toggled-controls {
display:block;
height:36px;
color:#333333;
text-align:left;
position:relative;
}
.rmm.minimal .rmm-toggled-title {
position:relative;
top:9px;
left:9px;
font-size:16px;
color:#333333;
}
.rmm.minimal .rmm-button {
display:block;
position:absolute;
right:9px;
top:7px;
}
.rmm.minimal .rmm-button span {
display:block;
margin:4px 0px 4px 0px;
height:2px;
background:#333333;
width:25px;
}
.rmm.minimal .rmm-toggled ul li a {
display:block;
width:100%;
text-align:center;
padding:10px 0px 10px 0px;
border-bottom:1px solid #dedede;
color:#333333;
}
.rmm.minimal .rmm-toggled ul li:first-child a {
border-top:1px solid #dedede;
}
Try this
<li>Home</li>
<li>The Team</li>
<li>Current Line-Up</li>
<li>Retired Equipment</li>
<li>Tournaments</li>
<li>Videos</li>
<li>Sponsors</li>
You should consider using Html Helper.
#Html.ActionLink("Link Text", "Action Name", "Controller Name")
I have problem with p element inside li. It shoud be seen in same line and ul element should overflow with horizontal scroll bar. However it does not work.
HTML as follows:
<div id="tests" class="container">
<form>
<input type="text" id='search-textbox' placeholder='Action name'/>
<input type="button" id='search-button'value="Search"/>
</form>
<div class="clip">
<ul id="ul-tests">
<li>
<p>Action-001</p>
<ul>
<li>
<p>Action-001-001</p>
<ul>
<li>
<p>Action-001-001-001</p>
<ul>
<li><p>Hello-Action-001-001-001-001</p></li>
<li><p>Hello-Action-001-001-001-002</p></li>
<li><p>Hello-Action-001-001-001-003</p></li>
<li><p>Hello-Action-001-001-001-004</p></li>
<li><p>Hello-Action-001-001-001-005</p></li>
<li><p>Hello-Action-001-001-001-006</p></li>
<li><p>Hello-Action-001-001-001-007</p></li>
<li><p>Hello-Action-001-001-001-008</p></li>
<li><p>Hello-Action-001-001-001-009</p></li>
<li><p>Hello-Action-001-001-001-010</p></li>
</ul>
</li>
<li><p>bell-Action-001-001-002</p></li>
<li><p>bell-Action-001-001-003</p></li>
<li><p>bell-Action-001-001-004</p></li>
<li><p>bell-Action-001-001-005</p></li>
<li><p>bell-Action-001-001-006</p></li>
<li><p>bell-Action-001-001-007</p></li>
<li><p>bell-Action-001-001-008</p></li>
<li><p>bell-Action-001-001-009</p></li>
<li><p>bell-Action-001-001-010</p></li>
</ul>
</li>
<li><p>Action-001-002</p></li>
<li><p>Action-001-003</p></li>
<li><p>Action-001-004</p></li>
<li><p>Action-001-005</p></li>
<li><p>Action-001-006</p></li>
<li><p>Action-001-007</p></li>
<li><p>Action-001-008</p></li>
<li><p>Action-001-009</p></li>
<li><p>Action-001-010</p></li>
</ul>
</li>
<li><p>Action-002</p></li>
<li><p>Action-003</p></li>
<li><p>Action-004</p></li>
</ul>
</div>
</div>
CSS as follows:
*
{
margin:0;
padding:0;
}
body, html
{
min-width: 1000px;
min-height:700px;
}
div#tests
{
top:40px;
left:40px;
bottom:20px;
width:240px;
display:block;
position:absolute;
}
div#tests.container
{
background-color:#ccc;
border-radius:4px;
}
div#tests.container>form
{
top:4px;
left:4px;
right:4px;
height:32px;
min-height:32px;
overflow: hidden;
display:block;
position: absolute;
}
div#tests.container>form>input#search-textbox
{
top:0;
left:0;
height:28px;
min-height:28px;
width:150px;
min-width:150px;
border-radius: 2px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset;
border: 1px solid #9c9c9c;
font: normal 18px 'trebuchet MS', arial, helvetica;
display: inline-block;
position: absolute;
}
div#tests.container>form>input#search-textbox::-webkit-input-placeholder
{
padding-left:10px;
color: #9c9c9c;
font-style: italic;
}
div#tests.container>form>input#search-textbox:-moz-placeholder
{
color: #9c9c9c;
font-style: italic;
}
div#tests.container>form>input#search-textbox:-ms-placeholder
{
color: #9c9c9c;
font-style: italic;
}
div#tests.container>form>input#search-button
{
top:0;
right:0;
height:30px;
min-height:30px;
width:78px;
min-width:78px;
display:inline-block;
position:absolute;
}
div.clip
{
top:38px;
left:4px;
right:4px;
bottom:4px;
border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px;
background-color: #FFF;
overflow:scroll;
display:block;
position: absolute;
}
ul#ul-tests
{
list-style-type: none;
margin-left:20px;
}
ul#ul-test.hidden-n p
{
display:none;
}
ul#ul-tests ul
{
list-style-type:none;
margin-left:20px;
}
Link to the fiddle.
Please does not suggest to use fixed width size. Because, text can be different size. Thank you for your answers.
Add this setting to prevent line wrapping:
li p {
white-space: nowrap;
}
jsFiddle Demo
I am trying to make my transparent menu appear centered, but whatever method I dig up from the internet, nothing seems to do the trick.
I would really love if someone could look through this code, and give me a hand. :)
The HTML-part:
<div id="container">
<div id="menu">
<span class="bg"></span>
<ul>
<li>PRINT</li>
<li>TV</li>
<li>OTHER</li>
<li>RESUME</li>
</ul>
</div>
The CSS part:
#container
{
display: inline-block;
*display: inline;
zoom: 1;
padding: 10px 0 0 0
overflow:hidden;
font-family:arial;
height:400px;
}
#menu
{
float: left; // **WHENEVER I CHANGE THIS FLOAT, THE MENU-BACKGROUND DISAPPEARS?!**
position: relative;
display:inline;
border:2px solid #000;
border-top:0;
border-radius:0 0 10px 10px;
}
#menu .bg
{
position:absolute;
width:100%;
height:100%;
background:#000;
opacity:0.5;
filter:alpha(opacity=50);
left:0;
top:0;
}
#menu li
{
float:left;
}
#menu a
{
text-decoration:none;
position:relative;
padding:8px 13px;
color:white;
font-weight:bold;
z-index:2;
float:left;
}
#menu a:hover
{
color:#999;
}
You can do it by updating #menu to:
#menu {
position: absolute;
border:2px solid #000;
border-top:0;
border-radius:0 0 10px 10px;
left: 50%;
margin-left: -152px;
width: 305px;
}
JSFiddle
The reason that your menu is not centering, is because you do not have a defined width for either the menu or the container. If you had a defined width, then you would be able to use:
margin: 0 auto;
I'm not sure yet why your float starts messing up your background colors, however I did notice you missed a semicolon at the end of one of your style properties
#container
{
padding: 10px 0 0 0
...
}
should be
#container
{
padding: 10px 0 0 0;
...
}
Another option:
EDITED CSS:
#container
{
display: inline-block;
*display: inline;
zoom: 1;
padding: 10px 0 0 0
overflow:hidden;
font-family:arial;
height:400px;
}
#menu
{
float: left; // **WHENEVER I CHANGE THIS FLOAT, THE MENU-BACKGROUND DISAPPEARS?!**
position: relative;
display:inline;
}
#menu .bg
{
position:absolute;
width:100%;
height:100%;
background:#000;
opacity:0.5;
filter:alpha(opacity=50);
left:0;
top:0;
}
#menu ul { <===Added this definition and moved the border here as well
clear:left;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
left:50%;
text-align:center;
border:2px solid #000;
border-top:0;
border-radius:0 0 10px 10px;
}
#menu li
{
float:left;
}
#menu a
{
text-decoration:none;
position:relative;
padding:8px 13px;
color:white;
font-weight:bold;
z-index:2;
float:left;
}
#menu a:hover
{
color:#999;
}
EDITED HTML (closed a div tag)
<div id="container">
<div id="menu">
<span class="bg"></span>
<ul>
<li>PRINT</li>
<li>TV</li>
<li>OTHER</li>
<li>RESUME</li>
</ul>
</div>
</div>
And here's the FIDDLE
Centering floats is difficult. Here's one method:
<style type="text/css">
#container
{
font-family:arial;
height:400px;
border: red;
position: relative;
}
#menu
{
position:relative;
left:-50%;
float:right;
}
ul
{
position:relative;
left:50%;
background: rgba(0, 0, 0, 0.5);
overflow: hidden;
}
li{
display:block;
float:left;
padding: 8px 13px;
}
a {text-decoration:none;}
</style>
<div id="container">
<div id="menu">
<ul>
<li>PRINT</li>
<li>TV</li>
<li>OTHER</li>
<li>RESUME</li>
</ul>
</div>
</div>
Source: http://browse-tutorials.com/snippet/center-floats-css
Fiddle: http://jsfiddle.net/yucHM/2/