Lucy

If anyone has the time to have a quick look at my website and give me honest feedback, I'd be very grateful It's not actually finished yet, but it's getting there. There are a few problems that need fixing (contact form doesn't work, footer doesn't work properly on tablets), so I already know about those, but please point out any others you can see. As you can see, there isn't much content yet. I'm still thinking about what to write. Also, there isn't anything in the portfolio because I have only done one site so far, which needs some adjustments before going in there. I intend to create a Wordpress site for someone who has asked and possibly contact local charities to see if they'd like free websites. If anyone has other suggestions on how to fill it up, I'm all ears. This is aimed at employers, by the way - a link would be provided in my CV. Not really looking for freelance work currently. Just so you know the target audience. Oh... it won't work with internet explorer, so don't even try it I'm working on it, though. So... please don't be too harsh, lol: Edit - removed link

Yeah, my website is already responsive, it just doesn't really work on the smallest screen sizes - needed a slightly different design. Oh dear This gets more and more complicated... well, my website seems to be working for most of the phones/tablets and stuff listed on this thing. I'm having an issue with tablets though, actually. They are large enough to display the site normally, but I have a fixed footer with my links in which apparantly cannot be clicked on on a tablet. It just scrolls down instead of allowing the cursor to rest on links, if you see what I mean. Do you think an actual tablet device would be different? I've only touched one of those things like three times, lol. I worked through a ton of small problems tonight and it's looking like my portfolio site is finally nearing completion. (Well... ignoring the fact that internet explorer completely and utterly messes the whole thing up)

