10 Replies - 940 Views - Last Post: 09 June 2012 - 02:36 PM

#1 Renovatio  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 27
  • Joined: 20-February 09

Noob seeking guidance while learning/making site

Posted 23 May 2012 - 02:48 PM

Alright. So I have made another topic previously though I haven't been able to edit my original posting to a more appropriate title.

I'm trying to make a basic site then as I learn more add more capabilities. I suppose my goal with this thread is to be able to post my questions along the way versus more threads. So here goes.

Currently I think I have the Header and Footers fixed in place and centered.

I'm now attempting to bring a photo gallery into the scene. So far I'm shooting for just 4 pictures. It'd be ideal to have one picture that you can view and then a slider/picture selection underneath to view above though that's beyond my grasp right now or so I feel.

I'm struggling getting these 4 pictures to sit within my content borders or being able to get 4 pictures then another row starts or is that even possible?

Current coding can be found here. Link

Is This A Good Question/Topic? 0
  • +

Replies To: Noob seeking guidance while learning/making site

#2 floppyspace  Icon User is offline

  • D.I.C Regular

Reputation: 48
  • View blog
  • Posts: 254
  • Joined: 04-February 10

Re: Noob seeking guidance while learning/making site

Posted 23 May 2012 - 07:42 PM

Quote

Currently I think I have the Header and Footers fixed in place and centered.


You only use
float:left;


this may cause unwanted results when you actually run it in a browser but I am not familiar with jsfiddle, and nothing in your css says to have it centered.

text-align:center;


will center your text.

I think your page is a little wide perhaps narrowing it down a little.

Quote

I'm now attempting to bring a photo gallery into the scene. So far I'm shooting for just 4 pictures. It'd be ideal to have one picture that you can view and then a slider/picture selection underneath to view above though that's beyond my grasp right now or so I feel.


No need to reinvent the wheel, if it is above you at the moment use one that is available and learn to edit it to your needs.There are plenty that are available and you will find it may fix the problem with how they are displaying.


some more really good sliders available can be found here, but selection is up to you on which one you want to use (most have instructions and are easy to implement).

One problem you may be having with displaying 4 to a line is that your images are too large and because you have defined a width it will go to the next line.

Also on another note you declare a min width - increase it to about 1000px and it should let you have the 4 per line as you are after.

good luck :)

This post has been edited by floppyspace: 23 May 2012 - 07:48 PM

Was This Post Helpful? 0
  • +
  • -

#3 Renovatio  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 27
  • Joined: 20-February 09

Re: Noob seeking guidance while learning/making site

Posted 23 May 2012 - 09:49 PM

Thanks for all the critiques, suggestions and info floppyspace.

For resolution I'm probably going to go 1024x768 as it looks like it's the most common resolution right now? Maybe I'll adjust the resolution more along this learning journey when I understand more of what it could affect. Right now it's another one of the multitude of selectors (?) I can change/modify.

For the web gallery, I thank you for all of that information as I am making some progress on it though still working towards success. I got the basic 4 images to work with your pointers.

I'm going onwards to try to get one of the jquery galleries to work. Below are the links to the one I chose along with the beginner's guide I'm following for it.
Gallery
Beginner Guide

I'm getting all the way through with the jquery scripting running minus the gallery actually finding the images. That's where I'm at now as I'm experimenting with where the images should be located for this thing/script/jquery to find it.

I'll update if I get it running correctly though in the meantime this is the code as it is when I finish the guide it has though after testing it shows an empty page.

When going through the guide I do get it to display the text "galleria works" though later on it doesn't work. I figure I must have missed something. I do like this guide as it explains this code that I don't fully understand yet along with nice step by step guide. :)
The HTML
<!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>Untitled Document</title>
<link href="styles/stylez.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script src="galleria/galleria-1.2.7.min.js"></script>
</head>
<body>
<div id="content">
  <div id="galleria">
        <img src="images/image1.jpg" />
        <img src="images/image2.jpg" />
        <img src="images/image3.jpg" />
  </div>
	<script>
	Galleria.loadTheme('galleria/themes/classic/galleria.classic.min.js');
	Galleria.run('#galleria');
	</script>
</div>
   
</body>
</html>
​

