I've done this a few times on websites, but this is one of the first times I've tried making a website with a width of 100%. I'm really enjoying the way the site looks compared to being in a wrapper with a set width, but now I'm having all kinds of basic layout issues.
I'm trying to make a layout that has a slide show at the top that is 100% width. Within the slideshow I have the website logo and nav bar positioned above the slider. I pulled this off by making the slideshow absolute and the nav bar and logo relative. So far no problem. Now I want to start adding content below the slider. When I try to add the next div which is going to be the <div id="menu">, the div launches to the top of the screen behind the slideshow. I've noticed this has to do with the slideshow being absolute positioned because when I remove it, the <div id="menu"> goes back to the bottom of the screen.
How do I add more content below the slider with a background-image all inside the <div id="menu">?
JS Fiddle
Not really clear what your issue is. Are you asking how to add a background image to the div? Why do you need the slideshow to be absolutely positioned? It is hard to tell how removing the absolute positioning messes things up based on your JS Fiddle.
Related
Hello all the web editing professionals! I have a bit an “alternative” problem:::
First off, here is my webpage that I need help adjusting elements’ heights and margins with::: www.rebelrock.fi. Please open that webpage in another browser window first!
So there are three DIV elements with the parameter position: fixed there; The MENU, the LOGO and the bottom FOOTER.
My problem is with the LOGO included DIV (at the top of the page, right under the MENU) and the main page content MARGIN-TOP positioning.
So as the browser windows size (actually the WIDTH) is changed smaller, at one point the REBELROCK .png-file LOGO IMAGE at the fixed-positioned DIV above will start automatically adjusting the width and height of that logo image. And when the logo is getting smaller (both by WIDTH and HEIGHT), then the HEIGHT of the DIV – inside of which the logo is – will be getting smaller too – and that’s exactly how I want it to be.
However, the non-fixed main content that is scrollable vertically, and especially the MARGIN-TOP value of that content will NOT be adjusted by the changing height of the FIXED logo DIV above, causing there unwanted space between the fixed logo DIV and the main content of the page.
So my question is; HOW CAN THE MARGIN-TOP VALUE OF THE MAIN CONTENT ELEMENT BE CHANGED IN RELATION TO THE CHANGING HEIGHT OF THAT LOGO DIV ABOVE IT?
As You can see, the pages are by far not finished in almost any way but I first want to have all the basic HTML/CSS to be perfect until starting to add more specific detailed content to the website. The site itself was initially a template of ADOBE DREAMWEAVER but that’s not important here 😊
I really hope someone here could help me.
Thank You in advance!
Yours, Tommi Tiihonen
e-mail: tommi.tiihonen#gmail.com
My webpage: www.rebelrock.fi
Give The saurce code to change edits on your website
I am attempting to hold my footer div at the bottom of the site to avoid blank space underneath it on shorter pages. When I set the position of the footer to be absolute, the responsive menu button seems to take its position relative to the footer and no longer to the header. When I change it back from absolute it works normally. It is almost as if it is associating itself with the footer menu rather than the header menu, but I can see no good reason why this would happen. Also, when I am logged in to WordPress, the top menu bar (on the front end) gets pushed down in just the same way. However, this doesn't happen until the viewport hits 600px (I have no media queries at 600px). The responsive menu already appears at a viewport width of 767px.
This is a WordPress website in progress here.
I am using a custom theme and this responsive menu
Does anyone have any idea what might be going on there? Thanks.
You would need to move the #click-menu div & the #responsive-menu div outside of the footer element in order to fix this.
Here's a similar issue w/ some great answers: Absolute positioning inside absolute position
Working on a new design using bootstrap3 and trying to stretch the page so that even if there's not enough content to fill the page, the footer section would stay to the bottom.
The reason why I'm using position absolute, is because there's a link from the billing software that's being added within the content, I don't want to remove the link but position it a bit to the bottom in the footer section, in the center bottom, thus since I can't control where this will appear(do know where appears, just can't control), using position absolute on the specific element helps me here.
Now, that's not issue, just saying why I need to use position absolute and why I made the divs like this:
wrapper
>>wrapper_content
>>wrapper_footer
fiddle: http://jsfiddle.net/raicabogdan/jsk1b7ua/4/
the footer section is properly set to the bottom, however for some reason, the wrapper_content does not go 100% height automatically on load or on window resize. Also if you resize to mobile view, content will go down few table rows.
The content goes under the footer section.
What am I doing wrong here? Left a fiddle of the html page along with some css that I felt were needed above.
Hope there's someone that could get me out of this.
Cheers.
Try this link. I have used this method to get the footer to stay at the bottom of the window.
http://ryanfait.com/sticky-footer/
I am trying to keep my top-bar navigation from going behind my logo image on the header of my page. See below an example of the page when it is maximized in my screen:
Maximized View
Here is what it looks like when the browser window is made smaller:
Smalller Screen Example
I am trying to fix this page so that the top nav-bar that currently runs behind the image when the window is made smaller, will instead move and extend to the right.
Any ideas? The site is Inhishands.com
Thanks!
Your problem is that the menu (<ul id="display">) has the CSS property float:right, so it will always be positioned relative to the right side of the screen. When the screen is made smaller, the right side moves closer to the left, so the menu moves leftwards too (and overlaps the logo).
If what you want is for the menu to always start from the right side of the logo (and not to overlap it), then you could give it the property float:left and add a margin to its left side (like margin-left:370px). There are other ways of positioning it (like using absolute positioning) but this will get the job done.
Use Z-index on the navigation. In the CSS, set the z-index of the hands image lower than that of your navigation and you will see the navigation on top instead of behind.
Here's some information on Z-Index in case you need it: http://www.w3schools.com/cssref/pr_pos_z-index.asp
Nice design.
First of all you need to fix the minimum width of the top menu HEADER in your CSS.
Fix the header min-width according to the resolution you need:
#Header{
min-width: 1237px;
}
or directly into the HTML
<div id="Header" style="min-width: 1237px">
I have centered a div on a page for a group project and while the div itself is centered, the websites contents are centered with the scroll bar in mind. What I mean by this is that the web page contents are centered so that the width of the screen is measured without the scroll bars width. So if the monitor was originally 100px wide, it gets read as 100-(scroll bar width) px wide. Unfortunately, this has caused my fixed position div to be a scroll bars width off center from the rest of the site and it looks pretty funky. Any way to fix that? Can't use jquery, can potentially use a little bit of JS.
Here's the link to my site so you can see what I'm talking about. http://51713941.nhd.weebly.com/index.html
Lets see some code.
This can normally be sorted out with css. Margin:auto
You should use the box model concept in css to style and place the content on the site
Again, the question seems rather vague.