11 Replies - 662 Views - Last Post: 03 September 2013 - 02:32 PM

#1 l2g2h007  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 22
  • Joined: 26-August 13

Making of first website

Posted 27 August 2013 - 02:16 PM

First and foremost I am here to learn and I understand Dream.In.Code is not here to do work for me or to hold my hand, which is great, I am looking to ask questions or get direction from the more knowledgeable. I also hope I have posted in the appropriate area. I feel a brief explanation of what brings me here is proper as I'm asking others to help me without knowing me or me having done a favor beforehand.

I am a 23 yr/o recently unemployed call center male looking to learn about websites, design etc. Hopefully I can be good at something other than helping people over the phone as it's the least gratifying line of work, one person after another with issues though nobody says thank you even for your time of day. Not even managers. I feel much better not even having the job and the environment around me though now it's time to learn and get another job while learning. Enough about me.

I found the following site as a free hosting option, perhaps there is something better though I can at least upload and get started here.
http://www.000webhost.com/

I am linking my current site though due to the situation I will be working on it going forward, learning one grand canyon or leap of faith at a time.

http://williamleininger.net16.net/

My goal: A clean cut basic yet effective website.
Dream mapping of site: 4 pages; home, about me, contact me, resume/portfolio.
Dream: I will have a homepage with a background image or color to set the mood of relaxing. I like the idea of a clear blue sky and then my initials in it.

The navigation bar at the top will by default on each page be showing, I will have my email displayed in the center with two nav options on each side. When the email is clicked it will give the user their inbox opening up a blank email to be sent to my email.

Perhaps it's possible. I hope to learn on my journey if nothing else.

Currently I am at work to make a list for my navigation options that are in a horizontal line in the header div with a main div following it to later have a background image.

Is This A Good Question/Topic? 0
  • +

Replies To: Making of first website

#2 modi123_1  Icon User is offline

  • Suitor #2
  • member icon



Reputation: 8897
  • View blog
  • Posts: 33,369
  • Joined: 12-June 08

Re: Making of first website

Posted 27 August 2013 - 02:19 PM

Okay.. are you asking for people to review your site, just share you project, or what exactly?
Was This Post Helpful? 0
  • +
  • -

#3 l2g2h007  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 22
  • Joined: 26-August 13

Re: Making of first website

Posted 27 August 2013 - 02:26 PM

Thank you for your time and consideration in simply taking time out of your day's activities to read my post.

I'm asking for help along the way. Right now I'm trying to figure out how to get the second Div "main" to sit directly under the header.

Sorry if I was not clear. Is there an edit button for the original post?
Was This Post Helpful? 0
  • +
  • -

#4 l2g2h007  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 22
  • Joined: 26-August 13

Re: Making of first website

Posted 27 August 2013 - 02:49 PM

HTML
<!DOCTYPE html>
<html>
	<head>
		<link type="text/css" rel="stylesheet" href="styles/styles.css"/>
		<title>William Leininger</title>
	</head>
<body>
    <div id="header">
    	<ul>
			<li id="fancy">home</li>        
			<li id="fancy">about</li>
            <li id="fancy">William Leininger - <a href="mailto:williamrleininger@gmail.com">williamrleininger@gmail.com</a>
        	<li id="fancy">resume</li>
            <li id="fancy">portfolio</li>
		</ul>
	</div>
    <div id="main">
        <h3>intro</h3>
        <p>i am william leininger, graphic designer</p>
	</div>    
</body>
</html>
<!-- Hosting24 Analytics Code -->
<script type="text/javascript" src="http://stats.hosting24.com/count.php"></script>
<!-- End Of Analytics Code -->




css
#header{
	z-index:1;
	display:block;
    position:fixed;
    background-color:#2790D8;
    width:100%;
    height:7%;
    text-align:center;
    margin: 0px;
}

ul{
	margin: 0px;
	padding: 0px;
	list-style-type: none;
	text-decoration: none;
	}

#fancy{
	display:inline;
	}

#main{
	clear:both;
	display:block;
	}


Was This Post Helpful? 0
  • +
  • -

#5 l2g2h007  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 22
  • Joined: 26-August 13

Re: Making of first website

Posted 27 August 2013 - 03:16 PM

Issue: Having one div have it's last horizontal line and then have the next div start immediately after them so there is no overlap, no stacking like I'm currently having.

