Hey guys i have a HTML/CSS related question here...
I'm developing on a salesforce application, which makes me use this apex tag to put images in and I'm not really comfortable with using them. I am making print layouts at the moment for some forms that i've created. Everything worked fine until i had 2 images that i needed to style differently. I have 1 image in the header and 1 image that is a box within the form. Since i am styling the image in the header with some padding and centering among other stuff...the other box image wont show up as i go to print. So i was wondering if i can just separate the header image via a div tag. Here is what i have so far....
HTML:
<div class="logo_print"></div>
CSS:
.logo_print{
float:left;
padding-left: 40px;
width: 64px;
height: 86px;
background-image:url('../css_images/seal2.png');
}
So this is the header image i put in a div tag...did not work but if anyone has any thoughts/solutions that would be great....been trying out a bunch of diff ways with no progress. Thanks
EDIT:
So I've put new CSS in with some recommendations..so now i see it on my website but when i go to print the forms...the image does not show up :/
OH and i am using #media print to put the CSS in
Reason it's not working is because you haven't specified a height and width in your css.
Try This:
.logo {
background-image: url('http://pixelative.co/wp-content/uploads/2014/06/logo2.png');
width: 209px;
height: 52px;
}
<div class="logo"></div>
Here's a codepen of the working example.
Hope this answers your question.
Related
I'm making a website using fullPage.js, On the second page (or equivalently, second section) I want to achieve a very simple layout where I have a header fixed on top of the page displaying an image which should be responsive, or decreases in size as the window shrinks but stays at the top.
Currently, I'm wrapping the image to be displayed in a div. I then scale the div fullscreen using,
.post-header {
background: #22BDA0;
max-width: 100%;
height: auto;
}
The img tag inside of the div has a class header-image which I style as,
.post-header .header-image {
max-width: 100%;
height: auto;
margin: 0;
}
However, I'm not getting the desired result. There is a small space on top of the second page which I can't get rid of. You can see the website I'm making along with the source code HERE. Just scroll down to second page, or click Personal Details on the homepage.
Thanks a lot for the help!
What if you just give height:100%; to .section2-container? Will it solve your issue?
Remove display: table-cell; from .fp-tableCell and the padding disappears. Does this need to have display set to table-cell?
fullPage.js has an option: verticalCentered that can be set to false. This seems like a good solution, since the alternative means always trying to ensure that the content of the containing element is always 100%.
can anyone find the solution to my problem? I've beed tweaking my CSS sheets and it doesnt seem like its changing anything. I'm using the same rules for the "4sites" image as to my "About" img.
Heres a link to the site, you can see all of my css sheets from there too.
https://dl.dropboxusercontent.com/u/146014194/483F_ss14/Pro01/hwk/pro01_content_structure_presentation_B02_responsive_4sites_FINAL.html
I know you can create everything in just one CSS sheet, but my professor asked us to make it like the way it is..
I added a div tag around the img thinking that I could control it better.. But it doesnt seem like its the case!
Mucho Thanks!
You're trying to keep the height of image as 100%. If this is a responsive design then, the width has to be 100% and height to be kept as auto
CSS:
#Mybio #Mepic img {
clear: none;
float: left;
height: auto;
width: 100%;
margin-bottom: 100px;
margin-top: 55px;
}
Now the question is, the image is taking the whole width of the screen, well, that's normal. You have to restrict the parent div(id as #Mepic) and handle it with media queries for different screen sizes. Also I saw float issues on you're site. Use Clear:both to get rid of them.
I am quit new to html and css and hope someone can help.
With help of w3 schools (http://www.w3schools.com/CSS/css_image_gallery.asp) I created an simple gallery.
With this the images are put in the left upper corner. I want to put the images more in the central of the page.
Is there a way to easily do this?
Wrap everything in a div with an id of container. Then add #container { width: 100px; margin: 0 auto; replacing 100px with how wide you want the gallery to be.
I need to fix a .gif image to a specific spot on my home page. I've placed the image in my HTML, and "position:fixed" doesn't do what I want - the rest of the page's content scrolls beneath the image. I want the image to stay in the same place at all times.
Disclaimer: I know next to nothing about HTML & CSS, so my apologies if this is a very simple question. I've done research, but nothing I've tried seems to work.
On a related note, my image changes size depending on what browser I'm viewing my site in. I read here in answer to another question that you can remedy that by using percentages instead of pixels to format your object, but I tried that and the problem remains.
Other notes: I use Chrome as my browser and am building my site using Weebly. My website address is http://www.designartistree.com/ and the image in question the ribbon in the middle of the page beneath the large "Design Artistree" logo.
Any beginner-friendly advice would be greatly appreciated! Thank you!
Here's the html code that I have for the image:
<img src="/files/theme/ribbon.gif" alt="ribbon" style="position:fixed; margin-left:27.6%; margin-top:61%; width:63.7%; height:10%; z-index:50; visibility:show">
If you use position:fixed, the element is positioned relatively to the window, so even if you scroll, the element doesn't move.
If you want it to move when you scroll, use position:absolute.
But because of your layout, you have 2 options:
Place the image inside #box
Remove the following code:
html{
overflow:hidden;
height: 100%;
max-height: 100%;
}
body {
height: 100%;
max-height: 100%;
width: 100%;
}
#box {
height: 100%;
max-height: 100%;
overflow: auto;
width: 100%;
}
Okay, so hypothetically, let's say I wanted to write a book using HTML and CSS only. How would I go about defining a page header and footer (and have page numbers in the footer)? And how would I make it so that page breaks and margins show up in the browser (like a preview mode)?
I know it sounds like I'm asking for someone to just write the code for me, but I really just need direction to resources for something like this. I'm just completely stuck on how I would even begin to do something like this.
To explain what I want to show in the browser; I want to be able to see small versions of each page like you would in a PDF viewer, basically the text overflow would create a page-break:
I have looked into #media print, but that doesn't have any hooks for creating headers and footers.
and I can't get this to work (from w3.org):
title { position: running(header) }
#page { #top-center {
content: element(header) }
}
I have looked at the code from Boom!, and It's nice for printing, but it doesn't display in browser the same.
So... does anyone now where I could/should look for a good starting point for this?
This was my solution:
<div id='document'>
<div class='page'>
<div class='header'></div>
<div class='footer'></div>
<div class='content'></div>
</div>
</div>
Everything went in <div id='document'>. For each .page, the .header, .footer, and .content had the right height and width for a page.
After that, I used JavaScript to cut out everything that was overflowing outside the div.content. I then cloned div.page, updated the page number inside of the new page's header <div>, and filled the new page's content <div>.
This was repeated until I had like 100 pages and nothing was sticking out of the last page's content <div>.
I am assuming that you are using pure HTML and there is no code behind.
Because if there is any code behind then its a different story.
Define a main div having class="page". Inside that define 3 divs for header, content and
footer.
.page {
display: block;
height: 800px;
width: 100%;
/*Give margin as per your requirement.*/
}
.header {
display: block;
height: 50px;
}
.content {
display: block:
height: 700px;
}
.footer {
display: block;
height: 50px;
}
Add additional style as per your requirement.
create another style sheet with media type ="print"
There add the following style for page.
.page {
display: block;
height: 800px;
width: 100%;
/*Give margin as per your requirement.*/
/* this will print the page in new paper*/
page-break-after: always;
}
and the HTML for one page will look like this
<div class="page">
<div class="header">HEADER CONTENT</div>
<div class="content"> MAIN PAGE'S CONTENT</div>
<div class="footer"></div>
</div>
Repeat the above code an per the number of page you need.
You can also use table layout for this purpose.
And if you use code behind, then the content can be generated dynamically.
Hope this helps.
Well, it could be done by pure HTML and CSS but definitely not the way to go as it would become very frustrating to repeat blocks of code, almost the same, every time you wanted to start a new page. For the PDF like left panel you could use Iframes, more info here
basically, you would make a .htm page for every page of your book, strictly linked together by links, and when you would be finished, you could take a screenshot of every page you made, save the thumbnails, and make another html page that would be the panel, which would be eventually included (as the tutorial in my link shows) in all the other pages for the book.
UPDATE
Regarding page breaks, you could make div-s with the same class, and styled as pages, as shown here