Tommo Posted October 5, 2011 Share Posted October 5, 2011 (edited) Hello guys, at the moment i am working on a javascript project for school. The thing is though, i need a lot div boxes placed correctly. But whenever i try and format them, they wont do as i tell them to. My task (the html & css aspect of it) is to re-create the periodic table using some div boxes. I want it to look kinda like this: http://www.webelements.com/ So far i have written this (Also, some of the CSS commands are straight up desperate attempts of making it work): The yellow part is supposed to sybolize the white space between the elements. I have tried almost everything to make it work, but they are annoying me like crazy. Also the element names at the moment are random. I just used that i could think of. Edited October 16, 2011 by Tommo Link to comment Share on other sites More sharing options...
Darkwing Duck Posted October 5, 2011 Share Posted October 5, 2011 Tommo under #Blankspace1 you set the style to float-left, it should be float:left Link to comment Share on other sites More sharing options...
Tommo Posted October 5, 2011 Author Share Posted October 5, 2011 Tommo under #Blankspace1 you set the style to float-left, it should be float:left I changed it and it still looks the same. Also lol@that mistake. Link to comment Share on other sites More sharing options...
Jella Posted October 5, 2011 Share Posted October 5, 2011 sayskittles.com Link to comment Share on other sites More sharing options...
Guest The_Monkey Posted October 5, 2011 Share Posted October 5, 2011 Tommo, you my friend are in need of possibly my most favorite css property. { display: table-cell; } (then you won't need float: left, and you'll look like a motherfucking css pro!) Come on TS3 and we can work through your problems. Link to comment Share on other sites More sharing options...
Tommo Posted October 5, 2011 Author Share Posted October 5, 2011 I'm ready whenever you are Monkey! Link to comment Share on other sites More sharing options...
Guest The_Monkey Posted October 5, 2011 Share Posted October 5, 2011 I'm ready whenever you are Monkey! I'm at work right now. Come back in 2 1/2 hours Link to comment Share on other sites More sharing options...
Darkwing Duck Posted October 5, 2011 Share Posted October 5, 2011 You can control the indentation of images using css commands, I forget the command off hand if you google css image indent you can find it tommo. Im no CSS/HTML expert so that might not be the cause. Link to comment Share on other sites More sharing options...
Guest The_Monkey Posted October 5, 2011 Share Posted October 5, 2011 He isn't using images now. Showed him how to make sweet love to CSS (not counterstrike). Link to comment Share on other sites More sharing options...
Tommo Posted October 6, 2011 Author Share Posted October 6, 2011 My divs look fucking sexual now. Thank you so much Monkey. Link to comment Share on other sites More sharing options...
Guest The_Monkey Posted October 6, 2011 Share Posted October 6, 2011 My divs look fucking sexual now. Thank you so much Monkey. Quite welcome sir. Anytime Link to comment Share on other sites More sharing options...
Tommo Posted October 7, 2011 Author Share Posted October 7, 2011 Alright, so i have contiuned working on the project And i consider it done now. http://dl.dropbox.com/u/10154270/periodic%20table.html In firefox it looks absolutely beautiful. In Chrome and internet explorer it looks absolutely wrecked. Any ideas on how to solve this? Link to comment Share on other sites More sharing options...
Guest The_Monkey Posted October 8, 2011 Share Posted October 8, 2011 Looks fine to me in firefox and chrome. I need to look at your css again though. Link to comment Share on other sites More sharing options...
Tommo Posted October 8, 2011 Author Share Posted October 8, 2011 (edited) http://zhost.hellsgamers.com/u/49/chrome.png http://zhost.hellsgamers.com/u/m4/firefox.png http://zhost.hellsgamers.com/u/gv/ie.png Chrome looks odd. Edited October 16, 2011 by Tommo Link to comment Share on other sites More sharing options...
Guest The_Monkey Posted October 8, 2011 Share Posted October 8, 2011 This is how I would roll: http://monkeycodeworks.com/tommo.htm Remember that whitespace causes extra gaps between elements. View the source for more info. Link to comment Share on other sites More sharing options...
Tommo Posted October 8, 2011 Author Share Posted October 8, 2011 So white spaces caused my version to look like absolute shit in IE? Link to comment Share on other sites More sharing options...
Guest The_Monkey Posted October 9, 2011 Share Posted October 9, 2011 So white spaces caused my version to look like absolute shit in IE? Partially. Link to comment Share on other sites More sharing options...
DR.OBVIOUS Posted October 9, 2011 Share Posted October 9, 2011 Hey this is cool! I should use it for studying! (if you choose to expand on it it be cool to make it into a quick quiz type thing) Link to comment Share on other sites More sharing options...
Tommo Posted October 10, 2011 Author Share Posted October 10, 2011 Is there a way to prevent it from doing that?I tried giving the wrapper a fixed size, but it didn't seem to help..wrapper {height:1200px;width:700;} Link to comment Share on other sites More sharing options...
Tommo Posted October 15, 2011 Author Share Posted October 15, 2011 (edited) I fixed it. /thread Edited October 16, 2011 by Tommo Link to comment Share on other sites More sharing options...
Recommended Posts