Relative Positioning vs. Absolute [closed] - css

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
The website is www.cleantelligent.com/tour/
This image, as a background, has tooltips and links on it.
The issue is that, if you re-size the window, the image and title (the main div, I think) moves left and right. This means that the "Take the Tour" sub-head isn't always aligned perfectly underneath the "Tour" Title in the black bar above. They should be lined up down the left so that the image is centered underneath the header content.
Is it my positioning that's causing this? If so, how can I fix it? I've tried positioning it absolutely, but that collapses the page and the footer pops up to the middle.
Any ideas would be helpful. Thanks!

float: none !important;
margin: 0 auto !important;
width: 960px !important;
Add that to your styling for #primary in your css. You have some unnecessary styling being applied.

Related

Strange white space appearing in page layout. What causes it? [closed]

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;

Border css on mobile website [closed]

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.

how to move a slideshow to the background? [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
I just started learning HTML/CSS and I've encountered a problem. On my website (www.seandorsman.nl) I have a nav bar on top with a drop down menu. The menu works fine but it is behind the slideshow I have on the main page.
Is there a way to make the navbar always appear in front of the slideshow?
You want to use z-index: in your stylesheet, so I would make your nav bar a higher z-index than the slideshow. This is basically a hierarchy of where elements lay on top of each other, setting z-index: 999; in your css for the navigation bar and drop down should fix your issue.
I would try to show you where exactly to add it but the link you provided does not seem to work.
As other people have mentioned, you will want to apply a high z-index to the navbar. However, for this to work you will also need to apply position:relative;, as z-index requires a position to be set.
you can add a z-index to your menu items. for example, if your css is like this:
#menu li {
z-index:9999;
}
it would take all of the list items and move them to layer 9999. sometimes the position attribute can play into this as well, but I would try modifying the z-index first.

Alignment Issue: Full Screen vs Resized [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
I took a WP theme and have customized it for my needs. I have got into a issue now with CSS.
It looks fine on full size
However when resized or when viewed on iPad, the header is getting distorted. As you can see the RSS icon on the top right has gone past the colored header.
Any pointers in this regard would be appreciated.
Please let me know if you need some more information.
In case you need to check with Firebug/other inspector tool, here is my site
If a block overflows, it does not scale the parallel ones. Putting div#header div#menu and div#footer into div#content parallel to the container should solve the issue.
CSS alternative way:
Add floated fixing to the container and all childs, in this case:
#top-overlay, #header, #menu, #content, #footer {
float: left;
min-width: 100%;
}

CSS Height Messing Up [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
I am having a terrible time getting my height of my DIVs to properly scale with the height of the DIV's containted inside of them. Currently the DIVs that contain other content DIVS are not set to any specific height, but for some reason they have a height way beyond the content that is contained in them (which currently isn't anything)
Here is the link:
http://www.brockpatterson.com/secret.php
As you can see, the 1st blue area is super tall, and the lighter blue area below is the same. I'm not sure if some other CSS element is messing with it. I've been looking at it and messing with different perameters for a few hours now.
Thanks,
drummer
#content_container is set to 100% height. Remove that and you'll be fine.
Why do you have height: 100% at #content_container?
(Also, you should never have two HTML elements with the same ID...)

Resources