Very quick CSS question

Zio · **Joined:** 31st Mar, 2008 **Posts:** 6093

Right then.

I'm creating a shitty little web page.

On my CSS stylesheet, I've set margins and padding for everything under the BODY tag to 0.

Back to the HTML, I've created a container DIV 800px wide with left and right margins set to 'auto' so that it's in the centre of the page.

Immediately within that DIV, I've created another DIV for the header, which is 100px high and with width set to 'auto' so that it occupies the whole of the container DIV.

Then I've created another DIV below the header one for navigation links to go in. I've set that to 20 px high, with width set to auto.

Then finally I've created one more DIV for all my text and other shit to go in. I've set height and width for this to 'auto' so that it takes up all remaining space in the container DIV, and so that both it and the container expand as content is added.

Now then, the header DIV sits snugly at the top of the container DIV, with no space above or to the sides. The menubar DIV does exactly the same, sat snugly beneath the header DIV. The main DIV however does not do this, and there's a small gap between it and the menubar DIV.

Why is this? How do I get rid of the gap?

In the spoiler tag is my HTML, in case that helps.

ZOMG Spoiler! Click here to view!

<body>
<div id="container">
<div id="header"><img src="images/title.gif" width="795" height="95" align="left" /></div>
<div id="menubar">Navigation links will go here.</div>
<div id="main">
<p>Content for id "main" Goes Here</p>
<p>Stuff</p>
<p>More stuff</p>
<p>You get the idea</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
</div>
</body>

Any help would be marvellous!

Grim... · **Posted:** Wed Jan 05, 2011 18:05

That source pretty meaningless without the rest of the info. Have you got a link?

Also, you don't need to set width to 'auto' on a div - it will be as wide as it can be by default.

Zio · **Joined:** 31st Mar, 2008 **Posts:** 6093

Grim... wrote:

That source pretty meaningless without the rest of the info. Have you got a link?

It's not online, it's just some mucking about I'm doing before my web design class tonight.

Spoilered is the stylesheet, but it's the same info as I gave in my initial post:

ZOMG Spoiler! Click here to view!

@charset "utf-8";
#container {
width: 800px;
margin-left: auto;
border: 2px dotted #000;
margin-right: auto;
}
#menubar {
height: 20px;
width: auto;
background-color: #FFF;
}
#main {
background-color: #FFF;
width: auto;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
color: #000;
height: auto;
}
#header {
height: 100px;
width: auto;
}
body {
margin: 0px;
padding: 0px;
background-color: #CCC;
}

Grim... wrote:

Also, you don't need to set width to 'auto' on a div - it will be as wide as it can be by default.

That's actually very handy to know, cheers.

You may, at this point, gather some understanding as to how utterly fucking shit my teacher is.

Edit: I changed the body background colour in the above example so it makes a bit more sense.

Grim... · **Posted:** Wed Jan 05, 2011 18:17

http://www.fullonrobotchubby.co.uk/zio/
Obv, I haven't got your image. [edit] Yay Google "Exactly this size" image search!

So, what's the problem? You don't like the gap between #main and #menubar?

Grim... · **Posted:** Wed Jan 05, 2011 18:19

If it is, change the first <p> in #main to <p style="margin-top: none">, or, better, add some padding to #main.

Further, adding

Code:

margin: 0px;
padding: 0px;
background-color: #CCC;

to body will only effect the body itself. If you want the body and everything in it, you want

Code:

body * {
padding: 0px;
margin: 0px;
}

which is the same as

Code:

 * {
padding: 0px;
margin: 0px;
}

Grim... · **Posted:** Wed Jan 05, 2011 18:20

Also also, you don't need a height on #header, as the image will force it out to be that height.

Malabelm · **Posted:** Wed Jan 05, 2011 18:22

Grim... wrote:

Also also, you don't need a height on #header, as the image will force it out to be that height.

