quick site critique

Andrea · June 26, 2011

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;

AnthonyJ · June 28, 2011

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?

falkencreative · June 28, 2011

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.

AnthonyJ · June 29, 2011

LOL... :clap:

AnthonyJ · June 29, 2011

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?

falkencreative · June 29, 2011

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; }

falkencreative · June 29, 2011

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.

AnthonyJ · June 29, 2011

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?

AnthonyJ · June 29, 2011

BTW Ben,

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

falkencreative · June 29, 2011

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".

AnthonyJ · June 29, 2011

ya, still not finding it....but can't I add css to over-ride? I know, bad form and all that but just until I can reproduce the theme myself.

AnthonyJ · June 30, 2011

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 June 30, 2011 by AnthonyJ

Andrea · June 30, 2011

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/

AnthonyJ · June 30, 2011

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?

Andrea · June 30, 2011

Put your page online and send us the link - it's very hard to give advise if we can't see what precisely you're working with.

AnthonyJ · June 30, 2011

I actually have this domain,www.byyourdesign.com. I followed the wp from scratch instructions to have a blank screen(mostly). Where do I add my index.html and root.css files?

Andrea · June 30, 2011

Not sure what you mean, as what we see IS your index.php file and the CSS is here: http://byyourdesign.com/wp-content/themes/mytheme/style.css"

AnthonyJ · June 30, 2011

ok try this...

http://byyourdesign.com/wp-content/themes/mytheme/index.html

falkencreative · June 30, 2011

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.

AnthonyJ · June 30, 2011

oh...ok

falkencreative · June 30, 2011

Just to be clear, the idea behind using

* { margin:0; padding:0; }

is that it helps the site display consistently in different browsers. Many people use CSS resets for this purpose (I usually do.) You can google "CSS reset" for more info about that.

Andrea · June 30, 2011

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.

AnthonyJ · June 30, 2011

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.

falkencreative · June 30, 2011

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.

Andrea · June 30, 2011

BTW, how would I set it as a background img?

http://www.csstutorial.net/2010/03/adding-a-background-image-with-css/

AnthonyJ · June 30, 2011

Yes Ben, it is your background image at your site...Cool

falkencreative · June 30, 2011

Yes Ben, it is your background image at your site...Cool

That was partially made by me and partly repurposed from texture images. If you compare the original and my version, you can't really tell that one came from the other.

AnthonyJ · June 30, 2011

Andrea, better?

Andrea · June 30, 2011

No - your image still isn'' showing up - see, there's nothing where your code says it should be:

www.byyourdesign.com/images/stratlogo.png

and the p tags belong around each paragraph -

AnthonyJ · June 30, 2011

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.

Sign In

quick site critique

Recommended Posts

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Create an account or sign in to comment

Create an account

Sign in