When the browser gets stretched from its width, the header doesn't move, but the content of the page does. It's driving me nuts. If you stretch it far enough, the banner eventually ends. IE: it doesnt repeat further the banner.
Any advice? I'm not sure which part of the source code would control this. I'll put the CSS up and if needed, I can throw up part of my HTML.
Image Examples
Web
Without seeing your markup (which would be helpful to share), it looks like line 9 is your problem:
header#mast{margin:0 0 0 0px;width:1200px;position:fixed;top:0px;left:0%;z-index:100;}
Update it to:
header#mast{margin:0 0 0 -600px;width:1200px;position:fixed;top:0px;left:50%;z-index:100;}
(Note the left:50% and -600px left margin (half the width of the element).
If you wrap your #mast and #primary-nav' elements in adivthat has a style ofmargin: 0px auto` this should cause everything to continue to center with the rest of the page as your expand the window.
As far as the banner ending is concerned, add the style width: 100% to the element that is responsible for it for the resulting infinite expansion as you widen the window.
EDIT
Since you've added the website, put the contents of the header in the following tag:
<div class="container container-twelve">...</div>
This will center your image, text, and links.
It was a large combination of difference changes that were answers. Basically it came down to a number of width changes.
If I set width 100% in one place, it had to go in multiple ones because the entire mast div was nested divs. Also, to get the banner to expand further to right, it had to be 200% for width.
The proper code is reflected in the website, at least for my solution.
Thank you everyone, and specifically TMan.
Related
I know it aint short but I fresh in css and I can't solve those questiones for about 2 weeks now...
I can't move my .headline-box to the bottom of the image. I'v tried to change my display and play with, block, flex, grid and changing it to row/column justify/align but nothing. I'v ried to change position to bottom: 0 an squat...
Can any one pls tell how to fix it? And you this solution?
Why nothing that I'v done worked?
And why when I gave position: relative to this class, it went after the image, Down side..?
And besides that, I can really use help to make my code more simple...
I post link but this the url:
Codepen
Thank you all :)
I moved your .headline-box to the bottom as you wished. The problem was caused by a few things, the most important one being that your header/container-fluid/row did not have a height, and because your body did not have a height either, doing this would give no result anyway.
I did the following things:
body & html now has a height of 100% (always do this!)
header also has a height of 100%.
removed the image from your html and applied it as a background-image on your header.
your .headline-box now has bottom: 0, which now puts it at the bottom.
I cleaned up your code significantly and left out the following unnecessary items:
the extra <section> for just one h3.
<div id="main img-div"> did not have an ending tag.
was also unnecessary because you already neatly put your content in a header and section(s).
Here is the updated Codepen.
If you have any further questions, please let me know :)
I need to construct something like this: https://youtu.be/-pv77UW1w6g
But I'm facing problems to set div side by side with no space between them.
I made a wireframe to help to show my idea like the video above: https://dl.dropboxusercontent.com/u/9095670/multiple-divs.jpg
It's important to say that I'm using bootstrap and it's a responsive project. So, I don't want use fixed width or heigh (if possible) to do that. I've tried use display: inline, but I got many holes between them due the fixed min-height.
Thanks a lot for the help.
The issue lies in the fact that you markup likely has whitespace between the elements, the simplest way to avoid this is to set font-size: 0px; in the document body, then add a class to each child div that re-sets the font size back to whatever you want.
just do this:
<div class="wrap">
<div class="children">1</div>
<div class="children">2</div>
<div class="children">3</div>
</div>
http://codepen.io/damianocel/pen/PPEqJm
Ok here you go.
You can comment out the keyframes, but I have put a bit animation in it, your video made me:-).
To explain this...as you see, there is no height declaration on the divs, only on the main wrapper div. And on the img tags, for demo purposes.
As you can see the divs will adapt height to whatever content is placed in to them.
Same for the pictures, you make them the size you want.
With the flexbox layout as it is there, I make the divs being placed as column, i.e. vertically. There is a height declaration on the main div, this one you will need if you want to display it like this, but only this one, without a height on main div, flexbox would never create a next column, it would just stack them one over the next. This way, as soon the height is reached, it creates a new horizontal column. This would be possible in other ways as well and takes some understanding of the flexbox model, do look into it, i thinks it is the future of layout.
And you set a width on the children class, i set it to 30% here, for 3 rows(flex will still create a 4th,5th etc, but these would fall out of the wrap div, so, a bit calculation is needed on your part.
Play around with it and see what happens if you change the children class width, or put more/less text in it, careful with margin, margin is bit odd with flexbox, this is beyond the scope here though.
Do not be afraid when flexbox creates a new row, don't try to fix it with margins when it looks odd(new or od row having a gap etc, you will see what i mean).
And this will be fully responsive as it is.
* {
box-sizing: border-box;
}
#keyframes bro{
1% {transform: skew(5deg, 6deg);}
25% {transform: skew(10deg, 5deg);}
75% {transform: skew(15deg,9deg);}
90% {transform: rotate(720deg) scale(0.1);}
}
http://codepen.io/damianocel/pen/PPEqJm
If you have any question, ask anytime.
Thanks for all help, but I solved my problem with Masonry as hungerstar said. The Masonry is good if you're using Angular.js too.
Not sure how to best ask my question. And I can't yet post screenshots. :( This issue does happen in mere current coding practices. You can currently even see this issue happening on Facebooks home page.
Here's my URL:
www.alpacanation.com
How to replicate live
Grab the right hand side of your browser and pull inwards. Eventually a scroll bar appears. Not necessarily bad. As I have a fixed with here. However… Notice the scrollbar is the length of the background color up in the top of my header which is actually creating a "Curtain" like effect.
Make matters worse:
If on other high level parent elements like .Footer or .Page you play around with overflow and position relative the curtain will then begin overlaying on top of the entire site.
Check out Facebook: They often have this issue as well. Obviously most don't notice it as it's not going over top of the content.
In either case I know there is something not right.
Help appreciated!
Add something like this to your CSS:
body { min-width: 980px; }
You have min-width: 980px; set in many of the elements on your page, but not on html, body, or .container. Once the viewport is smaller than this, these elements will overflow html and give you the scrollbars you're seeing.
But this doesn't make html any bigger. It--and its background--is still at the viewport size. This is why you get the "curtain" effect when you scroll.
Setting width: 100% on html doesn't fix this; this only sets html to 100% width of the browser window. If you're going to use min-width, make sure you you don't just apply it to elements that hold your content, but also those that have your backgrounds.
to fix this, add
html, body {
min-width: 980px
}
in your www.alpacanation.com/styles.css:40, then you are done. :)
EXPLANATION: the problem is this container,
<!— stat container —>
<div class=“container”>
<!— START FOOTER MENU SECTION —>
that container has width:980px which screws up the view because it forces that container to stay at 980px wide while the rest is shrinking, thus creates the ‘curtain’ like effect.
I have been really pulling my hair out on this.
Here's my issue: I have these two pages where the header with logo and login details should always stay at the same place. On one of the page I notice that the header moves depending on the length of a div I have underneath!
Here's the page:
http://presencepro.fr/speakspot/homepage-logged-out.html
If you remove a big chunk of the lorem ipsum text (so that everything fits in your viewport) you will notice that the header falls back into place where it should be. It's as if the fact that the div is too long has an influence on a div above.
What could be the problem?
You can compare side by side with this second page, this is where the header should always be:
http://www.presencepro.fr/speakspot/login.html
Many thanks for your time on this.
Guillaume
The problem is cause by the width of your screen being reduced by the scrollbar and therefore everything that is centre aligned is forced to move.
I would suggest you force the vertical scroll bar to always appear by using the following code in your CSS.
html {
overflow: -moz-scrollbars-vertical;
overflow-y: scroll;
}
I have a gradient background that I'm using like follows in an ASP.Net Webforms application:
<div style="background-image: url(foo.jpg) repeat-x;">
... Injected HTML codes
</div>
Where foo.jpg is a 200x1 pixel image. My problem is this, the height of the injected HTML varys from about 200px to 1000+px depending on size of a datagrid. Also, this segment is part of a much larger page that uses for positioning content.
What I would like is that after the HTML is injected, have the background automatically stretch to fit the space so that the gradient is applied smoothly over the entire height.
CSS cannot stretch background images.
However, IMG elements can be stretched, so you can put an IMG right before the grid, use CSS to give it position: absolute and z-index:-1, and use jQuery to set its dimensions to be equal to the grid.
I was researching exactly how do do SLaks solution and discovered a "hack" that works for my situation. While it doesn't do a stretch operation, I'm simulating one in a way that works for my situation and it is 100% CSS. I don't claim that this is a general solution, but it does work for me.
To answer the question, I need to be a little more precise in my definition of my problem.
in my original code,
<div style="background-image: url(foo.jpg) repeat-x;">
... Injected HTML codes
</div>
foo.jpg is 600px x 1px gradient from a color to white which is color of web site. This way on the larger displays, I get a very smooth transition from color to white. That it doesn't go all the way to the bottom is something I can live with. The problem comes when I need to render some data that displays only 300px high. Then only 300 px of the 600px in the gradient display. Resulting in an "ugly" step change in the color. This is what I really needed to get rid of by doing the resizing.
While resizing the background is the technically cleaner solution, what I did was
<div style="background-image: url(foo.jpg) repeat-x;">
<div style="background-image: url(fooBottom.png) repeat-x; background-position: bottom;"
... Injected HTML codes
</div>
</div>
fooBottom.png for me is a 200px by 1px image that is 100% white at the bottom and 100% transparent at the top.
The key thing on the inner is the "background-position: bottom;" This positions the new background section. If the section being displayed for me is >800px high, this new code does nothing visually.
But for sections shorter than 800px, what happens is the bottom image gets closer to the top. This coverage occurs because the inner block is drawn "above" the outer block. Then if the section gets shorter, the bottom background image covers more and more of the top background image.
But because of the transparency in the lower image, it ensures that on shorter sections, that there is a blend to white at the bottom.
I'm going to create a blog on my personal site that shows examples. When I get the example done, I'll update this post.
UPDATE - I've posted a working example at http://sntsoftware.com/Blog
I've been in your situation before, and I ended up having about five different background images for the resolution variations. If it was their first time to the site (no cookie present), I'd present them with a landing page where I set a cookie (using Javascript) with the value of the client resolution (see my getViewportDimensions function in this blog post). On the server-side, I evaluated the resolution on the next request and chose which image to inject in my CSS. It works well. Be sure to have a default resolution set on the server-side in case the user agent has Javascript or cookies is disabled.