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.
Related
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/
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/
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 have this image link:
<p class="alignright">
<a target="_blank" href="...">
<img width="230" height="158" align="right" style="margin-right: 30px; margin-top: 20px;" src="some_source" >
</a>
text should go here
</p>
The alignright class looks like that:
.alignright {
float: right;
margin: 4px 0 1px 10px;
}
Now I tried several things to place text below the above image link (I tried using a < br > and image captions for example), but everything failed. The text is either too far on the left, or its not even below the image link.
Any ideas how to get the text below the image link?
Thanks!
You mean that you want the text to be aligned to the left edge of the image link?
This means that you have to put both elements into one container and assign the float:left property to this one:
I guess that this is the "" I can see in your sample.
Did you make sure, that the width of the p-Element is the same as of the image link?
Otherwise the text would be aligned to the p-borders wherever they are on your page.
Shrink the size of the p-Element or put everything into an extra container:
<div style="float:right; width:#IMAGE_LINK_WIDTH#; text-align:left;">
IMAGE_LINK
<!-- A <br /> might be placed here -->
Text
</div>
after <p class="alignright"></p> tag put
<br style="clear: both;" />
some text here
Text will appear under the image.
Live Sample
Just add a span or a div with clear:both property and then align your text as you need.
EDIT:
If the text below the image is a link then just wrap the link inside a p tag like this
<p>Your Text</p>
By doing this your link will appear in the next line as p is a block element.
Block elements force line breaks before and after the position they are placed at.
See Demo
This is html file
<img src=""><span id="title" >your text</span>
This is css file
span#title {
text-align: center;
font-weight: bold;
}
span {
background: black;
bottom: 459px;
padding: 5px;
color: white;
opacity: 0.7;
position: absolute;
left: 8px;
width: 244px;
}
Try in this way
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.