I have a square that contains pictures and each picture is supposed to be clickable to take you to that person's profile, but my top left picture is not clickable. I'm not sure what I'm doing wrong.
Here is my jsfiddle so you can see the problem.
<div id = 'crew_div'>
<div class = 'my_crew'><div id = 'jason'><a href = 'http://www.startingtofeelit.com/author/musicmakesmelosectrl/'><img src='http://www.startingtofeelit.com/profile/jason.jpg' title = 'View Posts by Jason'></a></div></div>
<div class = 'my_crew'><div id = 'dharam'><a href = 'http://www.startingtofeelit.com/author/4everevolution/'><img src='http://www.startingtofeelit.com/profile/dharam.png' title = 'View Posts by Dharam'></a></div></div>
<div class = 'my_crew'><div id = 'james'><a href='http://www.startingtofeelit.com/author/jjstiles/'><img src='http://www.startingtofeelit.com/profile/james.png' title = 'View Posts by James'></a></div></div>
<div class = 'my_crew'><div id = 'cody'><a href='http://www.startingtofeelit.com/author/codecray/'><img src='http://www.startingtofeelit.com/profile/Cody.jpg' title = 'View Posts by Cody'></a></div></div>
</div>
#crew_div {
position:relative;
width: 312px;
height:312px;
}
.my_crew {
position:absolute;
}
.my_crew img {
width:156px;
display:block;
}
.my_crew #jason {
top:0px;
left:0px;
position:relative;
}
.my_crew #dharam {
top:0px;
left:156px;
position:relative;
}
.my_crew #james {
top: 156px;
left: 0px;
position:relative;
}
.my_crew #cody {
top:156px;
left:156px;
position:relative;
}
Add a z-index to your image like this :
.my_crew #jason {
top:0px;
left:0px;
position:relative;
z-index: 1;
}
You haven't specified width/height dimensions or top/left positioning for your <div class="my_crew">. They are each positioned at the top-left, and their child <div> is then positioned relative to the absolutely positioned parent. That's why the top-left isn't clickable, because it's really stacked under 3 other <div>s.
A better solution would be to combine the two <div>s into one.
See the fiddle here: http://jsfiddle.net/R4HJb/8/
<div id = 'crew_div'>
<div class = 'my_crew jason'><a href = 'http://www.startingtofeelit.com/author/musicmakesmelosectrl/'><img src='http://www.startingtofeelit.com/profile/jason.jpg' title = 'View Posts by Jason'></a></div>
<div class = 'my_crew dharam'><a href = 'http://www.startingtofeelit.com/author/4everevolution/'><img src='http://www.startingtofeelit.com/profile/dharam.png' title = 'View Posts by Dharam'></a></div>
<div class = 'my_crew james'><a href='http://www.startingtofeelit.com/author/jjstiles/'><img src='http://www.startingtofeelit.com/profile/james.png' title = 'View Posts by James'></a></div>
<div class = 'my_crew cody'><a href='http://www.startingtofeelit.com/author/codecray/'><img src='http://www.startingtofeelit.com/profile/Cody.jpg' title = 'View Posts by Cody'></a></div>
</div>
#crew_div {
position:relative;
width: 312px;
height:312px;
}
.my_crew {
position:absolute;
width: 156px;
height: 156px;
}
.my_crew img {
width:156px;
display:block;
}
.my_crew.jason {
top:0px;
left:0px;
}
.my_crew.dharam {
top:0px;
left:156px;
}
.my_crew.james {
top: 156px;
left: 0px;
}
.my_crew.cody {
top:156px;
left:156px;
}
Here is what you need, I reorganized your HTML a bit :)
New Fiddle
<div id = 'crew_div'>
<a href = 'http://www.startingtofeelit.com/author/musicmakesmelosectrl/'><div class = 'my_crew'><div id = 'jason'><img src='http://www.startingtofeelit.com/profile/jason.jpg' title = 'View Posts by Jason'></div></div></a>
<a href = 'http://www.startingtofeelit.com/author/4everevolution/'><div class = 'my_crew'><div id = 'dharam'><img src='http://www.startingtofeelit.com/profile/dharam.png' title = 'View Posts by Dharam'></div></div></a>
<a href='http://www.startingtofeelit.com/author/jjstiles/'><div class = 'my_crew'><div id = 'james'><img src='http://www.startingtofeelit.com/profile/james.png' title = 'View Posts by James'></div></div></a>
<a href='http://www.startingtofeelit.com/author/codecray/'><div class = 'my_crew'><div id = 'cody'><img src='http://www.startingtofeelit.com/profile/Cody.jpg' title = 'View Posts by Cody'></div></div></a>
Why don't you just float them next to each other? That will also save some lines of CSS.
.my_crew {
float:left;
}
Example: http://jsfiddle.net/T5LCm/
Related
I have a search bar which would like to display onto the header on scroll, a great example is like the one on this site: https://www.indiamart.com/
Approach 1 - A simple way to do this would be to detect a scroll & add and remove a class that contains display: none;
You can have an event listener -
window.addEventListener('scroll', function() {
if( window.scrollY !== 0) {
document.getElementById('searchBar').classList.add('scrolled');
} else {
document.getElementById('searchBar').classList.remove('scrolled');
}
});
With the CSS -
.noScroll
{
background: yellow;
position:fixed;
height: 50px; /*Whatever you want*/
width: 100%; /*Whatever you want*/
top:0;
left:0;
display:none;
}
/*Use this class when you want your content to be shown after some scroll*/
.scrolled
{
display: block !important;
}
.parent {
/* something to ensure that the parent container is scrollable */
height: 200vh;
}
And the html would be -
<div class="parent">
<div class ='noScroll' id='searchBar'>Content you want to show on scroll</div>
</div>
Here's a JSFiddle of the same - https://jsfiddle.net/kecnrh3g/
Approach 2 -
Another simple approach would be
<script>
let prevScrollpos = window.pageYOffset;
window.onscroll = function() {
let currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
document.getElementById('searchBar').style.top = '-50px';
} else {
document.getElementById('searchBar').style.top = '0';
}
prevScrollpos = currentScrollPos;
}
</script>
with the html -
<div class="parent">
<div id ='searchBar'>Content you want to show on scroll</div>
</div>
and css
#searchBar {
background: yellow;
position: fixed;
top: 0;
left: 0;
height: 50px;
width: 100%;
display: block;
transition: top 0.3s;
}
.parent {
height: 200vh;
}
Here's a JSFiddle of the same - https://jsfiddle.net/0tkedcns/1/
From the same example, the idea is only to show/hide once user scroll the page using inline css display property, you can do the same or at least provide a code sample so we can help you!
HTML
<div class="search-bar">
<div class="sticky-search">
Sticky Search: <input type="text" value="search" />
</div>
</div>
CSS
.sticky-search {
display:none;
position:fixed;
top:0px;
left:0px;
right:0px;
background:blue;
padding:10px;
}
JS
var searchHeight = $(".search-bar").outerHeight();
var offset = $(".search-bar").offset().top;
var totalHeight = searchHeight + offset;
console.log(totalHeight);
$(window).scroll(function(){
if($(document).scrollTop() >= totalHeight) {
$('.sticky-search').show();
} else {
$('.sticky-search').hide();
}
});
Just a quick on in relation to the following site:
christmas.drcrittall.com
My question, is why despite the following CSS:
html, body {
height:100%;
}
/* Background image for website */
body {
/*background: url("images/crumpled.jpg") no-repeat center center fixed;*/
background: url("../img/crumpled.jpg") no-repeat;
background-size: 100% 100%;
/*margin-bottom:5%;*/
}
#header {
height:20%;
border-style: solid;
border-color:red;
/*padding:0px; */
}
#middle {
height:60%;
/* border-style: solid;
border-color:green;*/
}
#cap {
height:20%;
border-style: solid;
border-color:blue;
/* Previously the click here text was overflowing out of this div. See here to see how to deal with this: https://css-tricks.com/almanac/properties/o/overflow/ */
/*overflow:auto;*/.
}
#form {
min-height:20%; /* Setting min-height of white-space beneath body enables container to expand with the form as it gets bigger */
display:none; /* This div is initially hidden until click button which activates jquery animation */
}
#main_image {
max-width:100%;
max-height:60vh; /*Set max and min heights to 60vh to lock within this container ie stop images expanding out */
min-height:60vh;
}
#candle_image {
width:100%;
height:100%;
}
#top_paper {
width:100%;
max-height:100%;
}
/* Make row height and columns fill entire height of containers */
.row, .col-md-6, .col-md-4, .col-md-6, .col-md-12, .col-md-8, .col-md-2, .col-md-3, {
height:100%;
}
Does the row within #cap and #head not fill 100% of the height? I have used flex box to center the font within the header, but can not seem to do the same with the cap... Here is the HTML:
<body>
<div class = "container-fluid center_font" id = "header">
<div class = "row" style = "border-style: solid; border-color:black;">
<div class = "col-md-12 col-xs-12">
<font id = "dear"> Merry Christmas! </font>
</div>
</div>
</div>
<div class = "container-fluid center_font" id = "middle">
<div class = "row"><!-- style = "border-style:solid; border-color:black;">-->
<div class = "col-md-3" id = "holly_1" style = "padding-top:10%;">
<img src = "../img/candles.png" id = "candle_image" class = "img-fluid">
</div>
<div class = "col-md-6 col-xs-12 center_font"><!-- style = "border-style:solid; border-color:yellow;">-->
<img src = "" id = "main_image" class = "img-circle">
</div>
<div class = "col-md-3" id = "holly_2" style = "padding-top:10%;">
<img src = "../img/candles.png" id = "candle_image" class = "img-fluid">
</div>
</div>
</div>
<div class = "container-fluid" id = "cap"><!-- style = "border-style:solid; border-color:green;">-->
<div class = "row" style = "border-style: solid; border-color:black;">
<div class = "col-md-offset-3 col-md-6 col-xs-12 center_font">
<font class = "ammend" id = "dear" style = "font-size:45px;"> Love from Matthew</font><br>
<!--<a href = "#" id = "reveal">
<font id = "dear" class = "fiddle" style = "font-size: 20px;">Click Me</font>
</a>
-->
</div>
<div class = "col-md-offset-3 col-md-6 col-xs-12 center_font">
<a href = "#" id = "reveal">
<font id = "dear" class = "fiddle" style = "font-size: 20px;">Click Me</font>
</a>
</div>
</div>
</div>
</body>
Font size is too big and collapses the offset columns, and you are missing center_font class on #cap.
Add center_font class to #cap.
Change font-size from 45px to less or equal than 36px on font#dear.ammend to keep 1 line of text ("Love from Matthew").
I have to fit my div size is height=250px and width=1000px and want to fit image automatically in this size. but when i upload image it not fits in div.
My code is here:
css
#main {
width:1000px;
margin:0 auto;
background: #fff;
position:relative;
z-index:1;
}
.promo-image {
margin:0 0 8px;
}
.promo-image img {
vertical-align:top;
}
html:
<main id="main" role="main">
<div class="promo-img">
<?php
$sql4 = "SELECT * FROM adverts_top ORDER BY id DESC LIMIT 1";
$query4 = $conn->query($sql4);
$row4 = $query4->fetch(PDO::FETCH_ASSOC);
$link4 = $row4['link_url'];
$images4 = $row4['imagepath'];
$immg4 = basename($images4);
$imagee4 = "adverts"."/".$immg4;
$rowc = $query4->rowCount(PDO::FETCH_ASSOC);
if ($rowc>=1) {
echo "
<a href='$link4'; target='_blank'><img src='$imagee4';></a>
";
}
else {
echo "";
}
?>
</div>
</main>
You need to use width:100% in <img> you can use inline css as well as you can write it in external file
Inline
External
Pass a class in <img> and write css according to that
.fullWidth{
width:100%;
}
I think he means this
.promo-image {
position: absolute;
top: 0;
right: 0;
bottom: 8px;
left: 0;
}
seeing how he set #main's position to relative without setting any other values (like top or left) for #main
I am new to this forum. I encountered some issues when I was programming a file list display for my education portal.
Here are the codes (part of the whole page):
HTML
<div id = "mcMid">
<div id = "mcMidContainer" class = "tpWhite6">
<div id = "path">
Folder: ROOT
</div>
<div id = "top">
<div id = "name" class = "block1">Name</div>
<div id = "owner" class = "block2">Owner</div>
<div id = "date" class = "block3">Date</div>
<div id = "Delete" class = "block4">X</div>
</div>
<div id = "files">
<div id = "file1" class = "rollOverFBlueFile">
<div id = "name1" class = "block1">Determination of p value</div>
<div id = "owner1" class = "block2">Nguyen Chan</div>
<div id = "date1" class = "block3">2014-05-03</div>
<div id = "Delete1" class = "block4">X</div>
</div>
<div id = "file2" class = "rollOverFBlueFile">
<div id = "name2" class = "block1">Econ Module 1</div>
<div id = "owner2" class = "block2">Joyce</div>
<div id = "date2"class = "block3">2014-05-03</div>
<div id = "Delet2" class = "block4">X</div>
</div>
<?php for ($i=3;$i<$_GET['times'];$i++) { ?>
<div id = "file<?php echo $i; ?>" class = "rollOverFBlueFile">
<div id = "name<?php echo $i; ?>" class = "block1"">Econ Module 2</div>
<div id = "owner<?php echo $i; ?>" class = "block2">Joyce</div>
<div id = "date<?php echo $i; ?>" class = "block3">2014-05-03</div>
<div id = "Delet<?php echo $i; ?>" class = "block4">X</div>
</div>
<?php } ?>
</div>
</div>
</div>
CSS
#mcMid {
float:left;
display:flex;
flex:1;
flex-direction:column;
border-width:1px;
border-left-color:#666;
border-right-color:#666;
border-left-style:solid;
border-right-style:solid;
}
#mcMidContainer {
width:100%;
flex:1;
padding:0px 0px;
}
#path {
width:calc(100% - 20px);
height:auto;
padding:10px 10px;
background-color:#CCC;
}
#top {
width:100%;
height:auto;
padding:5px 0px;
background-color:#EEE;
font-size:12px;
overflow:auto;
}
#files {
width:100%;
flex:1;
overflow:auto;
}
.block1 {
width:calc(50% - 10px);
padding:5px 5px;
height:auto;
float:left;
}
.block2 {
width:calc(20% - 10px);
padding:5px 5px;
height:auto;
float:left;
}
.block3 {
width:calc(20% - 10px);
padding:5px 5px;
height:auto;
float:left;
}
.block4 {
width:5%;
padding:5px 0px;
height:auto;
float:left;
}
.rollOverFBlueFile {
background-color:#FFF;
border-width:1px;
border-bottom-style:solid;
border-color:#999;
width:100%;
height:auto;
padding:5px 0px;
font-size:12px;
overflow:auto;
}
.rollOverFBlueFile:hover {
background-color:#5BADFF;
}
.tpWhite6 {
background-color:rgba(255,255,255,0.5);
}
When this block of code is run with different values of the "times" variable, there were different results. The problem arises when I get the value of "times" to over a certain value when the div's inside start to exceed the allocated height of the "files" div. The "files" div start to stretch and squeezed the "top" and "path" div's.
Is there any other methods, other than fixing the height of "files", to stop this problem? Many thanks!! ^_^
I have to put an image in the absolute position. This absolute position I make overflow hidden, so that it will height automatically, and of course, I make this absolute div inside the relative position.
But image only showing up when I change the position of absolute into relative.
Here is my code:
<div style="position:relative; display:block; overflow:hidden; float:left;">
<div style="position:absolute; overflow:hidden; display:block; top:0; left:0;">
<img src="WEBbgB.jpg" />
</div>
</div>
SOURCE CODE
<ul id="slideHome">
<li><img src="<?php base_url();?>assets/img/WEBbgA.jpg"/></li>
<li><img src="<?php base_url();?>assets/img/WEBbgB.jpg"/></li>
</ul>
CSS
#slideHome {
list-style: outside none none;
padding: 0px;
position: relative;
color: #FFF;
font-size: 18px;
float:left;
}
#slideHome li {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
background:green;
overflow:hidden;
margin: 0 auto;
}
#slideHome li img {
width:100%;
}
JS
$.noConflict();
jQuery( document ).ready(function( $ ) {
var triggers = $('ul#thumnalHome li');
var images = $('ul#slideHome li');
var lastElem = triggers.length-1;
var target;
triggers.first().addClass('active');
images.hide().first().show();
function sliderResponse(target) {
images.fadeOut(300).eq(target).fadeIn(300);
triggers.removeClass('active').eq(target).addClass('active');
}
triggers.click(function() {
if ( !$(this).hasClass('active') ) {
target = $(this).index();
sliderResponse(target);
resetTiming();
}
});
$('.next').click(function() {
target = $('ul#thumnalHome li.active').index();
target === lastElem ? target = 0 : target = target+1;
sliderResponse(target);
resetTiming();
});
$('.prev').click(function() {
target = $('ul#thumnalHome li.active').index();
lastElem = triggers.length-1;
target === 0 ? target = lastElem : target = target-1;
sliderResponse(target);
resetTiming();
});
function sliderTiming() {
target = $('ul#thumnalHome li.active').index();
target === lastElem ? target = 0 : target = target+1;
sliderResponse(target);
}
var timingRun = setInterval(function() { sliderTiming(); },5000);
function resetTiming() {
clearInterval(timingRun);
timingRun = setInterval(function() { sliderTiming(); },1000);
}
});
The reason Why I make this position absolute is because this is for slider purpose.
Any idea please.
it will not show up because of
overflow:hidden;
and not because of your position
apply
position:fixed; into your image
<img style="position:fixed;" src="WEBbgB.jpg" />
and that could make it visible
<div style=" position:relative; display:block; overflow:hidden; float:left;">
<div style=" position:absolute; overflow:hidden; display:block; top:0; left:0;">
<img style="position:fixed;" src="WEBbgB.jpg" />
</div>
</div>