I'm not really a CSS-hero ;-) Well, I try to create a form with bootstrap and some custom css.
I want 3 columns:
Content
Editor
Settings
The Editor should be fixed.
Thats my html: http://d.pr/n/YsVJ
The part of the fixed editor is:
<div class="form-vertical fixed">
<?php echo $this->form->getControlGroup('content'); ?>
</div>
I added some custom css like this:
http://d.pr/n/v9EN
Well, it works, the editor is fixed, but there is one problem: If I use my iPad or Netbook the div of the editor overlaps the div of the settings (span3).
How can I solve that?
By setting something as fixed it removes it from the flow of the document, which means it won't affect anything else on the page.
You would need to use a margin or padding to create a bit of extra space for the element that is being overlapped and not positioned fixed.
Related
this is my code:
Link to Codepen
How do I make the website stop scrolling down where the content actually ends?
overflow-y:hidden;
in body element, it won't work because it will not give me scroll the page at all. but I need to scroll it down where my content ends.
How can I do it or prevent it in the most simple way except using js or bootstrap?
The problem happening because every new element goes lower and lower.
Thank you for help !
It happens because many elements has position:relative. Position relative saves place where element should be rendered by default.
You need change html structure and css.
Example: codepen
I am using this example and copied the same exact code but for some reason my page has a gap between the top of the page and the sidebar as shown in the picture.
I tied absolute and fixed positioning. The height in css is already set to 100%.
What do I need to do to close that gap ?
Without looking at the actual html/css it's hard to guess what the problem is, however from the small strip of bookmarks in your screenshot it looks like you are using Chrome browser which will allow you to "Right Click -> Inspect Element" on the sidebar.
This will let you adjust the css properties live in the browser, from here if you click on the "Computed" tab you will be able to see all the CSS properties that are affecting the div.
I would recommend looking at the margin, padding and top property of the div.
Always i try to not ask about my problems, google about it etc. But now i have big problem with my code. I have http://html.bpcoders.pl/4hero/ left sidebar always visible, there is fixed position but content is bigger than height of sidebar and part of content is outside screen.
I dont have any ideas how i can do it for good utility. Did You have ANY ideas about it? Sorry for my englisj is not my first language .
Add a scroll to your side bar by doing the following:
on you element, add the css overflow-y : scroll;
so your element head would look as follows:
<aside style="overflow-y : scroll">
On my wordpress built site, with a Responsive theme child theme, there is a div which contains widgets.
The widgets and their content are showing fine, but the "wrapping" div is not showing what I have styled via css. If I use firebug, I can see that the div is appearing up at the same spot as another div "featured", but is obviously behind it. Well, I need it to be below.
The site is http://thelawcompany.com.au.
The problem div is <div id="widgets" class="home-widgets">. I want the background and top-border that I have declared in CSS to appear behind the widgets. Also, there is a massive gap below the widgets that I can't seem to get rid of.
It because the #featured element is floated.
A solution is to float the widgets also by adding the class grid
Demo: Problem, Solution
<div id="widgets" class="home-widgets grid">
I have a layout like this: http://jsfiddle.net/MTWu5/
Centered page, with sticky header. Inside the header there's menu links to anchors in the page. My problem is when I click on them, I want the anchor to scroll just under the header, not behind it.
How could I do this??
First, i'd write the anchor that way.
<a name="anchor" id="anchor"></a>
If you don't use the close tag for the a element, no position style can be applied without missed up everything.
Then i just applied that style
#anchor{position:absolute;margin-top:-100px;}
It seems to works. Your layout is preserved, no margin. That solution works only if you work with fixed height. The margin top is the height of your header.
Hope that is what you were looking for.
Link to example jsfiddle
hai your problem is fixed "The path is: http://jsfiddle.net/MTWu5/2/