On this one particular page, I have added a secondary menu (gray bar) under the primary menu (red bar) to have a few links that, when clicked, will scroll down the page to the correct area.
The secondary menu was, by default, much taller than I wanted it - so by adding a height: 40px; value, I was able to get it to the height I want. The page links, however, stubbornly did not adjust along with the height of the menu and thus, when viewed, they are obviously not in the correct place.
Is there a particular CSS value I can add to try and help this issue? I've tried adjust margin-top, padding-top, vertical-align, etc... and some of that adjusts the gray bar, but absolutely nothing has yet to adjust the text for me.
It doesn't help that I'm using a paid theme I bought rather than one I developed myself (in an attempt to make site management easier for someone else who takes over the site, this is more of a "drag-and-drop" template).
http://www.miltonpreserve.com/about/
It looks like you added the 40px height to the div with the #aboutmen id. However, some of the content nested in that div has padding that makes it taller than that. If you remove the padding from #menu-about-menu you should see the text become visible. Then (if needed) you can add 'vertical-align: middle' to the elements that you have nested in #menu-about-menu.
Here's a simplified version of what you have going on:
HTML
<div class="outer">
<div class="inner">
<div class="text">item one</div>
<div class="text">item two</div>
</div>
</div>
CSS
outer {
height: 40px;
background-color: yellow;
}
.inner {
padding: 30px;
}
This simplified example has the same problem you're experiencing. If you remove the padding from .inner, you'll see that the problem goes away. Here's a
jsfiddle with the same code.
Hope that helps!
Related
I've just made this section of images, where you're supposed to scroll horizontal to see the different images, and by the looks of the following screenshot, this is visually almost the result I wanted, with a few style changes to come
Section without overflow applied: the result I wanted
However, when I apply overflow-x: auto, in order to allow horizontal scrolling, the section cuts off the images on the right hand side:
Section with overflow applied: NOT the result I wanted
How can I make the section horizontal scrollable but without cutting the images off on the right?
It is basically a flexboxed section with three images so far:
<section class="projectSlideshow">
<img 1>
<img 2>
<img 3>
</section>
.projectSlideshow {
display: flex;
flex-direction: row;
height: 75vh;
margin-bottom: 2.25rem;
}
Oh well, sometimes, the solution you're looking for is so simple that you don't even think of it.
I solved it by putting the <section class="projectSlideshow></section> outside of my <div class="content"></div> (which contains the text above and below the slideshow, which is using padding to push in the text (the section was inside of it at first)), making them siblings to each other, instead of the section a child of the div.
Putting the <section> outside of <div> makes it possible for the slideshow to go from border to border (100% width). Then just adding the same margin-left to the first image as well as the same margin-right to the last image as the padding of the text gives the exact result I wanted.
A quick video of the result.
So, I am new to HTML CSS and in progress in designing a website. I am designing a website which is similar to trello (https://trello.com). Where you can add cards, delete cards, etc.
I have this background problem where the background does not cover the whole page when I scrolled horizontally,
Here is the problem I have:
As you can see, the whole page looks okay, the background works properly. However, If I added more list, the background does not works properly.
Here, the background is white when I scrolled horizontally. It does not cover the whole page.
Here is my Html code:
<div class="container" id="amethystBackground2">
<!-- contents here -->
</div>
Here is my Css code:
#amethystBackground2
{
position: relative;
background-color:#9B59B6;
//This is needed to remove white space on top of page
margin: 30px 0 0 0;
//This is needed to for the background cover the whole page when scrolled verticallly
//(when you have too much cards, you need to scroll down)
min-height: 100vh;
min-width: 100vw;
//This is needed give space on top of page
margin: 50px 0 0 0;
}
I tried adding overflow-x: hidden and it is just not allowing me to scroll horizontally which is not helpful.
I also tried width:100% and 'height:100%', But it does not work.
Please help me, Thank you in advance.
The .container class of Bootstrap as a size in pixels, so it won't fit the whole page if you extend it.
First solution
Set your background-color to your body instead of your container div.
Just move background-color:#9B59B6 to
body {
background-color:#9B59B6;
}
Second solution
The "Bootstrapest way" would probably be using a container-fluid instead of a container, because it can expands to fill the available width.
<div class="container-fluid" id="amethystBackground2">
<!-- contents here -->
</div>
More about container-fluid here.
You have a class of container on there, if you are using bootstrap my advice would be to create your #amethystBackground2 div as an outer div so something like this:
<div id="amethystBackground2">
<div class="container">
</div>
</div>
Now set your widths/heights accordingly. If you use the overflow-x: hidden rule then you are telling the page that you don't wish to scroll horizontally so scroll bars will not be shown.
I have a iPad frame and want to have a larger image behind it (the page content) that scrolls down as you scroll. My css is more complicated then the example in the fiddle here https://jsfiddle.net/vk0jk37v/ but I cant seem to get even this to work.
in my real webpage I want to scroll down normally until I get to this image, then I want the scroll to effect the "page content" in this image. After I want to allow the user to continue scrolling normally after the "page content" of the image ends.
Edit: I have updated the fiddle and it rough but essentially what I am looking for except when I set the iPad frame to be on top of the image I am unable to get the content to scroll. the reason I need it under is to keep the image together when resizing the window with out covering the "fixed nav" or black side lines. Any thoughts on this? and thank you Felk for the hint in the right direction
Edit2: the image attached is the context in which I am applying this.
example html
<div class="container">
<img class="frame" src="http://s11.postimg.org/44ejhu0jn/ipad_frame_780.png" />
<div class="inner">
<img src="http://s11.postimg.org/xtwbnx937/ipad_content_660.png" />
</div>
</div>
example css
.container {
width: 70%;
position: relative;
}
.frame {
/* position: absolute; */
width: 100%;
z-index: 100;
}
.inner {
height: 558px;
overflow: scroll;
position: absolute;
top: 14%;
left: 38px;
}
.inner img {
width: 92%;
z-index: -100;
}
Ok. I was trying to fix your fiddle but at the end I have changed too much.
I will explain thought what I would do if I wanted to do your project. (hopefully if I have understood your question well enough).
First at all I would position the image of the ipad at the background with position:fixed and negative z-index. Now we have the image NOT moving at all as the position is placed relative to the window and not to any element. And also we have the first part of your content over the image and scrolling nicely.
Then we focus on the right flow of the html elements when scrolling so basically there will be more content under the first (and later under the image). I have added another div with red background to illustrate better the problem.
The html would look something like this:
<div class="container">
<div class="outer">
<img class="" src="http://s11.postimg.org/xtwbnx937/ipad_content_660.png"/>
</div>
<div class="frame">
<img class="ipad" src="http://s11.postimg.org/44ejhu0jn/ipad_frame_780.png" />
</div>
<div class="moreContent"></div>
</div>
Now we focus just on separate the top content from the bottom content. To do this we just add a big margin-bottom to the first content. Now when scrolling once you reach the end of the first content the image at the background will show then after the margin is over the last content will start flowing over the image (which is what you don't want)
basically we have this: FIDDLE1
Now it's just time to do a very simple jquery (it's always simple if I can use it). We just need to give some orders to the browser so I have used this:
$(window).scroll(function () {
if ($(window).scrollTop() > 1127) {
$(".frame").addClass('relative');
$(".outer").addClass('no-margin');
}
else {
$(".frame").removeClass('relative');
$(".outer").removeClass('no-margin');
}
});
basically I'm telling the browser that when the scroll is higher than 1227px (height) to add a class to frame and another to outer and if you scroll back to remove the classes.
Then The class I add to outer will just remove the big margin between first and last divs while the class add to frame will just make the container of the image relative so the flow of the html is normal and the image will keep scrolling down with the rest of elements.
Of course the 1227px I choose is based on the jsfiddle images you provided but in your future projects it won't be too hard to find the real height of your first content justinpecting it with chrome or simillar. same with the big margin I added.
The rest of changes was to make the sizes correct and center all elements in the window with at 600px width.
Here you have the final FIDDLE
So, I have a number of buttons that will expand a div with some content below it.
I want to place them in an order so that the expanded content is right after the button that will expand it. This is because I want the tab order to be:
tab to a button and click it
tab through the expanded content
tab to the next button or tab to content below
To achieve this I've made the expanding content to be position absolute. So far so good. The problem now is that the content after the expanded container does not get pushed down.
See page and code here: http://niklasholmberg.se/temp/tab1.html
My first solution to this was to measure the height of the expanded div and add that as padding to a container that is before the content that should be pushed down.
See page and code here: http://niklasholmberg.se/temp/tab2.html
I don't quite like the solution and want something that does not require scripting to get the layout right.
Can I somehow make the div with class group also "wrap" the container that is positioned absolute?
Can I somehow position the expanded div in another way that doesn't use position absolute but achieves the same result?
Or maybe someone has a complete other solution to this case.
Thanks
Okay,
you can use position relative to expanded div, ie article in this case.
<article id="content1" class="expandarticle">
<h1>Content 1</h1>
aa
<button>bb</button>
<input type="text">
</article>
your css should be
.expandarticle {
background: none repeat scroll 0 0 #ccc;
display: table;
left: 0;
padding: 10px;
position: relative;
right: 0;
}
I'm currently creating a website and I came across a strange thing: I have a content div that's 950 width and centered on the page. Inside that I have a header div, a menu div and some other content div. I would like the menu div and that other content div to be right next to each other so I thought about using float:left on both divs. However, when I use this float:left on the menu div, it's getting pushed to the right and I can't figure out why. I think some other element is pushing it to the right.
I'm using a custom Drupal theme, a subtheme of Zen to create the page by the way.
Here's the HTML I'm using to create the page (without the header):
<div id="root">
<div class="content">
<div class="left-menu">
<ul>
<li><p>Camera</p></li>
<li><p>Audio</p></li>
<li><p>Licht</p></li>
<li><p>Lenzen</p></li>
<li><p>Grip</p></li>
<li><p>Accessoires</p></li>
<li><p>Recorders</p></li>
<li><p>Transport</p></li>
<li><p>Edit suits</p></li>
<li><p>Crew</p></li>
</ul>
</div>
<div class="products-overview">
This is some other content that I want to the right of the menu.
</div>
</div>
And here are some CSS properties I've set on left-menu and products-overview:
.left-menu {
margin-top: 10px;
background-color: #BBB;
width: 150px;
float: left;
}
.products-overview {
background-color: #BBB;
float: left;
}
Could anyone please explain me why the left-menu is being pushed to the right?
Hmm, I believe this is a result of the normalize.css stylesheet you're using.
The problem stems actually from the .header element, which has a table within it. The normalizing stylesheet has a margin-bottom:1.5em applied to the table, which translates into a margin on the .header element (since it has no padding/border), which in turn sends the .left-menu to the right (since the margin causes there to be no space for it to fit on the left).
Adding to your current .header table definition can fix this, with a simple:
.header table{
margin-bottom: 0;
}
I hope this is what you were looking for! If not, let me know and I'll be happy to help further. Good luck!
I tried to replicate your problem. I did and found a solution that should work. Just set the products-overview class to float:none. See this fiddle. http://jsfiddle.net/shaansingh/yj4Uc/
In Mozilla Firefox it looks ok to me. From your code, I can only see that you need a width for the content div. and watch the dimensions, especially left/right padding and borders.