Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 9 years ago.
Improve this question
I am rather new at coding websites and am having a little difficulty coding this website.
Note: I have uploaded 2 pages onto my business website to demonstrate my problem. Please don't click on the links as they will not work properly.
The home page is working fine www.dbayliss.com/rshome.html, but I am having trouble with the contact page www.dbayliss.com/contact2.html.
As can be seen the container or wrapper what ever you want to call is is not holding the content of the contact page. I have the container's height set to 100% which is working for the home page just not the contact page.
Here is the CSS.
Removing top: 50px; from style2.css line number 25 seemed to have moved the logo into the container. Since header is already inside container, you do not have to offset the header by the 50px.
#contact {
width: 400px;
height: 282px; //change to 800px or more
position: absolute; //change to relative
top: 90px;
left: 150px;
color: #000;
font-family: 'Noto Sans', sans-serif;
text-align: left;
font-size: 14px;
display: block;
}
when position set to relative, it sets the element out of your container so your container doesn't get actual height
Related
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
I am doing a website with wordpress and I have this problem. While editing some of the css of the page, I wanted to make the footer go a little bit closer to the image widgets. The problem is on Firefox, the site is perfect, but when we look at it from other browsers (eg: chrome or safari) it is on top of the images.
Can anyone figure this one out? I have spent hours trying to change this but it doesn't really work.
Here is the link of the website:
http://portugalweddingphotographer.com/
Thank you very much
I agree, refresh your cache. To make footer closer than what it is currently, remove/adjust padding and margin for:
footer#footer-container p.copyright {
margin: 30px 0; /*can make this 10px for example*/
}
footer#footer-container {
padding: 30px 0; /*can make this 10px for example*/
}
I like doing something like this:
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
}
Where .footer is the class on your outermost footer wrapper, and it's the last thing inside the body but below your content wrapper or whatever. And you'd change the 60px to whatever height that entire footer is.
It's hard to say for sure what's happening though because I couldn't reproduce the bug just looking at the website -- could you post the html/css of your site?
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 prob in my website. Whenever I click on a text box, an unwanted blank space is generated at the end of the page. Please help. link : http://connectorz.tk/
PS: I use the transition css effect. Maybe it has something to do with this? Thnx
Change your pageBottom to include position, width & bottom attributes. The problem I believe had nothing to do with your text boxes or content and was that your footer was not position to fix to the bottom and when the height of the viewport increased over 1200px that it was simply displaying the background colour set for the body because it ran out of stacked content.
/* PAGE BOTTOM */
#pageBottom{
background: #666;
padding: 1.500em;
font-size: 0.750em;
color: #CCC;
text-align: center;
overflow: hidden;
//ADDED
position: fixed;
width: 100%;
bottom: 0;
}
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
This site: http://www.samuelgrant.co.uk
This is exactly the kind of setup I want to build. I'm stuck, however, at figuring out how the maximum width of this site is being set. I want a centered main content area like this site has with the background stretching to full browser width. Can anyone enlighten me? Relative newbie here...any help would be appreciated. Thanks!
HTML
<div class="container">
<div class="inner-w">
Stuff in your inner column
</div>
</div>
CSS
body {
margin: 0;
}
.container {
background-color: #f06;
}
.container .inner-w {
max-width: 50em; /* or 400px etc */
margin-right: auto;
margin-left: auto;
}
a jsFiddle that also shows this column width - and how it can be different in each sections etc.
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 want that the blue box at link is displayed the full width of the white area, the content...
code:
.info {
background-color: #3498db;
padding: 10px;
color: #fff;
font-weight: bold;
position: absolute;
z-index: 10;
}
thank you for your help...
You can set the width of 100%, this should be the full width of the content area...
Try this JQuery code:
var s=$('#content').width();
document.getElementById('home').style.width=s;
By using Inspect Element i found that #content is your parent(white background) div and #home is your div you want to adjust the width to the width of #container.
If its info class write:
var s=$('#content').width();
$('.info').css({'width':''+s+'px'});
If you want the blue content on 100% of #content, you should remove the padding on #content.
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 trying to place some links between my top area and bottom area so that they overlap both of them by an equal amount. I have the navmenu div set to a larger z-index than all the other div's but I can't get it to overlap anything. site is at http://www.joekellywebdesign.com/churchsample1/index.html
stylesheet is at http://www.joekellywebdesign.com/churchsample1/css/styles.css
Thanks in advance for the help.
Many ways to do it.
You can simply specify a negative margin for your navmenu
#navmenu {
margin: -10px 0;
}
Since you have specified the position as relative, which means the location of the div will depend on previous div. Its top would be the top plus the height of the previous div.
You can either change the position into absolute, or adjust the margin or padding values to display content inside the div in your way.
z-index will only be effective when elements are overlapping. In your case, all divs are in relative position. None of them is overlapping.
You could for instance do the following:
<div id="navmenu">
<div class="inner"><h1>Test text</h1></div>
</div>
and than in CSS:
#navmenu .inner {
padding-bottom: 15px;
margin-top: -15px;
position: relative;
z-index: 200;
background-color: #F00;
}