Jump to content
Killersites Forums

quick site critique


Recommended Posts

The best and cleanest way to create a graphic that's only 2 or so pixels wide and as long as you want your gradient to be. Then set the background color as whatever shade your gradient ends is, and repeat the image horizontally only.

 

The CSS for this would look like this (color of course depends on your gradient):

 

body { 	background: url(gradient.gif) repeat-x #edf1d9;

Link to post
Share on other sites
  • Replies 99
  • Created
  • Last Reply

Top Posters In This Topic

Good afternoon,

 

I'm suffering from information overload. I am practicing simple html and basic css and can't do what I imagine is the most simplest task. I simply want to create a bunch of div's (I think) to create different blocks that I can style via css. I want to simply create a page with various geometrical shapes just to get my foundation strait in my head. Kind of a puzzle if you will to cement structure basics. But now I am like "where did I learn that...html....css.(no not there)..or did he do that in php.(WP from scratch)...ahhhhhhh!!! SHUTDOWN :blink: "

Would you please head slap me and put me back in the right line?

Link to post
Share on other sites

I've added an emoticon to the forum just for you:

 

:bash:

 

;) As far as your question... If you're just talking about something basic like geometric shapes, you'll only need HTML to create the divs and CSS to style them. No PHP necessary. And probably no Javascript necessary unless you are trying to do more advanced things with them, like moving/animation/etc.

Link to post
Share on other sites

ok...Do you know of any documentation similar to W3Schools that is available online? W3 is all I know of but it is confusing me. Ex. http://www.w3schools.com/html/html_layout.asp

I am trying to wrap my head around blocking off sections of a web page using div tags. But here on this page it appears they are styling the div right then and there. This seems contrary to a single style sheet. That said, I also would like to be able to picture a web page in my head in sections/sectors/ I guess. How big is a web page? Browser and monitor aside isn't there a basic formula..X vs Y...rule of thumb to go by?

Link to post
Share on other sites

I've used http://www.tizag.com/ in the past. http://how-to-build-websites.com/ (and specifically, http://how-to-build-websites.com/2011/creating-a-basic-3-column-center-aligned-fixed-width-layout-with-html-and-css/ ) might be useful.

 

That said, it should be a relatively minor step to switch from having CSS within the HTML page to using an external stylesheet. Rather than using inline styles using the style="" attribute, you can give each of those divs a class or id. Then, in your CSS, you would reference the class/id and add your styles. For example, take this code:

 

<html>
<body>

<div id="container" style="width:500px">

<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Main Title of Web Page</h1></div>

<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>Menu</b><br />
HTML<br />
CSS<br />
JavaScript</div>

<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
Content goes here</div>

<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
Copyright © 2011 W3Schools.com</div>

</div>

</body>
</html> 

It looks like id's are used, so you could break it down into:

 

<html>
<body>

<div id="container">

<div id="header">
<h1>Main Title of Web Page</h1></div>

<div id="menu">
<b>Menu</b><br />
HTML<br />
CSS<br />
JavaScript</div>

<div id="content">
Content goes here</div>

<div id="footer">
Copyright © 2011 W3Schools.com</div>

</div>

</body>
</html> 

and

 

#container { width:500px; }
#header { background-color:#FFA500; }
h1 { margin-bottom:0; }
#menu { background-color:#FFD700;height:200px;width:100px;float:left; }
#content { background-color:#EEEEEE;height:200px;width:400px;float:left; }
#footer { background-color:#FFA500;clear:both;text-align:center; }

Link to post
Share on other sites
How big is a web page? Browser and monitor aside isn't there a basic formula..X vs Y...rule of thumb to go by?

A web page can be as long as you like, though shorter pages mean the user doesn't have to scroll as much.

 

As a general rule, I try to design my sites to fit within the 1024x768 resolution with no horizontal scrolling (which means it has a max width of about 980px.) That resolution is the smallest size that is still popular last time I checked, and I know that if it looks fine on 1024x768 resolution, it should be fine on larger screens as well.

Link to post
Share on other sites