Found it - it's very good, thanks for the suggestion. Weirdly, some of the phones listed completely ignore my stylesheets... they're within the size range. Is this just something that happens, or is there likely to be something up with my code? If so, I can link you to the website, it should be live tommorow (I just got hosting for it, but the FTP won't work yet). EDIT - Never mind, got it working. Jonathanks - Thanks for the advice. I'm using @media screen though, just to be sure anything I wouldn't think of will be covered. Like people who want tiny browsers or something. And, er, I'm certainly not a 'master' of anything, lol I can make rather delicious chocolate brownies though...

Well, I'm using a computer. Trying to emulate the size/resolution of mobile phones. So should I have the browser at 300px-ish? Or its normal size?

I just happened across your post and thought I'd give you my opinion on the brief look I had at your site. Bearing in mind I'm just a beginner in web design... this is mainly my opinion as a member of the public. There is too much. It's a very nice site, very modern... but there is SO MUCH on there. The sheer amount of scrolling required to skim the homepage is off-putting. I think the problem is how much you've written about yourself. Mainly under the 'what makes me different' header - most of it seems unecessary. Sorry, I hope this doesn't come off as too negative, I just thought it needed pointing out.

I think I'm having a bit of a dense moment I want to design a separate stylesheet for mobile phone screens because they're so small - but I'm keeping sizes to percentages/ems. So... when testing, what browser size do I use? The 300px or so that a mobile phone will be, or full sized?

I'm not sure I explained myself very well - the solutions didn't work too well because I needed really specific positioning that would respond correctly with browser resizing. I've got it sorted now though.

Thanks for the replies - sorry about the delay in responding, been having a rough time lately. Okay, well, I decided on a different way in the end, but am still having a problem. I'll post the relevant code below. There's a header, with a background image which is a decorative line. What I want now is to add a 'stopper' image to the end of the line - does that make sense? The only way I could think to do this is to put an empty div beside it with this image as a background image, with no margins or borders so it butts up to the background image for the header. Unfortunately, the empty div (named 'side' here) is refusing to go where I want it and is stubbornly staying put below the other div. CSS: h1 { float:right; width:100%; margin:3% 15% 2% 0; font-family:myfont, "Lucida Bright", "DejaVu Serif", Georgia, serif; text-align:right; font-size:7rem; font-weight:normal; padding:1% 2% 0.8% 2%; word-wrap:break-word; background:url('images/weave.png') repeat-x right bottom; background-size:5%; } .side { width:15%; margin:0; background:url('images/dragon.png') no-repeat bottom; background-size:50%; display:block; float:right; } HTML: <h1>hello there!</h1><div class="side">.</div> Oh, and I completely get what you're saying - but I've been learning web design on and off for 9 years (since I was 13) and feel I really need to start doing things 'properly' (especially as I'm trying to get an apprenticeship/job in development)

Sorry the topic title isn't very informative - couldn't think of anything better. I have some titles on a page, as headers. I have a swirly line I would like underneath each title, but want to use it as a background image in some sort of box instead of just as an image, so it would be more responsive, if that makes sense. It seems a bit over the top to have a div for this underneath each header. It would probably be fine to do it that way, but it seems wrong. Is there any other way I could achieve this effect?

Oh! Yep, that works... thank you so much

I started using WAMPserver for my website so I can use PHP. My homepage has some images on it that won't work properly when loaded through the host. Is there a reason this could happen? Here's the relevant code HTML: <div class="gallery"> <div class="box"> <a href=""><div class="overlay"><h3>website name</h3><br/><p>website description</p></div></a> <img class="thumb" src="imagesimage1.jpg"> </div> CSS: .gallery { float:right; width:70%; clear:right; margin:0 20% 20% 0; padding:2%; background-color:rgba(149, 176, 178, 0.2); border-radius:0.25em; } .box { width:32%; position:relative; float:left; border:.5rem solid #FFE2CD; text-align:center; } .thumb { width:100%; } Strangely, the background image still works... it's a .PNG, but that won't be why, will it?

No, I did mean CSS clear. Sorry. I got it working in the end, but I really don't know how.

Can I not use the clear property with form input fields and labels? It doesn't seem to work at all, except for the submit button. Is this simply something that isn't supposed to work? It's driving me mad...

So, I don't understand PHP, but I wanted to make a contact form for my website and apparantly you need PHP to create one which will send email from the web page itself, as opposed to opening an email client to send it. Thought that might be off-putting to some people. I tried two different tutorials and it literally did nothing, and have suddenly realised that I might need a server of some sort. Is this the case? My website isn't online, you see, it's just all documents on my computer.

Well, your example showed that it should work, so after a long time I found out that firstly, changing the body's background colour and image wasn't going to stop the div on top of it from having a background (I feel so stupid...). The font size didn't work because I have 'rem' for all my font sizes other than html and body - I hadn't realised the 'root' is html, not body. Also, happy birthday!

Every time I try to use this it just seems to fail. As far as I can tell, there shouldn't be anything wrong with my code, so what's going on? I have this code in my header: <meta name="viewport" content="width=device-width, initial-scale=1.0"> And this is what I'm trying to use (not the effect I want in the end, but a background colour change should make it obvious when it's working): @media screen and (max-width:700px) { body { background-image:none; background-color:red; } } Also, I'm using Notepad++ which puts everything in different colours - other than the @ and {, it doesn't do anything with the first line, as if it's not valid code or something. I must be missing something? Edit - Changed it, and eventually got it to do something: @media (max-width: 700px) { #main { background: red; font-size:0.3em; }} Doesn't make any sense. Why on earth can it work for a div, but not the body? Oh, and the font size doesn't work at all.

Well, it stops going inside the footer, but instead creates extra white space inbetween the main part and the footer. Edit - never mind - I had accidently put the code in the footer, lol. Thanks a lot!

Thanks for the reply, that worked! There is a small problem... I added in a box of text with float:right property which seems to have completely stopped the main part it is in from resizing, as before. It is instead forcing the footer to resize. I hope this makes sense, I'm so tired I could fall asleep right now

I'm having a problem with the basic design for a responsive website. I will post the code below. The website normally looks like this: https://imageshack.com/i/n1qsk1j When the browser is made very small, so the larger text overflows, that text goes beneath its own div and past the footer underneath, into a white space, like so: https://imageshack.com/i/ms8fdjj I would like the main part to extend to accomodate the extra text, though I suppose it may simply not be possible, in which case I'll have to link in a stylesheet for screen sizes below a certain height, or something. Would be grateful for any help HTML: <body> <div id="main"> <div class="hometext">sample text<br> (more text)</div> </div> <div id="footer"> ♦ <a href="">about</a> ♦ <a href="">portfolio</a> ♦ <a href="">contact</a> ♦ </div> </body> CSS: *{ margin:0;padding:0; } html, body { margin:0; height:100%; font-size:62.5%; } a:link, a:visited, a:active { text-decoration:none; color:inherit; } a:hover { text-decoration:none; color:#CDFAFF; } #main { background-color:#E6FDFF; background-image:url('images/dia.png'); background-repeat:no-repeat; color:#B28A6C; height:94.2%; font-family: "Lucida Bright", "DejaVu Serif", Georgia, serif; font-size:7em; margin:0; } #footer { width:98.65%; text-align:center; margin:0; padding:.7%; height:3%; min-height:26px; word-spacing:2.5em; background-color:#B28A6C; font-family: "Lucida Bright", "DejaVu Serif", Georgia, serif; color:#FFE2CD; font-size:3em; } .hometext { top:30%; left:30%; max-width:30%; min-width:25%; margin:0; padding:5%; position:relative;}

Oh no... I've broken it I've changed the layout a little and added in the @media statements, and at some point (I'm not sure when) the layout stopped working properly. Take a look at: (edited out) and minimise your browser until a scroll bar appears - if you scroll down, you'll see that the footer is hovering in the middle of the page. It looks worse in Internet Explorer than Firefox, too. Really confusing... does anyone know what the problem is? I'll delete the link from the topic after this is resolved, hope this is okay.

So far, I have this: (Link edited out) (I've tried to make it as non-advertising as possible, such as with that awful placeholder image Hope it isn't breaking the rules to post it here) I'm trying to make the font size change with the browser, too. I've used a percentage font size for the body and em's for the font sizes inside, and was under the impression that this should make the text resize? But as you can see, that doesn't work. Just wondering if I have done something wrong with it? Or am I misunderstanding? Here's the code and stylesheet: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><head><title>Website | Home</title><link rel="stylesheet" type="text/css"href="stylesheet.css"/></head><body><div id="container"><div id="main"><img src="images/placeholder.png" alt="logo" style="margin-left:55%; margin-top:1%; position:relative; z-index:2; width:30%"/><div id="links"><p> <a href="owlface foods.html">home</a> . products . where to buy . contact . about</p></div><p style="padding:30px; width:80%; margin-top:3%; display:block; font-size:1.6em">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lacus sapien, commodo nec imperdiet at, cursus in turpis. Donec tincidunt dui nisi, vel ullamcorper tortor egestas id. Phasellus sagittis mollis risus vel blandit. Donec elementum cursus tempus. Sed ac velit ullamcorper, accumsan lectus ut, semper enim. Curabitur condimentum adipiscing euismod. Mauris in elit a lorem tristique mattis. Pellentesque vel varius purus,id molestie orci. Etiam lobortis viverra libero, id tincidunt sapien sagittis egestas. Aliquam condimentum utaugue quis aliquet. Sed feugiat fermentum nunc, eget fermentum nisl facilisis vel. Nullam lacinia tinciduntodio, quis accumsan tellus auctor eu. Nam eleifend orci lectus, et vehicula leo consequat vitae.<br/><br/>Maecenas vitae aliquam urna. Nulla a consequat neque. Vestibulum eu dolor rutrum, fringilla sapien in, malesuadaarcu. Fusce felis urna, porta ac nunc in, porta aliquam nisi. Nulla venenatis ultricies leo non pharetra. Phasellus condimentum libero sodales tincidunt fermentum. Aenean a venenatis nisi. Curabitur iaculis imperdietfelis. Quisque a felis id orci posuere congue. </p></div> </div><div id="footer">copyright --- 2013</div></body></html> *{ margin:0;padding:0}html {height: 100%;}body {margin: 0 0 0 0;height: 100%;background-image:url('images/bgpattern2.jpg');background-repeat:repeat;background-color:#603619;font-family:Georgia, "Times New Roman", Times, serif;font-size:62.5%;}a:link { color:inherit; text-decoration:none;}a:hover { color:#DB9E75; text-decoration:none;}a:visited { color:inherit; text-decoration:none;}#container { background-color:#1D1E19; border-left: solid 8px #F7941E; border-right: solid 8px #F7941E; overflow:hidden; min-height:100%; position:relative;}#container, #footer {width: 70%;margin: 0 auto;}#main { float: right; width: 100%; min-height: 600px; margin: 0 auto; color:#C49A6C;}#links { height:30px; top:-50px; background-color:#603619; border-top:thin #DB9E75 dashed; border-bottom:thin #DB9E75 dashed; text-align:left; font-size:2.2em; color:#F7941E; word-spacing:normal; position:relative; z-index:1;}#footer { height:30px; margin-top:-30px; background-color:#F7941E; color:#603619; font-size:1.3em; text-align:center; position:relative; width:100%;}</style><!--[if lt IE 7]><style type='text/css'>#container {height: 100%;}</style><![endif]-->

Thank you!!! It works May I ask, what does the Java Script at the top do?

Newseed - perhaps I'm just getting confused, but your example doesn't extend to the bottom of the page at all? Not sure whether I'm getting across what I mean :/ Dsonesuk - height:100%, no matter where I put it, simply won't work. Sounds like it should... but it doesn't. That said, you have a point, I don't actually need three divs as columns at all. Davej - The alternative would be to have columns that extend to the very bottom of the page regardless of browser size. I think it's going to be simpler if I design this for a height of 1200px with a footer at the bottom. Feel like I'm going round in circles with this website... I need help with positioning now, the old style wasn't working. There is a logo in the middle column which, if positioned with position:relative, will stay exactly where it is, meaning once the browser size is reduced everything moves and it sits there in the wrong place. Same with fixed and absolute. But I want it in a specific place, and preferably all the other elements too, but positioning with top: and left: doesn't seem to work unless it's set to relative? I don't understand, how are you supposed to position everything? Use a div for each element? Sorry, I'm not sure whether this even makes sense, I'm going to see whether my husband will put the page online for me and hope it doesn't look like I'm advertising

Well, not at the moment. I could post the code? I may be able to get it online but am worried it might count as inadvertant advertising due to the fact it's going to be our company website :/

Thanks, but that just didn't work. I'm not viewing this in an old browser, either, though maybe there's something wrong with it... Also, sorry to add another question to this topic, but I also have an image that doesn't stay within its div on scaling. Is that normal and is there a way to force it to?