HTML, CSS and YOUR help!

Penguin_Otaku · December 2011

So I'm trying to figure out if there's an easy way to keep a group of text, say for a header or footer, to be linked to an external sheet like my CSS is where I would only have to update it once for it to be affected everywhere (namely the footer.)

also, the way I'm designing the page, a table with one column to the left and two the the right. The top on the right serves as a sort of mini-header for the page and it's sublinks (thought this more simple and easy than a drop down.) For whatever reason in Firefox, none of the other browsers, the miniheader just goes nuts and takes up way too much space despite the height being 100%, any thoughts?

bowen · December 2011

CSS is styling, not content.

Does your host support server side includes or any of the major scripting languages like php or asp?

Penguin_Otaku · December 2011

Yes it does.

And I'm aware it's not content, I misspoke.

Infidel · December 2011

You want to do some CMS (Content Management), although that doesn't mean you need a huge framework to do it.

It can be as simple as putting the content in a common HTML file (server-side-include it) or using PHP/etc. to call the code that inserts it, making the content exist in only one place, as Bowen says.

It is usually impossible to troubleshoot CSS issues without posting the actual page somewhere, but something to keep in mind that not everyone understands is that "height 100%" means "set my height equal to exactly what my parent has for a height value."

Penguin_Otaku · December 2011

Spoiler:

There's my external css sheet... now that I see it in chrome (new issue), the text is all wonky where the content class is, it's not floating to the top like it should...

Infidel · December 2011

CSS does nothing without HTML to apply it to, post that as well.

Penguin_Otaku · December 2011

Spoiler:

Infidel · December 2011

You'd be better off ditching the tables for layout.

If I understand you right, the first table row is too tall? You don't set a height for the first <tr> anywhere so it will be decided by the browser what works best, whether you like it or not.

Penguin_Otaku · December 2011

What would you suggest then other than tables?

Also, I thought by setting it to the class "Content.Header" or "Content" it would take on those parameters listed in the stylesheet

Infidel · December 2011

As I mentioned, you don't do anything with the <tr>, you set a class on the <td>. A table cell does not have a height, it has a width. The table row is what really has the height.

The new hotness (aka when CSS came out years ago) is to use <div>s for your layout instead. You wouldn't have the issue you're having now, which is "hey a table cell is a peer to other cells, so I'll take this height and divide it evenly between the two rows" even though you only wanted the minimum necessary for the first one. Why don't you get that? Because it has no idea that your intention is for that to be different from any other cell.

You could use CSS to tell it that, but you're better off just using raw divs and styling those.

