What do you want to do ?
Just display PDF icon with a link ?
Upload each pdf using the media uploader & create a link to it.
Use ftp to upload a graphic for your pdf icon to your theme images folder. e.g. a graphic 32px square called pdf.png
Add some css to your stylesheet to make the icon appear next to each pdf link.
Start with something like the following & edit to tweak the position of the icon:
a[href$=".pdf"]{
background: url(images/pdf.png) no-repeat scroll left center;
padding: 10px 0 10px 40px;
}
How do I get the exact menu style like this?
http://tinyurl.com/d6t833g
I’m sorry but it is beyond the scope of these forums to deal with basic CSS issues. Try a dedicated CSS resource such as http://www.css-discuss.org/ instead. In the meantime, using Firefox with the Firebug add-on for this kind of CSS work.
http://getfirebug.com/
I’m trying to use this design on my website menu,
http://i2.lulzimg.com/99befe5e0f.png
I used FireBug to find out the code, this is the code,
<div class="menul">
<h4> Menu (Chinese)<br>
</h4>
<p><a target="_blank" href="menus/Chinese2.pdf">Click here to download Chinese Menu</a></p>
</div>
Where do I put the Menu Bar image and the PDF file in the code above?
Also how do I make it so there’s one on the left and one on the right?
Images and PDF files (which you need to create and add) would likely go in the uploads folder — just change the names and links accordingly.
The side-by-side can be done using CSS probably using float positioning — see this:
http://www.w3schools.com/css/css_float.asp
<div class="menul">
<h4> Menu (Chinese)<br>
</h4>
<p><a target="_blank" href="menus/Chinese2.pdf">Click here to download Chinese Menu</a></p>
</div>
So in this code, I change it to my Menu Bar image and PDF link?
menus/Chinese2.pdf
That is the path file and name — so yes, change accordingly.
Do I provide the filename or the file link?
I’m really not understanding what you are asking.
In this
menus/Chinese2.pdf
“menus” is the name of a folder on the server where the pdf file is located.
“Chinese2.pdf” is the name of the file being linked to.
This site has a lot of great information about basic HTML — which would probably be helpful to you:
http://www.w3schools.com/html/default.asp
This is what I meant by the Menu Bar logo,
View post on imgur.com
The text will be on the right hand corner
http://i2.lulzimg.com/99befe5e0f.png
So how do I use the Menu Bar logo at the back?
In that site you linked to, the image is a background image (set in CSS) with clickable text on top of it.
See the W3C CSS page linked to above for how to do that with CSS.
BTW, where did you get the image?
I’m using CSS background but where should I put the image URL link in this code?
body {background-image:url('paper.gif');}
Why are you using the body tag? If you want that image as a background in an element on the page, it has to go in a div in the page content. So you might have something like this:
<div id="menu1" class="menu_pdf_styles">
text would go here
</div>
Then the CSS might look like this:
.menu_pdf_styles {
background-image: url('filefolder/filename.gif');
you might have other CSS styles here;
}
You would then use a unique id for each of the divs (I used menu1 as the first example one) — to position each of the divs on the page using CSS for each ID.
