ramo55

Hi, So I'v started the long journey ahead of learning how to develop websites, I decided to start with the very basics, so decided to learn html and css. All has been well, untill I got to the css bit, I just simply dont understand it! I have managed to understand html, and most things about it, to allow me to make a simple webpage, but if I wanted to convert a psd to a html webpage I would not be able to do so, because CSS simply doesnt make sense to me. I tried looking at tutorials and so on for CSS but I just dont get it, Like for example, after I write up the html for my webpage, how do I position the elements on the page? for example the logo of my webpage should be displayed in the top left hand corner, but what CSS would I use to do that? is it to do with margins? is it to do with padding? or am I confusing myself more? Do I start off by alligning the logos to the left for example and then do something to it? I have even had a look at that CSS sheet sheet, however I just dont understand which things to use when making my website? I would really appreciate any helps or tips from anyone who was in my situation and is now good at CSS. Thanks.

Im afraid i cant put it on jsfiddle, no idea whats wrong, but regarding getting the menu to show up, you need to download the image and link it correctly so it shows up when you open index.html Thanks for your Help.

Why would i use illustrator and how?

Im having a problem with an image sprite that i made. basically when i hover over the menu the hover effect messes everything up and it goes down its just basically a big mess and i cannot figure out what the problem is. if anyone can assist me with what the problem is it would help. I have also attached the files for html,css and the image sprite. P.S. the png image goes inside a folder called images. and im trying to put this as a menu at the top of the page before the container. Thanks. style.css index.html

Thanks for your reply, lets assume that i know php, how would this be possible? is there any tutorials for something like this? could i get a normal contact us form and change it a little to achieve this? id appreciate if you can give a little more details into this please. Thanks.

can what im doing be achieved with html and css only? or do i have to have php too? i know some php, but wouldnt be able to write my own code for this.

Okay, basically what im thinking of doing is making a page where users click on an image, then they are taken to another page where they can enter some text in a field plus some personal info, and this is then sent to my email address. basically this process goes on: 1: users visits the page 2: user clicks on 1 of 3 images 3: the users selection is stored 4: the user is taken to the next page, where he must enter some details such as email and name etc... 5: this info is sent to my email and then the user is taken to a thank you page if anyone can help me with this it would be pretty amazing as im struggling. Thanks.

and one more thing, i hope you dont mind me asking you for tips and help with this, i know your bust etc... but hope you dont mind