Sample inline-CSS (don't inline a bunch of CSS) column setup:

<div id="container" style="width: 900px;">
    <div id="leftcolumn" style="width: 30%; float: left;">
        links and shit oh yeah
    </div>
    <div id="rightcolumn" style="width: 65%; float: right;">
        <div id="header">
            IMAGE HERE
            maybe a subtitle?
        </div>
        <div id="content">
            use your words
        </div>
    </div>
</div>

Now the columns are % based on the width of my container, fixed here to 900px but easily modified and flowing properly, with a 5% gutter.

admanb · December 2011

CSS boxes.

Tables are fine when you're actually working with tabular data, but they turn into a bag of nonsense when you try to arrange pages with them, and adding CSS just makes it worse.

Penguin_Otaku · December 2011

So I'm having issues with making links out of the bottom buttons. Is there an easy way to do this in Photoshop or even with HTML?

admanb · December 2011

http://www.w3schools.com/tags/tag_map.asp

Penguin_Otaku · December 2011

Infidel wrote:
As I mentioned, you don't do anything with the <tr>, you set a class on the <td>. A table cell does not have a height, it has a width. The table row is what really has the height.

The new hotness (aka when CSS came out years ago) is to use <div>s for your layout instead. You wouldn't have the issue you're having now, which is "hey a table cell is a peer to other cells, so I'll take this height and divide it evenly between the two rows" even though you only wanted the minimum necessary for the first one. Why don't you get that? Because it has no idea that your intention is for that to be different from any other cell.

You could use CSS to tell it that, but you're better off just using raw divs and styling those.

Sample inline-CSS (don't inline a bunch of CSS) column setup:
<div id="container" style="width: 900px;">
    <div id="leftcolumn" style="width: 30%; float: left;">
        links and shit oh yeah
    </div>
    <div id="rightcolumn" style="width: 65%; float: right;">
        <div id="header">
            IMAGE HERE
            maybe a subtitle?
        </div>
        <div id="content">
            use your words
        </div>
    </div>
</div>
Now the columns are % based on the width of my container, fixed here to 900px but easily modified and flowing properly, with a 5% gutter.

I'm going off this model, but unfortunately it's not aligning center for me. I tried adding align:center but to no avail

wmelon · December 2011

which part are you trying to align center?

if you're trying to align the whole thing to the center you'll want to add "margin:0 auto;" to the style on the container div.

Rye · December 2011

Penguin_Otaku wrote:

So I'm having issues with making links out of the bottom buttons. Is there an easy way to do this in Photoshop or even with HTML?

Yes. In photoshop, use the slice tool to divide the image into interactive parts (6 buttons in your case). Then, using the Slice Select tool, double click on the slice and change the "URL" attribute to the link you want and the "Name" to whatever you want the image to be named. Then just save for web and make sure you get images AND html (the dropdown underneath file type on the menu where you name the file to be saved).

If you open the html file that it spits out, what you get is a table with an image map in the exact place you want with <a href>'s already pointing to where you want.

EDIT - you can also get it to output CSS if you want, but it's buried down a few menus. If you want to explore that I can give more help.

Penguin_Otaku · December 2011

wmelon wrote:

which part are you trying to align center?

if you're trying to align the whole thing to the center you'll want to add "margin:0 auto;" to the style on the container div.

That got it aligned, thanks. Now I'm having issue getting them to... "touch" without overlapping/my right column getting pushed down beneath the left column div

EDIT: Nevermind

Penguin_Otaku · December 2011

Tips for getting my footer to not be... behind these other div layers? I've tried reordering them and for some reason the header and links work fine, but the footer doesn't know to go beneath the two columns.

admanb · December 2011

If you're using that model you probably need to add "clear: both;" to the footer's CSS style.

Penguin_Otaku · December 2011

admanb you're saving my ass right now, thank you so much. Do you have AIM or something?

now, with that model I added a header that just sits on top of that other cluster. I want the container div to be touching where those buttons will be, I'm guessing I need a clear in the style of the container div?

admanb · December 2011

I pretty much use gchat exclusively. I PMed you my email.

You won't need clear for the header. Clear is used after float elements to push the boxes past them. What problem are you having with the header?

Penguin_Otaku · January 2012

Can't make a new thread, so I'm gonna ask here.

What's the best and most effective way to set a fixed background? Also, what is a good idea for the size of the background?

Penguin_Otaku · January 2012

I'm having issue with a Flash player loading on the website I'm working on. It's weird because the script and all supporting files are fine and located in proper directories.. on the backup of the old site, the script works just fine but on this one it won't even load.

zen- · January 2012

The best way to set a fixed background is from within your CSS document.

W3schools is by no means the best place to learn from, but this page should help you out.

Penguin_Otaku · January 2012

Well someone introduced me to a Javascript script that keeps the image filling the background regardless of size and all of that, but for some reason Dreamweaver isn't cooperating, same with the script for the flash player.

zen- · January 2012

Oh you mean to auto expand depending on the width of the window?

In CSS3 that now has it's own property, here you go.

Penguin_Otaku · January 2012

You're the man. My Google-fu fails me sometimes because I'm awful at wording some things.

Alright, now this presents another issue that the background is in place. I have a sidebar on the left and then a div/block for content that's not going down the page with the sidebar. I've set the height to inherit, but I'm having trouble making both of these read each other and remain a consistent height with each other.

[Michael] · January 2012

Just keep in mind that lots of CSS3 properties aren't well supported in IE versions below 9. IE6-IE8 still holds about 1/3 of the browser market.

If you want to test different versions in IE, you can just go to developer tools (F12) and switch between different browser/document modes.

It would make my life just a little easier if everyone would move onto browsers with better CSS3 support, but hey, sometimes you can't just ignore that ~30% of people out there.

Penguin_Otaku · January 2012

[Michael] wrote:

Just keep in mind that lots of CSS3 properties aren't well supported in IE versions below 9. IE6-IE8 still holds about 1/3 of the browser market.

If you want to test different versions in IE, you can just go to developer tools (F12) and switch between different browser/document modes.

It would make my life just a little easier if everyone would move onto browsers with better CSS3 support, but hey, sometimes you can't just ignore that ~30% of people out there.

Brings me to another question. I was creeping another website's source because I was curious how they were doing something and found that they linked to different style sheets per browser (not sure how they knew exactly...)

Since this website needs to be accessibly to most browsers, what's the easiest way to pull this off?

wmelon · January 2012

It's not terribly difficult to build your html and css to work across most browsers, but you will find some things that are just infuriating. Personally I hate using conditional stylesheets for different browsers when you can build semantically good code that should render properly across all browsers.

Another option is to gracefully degrade in browsers that don't support css3. Such as allowing for non-rounded corners in IE8 and below, only using css gradients or shadows where necessary.

[Michael] · January 2012

I usually go the graceful degradation route instead of conditional stylesheets. For most sites I've done, I can keep them looking nearly identical in IE7+, Chrome, and Firefox without having to deal with conditional stylesheets.

With graceful degradation, they do look slightly different between IE and Chrome/Firefox, but often the user will never even notice. So 60%+ of users will see a box with a drop shadow or with rounded corners, while 30%+ will see just a box. Typically, details like that aren't going to make or break a design.

Another option if you really, really want CSS3 effects in earlier IE versions is CSS3 Pie. I'm not sure what properties they support, and I've never actually used it, but I've heard good things about it from co-workers.

Penguin_Otaku · February 2012

So I'm trying to make everything match in length now if that makes any sense.

Through the advise of others here I've been using DIV tags to create these separate sections.

I have a sidebar on most pages and another, larger section for the content.

Depending on the page, the sidebar or the content won't always go past and/or match the length of the other. This creates a cool effect where the person can see the background, but it's too inconsistent across pages that I want it all to just "connect" and touch the footer at the bottom.

What tag do I need to put in the CSS to accomplish this?

wmelon · February 2012

Do you have a link you can share so that we can look at your code and give some suggestions? I'm not really sure there's really an option in css to specifically do what you're asking without looking at it.

Seguer · February 2012

Penguin_Otaku wrote:

So I'm trying to make everything match in length now if that makes any sense.

Through the advise of others here I've been using DIV tags to create these separate sections.

I have a sidebar on most pages and another, larger section for the content.

Depending on the page, the sidebar or the content won't always go past and/or match the length of the other. This creates a cool effect where the person can see the background, but it's too inconsistent across pages that I want it all to just "connect" and touch the footer at the bottom.

What tag do I need to put in the CSS to accomplish this?

Do a search for Faux Columns

Penguin_Otaku · February 2012

Alright, so the page I'm needing the most help on is at www.ou.edu/tv/watch.html

There's a flash player there that only wants to work on IE for some reason and I don't know what to do about it to get it to work. I unfortunately don't have access to the original FL files

Penguin_Otaku · February 2012

I'm working on the faux columns part of things right now, but I'm also working on a background for the site. Most of is kind of in a red gradient. This doesn't necessarily clash with the text in the sidebar, but since I forgot to put a border on it it doesn't have a whole lot of room establish itself in the room it has.

Is there a way to add padding to the text and making the font smaller without reconfiguring div %s and everything?

Also is there a place to find old, compatible codes with older browsers?

[Michael] · February 2012

The site isn't loading for me right now, so for all I know this isn't what you're talking about, but generally if you've got text in a div and you want to add padding and change the font-size without affecting the containing div, you just put the text in an HTML element (like <p></p>) and add the style properties to the HTML element.

I made an example here: http://jsfiddle.net/qCpWs/1/
Both divs are identical in terms of width, height, padding, margins, etc, but the text is styled differently.

The Mozilla Developer Network has a CSS reference page, and most properties/classes/psuedoclasses have a "Browser Compatibility" section to show you what browsers support it starting at what version number. A good example is: https://developer.mozilla.org/en/CSS/border-radius

Generally, you'd want to come up with a list of browsers you plan to support prior to starting the design, then stick to properties that fit your list. They don't necessarily have to fit perfectly, and that's where graceful degradation comes in. Make sure for the properties that aren't supported in a given browser you want to support that it doesn't break the overall design.

Penny Arcade

HTML, CSS and YOUR help!

Posts