Webpage Header Creation - html

I am attempting to make a webpage that resembles this https://www.swellbox.com/requestwizard (only page 1 and the request popup). I am currently working on the header and I would like it to be formatted like this https://www.convert.com/ but with two rows of text on the left side and the nav bar right justified on the right side. Thanks in advance!
I attempted copying the websites HTML with all of the references CSS and JS, but it just isnt working.

Related

CSS position:sticky stack two elements within a div

I will try to explain my problem in a way that is as clear as possible.
We are using a ERP that is web-based and when you access a Sale Order document you get to see a form view with a status bar in the top (which shows the current status of the document and also some buttons to perform some actions) and a table with the sale order lines within the document.
The problem is that some quotations are too big and the header of the table gets lost when scrolling down. I'm facing a lot of trouble try to get the header of a table stuck at the top using CSS only.
Here's a snippet of the source code:
If I set the header position to sticky and scroll down, what I get is this:
As you can see, it is underneath the statusbar. I'd like it to stick to it. But I don't see how would I define a div that goes from the bottom of the status bar to the end of the view so the header sticks in there.
I know I can set the "top" property of the header to the exact height of the status bar but this one can change if there's a lot of content on it, that's it, it's a dynamic height.
Here's the div structure:
I can provide a html file if needed.
Thank you in advance for any help!

HTML Footer - Can`t put it after a body with image

I`m doing a (very) simple website for college but I got stuck. The idea is just have an image as body and an Iframe on header (we are not using html 5). It will have first, info and contact page that are gonna use the same header and footer
Until now I did it fine, things are working well with the header but I'm not getting to add the footer after the image, the content is always doing in the middle of the photo, I`m trying it in many different ways.
PS: Each page has a different photo with the same size in the body background.
The footer must be placed immediately after the image, with the same width (912px).
Thank you!

Sidebaroverlapping the Div created in content place holder, how can i prevent it?

i made a sidebar template in ASP .NET. when I click on button X on the left top corner, the sidebar on the left appear. The sidebar is made in the Master page. I used this master page in other pages, I've made a div on a page . The problem is its appearing over the sidebar not under the sidebar. Any how i can get it under the sidebar ?
here's link to the image of the template
http://ge.tt/7bGLHnu1/v/0?c
It's hard to help without any code.
Have you tried to set different values of z-index?
it could look like this:
#div{ z-index: 100;}

Bootstrap Side Nav issue

I'm having an issue with the Twitter Bootstrap template. At http://www.tjprizbiz.com/new/publications.html, I am trying to have my side bar nav jump to each different project, but since all my projects are contained in a span9, anytime I click a side nav bar option it just goes to the top of my container span9 projects column. I know I need to fix my href of the sidebar nav buttons but I don't know how to make it search within the span9 section id's. Any Ideas?
PS: I cant get my code to paste but you can get the page source # www.tjprizbiz.com/new/publications.html

Image stuck on page 2 - CSS Print

I added a custom control to a .NET page which allows user to upload a picture.
This control has a div element which parents an image that is supposed to get printed. The control is positioned near the bottom of the HTML structure and therefore the image gets printed on page two.
However the problem is that I want the picture to get printed on page one but no matter what I try the picture never gets there. I've tried absolute positioning and floating.
Now what to do, what to do? :)
Update:
The HTML page includes many forms and stuff so it's difficult to give code examples but here's what it basically looks like:
<div class="col">Bunch of stuff</div> // Left column
<div class="col">Bunch of stuff + the image control</div> // Right column
When print; the columns are stacked upon each other by using float, but I want the image element to be positioned on top of page one.
Since I couldn't figure out a solution for this problem, I ended up with restructuring the HTML so that the "image control" was at the top. Then I was able to position the control at the top of the printed page.