Tried:
Did some research, found using z-index might make a difference
-Tried setting first div to an ID #header then setting it to z-index: 1 then the second div to another ID to #main with z-index: 2
=didn't see a difference
-tried reversing each class' z-index
=no change
Was This Post Helpful? 0
  • +
  • -

#6 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3177
  • View blog
  • Posts: 10,639
  • Joined: 12-December 12

Re: Making of first website

Posted 27 August 2013 - 03:27 PM

I assume that you intend to use fixed positioning for the header so that it remains fixed, and visible, when the page is scrolled? In which case:

#header{
	/*z-index:1;*/
	/*display:block;*/
    position:fixed;
    background-color:#2790D8;
    width:100%;
    height: 50px;
    top: 0;
    text-align:center;
    margin: 0px;
}

  • Use top: 0 to specifically fix it at the top of the viewport.
  • Don't use z-index until it becomes necessary.
  • DIVs are display: block by default.
  • I would give it a specific pixel-height, rather than a percentage. Percentages for this can be tricky to work with, and percentage-heights in particular don't behave as you might expect.


Use margin-top for the main content, giving it the same 50px value as the header.

#main{
	/*z-index:2;*/
/*	clear:both;
	display:block;*/
    margin-top: 50px;
}

Again, ignore z-index initially, clear only applies to floats and display: block is the default.

This post has been edited by andrewsw: 27 August 2013 - 03:29 PM

Was This Post Helpful? 1
  • +
  • -

#7 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3177
  • View blog
  • Posts: 10,639
  • Joined: 12-December 12

Re: Making of first website

Posted 27 August 2013 - 03:39 PM

With z-index, if main and header overlapped then

#header {
    z-index: -1;
}

would cause the header to be behind main, but it is unusual to do this as the header will be obscured by the page content when scrolled.
Was This Post Helpful? 1
  • +
  • -

#8 l2g2h007  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 22
  • Joined: 26-August 13

Re: Making of first website

Posted 27 August 2013 - 03:47 PM

View Postandrewsw, on 27 August 2013 - 03:27 PM, said:

I assume that you intend to use fixed positioning for the header so that it remains fixed, and visible, when the page is scrolled? In which case:

#header{
	/*z-index:1;*/
	/*display:block;*/
    position:fixed;
    background-color:#2790D8;
    width:100%;
    height: 50px;
    top: 0;
    text-align:center;
    margin: 0px;
}

  • Use top: 0 to specifically fix it at the top of the viewport.
  • Don't use z-index until it becomes necessary.
  • DIVs are display: block by default.
  • I would give it a specific pixel-height, rather than a percentage. Percentages for this can be tricky to work with, and percentage-heights in particular don't behave as you might expect.


Use margin-top for the main content, giving it the same 50px value as the header.

#main{
	/*z-index:2;*/
/*	clear:both;
	display:block;*/
    margin-top: 50px;
}

Again, ignore z-index initially, clear only applies to floats and display: block is the default.


Thank you very much andrewsw for your critiques, it has resulted in a fix for my overlapping DIVs!

As I read through your explaining post I came to realize I had not set any height or margin offset for #main. Needless to say I went ahead and tried playing with the percentages, heedless to your warnings, to discover that indeed percentage heights don't work as expected. They likely make sense with far more attention to detail and/or understanding of attributes at play. Thank you again.
Was This Post Helpful? 0
  • +
  • -

#9 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3177
  • View blog
  • Posts: 10,639
  • Joined: 12-December 12

Re: Making of first website

Posted 27 August 2013 - 04:01 PM

You are quite welcome :bigsmile:

When replying there is a larger Reply button a little further down the page, try not to click 'Quote + Reply' unless there is something specific that you wish to refer to.
Was This Post Helpful? 0
  • +
  • -

#10 l2g2h007  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 22
  • Joined: 26-August 13

Re: Making of first website

Posted 28 August 2013 - 12:56 AM

What I'm now working to do is to have the main content section of the page fill the vertical space of the page. I can set the height of the DIV manually though it would only allow it to then be of one size. I suppose this will also culminate in working towards multiple resolution sizes and become a bigger project.

So far:
set heights manually
=only allows site to be of one size versus filling any available vertical space left after the header.

setting the heights of the body then the content container to 100%
source: http://stackoverflow...ays-full-screen
=no noticeable change. Possibly didn't set css correctly?

Could I get some insight or pointed in the right direction? Thank you much

