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;
}
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 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.
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 2 years ago.
Improve this question
I want to increase the colored rectangle from top to bottom (in the black box).
How to increase its height don't want to give the custom heights to the small colored rectangle in the black box, what needs to be done is to set the height in such a way that colored rectangle should always fit the black box as sidebar no matter how big or small the black box is.
The colored rectangle in the black box has the div with id as a circle
If the black box has position relative, you can change the orange boxs position to absolute, and then specify that it needs to be from top 0px, and from bottom 0px
so
black-box {
position: relative;
}
orange-box {
position: absolute;
top: 0;
bottom: 0;
}
add height:100%; to orange box that will changed automatically when blackbox size changed
I think the following code will solve your problem
body{
margin: 0;
padding: 0;
}
.container{
display: flex;
align-items: center;
height: 100vh;
width: 100%;
}
.item{
width: 300px;
height: 100%;
background-color: blueviolet;
}
<body>
<div class="container">
<div class="item"></div>
</div>
</body>
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 3 years ago.
Improve this question
I'm currently having trouble finding an example for what i'm specially looking for. I am trying to create a circle around my text using CSS. I've found examples of a circle with the text inside, but in this instance i'm trying to create a circle surrounding the text.
An example of what i'm trying to create:
Try using border-radius: 50% to turn any block element like a div with an equal height and width into a circle.
.circle {
height: 2em; /* just an example size */
width: 2em;
border: 4px solid #f00;
border-radius: 50%;
}
To center the text within the circle, you may want to use flexbox properties on the element as well, though this is not the only way you could achieve that.
.circle {
height: 2em;
width: 2em;
border: 4px solid #f00;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
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 :)
Here is my site
Currently still fiddling around with design layout and there is one problem I can't quite solve.
On my header I have a red border-bottom to separate it from the main content. Likewise, on the footer I have a red top-border to do the same. Is there a way of extending the borders beyond the div (and consequently outside of the wrapper, with overflow visible) without it conflicting with the other elements? I want to configure the layout so it has more of a grid-like design.
#wrap {
width: 1000px;
background-color: #ffffff;
text-align:left;
margin: 0 auto 0 auto;
border-left: 1px solid #000000;
border-right: 1px solid #000000; }
#head{
background-color: #ffffff;
width: 1000px;
height: 159px;
border-bottom: 1px solid #ff0000; }
kind of like this?
Yes. You can set a negative margin, causing the div to extend outside of its parent, like this. (I only did the header, but you get the idea)
The solution in the fiddle uses the annoying !important to get the styling right - you might want to reorganize your CSS to get around this and make your code more maintainable, see this post.