Please take a look at the following fiddle: http://jsfiddle.net/4LZnC/
I need to make it so when you hover on the .dropdown element, the .expandable to show but using the parent's background and border.
In other words, try removing position:absolute from .expandable. I need the same effect but without .expandable pushing the other content down. How do I achieve that? I really have no clue.
You will need to assign position absolute to the parent element and wrap it with a fixed height container.
HTML
<div id="wrap">
<div class="dropdown">
Flow content
<div class="expandable">
my expandable content here my expandable content here my expandable content here my expandable content here my expandable content here
</div>
</div>
</div>
CSS
div.dropdown {background:red; border:3px solid blue; position:absolute; width: 100%;}
div.dropdown .expandable { display:none; position: relative; top:100%; left:0; }
div.dropdown:hover .expandable { display:block; }
#wrap{ height:26px; }
Working Example http://jsfiddle.net/4LZnC/3/
Related
I have a simple pdf that I created with dompdf div and css.
#menu{
width:600px;
float:left;
margin-top:10px;
font-weight: bold; }
#Istarih{ float:left; width:180px; margin-right:0px; font-weight: bold; }
#Isdeneyimi{
float:left;
width:500px;
word-wrap:break-word;
margin-right:0px; }
.clear
{
clear:both;
height:10px;
}
<div>
<div id="menu">WORK</div>
<div class="clear"></div>
<div id="Istarih">2002</div><div id="Isdeneyimi"><b>WORK</b><br>WORK<br><br> blblablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablaablabla <br></div><div class="clear"></div>
</div>
When you go to second page the text goes to the left
How can I solve this problem?
Dompdf Long Text Problem
On the second page the first floated element is no longer present and thus no longer impacts the second element. With this particular layout, if you wanted to maintain the margin all the way through the document you would want to style the second element differently. Remove the float from that element and give it a margin equal to the space occupied by the floated element.
#Isdeneyimi {
width:500px;
word-wrap:break-word;
margin-right:0px;
margin-left: 180px;
}
Margins of in-flow elements adjacent to floated elements overlay the flow. The above styling will have the same effect as floating siblings but will maintain the margin across pages.
I created a div that transitions from a beginning height to a larger height, revealing a list. It looks fine in web-kit browsers but in Firefox the div appears to come up short, cutting off the bottom of the list.
I tried setting the div height in em hoping that the div would then match the height to the font size used in the list. Still the same thing occurs.
Any ideas?
CSS:
#nav{
padding:0;
position:fixed;
top:27px;
left:27px;
font-family:arial;
font-size:10px;
background-color:#ccc;
width:11.3em;
height:5.5em;
overflow:hidden;
transition: height .5s;
-webkit-transition: height .5s; /* Safari */
}
#nav:hover{
height:22em;
}
#nav a.bg:hover{
background-color: #ccc;
}
#nav a{
text-decoration:none;
color:#000;
}
#nav a:hover{
background-color:#6a6a6a;
}
HTML:
<div id="top">
<div id="nav">
<!--logo_image-->
<a class="bg" href="#"><img src="b&w_logo.jpeg" height="56" width="110" /></a>
<!---->
<div style="height:1em;"></div>
<div style="font-size:1.1em;"><b>Artists</b></div>
<div style="height:1em;"></div>
<div>Ahnnu</div>
<div>Gem Vision</div>
<div>Dope Body</div>
<div>Co La</div>
<div>Teenage Souls</div>
<div>Kid Krusher</div>
<div>Lil Jabba</div>
<div>Cex</div>
<div>Teeth Mountain</div>
<div>Jimmy joe Roche</div>
</div>
</div>
U have 2 options I think:
One is called CSS reset - http://html5reset.org/
The second one is called Normalize. Instead of resetting all styles, it targets the ones that need to change to give you sane, consistent results across browsers in a smaller file size. http://necolas.github.com/normalize.css/
I have a html document structured with a header, content, and footer divs. I am trying to center an image (a logo) inside my header div to display at the top of my webpage in the middle. I can absolute position it into the middle, but when I change the browser size, the img doesn't move along with it. I want it to be place automatically in the center of the window. I am stumped..?
I have tried , margin-right:auto; margin-left:auto. I have also tried the trick where you make margin-left negative half the width and top 50%, but nothing has worked so far.
html:
<body>
<div id="container">
<div id="header">
<img id="logo-img" src="http://f.cl.ly/items/3c0h1b0F3t1D1S1T2J0F/smallersticker.png">
</div>
/*...(body div)
...(footer div)*/
</div> /*container*/
css:
#header {
background-color:transparent;
height:260px;
width:100%
}
#logo-img{
display: block;
margin-left: auto;
margin-right: auto;
}
Also, Do I even need a container? Not sure if I need javascript for this, or if it can be accomplished with just html/css? Hope someone can help, thanks!
What is happening is that you are already correctly centering your image.
Your problem is that the image is huge. If you notice closely, the image is not centered if your browser window becomes smaller in width than the image.
Remove the white area from the image and it will center correctly.
Edit: in IE, you need to add the rule text-align:center to #header
Another way:
If you don't want to change your image, you can use this hack:
<style>
#header {
overflow-y: hidden;
background-color: transparent;
height: 260px;
width: 100%;
margin-left: 50%;
}
#logo-img{
display: block;
position: relative;
right: 50%;
}
</style>
<body>
<div id="container">
<div id="header">
<img id="logo-img" src="http://f.cl.ly/items/3c0h1b0F3t1D1S1T2J0F/smallersticker.png">
</div>
/*...(body div)
...(footer div)*/
</div> /*container*/
I learned this hack a while ago here
Just use the logo at a size it's supposed to be (like this here), then all you need to do is add the align="center" attribute to your logo's div.
I am using the jQuery Cycle (full) Plugin on a page where I am using a container DIV (.content-left) with a width of 75% and a jQuery Cycle slideshow inside of that container. The images inside of that container should be adjusted automatically.
I use:
JS:
$('.slides').cycle({
fx: 'fade',
containerResize: 1 // default for jquery.cycle.all
});
HTML:
<div id="content">
<div class="content-left">
<div class="slides">
<img src="...">
<img src="...">
<!-- etc. -->
</div>
</div>
<div class="content-right">
some text
</div>
<div class="clear"></div>
</div>
CSS:
#content {
overflow:hidden;
}
#content .content-left {
width:75%;
float:left;
}
#content .content-left img { /* or: .slides img */
width:100% !important;
position:relative;
left:0px;
top:0px;
z-index:-2;
}
#content .content-right {
width:25%;
float:right;
}
On Page init my wrapping DIV's (.content-left) height and width get's adjusted just fine thanks to the containerResize function. However when I resize my browser window, the width and height of the slides stay the same, which is not what I wanted.
containerResize: 0 doesn't bring the desired effect either (it then ignores the height of the images and adjusts the height of the wrapper to the height of .content-right (and cuts off the image)).
When I am using only an image without loading Cycle at all everything works fine.
Any solutions for that?
Thanks!
Set in JS:
containerResize: 0,
slideResize: 0,
(really!) and then use the trick of transparent image in the container div. See here
for detail.
How about trying max-width: 100% !important; on the images, and remove the !important from the width: 100% !important, so that when cycle attempts to resize your slides back to the original width, your max-width definition will take precedence.
If you could provide a jsfiddle, that would also be of great help.
I have 3 divs in a container div. The first is floated left, the second is floated right and the last sits in the center. This creates 3 approximately even divs across a container div.
In each of these divs I am placing an image of varying heights. Then there is a separate div to sit below the container div which will be the full width (call it description div).
I want the container div to stretch to height of largest image div so that the description div sits nicely underneath the images. Currently this works when the left floated and middle divs contain the largest image but not for the right floated div. I cannot see why or what i'm missing any help would be much appreciated.
NOTE: I'm trying to do this without using any absolute values, just percentages. So I don't want to declare an absolute height to the container div! Also clear's will not work as this is simplified and there are actually a lot of other div containers around all of this etc, unless you can clear just the floats in the above nested div.
Here's the code:
<html>
<head>
<style>
#b_pics {
border: 2px solid grey;
width: 100%;
}
#b_pic1 {
border: 0px solid grey;
float:left;
width:33%;
}
#b_pic2 {
border: 0px solid grey;
margin: 0px auto;
width: 33%
}
#b_pic3 {
border: 0px solid grey;
float:right;
width:33%;
}
#b_website {
border: 1px solid grey;
width:100%;
}
</style>
</head>
<body>
<div id='b_pics'>
<div id='b_pic1'>
Image 1 here
</div>
<div id='b_pic3'>
Image 3 here
</div>
<div id='b_pic2'>
Image 2 here
</div>
</div>
<div id='b_website'>
Line of text goes here
</div>
</body>
Thanks in advance for any help, trying to keep any hair thats left in my head!
A containing element won't stretch to accommodate floating divs. In your example, the the containing div has no actual content and will thus be 0 pixels high. Try changing the border or background colour to illustrate this.
You can force an element to be below any floating divs by giving it the style:
clear: both;
You can also clear just left or right floating divs.
You can add an empty div after your three picture divs that has that style, to make the b_pics container stretch to accommodate the floating elements, or you could just make the b_website div clear both.
I totally agree with SpoonMeiser answer. I had the same problem (only with IE do) and adding a clear: both (div in my case) is the only solution that seems to work.
SpoonMeiser's explanation is correct. Here is some code that should work for you. Essentially, I've added an empty div with "clear:both" at the end of your container div. This forces the container to take up the space of the floating divs it contains.
This is better than making the #b_website div "clear:both" (SpoonMeiser's alternative suggestion) because that would make the #b_website div display in the correct place but would not force the #b_pics border to surround the floating divs.
<div id='b_pics'>
<div id='b_pic1'>
Image 1 here</div>
<div id='b_pic3'>
Image 3 here
</div>
<div id='b_pic2'>
Image 2 here
</div>
<div style="clear:both;"></div>
</div>
<div id='b_website'>
Line of text goes here
</div>
I hope that helps?
Give this a shot. Nothing's hard-coded, and it should do what you want.