Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
I have problem with position of element in Chrome.
Site: http://isedo.pl/projekty/gladness/
Navigation to slider with team running down. But when click on link in header and other link on site presses the element at a good place.
In Firefox is OK.
#edit
slider + navigate code: http://pastebin.com/ckPUeBaG
css:
#teamSlider{
margin: 20px 0 0 0;
float: left;
}
#snav{
float: right;
width: 35px;
height: 250px;
background: #818181;
margin: 20px 0 0 0;
}
#snavl{
background: url('../images/cnav_left.png') no-repeat top left;
height: 48px;
width: 35px;
cursor: pointer;
}
#snavr{
background: url('../images/cnav_right.png') no-repeat top left;
height: 48px;
width: 35px;
cursor: pointer;
}
.teamSlider is too big. It has a width of 3800px. This doesn't leave any room for .snav. I would make a container and then set the position of .snav absolutely.
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 26 days ago.
Improve this question
I want to shape an image like this with CSS and Tailwind but I got confused totally. Do you have any idea?
I think images are transparent and background shapes are generated by CSS (clip-path).
Like this:
.card{
width: 420px;
height: 310px;
margin: 30px;
border-radius: 5px 20px 20px 20px;
background: #00c853;
position: relative;
}
.card::before{
content: '';
position: absolute;
top: -18px;
width: 200px;
height: 50px;
background: #00c853;
border-radius: 20px 0 0 0;
clip-path: path('M 0 0 L 160 0 C 185 2, 175 16, 200 18 L 0 50 z');
}
<div class='card'></div>
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
I'm going to make a progress bar.
When it's 0%, you can't see anything. From 1%, I would like to put a flag on the progress bar and let you know how far it has progressed. At 100 percent, this flag disappears. This flag is in image form and I don't know how to code it. Progress is received in JavaScript. Should I write position:relative, position:absolute in the div container?
.progressbar {
width: 100%;
border: 1px solid black;
border-radius: 5px;
height: 24px;
}
.icon {
width: 24px;
height: 24px;
position: absolute;
right: -12px;
opacity: .5;
}
.progress {
width: 50%;
background-color: green;
position: relative;
height: 24px;
}
<div class="progressbar">
<div class="progress">
<img class="icon" src="https://loremicon.com/ngon/128/128/811932708408/jpg">
</div>
</div>
Here's the gist. Style as you please.
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 6 years ago.
Improve this question
I am creating a website and have designed the header
The Red and Blue is an image
The Yellow is a navigation bar
The circle is a logo
My issue is that I am unable to put the logo in div of the image and the nav div at the same time. Is this even possible or should I consider a new design. Perhaps I am looking at this incorrectly.
Your question is about having the same image on both the nav and that div.
Pen here!
You can do it easily with background-image and set the same image aswell.
background-image: url(http://s.glbimg.com/jo/g1/f/original/2016/05/02/palestinian-gaza-daily_life_mohammed_abed_afp.jpg);
background-size: cover;
backgroud-position: center center;
This can be achieved using pure CSS. This is a possible approach to get what you want:
#one {
height: 100px;
background-color: blue;
}
#two {
position: relative;
width: 50px;
height: 50px;
background-color: red;
border-radius: 100px;
transform: translateY(40px);
margin: 0 auto;
z-index: 1;
}
#three {
position: relative;
height: 30px;
background-color: yellow;
bottom: -20px;
}
<div id="one">
<div id="two">
</div>
<div id="three">
</div>
</div>
Replace divs with any block element and it should work too. Otherwise, you'll need to set display: block.
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 am relatively new to javascript coding, been doing html\css only, so I wrote this function in JS, that hides and shows a div,but it doesn't seem to work at all, can you tell me what am I doing wrong?
Javascript:
<script type="text/javascript">
function click()
{
if (document.getElementById("div1").style.opacity == "1")
{
document.getElementById("div1").style.height="0px";
document.getElementById("div1").style.width="0%";
document.getElementById("div1").style.opacity="0";
}
else
{
document.getElementById("div1").style.height="400px";
document.getElementById("div1").style.width="60%";
document.getElementById("div1").style.opacity="1";
}
}
</script>
Below is the HTML code I'm working on:
<boutton onclick="click()">TEST CLICK</button>
<div id="div1">Random text in here...</div>
And also the STYLE tag:
<style>
#div1
{
background-color: rgba(0, 0, 0, 0.4);
color: #CBA303;
font-weight: bold;
text-align: center;
border-radius: 20px;
box-shadow: 10px 10px 15px gray;
height: 0px;
width: 0%;
padding: 10px;
font-size: 2em;
font-family: sans-serif;
z-index: 10;
position: absolute;
top: 20%;
left: 20%;
opacity: 0;
transition: height,width,opacity 1s ease;
}
</style>
Thanks for your help!
Rename your onclick function to something else besides click()
example here i've simply renamed it to toggle() and you can see it working.
As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 10 years ago.
it's easier to explain with a schematic
I have main div, which contains another (gray) div inside, and several divs for video thumbs (which are clickable for full-sizer videos).
What I want is to make a button (white arrow on the scheme) that changes the div with thumbs (they are marked with frame) to next "page" - another div with another set of thumbs, tho allowing visitor to browse through several pages with more then 8 thumbs.
Big picture at the top is featured video, it shouldn't change (so if think I can put it atop of everything, not inside the gray div, because it should be replaced with another div with different thumbs set when you click on the button)
I'm not a coder, just making my first steps in html/css and a bit of java, so any help will be appreciated.
Thanks in advance!
I did something similar yesterday with a twitter feed to achieve this:
HTML:
<div class="twitterMask">
<div class="twitterNav" data-id="+"></div>
<div class="twitterNav twitterNavNext" data-id="-"></div>
<div id="jsTwitter">
<div class="tweet">single slide (in your example, this should contain 8 images)</div>
<div class="tweet">single slide (in your example, this should contain the next 8 images)</div>
<div class="tweet">single slide (in your example, this should contain another 8 images)</div>
<div class="tweet">etc etc</div>
</div>
</div>
CSS:
.twitterMask{width:185px; height:122px; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; background: #fff; padding: 10px; position: relative; overflow:hidden}
.twitterArrow{position: relative; background: url(../images/twitterBirdArrow.png); width:93px; height:69px; left: 109px;}
#jsTwitter{width: 780px; height: 150px; overflow: hidden; position: relative; }
#jsTwitter .tweet{overflow: hidden; position: relative; float: left; font-size: 14px; width:185px; height:122px; margin-right: 10px; color: #000; text-align: right; font-style: italic; font-family: Times;}
#jsTwitter .tweet .time{position: absolute; height: 18px; bottom:0; right: 13px; font-size: 12px;}
.twitterMask .twitterNav{position: absolute; background: url(../images/twitterArrows.png); width:10px; height:19px; display: block; z-index: 9; bottom: 8px; left: 10px; cursor: pointer}
.twitterMask .twitterNavNext{background:url(../images/twitterArrows.png) -172px 0px; right: 10px !important; left:auto}
.twitterMask .twitterNav[data-id='+']{display: none}
jQuery
$('.twitterNav').click(function(){
var maxLeft = 0-parseInt($('#jsTwitter').width() - $('.tweet').width() - parseInt($('.tweet').css('margin-right').replace("px","")));
$('#jsTwitter').animate({
left: $(this).attr('data-id')+'='+($('.tweet').width()+parseInt($('.tweet').css('margin-right').replace("px",""))),
}, 100, function() {
var currentLeft = $('#jsTwitter').css('left');
currentLeft = parseInt(currentLeft.replace("px",""));
if (currentLeft <= maxLeft){
$(".twitterNav[data-id='-']:visible").hide();
} else {
$(".twitterNav[data-id='-']:hidden").show();
}
if (currentLeft >= 0){
$(".twitterNav[data-id='+']:visible").hide();
} else {
$(".twitterNav[data-id='+']:hidden").show();
}
});
})
Obviously, you would have to tailor the CSS to fit your template. Should be pretty straight forward though.
The easiest would be to create a second page which has the second set of video thumbs, and make your white arrow image a link to that page. If you don't want that, I would use jQuery to replace the old video thumbs with new ones, upon click of the white arrow of course.