On my one page website at http://s361608839.websitehome.co.uk/pt-build/templatebuild/ if you click on a top menu option the page scrolls down to each section on the page.
Problem when it does scroll, the top part of the page is covering up the top part of the sections.
Is there anything I can do to my CSS to stop this from happening?
Thanks.
Replace some of your margin with padding. When jumping down the page to anchor spots like this it jumps to the edge of the inner box, outside of padding and inside border / margin. What you need to do is move that imaginary line up away from the content inside the div, so increase the padding and decrease some margin to keep the design working.
I did some playing around with your site, modifying to see how it would work for your trainingsessions section, I got this CSS:
margin-top: 0;
padding: 120px 350px 30px 0;
To adjust it with pure CSS, add an additional 151px (the height of your #topwrap element) to the padding-top of each navigable div. Then subtract 151px from the margin-bottom of each preceding navigable div.
A simplified version of this (you'll need to do the math to make it work with your already existing margins and paddings) would look like:
#div1 { /* first navigable div */
margin-bottom: -151px;
}
#div2 { /* all intermediate navigable divs */
padding-top: 151px;
margin-bottom: -151px;
}
#div3 { /* last navigable div */
padding-top: 151px;
}
Alternatively, you can adjust the scrolling position in the javascript by the 151px height of the #topwrap.
Related
So basically, I want two divs to sit inside another div. The first one is sitting inside with no issues, but the second one floats underneath the parent. When I add overflow:hidden I can't see the div anymore. The closest I've gotten to a solution was to add overflow:auto, but that just creates a scroll bar. I have tried resizing, different positioning, overflow and clearfix but so far I can't find a solution. Any ideas guys? JSFiddle demo here http://jsfiddle.net/QLbGc/ Thanks for any help, it's been annoying me for a couple of days now.
You forgot to put float:left; at the slideshow div
It should be
#slideshow {
background-color: #000;
margin: 15px;
height: 95%;
width: 60%;
-moz-border-radius: 15px;
border-radius: 15px;
float: left;
}
So now you have the 'slideshow' div floating left and 'about' div floating right and they can fit inside the parent div.
Basically they were inside the parent div from the first time but the about div was under slideshow div.
Demo:
http://jsfiddle.net/QLbGc/2/
If you're looking to have the two divs side by side here's a fiddle for that.
http://jsfiddle.net/Hastig/QLbGc/6/
I stripped out a bunch of stuff as I wasn't sure you needed it or it was just stuff you were throwing at it to try and affect change.
Somebody mentioned you were missing a float: left; in what we assume you wanted as your left div.
Remember to compensate for margin and padding to match the container div.
In my example the main container was 500px wide. If I set each float div to 250px width when added to the 20px combined margins on those divs the total width goes to 520px and pushes that right div under the left div so you'll want each floated div at 240px to compensate. Same deal with percentages.
If I misundestood your intention and you're looking to hide one of those div use display: none; on it and double the width of the one you want to show.
try to put this code in your css.
.content::-webkit-scrollbar {
display: none;
}
I have boiled down my problem to a pretty simple single file with the CSS included in a <style> tag.
The problem is:
I have a floating right column with a transparent background to show some text and pictures. This works fine, as expected.
Now I want to position a "Site designed by.... " block just above the footer.
I want to use an absolute positioned div for this, which is positioned relative to the containing #content div, which must get the position:relative property to achieve this.
When I set this property, the floating right column disappears, and seems to be hidden behind the background image of the #content block.
I cannot find an explanation for this. A workaround would be to position it relative to the footer (in that case the #footer div would get the position:relative property).
But I just would like to understand what goes wrong here and why the floating column is hidden. See the links for the layouts without and with the relative positioned content div.
Understandably, in the case of no relative positioning, the text is positioned relative to the browser in the bottom left corner.
http://websites.drsklaus.nl/relativeproblem/index_withoutrelative.html
http://websites.drsklaus.nl/relativeproblem/index_withrelative.html
You were almost there! Heres a little help to finish it.
#main {
width: 1005px;
margin: 20px auto; /* shorthand margin for x and y axis */
border: solid black 1px;
/* Added background to main instead so it still covers the full background */
background-image: url('grey-repeating-background-4.jpg');
}
#content {
position: relative;
min-height: 500px;
/* made the padding here margin, made it slightly bigger to accomedate the right column */
margin: 5px 370px 5px 5px; /* Margin right should be as wide as the right column+extra space */
}
The reason for your right column to hide behind the content is that before you put position:relative; on it it is in normal flow, not 'positioned' and so z-index priority is really just by DOM order. Positioning it just made it a whole lot more important; obscuring the right column.
I have this problem that is driving me mad... I've been struggling with it for hours but can't figure out how to over come it.
I am using jqDock and want to place a toolbar in a "box" in a column. There is quite a lot of code included but you can see a sample here: http://ag.wasen.net/index.php?option=com_content&view=section&id=2&Itemid=17
Look at "Simple File Lister v2.0 #2" in the right hand side column where the toolbar is perfectly place. Then look at the left hand side where the toolbar goes vertical and is completely off track.
These two modules (as they are called in Joomla) is using the exact same code!
The difference between these two modules, the left one and the right is that the left one inherits a lot of CSS from the "div" statements in the left column.
The problem seems to be with the inherited "width" from a previously loaded CSS file. If I look at it in FireBug and remove the declaration for #leftcolumn div {width: 191px;} in FireBug the toolbar on the left is working fine.
I have tried to insert my own "width" on all different DIV's and using "!important" but even if FireBug shows the "#leftcolumn div" as stiked-out it still affects my toolbar DIV.
Regardless of how I have tried to "nullify" the inherited "#leftcolumn div" width it still affects my DIV.
Any clues on how I would be rid of it?
Regards,
Anders
Try the below css - Paste this in you template.css file and try to set the width if required on different selectors.
#main_bg #leftcolumn div.module_menu div div div, #main_bg #leftcolumn div.module div div .jqDocked div {
width: 20px;
}
see below image for output: Open the image in new window so you can see clearly.
Problem 1. You are trying to fit a horizontal Dock that has a maximum expanded width of 263px (7 48x48 icons) into a column that is only 191px wide: the Dock is going to overflow!
Problem 2. The template you are using is setting a specific width of 191px on any div more than 1 level below the div.module child of div#leftcolumn. Additionally, your template is specifiying both width and padding on some elements, which is going to cause cross-browser inconsistency and also makes some of the elements extend beyond the bounds of the column.
Since jqDock does not provide many ids on elements, the rules needed in order to override your template are going to have to be at least as 'specific' as the template's, if not more so.
For example, replace your page's rules for...
.sflpage {...}
.sflmenu {...}
#main_bg #leftcolumn div.module_menu div div div,
#main_bg #leftcolumn div.module div div {...}
with...
/*position the Dock's container, ensuring it's visible, and killing
the padding imposed by the template...*/
#leftcolumn div.module div div div div.sflpage {
padding: 0pt;
position: relative;
top: -20px;
width: auto;
z-index: 9999;
}
/*put the Dock in the center of its container, and give it plenty
of width for a fully-expanded Dock...*/
#leftcolumn div.module div div div div.jqDocked {
left: 50%;
margin-left: -150px;
padding: 0px 0pt;
position: absolute;
top: 0pt;
width: 300px;
}
/*kill the width and padding imposed by the template...*/
#leftcolumn div.module div div div div.jqDocked div {
width: auto;
padding: 0;
}
/*center the dock...*/
#leftcolumn div.module div div div div.jqDocked .jqDockWrap {
margin: 0pt auto;
}
/*use this to set/tweak the label's styling...*/
#leftcolumn div.module div div div div.jqDocked .jqDockLabelText {
}
I would also suggest that you need more horizontal space for the Dock (ie. between the module header and the file list), that your labels need better styling so that are visible and readable.
I've been working on http://healthimpactnews.com and I need to fix this issue asap.
For some reason, IE, and IE only, squeezes the right-hand sidebar down below the other divs even though all the div columns are floating and within a fixed width container. My browsers create a horizontal scroll bar when the are sized down, but IE just forces the div down, instead.
Anyone know why?
The div with class ct_w is 1000px width;
The first child of that (ct) is also 1000px width,
so it pushes the second child ct_c3 (the right bar) away... (down)
solution:
completely remove the width property of the div with class ct
.ct {
margin: 0px auto;
width: 1000px; /** <--- remove this **/
}
Yes, your container, "ct_w", has a width of 1000px; your left column, "ct" also has a width of 1000px. There is no room left there for your sidebar, "ct_c3". The other browsers are actually being nice by rendering the sidebar where it is. In fact, they're only doing that because you didn't clear your floats, so they don't understand the box model of ct_w.
Use a clearfix on ct_w, set the width of ct to 750px (or 749px for IE7), and make ct float left, then you will see the layout you're looking for.
Try setting the following:
.ct_w {
...
float: left;
width: 750px;
...
}
.ct_c3 {
...
float: right;
...
}
The following seems to work as well:
.ct
{
float:left;
width:750px;
}
And remove the margin part, because it is not needed when floating the toolbar next to it.
This is really weird. When this page is viewed in FF, it gets a white stripe on top which is part of body - I know because I use red border technique to see the elements.
Any ideas why?
http://www.codecookery.com/allbestimages/index.php?main_page=home
try adding:
#main-page-body-wrapper{
height: 0px;
}
or set the background color to black. I checked it out in chrome and firefox. Used firebug and the chrome inspect element tool. This is not the body that is creating the white space but the #main-page-body-wrapper element.
The problem is that your #slideshow element is positioned absolutely. This removes it from the normal page flow and therefore your #main-page-body-wrapper is essentially empty and just sitting at the top of the page.
I suggest you avoid absolute positioning unless you're really, really sure you need it. I'd recommend making a few changes. First of all get rid of the absolute positioning:
#slideshow {
height: 541px; /* Height of the slideshow */
position: relative;
/* Remove width, left, top and margins from here */
}
position: relative; in the above block sets the current position as the starting point for any child elements that are absolutely positioned (such as your slideshow images). If this doesn't make sense then check out:
http://css-tricks.com/absolute-positioning-inside-relative-positioning/
You don't need width: 100% on divs and other block-level elements because that is the default so remove that:
#main-page-body-wrapper {
/* Remove width from here */
text-align: center; /* IE6 centering Part 1 */
}
#main-page-inside-wrapper {
margin: 0 auto;
overflow: hidden;
padding: 10px 0 0;
width: 1000px; /* Width of the slideshow */
text-align: left; /* IE6 centering Part 2 */
}
I don't see why you should need #content-wrapper inside #main-page-inside-wrapper - it doesn't look like it's doing anything. You should try to keep your HTML as simple as possible to avoid mess and confusion; You only really need 2 divs to do cross-browser centering like you're doing so I'd get rid of #content-wrapper if I were you.
This is by no means a complete solution but should help you get to where you're going. Good luck!
The solution was to set padding/margin to 0.