Search the Community
Showing results for tags 'padding'.
Found 10 results
-
HTML CODE:- <body> <main> <article> <header> <h1>Azure Kingfisher</h1> </header><hr> <p>This stunning little kingfisher is common on waterways across the <a title="Top End Australia Video"; href=" " target="_blank">Top End</a>, but can be difficult to see well. this is some text about the kingfisher this is some text about the kingfisher.this is some text about the kingfisher. this is some text about the kingfisher.sdnf iuhrwei hear hoheo eogflkvoiejar glk oisdfj w oaif iasdfi asoif asidfjsaifdj osaijdfiasdf insadfoi</p> <p> <figure> <a href="azure.html" target="_blank"> <img title="Click to enlarge" src="thumbnails/birdpict.png" alt="thumbnail" style="float:left; height:150px; width:110px" /></a> </figure> </p> <p id="arc2">this is some text about the kingfisher.this is some text about the kingfisher. this is some text about the kingfisher.this is some text about the kingfisher. this is some text about the kingfisher.this is some text about the kingfisher. this is some text about the kingfisher.this is some text about the kingfisher. this is some text about the kingfisher.this is some text about the kingfisher. this is some text about the kingfisher.sdfh osadf' sfoi jsdfj sdofj sdfw'ej fsdlkf aslkfl askdfn sadf sadf oifn afoin asdfn saodifnwieafn'o iwnfkanef iewfan</p> </article> </main> Linked CSS:- body{ background-color: #1eed8c; margin-right: 20%; margin-left: 20%; border: 2px dotted blue; font-family: sans-serif; line-height: 180%; } h1{ color: blue; text-align: center; } p#arc2{ padding-left: 5px 5px 5px 5px; } article{ color: green; padding: 5px 5px 5px 5px; border-bottom: 1px solid rgb(88, 88, 88); } img{border: 2px solid black;} footer{ margin-left: 74%; } a:link {color: blue; background-color: transparent; text-decoration: none;} a:visited {color: maroon; background-color: transparent; text-decoration: underlined;} a:hover {color: yellow; background-color: transparent; text-decoration: none;} The pic of the kingfisher, which is a thumbnail, is right beside the text= arc2. There is no space between the image and the text. I tried padding the #parc2 (second article that was beside the image but still no effect). The image has a black border that I don't want to remove. If I add padding to the image the border sticks to the text(arc2).
-
Dear All: In a W3school's tutorial is this tip: Tip: When aligning elements with position, always define margin and padding for the <body> element. This is to avoid visual differences in different browsers. Do we still need to do this if we have already declared the margin and padding for the whole page, e.g. *{margin: 0; padding:0;} and why?
-
Does anyone know how to fix my 2 css issues in the flyout menu on this site? This is driving me nuts. http://candoelec.com/dev/ Issue 1 - in the flyout menu, the padding in the background element appears to be short on the bottom. .mega-menu li .sub-container { background: none repeat scroll 0 0 #efefef; border: 1px solid #ccc; padding: 5px; position: absolute; } Issue 2 - again in the flyout menu, the padding around the text section headers "Decription, Website, Your Rep" appears to be short on the bottom. .mega-menu li .sub li.mega-hdr a.mega-hdr-a { background: none repeat scroll 0 0 #000; color: #fff; font-size: 15px; font-weight: bold; line-height: 20px; padding: 5px 0; text-align: center; } Thank you!
-
Maybe I'm missing something obvious here, but I'm having a problem with max-width when applied to a div with padding. Can anyone tell me what the issue is here? If I have a div that has a max-width of 960px and a width on 100% it works as expected. If I then add padding, the div does not contract with the browser until it has overlapped it a certain ammount. <!DOCTYPE html><html><head><style> .content {width:100%;max-width:920px;padding:20px;background-color:white;height:500px;margin-left: auto;margin-right:auto;}body {margin:0px;padding:0px;background-color:red;}</style></head><body><div class="content">But I must explain to you how all this mistaken idea of denouncing of a pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?</div></body></html>
-
Good Morning everyone, When i set my html signature in my mail client (i tried mac mail & Outlook 2003) the compleet mail aligns to the left. not even 1px is spared. Also check the .png i attached to see what i mean. Besides that i attached the html document i've made. I just need some spacing on the left of my mail, and the top also actually. I really hope u guys can help me out here! Thanks in advance. Cheers, RuudBergen Email signature Ruud_4.html
-
I have a problem When I put a background image and after I put a padding value The position of the pictures changes. I do this: .actual { height: 255px; width: 805px; margin-left: 329px; margin-top: -255px; background-color: #555555; position: absolute; background-image: url(imagens/menu_actual_02.jpg); padding: 20px; } how I can fix this?
-
Hey guys, I can't figure out why my top image on my table isn't working right. The bottom border won't show up and the image is clearly readjusting to something because the quality is awful when I put it into my coding, but it's fine on photobucket. I've adjusted the whole table size, the tr size, the td size, the padding and the margin on absolutely everything. I can't figure it out. Please help! Page i'm struggling with: audreyholmesmusic.webs.com/testhome.htm Let me know if 'view source' doesnt work and you need the code.
-
I have this really annoying problem with my webfont having different natural spacing on my Mac compared to the PC.Here's the difference: MAC: PC: As you can see the natural spacing is beneath the text on Mac and above on PC. The problem is cross browser. I've tried all kinds of css tweaking including line-height, padding, height of div; but as you can see the problem is apparently not in the css but in the font rendering itself.Anyone with a clue about this?Thanks!
-
Dear people I'm new here and I'm making my first steps in responsive design. I'm not english speaker and I will try to explain my problem in my better english. I'm testing a simple grid of 4 columns using 4 divs with width = 23 % (each div) and left and right margins = 1 %........ margin: 0% 1% 15px 1%; padding: 0% 0% 0% 0%; In other words..... 1% + 23% + 1% + 1% + 23% + 1% + 1% + 23% + 1% + 1% + 23% + 1% = 100 % ------------------- ------------------- -------------------- ------------------- All this works fine in Internet Explorer, Mozilla, Opera and Safari and each div have the same separation respect the neighbor div,..... ... BUT THIS NOT HAPPENS IN CHROME!!!! After this, I tried usig PADDING: margin: 0% 0% 0% 0%; padding: 0% 1% 15px 1%; and the results are different. With "Padding" it works fine in Internet Explorer, Chrome, Mozilla and Opera and each div have the same separation respect the neighbor div... ... BUT THIS NOT HAPPENS IN SAFARI!!!! I can't understand why this happens because it is a very basic concept... margin... padding.... there are no complicated things. I attach the TESTING MARGINS AND PADDINGS.zip file containing a folder with html and jpg files to you can view it. HTML files contains the CSS code into each html file. I think the margin solution is better, but my question is: How to make only for Chrome ...... that the CSS code specify the use padding in place of margins?? Do i need to use some prefix like -webkit- , etc? I hope you can help me to solve this. Thank you in advance!TESTING MARGINS AND PADDINGS.zip GusSiglo21
-
Hi guys, I am currently having some issues with certain elements of a website I am building displaying slightly differently in different browsers. One example is: I have a form which contains two text input fields and two buttons. I have the text input fields one beneath the other and the two buttons below them, side-by-side. They sit beside one another fine in Chrome and IE9 (believe it or not!) and barely in Opera. However, in Firefox they do not. I have given the buttons a class and played around with the margins and padding, I also floated each button to the left. I am also aware that each browser has it's own default CSS rules? I imagine this would play a big part in elements displaying differently. Is there a way that I can remove each browsers default rules? I hope someone can help me! Thanks in advance!
