As was foretold, we've added advertisements to the forums! If you have questions, or if you encounter any bugs, please visit this thread: https://forums.penny-arcade.com/discussion/240191/forum-advertisement-faq-and-reports-thread/
Options
HTML, CSS and YOUR help!
Penguin_Otaku
Registered User regular
Registered User regular
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?
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?
Penguin_Otaku on
0
Posts
Does your host support server side includes or any of the major scripting languages like php or asp?
And I'm aware it's not content, I misspoke.
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."
/* CSS Document */
.Footer {
text-align: center;
font-family: Tahoma, Geneva, sans-serif;
font-size: 10px;
color: #FFF;
background-color: #950918;
padding: 10px;
}
.Sidebar {
background-color: #950918;
text-align: left;
font-family: Tahoma, Geneva, sans-serif;
color: #FFF;
padding: 5px;
vertical-align:text-top;
}
.Content {
font-family: Tahoma, Geneva, sans-serif;
font-size: 18px;
padding-top: 25px;
padding-right: 15px;
padding-bottom: 25px;
padding-left: 15px;
text-align: center;
vertical-align:text-top;
font-weight: normal;
}
.ContentHeader {
color: #FFF;
background-color: #950918;
font-family: "Arial Black", Gadget, sans-serif;
font-size: 24px;
text-align: center;
padding: 0px;
}
.Links {
padding-top: 0px;
padding-bottom: 0px;
padding-left:0px;
padding-right: 0px;
}
a:link {
color: #fff;
font-weight: bold;
border: 0px;
}
v:link {
color: #fff;
font-weight: bold;
border: 0px;
}
IMG.displayed {
display: block;
margin-left: auto;
margin-right: auto }
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...
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>OUTV | Championship Student Television</title>
<link href="OUTV.css" rel="stylesheet" type="text/css" />
</head>
<body>
<table width="900" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td><img src="images/.jpg" width="900" height="125" alt="" /></td>
</tr>
</table>
<table width="900" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td class="Links">
<a href="index.html"><img src="images/home.jpg" alt="" border="0"/></a><a href="watch.html"><img src="images/watchnow.jpg" alt="" border="0"/></a><a href="schedule.html"><img src="images/schedule.jpg" alt="" border="0"/></a><a href="shows.html"><img src="images/shows.jpg" alt="" border="0"/></a><a href="about.html"><img src="images/about.jpg" alt="" border="0"/></a><a href="contact.html"><img src="images/contact.jpg" alt="Find Out How to Reach Us" width="163" height="40" border="0"/></a>
</td>
</tr>
</table>
<table width="900" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td width="265" rowspan="2" class="Sidebar"><p><a href="OUN/index.html" alt="Nightly News Coverage Monday-Friday"><img src="images/OUN.jpg" class="displayed" alt="" height="150px" width="240px" border="0"/></a>
<a href="OSP/index.html" alt=""><img src="images/OSP.jpg" class="displayed" alt="OUr Sports Pad" height="150px" width="240px" border="0"/></a>
<a href="TheSet/index.html" alt=""><img src="images/Set.jpg" class="displayed" alt="The Set" height="150px" width="240px" border="0"/></a></p></td>
<td width="635" class="ContentHeader"><p></p></td>
</tr>
<tr>
<td class="Content"><p></td>
</tr>
</table>
<table width="900" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td class="Footer">
<p><a href="http://ww/tv" alt=""></a> | <a href="http://www.ou.edu" alt=""></a> | <a href="htedu/gaylord" alt="Homrnalism"></a>| <a href"http://www.youtou" alt=""></a></p></td>
</tr>
</table>
</body>
</html>
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.
Also, I thought by setting it to the class "Content.Header" or "Content" it would take on those parameters listed in the stylesheet
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.
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.
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?
I'm going off this model, but unfortunately it's not aligning center for me. I tried adding align:center but to no avail
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.
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.
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
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?
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?
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?
W3schools is by no means the best place to learn from, but this page should help you out.
In CSS3 that now has it's own property, here you go.
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.
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?
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.
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.
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
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
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?
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.