Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I have this weird white line on my front page that wont be removed. I loocked and cant find what it is. the site is responsive and it looks even weirder on on the cellphone. Can someone help me?
Well you have a couple issues. The quickest and easiest fix is to update the css class
gdlr-header-inner
add background-color:transparent;
That is the first issue is the background is white.
The next fix I would do as an easy fix is to look at the div right after the closeing header tag it should have the class content-wrapper.
To that div I would add margin-top:-95px;
At the end of the day the issue is your header is larger then the top part of the image. I wonder if you should merge the two images and set the background color and the background image to the body tag. Then you wouldn't have to worry about it. You then could still push the top down x pixels
http://www.w3schools.com/cssref/pr_background-position.asp
For starters, the div your logo is in along with its padding are too big for the header.
So it's pushing the rest of the page down.
Try changing the top and bottom padding on the gdlr-logo div.
You have a problem with the height of some elements, like:
.gdlr-logo {margin-top: 26px;}
Try to remove some margins and review the height of elements on the header.
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 1 year ago.
Improve this question
Hello my image inside css code is not responding on code, you can see on the screen vh=10 but screen is on full size.enter image description here
First Wrap img with div and give image width and height and then try fixing size to div.
Try to define at least width and height, even if you're putting an "auto" on one of these. Also, try object-fit propreties if your image is in a separated tag, or background-size and background-position propreties if you want to keep it as your background.
Hope it'll help !
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
On the website http://www.northkingdom.com/, when the browser window is narrower than 568 pixels (or on mobile), and you click on the menu button in the top right corner, there is a narrow, vertical, white space to the right of the list:
What creates this white space?
I cannot find any CSS rules or page elements that keep the menu from sitting at the right edge of the screen.
Any help very much appreciated!
The problem is an overflow-y:scrollin here:header.mobile-menu #nav.
That white space is actually a scrollbar. You can replace it with auto instead of scroll
Thats a scrollbar, not a white space. Add this to your css of your ul and you will not have the problem anymore
overflow: hidden;
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I have a border on the following website http://geertsprengers.be/ under the logo's of the nav.
Now the problem is that when I'm on the mobile website and there are 2 lines of logo's, the border should change the same as the arrow, below the clicked logo.
What is the easiest way to accomplish this?
Could you please provide some more information on what exactly you want to happen?
From what I could gather you want the border that is below the logos in your nav, to stay below the logos when the browser is brought down to a mobile size (when your logos go onto two rows)?
If this is the case you will simply need to do two things:
Change the float: left you have on the logos (li tags) to display: inline-block.
Change height: 54px you currently have on the nav to height: auto.
The problem is the you were trying to keep floated elements contained inside an element with a fixed height, which won't work in your case here. Instead you need to remove the fixed height, which will allow the nav to expand to fit the floated elements when they break up.
Hope this helps.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I hope someone can help me with this, I've been searching in my CSS whats wrong but can't figure it out.
If you look at this website: http://viversa.nl/v2/index.html , and click a bit threw the pages, you'll notice some jumping between sites. You'll notice it specially if you click from 'Projecten' to 'People' and back.
It seems "HOME" and "PROJECTEN" are the same, with both a good layout. Next to "OVER ONS", "PEOPLE", "CONTACT" and "SITEMAP" which have a good layout together aswell. But I can't figure out whats wrong and how its possible its jumping, since I simple copied the menu + logo pages + css.
Hope someone can help me out with this!
Thanks!
Sincerely, Stefan
The problem is that the project-page is longer than the screen, thus causing the vertical scroll-bar to appear. Since you are centering the layout and the scroll-bar takes up 20px or so of the space used for your site, what is considered as the center will "move" slightly when the scroll-bar appears.
To get rid of the jumping, you can force the vertical scroll-bar to always be visible:
html {
overflow-y: scroll;
}
The difference is the browser scrollbar. Short pages that don't require scrolling have a slightly wider space available to them compared to longer pages that can be scrolled.
Seems like you got too much text for your images that are only 410px in Height, maybe delete some text or make your background images longer and added some min-height into the CSS?
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
It's a type of layout that has fixed lengths at the edges, but the main content container is fluid.
I made a jsfiddle here http://jsfiddle.net/JyXtR/3/
I just can't get it and I don't understand why.
What I want to get is this
http://i.imgur.com/VPzWE.png
The main content, and content on the right's containers should be the same height regardless of how much content is in them.
Am I really bad at this or is CSS not suited for these types of layouts where they take up an entire page at all times?
Demo. Use display:inline-block;, and adjust the width of both objects. I manually set the height of the main div to 300px for presentation purpose. Note that your inner objects have to use less than height:100%, since main won't scroll.
Maybe it's possible to set a height attribute to a display:table-cell element, but the given solution should work in your case.
Update: http://jsfiddle.net/22D4F/4/
Check it now. But there is one problem, because it cannot be solved only with css.
The problem is layout not work properly if sidebar is longer then content. It cannot be solved without javascript, so YOU MUST SET min-height of content div to sidebar content height.
http://jsfiddle.net/DvaWk/
You need to 'float:left' your chat div and set the online users div to 200px;
EDIT: Also add overflow:auto to #main.