html
<!DOCTYPE html>
<html>
	<head>
		<link type="text/css" rel="stylesheet" href="styles/styles.css"/>
		<title>William Leininger</title>
	</head>
<body>
	<div id="contentcontainer">
    	<div id="header">
    		<ul>
				<li id="fancy"><a href="index.html">home</a></li>        
				<li id="fancy"><a href="about.html">about</a></li>
            	<li id="fancy">William Leininger - <a href="mailto:williamrleininger@gmail.com">williamrleininger@gmail.com</a></li>
        		<li id="fancy">resume</li>
            	<li id="fancy">portfolio</li>
			</ul>
		</div>
    	<div id="main">
        	<h3>intro</h3>
        	<p>i am william leininger, graphic designer</p>
		</div>
</div
></body>
</html>
<!-- Hosting24 Analytics Code -->
<script type="text/javascript" src="http://stats.hosting24.com/count.php"></script>
<!-- End Of Analytics Code -->



css
html, body{
	height: 100%;
}
content-container{
	min-height: 100%;
	overflow:auto;
}

#header{
    position:fixed;
    background-color:#2790D8;
    width:1300px;
    height:25px;
	top: 0;
	left: -10px;
    text-align:center;
    margin: 0px;
}

#main{
	background-color:#FF0000;
	margin-top: 25px;
	}
	
ul{
	margin: 0px;
	padding: 0px;
	list-style-type: none;
	text-decoration: none;
	}

#fancy{
	display:inline;
	}
	
a:hover{
	text-decoration:none;
}

#email{
    float:right;
	margin-right: 5px;
	padding-top: 5px;
	font-size: 16px;
	font-family: Verdana, sans-serif;
	color: #ffffff;
}


Was This Post Helpful? 0
  • +
  • -

#11 l2g2h007  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 22
  • Joined: 26-August 13

Re: Making of first website

Posted 29 August 2013 - 02:19 PM

I went a step further, I set all the parent elements of #header & #main to

position:absolute;
top:0;
bottom:0;

Css
html, body{
	position:absolute;
	top:0;
	bottom:0;
}
content-container{
	min-height: 100%;
	overflow:auto;
}

#header{
    position:fixed;
    background-color:#2790D8;
    width:1300px;
    height:25px;
	top: 0;
	left: -10px;
    text-align:center;
    margin: 0px;
}

#main{
	background-color:#FF0000;
	margin-top: 25px;
	position:absolute;
	top:0;
	bottom:0;
	}
	
ul{
	margin: 0px;
	padding: 0px;
	list-style-type: none;
	text-decoration: none;
	}

#fancy{
	display:inline;
	}
	
a:hover{
	text-decoration:none;
}

#email{
    float:right;
	margin-right: 5px;
	padding-top: 5px;
	font-size: 16px;
	font-family: Verdana, sans-serif;
	color: #ffffff;
}



So now I have more height automatically though it's very slender. Improvement! :)
Was This Post Helpful? 0
  • +
  • -

#12 l2g2h007  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 22
  • Joined: 26-August 13

Re: Making of first website

Posted 03 September 2013 - 02:32 PM

After researching for some time now I have found something that works though I don't fully understand the solution. I'm first going to post about the solution I found then what I found when attempting to use this.

Source: http://stackoverflow...ng-screen-space
poster: daniel on Jun 6 at 11:20 w/ the 10 mark next to the posting on the left

Instead of using tables in the markup, use could use css tables.

Markup

<body>    
    <div>hello </div>
    <div>there</div>
</body>
(Relevant) CSS

body
{
    display:table;
    width:100%;
}
div
{
    display:table-row;
}
div+ div
{
    height:100%;  
}
FIDDLE1 and FIDDLE2

Some advantages of this method are:

1) Less markup

2) Markup is more semantic than tables, because this is not tabular data.

3) Browser support is very good: IE8+, All modern browsers and mobile devices (caniuse)



Above I have attempted quoting the post in particular.

Works / Doesn't

Between the two above examples of what I've done in testing is, I've changed some CSS, in particular the first call to the div. I would think this would just bring attention to all divs not just the first so that is why I have wanted to change it to my class #header.
-when I change it to header it doesn't work right anymore
-when I leave it be it works as desired
+I'm reading now about tables to try to understand
++I've found that tables inherently have all cells in same table row, become the same height as the tallest, though this doesn't make sense as then how come the second div that becomes #main for the actual content is big versus the header being tiny
all cells in the same table row will become the same height as the tallest cell in said row.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1