6 replies [Last post]
jgresham
jgresham's picture
Offline
newbie
Last seen: 5 years 32 weeks ago
Timezone: GMT-5
Joined: 2014-04-15
Posts: 7
Points: 9

Hi,

I'm currently designing the following web-site: http://sb460training.org/
I'm quite certain content-wise, the site looks okay. Its by no means a great design, and there are
several aspects of it that I will agree is poor practice in general but for the most part the site
looks alright from a full-screen point of view.

jigsaw.w3.org/ tells me my CSS is level 3 verified with no mistakes either so I know nothing coding-wise
is broken.

The problem I'm having though is that I can't quite get any external style sheet to behave well with
some of my div classes. For example, the navigation side-bar does not shift any like it should when
an external style sheet with margin limitations is added. Also for some reason, my footer no longer
touches the bottom base of the navigation side-bar either.

I've toyed with this using different kinds of external style sheets but I get the same result.
I think I just need to modify the classes in the portion of my HTML, but I'm not sure what
changes would best suit this particular website.

And even when a style-sheet is linked and added in, all the content of the page (text, and images)
still scramble and rearranges to different areas anytime my browser window is minimized. I really think
this is just more of a "not using a style-sheet correctly" type of problem. The way I'm using some of the
"positions" in my code may be off or perhaps need to be removed altogether as well. I'm not sure.
And I doubt its a browser compatibility issue either.

Any help would be greatly appreciated. Thanks!

Header code is below:

SB 460

html, body {
margin: 0;
padding: 0px;
display: block;
height: 100%;
}
#wrapper {
width: 100%;
margin: 0 auto;
max-width: 2000px;
overflow: hidden;
}
#header {
height: 200px;
border-bottom-style: solid;
border-bottom-width: 5px;
border-bottom-color: #d3d3d3;
margin-bottom: 15px;
text-align: left;
}
#navigation {
position: absolute;
left: 0px;
top: 205px;
width: 220px;
height: 1050px;
background-color: #c1ddb5;
}
#content{
position: relative;
left: 240px;
overflow: hidden;
}
#innercontent1 {
position: relative;
width: 85%;
left: 15px;
}
#innercontent2 {
position: absolute;
top: 635px;
width: 65%;
left: 15px;
}
#innercontent3 {
position: relative;
bottom: 50px;
right: -900px;
}
#footer {
clear: both;
text-align: center;
margin: 0 auto;
width: 100%;
height: 75px;
overflow: hidden;
background-color: #88aae3;
}

helldog2004
helldog2004's picture
Offline
Enthusiast
Netherlands
Last seen: 3 years 18 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2014-03-02
Posts: 205
Points: 239

First of all I would like to

First of all I would like to help you with the big grey block overlapping some of your text.
A good way to do this is to change the following code inside your CSS:

#innercontent2 {
    position: absolute;
    top: 620px;
    width: 65%;
    left: 15px;
}

to something like this:

#innercontent2 {
    position: relative;
    /*top: 620px;*/
    width: 55%;
    left: 15px;
    float: left;
}

And then make your #innercontent3 something like this:

#innercontent3 {
    position: relative;
    bottom: 50px;
    float: left;
}

This will atleast make sure the both contents won't overlap your content, and still be aligned nicely at the bottom next to eachother.

Hope this helps you a bit to the next step.
Cheers,
Henk

Check Maximum Webdesign for your online solutions

jgresham
jgresham's picture
Offline
newbie
Last seen: 5 years 32 weeks ago
Timezone: GMT-5
Joined: 2014-04-15
Posts: 7
Points: 9

Alright

Thanks for giving me that modification. It definitely helps getting rid of the "position: absolute" tag.
The only part I'm hung up on is adding in the external style sheet so I can get all the content
into a center-aligned document on any size of monitor screen. Some of the people I am making this site for
have complained that when they minimize the window much of the content for that website overlaps one another, and they would like for me to get rid of that. It's fine on most monitors when it is put onto full-screen, but on some monitors that have more square-like dimensions the problem still exists and appears regardless if the browser window is minimized or put onto full-screen.

I know a style-sheet will likely fix this problem for me. But I'm not too sure how to add it in correctly.
Do you know what kind of javascript I would need to add to the CSS to get that working right?

I'm thinking adding in a very dark grey border style-sheet might work best. Something similar to what is shown on this other site: https://www.ttuhsc.edu/

If I can somehow add the style-sheet on that site to the http://sb460training.org site.
That would be great! I'm just not too sure how exactly I can get that to work right.

Thanks again for working with me on this post. I greatly appreciate it.

helldog2004
helldog2004's picture
Offline
Enthusiast
Netherlands
Last seen: 3 years 18 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2014-03-02
Posts: 205
Points: 239

Well the stylesheet they are

Well the stylesheet they are using is called: tier1.css.
But the problem is, they ofcourse gave everything in this website a certain ID or class to name them.
These ID's and classes are specified in their css file to adjust these in the website itself.

Yes, ofcourse if you realy want to try their css out you can add this piece of code between the head tags.
<link href="https://www.ttuhsc.edu/css/tier1.css" media="all" type="text/css" rel="stylesheet"></link>

Let us know if it works on your website, else I would suggest to create your own css file and make every hook work on your website.

For your information, I added the css file you asked me on my Firefox inspecor.
But the only thing this css file is editing is the background color of the center content box.

Check Maximum Webdesign for your online solutions

jgresham
jgresham's picture
Offline
newbie
Last seen: 5 years 32 weeks ago
Timezone: GMT-5
Joined: 2014-04-15
Posts: 7
Points: 9

Custom CSS

Yeah, I can see that it only edits the background color of the center content box like you said.
And I can certainly understand why many people just buy their own style-sheet off the Internet to get their website to run and work faster. I'm trying to avoid that route, but I haven't really quite created my own custom CSS file either so I'm certainly not an expert at doing that "styling" aspect of software design.

Seems like there is a very careful method to that madness to get it working right. I Googled this problem the other day, and I grew to learn that there are actually people out there who hold complete seminars over this particular topic because it seems that a bunch of people out there struggle with it like I am. That's what I feel like I need in order to solve this problem and learn how to get over this hump.

I'm just stuck on what I need to do coding-wise, and where to even start. Sad

jgresham
jgresham's picture
Offline
newbie
Last seen: 5 years 32 weeks ago
Timezone: GMT-5
Joined: 2014-04-15
Posts: 7
Points: 9

Here is a screenshot...

This is a screenshot of what I get when I enter in the link into the index.html file if this helps any.
Is this what you are getting as well?

I noticed that it still jumbles and overlaps everything too when the browser window is minimized which is what I'm trying to fix more than anything.

I just want the site to appear okay (full window or minimized) on any size of monitor and any Internet browser,
and figured adding in the style-sheet would be the right solution for that. Getting the custom CSS file hooked and made correctly though appears to be a complex work of art in itself though.

AttachmentSize
TWITR.jpg 461.16 KB
helldog2004
helldog2004's picture
Offline
Enthusiast
Netherlands
Last seen: 3 years 18 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2014-03-02
Posts: 205
Points: 239

Well yeah the colour scheme

Well yeah the colour scheme and everything is the same as what I got when adding this piece of code in the head section.

Although, whenever I watch your website with my monitor I only see your header partly and see text inside your content div disappear on my right side of the monitor.

Why don't you make these div's smaller in your own css file so it fits every sized screen?

Check Maximum Webdesign for your online solutions