HTML page to show menu bar always - html

Hi All,
I am trying to develop a simple HTML page for the test results. I am very new to HTML development so i might sound really dump with this question.
My aim is to use some thing like frameset available in HTML but point it to the internal links (href). Or some thing like a navigation bar that is always present on the Top of the HTML page or Vertical from which I can point to different sections inside HTML Page. I don't want to divide my HTML page into multiple pages. I want to keep it as a single HTML page.
I would appreciate for some help in this regards,

You can use a div with the CSS position: fixed; top: 0 set. This will allow the div to "stick" to the top of the page, regardless of where the document is scrolled.

You can use anchors to navigate to separate parts of the document. For example:
Section 1
<div>
<a name="section1" id="section1"></a>
Whatever section 1 might contain here.
</div>
As for making the navigation persisent (i.e. fixed position), you can use the position: fixed CSS set. See the jsFiddle sampel here > http://jsfiddle.net/PWP2T/
And the code:
div#mynav {
width: 100%;
padding: 10px 0;
background-color: #ff00ff;
position: fixed;
top: 0;
left: 0
}

Related

How to stop a certain part of html page from scrolling?

I'm trying to copy the twitter websites homepage but I have a problem with the side section scrolling.
This is the right side section I created/copied from twitter homepage right side section
and it won't stop scrolling until it reaches the max height of the page, I also tried setting the height/max-height to it's only true height (1308px) and it doesn't work.
I only use HTML and CSS by the way and does not want to put JS. Is there a solution using only HTML and CSS?
in your html:
<div id="footer">some elements here</div>
and in your css:
#footer {
position: fixed;
width: 100%;
bottom: 0;
}

CSS repeating header overlaps body text when printing

I have a header element that I want to repeat on every page when it prints. Currently it works as desired but when the body text flows to the next page it overlaps the header and so on. I have tried numerous things in the css messing with page breaks, display: block, adding a height to the header. I tried changing the position to something other than fixed but then the header doesn't display at the top of the page on every page.
header {
display: block;
position: fixed;
top: 0px;
left: 0px;
right: 0px;
}
I created a simple jsfiddle to show the code but it doesn't show my issue as I can't show it in print mode.
https://jsfiddle.net/v76p8qfm/
Here is a screenshot of the issue in print view:
Could you post your table HTML code?
Please, be sure that the <table> tag has no <caption> tag inside of it.
That worked for me.

How do I create a plain white bar for a website that sits on top of every page at the top?

This is the website that I'm trying to recreate - http://www.ulta.com/
I'm trying to replace the search bar with just a plain white bar with few words on text on it. It needs to be on every page just like on http://www.ulta.com/.
I'm using Wordpress for the website, and fairly new to HTML/CSS. Please advise. Thanks.
You can declare a Div with position:fixed in CSS.
In CSS, put the "position: fixed;" for the position/div that you are trying to fix at the top.
Add the following div to the header.php file just after the tag.
<div class="topFixedBar">Some text</div>
and add the following to your style.css file.
.topFixedBar
{
position: fixed;
width: 100%;
background: #fff;
height: 30px;
}
The above should show a white bar at the top of every page (you can change the background color/height to whatever your requirements are.

create vertical strip in HTML or CSS

I am absolutely beginner in HTML and CSS.
What I would like to do is to create a strip in the left hand side of a webpage, similar to this:
https://www.inside.com/all
The strip has a number of clickable icons, and when one slides down the page, the strip and logos stay at the same location.
Is there any way to look at the page source and find out how it is implemented?
If not, I appreciate any help on how to go about this.
The key is using position: fixed; and height: 100%;.
CSS code
.verticalStrip {
position: fixed;
top: 0;
left: 0;
width: 200px;
background-color: grey;
height:100%;
}
.content {
padding-left: 250px;
}
HTML Code
<div class="content"> content of the page....</div>
working demo: http://jsfiddle.net/h85er/
If you're using a modern browser such as Chrome, Firefox, or even newer versions of IE, there's an inspector tool you can use. In chrome, just right click any part of the page you want to see the source for and click Inspect Element.
Otherwise, most browsers will allow you to view the page source. Often, it's a simple right click, or an option somewhere in the toolbar.
That navbar can be easily recreated by using a div element at a fixed position at the left side of the screen position:fixed;left:0;top:0;. Then, a list (ul) can be used for individual navigation elements. Naturally, you'll want to use list-style: none; to remove those ugly bullet points.
EDIT: JSfiddle available here

footer not staying on bottom of page

i grabbed a template from themeforest and modded it. all works well, except, on some pages, the footer isn't sticking at the bottom of the page. i've messed w/ the css a bit, but haven't been able to get it stick. i'm still learning html/css so wanted some help in reviewing it to make sure i don't have any mistakes in my html. i haven't modded the css from the initial template. i did some, but reverted them before the post, as they were attempts at getting the footer to stick.
here is a link to the site > http://capitalcrestoration.com/build/
I think from your question you are asking how to make the footer appear at the bottom of the window at all times.
To do this you just need to change the CSS rule for #subfooter-wrapper:
#subfooter-wrapper {
background: url("images/sub_footer_bg.jpg") repeat-x scroll 0 0 transparent;
width: 100%;
position: fixed;
bottom: 0;
z-index: 1000;
}
You could try giving CSSStickyFooter a shot.
You need to do something with your CSS to position the footer element at the bottom of the window. Otherwise it's just a block element that will be directly under it's sibling.
Try placing div id="subfooter-wrapper" just before the closing tag of the wrapper, and using position:absolute; bottom: 0;