stylez (spelled incorrectly on purpose for my own reasons)
@charset "utf-8";
@charset "utf-8";
body {
    background-color: #CCCCCC;
}
ul li {
  float:left;
  margin-left:1em;
  margin-bottom:1em;
  width: 173px;
  height: 200px; 
  list-style-type:none;
  /*these were previously under css li*/
  list-style-type: none;
  display: inline;
  /*these were previously under css ul*/
  padding: 0px;
}

#header {
    float:left;
    padding:15px 0;
    width:100%;
    background-color: #0033FF;
}
#content {
    height: 100%;
    overflow: auto;
    background-color: #CCCCCC;
}
#footer {
    float:left;
    padding:15px 0;
    width:100%;
    background-color: #CC9900;
}
.wrap {
    position:relative;
    margin:0 auto;
    /*replace 900px with whatever width is appropriate*/
    width:1000px;
}
​
#galleria {
	height: 500px;
	width: 500px;
}



Thanks again. Much appreciated!

This post has been edited by Renovatio: 23 May 2012 - 10:00 PM

Was This Post Helpful? 0
  • +
  • -

#4 Renovatio  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 27
  • Joined: 20-February 09

Re: Noob seeking guidance while learning/making site

Posted 23 May 2012 - 10:08 PM

I guess I can't edit my post multiple times to update my code as I go.

Anyways. I simplified my code as best I could as I figured maybe that was the cause of my grief. I haven't been able to get it running afterwards but here's my current coding as bare minimum as I can get, or so I think.

HTML
<!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>Untitled Document</title>
<link href="styles/stylez.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script src="galleria/galleria-1.2.7.min.js"></script>
</head>
<body>
<div id="content">
  <div id="galleria">
        <img src="images/image1.jpg" />
        <img src="images/image2.jpg" />
        <img src="images/image3.jpg" />
  </div>
  <script>
  	Galleria.loadTheme('galleria/themes/classic/galleria.classic.min.js');
    Galleria.run('#galleria');
  </script>
</div>
   
</body>
</html>
​


CSS
@charset "utf-8";
@charset "utf-8";
body {
    background-color: #CCCCCC;
}



Scratch that. I didn't have my css box dimensions setup at all so after doing that...voila. /facepalm.

Though if I wanted to resize the whole galeria thingamajig...is it possible or how would I approach that. Besides with knowledge and a tin foil hat & aspirin. :P
-Scratch that. After fiddling with the galleria div sizing enough I found it auto rescales. Amazing! Is there anything negative or something that might crash as a result of this?

Thanks again to the community. :bananaman:

This post has been edited by Renovatio: 23 May 2012 - 10:22 PM

Was This Post Helpful? 0
  • +
  • -

#5 floppyspace  Icon User is offline

  • D.I.C Regular

Reputation: 48
  • View blog
  • Posts: 254
  • Joined: 04-February 10

Re: Noob seeking guidance while learning/making site

Posted 23 May 2012 - 10:58 PM

Looks like your making progress, I recall using galleria on a site a while ago and did not have any issues with it (except for some minor lightbox qwuerks).

What are you using to program in (notepad,notepad++)?

This post has been edited by floppyspace: 23 May 2012 - 10:59 PM

Was This Post Helpful? 0
  • +
  • -

#6 Renovatio  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 27
  • Joined: 20-February 09

Re: Noob seeking guidance while learning/making site

Posted 23 May 2012 - 11:36 PM

Dreamweaver cs3 on my personal desktop & laptop.

I'm using the jsfiddle site as where I work we cannot bring in/out anything so since I work 11hr shifts using that site allows me to work on this while being able to access my files on my computers. Idk of a portable tool that I could download/has a small size footprint that I could use at work to organize/manage the css/html like dreamweaver does.

Otherwise I use notepad since its installed on the work pcs. I'm not the IT department so I cannot install anything to the pcs either to make things more convenient.

This post has been edited by Renovatio: 23 May 2012 - 11:37 PM

Was This Post Helpful? 0
  • +
  • -

#7 Renovatio  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 27
  • Joined: 20-February 09

Re: Noob seeking guidance while learning/making site

Posted 24 May 2012 - 10:16 AM

Alright so I managed to get couple pages together and working on linking them together. Found out how to use Dreamweaver templates to update the index.dwt (template file) to affect all the pages so some of my work is cut out for me. I'm honestly glad to have found this.

Now then when viewing any of my pages it's rather scrunched up together. I know that I set my content div width & height though there is still empty space on the bottom and right which I haven't been able to get to go away.

