look for division with id shelf and nested division with class inner_div,now the problem is images inside inner_div are not centered after using css class provided below.
CSS CLASS
.inner_div{
display:inline_block;
width:20%;
float:left;
font-size:10px;
text-align: center;
}
.inner_div p{
text-align:center;
margin-left:2px;
margin-right:2px;
/*font-weight:bold;*/
padding:2px;
height:35px;
border-radius:5px;
color:rgb(255,255,255);
background-color:rgb(51,51,51);
}
Simple structure of my catalog
<div id='shelf'>
<div class='inner-div'>
<p>BOOK TITLE<p>
<img src=''></img> //book cover
<img src=''></img // available or not
</div>
<div class='inner-div'>
<p>BOOK TITLE<p>
<img src=''></img> //book cover
<img src=''></img // available or not
</div>
<div class='inner-div'>
<p>BOOK TITLE<p>
<img src=''></img> //book cover // not able to center this two images
<img src=''></img // available or not // not able to center this two images
</div>
.......continues till data available in database
</div>
Try this:
.inner_div img {
display:block;
margin:auto;
}
Try this. You dint specify any css for the images.May be it shud work
.inner_div img {
display: block;
margin-left: auto;
margin-right: auto;
}
Related
I have a background (used style="background-image:url('')) and 2 images.
I need the images to be positioned this way:
First image:
30px from top of the background
15px from the right
Second image
15px from the bottom of the background
15px from the left
my CSS classse:
myItem1 - first image class
myItem2 - second image class
BgGrass - the background
What i've been trying:
.BgGrass {
background-image:url('images/bg/grass.png');
width:800px;
height:480px;
}
.myItem1 {
position:absolute;
bottom: 15px;
left:15px;
}
.myItem2 {
position:absolute;
top:40px;
right:20px;
}
What's wrong?
Update: The solution here provided that I need to add the position:absolute to my background. The problem now is that all the content below this background is moving up inside it and making a total mess.
<div class='BgGrass'>
<img class='myItem1' src='http://cdn.mysitemyway.com/icons-watermarks/simple-black/raphael/raphael_gear-small/raphael_gear-small_simple-black_128x128.png' />
<img class='myItem2' src='http://iconizer.net/files/Brightmix/orig/monotone_close_exit_delete_small.png' />
</div>
<div class="clearfix"></div>
All content here is inside the background
It would have been easier if we could see the original page you're working on (html specifically)
Anyway, assuming this is your html:
<div class='BgGrass'>
<img class='myItem1' src='http://cdn.mysitemyway.com/icons-watermarks/simple-black/raphael/raphael_gear-small/raphael_gear-small_simple-black_128x128.png' />
<img class='myItem2' src='http://iconizer.net/files/Brightmix/orig/monotone_close_exit_delete_small.png' />
</div>
Then the CSS should be:
.BgGrass {
background-image:url('http://www.planwallpaper.com/static/images/744081-background-wallpaper.jpg');
width:800px;
height:480px;
position:relative;
}
.myItem1 {
position:absolute;
top: 30px;
right:15px;
width: 100px;
}
.myItem2 {
position:absolute;
bottom:15px;
left:15px;
width: 100px;
}
CSSfiddle: https://jsfiddle.net/5ndbzg6h/
Issue: you need to add position relative to your parent div.
From definition here
position:absolute The element is positioned relative to its first positioned (not static) ancestor element
By default, BgGrass is static, so you must give him an other position like relative.
.BgGrass {
background-color:red;
position:relative
width:800px;
height:480px;
}
.myItem1 {
position:absolute;
bottom: 15px;
left:15px;
}
.myItem2 {
position:absolute;
top:40px;
right:20px;
}
<div class="BgGrass">
<div class="myItem1">ABC</div>
<div class="myItem2">DEF</div>
</div>
I want to set up a full width slideshow based on the Design I've prepared. I'm building the page on the Unsemantic CSS framework as I was already familiar with 960 gridsystem (960.gs).
What I'm missing is how to write physically correct HTML & CSS. I don't want to build these unstable workarounded glued pages like most.
I've tried my best to build it but nothing seems to work the way it should. Here is a part of the page where a slideshow should appear.
However, it looks like this.
Here's the CCS:
<style>
.slide-wrapper{
background-color:black;
width:100%;
overflow:hidden;
}
.slide-item{
width:100%;
overflow:hidden;
color:white;
}
.slide-img-wrapper{
position:relative;
}
.slide-img{
width:100%;
float:left;
position:relative;
}
.slide-description{
position:absolute;
float:left;
text-align:center;
width: 100%;
margin-top:16%;
}
.description-wrapper{
}
</style>
<div id="slide-wrapper">
<div class="slide-item">
<img class="slide-img" src="../villas.praivit/img/lead.jpg" />
<div class="slide-description">
<p class="location">SWITZERLAND, CERN</p>
<h1>VILLA PANORAMA</h1>
<p class="details">Local Time <b>4:10 am</b>, Temperature <b>32F°</b></p>
<div class="button-1">VIEW VILLA</div>
</div>
</div>
</div>
Is this what you are looking for?
<div id="slide-wrapper">
<div class="slide-item">
<img class="slide-img" src="http://dreamatico.com/data_images/mountain/mountain-1.jpg" />
<div class="slide-description">
<p class="location">SWITZERLAND, CERN</p>
<h1>VILLA PANORAMA</h1>
<p class="details">Local Time <b>4:10 am</b>, Temperature <b>32F°</b></p>
<div class="button-1">VIEW VILLA</div>
</div>
</div>
</div>
.slide-wrapper{
background-color:black;
width:100%;
overflow:hidden;
}
.slide-item{
width:100%;
overflow:hidden;
color:white;
}
.slide-img-wrapper{
position:relative;
}
.slide-img{
width:100%;
float:left;
position:relative;
}
.slide-description{
position:absolute;
float:left;
text-align:center;
width: 100%;
margin-top:16%;
}
.description-wrapper{
}
.button-1{
display: inline-block;
background-color: #b8955d;
color: #fff;
box-sizing: border-box;
padding: 10px;
}
.button-1 a{
color: #fff;
text-decoration: none;
}
I need it to look like this:
Here is the markup:
<div class="hni_vaBreadcrumbContainer">
<progress class="hni_vaBreadcrumbProgress" value="0" max="100"></progress>
<span class="hni_vaBreadcrumbContent">0%</span>
</div>
Here are a couple jfiddles I tried but couldn't get working:
http://jsfiddle.net/x4wLf/, http://jsfiddle.net/cogent/6A5Lb/
I could just use a background image for the percentage text but prefer all CSS.
thanks!
I think I actually figured it out with very little markup/css.
http://jsfiddle.net/o22b4uyz/2/
Markup
<div class='wrapper'>
<div class='concave'><span class="percent">20%</span></div>
</div>
CSS
div.wrapper {
background:blue;
width:80px;
height:20px;
position:relative;
border-radius: 50px;
}
div.concave {
position:absolute;
background:white;
width:20px;
height:20px;
border-radius:50px;
left:-3px;
}
span.percent {
padding-left: 40px;
color: #fff;
}
I'm trying to get the shoutbox on www.talkjesus.com (vBulletin forum) to float left while the verse of the day (orange) to float on the very right side of the shoutbox. I've tried so many variations but it's not working, I'm stuck. Your help appreciated.
The forumhome template code I'm using now is:
<div class="blockbody formcontrols floatcontainer">
<div id="wgo_onlineusers" class="wgo_subblock">
<h3 class="blocksubhead" style="background-color:#82BA1B; color: #fff !important; font-size: 22px; font-weight: 300">shoutbox</h3>
<div style="text-align: center; line-height: 0" class="blockrow">
<div><iframe frameborder="0" width="100%" height="200" src="http://www.cbox.ws/box/?boxid=439&boxtag=7868&sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain1-439"" id="cboxmain1-439" style="border-bottom: 1px solid #e4e4e4;"></iframe></div>
<div style="position:relative"><iframe frameborder="0" width="350" height="70" src="http://www.cbox.ws/box/?boxid=439&boxtag=7868&sec=form&nme={vb:raw cboxnme}&nmekey={vb:raw cboxkey}&pic={vb:raw cboxav}&lnk={vb:raw cboxav}" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform1-439" id="cboxform1-439"></iframe></div>
</div>
</div>
</div>
<br />
<div class="blockbody formcontrols floatcontainer">
<div id="wgo_onlineusers" class="wgo_subblock">
<h3 class="blocksubhead" style="background-color:#E66B1B; color: #fff !important; font-size: 22px; font-weight: 300">verse of the day</h3>
<div>
<div style="font-size:16px; line-height:28px; padding:10px; color: #797979">
<script type="text/javascript" src="http://www.christnotes.org/syndicate.php?content=dbv&type=js2&tw=auto&tbg=ffffff&bw=0&bc=000000&ta=L&tc=43A6DF&tf=Open Sans&ts=14&ty=B&va=L&vc=43A6DF&vf=Open Sans&vs=12&tt=3&trn=NASB"></script>
</div>
</div>
</div>
</div>
relevant CSS code...
/* Auto-clearing of floats */
.floatcontainer:after,
.formcontrols .blockrow:after,
dl.stats:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.floatcontainer,
.formcontrols .blockrow,
dl.stats {
display:inline-block;
font-weight:normal;
}
/* IE-Mac hide \*/
* html .floatcontainer,
.formcontrols .blockrow,
dl.stats {
height:1%;
}
.floatcontainer,
.formcontrols .blockrow,
dl.stats {
display:block;
}
.blockrow {
padding:12px;
}
.blocksubhead {
padding:12px;
}
.blockhead_info, .blocksubhead_info {
float:right;
font-weight:normal;
}
Have you tried applying the float property to the .floatcontainer element?
.floatcontainer {
width: 50%;
float: left;
}
Setting the width property will be necessary here because the output of the script in the second .floatcontainer block adds a div element to the document which has a width of 100%. Take a look at the output here: http://goo.gl/Bw7iaD (see inline styles of first element). This makes the verse box span full-width unless it's parent container has a specified width.
Here is an example of the working code: http://cdpn.io/0dfce502ffdc99f54a159f7a563ed4fe
I have a top nav that extends across the page
Within that top nav I have various elements
two that must align left
one that must align right
The nav is fluid the elements are fixed widths
Do not want the elements to wrap when the browser window is minimized
Needs to work in IE6 on up due to high Chinese audience.
See example here:
http://jsfiddle.net/4SUwg/
<div id="header">
<div id="headerContent">
<div class="search-list"> Search List </div>
<div class="social-buttons"> Social </div>
<div class="signin"> Login Drop Down </div>
</div>
</div>
I would like the div elements within the nav to not wrap. I searched around on stack and could find answers that come close but nothing that completely addressed the issue. My need to have the div element aligned right complicates matters. Must work in all browsers, especially IE's.
Thanks all for your help in advance!!!
Use SPAN .. It's INLINE and not BLOCK ??
<div id="header">
<div id="headerContent">
<span class="search-list"> Search List </span>
<span class="social-buttons"> Social </span>
<span class="signin"> Login Drop Down </span>
</div>
</div>
And your CSS, remove floats
<style>
body {
margin:0;
padding:0;
}
#header {
background: #404040;
height: 35px;
color: white;
margin: 0 0 12px 0;
overflow-x:auto; overflow-y:hidden;
}
#headerContent {
height: 32px;
border:1px dashed #fff;
}
.search-list {
width:150px;
background:#039;
}
.social-buttons {
width:150px;
background:#060;
}
.signin {
width:200px;
background:#F00;
}
You want a fluid layout but the most important rule of a fluid layout is not to set a definite width of elements but you have set the width.
The CSS have a <style> tag, which is not required, probably you put it by mistake.
I have set the width of divs inside headerContent in percentage value. The CSS is
body {
margin:0;
padding:0;
}
#header {
background: #404040;
height: 35px;
color: white;
margin: 0 0 12px 0;
overflow-x:auto; overflow-y:hidden;
}
#headerContent {
height: 32px;
border:1px dashed #fff;
}
.search-list {
width:28%;
float:left;
background:#039;
}
.social-buttons {
width:28%;
float:left;
background:#060;
}
.signin {
width:28%;
float:right;
background:#F00;
}
Just changed the width value and on my browser it looked fine, better than the before version. Here's a fiddle http://jsfiddle.net/DeepakKamat/s52Hn/8/
I found a solution that works in all browsers, specifically IE6 on up since that was a requirement for this project. If you have something better that accomplishes the same thing please post! My sincere thanks to everyone who answered/helped.
<div id="header2">
<table id="headerContent2">
<tr>
<td id="left" valign="top">
<div id="leftWrapper">
<div class="search-list2">Search List</div>
<div class="social-buttons2">Social Buttons</div>
</div>
</td>
<td id="middle"> </td>
<td id="right" valign="top">
<div class="signin2">Login Drop Down</div>
</td>
</tr>
</table>
</div>
<style>
#header2 {
background: #404040;
height: 35px;
color: white;
margin: 0 0 12px 0;
}
#headerContent2 {
width:100%;
}
#headerContent2 td {
height: 32px;
padding:0;
margin:0;
}
.search-list2 {
width:150px;
float:left;
background:#039;
}
.social-buttons2 {
width:200px;
float:left;
background:#060;
}
.signin2 {
background:#F00;
float:right;
width:400px;
}
#leftWrapper {
width:400px;
}
#middle {
width:100%;
}
</style>
See Demo of it working here. Copy the code and try it out in all the IE's since JSfiddle does not work in all IE's.
http://jsfiddle.net/GtXKE/