Is there a way to make such thing fluid so that it scales along with its parent or, what would it take to achieve it..
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Demo</title>
<style type="text/css">
#circle-container {
position: relative;
width: 200px;
height: 200px;
border: solid 0px #333;
}
.dimmensions {
width: 100px;
height: 100px;
}
.dimmensions2 {
width: 113px;
height: 113px;
}
.dimmensions3 {
width: 105px;
height: 105px;
}
.left {
position: relative;
border-top-left-radius: 100px;
border-bottom-left-radius: 100px;
background: #09f;
float: left;
height: 199.5px;
top: 0;
}
.left-inner {
position: relative;
border-top-left-radius: 100px;
border-bottom-left-radius: 100px;
background: #444;
height: 175px;
width: 90px;
top: 12px;
left: 15px;
}
.left-inner-small {
position: relative;
border-top-left-radius: 100px;
border-bottom-left-radius: 100px;
background: #4cff00;
height: 145px;
width: 85px;
top: 15px;
left: 15px;
}
.top-right {
position: relative;
border-top-right-radius: 100px;
background: #666;
float: right;
}
.top-right-inner {
position: relative;
border-top-right-radius: 100px;
background: #ffd800;
float: right;
height: 90px;
width: 85px;
top: 12px;
right: 15px;
}
.top-right-inner-small {
position: relative;
border-top-right-radius: 100px;
background: #808080;
float: right;
height: 75px;
width: 70px;
top: 15px;
right: 15px;
}
.bottom-right {
position: relative;
border-bottom-right-radius: 100px;
background: #333;
float: right;
}
.bottom-right-inner {
position: relative;
border-bottom-right-radius: 100px;
background: #ff6a00;
float: right;
height: 87px;
width: 85px;
top: 0px;
right: 15px;
}
.bottom-right-inner-small {
position: relative;
border-bottom-right-radius: 100px;
background: #fff;
float: right;
height: 72px;
width: 70px;
top: 0px;
right: 15px;
}
.center-small {
position: absolute;
border-radius: 125px;
background: #ff6a36;
top: 44px;
left: 44px;
z-index: 999;
}
.center-small-inner {
position: absolute;
border-radius: 125px;
background: #333;
top: 4px;
left: 4px;
z-index: 9999;
}
.center-text {
z-index: 99999;
position: absolute;
text-shadow: #000 0px 2px 1px;
color: #555;
font-size: 18px;
top: -12px;
left: -47px;
font-family: 'Impact';
text-transform: uppercase;
}
</style>
</head>
<body>
<div id="circle-container">
<div class="dimmensions2 center-small">
<div class="dimmensions3 center-small-inner"></div>
</div>
<div class="dimmensions left">
<div class="dimmensions left-inner">
<div class="dimmensions left-inner-small"></div>
</div>
</div>
<div class="dimmensions top-right">
<div class="dimmensions top-right-inner">
<div class="dimmensions top-right-inner-small"></div>
</div>
</div>
<div class="dimmensions bottom-right">
<div class="dimmensions bottom-right-inner">
<div class="dimmensions bottom-right-inner-small">
<span class="center-text">
CSS3<span style="color:#ffd800">+</span>HTML5
</span>
</div>
</div>
</div>
</div>
</body>
</html>
Every element is subordinated to the #circle-container. You have defined fixed width's and height's in all elements. You could calculate those values as a proportional value to the actual 200px of width and height of the #circle-container, and change it to the percentual result.
Example:
#circle-container {
position: relative;
width: 200px;
height: 200px;
border: solid 0px #333;
}
.dimmensions {
width: 100px;
height: 100px;
}
Would turn into:
#circle-container {
position: relative;
width: 200px;
height: 200px;
border: solid 0px #333;
}
.dimmensions {
width: 50%; //Proportional
height: 50%; //Proportional
}
Then, resizing the #circle-container would resize the entire arc.
Related
I am trying to have multiple divs stack on top of each other. Based on the responses of previously asked similar questions, I used a main container with relative positioning and absolute positioning of divs within. I Even tried giving them z-indexes but the Divs are still overlapping.
Please find the html below; Response 2 fully overlaps Response 1 Div.
body {
background-color: #dbdbdb;
}
h1 {
font-size: 20px;
font-style: normal;
color: #000000;
margin-top: 0px;
}
h2 {
font-size: 22px;
font-style: normal;
font-weight: normal;
color: #000000;
margin-top: 0px;
}
h3 {
font-size: 12px;
font-style: normal;
font-weight: normal;
color: #000000;
margin-top: 0px;
}
p {
font-size: 20px;
font-style: normal;
color: #000000;
}
p.dataTitle {
font-size: 16px;
font-style: normal;
font-weight: bold;
color: #000000;
}
.responsePanel {
border-style: solid;
border-width: 1px;
border-color: black;
}
.titleBar {
background-color: #ffffff;
border-width: 0px;
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 50px;
}
.titleText {
position: relative;
left: 35px;
top: 0px;
}
.titleValue {
position: absolute;
left: 35px;
top: 24px;
}
.titleDataSource {
position: absolute;
right: 128px;
top: 34px;
}
.mugshotContainer {
background-color: #ffffff;
border-width: 0px;
position: absolute;
left: 0px;
top: 52px;
width: 33%;
height: 420px;
}
.locationData {
position: relative;
left: 5px;
top: 0px;
}
.personNameContainer {
background-color: #ffffff;
border-width: 0px;
position: absolute;
left: 0%;
top: 52px;
width: 100%;
}
.personName {
position: relative;
left: 5px;
top: 0px;
}
.personDescriptionContainer {
background-color: #ffffff;
border-width: 0px;
position: absolute;
left: 66.60%;
top: 52px;
width: 33.3%;
height: 420px;
}
.activityContainer {
background-color: #ffffff;
border-width: 0px;
position: absolute;
left: 66.60%;
top: 52px;
width: 33.3%;
height: 420px;
}
.personDescriptionData {
position: relative;
left: 5px;
top: 0px;
}
.personLocations {
background-color: #ffffff;
border-width: 0px;
position: absolute;
left: 0px;
top: 474px;
width: 100%;
height: 150px;
}
.personLocationsData {
position: relative;
left: 5px;
top: 0px;
}
table#locationsTable {
width: 99%;
}
table#locationsTable tr:nth-child(even) {
background-color: #eee;
}
table#locationsTable tr:nth-child(odd) {
background-color: #fff;
}
table#locationsTable th {
color: white;
background-color: black;
}
table#locationsTable td {
text-align: center;
}
#response1 {
position: relative;
width: 95%;
}
#response2 {
position: relative;
width: 95%;
}
.outer {
position: relative;
}
<div class="outer">
<div class="responsePanel" id="response1">
<div class="titleBar">
<div class="titleText">
<h1>Game 1</h1>
</div>
<div class="titleValue">
<h2>sas</h2>
</div>
<div class="titleDataSource">
<h3>Data Source: </h3>
</div>
</div>
<div class="personNameContainer">
<!---->
<p class="personName">xyz/p>
</div>
</div>
<div class="responsePanel" id="response2">
<div class="titleBar">
<div class="titleText">
<h1>what</h1>
</div>
<div class="titleValue">
<h2>xyz</h2>
</div>
<div class="titleDataSource">
<h3>Data Source: </h3>
</div>
</div>
<div class="personNameContainer">
<!---->
<p class="personName">blah blah</p>
</div>
</div>
</div>
JS Fiddle
https://jsfiddle.net/qe36n9hm/1/
I have been watching a tutorial on jQuery and he already had the css file made before but his output looks different than what I have when I downloaded the file
his:
The way it should be
Mine:
The code:
#navArrows {
position: relative;
width: 150px;
height: 150px;
margin: 100px auto 0;
background: #333;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
padding: 20px;
}
.navigationArrow {
width: 50px;
height: 50px;
line-height: 50px;
padding: 0;
margin: 0;
position: absolute;
top: 20px;
left: 20px;
background: white;
color: #222;
}
#up {
left: 50%;
margin-left: -25px;
}
#left, #right {
bottom: 50%;
margin-top: -25px;
}
#left, {
right: 20%;
left: inherit;
}
#right {
left: 20%;
right: inherit;
}
#down {
bottom: 20px;
top: inherit;
left: 50%;
margin-left: 5px;
}
.box {
height: 100px;
width: 100px;
background: #a7f;
color: white;
border: solid 4px #a1f;
line-height: 100px;
margin: 100px auto 0;
opacity: 0.5;
position: relative;
}
How do I fix this, please let me know.
ps: i added one part of the code that was missing from the original question, hope this helps.
It was better if you was add the markup as well. However see the following example and make correction according it. Hope it will work for you.
#navArrows {
position: relative;
width: 150px;
height: 150px;
margin: 100px auto 0;
background: #333;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 100px;
padding: 20px;
}
.navigationArrow {
width: 50px;
height: 50px;
line-height: 50px;
padding: 0;
margin: 0;
position: absolute;
top: 20px;
left: 20px;
background: white;
color: #222;
}
#up {
left: 50%;
margin-left: -25px;
}
#left, #right {
top: 50%; // One of the key line
margin-top: -25px;
}
#right {
left: auto;
right: 20px;
}
#down {
bottom: 20px;
top: auto;
left: 50%;
margin-left: -25px;
}
.box {
height: 100px;
width: 100px;
background: #a7f;
color: white;
border: solid 4px #a1f;
line-height: 100px;
margin: 100px auto 0;
opacity: 0.5;
position: relative;
}
<div id="navArrows">
<div class="navigationArrow" id="up"></div>
<div class="navigationArrow" id="right"></div>
<div class="navigationArrow" id="down"></div>
<div class="navigationArrow" id="left"></div>
</div>
It looks like you have a comma after the #left class try replacing it with:
#left {
right: 20%;
left: inherit;
}
Try this one
#left {
left: 0;
}
i'm attempting to recreate a webpage as part of my HTML/CSS training. The webpage in question is this:
, the UEI website (it's old and doesn't look like that anymore).
Below is my code, CSS is rolled into the HTML since it's a single project. Here are a few things i'm having trouble with, any help is greatly appreciated!
1.) How do I get my main div, the center of the body containing all the paragraphs and whatnot, to "spill" over into the footer just like in the original? I've tried the z-indexes but that doesn't seem to do anything.
2.) How come the second box, and the "Start" div will not show up at all? Am I doing something wrong with positioning?
3.) For the right arrow in the orange bar, how do I resize it so it's not cutting off the bottom quarter of the arrows?
4.) How do I get the nav bar UL to have the orange background not just around the words, but as it shows in the original?
5.) How do I resize the bottom UEI logo so it appears smaller like in the original?
Thank you so much for any help! Below is the code I have so far. I'm pretty new to this, but please don't hesitate to critisize anything you see:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#wrapper {
width: 960px;
margin: 0 auto;
background: #D6D6D7;
}
#topbanner {
background: url(http://i.imgur.com/TWVzlpx.gif) repeat-x;
height: 131px;
margin-top: -20px;
}
.menu {
float: left;
display: inline-block;
margin-top: 14px;
margin-left: 50px;
color: white;
}
ul {
background: url(http://i.imgur.com/bjHBavK.png) repeat-x;
height: 40px;
margin-left: 266px;
margin-right: 100px;
margin-top: 34px;
width: 560px;
position: relative;
}
li:hover {
background: url(http://i.imgur.com/AByXJxy.png) repeat-x;
}
#main {
background: white;
width: 788px;
height: 650px;
z-index: 10;
margin-left: 78px;
position: relative;
padding-top: 20px;
}
#blackbar {
background: url(http://i.imgur.com/TPKqsEL.png) no-repeat;
background-size: contain;
width: 100%;
height: 75px;
position: relative;
padding: 150px 25px 0 25px;
left: -25px;
}
#whitepeople{
background: url(http://i.imgur.com/pjdSiLg.png) no-repeat;
background-size: contain;
width: 50%;
height: 250px;
margin-top: -190px;
}
#orangebar {
background: url(http://i.imgur.com/tnMNDvd.png) no-repeat;
background-size: contain;
width: 100%;
height: 75px;
margin-top: -22px;
position: relative;
padding: 150px 25px 0 25px;
left: -25px;
}
#arrow {
background: url(https://i.imgur.com/EMHd88R.png) no-repeat;
position: relative;
height: 35px;
width: 100%;
margin-left: 375px;
margin-top: -48px;
}
#box1 {
background: #CCC;
height: 450px;
width: 275px;
position: relative;
float: right;
margin-top: -488px;
margin-right: 70px;
z-index: 5;
}
#start {
background: url(https://i.imgur.com/rp7lJrE.png) contain;
height: 75px;
width: 275px;
position: relative;
float: right;
margin: 0 auto;
}
#box2 {
background: #0C3
height: 450px;
width: 275px;
position: relative;
float: right;
margin-top: -475px;
margin-right: 50px;
z-index: 1;
}
#bottom {
background: url(http://i.imgur.com/IK2iIjz.gif) repeat-x;
height: 200px;
z-index: 1;
position: relative;
}
#ueilogo {
background: url(http://i.imgur.com/2C6fyCc.png) no-repeat;
float: left;
height: 131px;
width: 131px;
padding-left: 45px;
padding-right: 55px;
margin-left: 35px;
margin-right: 35px;
}
#botlogo {
background: url(http://i.imgur.com/UyFOCTw.png) no-repeat;
background-size: contain;
height: 150px;
width: 960px;
z-index: 5;
margin: 0 auto;
position: relative;
}
h2 {
color: white;
size: 16px;
font-family: Times New Roman;
margin-left: 25%;
padding-top: 35px;
position: relative;
}
.banner1{
color: white;
font-size: 14px;
margin-top: -145px;
margin-left: 65px;
}
.banner2 {
color: white;
margin-top: -150px;
margin-left: 70px;
padding-top: 9px;
font-size: 18px;
}
</style>
<title>UEI Mockup</title>
</head>
<body>
<div id="wrapper">
<div id="topbanner">
<div id="ueilogo">
</div>
<h2>Student Success is Our Success</h2>
<ul>
<li class="menu">ABOUT UEI COLLEGE</li>
<li class="menu">OVERVIEW</li>
<li class="menu">FINANCIAL AID</li>
</ul>
</div>
<div id="main">
<div id="blackbar"><p class="banner1">START TRAINING FOR A NEW CAREER TODAY</p> </div>
<div id="whitepeople"></div>
<div id="orangebar"><P class="banner2">GET STARTED WITH UEI COLLEGE</P><div id="arrow"></div></div>
<div id="box1"><div id="start"></div></div><div id="box2"></div>
</div>
<div id="bottom"><div id="botlogo"></div></div>
</div>
</body>
</html>
equal to the image.
<div id="wrapper">
<div id="topbanner">
<div id="ueilogo"></div>
<h2>Student Success is Our Success</h2>
<ul>
<li class="menu">ABOUT UEI COLLEGE</li>
<li class="menu"> OVERVIEW </li>
<li class="menu">FINANCIAL AID</li>
</ul>
</div>
<div id="main">
<div id="blackbar"><p class="banner1">START TRAINING FOR A NEW CAREER TODAY</p> </div>
<div id="whitepeople"></div>
<div id="orangebar"><P class="banner2">GET STARTED WITH UEI COLLEGE</P><div id="arrow"></div></div>
<div id="box1"><div id="start"></div></div><div id="box2"></div>
</div>
<div id="bottom"><div id="botlogo"></div></div>
</div>
css
*{
margin: 0;
padding: 0;
}
#wrapper {
display: table;
width: 960px;
margin: 0 auto;
background: #D6D6D7;
}
#topbanner {
background: url(http://i.imgur.com/TWVzlpx.gif) repeat-x;
width: 100%;
height: 131px;
}
#ueilogo {
background: url(http://i.imgur.com/2C6fyCc.png) no-repeat;
float: left;
height: 131px;
width: 131px;
padding-left: 45px;
padding-right: 55px;
margin-left: 35px;
margin-right: 35px;
}
ul {
background: url(http://i.imgur.com/bjHBavK.png) repeat-x;
height: 40px;
list-style: none;
margin-left: 266px;
margin-top: 34px;
width: 600px;
}
.menu {
padding: 1px 20px;
margin-top: 13px;
float: left;
color: white;
}
li:hover {
padding: 1px 20px;
background: url(http://i.imgur.com/AByXJxy.png) repeat-x;
background-size: 100% 100%;
}
#main {
background: white;
width: 788px;
height: 650px;
z-index: 10;
margin-left: 78px;
position: absolute;
padding-top: 20px;
border-bottom-right-radius:6px;
border-bottom-left-radius:6px;
}
#blackbar {
background: url(http://i.imgur.com/TPKqsEL.png) no-repeat;
background-size: contain;
width: 100%;
height: 75px;
position: relative;
padding: 150px 21px 0 25px;
left: -23px;
}
#whitepeople{
background: url(http://i.imgur.com/pjdSiLg.png) no-repeat;
background-size: contain;
width: 50%;
height: 250px;
margin-top: -190px;
}
#orangebar {
background: url(http://i.imgur.com/tnMNDvd.png) no-repeat;
background-size: contain;
width: 100%;
height: 75px;
margin-top: -22px;
position: relative;
padding: 150px 25px 0 25px;
left: -25px;
}
#arrow {
background: url(https://i.imgur.com/EMHd88R.png) no-repeat;
position: relative;
height: 35px;
width: 100%;
margin-left: 375px;
margin-top: -30px;
}
#box1 {
background: #CCC;
height: 450px;
width: 275px;
position: relative;
float: right;
margin-top: -490px;
margin-right: 70px;
border-radius: 5px;
z-index: 5;
}
#start {
background: url(https://i.imgur.com/rp7lJrE.png) no-repeat;
background-size: 100% 100%;
position: absolute;
height: 32px;
width: 292px;
}
#box2 {
background: #8dc73f;
height: 441px;
width: 275px;
position: relative;
float: right;
margin-top: -470px;
margin-right: 61px;
border-radius: 5px;
z-index: 1;
}
#bottom {
background: url(http://i.imgur.com/IK2iIjz.gif) repeat-x;
margin-top: 620px;
height: 200px;
position: relative;
}
#botlogo {
background: url(http://i.imgur.com/UyFOCTw.png) no-repeat;
background-size: contain;
position: absolute;
height: 150px;
width: 788px;
z-index: 5;
margin-left: 78px;
bottom: 0;
}
h2 {
color: white;
size: 16px;
font-family: Times New Roman;
margin-left: 25%;
padding-top: 35px;
position: relative;
}
.banner1{
color: white;
font-size: 14px;
margin-top: -145px;
margin-left: 65px;
}
.banner2 {
color: white;
margin-top: -150px;
margin-left: 70px;
padding-top: 9px;
font-size: 18px;
}
Keep in mind I'm a complete css noob. If I understood some of the questions correctly...
Replace
background: url(https://i.imgur.com/rp7lJrE.png) contain;
with
background: url('https://i.imgur.com/rp7lJrE.png') no-repeat;
Also, you forgot to close the statement
background: #0C3;
when styling box2
And to fit the arrow make the font smaller, change the margin, or use the font they are. Theirs seems big enough but shrunk horizontally.
Here is the updated code:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#wrapper {
width: 960px;
margin: 0 auto;
background: #D6D6D7;
}
#topbanner {
background: url(http://i.imgur.com/TWVzlpx.gif) repeat-x;
height: 131px;
margin-top: -20px;
}
.menu {
float: left;
display: inline-block;
margin-top: 14px;
margin-left: 50px;
color: white;
}
ul {
background: url(http://i.imgur.com/bjHBavK.png) repeat-x;
height: 40px;
margin-left: 266px;
margin-right: 100px;
margin-top: 34px;
width: 560px;
position: relative;
}
li:hover {
background: url(http://i.imgur.com/AByXJxy.png) repeat-x;
}
#main {
background: white;
width: 788px;
height: 650px;
z-index: 10;
margin-left: 78px;
position: relative;
padding-top: 20px;
}
#blackbar {
background: url(http://i.imgur.com/TPKqsEL.png) no-repeat;
background-size: contain;
width: 100%;
height: 75px;
position: relative;
padding: 150px 25px 0 25px;
left: -25px;
}
#whitepeople{
background: url(http://i.imgur.com/pjdSiLg.png) no-repeat;
background-size: contain;
width: 50%;
height: 250px;
margin-top: -190px;
}
#orangebar {
background: url(http://i.imgur.com/tnMNDvd.png) no-repeat;
background-size: contain;
width: 100%;
height: 75px;
margin-top: -22px;
position: relative;
padding: 150px 25px 0 25px;
left: -25px;
}
#arrow {
background: url(https://i.imgur.com/EMHd88R.png) no-repeat;
position: relative;
height: 35px;
width: 100%;
margin-left: 340px;
margin-top: -46px;
}
#box1 {
background: #CCC;
height: 450px;
width: 275px;
position: relative;
float: right;
margin-top: -488px;
margin-right: 70px;
z-index: 5;
}
#start {
background: url('https://i.imgur.com/rp7lJrE.png') no-repeat;
height: 75px;
width: 275px;
position: relative;
float: right;
margin: 0 auto;
}
#box2 {
background: #0C3;
height: 450px;
width: 275px;
position: relative;
float: right;
margin-top: -475px;
margin-right: 50px;
z-index: 1;
}
#bottom {
background: url(http://i.imgur.com/IK2iIjz.gif) repeat-x;
height: 200px;
z-index: 1;
position: relative;
}
#ueilogo {
background: url(http://i.imgur.com/2C6fyCc.png) no-repeat;
float: left;
height: 131px;
width: 131px;
padding-left: 45px;
padding-right: 55px;
margin-left: 35px;
margin-right: 35px;
}
#botlogo {
background: url(http://i.imgur.com/UyFOCTw.png) no-repeat;
background-size: contain;
height: 150px;
width: 960px;
z-index: 5;
margin: 0 auto;
position: relative;
}
h2 {
color: white;
size: 16px;
font-family: Times New Roman;
margin-left: 25%;
padding-top: 35px;
position: relative;
}
.banner1{
color: white;
font-size: 14px;
margin-top: -145px;
margin-left: 65px;
}
.banner2 {
color: white;
margin-top: -150px;
margin-left: 65px;
padding-top: 9px;
font-size: 17px;
}
</style>
<title>UEI Mockup</title>
</head>
<body>
<div id="wrapper">
<div id="topbanner">
<div id="ueilogo">
</div>
<h2>Student Success is Our Success</h2>
<ul>
<li class="menu">ABOUT UEI COLLEGE</li>
<li class="menu">OVERVIEW</li>
<li class="menu">FINANCIAL AID</li>
</ul>
</div>
<div id="main">
<div id="blackbar"><p class="banner1">START TRAINING FOR A NEW CAREER TODAY</p> </div>
<div id="whitepeople"></div>
<div id="orangebar"><P class="banner2">GET STARTED WITH UEI COLLEGE</P><div id="arrow"></div></div>
<div id="box1"><div id="start"></div></div>
<div id="box2"></div>
</div>
<div id="bottom"><div id="botlogo"></div></div>
</div>
</body>
</html>
Also, nice job naming a div white people. lol.
Im working on website (from psd. to HTML/CSS).
How i can auto match website to resolution of people who watch my website?
PSD template has 1600px width and I set this same width for HTML.
My personal reolution of screen is 1920 x 1080 px, so website for me is not displayed corretly. (browser doesnt stretch website to my resolution)
My HTML code:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html"; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Szablon HTML5</title>
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="logo"></div>
</div>
<div id="slider">
<div id="stripe">pasek</div>
<div id="mainpic">obrazek
<div id="podpis">podpis obrazka</div>
</div>
</div>
<div id="content">
<div id="boxes">
<div class="box">
<h2>Perfect Logic</h2>
<h3>All you want your website to do.</h3>
<img src="pictures/minibox.png" class="boxPicture">
<p>Lore ipsum bla sdk wejhhds asdjh, ajsdhahsd qwjehqwe Lore ipsum bla sdk wejhhds asdjh, ajsdhahsd qwjehqwe Lore ipsum bla sdk wejhhds asdjh, ajsdhahsd qwjehqwe</p>
<img src="pictures/przycisk.png" class="przycisk">
</div>
<div class="box">b</div>
<div id="box_c">c</div>
</div>
</div>
<div id="przerywnik"></div>
<footer></footer>
</div>
</body>
</html>
My CSS file:
* {
margin: 0;
padding: 0;
background: #ffffff;
width: 1600px;
height: auto;
}
#wrapper{
width: 1600px;
height: auto;
}
#header{
height: 137px;
width: 1600px;
background-image:url('pictures/headerbg.png');
background-repeat:repeat-x;
}
#logo{
background-image:url('pictures/logo.png');
width: 320px;
height: 137px;
margin-left: 330px;
}
#slider{
height: 426px;
z-index: 2;
}
#stripe{
height: 335px;
background: grey;
z-index: 1;
position: absolute;
background-image:url('pictures/stripe.png');
background-repeat:repeat-x;
}
#mainpic{
position: absolute;
z-index: 3;
width: 940px;
height: 343px;
margin-top:22px;
margin-left: 330px;
background-image:url('pictures/slider.jpg');
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
#podpis{
margin-top: 338px;
margin-left: 104px;
font-size: 36px;
width: 700px;
position: absolute;
}
/* Część z boxami */
#boxes{
height: 469px;
width: 940px;
margin-left: 330px;
background: #234f31;
}
.box{
float: left;
height: 469px;
width: 320px;
background: #ffffff;
}
.box h2{
font-size: 18px;
margin-top: 21px;
font-family: Georgia;
color: #11719e;
float:left;
}
.box h3{
font-size: 12px;
margin-top: 2px;
font-family: Helvetica;
color: #8c8c8c;
float:left;
}
.box p{
margin-top: 12px;
margin-left: 2px;
font-size: 13px;
color: #3e3e3e;
width: 299px;
float: left;
}
.przycisk{
margin-top: 20px;
margin-left: 2px;
float: left;
width: 163px;
height: 35px;
}
.boxPicture{
margin-top: 15px;
float: left;
height: 198px;
width: 299px;
}
#box_c{
float: left;
height: 469px;
width: 300px;
background: yellow;
}
/* Footer */
#przerywnik{
height: 10px;
width: 1600px;
background: #4c4c4c;
}
footer{
height: 173px;
width: 1600px;
background: #333333;
}
How i can fix this?
Edit all
width:1600px;
in your css code to
width:100%;
Edit this on your code:
* {
margin: 0;
padding: 0;
background: #ffffff;
width: 1600px;
height: auto;
}
#wrapper{
width: 1600px;
height: auto;
}
By:
* {
margin: 0;
padding: 0;
background: #ffffff;
width: 100%;
height: auto;
}
#wrapper{
width: 100%;
height: auto;
}
EDIT:
Here are the code:
* {
margin: 0;
padding: 0;
background: #ffffff;
width: 100%;
height: auto;
}
#wrapper{
width: 100%;
height: auto;
}
#header{
height: 137px;
width: 100%;
background-image:url('pictures/headerbg.png');
background-repeat:repeat-x;
}
#logo{
background-image:url('pictures/logo.png');
width: 320px;
height: 137px;
margin-left: 330px;
}
#slider{
height: 426px;
z-index: 2;
}
#stripe{
height: 335px;
background: grey;
z-index: 1;
position: absolute;
background-image:url('pictures/stripe.png');
background-repeat:repeat-x;
}
#mainpic{
position: absolute;
z-index: 3;
width: 60%;
min-width:940px;
height: 343px;
margin-top:22px;
margin-left:-30%;
left:50%;
background-image:url('pictures/slider.jpg');
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
#podpis{
margin-top: 338px;
margin-left: 104px;
font-size: 36px;
width: 700px;
position: absolute;
}
/* Część z boxami */
#boxes{
height: 469px;
width: 940px;
margin-left: 330px;
background: #234f31;
}
.box{
float: left;
height: 469px;
width: 320px;
background: #ffffff;
}
.box h2{
font-size: 18px;
margin-top: 21px;
font-family: Georgia;
color: #11719e;
float:left;
}
.box h3{
font-size: 12px;
margin-top: 2px;
font-family: Helvetica;
color: #8c8c8c;
float:left;
}
.box p{
margin-top: 12px;
margin-left: 2px;
font-size: 13px;
color: #3e3e3e;
width: 299px;
float: left;
}
.przycisk{
margin-top: 20px;
margin-left: 2px;
float: left;
width: 163px;
height: 35px;
}
.boxPicture{
margin-top: 15px;
float: left;
height: 198px;
width: 299px;
}
#box_c{
float: left;
height: 469px;
width: 300px;
background: yellow;
}
/* Footer */
#przerywnik{
height: 10px;
width: 100%;
background: #4c4c4c;
}
footer{
height: 173px;
width: 100%;
background: #333333;
}
I think would best be suited to the answer here with a given explanation to your problems: How to fit your website for all or at lest most screen resolutions?
I drew a cloud via CSS3 using different div tags I am trying to add a border to the whole shape but I am having trouble since every shape get its own border how can I apply a border to the whole cloud?
HTML:
<div id="cloud">
<div id="bottom_c"></div>
<div id="right_c"></div>
<div id="left_c"></div>
</div>
CSS:
* {
margin: 0;
padding: 0;
border: 0;
}
body{
background-color: #4ca3ff;
}
#cloud {
position: absolute;
}
#bottom_c {
position: relative; top: 200px; left: 500px;
width: 350px;
height: 150px;
background-color: #fff;
border-radius: 100px;
border: solid 5px black;
z-index: 100;
}
#right_c{
position: absolute; top: 140px; left: 640px;
width: 150px;
height: 150px;
border-radius: 100%;
background-color: #fff;
border: solid 5px black;
}
#left_c{
position: absolute; top: 170px; left: 550px;
width: 100px;
height: 100px;
border-radius: 100%;
background-color: #fff;
border: solid 5px black;
}
Image:
You can do it without any additional elements. Just use the ::before and ::after pseudo-elements with the same size and round shape as the top cloud bubbles. z-index keeps everything in the right layer.
Demo:
Output:
CSS:
body{
background-color: #4ca3ff;
}
#cloud {
height: 230px;
margin: 40px;
position: relative;
width: 400px;
}
#cloud div {
border: solid 5px black;
}
#bottom_c {
background-color: #fff;
border-radius: 100px;
height: 150px;
position: absolute;
top: 100px;
width: 350px;
z-index: 0;
}
#right_c{
background-color: #fff;
border-radius: 100%;
height: 150px;
left: 140px;
position: absolute;
top: 40px;
width: 150px;
z-index: -1;
}
#left_c{
background-color: #fff;
border-radius: 100%;
height: 100px;
left: 50px;
position: absolute;
top: 70px;
width: 100px;
z-index: -1;
}
#cloud::before {
background-color: white;
border-radius: 50%;
content: '';
height: 100px;
left: 55px;
position: absolute;
top: 75px;
width: 100px;
z-index: 1;
}
#cloud::after {
position: absolute; top: 45px; left: 145px;
background-color: white;
border-radius: 50%;
content: '';
width: 150px;
height: 150px;
z-index: 1;
}
HTML:
<div id="cloud">
<div id="bottom_c"></div>
<div id="right_c"></div>
<div id="left_c"></div>
</div>
Thank you for the original solution! I needed to create multiple clouds and dynamically resize and recolor them, so I adapted to original solution as follows:
I made the clouds resizable by using percentages values for the height, width, top and left properties. The .cloud class uses padding-top to adjust the height of the cloud relative to the cloud's width.
I made the :before and :after pseudo-elements divs.
I changed the id selectors to class selectors
And I reorganized the properties so they're easier to read.
I hope this helps someone. Here's the code:
Output
I don't yet have the reputation to post images :/. So here's a link to the output: http://imgur.com/nN9dBiQ
CSS:
.cloud {
position: relative;
width: 100%;
padding-top: 57.5%;
box-sizing: border-box;
}
.cloud_bottom,
.cloud_left,
.cloud_right {
border: solid 5px black;
}
.cloud_bottom,
.cloud_left,
.cloud_right,
.cloud_leftCircle,
.cloud_rightCircle {
background-color: #fff;
}
.cloud_bottom {
position: absolute;
top: 43.48%;
height: 65.2%;
width: 87.5%;
border-radius: 100px;
z-index: 0;
}
.cloud_left {
position: absolute;
top: 30.43%;
left: 12.5%;
height: 43.48%;
width: 25%;
border-radius: 100%;
z-index: -1;
}
.cloud_right {
position: absolute;
top: 17.39%;
left: 35%;
height: 65.2%;
width: 37.5%;
border-radius: 100%;
z-index: -1;
}
.cloud_leftCircle {
position: absolute;
top: 32.61%;
left: 13%;
height: 43.48%;
width: 25%;
border-radius: 50%;
z-index: 1;
}
.cloud_rightCircle {
position: absolute;
top: 23.48%;
left: 35%;
height: 65.21%;
width: 37.5%;
border-radius: 50%;
z-index: 1;
}
HTML:
<div class="firstCloud cloud">
<div class="cloud_bottom"></div>
<div class="cloud_left"></div>
<div class="cloud_right"></div>
<div class="cloud_leftCircle"></div>
<div class="cloud_rightCircle"></div>
</div>
<div class="secondCloud cloud">
<div class="cloud_bottom"></div>
<div class="cloud_left"></div>
<div class="cloud_right"></div>
<div class="cloud_leftCircle"></div>
<div class="cloud_rightCircle"></div>
</div>
JavaScript:
function updateCloudColor(cloudElement, color) {
cloudElement.children().css("background-color", color);
}
$(window).load(function () {
updateCloudColor($(".firstCloud"), "red");
updateCloudColor($(".secondCloud"), "blue");
});