To elaborate on Grim...'s teachings, you should look into block and inline elements. A div, by default (you can override it if you wish), is a block element. It will stretch horizontally to fit its parent and vertically to fit its own contents without you doing a thing.

Zio · **Joined:** 31st Mar, 2008 **Posts:** 6093

I think I love you, but only slightly and not enough to make you pregnant. Applying 0 margins and padding to * did the trick. How the fuck I managed to get applying stuff to the body tag and applying stuff to the wildcard confused, I don't know.

Thanks Grim...!

Zio · **Joined:** 31st Mar, 2008 **Posts:** 6093

Malaboob wrote:

Grim... wrote:

Also also, you don't need a height on #header, as the image will force it out to be that height.

To elaborate on Grim...'s teachings, you should look into block and inline elements. A div, by default (you can override it if you wish), is a block element. It will stretch horizontally to fit its parent and vertically to fit its own contents without you doing a thing.

I'm still stuck in the days of doing all my HTML layouts using tables and frames, hence making everything definite sizes - still getting used to using divs.

Grim... · **Posted:** Wed Jan 05, 2011 18:27

That's not great - now you've ruined your paragraph spacing, as you've removed their margins. Any list objects you put in will also fail to work. Also, if you put the * style at the bottom of your stylesheet, it will override everything that has come before it, meaning you won't be able to put padding or margins on anything unless you use inline styles or the !important declaration.

I've changed http://www.fullonrobotchubby.co.uk/zio/index.htm and http://www.fullonrobotchubby.co.uk/zio/style.css to be what I would write if I were trying to do what you're doing, if that helps.

Note that the title image is 5px less wide than the overall container div, so I shortened it.

Zio · **Joined:** 31st Mar, 2008 **Posts:** 6093

Cool, cheers Grim....

Time for me to piss off home and do this stuff actually on my home PC, rather than remotely from my work PC, so I'll try your changes in about 15 mins.

Grim... · **Posted:** Wed Jan 05, 2011 18:34

K. If you've not already, get the hang of Firebug (for Firefox, search for the extension) or right-clicking on a div and choosing 'inspect element' on Chrome, or pressing F12 for Dev tools in IE.
I honestly wonder how the Hell I got anything done before someone made them.

throughsilver · **Joined:** 30th Mar, 2008 **Posts:** 6197

I'd completely forgotten about CSS the band.

Grim... · **Posted:** Thu Jan 06, 2011 19:27

I hear they sold their albums at a huge markup.

JohnCoffey · **Posted:** Thu Jan 06, 2011 19:58

Don't play Counter strike : Source. Sorry.

Cras · **Joined:** 30th Mar, 2008 **Posts:** 49244

Woo! I've got one now. And I'm hacking up someone else's CSS, so this is horrible.

Basically, I've got a table, with a number of fields in. If I increase the height of the table (because I want to add stuff), all the TR elements increase in height, spreading the rows further apart. I'd really like them to stay where they are, but can't work out how to force the TR elements into a fixed height.

The TR elements currently aren't defined in the CSS, and the HTML is all generated, so I can't give them a classname and force it there.

That may make no sense, so let me try and summarise.

I've got a CSS file I can edit, that has custom definitions for a given Table object, and TD objects. The TR object is not defined though, and the default behaviour appears to make the TR expand to fill the space in the Table. I cannot edit the HTML.

Thoughts?

GazChap · **Posted:** Thu Jan 13, 2011 15:24

Can you wrap the table in a div and then use a div#id table tr { height: 10px; } jobbie?

Cras · **Joined:** 30th Mar, 2008 **Posts:** 49244

Table's already wrapped in a div - how do I add that into the existing div element in the CSS? Bear in mind I don't do CSS.

Malabelm · **Posted:** Thu Jan 13, 2011 15:34

What are you adding to the table?

Cras · **Joined:** 30th Mar, 2008 **Posts:** 49244

I want to add text, but as I have no access to the HTML, I think I'll need to add in a background image that I've written the text on.

Yes, this is a proper fucking lash.

