I have a web page: http://www.svaspasalon.com/construct2/index.html my issue is that when I load my style sheet the back part such as the image and the page load fine and dont have an issue however the middle element ( the black transparent background text and email reminder) always moves when I load it on different screens, e.g. my laptop and my desktop at home. how can I get the element to not move and also move the Sva Spa Salon and the element to the center of the page.
CSS:
/* Reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p ,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-
spacing:0;}fieldset,img{border:0;}address,caption,dfn,th,var{font-style:normal;font-
weight:normal;}li{list-style:none;}caption,th{text-
align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
html,body{
width:1080px;
height:1920px;
position: fixed;
}
body{
margin:0 auto;
padding:0;
background:#2a1a10;
font-family:"Helvetica Neue",Helvetica, Arial;
font-size: 100%;
}
/*
div#shim{
visibility: hidden;
width: 100%;
height: 50%;
margin-top: 375px;
float: left;
position: relative;
}
*/
.fadein {
position: fixed;
max-width: 100%;
width: 100%;
min-width: 500px;
z-index:-1;
}
.fadein img {
position:fixed;
max-width: 100%;
width: 70%;
min-width: 500px;
height: 80%;
margin-top: 90px;
margin-left: 255px;
}
/*
div#content {
width: 100%;
height: 160px;
margin: 0 auto;
background: url(../images/content_bg1.png) left bottom repeat-x;
float: left;
position: relative;
top: -80px; */
/* IE4ever Hack: Hide from IE4 **/
position: static;
/** end hack */
}
/* Hide from IE5mac \*//*/
div#shim {
display: none;
}
html, body {
height: auto;
}
/* end hack */
/* ]]> */
.logo{
width: 78.125%;
/* width: 800px; */
margin: 0 auto;
}
h1{
font-size: 36px;
color: #C5953b;
margin-bottom: 19px;
letter-spacing: -2px;
font-weight: 1000;
text-shadow:-2px -2px 2px #fff, 2px 2px 2px #000;
text-transform: uppercase;
text-align: center;
}
h2{
padding: 0px 3px;
line-height: normal;
background: #fff;
font-size: 16px;
font-weight: 700;
float: left;
text-transform: uppercase;
}
h1 span{
font-weight: 500;
}
.clear{
clear: both;
}
.right_side{
width: 85%;
/* width: 940px; */
margin: 0 auto;
}
.right_content{
width: 100%;
/* width: 920px; */
background: url(../images/blackish.png) repeat;
height: 50px;
padding: 23px 0 23px 40px;
font-family:Candara;
}
.right_content h2{
margin-top: 12px;
margin-right: 60px;
}
form.email{
padding: 0;
margin: 10px 0 0 0;
width: 204px;
float: left;
}
/*.get_notified{
width: 144px;
line-height: normal;
background: url(../images/field.png) left top no-repeat;
font-family:Candara;
font-size: 11.4px;
color: #FF0000;
border: none;
padding: 7px 10px;
margin-right: 6px;
float: left;
font-weight: 200;
letter-spacing:0.4px;
}
*/
.go{
padding: 10px;
margin: 0 auto;
width: 34px;
height: 28px;
border: none;
background: url(../images/go.png) left top no-repeat;
}
.go:hover{
background: url(../images/go.png) left bottom no-repeat;
cursor: pointer;
}
html, body {
min-width: 1080px; /* width: 1080px; */
/* height: 1920px; */
/*position: fixed;*/
}
Related
My header is devided in 3 sections: left, center and right. The left section is empty. In the center section I have my page title and in the right section I placed an "Account" link with an icon next to it. The link contains the word ACCOUNT and an icon. the icon is somehow pushed to the top and leaves a blank space below it next to the word. I want them both in one line and on the same hight. How can I achieve this? I added a red background to make the problem better understandable.
html {
height: 100%;
box-sizing: border-box;
overflow: hidden;
}
*,
*:before,
*:after {
box-sizing: inherit;
overflow: inherit;
}
body {
background-color: #f5f5f5;
margin: 0;
padding: 0;
position: relative;
height: 100%;
}
#in {
width: 1000px;
margin-left: auto;
margin-right: auto;
height: 100%;
}
/* ------------------------------------------------------------------------ */
/* -------------------------------- HEADER -------------------------------- */
/* ------------------------------------------------------------------------ */
header {
background-color: #131b23;
border-bottom: 6px solid #0f151a;
text-align: center;
left: 0;
top: 0;
width: 100%;
height: 170px;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
z-index: 99;
}
#left {
background-color: green;
width: 20%;
position: absolute;
height: 164px;
}
#center {
background-color: red;
width: 60%;
margin-left: auto;
margin-right: auto;
height: 100%;
position: absolute;
left: 20%;
right: 20%;
height: 164px;
}
#right {
background-color: blue;
width: 20%;
height: 100%;
position: absolute;
right: 0;
height: 164px;
}
#heading {
font-size: 60px;
display: block;
margin-bottom: -7px;
margin-top: 15px;
}
.accountlink {
font-family: "Helvetica";
text-decoration: none;
font-weight: 800;
color: #ffffff;
font-size: 13px;
letter-spacing: 1px;
text-transform: uppercase;
background-color: red;
position: absolute;
right: 30px;
top: 15px;
}
.navigationicon {
position: relative;
width: 24px;
margin: 0;
padding: 0;
top: 50%;
bottom: 50%;
}
<header>
<div id="left">
</div>
<div id="center">
<h1 id="heading">My Page</h1>
</div>
<div id="right">
<a class="accountlink" href="login.html">Account <img class="navigationicon" src="https://cdn2.iconfinder.com/data/icons/ios-7-icons/50/user_male2-512.png"></a>
</div>
</header>
Can you check this ?
html {
height: 100%;
box-sizing: border-box;
overflow: hidden;
}
*,
*:before,
*:after {
box-sizing: inherit;
overflow: inherit;
}
body {
background-color: #f5f5f5;
margin: 0;
padding: 0;
position: relative;
height: 100%;
}
#in {
width: 1000px;
margin-left: auto;
margin-right: auto;
height: 100%;
}
/* ------------------------------------------------------------------------ */
/* -------------------------------- HEADER -------------------------------- */
/* ------------------------------------------------------------------------ */
header {
background-color: #131b23;
border-bottom: 6px solid #0f151a;
text-align: center;
left: 0;
top: 0;
width: 100%;
height: 170px;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
z-index: 99;
}
#left {
background-color: green;
width: 20%;
position: absolute;
height: 164px;
}
#center {
background-color: red;
width: 60%;
margin-left: auto;
margin-right: auto;
height: 100%;
position: absolute;
left: 20%;
right: 25%;
height: 164px;
}
#right {
background-color: blue;
width: 20%;
height: 100%;
position: absolute;
right: 0;
height: 164px;
}
#heading {
font-size: 60px;
display: block;
margin-bottom: -7px;
margin-top: 15px;
}
.accountlink {
font-family: "Helvetica";
text-decoration: none;
font-weight: 800;
color: #ffffff;
font-size: 13px;
letter-spacing: 1px;
text-transform: uppercase;
background-color: white;
position: absolute;
left: 50px;
top: 20px;
background: url("https://cdn2.iconfinder.com/data/icons/ios-7-icons/50/user_male2-512.png");
background-size: 24px;
background-repeat: no-repeat;
background-position-x: right;
background-position-y: 0px;
width: 40%;
line-height: 2;
}
<header>
<div id="left">
</div>
<div id="center">
<h1 id="heading">My Page</h1>
</div>
<div id="right">
<a class="accountlink" href="login.html">Account </a>
</div>
</header>
Four changes to your css code to get there: 2 at .navigationicon and 2 at .accountlink
.accountlink {
font-family: "Helvetica";
text-decoration: none;
font-weight: 800;
color: #ffffff;
font-size: 13px;
letter-spacing: 1px;
text-transform: uppercase;
background-color: red;
position: absolute;
right: 80px;
top: 70px;
}
.navigationicon {
position: relative;
width: 12px;
margin: 0 0 2px -5px;
padding: 0;
top: 50%;
bottom: 50%;
}
This is the website I'm currently working on and my problem is that I can't seem to find a way in which to set the footer at the bottom of the page under all the elements. I want the footer to have a position:fixed, but for it to be under the next page element that is at the bottom of the page.
Some of the code:
#footer {
clear: both;
margin: 0 auto;
position: fixed;
text-align: center;
bottom: 1%;
height: 6%;
width: 100%;
padding: 2%;
z-index: 500;
background-color: rgba(0, 0, 0, 0.6);
}
.content {
overflow: hidden;
background-color: #ffffff;
margin: 70px 0 0 0;
}
.content-middle {
float: left;
width: 50%;
}
.content-left {
float: left;
width: 56%;
}
.content-right {
float: right;
width: 60%;
}
Update Style using margin-bottom
#pagination
{
display: block;
text-align: center;
margin: 0 auto;
clear: both;
padding: 0.4% 0;
background-color: rgb(255, 255, 255);
color: #999;
font-size: 11px;
text-transform: uppercase;
margin-bottom: 150px;
}
Add remove White space then update style using height: auto !important;. because after your search result your li or class="reteta" set height:350px
#retete.simple-style li.reteta {
width: 98%;
max-width: 680px;
min-width: 280px;
height: auto !important;
float: none;
display: block;
background: none;
box-shadow: none;
}
or other wise only simple add style
#retete.simple-style li.reteta {
height: auto !important;
}
You can achieve this by adding a margin-bottom: 90px; to #pagination.
#pagination {
margin-bottom: 90px;
}
You can achieve this by adding a bottom: 0px; to footer
#footer {
clear: both;
margin: 0 auto;
position: fixed;
bottom: 0px
text-align: center;
bottom: 1%;
height:6%;
width: 100%;
padding:2%;
z-index:500;
background-color:rgba(0, 0, 0, 0.6);
}
The only diff is bottom:0px; .Try this
Whats going on with my site at minimized widths and how can I fix it?
Problem
It looks good on a mobile phone and full screen, but when sizing down, my background image disappears and the top bar seems to be acting weird (with the logo doing crazy stuff) at around 600ish pixels.
My #media query code:
#media only screen and (min-width:1024px)
{
div.large-7.push-5.columns.last{
height: emCalc(1px);
}
}
#media only screen and (max-width: 1023px) and (min-width:675 px){ //745 //481
.top-bar .toggle-topbar.menu-icon a {
color: $steel;
height: 34px;
line-height: 33px;
padding: 0 25px 0 0;
position: relative;
}
.container{
/*background: linear-gradient(to bottom, yellow, magenta);*/
height: 66rem; /*645px*/
//overflow: hidden;
background-image: url('/img/losang.jpg');
background-size: 100%;
background-repeat: no-repeat;
}
.top-bar{
// overflow: hidden;
}
.top-bar .toggle-topbar.menu-icon a:after {
box-shadow: 0 10px 0 1px $steel, 0 16px 0 1px $steel, 0 22px 0 1px $steel;
content: "";
display: block;
height: 0;
position: absolute;
right: 5px;
top: 0;
width: 16px;
}
}
#media only screen and (max-width: 674px) { //480
// .title-area {
// max-width: 40%; //or whatever you need for your layout. px will work there, too
// }
// .title-area .logo {
// width: 100%;
// height: auto;
// }
#icons .hover1 {
.iconlinks {
color:$iconcolor1;
}
}
#icons .hover2 {
.iconlinks {
color:$iconcolor2;
}
}
#icons .hover3 {
.iconlinks {
color:$iconcolor3;
}
}
.path-container .path-item .circle.circle-right {
right: 90px;
}
.path-container {
text-align: center;
}
.path-container .circle {
top: 0;
// right: 0;
// left: 0;
float: none;
margin-bottom: 30px !important;
margin-top: 60px;
margin-left: auto;
margin-right: auto;
}
.top-bar .toggle-topbar.menu-icon a {
color: $steel;
height: 34px;
line-height: 33px;
padding: 0 25px 0 0;
position: relative;
}
.top-bar .toggle-topbar.menu-icon a:after {
box-shadow: 0 10px 0 1px $steel, 0 16px 0 1px $steel, 0 22px 0 1px $steel;
content: "";
display: block;
height: 0;
position: absolute;
right: 5px;
top: 0;
width: 16px;
}
.top-bar {
overflow: hidden;
}
.orbit-container{
height: 12.5rem;
}
.container{
/*background: linear-gradient(to bottom, yellow, magenta);*/
height: 66rem; /*645px*/
overflow: hidden;
background-image: url('/img/losang.jpg');
background-size: 100%;
background-repeat: no-repeat;
/*background-color: #ccc;
.container{
/*background: linear-gradient(to bottom, yellow, magenta);*/
//height: 65rem; /*645px*/
// background-color: blue;
}
.servicesminicontainer{
margin-top:emCalc(0px);
}
.serviceimgs{
margin: emCalc(0px) auto;
}
.servicescontainer{
/*background: linear-gradient(to bottom, yellow, magenta);*/
// height:40rem; /*645px*/
overflow: hidden;
background: none;
/*background-image: url('../img/laback.jpg');*/
background-size: 100%;
//background-repeat: no-repeat;
// background-color: rgba(30,144,255, .7)
//background: linear-gradient(to bottom, $background-color-top, white);
//background-image: url('../img/losang.jpg');
}
#icons{
position: relative;
top: initial;
margin-top: 50px
}
.logo{
width: 50%;
// position:relative;
// top:emCalc(-27px);
}
#topbutton{
position: relative;
top: 2rem;
}
#icons{
/*position: relative;
top:6rem;*/
}
.container1 p, h4{
color:black;
}
header{
margin-top: 0rem;
background-image: none;
}
}
I am not sure try with the following styles. Hope it will fix the top header issues.
#media only screen and(min-width:500px) and (max-width: 600px)
{
.top-bar .name
{
height:auto;
}
.top-bar
{
height:5rem;
}
}
I have two DIVs inside another two parent DIVs. What I am looking to do is align the "clocks" DIV to the left of the "panel" DIV and the "sd" DIV toward the center of the "panel" DIV.
What is showing up as now:
What I am looking to do:
My HTML looks like:
<div id="weather">
<div id="panel">
<div class="clocks">
</div>
<div id="sd">
<script type="text/javascript" src="http://www.weathers.com"></script>
</div>
</div>
<p class="slide">Weather</p>
</div>
My CSS looks like:
#weather {
margin: 0 auto;
padding: 0;
width: 990px;
font: 75%/120% Arial, Helvetica, sans-serif;
top: 0;
position: absolute;
z-index: 999999999;
left: 0%;
margin-left: 0px;
}
#panel {
background: url('weatherBack.png') no-repeat;
height: 195px;
width: 990px;
display: none;
text-align: center;
margin: 0 auto;
line-height: 195px;
}
#sd {
margin: 0 auto;
padding: 0;
width: 175px;
}
.slide {
margin: 0;
padding: 0;
border-top: solid 4px #422410;
background: url(btn.png) no-repeat center top;
}
.btn-slide {
background: url(white-arrow.gif) no-repeat right -50px;
text-align: center;
width: 144px;
height: 31px;
padding: 10px 10px 0 0;
margin: 0 auto;
display: block;
font: bold 120%/100% Arial, Helvetica, sans-serif;
color: #fff;
text-decoration: none;
}
.active {
background-position: right 12px;
}
.learn {
z-index: 9999999999999;
position: absolute;
top: 85px;
right: 3px;
}
.box-cnt {
padding: 10px;
padding-bottom: 2px;
background-color: #1FAAEB;
zoom: 1;
filter: alpha(opacity=80);
opacity: 0.8;
}
.clocks {
width: 209px;
height: 131px;
position: relative;
top: 0;
left: 151;
background: url('css/images/clockbg.png') no-repeat 0 0;
}
Try the float property with a value of left on your clock and weather panels:
.clocks {
width: 209px;
height: 131px;
position: relative;
float: left;
background: url('css/images/clockbg.png') no-repeat 0 0;
}
#sd {
margin: 0 auto;
padding: 0;
width: 175px;
position: relative;
float: left;
}
Here is a working JSFiddle link: http://jsfiddle.net/cYFfT/
If you want to have more space between them, simply set a left margin on the SD panel,
as in this update: http://jsfiddle.net/cYFfT/1/
I have a following div structure
<div id="wrapper">
<div id="header">
<div id="storeFinder">
/* html goes here */
</div>
</div>
</div>
now when i zoom in or out from the browser, "storeFinder" moves right / left ...
I have searched online and found that need a wrapper around the "storeFinder" so that it does not move with the <body> and specifying the min-width also can solve the problem.
in my case, i already have a wrapper div and specifying the min-width also dint help me.
looking for help here very badly.
#wrapper {
background: white;
background-position: 50% 0px;
width: 984px;
margin: 0px auto 0 auto;
text-align: center;
}
#header {
width: 960px;
height: 60px;
margin: 0 5px 2px 5px;
text-align: left;
background: white;
display: block;
position: relative;
}
#storefinderdropdown {
position: absolute;
top: 8px;
float: none;
width: 270px;
height: 43px;
border: 5px solid #F1F1EF;
background: #F1F1EF;
z-index: 10;
margin: 20px 0 0 342px;
font-size: 10px;
font-weight: bold;
text-indent: 3px;
padding: 0;
}
Try putting a position: relative on the parent. That will confine the children's positions to be absolute according to the parent and not according to the document. This article gives more details and examples: http://css-tricks.com/absolute-positioning-inside-relative-positioning/
Your correct CSS code Working Jsfiddle here
#wrapper {
background: white;
background-position: 50% 0px;
width: 984px;
margin: 0px auto 0 auto;
text-align: center;
}
#header {
width: 960px;
height: 60px;
margin: 0 5px 2px 5px;
text-align: left;
background: white;
display: block;
position: relative;
}
#storeFinder {
position: absolute;
top: 8px;
float: none;
width: 270px;
height: 43px;
border: 5px solid #F1F1EF;
background: #F1F1EF;
z-index: 10;
margin: 20px 0 0 0px;
left:342px;
font-size: 10px;
font-weight: bold;
text-indent: 3px;
padding: 0;
}
Try this:
#storefinderdropdown {
position: absolute;
top: 8px;
left: 342px; /*Add This*/
float: none;
width: 270px;
height: 43px;
border: 5px solid #F1F1EF;
background: #F1F1EF;
z-index: 10;
margin: 20px 0 0 0; /* Change This*/
font-size: 10px;
font-weight: bold;
text-indent: 3px;
padding: 0;
}
May be this will be helpful for you.