Andrea Posted June 26, 2011 Report Share Posted 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; Quote Link to comment Share on other sites More sharing options...
AnthonyJ Posted June 28, 2011 Author Report Share Posted 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 " Would you please head slap me and put me back in the right line? Quote Link to comment Share on other sites More sharing options...
falkencreative Posted June 28, 2011 Report Share Posted June 28, 2011 I've added an emoticon to the forum just for you: 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. Quote Link to comment Share on other sites More sharing options...
AnthonyJ Posted June 29, 2011 Author Report Share Posted June 29, 2011 LOL... Quote Link to comment Share on other sites More sharing options...
AnthonyJ Posted June 29, 2011 Author Report Share Posted 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? Quote Link to comment Share on other sites More sharing options...
falkencreative Posted June 29, 2011 Report Share Posted 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; } Quote Link to comment Share on other sites More sharing options...
falkencreative Posted June 29, 2011 Report Share Posted 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. Quote Link to comment Share on other sites More sharing options...
AnthonyJ Posted June 29, 2011 Author Report Share Posted 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? Quote Link to comment Share on other sites More sharing options...
AnthonyJ Posted June 29, 2011 Author Report Share Posted June 29, 2011 BTW Ben, On post #22 where did you find the #menu things for me to correct? I can't find it. Quote Link to comment Share on other sites More sharing options...
falkencreative Posted June 29, 2011 Report Share Posted 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". Quote Link to comment Share on other sites More sharing options...
AnthonyJ Posted June 29, 2011 Author Report Share Posted 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. Quote Link to comment Share on other sites More sharing options...
AnthonyJ Posted June 30, 2011 Author Report Share Posted June 30, 2011 (edited) 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 Quote Link to comment Share on other sites More sharing options...
Andrea Posted June 30, 2011 Report Share Posted 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/ Quote Link to comment Share on other sites More sharing options...
AnthonyJ Posted June 30, 2011 Author Report Share Posted 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? Quote Link to comment Share on other sites More sharing options...
Andrea Posted June 30, 2011 Report Share Posted 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. Quote Link to comment Share on other sites More sharing options...
AnthonyJ Posted June 30, 2011 Author Report Share Posted 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? Quote Link to comment Share on other sites More sharing options...
Andrea Posted June 30, 2011 Report Share Posted 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" Quote Link to comment Share on other sites More sharing options...
AnthonyJ Posted June 30, 2011 Author Report Share Posted June 30, 2011 ok try this... http://byyourdesign.com/wp-content/themes/mytheme/index.html Quote Link to comment Share on other sites More sharing options...
falkencreative Posted June 30, 2011 Report Share Posted 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. Quote Link to comment Share on other sites More sharing options...
AnthonyJ Posted June 30, 2011 Author Report Share Posted June 30, 2011 oh...ok Quote Link to comment Share on other sites More sharing options...
falkencreative Posted June 30, 2011 Report Share Posted 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. Quote Link to comment Share on other sites More sharing options...
Andrea Posted June 30, 2011 Report Share Posted 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. Quote Link to comment Share on other sites More sharing options...
AnthonyJ Posted June 30, 2011 Author Report Share Posted 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. Quote Link to comment Share on other sites More sharing options...
falkencreative Posted June 30, 2011 Report Share Posted 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. Quote Link to comment Share on other sites More sharing options...
Andrea Posted June 30, 2011 Report Share Posted 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/ Quote Link to comment Share on other sites More sharing options...
AnthonyJ Posted June 30, 2011 Author Report Share Posted June 30, 2011 Yes Ben, it is your background image at your site...Cool Quote Link to comment Share on other sites More sharing options...
falkencreative Posted June 30, 2011 Report Share Posted 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. Quote Link to comment Share on other sites More sharing options...
AnthonyJ Posted June 30, 2011 Author Report Share Posted June 30, 2011 Andrea, better? Quote Link to comment Share on other sites More sharing options...
Andrea Posted June 30, 2011 Report Share Posted 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 - Quote Link to comment Share on other sites More sharing options...
AnthonyJ Posted June 30, 2011 Author Report Share Posted 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. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.