Jump to content

gfx42

Members
 View Profile  See their activity

  • Posts

    16

  • Joined

  • Last visited

 Content Type 

Posts posted by gfx42

    My first website

    in Critiques

    Posted

    Maybe think about flexibility of the main content area if you have long copy. Eg. you have designed the main area as a fixed space - you will be always limited to a certain word count. I can see you use iframe on another page - technically iframes are sometimes not liked by by assessibility gurus as they stop book marking and produce horrid scroll bars.
    Thanks for the advice. The site was made out of boredom. I got an itch to learn basic html & css, and also thought it'd be cool to have a place I could showcase some images. I agree, a scaling/dynamic (or w/e) website would be cool. At the moment I'm done tinkering with the site.It was just something to do. cheers

    w3 school forums suggestions

    in Suggestions

    Posted

    * [sOLVED] option for threads*Search function - Is the search function broken? The search feature doesn't work for me. For example I can do a search for a known thread title or word in any given forum and it always comes back as no results.

    Clickable images

    in HTML/XHTML

    Posted · Edited by gfx42

    You never ended the <a> tag around the image. 
    <div class="logo"><a href="index.html"><img border="0"src="images/logo.png" width="248" height="40" alt="home"></div> <!--END of the LOGO div-->

    needs to be: 

    <div class="logo"><a href="index.html"><img border="0"src="images/logo.png" width="248" height="40" alt="home"></a></div> <!--END of the LOGO div-->

    Hey thanks alot <3 This is solved

    Clickable images

    in HTML/XHTML

    Posted · Edited by gfx42

    So I made my main site logo text a clicky to return to the index.html page.Cool.But, the 3 div containers (class="contentleft") under the logo are also clickable and return me to the index.html. Those images/div containers arent supposed to be a link of any sort atm. I can't figure out why they are even clickable in the first place. Any ideas would be appreciated. Visit http://gfx42.com to see what I mean. index.html

    <!DOCTYPE html><html><head><title>GFX42</title><link rel="stylesheet" type="text/css" href="default.css"/></head><body>  	<div class="container">	  	  <div class="header">		   <div class="nav">				<ul>				   <li><a href="blog.html">Blog</a></li>|				   <li><a href="aboutus.html">About</a></li>|				   <li><a href="portfolio.html">Portfolio</a></li>|				   <li><a href="gfxgallery.html">GFXGallery</a></li>|				   <li><a href="gfxrequest.html">GFXRequest</a></li>|				   <li><a href="donate.html">Donate</a></li>				</ul>	   </div> <!--END of the NAV div-->		   <div class="content"><h2>GFX42.COM</h2></div> <!--END of the CONTENT div-->	   <div class="logo"><a href="index.html"><img border="0"src="images/logo.png" width="248" height="40" alt="home"></div> <!--END of the LOGO div-->							  </div><!--END of the HEADER div-->		<div class="contentleft"></div> <!--END of the CONTENTLEFT div-->	<div class="contentleft"></div> <!--END of the CONTENTLEFT div-->	<div class="contentleft"></div> <!--END of the CONTENTLEFT div-->  	</div> <!--END of the CONTAINER div-->	  </body></html>

    default.css

    @charset "utf-8";/* CSS Document */body {background-color:#333;}.container {width:1012px;height:720px;margin:0 auto;margin-top:90px;background-color:#333;padding:5px;}.header {background-image:url(images/header.png);background-repeat:no-repeat;margin:0 auto;width:1012px;height:103px;padding-bottom:11px;margin-top:11px;}.nav {width:700px;height:10px;float:right;margin-top:-13px;margin-right:-26px;}.nav li {list-style:none;display:inline;padding:14px;}.nav li a{text-decoration:none;color:#fff;font-family:Arial, Helvetica, sans-serif;font-size:18px;}.nav a:visited {color:#fff;}.nav a:hover {color:#333;}.nav .activePage a {color: #333;} .logo {background-repeat:no-repeat;margin:0 auto;float:left;margin-top:30px;margin-left:42px;width:250px;height:40px;} .content {background-image:url(images/content.png);background-repeat:no-repeat;float:right;margin-top:45px;padding-right:5px;width:656px;height:657px;}.content h2 {color:#333;text-align:center;font-family:Arial, Helvetica, sans-serif;}.content h3 {color:#fff;text-align:left;font-family:Arial, Helvetica, sans-serif;}.content a {color:#36F;text-align:left;font-family:Arial, Helvetica, sans-serif; }.content li {list-style-type:none;font-family:Arial, Helvetica, sans-serif;color:#36F;padding: 3px;	margin: 15px;background-image: url(images/contentlistMarker.png);	background-repeat: no-repeat;	background-position: 0px -5px;	padding-left: 35px;}.content p {color:#fff;	font-family:Arial, Helvetica, sans-serif;}.content .wip {color:#FFF;font-family:Arial, Helvetica, sans-serif;text-align:center;}.contentleft {background-image:url(images/contentleft.png);background-repeat:no-repeat;float:left;padding-top:11px;width:340px;height:189px;}

    regards,david

    Navigation - a:active & a:focus

    in CSS

    Posted · Edited by gfx42

    Do you have a live link? If not, post your full code. You don't need to post each page. Just one (for example, your about us page) will do fine.
    http://gfx42.com current - default.css

    @charset "utf-8";/* CSS Document */body {background-color:#333;}.container {width:1012px;height:720px; margin:0 auto;margin-top:90px;background-color:#333;padding:5px;}.header {background-image:url(images/header.png);background-repeat:no-repeat;margin:0 auto;width:1012px;height:103px;padding-bottom:11px;margin-top:11px;}.nav {width:700px;height:10px;float:right;margin-top:-12px;margin-right:-26px;}.nav li {list-style:none;display:inline;padding:14px;}.nav li a{text-decoration:none;color:#fff;font-family:Arial, Helvetica, sans-serif;font-size:18px;} .nav a:visited {color:#fff; }.nav a:hover {color:#000;}.nav a:active {color:#0F0; }.nav a:focus {color:#C00; }.activePage a {color: #C00;} .logo {background-repeat:no-repeat;margin:0 auto;float:left;margin-top:30px;margin-left:42px;width:250px;height:40px;} .content {background-image:url(images/content.png);background-repeat:no-repeat;float:right;margin-top:45px;padding-right:5px;width:656px;height:657px;}.content h2 {color:#333;text-align:center;font-family:Arial, Helvetica, sans-serif;}.contentleft {background-image:url(images/contentleft.png);background-repeat:no-repeat;float:left;padding-top:11px;width:340px;height:189px;}

    Current - aboutus.html (as an example)

    <!DOCTYPE html><html><head><title>GFX42</title><link rel="stylesheet" type="text/css" href="default.css"/></head><body>  	<div class="container">	  	  <div class="header">		   <div class="nav">				<ul>				   <li><a href="blog.html">Blog</a></li>|				   <li class="activePage"><a href="aboutus.html">About Us</a></li>|				   <li><a href="portfolio.html">Portfolio</a></li>|				   <li><a href="gfxgallery.html">GFXGallery</a></li>|				   <li><a href="gfxrequest.html">GFXRequest</a></li>|				   <li><a href="donate.html">Donate</a></li>				</ul>	   </div> <!--END of the NAV div-->		 	   <div class="content"><h2>About GFX42</h2></div> <!--END of the CONTENT div-->									  <div class="logo"><a href="index.html"><img border="0"src="images/logo.png" width="248" height="40" alt="home">						  </div> <!--END of the LOGO div-->							  </div><!--END of the HEADER div-->		<div class="contentleft"></div> <!--END of the CONTENTLEFT div-->	<div class="contentleft"></div> <!--END of the CONTENTLEFT div-->	<div class="contentleft"></div> <!--END of the CONTENTLEFT div-->  	</div> <!--END of the CONTAINER div-->	  </body></html>

    Use an id ref instead, it will have a higher precedence over classes and pseudo class already applied, if you use a class you would have to apply nav class and place it below what you already have to give it a higher priority. id ref, can be placed anywhere, above, below already define pseudo class styling, it will always take precedence.
    ok i'll try this. Thankyou so much guys =P Edit: It's solved now guys. I used: 
    .nav .activePage a {color:#C00;}

    instead of 

    .activepage a {color:#C00;}

    Thanks alot for the help

    Navigation - a:active & a:focus

    in CSS

    Posted · Edited by gfx42

    Thanks for explaining. I went to each of my html pages and put in the class "activePage" for the corresponding page.Below is an example of my blog link being assigned the class. 

    <li class="activePage"><a href="blog.html">Blog</a></li>|<li><a href="aboutus.html">About Us</a></li>|<li><a href="portfolio.html">Portfolio</a></li>|<li><a href="gfxgallery.html">GFXGallery</a></li>|<li><a href="gfxrequest.html">GFXRequest</a></li>|<li><a href="donate.html">Donate</a></li>

    Then I went and put this into my css: 

    .activePage a {color: #C00;}

    Not working =/

    My first website

    in Critiques

    Posted

    It's true purpose will serve later on to showcase some of my image manipulation abilities if I actually get "good" at it. Cool speed art etc. As of now, the site is just a learning experience for me.I didn't need to host it to practice html & css, but thought it be cool to learn another process of web making. Aquiring a domain & hosting it, using ftp etc. At any rate thankyou for checking it out, glad you thought it was nice =D.

    My first website

    in Critiques

    Posted · Edited by gfx42

    So after getting addicted to Gimp & Photoshop almost a month ago, I figured it be cool to dabble in some actual web design.I started to learn basic html & css 4 days ago.I've created a static website for now.The content is lacking, it's basically just a skeleton template at the moment.But iam enjoying myself alot hand coding this template/site from scratch aswell as creating the images. GFX42.COM

    • Like 1

    Navigation - a:active & a:focus

    in CSS

    Posted · Edited by gfx42

    This is how I tried.I did this on all html pages.Mabey i'm just doing it wrong =/ One of my html pages as an example: 

    <li class='activePage'><a href="blog.html">Blog</a></li>|<li class='activePage'><a href="aboutus.html">About Us</a></li>|<li class='activePage'><a href="portfolio.html">Portfolio</a></li>|<li class='activePage'><a href="gfxgallery.html">GFXGallery</a></li>|<li class='activePage'><a href="gfxrequest.html">GFXRequest</a></li>|<li class='activePage'><a href="donate.html">Donate</a></li>

    Here's how I updated my css 

    .nav a:visited {color:#fff;}.nav a:hover {color:#000;}.activepage a:active {color:#C00;}.activepage a:focus {color:#000;}

    Navigation - a:active & a:focus

    in CSS

    Posted · Edited by gfx42

    If all your pages are separate files, the easiest way is to create a class and apply it to the appropriate link within each page. For example, in the About Us page you might have something like this:
    <li class='activePage'><a href="aboutus.html">About</a></li>|<li><a href="portfolio.html">Portfolio</a></li>|<li><a href="gfxgallery.html">GFXGallery</a></li>|<li><a href="gfxrequest.html">GFXRequest</a></li>|<li><a href="donate.html">Donate</a></li>

    Thanks for the help. One question though, why don't I have to do your suggestion to the hover & visited states for them to work? If you notice in my .css, the visited & hover states are implimented the same way the active/focus states are, yet they work.Just curious why the diffrent link states need to be addressed in seperate ways. 
    .nav a:visited {color:#fff;}.nav a:hover {color:#000;}.nav a:active {color:#000;}.nav a:focus {color:#000;}

    Update: Your suggestion didn't work, though I appreciate it.

    Navigation - a:active & a:focus

    in CSS

    Posted · Edited by gfx42

    Hello.I'm building my first website gfx42.com.It is a static website.I would like the navigation link(s) to the active or current page to remain a certain color whenever you are on any given page.For example while i'm on the "about us" page, the "about us" nav link should remain any given color until I leave the page. default.css

    @charset "utf-8";/* CSS Document */body {background-color:#333;}.container {width:1012px;height:720px; margin:0 auto;margin-top:90px;background-color:#333;padding:5px;}.header {background-image:url(images/header.png);background-repeat:no-repeat;margin:0 auto;width:1012px;height:103px;padding-bottom:11px;margin-top:11px;}.nav {width:650px;height:10px;float:right;margin-top:-12px;margin-right:-29px;}.nav li {list-style:none;display:inline;padding:14px; }.nav li a{ text-decoration:none;color:#fff;font-family:Arial, Helvetica, sans-serif;font-size:18px;  }.nav a:visited {color:#fff;}.nav a:hover {color:#000;}.nav a:active {color:#000;}.nav a:focus {color:#000;} .logo { background-repeat:no-repeat;margin:0 auto;float:left;margin-top:30px;margin-left:42px;width:250px;height:40px; } .content { background-image:url(images/content.png);background-repeat:no-repeat;float:right;margin-top:45px;padding-right:5px;width:656px;height:657px; }.content h1 {color:#333;text-align:center;font-family:Arial, Helvetica, sans-serif; }.contentleft { background-image:url(images/contentleft.png);background-repeat:no-repeat;float:left;padding-top:11px;width:340px;height:189px; }

    aboutus.html (as an example)

    <!DOCTYPE html><html><head><title>GFX42</title><link rel="stylesheet" type="text/css" href="default.css"/></head> <body>       <div class="container">	        <div class="header">	 	   <div class="nav">			    <ul>				    <li><a href="aboutus.html">About</a></li>|				   <li><a href="portfolio.html">Portfolio</a></li>|				   <li><a href="gfxgallery.html">GFXGallery</a></li>|				   <li><a href="gfxrequest.html">GFXRequest</a></li>|				   <li><a href="donate.html">Donate</a></li>			    </ul>	   </div> <!--END of the NAV div-->		 	   <div class="content"><h1>About GFX42</h1></div> <!--END of the CONTENT div-->									  <div class="logo"><a href="index.html"><img border="0"src="images/logo.png" width="248" height="40" alt="home">						  </div> <!--END of the LOGO div-->						 	  </div><!--END of the HEADER div-->	     <div class="contentleft"></div> <!--END of the CONTENTLEFT div-->    <div class="contentleft"></div> <!--END of the CONTENTLEFT div-->    <div class="contentleft"></div> <!--END of the CONTENTLEFT div-->       </div> <!--END of the CONTAINER div-->	    </body></html>

×
×
  • Create New...