# [SOLVED] web site smooshes



## silvergoat (Feb 20, 2010)

I've got a web site on my computer and I noticed while working on it, that when I minimize the window, rather than covering less area, some components compress together and although the size of the window does get smaller, the actual contents of the page get closer so that it still fits.

Not all of the parts move, however- for example: The logo on the top right placed in absolute position. The text that I placed below the header but above the body also doesn't move and just overlaps the parts that do move. The menu bar and the inner body container all adjust to fit on the page up to a point.....

Actually the more I mess with it, it seems that the adustment is only from left to right.

My browser is resized and the body or main area shrink to fit sideways.

I'm not sure I understand what function makes it do that, but I would like to make it so that it doesn't shrink to the point where things overlap.

The site is not using a CMS and is more or so just me learning it- I did post here this week, but I've decided to hire a professional for the important site--- this one is for fun and learning.


----------



## Laxer (Dec 28, 2010)

*Re: web site smooshes*

Check your widths, and margins.

Margins will control the spacing between things, and how they sit on the page. using attributes like "auto" will center then in the browser.

The next thing to check would be your widths. if you want a fixed non dynamic website everything should be in px/em not in %.

Try adding "text-align:justify;" to your content css, this should stop any potential overlapping as well as make the content more eye friendly.


----------



## silvergoat (Feb 20, 2010)

*Re: web site smooshes*



Laxer said:


> Check your widths, and margins.
> 
> Margins will control the spacing between things, and how they sit on the page. using attributes like "auto" will center then in the browser.
> 
> ...


Hi Laxer-

First of all, I want to thank you for taking the time to help me out. You helped me the last time, and I don't want you to think your help is unappreciated.

I was able to fix some of them by changing the % in my logo to a relative position and adjusting from there. (Some of my earlier problems came from having the 'item' in the wrong section of the page...body, main, and so on). I also changed some things from absolute to relative and messed with the border option.

I'll try using the text-align:justify; Most of the time I spend learning is figuring out how these css lines can be manipulated with the large number of commands. At this point I still don't really know how a nice custom website can be styled with css, considering the very simple changes I've been able to make.


Question-

How is the div id=x different from class identifiers?

If you have some good sources or a good direction from which I should start- please let me know. I really am trying to learn this stuff.....not because I want to do this, but because I am stubborn as heck and don't like to be defeated.


----------



## Laxer (Dec 28, 2010)

*Re: web site smooshes*

The answer to your question, IDs should only be used once per page.

Classes can be used on as many elements as needed.

Most of my knowledge has been self taught, I took the entry level webdesign class at my highschool and was skipped all the way up to the web-support team half way through the term. I ended up going back and taking the highest level web class the next year and learned little besides a few structure and design things.


In my opinion the best way to learn is to dive in. Find a site you like online and try to recreate the template.

If all else fails W3Cschool is a good resource: HTML Tutorial


----------



## silvergoat (Feb 20, 2010)

okay-- I used id for every different section of text I needed to change formatting for....

