I had a page with the right-side layout like this one:
http://www.comehike.com/hikes/search_hiking_groups.php?redirect=yes&radius=&postal_code=
Where you can see the right side have 2 spots: the yellow buttons and the links below.
What I am trying to do is place a google ad on that page. But the way I am doing it breaks the page. Here is an example how it is messing up the right side css:
http://www.comehike.com/hikes/search_hikes.php?redirect=yes&radius=&postal_code=
What am I doing to mess up the css? And how can I fix it?
Thank you!
Your sidebar has a fixed height, so doesn't expand to contain the new content:
.what_to_do {
height: 210px;
}
Remove it.
Try putting it in an iframe instead. That should encapsulate the ad in its own little window which can have independent css rules.
It looks like the side bar is using class .what_to_do, which contains the rule height:210px
I would recommend: instead of setting a fixed height, clear the bottom elements if they are floating, and let it naturally be the default of height:auto;. This lets the sidebar column expand to its contents.
Related
I deal with the following problem.
I have a wordpress theme in which there is a left side menu that when I press the hamburger button, it pushes the whole content, header and main container to the left.
What should I look into?
I have tried changing position from fixed to absolute and overflow to overlay but I might now doing it correct.
I cannot provide code because I don't know which file is responsible so, any chance where should I look into?
I am talking about Atelier theme.
Thanks a lot in advance!
This somewhat depends on how the menu is implemented, and without further details it's somewhat hard to say 100% what will work for you.
That said though, if you want to display your side menu over top of the content without pushing it to the right then you would want to set the Z-Index of the menu such that it renders above the rest of the content on the page.
Here is some details that might help you achieve what you are looking to do:
Z-Index
Setting the position attribute for the Manu should do the trick. More information: CSS position property
When you click on hamburger. please check body or content added margin for left side. if left side content margin added then remove margin-left: 0px !important. If added new class then help with jQuery remove this class when your click on hamburger.
I've got a Boostrap website with a navbar across the top and two columns divs in a row. The first column contains an image and should always stay fixed in position. The second column contains (potentially) a page or two of text and should scroll independently.
I've used position:fixed to hold the image in position, but my issue is that I would then like to add a link underneath it that links to the terms and conditions for the page.
BootPly
Is this possible?
Many thanks.
There a couple ways of doing this. I won't go into code since you don't have anything to work off of so I hope you can understand my explanations.
You can try simply putting the link position: fixed as well and set the top property of the link element so that it'll be positioned below your image (you can play around with this).
Use a div that is set to position: fixed that will contain both the image and the link. Then you can just simple put the image inside the div without any positioning and the link should go underneath the image without any positioning either.
You can set the text on the right side to be overflow: scroll and set the width/height of the right text in the div so that it can scroll. This will essentially keep the document still but allows the user to scroll up and down the text content inside the right side div.
Number 1 is the quickest solution, number 2 IMO is the best solution. If you need some help with the code, post a Fiddle so we can see what you're working with.
Try this:
DEMO
<div style="position:fixed">
<img src="http://placehold.it/100x300" class="img-responsive">
Terms and Conditions - Privacy Policy
</div>
Basically, I'm trying to make my first website, ever, and I'm having trouble already.
I'm making the navigation bar and it's all looking good, but as soon as I put my browser into windowed mode, the navigation bar extends beyond what it was, so I have to scroll sideways to reach the end of it.
P.S.
I'm new to stackoverflow, still trying to figure it out.
So I might do something I'm not supposed to, just let me know and I'll try to fix it.
Edit 1:
I'm using Google Chrome.
Here is the JSFiddle with full code:
http://goo.gl/Z5wvTn
If you look at the header and footer, you should be able to see that the main section and navigation bar is actually wider than them.
The navigation bar and main section are within a div, while the other elements arent.
This effect is on a much larger scale without JSFiddle.
You want to create something like this: JSFiddle
If yes, then use % or emin place of pixels
Place the header and footer in the wrapper div and then decrease or adjust the width of the .wrapper div in your css.
jsFiddle
Based on what #Aayushi Jain and #Shivam said use wrapper with percentage. That way, your wrapper will respond according to the window screen.
Look up responsive design if you want to know more about it.
My version would be to add width:100% on your wrapper instead of defining fixed width.
Also, practice on using ems and % like #Aayushi Jain said.
.wrapper {
width: 100%;
}
I have designed a simple website. The only thing left is to make a small box on the left. But I want to be always visible even when I scroll down. It's use will be something like a small ad. ![floating box][1]
Can you post an example or two? what css is needed for this? (if it's needed)
unfortunately I can't post any images because of I am a new user (I am not allowed to.. and this kinda frustrating)
But I will post an image as soon as possible.
You should apply position: fixed to this box.
Fixed Positioning
An element with fixed position is positioned relative to the browser
window.
It will not move even if the window is scrolled.
Here's a sample: http://www.w3schools.com/css/tryit.asp?filename=trycss_position_fixed
You can read more about CSS positioning here: http://www.w3schools.com/css/css_positioning.asp
Here's a jsFiddle that I baked for your that shows how you can get this working: http://jsfiddle.net/leniel/8ub7s/2/
You can see that even when you scroll, the title is still visible and if you hover it, the ad box will show. Just adapt the CSS to your needs as you want it floated to the left. :)
I have a website with a blog and sidebar on the right hand side and it looks fine, however when I go onto page 2 of the blog, the sidebar moves down to the bottom of the page.
You can see what I mean by going to these links
http://www.beatinganger.com/blog (Sidebar looks normal)
http://www.beatinganger.com/blog?page=1 (Sidebar moves down to the bottom)
I have looked at the source code and I can see no changes in the difference between the 2 pages.
Any help would be much appreciated.
Your #left_container element on the sub-page is not being closed and therefore the #right_container element is being contained inside it.
The container div closing is causing a problem (as the other answers point out); also your div with the vertical_menu class is breaking out of its allotted size - which will probably cause float issues when your divs are closed:
Yeah, something is up with the template of the second URL, so that the sidebar is injected INSIDE the left 'main' column.
the #right_container http://www.beatinganger.com/blog?page=1 is in the different hierarchy than the enter link description here. #right_container and #left_container should be in the same parent and level as shown in the first link.
Another advise though, I notice that the content of the #right_container has slightly "wider" content than the container itself. Make sure the content elements are smaller or equal to the width of the parent container, or set #right_container -> overflow: hidden; a quick hackish way though.