'.$row['titulo'].''.$contenido.time_since(strtotime($row['dt'])).'
');
}
?>
The styles are in a separate file and they are:
.newsticker-jcarousellite { width:600px; }
.newsticker-jcarousellite ul li{ list-style:none; display:block; padding-bottom:1px; margin-bottom:5px; }
.newsticker-jcarousellite .thumbnail { float:left; width:50px; height:50px; }
.newsticker-jcarousellite .info { float:right; width:535px; }
.newsticker-jcarousellite .info span.cat { display: block; font-size:10px; color:#808080; }
All generates this:
But now, i need to add 3 litle div on the lower part of the profile picture all of them with a black (35% transparent) background where i can put some text, the result must look like this:
Im very new at css, and i realy dont have any idea how to do this, thanks for any help!
Complete code (untested):
HTML/PHP:
<div id="newsticker-demo">
<div class="newsticker-jcarousellite">
<ul>
<?php
echo('<li>
<div class="thumbnail"><img src="'.$fotoperfil.'">
<div class="txt">
<span>t1</span>
<span>t2</span>
<span>t3</span>
</div>
</div>
<div class="info">'.$row['titulo'].'<span class="cat">'.$contenido.time_since(strtotime($row['dt'])).'</span></div>
<div class="clear"></div>
</li>');
}
?></ul></div></div>
CSS:
.newsticker-jcarousellite { width:600px; }
.newsticker-jcarousellite ul li{ list-style:none; display:block; padding-bottom:1px; margin-bottom:5px; }
.newsticker-jcarousellite .thumbnail { float:left; width:50px; height:50px; position:relative /* <- new property */ }
.newsticker-jcarousellite .info { float:right; width:535px; }
.newsticker-jcarousellite .info span.cat { display: block; font-size:10px; color:#808080; }
/* new */
.newsticker-jcarousellite .thumbnail .txt { position:absolute; left:0; right:0; bottom:0; background:#000; background:rgba(0,0,0,0.35); }
Well, if you add the CSS property position: relative the style of .newsticker-jcarousellite ul li, you could simply add another div inside that block, and set the style to be position: absolute, and set the top offset to be ~30-40px or so.
If you need to put multiple divs on top of the image, maybe it would be a better solution to make that image a background-image, as per the CSS property, and then use paddings to get most of the text to flow around it.
As it is, do you need to have multiple text items above it, rather than one block item containing multiple things of text?
the solution is the attribute z-index,
the image has a lower z-index than the 3 divs with the text
you just have then to position them relative to the image or absolute
You could do something like this.
.thumbnail { display:block; float:left; width:125px; height:125px; background:#666; position:relative }
.thumbnail-info { position:absolute; bottom:0; width:100% } /* info inside the thumbnail positioned absolute to the bottom */
.thumbnail .text1, .text2, .text3 { margin:0 2px } /* margin on the right and left */
.thumbnail .text1 { float:left; color:#fff; font-size:10px } /* floated text */
.thumbnail .text2 { float:left; color:#fff; font-size:10px }
.thumbnail .text3 { float:left; color:#fff; font-size:10px }
<div class="thumbnail"><img src="/image">
<div class="thumbnail-info">
<span class="text1">Date</span>
<span class="text2">Time</span>
<span class="text3">Hour</span>
</div>
<!-- thumbnail info end -->
</div>
For the trasparency you can use:
.youInternalDivs="opacity:0.4;filter:alpha(opacity=40);background-color:gray"
Firefox and Chrome use the property opacity:x for transparency, while IE uses filter:alpha(opacity=x).
You can also set an image as background for your smaller divs.
Related
.product {
position:relative;
width:300px;
height:200px;
overflow:visible;
}
.menu {
position:absolute;
width:200px;
height:400px;
}
<div class="product">
<div class="menu></div>
</div>
The menu is hidden by its parent product. The product overflow is visible.
How to make the menu fully visible? The product position is relative, which can
not be changed.
The menu is hidden, and it will become visible on mouseover.
EDIT ---------
The above code is working. The menu is not fully visible because it is clipped by next product. So set z-index to 1000. However,
.product {
position:relative;
width:300px;
height:200px;
overflow-x:hidden;
overflow-y:visible;
}
is not working. There is a vertical scroll, same as overflow-y:auto. why?
You could add padding or margins to them if it's just underneath it. However it's kind of hard to actually see what it's doing so maybe make a fiddle.
.product {
position:relative;
width:300px;
height:200px;
padding: 10px;
overflow:visible;
}
.menu {
position:absolute;
width:200px;
height:400px;
padding: 10px;
}
This is feeling simple question but i'm struggling to get the exact output. I need to align 3 div's inside a div in footer. I have tried lot in google, and worked before too. but in footer fixed position its not working exactly.
In that image, white color container div for footer, red- left, green -right, and center.
here is my CSS :
div .footer-container
{
height:53px;
width:100%;
position:fixed;
}
div .footer-container div .footer-left
{
background-color:#f00;
float:left;
width:33%;
height:31px;
}
div .footer-container div .footer-right
{
background-color:#0f0;
float:right;
width:33%;
height:31px;
}
div .footer-container div .footer-center
{
background-color:#f0f;
margin:0 auto;
height:31px;
width:33%;
}
here is HTML :
<div data-role = "footer" class="footer-container">
<div>
<div class="footer-left"></div>
<div class="footer-right"></div>
<div class="footer-center"></div>
</div>
</div>
What am doing wrong ? pls explain.
Get rid of all the floats. Add Display: inline-block to each of the three inner div's and adjust their width (to 32%) so they fit side by side.
div .footer-container {
height:53px;
width:100%;
position:fixed;
background:#ccc
}
div .footer-container div .footer-left {
background-color:#f00;
display: inline-block;
width:32%;
height:31px;
}
div .footer-container div .footer-right {
background-color:#0f0;
display: inline-block;
width:32%;
height:31px;
}
div .footer-container div .footer-center {
background-color:#f0f;
display: inline-block;
margin:0 auto;
height:31px;
width:32%;
}
Here is a FIDDLE
Make the middle div also float left. If that doesn't help, give the three child divs the property position:relative or position:static.
If that doesn't help, I suspect the problem lies in your html code.
This is because you center div don't have float,
Add this code to div .footer-container div .footer-center
float: left or float:right
use float:left
here's my code
<div style="width:100%; background-color:#FF6600">
<div style="width:33%; background-color:#FF1100; float:left">div1</div>
<div style="width:33%; background-color:#FF6655; float:left">div2</div>
<div style="width:33%; background-color:#FF3333; float:left">div3</div>
</div>
This should work, u lose 1% of width, but it works great for me.. the colors are just to see the 3 differnt divs.. u can put it into css..right?
Take the floats off the left and right and absolutely position them inside the container. This is assuming you want to accomplish what the image is showing. If you just want all 3 side by side your CSS works fine, just remove everything from the names but the class names (like I have it below)
http://jsfiddle.net/calder12/rnjtb/2
.footer-container
{
height:53px;
width:100%;
position:fixed;
}
.footer-left
{
background-color:#f00;
width:33%;
height:31px;
position:absolute;
bottom:0;
left:0;
}
.footer-right
{
background-color:#0f0;
width:33%;
height:31px;
position:absolute;
bottom:0;
right:0;
}
.footer-center
{
background-color:#f0f;
margin:0 auto;
height:31px;
width:33%;
}
JSFiddle: http://jsfiddle.net/eFNAF/17/
Notice the green background and the image overlaying it. The previous/next "buttons" are positioned over the photo. This causes there to be blank space above the photo where the buttons were originally positioned. I want to float the buttons over the photo as shown but without "using" the space above the photo. E.g. I want the buttons to be positioned absolutely but still relative to their container. Also notice that the div.Image is centered using an auto left/right margin. This makes it so that position: absolute cannot be used.
Edit: The image should be top-aligned with the green box. The buttons should be offset 10px below the top of the image and 10px from the left/right of the image. Different size images will be displayed so the image size cannot be set in CSS.
CSS
.Image,
.Image img
{
width:366px;
height:341px;
border:0;
}
.Image
{
position:relative;
}
.Image a
{
position:absolute;
top:10px;
width:28px;
height:28px;
background-color:red;
border:1px solid black;
text-align:center;
z-index:2;
text-decoration:none;
display:block;
}
.Image a.Previous
{
left:10px;
}
.Image a.Next
{
right:10px;
}
HTML
<div class="Image">
<
>
<img src="http://images5.fanpop.com/image/photos/31500000/Happy-Hyena-hyenas-31563531-385-358.jpg">
</div>
DEMO
Updated:
Change this:
.Image,
.Image img
{
width:366px;
height:341px;
border:0;
}
.Image
{
position:relative;
}
to:
img
{
border:0;
vertical-align:bottom;
}
.Image
{
position:relative;
display:inline-block;
}
DEMO 2
My issue is this, I have a header image that is larger than my browser, I wanted to do this because I want the image to become more or less visible based on your browser width. There is a color that repeats for when your browser is bigger than the image. On top of that I have an image that is centered and then two triangles on top of that. One floating left and one floating right. My issue is this, When I change the width for the .content-outer .content-inner from 978px to 1134px to accommodate the large image over the triangles it messes with the centering of my nav bar. Here is my code. the list styling is for my nav.
<div class="content-outer" id="top_nav">
<div class="content-inner">
</div>
<div class="content-outer" id="header_map">
<div class="diamond-left">
<div class="diamond-right">
<div class="content-inner">
</div>
</div>
</div>
</div>
#header,
#header_map {
height:529px;
background:#3b96a9 url(Layer-57.jpg) top center no-repeat;
margin-bottom:45px;
overflow:visible;
}
#header .diamond-left,
#header_map .diamond-left {
width:100%;
height:529px;
overflow:visible;
float:left;
background:url(Layer-58.png) top left no-repeat;
}
#header .diamond-right,
#header_map .diamond-right {
width:100%;
height:529px;
overflow:visible;
float:right;
background:url(Layer-59.png) top right no-repeat;
}
#header_map .content-inner {
height:391px;
background:url(Layer-61.png) top center no-repeat;
position:relative;
overflow:visible; }
#header .content-inner {
position:relative;
overflow:visible;
padding-bottom:20px;
}
.content-outer
{ width:100%; float:left; overflow:visible; }
.content-outer .content-inner
{ width:978px; margin:0 auto; overflow:visible; position:relative; }
.content-outer .content-inner ul
{ margin:20px 0; padding:0; }
.content-outer .content-inner ul li
{ margin:3px 0 3px 20px; padding:0; font-size:1.1em; }
.content-outer .content-inner ul li p
{ font-size:1em; }
Unless I'm misunderstanding something, the code appears to be OK. Have you double-checked to make sure:
The triangle images have transparent backgrounds so you can see behind them?
The main header background is in the right location as specified in the stylesheet?
If the page is live somewhere that we can take a look, please let us know - it may be able to shed more light on your problem.
Whenever I add the min0height property to the DIVs to make them 100%, it doesn't work. I have added them to all of the DIVs, including height: 100%; and min-height: 100%; but nothing works. What would I do to make it extend all the way? It just cuts off the background of the sidebar and the background color of the content area.
(Forgot to label a part. The content area with the white background is .col1)
CSS:
#charset "UTF-8";
/* CSS Document */
img {
border-style: none;
color: #FFF;
text-align: center;
}
body {
background-color:#000;
margin:0;
padding:0;
border:0; /* This removes the border around the viewport in old versions of IE */
width:100%;
}
.sidebar {
background-image:url(../images/sidebar/background.png);
background-repeat:repeat-y;
font: 12px Helvetica, Arial, Sans-Serif;
color: #666;
z-index:1;
}
.menu {
background-image:url(../images/top_menu/background.png);
background-repeat:repeat-x;
height:25px;
clear:both;
float:left;
width:100%;
position:fixed;
top:0px;
z-index:5;
background-color:#000;
}
.bottom_menu {
background-image:url(../images/bottom_menu/background.png);
background-repeat:repeat-x;
height:20px;
z-index:2;
font: 12px Helvetica, Arial, Sans-Serif;
clear:both;
float:left;
width:100%;
position:fixed;
bottom:0px;
}
.colmask {
position:relative; /* This fixes the IE7 overflow hidden bug and stops the layout jumping out of place */
clear:both;
float:left;
width:100%; /* width of whole page */
overflow:hidden; /* This chops off any overhanging divs */
}
.sidebar .colright {
float:left;
width:200%;
position:relative;
left:225px;
background:#fff;
}
.sidebar .col1wrap {
float:right;
width:50%;
position:relative;
right:225px;
}
.sidebar .col1 {
margin:30px 15px 0 225px; /* TOP / UNKNOWN / UNKNOWN / RIGHT */
position:relative;
right:100%;
overflow:hidden;
}
.sidebar .col2 {
float:left;
width:225px;
position:fixed;
top:0px;
left:0px;
margin-top:25px;
margin-left:5px;
right:225px;
}
.clear {
clear: both;
height: 1px;
overflow: hidden;
}
HTML
<body>
<div id="container">
<div class="menu">Header Content</div>
<div class="colmask sidebar">
<div class="colright">
<div class="col1wrap">
<div class="col1" id="contentDIV">
Content
</div>
</div>
<div class="col2">
Sidebar Content
</div>
</div>
</div>
<div class="bottom_menu">Footer Content</div>
</div>
</body>
Fixed.
It was the container div right after the body tag. Even with height CSS, it created problems. I removed it and changed a script I had from rendering in that div to the document.body and everything works now.
If you are trying to make your content and sidebar stretch the entire height of the page, then no amount of setting a height is really going to help. If you use 100%, your going to push your fotter off the bottom of the page so you have to scroll to see it. There is a single method that I know of that will allow you to have a full-height body with a footer: Sticky Footer
Check the following site for details: http://www.cssstickyfooter.com/
Another trick you will probably need. It is near impossible to get two columns to have equal height and support all browsers. The simplest way to get your gray column to the left and white center body to stretch all the way to the footer is to use a 1-pixel hight image that has gray and white in the proper proportions, which is background-repeated along the y axis.
Another great site for CSS knowledge is A List Apart.
It is hard to get a consistant layout using floats and positioning on the same elements. In particular float and position:fixed (or absolute) are incompatible and each browser handles the situation differently.
IE6 does not support position:fixed at all and treats it as position:static (the default - no positioning at all).