I'd update as I go though it seems like I can only edit a post a limited number of times.

HTML Code
<!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>Untitled Document</title>

<link href="../styles/styles.css" rel="stylesheet" type="text/css" />

</head>



<body>

<div id="content">

  <div id="header">

    <div class="wrap">

      <p><a href="index.html" title="Home">Home</a> | <a href="Portfolio.html" title="Portfolio">Portfolio</a> | <a href="Resume.html" title="Resume">Resume</a> | <a href="About.html" title="About">About Artist</a> | </p>

    </div>

  </div>

  <h1>h1 here</h1>

  <p>filler here</p>

  <img src="../images/Flamethrower.jpg" alt="Flamethrower 3D Model" />

  <img src="../images/flamethrowerwire2.jpg" alt="Flamethrower 3D Model Wireframe" />

  <div id="footer">

    <div class="wrap">

      <p><a href="index.html" title="Home">Home</a> | <a href="Portfolio.html" title="Portfolio">Portfolio</a> | <a href="Resume.html" title="Resume">Resume</a> | <a href="About.html" title="About">About Artist</a> | </p>

    </div>

    <!--end of wrap div -->

  </div>

</div>

</body>

</html>

​


CSS Code
@charset "utf-8";
@charset "utf-8";
body {

}
ul {
    padding: 0px;
}
li {
    list-style-type: none;
    display: inline;
}
#header {
	float:left;
	padding:15px 0;
	width:100%;
	background-color: #FF9900;
}
#content {
	height: 100%;
	overflow: auto;
	background-color: #CCCCCC;
	width: 800px;
	height: 600px;
}
#footer {
	float:left;
	width:100%;
	background-color: #FF9900;
	padding-top: 15px;
	padding-right: 0;
	padding-bottom: 15px;
	padding-left: 0;
}
.wrap {
	position:relative;
	margin:0 auto;
	/*replace 900px with your width*/
    width:800px;
}
​

This post has been edited by Renovatio: 24 May 2012 - 10:17 AM

Was This Post Helpful? 0
  • +
  • -

#8 floppyspace  Icon User is offline

  • D.I.C Regular

Reputation: 48
  • View blog
  • Posts: 254
  • Joined: 04-February 10

Re: Noob seeking guidance while learning/making site

Posted 24 May 2012 - 08:19 PM

hello again,

ok first you have put your header and footer inside the content division so it is doing what you have asked, making it all fit in a little box :P, take them and place outside content division.

so:
<div id="header">

    <div class="wrap">

      <p><a href="index.html" title="Home">Home</a> | <a href="Portfolio.html" title="Portfolio">Portfolio</a> | <a href="Resume.html" title="Resume">Resume</a> | <a href="About.html" title="About">About Artist</a> | </p>

    </div>

  </div>
<body>

<div id="content">



  <h1>h1 here</h1>

  <p>filler here</p>

  <img src="../images/Flamethrower.jpg" alt="Flamethrower 3D Model" />

  <img src="../images/flamethrowerwire2.jpg" alt="Flamethrower 3D Model Wireframe" />



    <!--end of wrap div -->

  </div>

</div>
  <div id="footer">

    <div class="wrap">

      <p><a href="index.html" title="Home">Home</a> | <a href="Portfolio.html" title="Portfolio">Portfolio</a> | <a href="Resume.html" title="Resume">Resume</a> | <a href="About.html" title="About">About Artist</a> | </p>

    </div>
</body>



May need to fiddle with it a little as it is a cut and paste edit job.

Next you will find it will be limited in how wide because your .wrap division & content division are set to 800px width. - remove these and probably add a
text-align :center;
to the .wrap and content division and see if it makes you some headway :),not knowing what the final product is that you are chasing I can only assist as you ask, however look at adding a sidebar division ; )

If it helps do not forget to thank ;)

This post has been edited by floppyspace: 24 May 2012 - 08:20 PM

Was This Post Helpful? 1
  • +
  • -

#9 Renovatio  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 27
  • Joined: 20-February 09

Re: Noob seeking guidance while learning/making site

Posted 24 May 2012 - 08:52 PM

Thank you yet again Floppyspace for the critiques and recommendations.