Hope you dont mind, made some new updates and fixes and some changes: this is the css : body { background-image: url(../site/images/body.jpg); background-repeat: repeat-x; background-color: #fff; font-family: Verdana, Geneva, sans-serif; font-size: 12px; } #background { background-image: url(../site/images/body.jpg); background-repeat: no-repeat; background-position: center top; width: 100%; height: 980px; } #site-wrap { width:1000px; height: 1000px; border-radius: 12px 12px 12px 12px; box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.2); margin: 0 auto; margin-top: 70px; background: white; } #logo h1, #logo small { margin:0px; display:block; text-indent:-9999px; } #logo { background-image:url(images/visit.gif); background-repeat:no-repeat; width:194px; height:83px; position:absolute; top: 100px; left: 180px; } ul#menu { margin:0px; padding:0px; position:absolute; top: 50px; left: 180px; rightright:0px; } ul#menu li { display:inline; margin-left:12px; } ul#menu li a { text-decoration:none; color:#716d6a; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; font-weight:bold; text-transform:uppercase; } ul#menu li a.active, ul#menu li a:hover { color:#211e1e; } #box9 { text-align: center; padding-top: 5px; color: white; font-size: 16px; text-shadow: 1px 2px 1px rgba(0, 0, 0, 0.2); font-weight: 100; border-radius: 12px 12px 12px 12px; width: 280px; height: 120px; position:absolute; top: 500px; left: 880px; background: -moz-linear-gradient(top, #89d1e5 1%, #00addd 100%); /* FF3.6+ */ border-bottom: 1px solid #; margin-bottom: 0px; } #box10 { text-align: center; padding-top: 5px; color: white; font-size: 16px; text-shadow: 1px 2px 1px rgba(0, 0, 0, 0.2); font-weight: 100; border-radius: 12px 12px 12px 12px; width: 280px; height: 120px; position:absolute; top: 650px; left: 880px; background: -moz-linear-gradient(top, #89d1e5 1%, #00addd 100%); /* FF3.6+ */ border-bottom: 1px solid #; margin-bottom: 0px; } #box3 { position:absolute; top: 1000px; left: 200px; } #box5 { position:absolute; top: 83px; left: 850px; } #box6 { position:absolute; top: 455px; left: 135px; } #box8 { background: -moz-linear-gradient(top, #f4f4f4, #dddddd); margin: 0 auto; width: 210px; height: 220px; border-radius: 12px; font-family: arial, verdana, sans-serif; font-size: 0.79em; color: #777; position:absolute; top: 520px; left: 180px; } #box8 h3 { text-align: center; padding-top: 5px; color: white; font-size: 16px; text-shadow: 1px 2px 1px rgba(0, 0, 0, 0.2); font-weight: 100; border-radius: 12px 12px 0 0; width: 210px; height: 50px; position:absolute; top: -17px; left: 0px; background: linear-gradient(0deg, #49c5ea, #49c5ea); border-bottom: 1px solid #; margin-bottom: 0px; } #box8 h2 { text-align: left; padding-left: 10px; color: #64cfe3; font-size: 24px; width: 210px; height: 50px; position:absolute; top: 47px; left: 0px; border-bottom: 1px solid #; height: 37px; width: 200px; margin-bottom: 0px; } #box8 h1 { text-align: left; padding-left: 10px; color: #64cfe3; font-size: 24px; width: 210px; height: 50px; position:absolute; top: 97px; left: 0px; border-bottom: 1px solid #; height: 37px; width: 200px; margin-bottom: 0px; } #box8 h4 { text-align: left; padding-left: 10px; color: #64cfe3; font-size: 24px; width: 210px; height: 50px; position:absolute; top: 127px; left: 0px; border-bottom: 1px solid #; height: 37px; width: 200px; margin-bottom: 0px; } #box11 { background: -moz-linear-gradient(top, #f4f4f4, #dddddd); margin: 0 auto; width: 210px; height: 220px; border-radius: 12px; font-family: arial, verdana, sans-serif; font-size: 0.79em; color: #777; position:absolute; top: 780px; left: 180px; } #box11 h3 { text-align: center; padding-top: 5px; color: white; font-size: 16px; text-shadow: 1px 2px 1px rgba(0, 0, 0, 0.2); font-weight: 100; border-radius: 12px 12px 0 0; width: 210px; height: 50px; position:absolute; top: -17px; left: 0px; background: linear-gradient(0deg, #49c5ea, #49c5ea); border-bottom: 1px solid #; margin-bottom: 0px; } #box11 h2 { text-align: left; padding-left: 10px; color: #64cfe3; font-size: 24px; width: 210px; height: 50px; position:absolute; top: 47px; left: 0px; border-bottom: 1px solid #; height: 37px; width: 200px; margin-bottom: 0px; } #box11 h1 { text-align: left; padding-left: 10px; color: #64cfe3; font-size: 24px; width: 210px; height: 50px; position:absolute; top: 97px; left: 0px; border-bottom: 1px solid #; height: 37px; width: 200px; margin-bottom: 0px; } #box11 h4 { text-align: left; padding-left: 10px; color: #64cfe3; font-size: 24px; width: 210px; height: 50px; position:absolute; top: 127px; left: 0px; border-bottom: 1px solid #; height: 37px; width: 200px; margin-bottom: 0px; } #phone { position:absolute; top: 503px; left: 920px; z-index: 2; } #phone1 { position:absolute; top: 653px; left: 920px; z-index: 2; } /* SCOLL TO TOP */ #backtotop { cursor : pointer; display : none; margin : 0px 0px 0px 370px; position : fixed; bottom : 10px; left: 830px; font-size : 90%; padding : 10px; width : 100px; text-align : center; background-color : #000; border-radius : 8px; -webkit-border-radius : 8px; -moz-border-radius : 8px; filter : alpha(opacity=60); -khtml-opacity : 0.6; -moz-opacity : 0.6; opacity : 0.6; color : #FFF; font-size : 14px; z-index : 1000; } #backtotop:hover { filter : alpha(opacity=90); -khtml-opacity : 0.9; -moz-opacity : 0.9; opacity : 0.9; } /* SCROLL TO TOP END */ /* The Nivo Slider styles */ .nivoSlider { position:absolute; width:600px height:auto; position:absolute; top: 200px; left: 380px; overflow: hidden; } .nivoSlider img { position:absolute; top:0px; left:0px; max-width: none; } .nivo-main-image { display: block !important; position: relative !important; width: 600px !important; } /* If an image is wrapped in a link */ .nivoSlider a.nivo-imageLink { position:absolute; top:0px; left:0px; width:600px; height:100%; border:0; padding:0; margin:0; z-index:6; display:none; background:white; filter:alpha(opacity=0); opacity:0; } /* The slices and boxes in the Slider */ .nivo-slice { display:block; position:absolute; z-index:5; height:100%; top:0; } .nivo-box { display:block; position:absolute; z-index:5; overflow:hidden; } .nivo-box img { display:block; } /* Caption styles */ .nivo-caption { position:absolute; left:0px; bottom:0px; background:#000; color:#fff; width:800px; z-index:8; padding: 5px 10px; opacity: 0.8; overflow: hidden; display: none; -moz-opacity: 0.8; filter:alpha(opacity=; -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box; /* Firefox, other Gecko */ box-sizing: border-box; /* Opera/IE 8+ */ } .nivo-caption p { padding:5px; margin:0; } .nivo-caption a { display:inline !important; } .nivo-html-caption { display:none; } /* Direction nav styles (e.g. Next & Prev) */ .nivo-directionNav a { position:absolute; top:45%; z-index:9; cursor:pointer; } .nivo-prevNav { left:0px; } .nivo-nextNav { right:0px; } /* Control nav styles (e.g. 1,2,3...) */ .nivo-controlNav { text-align:center; padding: 15px 0; } .nivo-controlNav a { cursor:pointer; } .nivo-controlNav a.active { font-weight:bold; } /* NIVO SLIDER END */ and this is the html: <!DOCTYPE HTML> <head> <title>Photoshop Plus – Coming Soon Page Design</title> <link href="../site/style.css" rel="stylesheet" type="text/css" /> <link rel="stylesheet" href="/nivo-slider.css" type="text/css" media="screen" /> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function() { $(window).scroll(function() { if($(this).scrollTop() != 0) { $('#backtotop').fadeIn(); } else { $('#backtotop').fadeOut(); } }); $('#backtotop').click(function() { $('body,html').animate({scrollTop:0},800); }); }); </script> </head> <body> <div id="backtotop">Scroll to Top</div> </div> <div id="logo"> <h1>Creatif</h1> <small>A Family of Rockstar WordPress Themes</small> </div> <ul id="menu"> <li><a href="">Portfolio</a></li> <li><a href="">Services</a></li> <li><a href="">About</a></li> <li><a href="">Testimonials</a></li> <li><a href="">Request a Quote</a></li> </ul> <div id="background"> <div id="site-wrap"> <div id="box3"> <img src="../site/images/box3.gif" alt="Smiley face" height="128" width="880"> </div><!–BOX END–> <div class="slider-wrapper theme-default"> <div id="slider" class="nivoSlider"> <img src="images/toystory.jpg" data-thumb="images/toystory.jpg" alt="" /> <a href="http://dev7studios.com"><img src="images/up.jpg" data-thumb="images/up.jpg" alt="" title="This is an example of a caption" /></a> <img src="images/walle.jpg" data-thumb="images/walle.jpg" alt="" data-transition="slideInLeft" /> <img src="images/nemo.jpg" data-thumb="images/nemo.jpg" alt="" title="#htmlcaption" /> </div> <div id="htmlcaption" class="nivo-html-caption"> <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>. </div> </div> </div> <script type="text/javascript" src="scripts/jquery-1.9.0.min.js"></script> <script type="text/javascript" src="../site/jquery.nivo.slider.js"></script> <script type="text/javascript"> $(window).load(function() { $('#slider').nivoSlider(); }); </script> <div id="box5"> <img src="../site/images/box5.gif" alt="Smiley face" height="54" width="320"> </div><!–BOX END–> <div id="box6"> <img src="../site/images/box6.gif" alt="Smiley face" height="64" width="932"> </div><!–BOX END–> <div id="phone"> <img src="../site/images/phone.png" > </div><!–BOX END–> <div id="phone1"> <img src="../site/images/phone.png" > </div><!–BOX END–> <div id="box8"> <h3>Repair</h3> <h2>Hardware</h2> <h1>Software</h1> <h4>Laptop</h4> </div><!–BOX END–> <div id="box9"> Book A Repair </div><!-BOX END-> <div id="box10"> Request A Call Back </div><!-BOX END-> <div id="box11"> <h3>Contact Us</h3> <h2>Phone</h2> <h1>Email</h1> <h4>Online</h4> </div><!–BOX END–> </div><!–SITE WRAP END–> </div><!–BACKGROUND END–> </body> </html> I know you probably are not busy and have other things to do, but once again any ideas, or tips would be great to hear. Also if anyone spots any problems in the code please let me know. List of things done: 1: added scroll to top feature 2: removed images and replaced with css and html boxes 3: added a navigation bar 4: replaced logo from image to image with hidden text (better for seo) Note: the logo is just temporary just incase your wondering why it says "Home" any comments are welcome, and please tell me what you think of the attached image. Thanks.

wow, i guess thanks for the comments and overall welcoming talk and the support, i am actually considering this as a job, i enjoy it as a hobby if im honest, and would like to learn some languages and be doing this as a hobby/career. so anyway thanks for your comments, i will try and keep you guys updated with whatever really, and let you know how things go. This forum is really friendly if im honest, its pretty amazing!!!!!

okay, been slowly learning html and css, in order to be able to convert my psd's into html, so iv been doing some things etc... and made some progress, and id appreciate if people could have a look and tell me there ideas and tips they could give. this is my css: body { background-image: url(../site/images/body.jpg); background-repeat: repeat-x; background-color: #fff; font-family: Verdana, Geneva, sans-serif; font-size: 12px; } #background { background-image: url(../site/images/body.jpg); background-repeat: no-repeat; background-position: center top; width: 100%; height: 980px; } #site-wrap { width:1000px; height: 1000px; border-radius: 12px 12px 12px 12px; box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.2); margin: 0 auto; margin-top: 70px; background: white; } #box { position:absolute; top: 520px; left: 500px; } #box2 { position:absolute; top: 770px; left: 300px; } #box3 { position:absolute; top: 1000px; left: 200px; } #box4 { position:absolute; top: 80px; left: 200px; } #box5 { position:absolute; top: 83px; left: 850px; } #box6 { position:absolute; top: 455px; left: 135px; } /* The Nivo Slider styles */ .nivoSlider { position:absolute; width:600px height:auto; position:absolute; top: 200px; left: 380px; overflow: hidden; } .nivoSlider img { position:absolute; top:0px; left:0px; max-width: none; } .nivo-main-image { display: block !important; position: relative !important; width: 600px !important; } /* If an image is wrapped in a link */ .nivoSlider a.nivo-imageLink { position:absolute; top:0px; left:0px; width:600px; height:100%; border:0; padding:0; margin:0; z-index:6; display:none; background:white; filter:alpha(opacity=0); opacity:0; } /* The slices and boxes in the Slider */ .nivo-slice { display:block; position:absolute; z-index:5; height:100%; top:0; } .nivo-box { display:block; position:absolute; z-index:5; overflow:hidden; } .nivo-box img { display:block; } /* Caption styles */ .nivo-caption { position:absolute; left:0px; bottom:0px; background:#000; color:#fff; width:800px; z-index:8; padding: 5px 10px; opacity: 0.8; overflow: hidden; display: none; -moz-opacity: 0.8; filter:alpha(opacity=; -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box; /* Firefox, other Gecko */ box-sizing: border-box; /* Opera/IE 8+ */ } .nivo-caption p { padding:5px; margin:0; } .nivo-caption a { display:inline !important; } .nivo-html-caption { display:none; } /* Direction nav styles (e.g. Next & Prev) */ .nivo-directionNav a { position:absolute; top:45%; z-index:9; cursor:pointer; } .nivo-prevNav { left:0px; } .nivo-nextNav { right:0px; } /* Control nav styles (e.g. 1,2,3...) */ .nivo-controlNav { text-align:center; padding: 15px 0; } .nivo-controlNav a { cursor:pointer; } .nivo-controlNav a.active { font-weight:bold; } ********************************************** /* set default height/width of navigation images --------------- */ div.bmn_hnav li { width: 800px } div.bmn_hnav a { height: 80px } /* general layout styles for image navigation ------------------ */ div.bmn_hnav li { display: block; float:left; background-repeat: no-repeat; position:absolute; top:18px; right:800px; } div.bmn_hnav a { display: block; font-size: 1px; text-indent: -999999em; overflow: hidden; background-repeat: no-repeat; } div.bmn_hnav ul li a:hover, div.bmn_hnav ul li.bmn_active a { background-image: none; } div.bmn_hnav span.bmn_clearNav { height:0px; font-size:0px; display:block; width: 0px; overflow:hidden; clear:left; } /* set section-specific images --------------------------------- */ div.bmn_hnav li.bmn_sec-news a { /* default image */ background-image: url(images/unvisit.gif); } div.bmn_hnav li.bmn_sec-news { /* rollover image */ width:150px; background-image: url(images/visit.gif); } div.bmn_hnav li.bmn_sec-sports a { /* default image */ background-image: url(images/unvisit.gif); } div.bmn_hnav li.bmn_sec-sports { /* rollover image */ width:300px; background-image: url(images/visit.gif); } and html: <!DOCTYPE HTML> <head> <title>Photoshop Plus – Coming Soon Page Design</title> <link href="../site/style.css" rel="stylesheet" type="text/css" /> <link rel="stylesheet" href="/nivo-slider.css" type="text/css" media="screen" /> </head> <body> <div class="bmw_navigation bmn_hnav"> <ul> <li class="bmn_sec-news"> <a href="http://www.example.com/news/index.shtml">News</a> </li> <li class="bmn_sec-biz"> <a href="http://www.example.com/biz/index.shtml">Business</a> </li> <li class="bmn_sec-sports"> <a href="http://www.example.com/sports/index.shtml">Sports</a> </li> <li class="bmn_sec-arts"> <a href="http://www.example.com/arts/index.shtml">Arts & Entertainment</a> </li> <li class="bmn_sec-living"> <a href="http://www.example.com/living/index.shtml">Living</a> </li> <li class="bmn_sec-opinion"> <a href="http://www.example.com/opinion/index.shtml">Opinion</a> </li> </ul> <span class="bmn_clearNav"> </span> </div> <div id="background"> <div id="site-wrap"> <div id="box"> <img src="../site/images/box.gif" alt="Smiley face" height="223" width="654"> </div><!–BOX END–> <div id="box2"> <img src="../site/images/box2.gif" alt="Smiley face" height="213" width="857"> </div><!–BOX END–> <div id="box3"> <img src="../site/images/box3.gif" alt="Smiley face" height="128" width="880"> </div><!–BOX END–> <div id="box4"> <img src="../site/images/box4.gif" alt="Smiley face" height="118" width="92"> </div><!–BOX END–> <div class="slider-wrapper theme-default"> <div id="slider" class="nivoSlider"> <img src="images/toystory.jpg" data-thumb="images/toystory.jpg" alt="" /> <a href="http://dev7studios.com"><img src="images/up.jpg" data-thumb="images/up.jpg" alt="" title="This is an example of a caption" /></a> <img src="images/walle.jpg" data-thumb="images/walle.jpg" alt="" data-transition="slideInLeft" /> <img src="images/nemo.jpg" data-thumb="images/nemo.jpg" alt="" title="#htmlcaption" /> </div> <div id="htmlcaption" class="nivo-html-caption"> <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>. </div> </div> </div> <script type="text/javascript" src="scripts/jquery-1.9.0.min.js"></script> <script type="text/javascript" src="../site/jquery.nivo.slider.js"></script> <script type="text/javascript"> $(window).load(function() { $('#slider').nivoSlider(); }); </script> <div id="box5"> <img src="../site/images/box5.gif" alt="Smiley face" height="54" width="320"> </div><!–BOX END–> <div id="box6"> <img src="../site/images/box6.gif" alt="Smiley face" height="64" width="932"> </div><!–BOX END–> </div><!–SITE WRAP END–> </div><!–BACKGROUND END–> </body> </html> which produces the screenshot attached. i have used nivoslider as an effect for a slide show. if you have any comments or ideas on how i can improve the website i would appreciate that. the website is still far away from being finished, but if anyeones interested in helping me , ill keep posting updates of my progress whenever i can. I know some people will probably skip past this topic, but id really appreciate some help, i am prepared to learn whatever is needed, and am currently but slowly learning html and css. and please i dont want anyone laughing at me or anything, because its really not nice, and at least i have tried to do something.

please read my above reply

i think this is my fault for not making myself clear enough, i wasnt looking for anyone to do it for free, as you will notice i have not used any where in my post the word "free", but again my fault for not making it clear. what i was looking for was to try and keep my budget as low as possible, and by this i ment someone willing to do this job for me, while maintaining the price within my budget. i do not expect anyone to work for free, nor do i want anyone to. i simply gave up laerning myself and decided i would rather pay for someone to do it, but try and keep my budget as low as possible. and for your information by the way, the website has nothing to with business or earning money, it simply gives users tips and advice and tutorials on how to do some things. lastly, wheater people have taken time to learn something or not, you shouldnt really be telling me about this once again, but you should be trying to offer any service or help that you can give, if not then you should do what everyone else that cant give help or offer something does, which is to just move along and not post a reply, i appreciate what you are saying, but if all developers are just going to say they have spent time learning something instead of actually thinking about their customers needs, they wont get anywhere, see what im saying?

i think this is my fault for not making myself clear enough, i wasnt looking for anyone to do it for free, as you will notice i have not used any where in my post the word "free", but again my fault for not making it clear. what i was looking for was to try and keep my budget as low as possible, and by this i ment someone willing to do this job for me, while maintaining the price within my budget. i do not expect anyone to work for free, nor do i want anyone to. i simply gave up laerning myself and decided i would rather pay for someone to do it, but try and keep my budget as low as possible. and for your information by the way, the website has nothing to with business or earning money, it simply gives users tips and advice and tutorials on how to do some things. lastly, wheater what i said was insulting or not (even though i did not direct it at anyone) you should not be telling me about it, if you dont like what i said in the post fair enough, just move along, hence why forums are like this, forums dont require you to reply to a topic.

Thanks you, has helped with a few ideas.