<ul id="verticalmenu">
<li>Home</li>
<li>Vertical Menu</li>
<li>Drop Down Menu</li>
<li>Fading Banner</li>
<li>Web Design Blog</li>
</ul>
If this is my menu.php, how can I call it on other pages? I want it to be static or say fixed.
It should be present in every page, I navigate to.
http://oi57.tinypic.com/2j0nq5i.jpg
How can I do so, just like the red block in the img??
I would suggest making a header.php file that contains the full header of your site, including the menu. Once you have done that, you can just call include("header.php"); on every page and your entire header will be brought in. This will also allow you to make one change in one file and affect the entire site.
To position the menu on the left or right, you are going to want to wrap the menu with a css call similar to float: left; or float: right; jsfiddlee: http://jsfiddle.net/jjS98/
here is the css code for floating your menu to the right:
#verticalmenu{
float:right;
}
You can change right to left for the desired results.
Related
hi..i have made this panel but tagged red color is space...i cannot remove this space from this page .
or it will be suitable for if i can set a banner.
below code is for reference...
</head>
<body>
<div class="container">
<div><h2 style="background-color:#00CCCC" align="center" "height:50px" width="550px" >SMS Panel</h2></div>
<div class="col-sm-2">
<ul class="nav nav-pills nav-stacked" style="background-color:#FFCCFF">
<li class="active">Subscriber info and message</li>
<li class="dropdown">
Home
</li>
<li>Show subscriber</li>
<li>unknown menu</li>
</ul>
It is difficult to tell what is the exact problem without looking at the complete code. I will take a stab on it. It might be happening because you are not doing CSS reset for the panel. Many HTML elements have non zero margin by default. You can read more about CSS reset here.
To fix this issue you can give appropriate negative margin-top to the element right below the panel. It will have problems in IE7 and older browsers but will work in all modern browsers. To find the actual root cause of the issue you need to inspect the panel element in Chrome inspector or Firebug and need to check if there is any margin or padding either for the panel or the element right below it.
Update:
As per the given fiddle you need to add the following rule
h2, ul {
margin: 0;
}
Updated fiddle link
Your h2 tag has a margin on the bottom of about 5 or 10px, if you set the margin on the bottom to 0 it will remove the space.
You didnt use a <div class ="row"> tot wrap up your layout. Certain styles are only applied when you use the row div
Try this,
Replace this line of code
<div class="col-sm-2">
to
<div class="col-sm-2" style="margin: -20px 0px 0px ! important;">
i.e according to your code : http://jsfiddle.net/g2khLdtb/1/ you have posted on above comment
I'm really new to coding and I'm getting stuck on a blank lines issue. I've spent two days researching articles on blank lines, white space, etc., and I'm not finding anything that addresses this particular problem.
I have PHP code that is grabbing the contents of a file in my directory. I output these variables on an HTML page and I have these items scrolling vertically. Basically, it's a vertical news ticker. But I'm encountering irregular results. In IE11 everything works perfectly. However, in IE9 (where the end users will be viewing the page), the combination of lists with echoed PHP variables creates extra lines between each "li". So, instead of 5 "articles", I have 9.
Normally I wouldn't care about extra spaces, but the news ticker is treating the extra lines like a "news" item and will pause for the user to read that blank line. This seems to have something to do with calling php variables via a "ul", but I cannot find anything to remove these extra lines. Has anyone encountered this? Or do you have an idea of what I can do to resolve?
<div id="content" class="block" style="float:left; position:relative; left:135px;">
<ul id="ticker">
<li><?php echo $par1;?></li>
<li><?php echo $par2;?></li>
<li><?php echo $par3;?></li>
<li><?php echo $par4;?></li>
<li><?php echo $par5;?></li>
</ul>
Code from Source View:
<!DOCTYPE html>
<html>
<head>
<style>
ul#ticker{
width:700px;
height:200px;
}
ul#ticker li{
font-family:Verdana;
font-weight:bold;
font-size:14px;
text-align:center;
width:700px;
height:200px;
margin:0px;
padding:0px;
border:0px;
display:block;
overflow:hidden;
}
</style>
</head>
<body>
<span style="float:left; left:10px; position:absolute; width:125px; text-align:right;"><b>Current Events:</b></span>
<div id="content" class="block" style="float:left; position:relative; left:135px;">
<ul id="ticker">
<li><a href = "http://rss.cnn.com/~r/rss/money_latest/~3/VfqbYKimwZE/index.html" target="_blank">Bulgaria tries to contain bank run</li>
<li><a href = "http://rss.cnn.com/~r/rss/money_latest/~3/EqRCj13Dabw/index.html" target="_blank">GM offers victims more than $1 million</li>
<li><a href = "http://rss.cnn.com/~r/rss/money_latest/~3/g_ws27zfMkg/index.html" target="_blank">Stock market flirts with new records</li>
<li><a href = "http://rss.cnn.com/~r/rss/money_latest/~3/iIm8fzJ9rWM/index.html" target="_blank">Enough with Millennials. Here's what Gen X thinks</li>
<li><a href = "http://rss.cnn.com/~r/rss/money_latest/~3/x1GNhn8SwnM/index.html" target="_blank">Consumer Reports rates some Graco strollers "don't buy"</li>
</ul>
</div>
</body>
</html>
It is pretty hard to say from your description. I would suggest perhaps loading the page in IE9, then viewing the source (and posting it here if you don't see the issue).
Also,
in IE9 (where the end users will be viewing the page)
Are you for real?
http://codepad.viper-7.com/lw0VuN
here is a fiddle,showing it works. most probably one of your $par variables is not defined. best way to avoid this is to make an array and use a foreach http://www.php.net/manual/en/control-structures.foreach.php , or to check if it is defined like so:
<?php if($par1) echo "<li>".$par1."</li>"; ?>
and so on. Hope this helps!
I pulled up the developer tools in IE and found that, for some reason, the code as I had it written was creating a secondary list element for each news item. However, that list element contained only the "a" tag portion of my PHP variable so it wasn't truly blank, although it obviously appeared that way.
I'm not sure why this occurred, but I changed the "ul" to a div tag and the "li" to a p tag and now it's working the way I want it to. The only question that still leaves me with is why IE11 overlooked the list items that contained only the "a" tags, but IE 9 didn't. However, that's not a problem I need to answer today. Thank you all for your help!
I am working on my note application and I got stuck with the layout. Link to the screenshot of the layout.
Each of the boxes may have different height according to the text in the database. Each of the boxes is a LI (bootstrap span3 size).
I need the boxes to flow around each other nicely without white spaces.
I have seen that some webpages calculate absolute positioning in PHP for each of the boxes, but I hope I can achieve that only with CSS.
So far the structure is following:
<ol>
<li class="memPersonUnit clearfix span3">
<div class="memPersonUnitContainer clearfix">
THE CONTENT
</div>
</li>
</ol>
The css style:
ol has display: block;
li has display: position: relative; float:left (inherited from SPAN3 size);
div has border: 1px gray solid;
How should I change my css to achieve my goal?
If I need to use the PHP calculations, how should I proceed?
You won't really be able to achieve that only in css unless you create individual columns of your content blocks but that won't really work if you are adding content dynamically.
The most common way to achieve what you want is to use a jQuery plugin called Masonry.
http://masonry.desandro.com/
Here's a piece of my navigation code:
<? if($page == ""){ ?>
<li>
Home
</li>
<? }else{ ?>
<li>
Home
</li>
<? } ?>
I want that #on to include 3 images basically:
With repeat-x. (Which is actually the #on)
Left side of the nav button.
Right side of the nav button.
I tried some solutions I found online, although none seem to work.
Is there a way to do it without wrapping each nav with 2 additional div tags?
Thanks!
There isn't a solution that doesn't involve adding more elements. Unfortunately, only one background image can be applied per element via CSS.
You would do it like so:background-image: url(sheep.png), url(betweengrassandsky.png);
background-position: center bottom, left top;
background-repeat: no-repeat;
There's some more information on that here, but as a heads-up, it's a CSS3 property only.
I think what you want are CSS Sliding Doors.
We had a bad experience with a developer not sticking to timelines and what-not so we had to drop them. That being said, we're completing the site on our own and only have a few items left. One of which is a JQuery based navigation toggle that he made... it works fine for the main level of items but when you get into sub menu items, it stops using the appropriate CSS. I'm thinking this is a basic "add this to CSS" answer, but I'm not versed in CSS well enough to figure it out.
The CSS and what I think is the JS calling it can be seen here: http://jsfiddle.net/C8vwJ/
The issue can be seen here: http://74.124.14.50/connecting-point/outreach/ (note the + "toggle open" graphic on the sub-item beneath "Outreach" is on the "Y" of "BeYond"... so it's not being CSS'd to the right as it should be.
Any ideas? Thanks for looking.
Add this line into your CSS file.
.widget-area .current_page_item .page_item .toggle { right: 0; }
Trouble in these lines of css code - style.css line 1291:
.widget-area .current-menu-item .toggle, .widget-area .current_page_item .toggle {
right: 10em;
}
If I try to change this value both '+' link and '-' link moving. Try to brake these properties. I tried to do
<div class="toggle" style="right: 0pt;"></div>
(this can be applied by classname, not inline css)