Grim... · **Posted:** Thu Jan 13, 2011 15:45

Is there more than one table on the page? If not

Code:

table { 
    ... table css ...
}

tr {
   ...row css...
}

But! You don't want to change the height. Put

Code:

table { 
    padding-bottom: 20px; /* the height of a row */
    background: transparent url(theimagewiththewritingin.png) no-repeat left bottom;
}

How come you can get to the CSS and not the HTML?
Can you get to the Javascript?

Cras · **Joined:** 30th Mar, 2008 **Posts:** 49244

There's no other tables on this page, but there's tables on other pages that use the same CSS, unfortunately.

The HTML is generated on the fly from a load of compiled java shit. JS I can get to.

Zio · **Joined:** 31st Mar, 2008 **Posts:** 6093

Not at all wishing to distract from Craster here, but maybe some of you web boffins can help with a very, very general question.

My initial question here was for the City & Guilds Website Software course. I'm two weeks away from finishing the Level 2 course and now I have to decide whether or not to stump up the £325 to do the Level 3 Advanced course.

I'm just wondering if it'll be worth it? The course itself is bizarre - our teacher is just hopeless, we never manage to keep to the schedule and constantly end up not getting taught things we were promised we would (or just glossing over them - we did Flash CS5 in about 40 mins), yet it never seems to matter as the final exam is pitifully easy. Literally, I have unlimited time in the next fortnight to design a 4-page website on paper and procure my images, then two hours exam conditions to build it. I had a practice run at it last night to remind myself some of the CSS things we'd been taught and had it done and dusted in about 30 mins. I got a distinction in the Level 1 exam and I'll be more than disappointed if I can't manage the same in this one.

So yeah, is it worth it? Would prospective employers give a shit whether or not I have a City & Guilds Website Software level 3 certificate? We do apparently learn PHP and MySQL stuff in level 3, which would be great for me as I only have very basic PHP experience and zero MySQL experience, but the teacher is such an arse I'll inevitably end up looking it all up for myself anyway. So yeah, would potential employers take my £325 piece of paper seriously or not?

GazChap · **Posted:** Thu Jan 13, 2011 15:57

I've never heard of it, but that's not to say it isn't worth it.

Cras · **Joined:** 30th Mar, 2008 **Posts:** 49244

Grim... wrote:

But! You don't want to change the height. Put

Code:

table { 
    padding-bottom: 20px; /* the height of a row */
    background: transparent url(theimagewiththewritingin.png) no-repeat left bottom;
}

So, based on this, I should be able to do the following, right:

HTML:

Code:

CSS:

Code:

#Geoff{
background-color: white;
border: 1px solid #ABABAB;
font-size: 12px;
height: 480px;
margin-left: 32px;
margin-top: 15px;
padding-bottom: 26px;   <-- Added in as per your post
width: 380px;
}

Only that doesn't seem to make any difference.

GazChap · **Posted:** Thu Jan 13, 2011 16:09

Grim... is suggesting having an image with whatever you want to put at the bottom of the table in it, and then set the background image of the table to that image, and have it utilise the height you put in in the padding-bottom (so, you'd have a 26px high image).

You need to put the background: line in from Grim...s CSS too.

Cras · **Joined:** 30th Mar, 2008 **Posts:** 49244

Ah, gotcha. Trying...

Grim... · **Posted:** Thu Jan 13, 2011 16:15

Craster wrote:

There's no other tables on this page, but there's tables on other pages that use the same CSS, unfortunately.

The HTML is generated on the fly from a load of compiled java shit. JS I can get to.

If you can get to the javascript, I can probably help you to do it 'properly', or at least better - pm me with the URL.

Cras · **Joined:** 30th Mar, 2008 **Posts:** 49244

Right - that put the image in the right place, perfect. What it didn't do was resolve the issue of the extra padding between TR elements that happened when I made the Table bigger.

One sec, I'll screenshot.

Grim... · **Posted:** Thu Jan 13, 2011 16:17

Code:

#Geoff {
 /* all that */
}

