arbitter Posted March 14, 2010 Share Posted March 14, 2010 So I have this site, which is fully built with tables. Problem is that for example the w3schools validator doesn't allow tables inside tables, and that every webbrowser doesn't have problems with it, expect IE. Take a look here if you want: http://www.fransdepypere.be/uploads/uploads.php?month=February10&sort=ksort IE makes the table on the left smaller. Now, since all websites are made with div's nowadays, I'd like to work with them too. But I really don't quite understand it fully. So can someone start with making for example the link I gave with div's? I'm meaning: a column on the left with a fixed width (let's say 200) but it needs ot be floating a bit off of the edge (and then I pt in my table) and a div on the right, whoch takes as much space as it can. also, where do you specify the elements you give your div? Does it hall have to be done with styles? And perhaps give a quick example of that too... I know it's a lot to ask, but thanks in advance! Quote Link to comment https://forums.phpfreaks.com/topic/195177-starter-working-with/ Share on other sites More sharing options...
DaiLaughing Posted March 14, 2010 Share Posted March 14, 2010 If you are looking to learn this it would be better if you were not given the code. You really need to understand CSS from the basics. That's not an impossible job - a few hours with a good book or Web site and is well worth it. You need to look at the box model, positioning and how to set the DIV widths. Float, margins, padding, borders would all be relevant. Quote Link to comment https://forums.phpfreaks.com/topic/195177-starter-working-with/#findComment-1025959 Share on other sites More sharing options...
arbitter Posted March 21, 2010 Author Share Posted March 21, 2010 Okay, I did some research and am starting to comprehend more of it. Though I do have one magor problem; I want my div to have another color than the rest of my page. No problem there. Now what I want is that say I have <div class='whatever'> some text </div>, I want the background to extend a little from the text. I've tried padding and border, but these don't give what I need... Any help? Quote Link to comment https://forums.phpfreaks.com/topic/195177-starter-working-with/#findComment-1029452 Share on other sites More sharing options...
haku Posted March 21, 2010 Share Posted March 21, 2010 Not without some code. Quote Link to comment https://forums.phpfreaks.com/topic/195177-starter-working-with/#findComment-1029617 Share on other sites More sharing options...
DaiLaughing Posted March 21, 2010 Share Posted March 21, 2010 I'm not clear whether you want the background applies to the DIV or the text. Everything in HTML/XHTML/CSS can be thought of as being in a box but you have to pick the right bit to apply margins and padding to to get the background you want. Quote Link to comment https://forums.phpfreaks.com/topic/195177-starter-working-with/#findComment-1029625 Share on other sites More sharing options...
arbitter Posted March 21, 2010 Author Share Posted March 21, 2010 So I want to have text centered in a <div>. The div has a other colour than the bazckground. And I want the background to extend at the top, bottom, right and left of the text. And I want my div to be floating in the center of my page. .tabel { background-color:white; text-align:center; margin-top:50; margin-left:auto; margin-right:auto; width:30%; } <div class='tabel'>example</div> In this case, I have a space above the div of 50px, and a width of the div of 30% of the page. Now what I want is that the width of the div extends the text by a given amount of pixels. If I discard the width element now and change the auto to an amount of pixels, that's the amount of pixels my div will be away from the sides of the page, not the amount of pixels it'll be away from the side of the text... Quote Link to comment https://forums.phpfreaks.com/topic/195177-starter-working-with/#findComment-1029727 Share on other sites More sharing options...
DaiLaughing Posted March 22, 2010 Share Posted March 22, 2010 Check out the box model but it's padding you seem to be after: http://www.yourwebskills.com/boxmodel.html Quote Link to comment https://forums.phpfreaks.com/topic/195177-starter-working-with/#findComment-1029863 Share on other sites More sharing options...
arbitter Posted March 22, 2010 Author Share Posted March 22, 2010 I still don't understand. .tabel { background-color:white; text-align:center; height:auto; width:auto; padding:25px 25px 25px 25px; } shouldn't that work? because it doesn't.. The padding top and bottom do work, but on the left and the right it just goes all the way to the sides of the page.. Quote Link to comment https://forums.phpfreaks.com/topic/195177-starter-working-with/#findComment-1030091 Share on other sites More sharing options...
DaiLaughing Posted March 22, 2010 Share Posted March 22, 2010 You are not giving us enough to go on. I don't even know what that is. Post the whole code for the whole page and I might be able to tell. For all I know you don't even have a proper doctype or valid markup. Quote Link to comment https://forums.phpfreaks.com/topic/195177-starter-working-with/#findComment-1030156 Share on other sites More sharing options...
arbitter Posted March 22, 2010 Author Share Posted March 22, 2010 All I want is a simple <div> to be in the middle of my page, witht the width and height depending on the contents. <!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" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> body { margin:0 0 0 0; padding:0 0 0 0; } .tabel { background-color:white; text-align:center; height:auto; width:padding; padding:50px 25px 100px 100px; } </style> </head> <body bgcolor="#d7d7d7"> <center><div class='tabel'>HAHA</div></center> </body> </html> Quote Link to comment https://forums.phpfreaks.com/topic/195177-starter-working-with/#findComment-1030159 Share on other sites More sharing options...
haku Posted March 23, 2010 Share Posted March 23, 2010 Unfortunately you can't do what you want to. The way the box model works is that block level elements will expand to their size based on the elements they are contained within, but cannot shrink to become the size of the element they are wrapped around. Quote Link to comment https://forums.phpfreaks.com/topic/195177-starter-working-with/#findComment-1030298 Share on other sites More sharing options...
DaiLaughing Posted March 23, 2010 Share Posted March 23, 2010 There are also a few problems with your code. width:padding; is presumably a mistake as it means nothing. center tags are not the right way to do what you want. margin:auto will do the job if everything else is right. It's fairly clear to me that you do need to go back and learn CSS before you try this as you need to understand the basics first. Something like this is closer to what you want but knowing the basics will give you an idea of what is possible and what is not. w3schools.com is excellent and so is Tizag but if you need something which starts at the beginning may I humbly suggest my own site (the link I gave above)! It's ugly but it's easy. Quote Link to comment https://forums.phpfreaks.com/topic/195177-starter-working-with/#findComment-1030375 Share on other sites More sharing options...
arbitter Posted March 23, 2010 Author Share Posted March 23, 2010 Yes I changed the width to padding to see if that would work, but unfortunately it didn't. I tried auto, and that didn't do it eather. Too bad it isn't possible, I'll try to figure a way around it anyway. I'll use tables then I guess. That's how I have it for the moment, but i'd liked it to work with div's. My bad. And yes I learned it a looong time ago on tizag and did some searching there AND in w3schools considering the margin-padding-andthatotherone . Thanks for the help anyway, I'll mark this as solved Quote Link to comment https://forums.phpfreaks.com/topic/195177-starter-working-with/#findComment-1030780 Share on other sites More sharing options...
DaiLaughing Posted March 24, 2010 Share Posted March 24, 2010 You are missing my point. It's no good learning bits of CSS and looking up what you need. You need to learn about a whole range of things because what you want to do involves positioning, sizes and other things as well as margins and padding. I would help more but I still don't really understand what you are trying to achieve and I don't think you understand enough to do it yourself. Quote Link to comment https://forums.phpfreaks.com/topic/195177-starter-working-with/#findComment-1030926 Share on other sites More sharing options...
arbitter Posted March 24, 2010 Author Share Posted March 24, 2010 The point is that when I learn css I always forget the names of the propreties and all of that. I finf it difficult to remember what goes where, so I use it in practice so I can remeber better. But I guess I'll go through the css tutorials again then, untill I remember it all, and then I'll see if what I want to do is possible Quote Link to comment https://forums.phpfreaks.com/topic/195177-starter-working-with/#findComment-1030979 Share on other sites More sharing options...
haku Posted March 24, 2010 Share Posted March 24, 2010 I used to use this site for reference a lot when I was learning: http://www.devguru.com/ It's apparently filled with advertising however. I used the firefox adblockplus plugin for firefox, so I don't see them, but I know it bothers some people. Quote Link to comment https://forums.phpfreaks.com/topic/195177-starter-working-with/#findComment-1031084 Share on other sites More sharing options...
arbitter Posted March 24, 2010 Author Share Posted March 24, 2010 I don't mind ads, if they bother me I'll disable them thanks for the site! Quote Link to comment https://forums.phpfreaks.com/topic/195177-starter-working-with/#findComment-1031093 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.