Div tag background colours CSS HTML - javascript

I'm having difficulties with DIV tags again. I have managed to make it so that the users screen into 3 columns. But I'm now trying to add an individual background to each div. But the style="background:blue;" or style="background-color:blue;" don't seem to work.
Any help would be appreciated :)
http://prntscr.com/2kde62 <-- what I wanted it to look like(I used an Image for the background)
http://prntscr.com/2kdedk <-- what it look like even with the style="background:blue;"
Code Below:
<div id='leftDiv' style="float:left; margin:0; width:33%;" align="center">
<img style="position:absolute; top:160; left:170;" onclick="addKittens()" src="http://imgur.com/3mj6PL5.jpg" width="192" height="192">
</div>
<div id='middleDiv' style="float:left; margin:0; width:33%;" align="left">
<img style="position:absolute; top:200; left:650;" onclick='crazyLadyAdd()' src="http://imgur.com/7sucpdi.jpg" width="96" height="96"> <!-- Crazy Cat Lady image -->
<img style="position:absolute; top:300; left:650;" onclick='milkFactoryAdd()' src="http://imgur.com/Q9y4xBJ.png" width="96" height="96"> <!-- Milk Factory image -->
</div>
<div id='rightDiv' style="float:left; margin:0; width:33%; background:blue;" align="center">
<p style="position:absolute; left:1200; color:red; font-size:20;"> PLACEHOLDER </p>
</div>

It seems that all your div have no height attribute. Usually, the div wraps its children blocks, i.e. the img in your situation. However, you have set the img position:absolute, so the parent div cannot get height correctly.