#Geoff tr, #Geoff td, #Geoff th {
   padding: 2px; /*or whatever */
}

Grim... · **Posted:** Thu Jan 13, 2011 16:20

Note that I've edited the above, as I don't know what's in your table.

Grim... · **Posted:** Thu Jan 13, 2011 16:21

You really do want to fiddle the JS, though, as that would be a much 'nicer' way of doing this.

Code:

window.onload = function() {
    var tbl = document.getElementById('Geoff');
    var lastRow = tbl.rows.length;
    lastRow ++; //you can take this out if there's no header to the table. Give it a try and see
    var z=tbl.insertRow(lastRow);
    var a=z.insertCell(0);
    var b=z.insertCell(1);
    var c=z.insertCell(2); //etc
    a.innerHTML="Text in cell 0";
    b.innerHTML="Text in cell 1";
    c.innerHTML="Text in cell 2"; //etc
}

Cras · **Joined:** 30th Mar, 2008 **Posts:** 49244

Fuck it, ended up using an 'alert'. Does the job.

Appreciate the help, chaps - makes me rather glad I don't do this stuff regularly

Malabelm · **Posted:** Thu Jan 13, 2011 17:55

Craster wrote:

Appreciate the help, chaps - makes me rather glad I don't do this stuff regularly

Most things you need to do, generally, are piss easy. The trouble arises when you have your hands tied, you have to deal with other people's systems or code, or you have to touch tables with CSS. You pretty much landed on a grenade on this one.

Grim... · **Posted:** Thu Jan 13, 2011 18:00

Tables are alright for CSS.
He still should have used my nice Javascript solution to append the data to the table, though. Silly Craster.

Malabelm · **Posted:** Thu Jan 13, 2011 18:01

Grim... wrote:

Tables are alright for CSS.

You think? I can't stand working with them.

Cras · **Joined:** 30th Mar, 2008 **Posts:** 49244

Grim... wrote:

Tables are alright for CSS.
He still should have used my nice Javascript solution to append the data to the table, though. Silly Craster.

I did. It did fuck all

Grim... · **Posted:** Thu Jan 13, 2011 18:24

Did you change 'geoff' to be what the table id was?

Cras · **Joined:** 30th Mar, 2008 **Posts:** 49244

Yes. Yes I did.

Grim... · **Posted:** Thu Jan 13, 2011 18:29

Did you take out the "lastRow ++;" line if the table had no headers?

Works fine, see: http://www.fullonrobotchubby.co.uk/random/crastable.htm

Cras · **Joined:** 30th Mar, 2008 **Posts:** 49244

Yeah, just tried that and it works. The alert does the job, to be honest, but cheers.

Grim... · **Posted:** Thu Jan 13, 2011 18:33

Comments be your friend.

Would you like me to do you a nice modal box rather than an alert?

Cras · **Joined:** 30th Mar, 2008 **Posts:** 49244

Yeah, but I was expecting it to do something, but a line out, rather than do nothing visable. My fault for assuming.

And no ta, I've spent enough time on this one poxy disclaimer.

Grim... · **Posted:** Thu Jan 13, 2011 18:38

Is the alert "Badgers attend at their own risk"?

kalmar · **Posted:** Thu Jan 13, 2011 20:30

Malaboob wrote:

Craster wrote:

Appreciate the help, chaps - makes me rather glad I don't do this stuff regularly

Most things you need to do, generally, are piss easy. The trouble arises when you have your hands tied, you have to deal with other people's systems or code, or you have to touch tables with CSS. You pretty much landed on a grenade on this one.

Looks like he's survived it. What were the chances of that happening?

Be Excellent To Each Other

Very quick CSS question
Web stuff, not the band.

Who is online

Be Excellent To Each Other

Very quick CSS question Web stuff, not the band.

Who is online

Very quick CSS question
Web stuff, not the band.