JoeConst
Members
-
Joined
-
Last visited
-
-
Hey guys, I'm fairly new to web design and in the past few days I've been doing a little bit of reading on image use. I was shocked to read that people have been fined thousand of pounds for using google images. My first thought would be that they'd have to take the image down and that would be the end of it, so to hear you can potentially have to cough up a couple of grand for a google image is quite scary! I've bought a few images from Dreamstime and IStock. I haven't really made many websites so haven't really thought about the costs of images. I was looking earlier and saw how expensive is per month to join a site like Dreamstime and IStock. You're paying £100-£150 per month for images. I'm aware of royalty free images. Am I correct for these you can use for free but have to credit underneath the photo? My problem with that is your site then doesn't look as professional. I suppose you could use paid images for the home page and royalty free for blog posts? So I was wondering: 1.Do you pay these sort of prices for subscriptions? Is there any way around it? 2.How do you fit that in to your projects? Do you ask your clients how many images they want and then bump the price up? Thanks Joe
-
*IGNORE TITLE... the margin isn't working not the clear... read below!* Hey guys, I'm trying to replicate a website to practise. The website is: http://www.lifeoptimizer.org/ (Or see attached photos). This is what I've got so far in terms of layout: As you can see the footer at the bottom is clearing the left and right columns. Column 1 is floated left and column 2 right, and obviously I've used the clear property to move the footer to the bottom. My problem is I have a margin-top on my footer of 32px, but it isn't working. You can see the bottom of my column is tight up against it. Any ideas on how to fix this? Here is my code: HTML <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Life Optimizer - Maximizing Personal Effectiveness</title> <link rel="Stylesheet" href="CSS/LifeOptimizer.css"> </head> <header class="Logo"> <img src="PICTURES/HeaderLogo.jpg" width="960px" height="160px"> </header> <nav class="Navigation"> </nav> <body> <div class="BlockContent"> <article class="LifeOptimizerMainContent"> <div class="HowToBecomeAPro"> </div> <div class="9PowerfulSuccessLessonsFromBillGates"> </div> <div class="WhatYouMustDoToBoostYourPersonalGrowth"> </div> <div class="TheProvenWayToChangeYourResults"> </div> <div class="AskTheReaders"> </div> <div class="TheyKeyIngredientsToLivingYourDreamLifestyle"> </div> </article> <aside class="LifeOptimizerSideContent"> <div class="Updates"> </div> <div class="Advertise"> </div> <div class="Connect"> </div> <div class="Search"> </div> <div class="Recent Posts"> </div> <div class="Categories"> </div> </aside> </div> </body> <footer> </footer> </html> CSS /*Basic Layout Styles */ html { background:#758595; } .BlockContent { width: 960px; margin: 16px auto; font-family: serif, arial, helvetica; } .Logo { width: 960px; height: 160px; margin: 0 auto; } .Navigation { width: 960px; height: 48px; background: #444444; margin: 0 auto } footer { margin-top: 32px; height: 160px; background: yellow; clear: both; } /* Article Styles */ .LifeOptimizerMainContent { width: 512px; height: 1920px; padding-left:32px; background: red; float: left; } /* Aside Styles */ .LifeOptimizerSideContent { width: 352px; height: 1200px; padding-right:32px; background: blue; float: right; } /* Article Div Styles */ .HowToBecomeAPro { width: 512px; height: 318px; border-bottom: 2px solid grey; } .9PowerfulSuccessLessonsFromBillGates { width: 512px; height: 318px; border-bottom: 2px solid grey; } .WhatYouMustDoToBoostYourPersonalGrowth { width: 512px; height: 318px; border-bottom: 2px solid grey; } .TheProvenWayToChangeYourResults { width: 512px; height: 318px; border-bottom: 2px solid grey; } .AskTheReaders { width: 512px; height: 318px; border-bottom: 2px solid grey; } .TheyKeyIngredientsToLivingYourDreamLifestyle { width: 512px; height: 318px; border-bottom: 2px solid grey; } Thanks Joe!
-
Fantastic, that worked! And I'd made a mistake with the folder path for my webfonts which I've corrected. Thanks for everyones help !
-
-
Hey guys, Here is my site: http://www.joekonst.com There will be quite a few mistakes, and I apoligise for the fact I haven't separated my CSS layouts in to categories. I didn't plan to make the site I was just practising The main problem I've got is my site loads the CSS in Chrome & Safari but not in Firefox & I.E. My second problem is my web fonts don't load at all. HTML: <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Aspiring Web Designer...</title> <link href="Joe's Practise Web Design/JoeKonst/CSS/JoeKonst.css" type="text/css" rel="stylesheet"> </head> <div class="TopBar"> <h1>JoeKonst.com</h1> <a href="https://twitter.com/joe_konst"><img src="Joe's Practise Web Design/JoeKonst/PICTURES/twitter_white.png" alt="TwitterLink"></a> </div> <body> <div class="Body2"> <nav> <ul> <li><a href="index.html">Home</a></li> <li><a href="Joe's Practise Web Design/JoeKonst/HTML/Portfolio/Portfolio.html">Portfolio</a></li> </ul> </nav> <article> <div class="Pics"> <img src="Joe's Practise Web Design/JoeKonst/PICTURES/Coding.jpg" width="130" height="80" alt="CodingPicture"> <img src="Joe's Practise Web Design/JoeKonst/PICTURES/Web%20Design.jpg" width="130" height="80" alt="WebDesignPicture"> <img src="Joe's Practise Web Design/JoeKonst/PICTURES/Web%20Design 1.jpg" width="130" height="80" alt="WebDesignPicture"> <img src="Joe's Practise Web Design/JoeKonst/PICTURES/Web%20Design 2.jpg" width="130" height="80" alt="WebDesignPicture"> <img src="Joe's Practise Web Design/JoeKonst/PICTURES/Web%20Design 3.jpg" width="130" height="80" alt="WebDesignPicture"> <img src="Joe's Practise Web Design/JoeKonst/PICTURES/Web%20Design 4.jpg" width="130" height="80" alt="WebDesignPicture"> </div> <div class="WebDesign"> <h3>Web Design</h3> <p>My name is Joe Consterdine, I'm 25 years old, and I'm an aspiring Web Designer.</p> <p>I first started learning Web Design in July 2014. I began by reading <i>'Head First HTML'</i> and instantly found I enjoyed learning to code.</p> <p>After I'd finished that book I took my learning online to <i>'Lynda.com'</i>. <p>Since joining Lynda, I've completed three courses: <ul> <li>HTML Essential Training</li> <li>CSS: Core Concepts</li> <li>CSS: Page Layouts</li> </ul> <p>All three courses were taught by James Williamson. I can't recommend him highly enough!</p> <p>I'm now focused on building up my portfolio of websites and continuing to develop my CSS skills in the upcoming months.</p> <p>I'll then continue my development by beginning to learn Javascript.</p> <p><a href="Joe's Practise Web Design/JoeKonst/HTML/Portfolio/Portfolio.html" class="Hover2">GO HERE</a> to take a look my current portfolio of websites!</p> </div> </article> <aside> <div class="Bio"> <img src="Joe's Practise Web Design/JoeKonst/PICTURES/Me.png" width="250" height="250" alt="PictureOfMyself"> <h3>Bio</h3> <p>Name: Joe Consterdine</p> <p>Age: 25</p> <p>Skills: HTML & CSS</p> </div> <div class="Contact"> <img src="Joe's Practise Web Design/JoeKonst/PICTURES/Contact.jpg" width="280" height="150" alt="MyContactDetails"> <h3>Contact</h3> <p>Phone: 07549245738</p> <p>E-mail: joeconsterdine@gmail.com</p> </div> </aside> </div> <footer> <p>Joe Consterdine 2015©</p> </footer> </body> </html> CSS: html { background:grey; } @font-face { font-family: 'League Gothic'; src: url('Joe's Practise Web Design/JoeKonst/Fonts/lg/lg/leaguegothic-italic-webfont.eot'); src: url('Joe's Practise Web Design/JoeKonst/Fonts/lg/lg/leaguegothic-italic-webfont.eot?#iefix') format('embedded-opentype'), url('Joe's Practise Web Design/JoeKonst/Fonts/lg/lg/leaguegothic-italic-webfont.woff') format('woff'), url('Joe's Practise Web Design/JoeKonst/Fonts/lg/lg/leaguegothic-italic-webfont.ttf') format('truetype'), url('Joe's Practise Web Design/JoeKonst/Fonts/lg/lg/leaguegothic-italic-webfont.svg#league_gothic_italicregular') format('svg'); } @font-face { font-family: 'Rosario-Regular'; src: url('Joe's Practise Web Design/JoeKonst/Fonts/Rosario/Rosario-Regular.ttf'); font-weight: normal; font-style: normal; } .Body2 { width: 960px; height: 1200px; margin: 78px auto; background: white; font-family:League Gothic; font-weight: normal; font-style: normal; color: black; font-size: 1.2em; } .TopBar { height: 78px; background: black; font-family:League Gothic; position: relative; } .TopBar h1{ color: white; font-weight: normal; font-style: normal; text-align: center; line-height: 78px; font-family: League Gothic; font-size: 2.5em; } .TopBar img { position: absolute; bottom: 30px; right: 200px; } nav { width: 960px; height: 78px; background: black; font-size: 1.5em; } nav ul li { display: inline-block; margin: 20px 20px 20px -20px; padding: 0 30px 0 0; } a:link { color:white; } a:visited { color: white; } a:hover { color: red; } a:active { color: yellow; } a.Hover2 { color: red; } a.Hover2:link { color: red; } a.Hover2:visited { color: red; } a.Hover2:hover { color: yellow; } a.Hover2:active { color:yellow; } article { width: 512px; height: 1102px; padding: 20px 0 0 32px; background: white; float: left; text-align: center; font-family: serif; font-size: 16px; } article img { display: inline-block; margin: 30px 0; } img + p { text-align: left; margin-top: 3em; } article p { text-align: left; } article ul { text-align: left; } .Pics { border-bottom: 1px solid grey; } .WebDesign { margin: 0 auto; } .WebDesign p { text-align: left; padding-left: 20px; } h2,h3 { font-family: League Gothic; font-size: 1.5em; } aside { width: 352px; height: 1102px; padding: 20px 32px 0 0 ; background: white; float: right; color: black; font-size: 1.2em; border-left: 1px solid grey; } .Bio { width: 384px; } .Bio img { display: block; margin: 35px auto; } .Bio h3 { text-align: center; text-decoration: underline; } .Bio p { text-align: center; } .Contact { width: 384px; } .Contact img { display: block; margin: 20px auto; } .Contact h3 { text-align: center; text-decoration: underline; margin: 0; } .Contact p { text-align: center; } footer{ height: 78px; line-height: 78px; text-align: center; background: black; color: white; font-family:League Gothic; font-size: 1.5em; } Thanks a lot guys!
-
Hey, I'm looking to become more involved by talking about web design with fellow learners. I was wondering if there were any sort of Skype groups? My account is: patrickconsterdine Thanks.
-
The webpage I'm showing you is just a test, I'm just doing it all for practise so I want to learn how to float properly before I move on to next step of CSS. This image is what I would like to happen. I want the content below the image without putting them together. The next 2 images are all of my HTML in 2 screenshots. The rest of the screenshots are my CSS from beginning to end. Thanks Joe
-
Here is my HTML. The picture is above the content. I'm not sure how to fit the image above the content because an image is an inline element right? And I thought that block-elements went in order, but obviously it been an inline element I'm not sure how you would do it. And here is the CSS. Thanks Joe
-
Hey guys, new to web design, barely 2 months. I'm really enjoying it so far! Ok so earlier I tried floating. My idea was to have the image above the content which was a div. I had my div underneath the image so I assumed that because both were floating right it would just nest underneath it. I'm not sure but I'm thinking because an image is an inline element that it wouldn't go above my div? Because of that I put <p> on either side of the image but that didn't work. I was left with this: In the end I put the image inside the div so they were together and was happy enough with the result, but is there a way I could do it without doing that? Finally, I'm slightly confused at the positioning of the content on the right... why does the list not nest underneath the div to the left rather than parallel to it considering it's the bottom of my HTML structure? Thanks Joe
