I am using wordpress as my CMS, and have used a theme of my choice. The theme shows a slider (carousel) on the home page, but takes up too much space. I tried to edit the width and height to be 80%, but the UI gets screwed. The slider does not center, or the frame with the left right arrows come closer. The image gets smashed. I need to get the css right for this.
I tried the following
modified width and height to 80%
reduced the px values, messed it up further
Below I have relevant css and html portions of the code.
<div id="slides">
<div class="slides_container slide" style="overflow: hidden; position: relative; display: block;">
<div class="slides_control" style="position: relative; width: 2736px; height: 480px; left: -912px;"><div style="position: absolute; top: 0px; left: 912px; z-index: 5;">
<img src="http://localhost/taxeeta/wp-content/uploads/2013/01/116.png?1358343444279" alt="">
</div>
<div style="position: absolute; top: 0px; left: 912px; z-index: 0; display: none;">
<img src="http://localhost/taxeeta/wp-content/uploads/2013/01/215.png" alt="">
</div>
</div>
</div>
CSS:
#slides {
position: absolute;
top: 15px;
left: 0px;
z-index: 100;
width: 897px;
margin-left: 14px;
}
.slides_container {
width: 912px;
margin: 0;
padding: 0;
}
.slides_control {
position: absolute;
top: 15px;
left: 0px;
z-index: 100;
width: 897px;
margin-left: 14px;
}
Are you sure that there is jo javascript code modifying the element-css?
Did you changes the width of slides and slides_control as the same?
(sorry iam not able to write comments...)
Related
.collection {
margin-bottom: 20px;
}
.collection-content{
position: relative;
padding: 50px 143px;
background-color: #F8F8F2;
background-image: url("../img/collection-bg-img.jpg") ;
}
.collection-leafe-left{
position: absolute;
left: -150px;
top: 40px;
}
.collection-leaves-right{
position: absolute;
right: -350px;
top: 685px;
}
.collection-leafe-left-light{
position: absolute;
left: -216px;
bottom: 170px;
}
<section class="collection">
<div class="container">
<div class=" collection-content ">
<img class="collection-leafe-left" src="https://via.placeholder.com/371 " alt width="371" height="371" >
<img class="collection-leaves-right" src="https://via.placeholder.com/546/592?text=POSITION+IS+NOT+WORKING
C/O https://placeholder.com/ " alt width="546" height="592" >
<img class="collection-leafe-left-light" src="https://via.placeholder.com/314" alt width="314" height="287" >
</div>
</div>
</section>
position:absolute; is not working with collection-right-mix image. Why is that so?
Because of position:absolute; is not working with collection-right-mix image , appear scroll across horizontal.
How to effect position to the collection-right-mix image
Change padding to margin for .collection-content
position: absolute considers the padding part of the width.
Thus, .collection-content { padding: 50px 143px; } would position the absolute children the same as .collection-content { padding: 0; }.
On the other hand, position: absolute does NOT consider the margin part of the width.
So now, the absolutely position children should be positioned as you desired.
.collection {
margin-bottom: 20px;
}
.collection-content {
position: relative;
margin: 50px 143px; /* Changed */
background-color: #F8F8F2;
background-color: #ccc; /* Changed */
background-image: url("../img/collection-bg-img.jpg");
}
.collection-leafe-left {
position: absolute;
left: -150px;
top: 40px;
}
.collection-leaves-right {
position: absolute;
right: -350px;
top: 685px;
}
.collection-leafe-left-light {
position: absolute;
left: -216px;
bottom: 170px;
}
<section class="collection">
<div class="container">
<div class=" collection-content ">
<img class="collection-leafe-left" src="https://via.placeholder.com/371 " alt width="371" height="371">
<img class="collection-leaves-right" src="https://via.placeholder.com/546/592?text=POSITION+IS+NOT+WORKING" alt width="546" height="592">
<img class="collection-leafe-left-light" src="https://via.placeholder.com/314" alt width="314" height="287">
</div>
</div>
</section>
Trying to format icons, inside of a circle, results in an oval being created instead. It also seems like, behaviour changes between the platforms, because, on Google Chrome, they are vertical ovals(See here - https://prnt.sc/1tb2phl)
Have made the codepen example here - https://codepen.io/raicha/pen/dyRjwwa but just in case, code is here too
.container{
position: absolute;
width:6%;
height:6%;
top: 74.63%;
border: 2px solid #E2E3E4;
border-radius: 50%;
box-sizing: border-box;
}
#facebookContainer{
position: absolute;
left: 35%;
right: 87.24%;
}
#instagramContainer {
position: absolute;
left: 45%;
right: 83.59%;
}
#twitterContainer {
position: absolute;
left: 55%;
right: 80.16%;
}
#youtubeContainer {
position: absolute;
left: 65%;
right: 76.72%;
}
#youtube{
position: absolute;
left: 65%;
right: 76.72%;
}
<a href="#">
<div id="facebookContainer" class="container">
<img src="includes\icons\facebook.png" class="social" id="facebook">
</div>
<div id="instagramContainer" class="container">
<img src="includes\icons\instagram.png" class="social" id="instagram">
</div>
<div id="twitterContainer" class="container">
<img src="includes\icons\twitter.png" class="social" id="twitter">
</div>
<div id="youtubeContainer" class="container">
<img src="includes\icons\youtube.png" class="social" id="youtube">
</div>
</a>
And also, maybe there is a better way to organise this stuff? :) Would be nice, if you let me know
You cannot specify container width to be 6% height and 6% width. it takes 6% of total height and 6% of total width which are definitely different values and for a circle you need to specify exact values. For example
height: 3rem or 50px
width: 3rem or 50 px
this code below woks now i specified width and height same on container.
<a href="#">
<div id="facebookContainer" class="container">
<img src="includes\icons\facebook.png" class="social" id="facebook">
</div>
<div id="instagramContainer" class="container">
<img src="includes\icons\instagram.png" class="social" id="instagram">
</div>
<div id="twitterContainer" class="container">
<img src="includes\icons\twitter.png" class="social" id="twitter">
</div>
<div id="youtubeContainer" class="container">
<img src="includes\icons\youtube.png" class="social" id="youtube">
</div>
</a>
<style>
.container {
position: absolute;
width: 50px;
height: 50px;
top: 74.63%;
border: 2px solid #E2E3E4;
border-radius: 50%;
box-sizing: border-box;
overflow: hidden;
}
.comntainer img {
width: 100%;
height: 100%;
}
#facebookContainer {
position: absolute;
left: 35%;
right: 87.24%;
}
#instagramContainer {
position: absolute;
left: 45%;
right: 83.59%;
}
#twitterContainer {
position: absolute;
left: 55%;
right: 80.16%;
}
#youtubeContainer {
position: absolute;
left: 65%;
right: 76.72%;
}
#youtube {
position: absolute;
left: 65%;
right: 76.72%;
}
</style>
I am creating this in a visualforce page but due to stackexchange policy I need to post web development questions here.
I have the following HTML code:
<div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0.75; z-index: 1000; background-color: gray;">
</div>
<div style="position: absolute; left: 0; top: 0; bottom: 0; right: 0; z-index: 1001; margin: 10% 25%; color:white; font-weight:bold; text-align: center;">
<h>Transferring Records...</h><br />
<img src="/img/loading32.gif"/><br />
<h>This may take a minute or two...</h><br />
</div >
Which generates a full screen gray overlay and then my text and image in the center.
What I am trying to do is create a smaller white box around my text as well so it is easier to read. Can anyone help me with that?
Here is a screenshot of current setup:
Personally I would change your structure a slight bit and decouple your CSS - if only for your own sanity when reading the thing in between content (if you want to you can simple include it in a <style type="text/css"></style> tag and it would work as well.
Since you want your white box to be inside your container, why not structure it like that? By fixing the outer container (with class overlay, referenced as .overlay in CSS) you can now position the inner box correctly, by moving it 50% from the left and top and then transform the box itself using translate, moving it by minus half its width and height. Now your structure makes sense and you can do whatever you want with your inner box:
div.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1000;
background-color: gray;
background-color: rgba(150,150,150,.5);
}
div.overlay div {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
color: black;
font-weight: bold;
text-align: center;
padding: 20px;
background: rgba(255,255,255,.5)
}
<div class="overlay">
<div>
<h>Transferring Records...</h>
<br /><img src="/img/loading32.gif"/>
<br /><h>This may take a minute or two...</h>
</div>
</div>
This structure also makes it easy to work with as everything is simply contained in one single element, and you control everything in it. Easier to debug, easier to reason about (the relationship of the elements is obvious) and your CSS can target specifically divs that are nested inside boxes with the class overlay.
Are you searching for something like this?
<div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0.75; z-index: 1000; background-color: gray;"></div>
<div style="position: absolute; left: 0; top: 0; bottom: 0; right: 0; z-index: 1001; margin: 10% 25%; color:white; font-weight:bold; text-align: center;">
<div style="background-color: rgba(255, 255, 255, 0.3);padding: 20px;">
<h>Transferring Records...</h><br>
<img src="/img/loading32.gif"><br>
<h>This may take a minute or two...</h>
</div>
</div>
To add a white background to your div, use background: white;. The problem you then have is your text is also white, so you have to change the color to color: black (or some other color).
Knowing SalesForce, your probably would want rounded corners, so add border-radius: 10px; for that :)
To round the corners more, increase the 10px to a higher number, say 20px, and to round them less, decrease the number to say 5px
As snippet below
<div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0.75; z-index: 1000; background-color: gray;">
</div>
<div style="position: absolute; left: 0; top: 0; bottom: 0; right: 0; z-index: 1001; margin: 10% 25%; color:black; font-weight:bold; text-align: center; background: white; border-radius: 10px;">
<h>Transferring Records...</h>
<br />
<img src="/img/loading32.gif" />
<br />
<h>This may take a minute or two...</h>
<br />
</div>
I am trying to make a login form. So far I have managed to hardcode it but once I need to for ex. move one of the wrappers then I got to change every element position in that wrapper. How can I do it so that when moving icon, BG field and text, I only got to change position from one place?
HTML code:
<div id="user-wrapper">
<img id="userfield" src="images/fieldBG.png" alt="Username">
<img id="usericon" src="images/userIcon.png" alt="Username">
<p id="username">
Username
</p>
</div>
<div id="pw-wrapper">
<img id="pwfield" src="images/fieldBG.png" alt="Password">
<img id="pwicon" src="images/pwIcon.png" alt="Password">
<p id="pw">
Password
</p>
</div>
<div id="login-wrapper">
<img id="loginbtn" src="images/loginBtn.png" alt="Login">
<p><a id="login" href="#">
Login
</p>
</div>
CSS code:
#user-wrapper {
position: relative;
top: 100px;
width:1760px;
}
#usericon {
position: absolute;
top: 10px;
left: 740px;
}
#user-wrapper p {
position: absolute;
top: 14px;
left: 840px;
}
#pw-wrapper {
position: relative;
top: 120px;
width:1760px;
}
#pwicon {
position: absolute;
top: 10px;
left: 740px;
}
#pw-wrapper p {
position: absolute;
top: 14px;
left: 840px;
}
#login-wrapper {
position: relative;
top: 140px;
width: 1940px;
}
#login-wrapper p {
position: absolute;
top: 12px;
left: 950px;
}
The whole thing should look like this (but should be editable/positioned with an ease):
Thank You!
Only use
#usericon {
position: absolute;
top: 10px;
float: right;
left: 740px;
}
Okey, I managed to fix it myself.
Instead of width in the wrapper, I had to use left.
For ex.
#user-wrapper {
position:relative;
top:100px;
left:0px;
}
Now I can just only change wrapper parameters top/left and it moves all items inside the wrapper div.
<div id ="group">
<img src= ' ' id = '1'>
<img src= ' ' id = '2'>
.......
</div>
I would like to reference all the img in the div id 'group' , how to mark it in css? Also, Which is better? Assign all to img / create a class eg. #img.groupItem and reference it everytime? Thanks
The source code:
<div id="book">
<img alt="flip book" src="demo/medium/Web081112_P001_medium.jpg">
<img alt="flip book" src="demo/medium/Web081112_P002_medium.jpg">
<img alt="flip book" src="demo/medium/Web081112_P003_medium.jpg">
</div>
After running the javascript:
<div id="page" style="display: block; width: 1180px; height: 767px; left: 50%; top: 50%; margin: -413.5px auto 0px -590px; cursor: default;">
<div id="book" style="position: relative; width: 1180px; height: 767px; transform: translate3d(0px, 0px, 0px);">
<div class="turn-page-wrapper" page="1" style="position: absolute; overflow: hidden; width: 590px; height: 767px; top: 0px; right: 0px; left: auto; bottom: auto; z-index: 0; display: none;">
<div id="cover" class="turn-page p1" style="width: 590px; height: 767px;">
</div>
</div>
<div class="turn-page-wrapper" page="2" style="position: absolute; overflow: hidden; width: 590px; height: 767px; top: 0px; left: 0px; right: auto; bottom: auto; z-index: 7;">
<div style="position: absolute; top: 0px; left: 0px; overflow: hidden; z-index: auto; width: 968px; height: 968px;">
<div class="turn-page p2" style="width: 590px; height: 767px; position: absolute; top: 0px; left: 0px; bottom: auto; right: auto;">
<img alt="flip book" src="demo/medium/Web081112_P001_medium.jpg">
</div>
</div>
</div>
</div>
</div>
The html code is like that for a single img , I used the answer provided here but still not work. I believe this is the problem caused by generate html code?
CSS was meant to apply global styling with the help of selectors.
The descendant selector is what you are looking for:
#group img {
// code
}
You can create a selector to reference those, yes:
#group img { width: 32px; height: 32px }
However, if possible, it's better to just create a class for what you want to do:
.icon { width: 32px; height: 32px }
Basically you want to decide if this really is something you only want to apply at that location. Is that HTML structure how it always is going to be? What if you change the ID? What if you use a div with a background image instead of an img tag? Those are the sorts of questions you want to be asking yourself.