Have you tried adding the:
{background-color:#b0c4de;}
to the CSS of that layout? Make your 'rightDiv' in CSS# and you can place in the code above, it should load.

Try adding
Overflow:hidden
to all three columns or if the height is fixed, add
height:xyzpx
to all three div's.

The div-boxes have no height due to placing the images absolute. Give them 100% height and you can style them or place the images centered and not absolute.

Here's a working sample for your case. The position absolute on the images are messing it up.
<div id='leftDiv' style="float:left;margin:0; width:33%;background:yellow ;" align="center">
<img onclick="addKittens()" src="http://imgur.com/3mj6PL5.jpg" width="192" height="192">
</div>
<div id='middleDiv' style="float:left;margin:0; width:33%;background:red;" align="left">
<img style="width:96;height:96;margin-top:200px" onclick='crazyLadyAdd()' src="http://imgur.com/7sucpdi.jpg" /> <!-- Crazy Cat Lady image -->
<img onclick='milkFactoryAdd()' src="http://imgur.com/Q9y4xBJ.png" width="96" height="96" /> <!-- Milk Factory image -->
</div>
<div id='rightDiv' style="float:left; margin:0; width:33%; background:blue;" align="center">
<p style="color:red; font-size:20;"> PLACEHOLDER </p>
</div>
You should be able to figure out the height of the images yourself. But stop using absolute on all elements. Adding a height to the divs can also fix your issue.

Related

How to pre-load all images in a div only?

I have HTML that looks like this.
<div class='parallax'>
<div class='slider'>
<img src='ps1.jpg' alt=''>
<img src='ps2.jpg' alt=''>
<img src='ps3.jpg' alt=''>
<img src='ps4.jpg' alt=''>
<button id='slider-previous'>
</button>
<button id='slider-next'>
</button>
</div>
</div>
Its for a jQuery slider that I am trying to make. The javascript is such that I don't have change it no matter how many images I add to the <div class='slider'>. I need to pre-load these images in a similar way. Whatever solution I could find had one of two problems.
Either it pre-loaded all the images on the webpage, including those outside of <div class='slider'>, or the links of the images had to be customly added to the code.
I looked into lazy-loading as an alternative (I don't need it as opposed to pre-loading) but the solutions I could find involved adding width and height attributes to the images. My div and the images have the following CSS which is absolutely essential for my slider.
.slider, .slider img {
width:100%;
height:auto;
margin:0;
padding:0;
}
I am looking for something that is somewhat like this.
$(function() {
$( '.slider' ).children() ..........
//OR
$( '.slider > img' ) ..........
});
Can anyone help?

How do I get my logo, slideshow and image to cover my entire screen no matter the window size

I would like to get all three of these divs (logo, slideshow, and subslider) to fit the entire screen window no matter the size. I basically want to mimic the background:cover action in CSS but with all three of these elements. From my research I need to do something in javascript but I just can't seem to get it to work no matter what I try. I would also like to note that I am using drupal if that changes anything... Despite reading a lot on the subject, I'm way out of my comfort zone when it comes to trying to understand window resizing issues, any help, advice, and code snippets would be a godsend please!
<div class="logo">
<img src="sites/all/themes/cpd pro/images/cpd.jpg" alt="Center for Passion Development">
</div>
<!-- *************SLIDESHOW***************-- -->
<div id="slider">
<img src="sites/all/themes/cpd pro/images/slide1.jpg"/>
<img src="sites/all/themes/cpd pro/images/slide2.jpg"/>
<img src="sites/all/themes/cpd pro/images/slide3.jpg"/>
<img src="sites/all/themes/cpd pro/images/slide4.jpg"/>
<img src="sites/all/themes/cpd pro/images/slide5.jpg"/>
</div>
<!-- *************BELOW SLIDESHOW IMAGE***************-- -->
<div class="subslider">
<h5><img src="sites/all/themes/cpd pro/images/nav-wrap.png" alt="navigation"> </h5>
</div>
Use vh unit in CSS. 100vh is exactly 100% of your viewport's height, so you can make your 3 divs heights sum to 100vh.

How to make a list of images responsive to window size - CSS/JS/Bootstrap

So I have this code:
<ul class="acc-list list-inline">
<li>
<img src="image.png" alt="">
<div class="item-container">
<p class="description">texttexttext</p>
<p class="name">texttexttext</p>
</div>
</li>
<li>
<img src="image.png" alt="">
<div class="item-container">
<p class="description">texttexttext</p>
<p class="name">texttexttext</p>
</div>
</li>
<li>
<img src="image.png" alt="">
<div class="item-container">
<p class="description">texttexttext</p>
<p class="name">texttexttext</p>
</div>
</li>
</ul>
With Bootstrap and some additional CSS, this code is essentially producing a list of 3 images horizontally across the page. The images are nothing special and as I'm using bootstrap they reposition themselves when resizing the window slightly. If I resize my window to represent something similar to a mobile phone screen for example, because of my styling and bootstrap the list simple shows all 3 images on top of each other vertically.
Great you may think, but what I want to do in this scenario is actually use some sort of jQuery slider gallery instead. Instead of the images lining up vertically on top of each other in a smartphone size window, I would like them to go away and come back as a slider gallery.
I have tried, but admittedly I really suck at jQuery/JS, so I'm wandering if anyone can point me towards a good example of this or can help with some coding. I've looked around on the internet but I only seem to come across examples of the slider resizing with the window.
However, what I want to do is completely get rid of my list code and throw these images into an entirely new slider gallery when the window is very small.
May I offer a different approach. Using a simple horizontal scroll - you can find some nice customizable scrollbars out there to make it look a little more fancy. Since it includes images, I didn't do a jsfiddle:
<!DOCTYPE html>
<html>
<head>
<style>
body
{
width:100%;
}
#hold
{
width:90%;
height:300px;
overflow-x:auto;
overflow-y:hidden;
}
#image_container
{
width:920px; /* equal to total width of all images */
min-width:480px; /* minimum for device size */
}
#image_container li
{
display:inline;
width:300px;
height:100%;
margin:2px;
}
#image_container li img
{
width:300px;
}
</style>
</head>
<body>
<div id="hold">
<ul id="image_container">
<li><img src="../images/slides/bridge.jpg"></li>
<li><img src="../images/slides/road.jpg"></li>
<li><img src="../images/slides/leaf.jpg"></li>
</ul>
</div>
</body>
</html>

Bootstrap.js Carousel with only text

I follow this tutorial to make Carousel slide .
When I define each item contain image and paragraph as -
<div class="item">
<img src="http://placehold.it/1200x480" alt="" />
<div class="carousel-caption">
<p>Caption text here</p>
</div>
</div>
it's work fine (here its jsFiddle) .
But when I reduce it to paragraph only as -
<div class="item">
<div class="carousel-caption">
<p>Caption text here</p>
</div>
</div>
it stop working (here its jsFiddle) .
How could I make it work with only paragraph such that is slide the text each switch ?
The position property of the .carousel-caption was causing the problem, without the image it goes haywire, so set it to static:
.carousel-caption{
position:static;
}
Here's the demo of it working both with and without image:
DEMO
The easiest way will simply to make images that are a background colour. If you want a cleaner way to do it, you can probably achieve the same effect using CSS.
See after removing image and leaving only paragraph
i gave the item container class the width and height of image with a background colour to div to indicate the presence just copy and paste this code in fiddle css section and run to see the change
.item{
height:480px;
width:1200px;
background-color:orange;
}

float:right using css - There must be an easy way to do this

I have some text I want to display with a "V" after it and floated to the right. The text is a voltage (hence the V). It has an id and is calculated with JavaScript.
I'm sure there is a neat way of doing this, but I'm inexperienced and overcomplicating things and not getting anywhere!
I tried this:
<h3><span id="voltsSensor2"; style="float:right" >2.99</span>V</h3>
But because the V is outside the span it stays left.
I have also tried making the h3 tag all float left in css but for some reason it puts the text outside of the div area which is a box with a border as defined in my css as in this example:
<div class="ex">
<h1 id = nameS1>Sensor 2</h1>
<h2>Temperature</h2>
<h3><span id="tempSensor2">18.5</span>&#176C</h3>
<div style="width:255px; height:13px; background-color:#ddd;">
<div id ="barTempS2" style="width:60px; height:13px; background-color:#366; border-right:1px white solid;"></div>
</div>
<h2>Humidity</h2>
<h3><span id="humSensor2">55.0</span>%RH</h3>
<div style="width:255px; height:13px; background-color:#ddd;">
<div id ="barHumS2" style="width:140px; height:13px; background-color:#366"></div>
</div>
<h4><span id="voltsSensor1">2.99</span>V</h4>
<img src="images/greyCornerRhb.png" width="12" height="12" alt="Sensor Name"; style="float:right">
</div>
I'm sure there is a much easier way. I would be grateful for some help.
You should just use a text-align: right; on the parent element and lose the float.
Try this:
<h3 style="float:right"><span id="voltsSensor2">2.99</span>V</h3>
<div style="clear: both"></div>
JSFiddle: http://jsfiddle.net/BJPUv/
The clear:both div will allow for the height of the floated elements so they dont float out of the div.
Two things you could very easily do. Either stick the V in its own span and specify position:relative and float:right for both spans. Or just stick the V in the span of the number. You could append the "V" in the js code after you have calculated the value.

Categories