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
How can I have a div with negative margins on both sides so that the div extends off the page on both sides?
I've used negative margins and only the left works, which makes sense. How can I get the right negative margin to work, as floating right solves the negative right margin but breaks the negative left margin.
Well, we dont know how your page look's like, but:
position: fixed and set right and left as negative should do the work.
You can set the width of the div to more than 100% and then set the negative left margin.
JSFiddle example
HTML:
<div id="overflow"></div>
CSS:
#overflow {
width: 120%;
height: 300px;
background: #DCDCDC;
border: solid 3px #333;
margin-left: -10px;
overflow: hidden;
}
In the example you can see that the border around the div only shows on the top and bottom and the sides of the div are hidden outside of the window.
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 have a top div with some text floated to the left and a div floated right that contains an ad image, social media links, and a search box. My search box is not floating right even though it is in it's own div that I have set to float right. It also appears my ad is not floating right. Also, my social media icons are showing up backwards. Many thanks for the help.
#gsc-control-cse form.gsc-search-box { float:right; width: 200px; }
Fiddle: here
Image of what site looks like when I preview is here
Remove the float right on the inner elements and remove the width 70% on #top-right
#top-right {
float: right;
}
#top-right ul li {
display: inline;
list-style-type: none;
}
#gsc-control-cse form.gsc-search-box {
width: 200px;
}
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
So I have a logo on my site and the problem is when you hover under it or around it you can still click it. I want it only to be clickable once on it.
www.theanimedatabase.com
The logo is found in the top right!
If you right click on your logo and click "Inspect Element", you will be able to see the area of your image is actually 200px x 200px.
Try crop away your logo extra height at the bottom (and extra height on the top I am guessing you have extra height at the top as well because you set the header img margin-top as -68px to push your logo upwards) so that the total height of your logo is 70px. Which will match with your header.
Next, change this in your css:
header img {
margin-top: -68px;
float: left;
width: 200px;
height: 200px;
float: left auto;
}
to:
header img {
float: left;
width: 200px;
height: 70px;
float: left auto;
}
best solutions would be to crop image appropriately, but you can solve it with adding this css rule to your image:
overflow: hidden
notice this will hide part of the image, so if you have something under Anime Database it would be hidden.
Look at this image:
Just as stated by everybody, cropping your image is the best solution.
header {
overflow: hidden;
}
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
is possible to make a specific element about 5px longer that it would automatically be? because my article element has a video element which sticking out of the given space a bit, while I could just set the height manually I thought it would be better to have it set itself automatically (like it normally does) only adding about 5px. Any Help?
I'm not sure I understand the question, but have you tried giving it a padding-bottom of 5px?
Try using a dynamic width to set the width of your contained element.
Eg.
article {
width:300px;
}
contained-element{
width:95%;
}
Just give padding-bottom:5px to your <article> elements, & make height:auto for both elements, then <article> element will expand as per height with 5px at bottom.
Am not very much sure what are you asking about but if it's regarding fitting your video in a div for that you can create a wrapper class such as
.wrapper-div {
position: relative;
padding-bottom: 20%;
height: 0;
}
then have the child element inside it
.element-to-load{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
I assume you want to the div to expand if the video is larger than the article.
To do this you just need to:
1) Give the Outer Div a height:auto - and a min-height:
2) Give the Inner Div a margin-bottom of 5px
Check out this Fiddle Demo
Does this answer your question?
Just set the CSS for that element be (use the actual pixel width and height):
height: 25px;
width: 50px;
and the height and the width will be forced to be that height and width.
Although if possible try to use 'em' so that it is automatically responsive.
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;
}