I'll go back and swap in classes for those instead- I'll read into what a class is and how to use it since I haven't used any class items yet. What I learned from div id is that it doesn't matter where in the css file they go (at least I didn't see anything go bad, I just piled them at the bottom) so I hope the same rules apply for class...

That source you listed looks to have a lot of information. After this little experiment, I will probably try to make one from scratch using the tutorial.


----------



## Laxer (Dec 28, 2010)

A class is very similar to a div, at least for how you call and define it.

Here is an example:


```
<style>
.bold{
font-weight:bold;
size:12px;
color:#000000;
}
</style>
<span class="bold">BOLDED TEXT</span>
```
If you want to link to your page or post your source i will gladly look at it and make suggestions :grin:


----------



## silvergoat (Feb 20, 2010)

Ok-

I've zipped the three common files into a folder.

1 is the css which I tried to include notes
1 is the basic layout which is used as the template for all the pages
1 is the home page which has a lot of the text I was testing with

It is based off a template from webmatrix so almost none of it is my work except for the random text and stuff I've annotated. Most of it is slightly modified in the areas that affect appearance of css entries, but not in ways that change the overall styling. 

Also, it is in cshtml (which I still haven't been able to learn much the differences between that and other formats), but I figured I can still continue and practice off of it because it allows me to view my work instantly with only a refresh and no host to worry about settings...also my host responded that he will be offering IIS7 support in less than a month, and even offered to fast track me with some limitations until everything was fully operational.

Don't mind the random text in the home page... I needed filler and I tried to ad lib something coherent, but I could not come up with enough text to fill the area so I just used keyboard mashing.


----------



## Laxer (Dec 28, 2010)

I will look at it probably tomorrow or maybe later tonight.

Aside from the template is there a reason you are using .cshtml?

If you are not doing any c# scripting i would suggest just sticking with html/css

If you wish i can quickly convert all your files for you and reattach them tomorrow.


----------



## silvergoat (Feb 20, 2010)

Don't sweat it buddy-

I'm enjoying trying to figure this all out. I know I ask a lot of questions here, but I spend a good amount of time trying to figure this out because little things like just getting an image in the right spot have taken me up to hours to figure out.

As far as the offer to convert- If you tell me how I can do the same, I would add that to the list of things I need to become familiar with and do it myself. If there is restructuring of some sort, I can probably apply the changes to my other pages by comparing the structures. I appreciate the offer, but do not want anyone to spend more time than they have to on my stuff.

In full disclosure-

I was originally trying to build my website because I wanted to open up a repair service and custom build shop. I figured that I could only, at best, do a mediocre job with the website myself so I have someone that is going to build the site for when/if we open our little shop. This is the template I was going to use myself, but I found an unbelievably good deal on a web designer, who will be designing my site. 

What I'm doing right now is only because it was so interesting once I got past the intimidating perspective when you look at a site that has been created and try to take it all in at once.

If you step back and approach it from the side of it being 'modules' that are consctructed one at a time and added into a framework- which is becoming more apparent, then I'm not really terrified of it as much as I am interested in figuring it out.

I always ask for help here because the basics stem from programming which is something that just wasn't as common when I was in school. Take your time, and I look forward to hearing from you tomorrow.

Thanks,
Ozzie


----------



## Laxer (Dec 28, 2010)

I recreated your template for you here:


```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Template!</title>
    <link href="/Styles/Site.css" rel="stylesheet" type="text/css" />
    <link REL="SHORTCUT ICON" HREF="/favicon.ico">
</head>
 
    
    <body>
        <div id="page">
            <div id="header">
                <p class="site-title">Main Title</p></div><br/>
            <div id="h2">
                <p class="site-titles">Subtitle</p>             
            </div>  
                    <div id="h3">
                    <h3>Title2</h3>
                    </div>   
                    <!--<div id="h6">
                    <h3>@Title3</h3>
                    </div>
                    <div id="h7">
                    <h3>@Title4</h3>
                    </div> This is left as an example for other headings.-->
            
            <div class="logo">
        <a href="/index.html"><img src="/Images/logo.jpg" width="400" height="150" alt="Logo" style="float:none; border: 0px"></a>
            </div>
                
                
                
                <ul id="menu">
                    <li><a href="/About">About</a></li>
                    <li><a href="/FAQ">List</a></li>
                    <li><a href="/Contact">Contact Us</a></li>
                    <li><a href="/Espanol">Espanol</a></li>
                </ul>
            </div>
            

            <div id="main">
                <div id="content">
					<p>All of your content Goes here!</p>              
                </div>
                <div id="footer">
                    Created: Date can go here!
                </div>
            </div>
        </div>
    </body>
</html>
```
I would open up the template the click Save as and save it as the page you are creating.

You shouldn't need to edit your css, I would recommend recreating your index page using the template above.

To view it simply right click "index.html" and open it with your web browser 


Also, Please note that the <div>s around your heading tags (<h#>) are essentially useless and unnecessary you could easily define each h# tag to have the same attributes.


----------



## silvergoat (Feb 20, 2010)

Thanks-

I've been toying around with your suggestions-- some cleaning up to do, but it will help me ease into creating from scratch based off the template you provided.

I noticed that it's xhtml above- Any restrictions or things it will not work without or will not be compatible with?


----------



## Laxer (Dec 28, 2010)

Xhtml and html are very similar, xhtml just has different tags and more of a criteria to meet.

here is a good read: XHTML vs HTML

If you have any questions feel free to ask.


----------

