May 25, 201412 yr I'm trying to add 2 images to sit up against the left of month.png here: As per the example image: The external CSS I'm starting with is: #topfiller { background-image: url(images/filler.jpg); background-repeat: repeat-x; } #date { background-image: url(images/month.png); background-repeat: no-repeat; background-position: right top; } #tagline { padding: 0px 0px 0px 48px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.3em; margin: -6px 0 36px 0; } and the HTML is: <div id="topfiller"> <div id="date"><img src="..logo.gif"width="488" height="62" border="0"/></div> </div> <div id="tagline">Tagline text</div> What's the best way to go about adding B1 and B2 (which don't exist yet) to sit to the left of month.png, please? (They will be buttons) If this could be tricky, I can put 20 quid into a PayPal account for support. I know it's not so much but.. Cheers
May 25, 201412 yr The amount of code that you have listed doesn't give us enough information about how the structure is created. Can you give us everything. Perhaps even make a codepen out of it?
May 25, 201412 yr Put the buttons just before img src and then in the CSS add #B1, #B2 {float:left;} should do it But as said before it may not be what you want because you are lacking more info
May 26, 201412 yr Author Thank you both for your advice. I'm not sure how to add the buttons and I'm guessing it's maybe not possible, as the month.png image is a background image via CSS.Only the logo appears via HTML.I've made a small version of it here and included example files for you to see. I'd love to know how you would go about adding those buttons to always position left of the month. (Maybe they can float on top, or maybe you'd redesign the page to include the month via html, instead of a CSS background.) I very much appreciate your advice and thank you.
May 26, 201412 yr Using the code from the download I have altered it to add the two image buttons in by separating the logo and the date into separate divs and floating them. This is just one way that it can be done. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>forumsite</title> <link href="forumcss.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="topfiller"> <div id="date"> <div class="logo"> <img src="images/logo.gif"width="488" height="62" border="0"/> </div> <div class="buttons"> <img src="images/b2.jpg" width="40" height="40" /> <img src="images/b1.jpg" width="40" height="40" /> </div> </div> </div> <div id="tagline">Tagline text</div> </body> </html> body { background-color: #FFF; font-family: Calibri, Arial, sans-serif; font-size: 100%; color: #444; margin: 0px; padding: 0px 0px 80px; min-width: 982px; } #topfiller { background-image: url(images/filler.jpg); background-repeat: repeat-x; } #date { background-image: url(images/month.png); background-repeat: no-repeat; background-position: right top; overflow: hidden; } .logo { float: left; } .buttons { padding-right: 150px; } .buttons img { float: right; margin: 5px; } #tagline { padding: 0px 0px 0px 48px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.3em; margin: -6px 0 36px 0; }
May 27, 201412 yr Author Wow Junior, that's great! You have given me hope and also the code gives me something to learn by and use as a reference. Is this your recommended way of doing it? If you have a PayPal account, I'll put 20 quid in it, as per my first post, as I appreciate this, regardless of how easy it might be for you.
May 27, 201412 yr How I would do this myself would be a little twist on this way. Rather than having the 'date' div surrounding the Logo and Buttons I would have them structured such as <div id="topfiller"> <div class="logo"> <img src="images/logo.gif"width="488" height="62" border="0"/> </div> <div class="buttons"> <img src="images/b2.jpg" width="40" height="40" /> <img src="images/b1.jpg" width="40" height="40" /> </div> <div id="date"> </div> </div> Then using the CSS to style them and position the elements on the page as you want them. This way if you use bootstrap you can hide and display individual elements in each view. Doing it the way I have stated above will need to be played with as when the month is a longer one such as December then the placement of the buttons will need moving.
Create an account or sign in to comment