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 7 years ago.
Improve this question
i'm coding a web by using only html and css and i'm having a problem with placing div tags in css
this is the output i want to make : Image
the problem is i cant place these items in their place in the image.
this is my code :
body{
background-color: red;
}
#container{
background-image: url(http://uupload.ir/files/16md_background.jpg);
width: 1366px;
height: 768px;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
border-radius: 2px;
}
#header{
background-image: url(http://uupload.ir/files/8sr2_header.png);
width:1366px;
height:77px;
position: absolute;
top: 22px;
left: 170px;
}
#webdesign{
background-image: url(http://uupload.ir/files/k11n_untitled-1.png);
width: 308px;
height: 308px;
}
#bannerdeisgn{
background-image: url(http://uupload.ir/files/k11n_untitled-1.png);
width: 308px;
height: 308px;
}
#logodesign{
background-image: url(http://uupload.ir/files/k11n_untitled-1.png);
width: 308px;
height: 308px;
}
#carddesign{
background-image: url(http://uupload.ir/files/k11n_untitled-1.png);
width: 308px;
height: 308px;
}
#nav li{
list-style-type: none;
position: absolute;
}
#home{
background-image: url(http://uupload.ir/files/orek_home.png);
width:32px;
height:35px;
position: absolute;
right: 100px;
}
#home {
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: box-shadow, transform;
transition-property: box-shadow, transform;
}
#home:hover, #home:focus, #home:active {
box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
#footer{
background-image: url(http://uupload.ir/files/ywc_footer.png);
width: 1366px;
height: 77px;
float: left;
position: absolute;
top: 712px;
left: 170px;
}
<html>
<head>
<title>test</title>
<link rel="stylesheet" type="text/css" href="style.css">
<!---\\\\\\\\\\\\\\\\\\\\\\\\\\/////////////////////////////-->
<!---\\\\\\\\\\\\\\\\\\\\\\\\\\/////////////////////////////-->
</head>
<body>
<div id="container"></div>
<div id="header"></div>
<div id="home"></div>
<div id="bg"></div>
<ul id="nav">
<li id="bannerdeisgn"></li>
<li id="logodesign"></li>
<li id="carddesign"></li>
<li id="webdesign"></li>
</ul>
<div id="footer"></div>
</div>
</body>
</html>
Add display:inline-block to li and remove position: absolute
#nav li{
list-style-type: none;
display: inline-block;
background: #000;
border-radius:200px
}
Demo
Though it is not advisable to help in blind way, here it is Demo 2 Updated
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 4 years ago.
Improve this question
I need to replicate this.
What is the best way to add a cirle like this image with css?
thanks
Here's a quick example, I think you can do it a bit better if you take time ;).
if you want a full circle just make the (border-radius : 50%) for all corners instead of only top.
cheers
.circle{
height: 50px;
width: 100px;
border-top-left-radius:90px;
border-top-right-radius:90px;
background-color: green;
color:white;
margin: 0 auto;
text-align: center;
line-height: 50px;
}
.square{
width:500px;
height: 300px;
background-color: white;
border: 1px solid black;
margin: 0 auto;
}
<div class="circle">1/12</div>
<div class="square"></div>
I've added your numbered tab into the :before tab, so that it will always be attached to your div.
.square {
position: relative;
width: 80%;
height: 300px;
background-color: white;
margin: 60px auto;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.square:before {
content:'1/12';
position: absolute;
top: -35px;
height: 65px;
width: 65px;
border-radius: 50%;
z-index: -1;
transform: translate(-50%);
left: 50%;
background: #4ED3CE;
color: #fff;
display: flex;
justify-content: center;
padding: 10px;
}
<div class="square">
</div>
You can achieve half circle with following code, then you can customize it yourself
div {
background: #9e978e;
display: inline-block;
margin: 0 1em 1em 0;
}
.top,
.bottom {
height: 45px;
width: 90px;
}
.right,
.left {
height: 90px;
width: 45px;
}
.top {
border-top-left-radius: 90px;
border-top-right-radius: 90px;
}
.right {
border-bottom-right-radius: 90px;
border-top-right-radius: 90px;
}
.bottom {
border-bottom-left-radius: 90px;
border-bottom-right-radius: 90px;
}
.left {
border-bottom-left-radius: 90px;
border-top-left-radius: 90px;
}
.rotate {
animation: 1s linear infinite rotate;
position: relative;
top: $size * -1;
transform-origin: 50% 100%;
}
#keyframes rotate {
from {
transform: rotate(0deg)
}
to {
transform: rotate(360deg)
}
}
<div class="top"></div>
<div class="right"></div>
<div class="bottom"></div>
<div class="left"></div>
<div class="rotate top"></div>
This might be a little bulky,
Basically, I like how I have laid out this page, but when I resize the window, since I used position: relative, a lot of the elements overlap once the window is small enough. Additionally, it's usually standard (based on websites I have visited) that when resizing, elements are fixed and that you'd just have to scroll to get to the elements that are off screen, but in this case I have everything scaling with the window size. I am not sure if elements scaling with the screen are a good or bad design, however I would like to fix the overlapping issue. And if it is poor design to scale the elements, I would appreciate any suggestions as to achieving the same result with no scaling.
I have replaced most of the background content with solid colors. Also, I understand that a lot of what I may have already and will do in the future may be shortened with JavaScript, however I still need to learn it :)
Any suggestions regarding structure of classes, headers, tags etc. would be very helpful, this is only my second day of html/css. I am currently looking for online resources regarding these topics!
#import url(http://fonts.googleapis.com/css?family=Open+Sans);
body {
position: fixed;
background: black;
font-family: Open Sans;
color: #FFFFFF;
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
a {
text-decoration: none;
color: #FFFFFF;
opacity: 0.6;
}
a:hover {
opacity: 1;
}
h1 {
position: fixed;
top: 20%;
left: 50%;
transform: translate(-50%, -20%);
opacity: 0.5;
font-size: 3vw;
padding: 0;
margin: 0;
}
nav ul {
padding: 0;
border: 0;
margin: 0;
}
nav ul li {
list-style-type: none;
display: inline;
margin-left: 10px;
}
footer {
position: fixed;
bottom: 5vh;
right: 1.5vw;
}
#background-div {
content: "";
display: block;
position: fixed;
top: 0;
left: 0;
background: green;
height: 100%;
width: 100%;
background-size: cover;
background-position: center center;
background-attachment: fixed;
background-repeat: no-repeat;
opacity: 0;
z-index: -1;
transition: ease-in 0.3s;
}
#background2-div {
content: "";
display: block;
position: fixed;
top: 0;
left: 0;
background: red;
height: 100%;
width: 100%;
background-size: cover;
background-position: center center;
background-attachment: fixed;
background-repeat: no-repeat;
opacity: 0;
z-index: -1;
transition: ease-in 0.3s;
}
#intro .button {
position: fixed;
padding: 0;
background-position: center center;
background-size: 100% 100%;
background-repeat: no-repeat;
border-radius: 12px;
top: 50%;
transform: translate(0%, -50%);
width: 20vw;
height: 25vh;
transition: all 0.3s ease 0s;
opacity: 0.5;
border-color: black;
border-style: solid;
}
.button.english {
background-image: url('../images/uk_flag.png');
left: 15vw;
}
.button.portuguese {
background-image: url('../images/angola_flag.png');
right: 15vw;
}
.button.english div {
position: absolute;
top: 100%;
left: 48%;
transform: translate(-50%, 0);
color: white;
font-size: 4vw;
}
.button.portuguese div {
position: absolute;
top: 100%;
left: 49%;
transform: translate(-50%, 0);
color: white;
font-size: 3.5vw;
}
#welcome .button {
position: fixed;
padding: 0;
background-position: center center;
opacity: 0.7;
border-color: rgba(255, 255, 255, 0.5);
border-color: white;
border-style: solid;
border-radius: 12px;
width: 20vw;
height: 25vh;
top: 50%;
transform: translateY(-50%);
max-height: 80px;
max-width: 20vw;
}
.button.buy {
left: 15vw;
}
.button.sell {
right: 15vw;
}
.button.buy div,
.button.sell div {
color: white;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 4vw;
}
#intro .button:hover,
#welcome .button:hover {
opacity: 1;
border-color: white;
}
.button.buy:hover~#background-div {
opacity: 1;
border-color: white;
transition: ease-out 0.7s;
}
.button.sell:hover~#background2-div {
opacity: 1;
border-color: white;
transition: ease-out 0.7s;
}
#videoback {
position: fixed;
top: -64px;
left: 0;
min-width: 100%;
min-height: 100%;
z-index: -2;
opacity: 0.2;
}
<!doctype html>
<html lang="en">
<head>
<title>AB</title>
<link href="styles/intro.css" rel="stylesheet" type="text/css" />
<meta charset="utf-8">
<link href="welcome.html" rel="alternate" hreflang="en" />
<link href="welcome_pt.html" rel="alternate" hreflang="pt" />
</head>
<body id="welcome">
<a href="home.html" class="button buy" hreflang="en">
<div>Buy</div>
</a>
<a href="apply.html" class="button sell" hreflang="en">
<div>Sell</div>
</a>
<div id="background-div"></div>
<div id="background2-div"></div>
<video autoplay muted loop id="videoback">
<source src="videos/blessings.mp4" type="video/mp4">
</video>
<footer>
<div>
<nav>
<ul>
<li>
About
</li>
<li>
Contact
</li>
</ul>
</nav>
</div>
</footer>
<!-- Scripts -->
</body>
</html>
If I understand it correctly, you can solve your problem using bootstrap:
Link it in your html as such:
link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
Use bootstrap to define rows and their column size:
<!-- this is necessary container to contain all your rows
note that you can have multiple containers per website, or even within
each other -->
<div class="container">
<!-- elements that will be displayed next to each other -->
<div class="row">
<!-- two elements that will divide the row by half until MD size: >=992px -->
<div class="col-md-6">content</div>
<div class="col-md-6">content</div>
</div>
<div class="row">
<!-- three elements that will always be shown next to each other-->
<div class="col-xs-4">content</div>
<div class="col-xs-4">content</div>
<div class="col-xs-4">content</div>
</div>
...
</div>
Learn more about bootstrap:
quick tutorial for your needs
Get started with bootstrap 3
I have created a code for setting up sketch style borders over image.
Which can be seen below:
jQuery('.border').click(function(){
jQuery('.border').toggleClass('resize');
});
body {
background-color: lightblue;
}
.border {
width: 200px;
margin: 0px auto;
position: relative;
-webkit-transition: all 2s;
/* Safari */
transition: all 2s;
background-image: url(https://nosycrow.com/wp-content/themes/nosy-crow/images/borders/black-400-sides.png);
background-repeat: repeat-y;
background-size: 100%;
border-radius: 15px;
background-position: 0 0;
padding: 5px;
overflow: hidden;
}
.border .padding::before, .border .padding::after {
content: '';
display: block;
position: absolute;
left: 0;
width: 100%;
height: 0;
background: url(https://nosycrow.com/wp-content/themes/nosy-crow/images/borders/black-400.png) no-repeat;
background-size: 100%;
z-index: 50;
padding-bottom: 5.4%;
pointer-events: none;
}
.border .padding::before {
top: 0px;
}
.border .padding::after {
bottom: 0px;
background-position: 0px 100%;
}
.border.resize {
width: 500px;
}
img {
width: 100%;
height: auto;
position: relative;
border-radius: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="border">
<div class="padding">
<img src="https://nosycrow.com/wp-content/uploads/imported-books/Spectre-Collectors-Too-Ghoul-For-School-312087-3-593x911.jpg" alt="">
</div>
</div>
But the issue is, the box is not accurately responsive. To test it out, I have added a little jquery script so when you click on the image, the image resizes. And you can see when the image is bigger, the borders doesn't look aligned properly.
I know in my solution, to fix this I have to add media queries so the borders on top and borders can be adjusted in media queries. But is there any better solution then that?
I got it fixed using different solution. Kind of old school. I used 3 images, horizontal line, vertical line and corner and used them to set up in their position using different divs. Can be seen here
jQuery('.sketchy-box').click(function(){
jQuery('.sketchy-box').toggleClass('resize');
});
.sketchy-box {
width: 300px;
height: auto;
margin: 0px auto;
position: relative;
-webkit-transition: all 1s;
/* Safari */
transition: all 1s;
}
.sketchy-box .bdt {
position: absolute;
z-index: 1;
left: 10px;
top: 0px;
width: calc(100% - 20px);
height: 5px;
background: url("http://aslamdoctor.com/taskapp/horizontal-stroke#4x-100.svg") left top repeat-x;
}
.sketchy-box .bdb {
position: absolute;
z-index: 1;
left: 10px;
bottom: 0px;
width: calc(100% - 20px);
height: 5px;
background: url("http://aslamdoctor.com/taskapp/horizontal-stroke#4x-100.svg") left top repeat-x;
transform: rotate(180deg);
}
.sketchy-box .bdl {
position: absolute;
z-index: 1;
left: 0px;
top: 10px;
width: 5px;
height: calc(100% - 20px);
background: url("http://aslamdoctor.com/taskapp/vertical-stroke#4x-100.svg") left top repeat-y;
transform: rotate(180deg);
}
.sketchy-box .bdr {
position: absolute;
z-index: 1;
right: 0px;
top: 10px;
width: 5px;
height: calc(100% - 20px);
background: url("http://aslamdoctor.com/taskapp/vertical-stroke#4x-100.svg") left top repeat-y;
}
.sketchy-box .corner {
position: absolute;
z-index: 1;
width: 13px;
height: 13px;
background: url("http://aslamdoctor.com/taskapp/corner-stroke#4x-100.svg") left top no-repeat;
}
.sketchy-box .ctl {
left: 0px;
top: 0px;
}
.sketchy-box .ctr {
right: 0px;
top: 0px;
transform: rotate(90deg);
}
.sketchy-box .cbl {
left: 0px;
bottom: 0px;
transform: rotate(-90deg);
}
.sketchy-box .cbr {
right: 0px;
bottom: 0px;
transform: rotate(180deg);
}
.sketchy-box img {
width: 100%;
height: auto;
position: relative;
z-index: 0;
border-radius: 10px;
}
.sketchy-box.resize {
width: 1000px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sketchy-box">
<div class="bdl"></div>
<div class="bdr"></div>
<div class="bdt"></div>
<div class="bdb"></div>
<div class="corner ctl"></div>
<div class="corner ctr"></div>
<div class="corner cbl"></div>
<div class="corner cbr"></div>
<img src="https://nosycrow.com/wp-content/uploads/2015/09/BooksAlways_26-27-593x320.jpg" alt="">
</div>
Am trying to get a shape drawn in css on the header of my webpage. it supposed to look like this.
The shape am trying to draw for my header
but when I try to get the exact shape, IT looks like this below (Run the snippet)
Am not so good at css so am struggling here. The codes are below.
header {
padding: 0px !important;
height: auto !important;
}
.header {
top: 0px;
width: 100%;
height: auto !important;
padding: 0px !important;
background-color: #00ff00;
}
.spanheader {
font-size: 20px;
}
.logo {
z-index: 1;
position: relative;
}
.topheader {
text-align: center;
width: 100%;
background-color: lightgray;
left: 0px !important;
top: 0px !important;
}
#draw {
height: 30px;
width: 100%;
background-color: #fff;
}
#green {
height: 60px;
width: 100%;
border-width: 0px;
border-left: 280px solid white;
border-top: 20px solid white;
-moz-transform: skew(-45deg);
-webkit-transform: skew(-45deg);
transform: skew(-45deg);
}
<section id="header" class="header">
<div class="topheader">
<span class="spanheader f-700 c-gray">HEADER</span>
</div>
<div id="draw"></div>
<div id="green"></div>
</section>
What Am trying to achieve with my header and shape drawing
final look I want to achieve or what it should should look like at the end
You can just create a small white rectangle at the left top, skew it and move it a little to the left to remove the green triangle:
.green {
background-color:#0f0;
height:60px;
width:100%;
}
.draw {
height:30px;
margin-left:-15%;
width:30%;
background-color:#fff;
-moz-transform: skew(-45deg);
-webkit-transform: skew(-45deg);
transform: skew(-45deg);
}
<div class="green">
<div class="draw">
</div>
</div>
Try using :after. See this snippet.
header {
padding: 0px !important;
height: auto !important;
}
.header {
top: 0px;
width: 100%;
height: auto !important;
padding: 0px !important;
background-color: #00ff00;
}
.spanheader {
font-size: 20px;
}
.logo {
z-index: 1;
position: relative;
}
.topheader {
text-align: center;
width: 100%;
background-color: lightgray;
left: 0px !important;
top: 0px !important;
}
#draw {
height: 30px;
width: 100%;
background-color: #fff;
}
#green {
height: 60px;
width: 100%;
border-width: 0px;
position:relative;
}
#green:after{
content:'';
position:absolute;
top:0;
left:-25px;
height:30px;
width:250px;
background:white;
-moz-transform: skew(-60deg);
-webkit-transform: skew(-60deg);
transform: skew(-60deg);
}
<html>
<!--[if IE 9 ]><html class="ie9"><![endif]-->
<!-- Mirrored from byrushan.com/projects/ma/1-6-1/jquery/light/login.html by HTTrack Website Copier/3.x [XR&CO'2014], Tue, 14 Jun 2016 14:12:13 GMT -->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>WEBPAGE </title>
</head>
<body>
<section id="header" class="header">
<div class="topheader">
<span class="spanheader f-700 c-gray">HEADER</span>
</div>
<div id="draw">
</div>
<div id="green"></div>
</section>
</body>
</html>
Take a look at this JSFiddle
header{
text-align:center;
padding: 5px 0;
background: grey;
color: white;
}
footer{
text-align: center;
padding: 50px 0;
position: relative;
}
footer::before,footer::after{
content: '';
display: inline-block;
width: 70%;
height: 50px;
background: green;
position: absolute;
bottom: 0;
right: -10px;
transform: skewX(-30deg);
}
footer::after{
width: 100%;
height: 30px;
transform: skewX(0);
}
#header {
width: 100%;
height: 30px;
background: #CCC;
text-align: center;
line-height: 30px;
}
#slashWrapper {
position: relative;
background: #FFF;
width: 100%;
height: 100px;
}
#whiteSlash {
height: 75px;
width: 300px;
background: #FFF;
position: absolute;
top: 0px;
-moz-transform: skew(-45deg);
-webkit-transform: skew(-45deg);
transform: skew(-45deg);
z-index: 2;
}
#greenSlash {
height: 50px;
width: 100%;
position: absolute;
bottom: 0px;
background: #00ff00;
}
#whiteSlashBottomCorner {
height: 25px;
width: 25px;
background: #FFF;
position: absolute;
bottom: 0px;
right: -25px;
-moz-transform: skew(-45deg);
-webkit-transform: skew(-45deg);
transform: skew(-45deg);
z-index: 2;
}
<div id="header">HEADER</div>
<div id="slashWrapper">
<div id="whiteSlash"></div>
<div id="greenSlash"></div>
<div id="whiteSlashBottomCorner">
</div>
I have one issue in current project. I am applying background image in one div and also set opacity over it using :after.. Inside it, I have taken one another div which has border & content but I need to highlight middle section without opacity using same background image.
Sample Screenshot
.first_resorts_list_right { float: left; width: 434px; overflow: hidden; height: 477px; background-size: cover!important; background: no-repeat; padding: 70px; position: relative; background-image: url(http://s17.postimg.org/fa4ru3hm7/test.jpg); }
.resort-info { border: 10px solid #fff; padding: 20px; text-align: center; color: #000; font-size: 40px; }
.bannerimage2 { display: none; }
.expose { position: relative; z-index: 99999; }
.overlay-img { background: rgba(255,255,255,0.3); width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 99998; }
<div class="first_resorts_list_right">
<div class="resort-info expose">Content</div>
<div class="overlay-img"></div>
</div>
I made an alternative version, with divs wraping divs (plus sharing the same background values) instead of use :after
body {
width:100%;
height: 100vh;
margin: 0px;
font-family: arial, sans-serif;
}
#container {
width:100%;
height:100%;
position: relative;
}
#big {
top:0;
left:0;
width:100%;
height: 100%;
background-image: url("http://i.imgur.com/wvIxNg1.jpg");
background-size: 100vw 100vh;
background-repeat: no-repeat;
background-position: center;
position: relative;
-webkit-filter: blur(5px); /* Chrome, Safari, Opera */
filter: blur(5px);
}
#small {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
width: 70%;
height: 70%;
outline: 4px solid white;
left: 0;
right: 0;
margin: auto;
background-image: url("http://i.imgur.com/wvIxNg1.jpg");
background-size: 100vw 100vh;
background-position: center;
background-repeat: no-repeat;
text-align: center;
color: white;
-webkit-filter: contrast(120%); /* Chrome, Safari, Opera */
filter: contrast(120%);
}
#white {
width:100%;
height: 100%;
background-color: white;
opacity: 0.1;
}
h1 {
font-weight: 100;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
left: 0;
right: 0;
margin: auto;
letter-spacing:8px;
}
<div id=container>
<div id=big>
<div id=white></div>
</div>
<div id=small><h1>FOCUS</h1></div>
</div>