I'm going for something similar to the portfolio I'm about to link. Please don't get me wrong, not going for a duplicate/copying this artist's site, just like the majority of it. For example I like that it's simple and to the point, everything that could be extra isn't there like sidebars. Going for a bar at the top and bottom with navigation in at least one if not both of these, the header + footer. Don't know how the download buttons function unless it's an image that is put in place with the url for the download added to the coding for the specific image/button. I'll cross that bridge when I find it. Site

I have a question in regards to video as I kinda get what this documentation is talking about. Ok I fibbed, I don't get it lol, that's why I'm here. :P

http://galleria.io/d...ed/quick_start/
http://galleria.io/d...ptions/youtube/

Specifically I'm trying to understand the following with the coding it has below on the quickstart link. I didn't realize until I dug deeper into the documentation that it was possible to link in youtube videos. So my question then would be would it be possible to get one youtube video to show other videos by artist and the normal function as if it was watched on youtube or no. Sorry for just asking asking and asking away like an unappreciative child. :splat:
Adding video from YouTube, Vimeo or Dailymotion is easy - just link an image to the video page. If you want Galleria to fetch a thumbnail, add an element with the class ‘video’ instead of a thumbnail:


As far as thanking you for so much assistance, is that primarily done via voting the post up? I chuckled a bit...asking advice on how to give thanks. /facepalm

This post has been edited by Renovatio: 24 May 2012 - 09:03 PM

Was This Post Helpful? 0
  • +
  • -

#10 floppyspace  Icon User is offline

  • D.I.C Regular

Reputation: 48
  • View blog
  • Posts: 254
  • Joined: 04-February 10

Re: Noob seeking guidance while learning/making site

Posted 25 May 2012 - 07:14 PM

Quote

I'm going for something similar to the portfolio I'm about to link. Please don't get me wrong, not going for a duplicate/copying this artist's site, just like the majority of it. For example I like that it's simple and to the point, everything that could be extra isn't there like sidebars. Going for a bar at the top and bottom with navigation in at least one if not both of these, the header + footer. Don't know how the download buttons function unless it's an image that is put in place with the url for the download added to the coding for the specific image/button. I'll cross that bridge when I find it. Site


It looks good, it uses piecemaker which is a cool xml gallery.

Quote

Specifically I'm trying to understand the following with the coding it has below on the quickstart link. I didn't realize until I dug deeper into the documentation that it was possible to link in youtube videos. So my question then would be would it be possible to get one youtube video to show other videos by artist and the normal function as if it was watched on youtube or no.


Your looking in the right area, the link to the quickstart says:
<div id="galleria">
    <a href="http://www.youtube.com/watch?v=GCZrz8siv4Q"><img src="/img/thumb1.jpg"></a>
    <a href="http://vimeo.com/12309423"><span class="video">Watch this on Vimeo!</span></a>
</div>



So from your previous post this needs to be altered(see below), although you may find it will not like been a scrolling gallery with youtubes but try and see, you may need to add an autoplay=1 if you want it to start without pressing play, also if it has a timer on the gallery to change images or similar you may need to change this.

 <div id="galleria">

        <img src="images/image1.jpg" />
        <img src="images/image2.jpg" />
        <img src="images/image3.jpg" />

  </div>



Also when it refers to the video class, this is some code written that will identify what to do with the given youtube( make it the right size, perhaps have it automatically start or remove the timer function so the video will play properly without undue effects,and so on).

Web development class.

As far as thanking you for so much assistance, is that primarily done via voting the post up?

Roger that mate, if it is helping thank people, it does one of 2 things:

1. Lets people know that it is offering guidance to what you are trying to achieve.
2. It can help stimulate more activity from other forum members :whistling: , however do not go overboard :P .

Cheers
floppy
Was This Post Helpful? 0
  • +
  • -

#11 Renovatio  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 27
  • Joined: 20-February 09

Re: Noob seeking guidance while learning/making site

Posted 09 June 2012 - 02:36 PM

First off. Apologies on the long turn around time between replies, was finishing up finals week, it kicked my ass on sleep, point being I was focuse on that vs replying to get everything done.

I had a free web hosting site recommended to me, I'm currently using it just so I can make changes then see it live then troubleshoot as needed. Will see if it's advantageous or if I wasted time/something by doing this.
Host: www.000webhost.com/
Site url: http://williamleinin....net/index.html

Making progress. I don't know/haven't decided on the long term status I will have with the host but for now servers my purpose since it's a WIP.

I will look over the changes you recommended in your post after work.

Thanks yet again, have a great day.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1