I found out something pretty interesting. I could not get my divs to appear which started this whole head banging thing. So I started over and over again, and as I copied code from the how to build 3 column article...the first two of the divs I could see but the last I could not and while my teeth were about to shatter, that voice in my head that I call Holy Spirit said " put some text in there" and you know what? Voila, you cannot see divs if you do not have anything in them. I think I am on to something - others may say I'm on something.

 

Anyway, why do the bullets from my ul tag stay outside the div?

Link to post
Share on other sites

BTW Ben,

 

On post #22 where did you find the #menu things for me to correct? I can't find it.

I'm not 100% sure. The CSS shows up in the index document, not in an external stylesheet. You might want to check header.php (You're working with Wordpress, right?) and do a search for "#menu1".

Link to post
Share on other sites

Good morning,

I created a practice web page and it has three columns. What video should I watch to move my columns around? From horizontal to vertical. How to add a buffer between columns in either plane? I used a br tag but my right column moved down not over, in the vertical position.

Edited by AnthonyJ
Link to post
Share on other sites

I'm not sure what precise video, but if you load the page to your site and post the link, we can look at advise you specifically - and also let you know if we see things that could be done better.

 

Here is a tutorial that might help you out: http://www.csstutorial.net/2010/04/3-column-layout/

Link to post
Share on other sites

Actually Andrea it is your article that I am using to practice on. Instead of column-left I used Navigation and put in a home page and three pages called page 1,2,& 3 using a ul tag for dummy links. And I put dummy text in the other columns. I figured out that the margin setting works to push column-right over and can play with the float. Still though I can't get the bullets contained in the nav div when I change the color. If I use white you can't tell but when it is red it looks funny.

So how do I change the columns to horizontal?

Also, how do I put another div under my nav div?

Link to post
Share on other sites
Still though I can't get the bullets contained in the nav div when I change the color.

You have this in your CSS file:

 

* { margin:0; padding:0; }

 

This resets all elements on the page to have margin 0 and padding 0. If you want to move the bullets "inside" the navigation div, you need to add some left margin to the ul.

Link to post
Share on other sites

I see a couple problems:

 

<div id="wrapper">  	<img src="[url=""]file:///C:/Documents%20and%20Settings/ajackson/Desktop/byyourdesign/
images/stratlogo.png[/url]" alt="Strategic Logo"  width="4000" Height="3000"/>  		

First, this image is located on your computer - that's why it doesn't show on the website. You need to upload it too, and change the file path accordingly.

 

Next, it says the image is 4000px wide - that is WAY too wide. Most people still view at around 1200 pixels width, so that image along would force one heck of a scroll bar.

 

Then you have:

 

<div id="header"> 
<h1>By Your Design</h1>
<h3>Web Design With You In Mind</h3>
 </div> <br><br> 		

Those <br>s are bad practice. They are meant to be used as a line break, but not to create space. If you want more space around hour header, add a bottom margin to it or a top margin to the div that follows in your CSS.

 

Also, I know it's just dummy text you're using for your content, but it should have some paragraph tags around it.

Link to post
Share on other sites

ok,.....my job keeps getting in my way.

 

Thanks Ben, BTW my wife likes your web page image behind your title. She is curious if you made it or came across it?

 

Andrea, The image was an afterthought, just toying with it. I'll correct the path soon. BTW, how would I set it as a background img? Ya 4000 is a bit big but I was trying to get a feel for how big that was going to be.

 

Thanks for correcting my form, I will make changes as soon as my job leaves me alone for a moment...Might be a bit though.....Give me an hour.

Link to post
Share on other sites
Thanks Ben, BTW my wife likes your web page image behind your title. She is curious if you made it or came across it?

The red/white avatar below my username to the left? That I created. The white falcon shape is my logo from http://www.falkencreative.com

 

If that's not it, you'll need to clarify exactly what image you are talking about. ;)

Link to post
Share on other sites

Andrea,

Job got in the way...

I say this completely joking...nag,nag,nag,.....I am so pleased that you are being strict and observant thank you, thank you, thank you.

just teasing.

Let's forget the image for now...I'll get to that soon enough. I was trying to look busy around my boss.

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...