I'm able to align and center graphpaper and footer as needed but I'm unable to get the colorpicker div to exist next to these to. No matter what I try it ends up being below the rest of these. Is there a way to have the two divs centered vertically and then put the colorpicker div next to these two?
<div id="abstract">
<div class="graphpaper" id="graphpaper" onclick="getPosition(event)" style="width:984px; height:1100px;">
<img src="images/poster/poster-top.png" align="left"/>
<img src="images/poster/poster-left.jpg" align="left" style="margin-left:12px;"/>
<canvas id ="canvas" width = "898" height = "900"/>
<img src="images/poster/poster-right.jpg" align="right" style="margin-right:10px;"/>
</div>
<div class="footer" id="footer">
<img src="images/poster/poster-bottom.png"/>
</div>
<div class="colorpicker" id="colorpicker" style="width: 70px; clear:both;">
<img src="images/color-tab/no-color.png" id="unselected" class="unselected"/><br>
<img src="images/color-tab/color-dark.png" id="dark_image" class="darkimage"
onclick="getColor('#00ccff','images/color-tab/color-dark.png')"/><br>
<img src="images/color-tab/color-medium.png" id="med_image" class="medimage"
onclick="getColor('#000000','images/color-tab/color-medium.png')"/><br>
<img src="images/color-tab/color_light.png" id="light_image" class="lightimage"
onclick="getColor('#ff0066','images/color-tab/color_light.png')"/><br><br><br><br>
</div>
</div>
In order to do this you need to float all of your divs to the left, and give them widths that add up to 100% (ie. 40%, 40%, 20%).
This is my best guess without seeing your question as a jsfiddle
1.) Removed the Footer div and added the img to the graphpaper div
2.) set colorpicker to position:fixed; and set margin-top:300; so it would be starting in the proper place.
Related
I'm having a hard time with HTML/CSS now. I'd love to create some sort of a slider with images placed side by side with hidden overflow (so when you press "next" arrow it will "move" pictures to the left (hiding the left one and showing the one that was hidden).
The problem is I can't make my div to go beyond its parent thus I can't line up my images side by side.
It looks like this:
<div id="slider">
<div id="images">
<div class="image_container">
<img src="" alt="1"/>
</div>
<div class="image_container">
<img src="" alt="2"/>
</div>
...
<div class="image_container">
<img src="" alt="3"/>
</div>
</div>
</div>
Where #slider should be at 95% of width and preferably height based on content,
#images should have "no width" - it should be based on the content and max-height~, .image_container should have the width of the img - these should line up one next to another.
Any ideas how can I achieve that? I've been trying lots of things and none of them work.
Set the display property of the child elements to inline-block and the white-space property of the parent to nowrap.
#parent{
background:#000;
height:100px;
padding:5px;
white-space:nowrap;
width:200px;
}
#parent>div{
display:inline-block;
height:100%;
width:100%;
}
#parent>div:nth-child(odd){background:#f00;}
#parent>div:nth-child(even){background:#0f0;}
<div id="parent"><div></div><div></div><div></div><div></div><div></div></div>
I am trying to make a responsive website. My issue is if i am not setting a div height then the bottom of the div content has come up and overlay with the top div contents. Also if I sets a height, when i see it in responsive it takes the full height and show white space. Can you guys please sort it out?
You want something like this:
<div style="height:20%"> CONTENT </div>
or
<div style="height:40px"> CONTENT </div>
use % to specify the amount of space your div will get in your current container or px for the number of pixels
http://www.w3schools.com/cssref/pr_dim_height.asp
Friends, this is my sample coding
<div class="row clearfix">
<div class="left-banner">
<img src="" alt="">
</div>
<div class="right-banner">
<img src="" alt="">
</div>
</div>
<div class="container">
<p></p>
</div>
CSS part:
.row{width:100%;}
.left-banner{float:left; width:60%;}
.right-banner{float:right; width:40%; display:none;}
.container{width:100%;}
For mobile responsive, I want to hide the right banner div so I did 'display: none;' but the container div came up and overlay with the row div. I just want to hide the right banner without any affect of other divs.
I have this site.
If you click past exhibition you will see images and dark gray container which is great.
I put an image to understand better what I want to do.
I do not want a fixed size ... somehow I want to be automatically
HTML + CSS:
<div class="container-left" style="width:100%;background:grey;">
<div class="contentt"></div>
<div class="imagini">
<div class="lista-sus">
<div class="gigi" style="float:left;"><img src="/wp-content/themes/wpbootstrap/images/a.png" alt="some_text"></div>
<div class="gigi"><img src="/wp-content/themes/wpbootstrap/images/b.png" alt="some_text"></div>
</div>
<div class="lista-jos">
<div class="gigi" style="float:left;"><img src="/wp-content/themes/wpbootstrap/images/c.png" alt="some_text"></div>
<div class="gigi"><img src="/wp-content/themes/wpbootstrap/images/d.png" alt="some_text"></div>
</div>
<div class="sageti">
<div style="float:left;"><img class="sageata-stanga" src="/wp-content/themes/wpbootstrap/images/butoane-1.png" alt="some_text"></div>
<div ><img class="sageata-dreapta" src="/wp-content/themes/wpbootstrap/images/butoane-4.png" alt="some_text"></div>
</div>
I tried .container-left{width:auto;}but unfortunately it does not work and do not understand why
You can help me solve this problem please?
If you want the block to filled in your container width: Add this
.gigi {
float:left;
width:50%;
}
Now if you want your image to fill up also these blocks, you have to use put this style
background-image:url('my/url');
background-size:cover;
background-position:center center;
If you try to use this method you have add a height in .gigi div because youre using a background-image now and the height is not specified
I am trying to make the captions appear centered below the images with the following code :
<div style="float:left;width:100px;" class="dataview">
<div style="width:100px;height:80px;margin:18px;" class="thumb-wrap">
<img src="{src}" class="icon" />
<div style="width:100px;text-align:center;">{text}</div>
</div>
</div>
However, the end result is that the text is centered indeed, but placing the beginning of the text in the center of the div, thus making the text appear to the right.
How can I prevent this?
You can remove the margin:18px and the width:100px of the div which contains the text, since its parent div already has width:100px:
<div style="float:left;width:100px;" class="dataview">
<div style="width:100px;height:80px;margin:18px;" class="thumb-wrap">
<img src="{src}" class="icon" />
<div style="text-align:center;">{text}</div>
</div>
Since you need to keep the caption center to the image, the width of div consisting the text should have same width as the img. and to make text center apply attribute align='center' to the div itself instead of giving css text-align:center
<img src="{src}" class="icon" />
<div align="center" style="width:width of image;">{text}</div>
This will solve your problem
I have a div inside a div and I want the inside div to either contain a background colour or background image. My code is:
<div class="row two">
<div class="cols n15">
<h2 class="latestVideo">Latest Video</h2>
<iframe width="100%" height="370" src="//www.youtube.com/embed/a-XQL60NVmQ" frameborder="0" allowfullscreen></iframe>
</div>
<div class="cols n9 clearfix">
<h2>Other Videos</h2>
<div class="otherVids">
<p>"test"<p>
<!-- <img src="images/otherVideos.jpg" alt=""> -->
<div class="video1">
</div>
<div class="vidoe2">
</div>
<div class="video3">
</div>
</div>
<div style="clear:both"></div>
Right now this makes it look like this:
What I want is for the red box to extend all way down and match the height of the div on the left side. I realize that this would work if I have the div(otherVids) a height and width, but if I do this the website won't be responsive anymore.
So if there anyway to make the div background fill up the empty space while still remaining responsive?
Here is the CSS code I have:
.otherVids{
background-image: url('images/otherVideos.jpg');
background-color: red;
width: 100%;
height: 100%;
}
Try setting the height of otherVids to be equal to the iframe.
Add height:370px; to the css of .otherVids
You can try two method,the first thing is:
.otherVids{
min-height:370px;
}
or:
.otherVids{
height:370px;
overflow-y:scroll;
}
if your video list is to many,you need to design the content responsive.
finally,I think you don't need use width:100%,because div is block element.