Serious HTML/CSS help. [Archive] - Glock Talk

PDA

View Full Version : Serious HTML/CSS help.


jtm62
05-11-2009, 21:24
All,

I recently figured out to get a domain name and server working hand in hand. As such, a lot of the projects I had planned are starting to come together. Currently I am working on the webpage portion of the project. I am mostly using the built in text editor in Ubuntu because I like the control I have over typing the 'code' myself. I, however, know very little about CSS/HTML; as such, I am teaching myself as I go. I have two handy reference guides and, of course, the vast expanse of the internet and practically the source code for any site ever built. However, combing through source code for the answers to my questions take copious amounts of time, so I am going to present the basic information to you and see what you think.

The page I am currently building is the blog page. This page will replace the default when complete... until then a weak placeholder page is in place. :rofl:

Anyway, I want to design the blog in such a manner that there is a header a footer and 2 columns. I have this coding down, with no issues. I have the entire page background set to a navy blue, with the content boxes being lighter shades of gray. Let me tell you this sudden change really clashes.

I figured as a solution I would implement a gradient border to ease into the content boxes. This is where I need assistance. I want nearly everything on this page to be determined by percent. I do not want fixed width and height content boxes, I could very easily brute force my borders to work if this was the case.

I have been messing around for about 90 minutes with this thing, just tonight, and I must say, every change I make I learn a little more about HTML and the engines thought process.

I'm going to post again with my code so far.

Thanks!

jtm62
05-11-2009, 21:28
As a notice.... the <style> things are missing... I have everythign in a seperate style sheet to make the code smaller and easier to work with.

/* This stylesheet will provide the background, header, and footer styles for the blog pages. */


html {
background-color: #000033; /* Site background color */
border: 14px solid #CCFFFF; /* Site border color */
}

#header {
background-color: #3366CC; /* Footer background color */
width: 100%;
margin-bottom: 56px;
}

#footer {
background-color: #3366CC; /* Footer background color */
width: 100%;
margin-top: 56px;

/* This page will provide the styles the content boxes of the blog (the actual blog posts and whatnot.) */

#topborder {

padding-top: 50px;
width: 40%;
background: url(contentbordertop.jpeg);
background-repeat: repeat-x;
}

#bottomborder {

width: 40%;
background: url(contentborderbottom.jpeg);
background-repeat: repeat-x;
}

#leftborder {

background: url(contentborderleft.jpeg);
background-repeat: repeat-y;
}

#topleftcorner {
margin-left: 14%;
background: url(topleftcorner.jpeg);
background-repeat: no-repeat;
}

#content {
border-top: url(contentbordertop.jpeg);
width: 80%;
margin-left: 50px;
background-color: #CCCCCC;
padding: 14px;
}

#nav {
width: 33%;
margin-left: 56%;
background-color: #666666;
padding: 14px;
}

<head>

<title></title>


</head>

<div id='header'>
<p> header test </p>
</div> <!-- header end div tag. -->

<div id='topleftcorner'><div id='bottomborder'>
<div id='leftborder'>
<div id='topborder'>

<div id='content'>

<p> test test </p>

</div> <!-- content end div tag -->
</div></div></div> </div>

<!--<div id='nav'>
<p> test test </p>
</div> nav end div tag -->

<div id='footer'>
<p>&copy; 2009 Blog —</p>
</div> <!-- footer end div tag. -->



</html>



I removed any hint of the personal info from the code. Until I get everythign working I wanna keep it to myself. :rofl::rofl:

Thanks for takign a look.

Green_Manelishi
05-12-2009, 11:24
As a notice.... the <style> things are missing... I have everythign in a seperate style sheet to make the code smaller and easier to work with.

I removed any hint of the personal info from the code. Until I get everythign working I wanna keep it to myself. :rofl::rofl:

Thanks for takign a look.

Your comments should include the color the hex is coded to produce, unless you know the numbers by heart.

Green_Manelishi
05-12-2009, 11:28
I have the entire page background set to a navy blue, with the content boxes being lighter shades of gray. Let me tell you this sudden change really clashes.


Dark backgrounds "look" uber-cool but are the suck from a contrast point of view. There's a reason books are white/kinda background with dark text; it's softer and easier to read. If I have difficulty reading the text on your pages /blog I'll not stay around too long.

jtm62
05-12-2009, 12:54
Your comments should include the color the hex is coded to produce, unless you know the numbers by heart.

Thanks for the tip, I will eventually have everything commented beyond what should be necessary, but since I am still in the beginning stages and trying to learn as I go, I am changing a lot of stuff and comments in some spots right now are pointless.

Dark backgrounds "look" uber-cool but are the suck from a contrast point of view. There's a reason books are white/kinda background with dark text; it's softer and easier to read. If I have difficulty reading the text on your pages /blog I'll not stay around too long.

I won't lie, the light on dark format idea I got from here: http://jeannettejayhawksfootball.blogspot.com/ It looks good there and will work in my application as well, however, I still may go dark on light because it will probably make my issues easier to fix.

Green_Manelishi
05-12-2009, 13:21
I won't lie, the light on dark format idea I got from here: http://jeannettejayhawksfootball.blogspot.com/ It looks good there and will work in my application as well, however, I still may go dark on light because it will probably make my issues easier to fix.

That dark with light has nice contrast.

Too many think a black/navy background looks snappy with text that is just about as dark.

So, make certain there is plenty of contrast and you should be OK. You might, when you are ready to deploy, ask several folks, including some "color blind" folks to read the site and make certain it can be easily read.

jtm62
05-12-2009, 13:47
That dark with light has nice contrast.

Too many think a black/navy background looks snappy with text that is just about as dark.

So, make certain there is plenty of contrast and you should be OK. You might, when you are ready to deploy, as several folks, including some "color blind" folks to read the site and make certain it can be easily read.

Aye. I'll probably start a new thread here in TT when I am ready to deploy. I must say. writing your own HTML and javascript sucks. :rofl::rofl:

grokdesigns
05-12-2009, 14:08
If I understand what you're wanting to do, this may be what you're looking for:
http://pmob.co.uk/pob/side-borders.htm

Also, here's another similar one:
http://www.builderau.com.au/program/css/soa/Create-a-double-gradation-background-with-CSS/0,339028392,339207226,00.htm

If you're building this for the learning experience, great. However, if this is going to be an active blog, why not use WordPress?