Joostk Posted June 24, 2012 Share Posted June 24, 2012 Hello everyone, I was wondering if there is a way of adding space between my pictures, since they are now all glued together. You can see what I mean here: http://joostk.com/art.htmlSo I was wondering if it is possible to create some space between them with merely html codes. Hope someone knows! Thanks in advance! -Joostk Link to comment Share on other sites More sharing options...
Ingolme Posted June 24, 2012 Share Posted June 24, 2012 I would start by fixing some of the errors listed here: http://validator.w3.org/check?uri=http%3A%2F%2Fjoostk.com%2Fart.html&charset=%28detect+automatically%29&doctype=Inline&group=0 Link to comment Share on other sites More sharing options...
Joostk Posted June 24, 2012 Author Share Posted June 24, 2012 Thanks for that link but the website works fine so far I guess. Do you know how to add space between the pics? I will fix the errors later. Link to comment Share on other sites More sharing options...
Ingolme Posted June 24, 2012 Share Posted June 24, 2012 When running in standards compliant mode, images have a small space below them by default. This only occurs with Strict and HTML 5 doctypes.You can give the image a bottom margin with CSS if you want some separation. Link to comment Share on other sites More sharing options...
Joostk Posted June 24, 2012 Author Share Posted June 24, 2012 Unfortunatly I don't know anything about CSS Maybe Ill just add some background colored images between them to fake some separation then. Link to comment Share on other sites More sharing options...
Ingolme Posted June 24, 2012 Share Posted June 24, 2012 If you don't know CSS you'll never make a decent page. HTML is just not intended for designing. W3Schools has a good CSS tutorial and you should look at it. Also, you really should fix the errors that the HTML validator showed you. Link to comment Share on other sites More sharing options...
rootKID Posted June 25, 2012 Share Posted June 25, 2012 @Joostk - just goto the real website of w3schools... they have greate tutorials about .css... including the image css your talking about... normally i would do somfthing like this: img {margin-bottom: 10px; /*you can change this if liked...*/} and then it would do it for you... but it does that on all of the images, if needing this on one seperate set of images, then make a div box with a class/id around them, and then put a #''div box id name here...' and then at end of that the img, and then it will only do for those images inside that div ... it is actually that easy ... but ok, i also had a little trouble understanding the image part when i first began to code... so it is understand able ... in anyways... try read up on it!... there are greate tutorials on w3schools website!... just need to find them ... Link to comment Share on other sites More sharing options...
Ingolme Posted June 25, 2012 Share Posted June 25, 2012 if needing this on one seperate set of images, then make a div box with a class/id around them, and then put a #''div box id name here...' and then at end of that the img, and then it will only do for those images inside that div ...You can add classes right on the <img> element to avoid adding redundant code. Link to comment Share on other sites More sharing options...
bytzu Posted June 27, 2012 Share Posted June 27, 2012 It would be better to have a css file for all the styles, but in youre case add this code just before the </head> tag ends. <style type="text/css">img{margin : 0 0 10px 0;}</style> Link to comment Share on other sites More sharing options...
Joostk Posted June 28, 2012 Author Share Posted June 28, 2012 Thanks so much Bytzu! Works great! And thanks everyone else for the support! Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.