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 3 days ago.
Improve this question
So i need to make a website for school. My layout is almost done, but i'm stuck with one thing.
I have made a box around my main text (header and footer excluded), the box has a right and left margin of 150px. The background color is then changed so that it looks nice between the contrast of the background image and the box where the text is.
This is my problem: The bottom border is not connected to the footer, so if there is less text then other pages, you see more of the background image and this is ugly to look at.
below the CSS code for the main
main {
padding: 20px 20px 80px 20px;
margin: 0px 150px;
background-color: rgba(209, 219, 255, 0.829);
border-left: 5px solid #333;
border-right: 5px solid #333;
box-shadow: 0px 2px 0px 2px;
position: relative;
z-index: -1;
top: 80px;
}
I have tried to changed height to 100% so that it will take the full screen everytime. But this doesn't work.
Related
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 5 years ago.
Improve this question
I am trying to recreate the following background in CSS:
Each hexagon should have navigation link inside (6 sections) and this background with nav links should follow the user through all sections in one-page (displaying on the right side of browser). Currently, I am using it as a background image with fixed position attribute and all works well but the only way to display links for me is to place them in fixed width container on fixed width background image.
I know about clip-path, SVG but it is not supported in all browsers so my question is what is the best way to recreate the following background while maintaining RWD and ensuring each link will be placed exactly in the center of the hexagon?
Have you looked into this website yet? Explains basically step by step how to create hexagons out of a 100x100 div using CSS3.
The idea is that a hexagon basically exists out of 3 HTML divs.
One for the top triangle part, one for the mid square section and one for the bottom triangle part.
.hex .top {
width: 0;
border-bottom: 30px solid #6C6;
border-left: 52px solid transparent;
border-right: 52px solid transparent;
}
.hex .middle {
width: 104px;
height: 60px;
background: #6C6;
}
.hex .bottom {
width: 0;
border-top: 30px solid #6C6;
border-left: 52px solid transparent;
border-right: 52px solid transparent;
}
You can easily put hexagons next to each other to form a hexagon row.
To tile the hexagons you need to add the following CSS3 to the hexagon div.
.hex {
float: left;
margin-left: 3px;
margin-bottom: -26px;
}
For all the even hexagon rows use a margin-left of 53px.
.hex-row.even {
margin-left: 53px;
}
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 4 years ago.
Improve this question
I want to remove the extra space above header and after footer of my blog. How to remove it?
I am using WordPress and Genesis News Pro Theme on my blog.
You can take a look at the blog - https://web.archive.org/web/20160306192700/http://recruitmentapplicationforms.in/
You need to change the margin:60px auto in class .site-container
.site-container {
background-color: #fff;
border: 1px solid #e3e3e3;
margin: 0px auto; /* change 60px to 0px */
max-width: 1140px;
}
You have applied margin: 60px auto; to your .site-container class. Just change it to margin: 0px auto;
Currently, the site has 60px margin at top and bottom of the page.
This is happening because of margin style you are using in "site-container" class.
If you do not want margin at the top and bottom then you specify explicit margins for left and right i.e.
margin-left and margin-right instead of using just margin:60px auto;
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 few boxes inside a container. The container is set to overflow: hidden to make sure everything stays in its place. Taking away overflow: hidden is not an option because doing so allows content to overflow where it would otherwise resize to fit the container.
I'm trying to give the boxes a box-shadow, but when doing so, the shadows on the edge of the boxes at the edge of the container are not showing up (see image below), because the parent container stops there and has no overflow.
As indicated by the green arrows, the two boxes at left show their shadows as expected. As indicated by the red arrows, the two boxes at right have their shadows cropped at the right edge where each meets the container.
Is there any way to hack around this?
A simple reproduction:
Note: This code snippet was added by a community editor, not the author, as an attempt to reproduce the symptoms. It does not reflect the actual code used by the author to produce the attached image.
.container {
overflow: hidden;
display: grid;
grid-template-columns: repeat(2, 1fr);
column-gap: 1rem;
row-gap: 1rem;
}
.shadow {
display: inline-block;
height: 2rem;
background-color: tomato;
box-shadow: 0 0 0.25rem black;
}
<div class="container">
<div class="shadow"></div>
<div class="shadow"></div>
<div class="shadow"></div>
<div class="shadow"></div>
</div>
Can you add margins to the inner div's?
#inner-div {
margin: 10px
}
check this JSFiddle
try this one:
div {
top: 100px;
position: absolute;
left: 100px; height: 50px;
width: 200px;
-webkit-box-shadow:
5px 5px 5px #000,
inset 0 0 5px #000;
border-radius: 5px;
background: white;
}
UPDATED DEMO
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 been trying(very hard)to get this slider to remain inside the black area of the background image. I can do it if I set all the widths etc. to fixed values but
then the page is no longer responsive. When I try using percentages everything scales with the browser but the slider jumps around...Mock up is running at:
http://www.skaliwag.com.au
Hello i think i fixed your problem.
It's very simple. You just need to change two values in your css: the .rslides margin to 65% auto and remove the margin-top of the image. Then it should look like this.
The slider div:
.rslides {
position: relative;
list-style: none;
overflow: hidden;
width: 70%;
padding: 0M
margin: 65% auto;
}
and the image:
.rslides img {
float: none;
display: block;
height: auto;
width: 100%;
border: solid 1px;
border-radius: 10px;
position: relative;
}
Hope it was helpfull :)
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
Bit of a newbie, but trying to do something i thought would be quite simple; i'd like a full screen background image with no margins, that scales to screen size (i'm using background: cover; at the moment) but I'd like to put a translucent nav bar over the top of the image right at the top, containing a horizontal menu.
So far, I have the nav bar, but the image is sitting either above the nav bar, or underneath it, instead of directly on top. What's the best way of doing this, is it z-index values, or is there something easy i should be doing to place one div (.nav) over another (.background-img)?
any help much appreciated, sorry if this is a bit vague but i am a total newcomer to html & css!!
Try using position:fixed; if you're not already. Do something like this:
div.background-img {
background-image: url('background.png');
margin: 0;
padding: 0;
position: fixed;
top: 0;
left:0;
right:0;
bottom:0;
background-size:cover;
}
div.nav {
position: fixed;
background: rgba(255, 255, 255, 0.7);
top: 0;
left: 0;
right:0;
padding: 16px;
}
See a demo here