Jump to content

[starter] working with <div>

arbitter

By arbitter
in HTML Help

 Share

Recommended Posts

arbitter Regular Member

arbitter

Posted
Posted

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!

Link to comment
Share on other sites
DaiLaughing Newbie

DaiLaughing

Posted
Posted

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.

Link to comment
Share on other sites
arbitter Regular Member

arbitter

Posted
  • Author
Posted

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?

Link to comment
Share on other sites
arbitter Regular Member

arbitter

Posted
  • Author
Posted

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...

 

 

Link to comment
Share on other sites
arbitter Regular Member

arbitter

Posted
  • Author
Posted

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..

Link to comment
Share on other sites
arbitter Regular Member

arbitter

Posted
  • Author
Posted

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>

 

Link to comment
Share on other sites
haku Regular Member

haku

Posted
Posted

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.

Link to comment
Share on other sites
DaiLaughing Newbie

DaiLaughing

Posted
Posted

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.

Link to comment
Share on other sites
arbitter Regular Member

arbitter

Posted
  • Author
Posted

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 :)

Link to comment
Share on other sites
DaiLaughing Newbie

DaiLaughing

Posted
Posted

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.

Link to comment
Share on other sites
arbitter Regular Member

arbitter

Posted
  • Author
Posted

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 :)

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.