I'm programming a website and on a page I have dynamic content. To be specific I want to display some content in a div each. And the main div wont stretch upon this content.
#main{
position:relative;
background-image:url(images/main_middle.png);
background-repeat:repeat-y;
width:850px;
min-height:450px;
}
.intrebari{
position:relative;
width:400px;
min-height:150px;
padding:20px;
}
while($row=mysql_fetch_array($rezultat)){
echo '<div class="intrebari">
<div id="upleft"></div>
<div id="upright"></div>
<div id="downleft"></div>
<div id="downright"></div>
'.$_SESSION['username'].' a intrebat:<br />
'.$row['question'].'
</div>';
}
What am I doing wrong?
The internal div has to be cleared so the outer should know the height of the inner div
you may use a class
.clear{
clear:both;
}
and introduce it after your inner div inside outer div main
echo '<div class="intrebari">
<div id="upleft"></div>
<div id="upright"></div>
<div id="downleft"></div>
<div id="downright"></div>
'.$_SESSION['username'].' a intrebat:<br />
'.$row['question'].'
</div><div class="clear"></div>';
this will help you
If you have given float to intrebari, you need to give float left or right to main div to get the main wrap the inner content
.intrebari{
position:relative;
width:100%
min-height:150px;
padding:20px;
}
if you want to have the content of the div.intrebari stretch horizontaly make the width of value to 100%
Related
I have a jssor slider working, including displaying captions. Each caption shows a title in the first line and a description in the lines below the title. I'm looking to add the slider count to the caption, so to the right of the title I would show, for example, "2 of 47".
Based on another post I found, I added the below code to the js:
function DisplayIndex() {
$("#displayIndex").text(jssor_slider2.$CurrentIndex() + 1 + " of " + jssor_slider2.$SlidesCount());
}
DisplayIndex();
jssor_slider2.$On($JssorSlider$.$EVT_PARK, DisplayIndex);
I also added the "<div id='displayIndex'" line to the php code, subordinate to caption div, as below:
echo "<div class='caption2_text'>";
echo "<h1>$title</h1>";
echo "<p>$desc</p>";
echo "<div id='displayIndex' u='any' style='position: absolute; top: 10px; left: 790px; width: 100px; height: 26px;'></div>";
echo "</div>";
The count appears, but is in the inner container rather than in the caption, so any full width picture overlays the count and the count is not visible.
How can I put the count into the caption itself?
Any assistance is much appreciated.
I found that you placed the displayIndex element inside a caption. You know, a caption should be a child element of a slide. It always moves along with the slide.
The more reasonable way is to make the displayIndex to be a static/fixed element.
A static/fixed element is an element parallel with every slide. It should be treated as a slide, but with u="any" attribute specified, it's no longer a slide, it will always stay where it should be.
<div u="slides">
<div><!-- slide 1 --></div>
<div><!-- slide 2 --></div>
<div id='displayIndex' u='any' style='position: absolute; top: 10px; left: 790px; width: 100px; height: 26px;'>
<!-- this is a static element -->
</div>
</div>
Reference: http://www.jssor.com/development/slider-with-fixed-static-element.html
I am trying a really easy thing, hiding / showing an info div my mouse-hovering another element. My code structure is similar to:
<div class="divRow">
<div class="divColumn">
<div class="divInfo">Info</div><img src="" /></div>
<div class="divInfo">Info</div><img src="" /></div>
<div class="divInfo">Info</div><img src="" /></div>
</div>
</div>
Image is shown, and there should be a blank space in which I want divInfo to appear.
I am using the following jQuery code to show / hide:
$(function() {
$('.divInfo').hide();
$('.divColumn').hover( function() { $('.divInfo').toggle(); } );
});
Of course, this works, but shows / hides all 3 divs in the row at a time. I want to be able to show hide each one separately...
Is this possible using classes? Or do I have to use a different unique ID for each??
Functionality I want is shown here, but I don't know how to do that. :)
http://www.therice-co.com
Regards and thanks
Actually you want the divs to always be there but somehow "not visible" when you are not hovering them. This is as simple as:
.divInfo:not(:hover){
opacity: 0;
}
Fiddle
This is what are you trying to achieve
see http://jsfiddle.net/j0aoy47L/
Javascript
<script>
$(function() {
$('.divInfo').hover( function() {
$(this).find('.info').toggle();
} );
});
</script>
CSS
<style>
.info{
display: none;
text-align: left;
}
.divInfo{
background: #fcfcfc;
border:1px solid #e5e5e5;
width:360px;
height:200px;
position: relative;
margin-bottom: 10px;
text-align: center;
padding:10px;
}
.divInfo img{
position: absolute;
bottom: 9px;
left: 19px;
}
</style>
HTML
<div class="divRow">
<div class="divColumn">
<div class="divInfo">
<div class="info"><h4>Image Caption</h4> <p>Some image information</p></div>
<img src="http://placehold.it/350x100/addd" />
</div>
<div class="divInfo">
<div class="info"><h4>Image Caption</h4> <p>Some image information</p></div>
<img src="http://placehold.it/350x100/addd" />
</div>
<div class="divInfo">
<div class="info"><h4>Image Caption</h4> <p>Some image information</p></div>
<img src="http://placehold.it/350x100/addd" />
</div>
</div>
$('.divColumn').children('a').hover(function () { // bind it to exact image
$(this).prev('.divInfo').toggle(); // show previous div
});
will work
jQuery DEMO
but you definetely have too much closing </div>s
also you can do it with pure CSS if you wrap each info and image in separate div and use :hover on it
PURE CSS DEMO
I have many images each with their own unique id. each image is a link to its ad. I want to add a hover fadeIn effect that will display some info about that ad on top of the image.
I tried to do something but I don't think I am taking the right approach.
I feel like there is a better way to get the div on top rather than doing margin: -105px 0 0;
Also, I can't think of how to tell it "if id=1 is hovered, fadein id=fade1, else fadeout"
http://jsfiddle.net/mKDP4/4/
Dynamic div (in php)
<img src="test.jpg" class="ad_cover" id="1">
<div class="ad_fade" id="fade1"></div>
<img src="test.jpg" class="ad_cover" id="2">
<div class="ad_fade" id="fade2"></div>
<img src="test.jpg" class="ad_cover" id="3">
<div class="ad_fade" id="fade3"></div>
JQUERY
$('.ad_cover').mouseover(function() {
var ad_id = this.id;
$('#fade'+ad_id).fadeIn('slow');
});
$('.ad_cover').mouseout(function() {
var ad_id = this.id;
$('#fade'+ad_id).fadeOut('slow');
});
CSS
.ad_cover{
width:100px;
height:100px;
}
.ad_fade{
display:none;
position:absolute;
margin:-105px 0 0;
width:100px;
height:100px;
background:rgba(255,255,255,0.8);
}
All help is appreciated!
Instead of messing with margins in your CSS, you can use background-image and place the images inside of your div elements like so:
HTML
<div class="ad">
<img src="..."/>
</div>
<div class="ad">
<img src="..."/>
</div>
<div class="ad">
<img src="..."/>
</div>
CSS
.ad img {
width:100px;
height:100px;
display:none;
}
.ad {
width:100px;
height:100px;
background-image:url(...);
display: inline-block;
}
Then, using .hover() and .children(), you can hide/show the content of the divs like so:
$('.ad').hover(function() {
$(this).children('img').fadeIn('slow');
},
function() {
$(this).children('img').fadeOut('slow');
});
This way, you don't have to mess with combining IDs and classes and only have to use the one class on the parent divs.
Here is a fiddle of it in action: http://jsfiddle.net/9zP7g/
Hi Is there any of you out there that is able to assist me on this. I'm experimenting with the fluid layout of bootstrap on my wordpress site. Apparently the isn't working properly. I created a .span 12 column and its not taking up the full width of the browser. Instead its width shrank. Is there a way around this?
Heres the experiment which i created using a custom page template
<?php
/*
Template Name: page-work
*/
?>
<?php get_header(); ?>
<h1><?php the_title(); ?></h1>
<style type="text/css">
.span12{
background:black;
color:white;
padding:20px 0;
text-align:center;
margin-top:15px;
}
.span6{
background:blue;
color:white;
padding:20px 0;
text-align:center;
margin-top:15px;
}
</style>
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">span 12</div>
</div>
<div class="row-fluid">
<div class="span6">span 6</div>
<div class="span6">span 6</div>
</div>
</div>
This is because bootstrap has a fixed width of span12 as
.span12 {
width: 1170px;
}
for bigger screens.
If you still want, you can try this:
#media (min-width: 1200px) {
.span12 {
width: 100%;
}
}
Always create a child css file and put that below the bootstrap file.
I would recommend upgrading to Bootstrap 3 as it handles fluid-containers in a much better way and you wouldn't have this problem in the first place.
.span12 becomes col-xx-12 (xx is either xs, sm, md and lg...read up on that!) and has a width of 100%. BS3 uses percentage widths rather than fixed widths as mentioned in the answer above. It's also not too difficult to move from BS2 to 3.
http://getbootstrap.com/ - download here
http://getbootstrap.com/getting-started/ - documentation
As a general rule, wordpress won't really change how your website looks. It's the styles you put around it so Wordpress in this case is irrelevant.
I have text that I put into a div, which is generated automatically by php..(taken from the database).
But the text stretches over the div.
here is an example of what I want to do:
<div>
<?php
Generate_All_Text_Content_Here();
?>
</div>
I want the div to limit to where the text stretches..say no more than 300px.
I tried to give it width measurement..but it has no influence over the div element
add to your style
div{
max-width:300px;
word-wrap:break-word;
text-overflow:<clip> or <ellipsis>;
overflow:<hidden> or <scroll>;
}
this should really cover everything >.<
Why not do something like this then?
<div style="<?php echo get_text_width(); ?>">
<?php Generate_All_Text_Content_Here(); ?>
</div>
Just set the div width with CSS and text won't be bigger:
div {
max-width: 300px; /*Or simply width: 300px; if you want the div always to be that width*/
}