I am new to HTML and CSS and I'm in the process of creating a very basic "business card" style website. Here are some things that I want to do, but have not learned how to do yet: 1) Vertically and horizontally center-align a logo image 2) Include text contact information directly next to that image 3) Display a striped background image (I used the Stripemania tool to create the stripes, but don't know how to go from that to the final product) 4) Include a few lines of text for my mission statement on top of that background image Can anyone help me out? I haven't learned enough in my web development class to get this project done professionally. I don't want to just create an all-white webpage with an image centered. I need some help.
1: if you're going to have 1 image on the site, you could just position the image absolute directly, set top: 50%; left: 50%; and then use negative margins to the top and left to nudge the image back into the dead centre of any containing element with position: relative; 2: for both the div of the image and the context next to the image, use float: left to keep them next to eachother 3: you can use the background-image in the css and have it repeat, just set the width/height on it 4: when you mean on top do you mean above the bg image or literally on top of the image itself? if it's on TOP of the image you can use another div inside the div of the image and use position: relative; with the appropriate top/left to have it where you want it to be.
OK then assuming you are new to this so sorry if i'm covering things you already understand. Basically you will have your HTML document, and alongside this you will require a CSS document that will contain all things presentational related to your website. So create a file called style.css this is your stylesheet. Then to link to this from your HTML, you would add this inside the head of your document: <link rel="stylesheet" href=style.css" type="text/css" media="screen" /> OK so what does a CSS file do, well basically here you can refer to the elements inside your HTML (images, paragraphs, divs, spans, headings) and alter the way they appear. CSS gives you the ability to change anything presentational to these elements, for example adding background images, adding gaps (padding + margins), font sizes, font colours, bold, font typefaces and much more. You can also assign width's and height's to elements if need be from your CSS. So lets say your HTML document looks like this: <img src="mylogo.jpg" /> <p> my contact information</p> You can then give these elemnts a CLASS so that you can access them from your CSS stylesheet to alter the way they look. So the above will now become: <img src="mylogo.jpg" class="mylogo" /> <p> my contact information class="contactinfo"</p> OK so you have this inside your HTML. Now inside your style.css you can change the way these look, for example you could add this to your style.css file: *This would be inside style.css* .mylogo { width: 500px; /*Width of Image*/ height: 500px; /*Height of Image*/ border: 1px solid #000; /*Add a 1px black border around the image*/ .contactinfo padding: 10px; /*Adds a 10px gap all the way around your paragraph*/ font-size: 24px; color: red; /*font colour*/ The above is just an example on how you can alter the look of the items inside your HTML document from your CSS document. CSS gives you ultimate control over your page, and if you want to be serious about designing professional pages then you must get into the habit of using CSS to control your layout. OK i'm assuming here that the logo is just there for presentational purposes and doesn't need to be clicked. So what you could do is something like this: *INSIDE YOUR HTML* <div class="contact">Contact Information Goes Here</div> *INSIDE YOUR CSS* .contact { background-image: url(linktoyourlogo.jpg); background-repeat: none; background-position: top left; padding-left: 50px; /*Change this figure to the width of your background image*/ What I have done is put the contact information inside a DIV element. I have then set a background image to this DIV which is your logo. I have then added a gap(padding) inside the DIV so that the contact information appears next to the background image as though it were a real image inside your document. Assuming you want this image repeat across the whole of the page you would simply add the following to your CSS. *INSIDE CSS FILE* body { background-image: url(linktoyourstripeimage.gif); } By default the background image is set to repeat-x and repeat-y, so horizontally and vertically. Here we are accessing the body which means the whole of the document. So the background image is being set to the body. As described above the background image is set for the body everything will appear over the top of this. This is just a general guide I can provide futher help if you want, as I can't understand your exact layout you are trying to achieve, but try the points described above.
^^Thank you VERY much. I never learned how to reference a style.css file in my html file. I will attempt to do that to complete this assignment. There's one thing I'm still not sure of though, how do I begin writing my style.css file? Is it like writing an html file where it starts: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html lang="en-US" xml:lang="en-US" xmlns="http://www.w3.org/1999/xhtml"> <head> ...etc? Or do I just start writing the CSS stuff like I would if I had written in my html file (below the doctype, <head>): <style type="text/css"> ? Do you just start typing stuff?
You just start typing stuff. No HTML tags at all (Doctype, head or style). So a CSS would like: *{ padding:0; margin:0; } body{ background-color:#000; color:#fff; } etc... Code (markup):
It's best to put the css in a separate document called style.css and link to that from the head section of the html with <link rel="stylesheet" href="style.css" type="text/css" /> Edit: might have misread. If you've already got an external sheet, you don't need to put anything at the start. Just start defining your tags and everything as you normally would. Don't worry about the <style type=""> when it is in an external sheet.
I just tried making my first style.css sheet, and failed miserably. The logo overlapped on top of the contact information, and repeated horizontally across the page. It looked terrible. I'm now just trying to do it all within an html file. I don't think it is necessary to use a style.css sheet here considering that I will only have one page with no links to anything. The project is basic contact information. The logo needs to be centered in the middle of the screen, and there needs to be text contact information underneath that logo.
btw i'm just hoping you guys are on right now because I'm trying to finish this up within the next hour and 15 minutes. LOL
What kind of program are you using to make the website ? Also do you have a link to the website so I can take a look at what you are trying to do?
My biggest questions right now: 1) How do I create a block of text that does not have stripes going through it (background image showing behind it)? 2) How do I set my image up so that it is pushed towards the left side of the page (but not completely left-aligned) and then set my contact information up so that it appears directly to the right of that image?
First of all completing your task would be a lot easier if you used Dreamweaver or a similar application. Now about your questions: 1) You can make a div tag, in Dreamweaver, and set it up to have a different background image, for example black and have the letters white, or however you want. This will stop the backgrounds image from showing through the text. 2) If you make it in Dreamweaver you can put the image in a div tag, again, and move it exactly where you want it, just by eye no measurements. I find this easier sometimes. If you need help with this website I will be more then glad to help you out. Also do you have a demo link so I can see the website?
Check out this W3C information: CSS character encoding declarations James I personally do not put much emphasis on presentation -- I care most about quality of content, accessibility for people with disabilities and ease of navigation.
For sure, but it really depends on the target audience and the objective of the website, as where many sites are built on the same topic, sometimes the only unique identifier is design. However I understand your point most seriously successful websites run on the most basic of layouts, take Google and YouTube for example.