logo-dw

Go Back   Dreamweaver Club Forums > Hand Coders Forum > HTML and CSS
Register FAQ Members List Search Today's Posts Mark Forums Read

Reply
 
Thread Tools Display Modes
Old 05-18-2012, 01:08 PM   #1
pamr
 
Join Date: May 2012
Posts: 6
Default Dreamweaver CS5 Media Queries

I'm trying to add media queries to my site so it looks okay on the ipad and iphone. I can't get it to work though! Everytime I edit the tablet.css page, the main index.html page gets edited too. How can I get this to work? I'm at a complete loss. Here's the URL: www.worryfreeclaims.com. Thank you!
pamr is offline   Reply With Quote
Old 05-22-2012, 10:07 PM   #2
gentleone
gentleone's Avatar
 
Join Date: Nov 2009
Location: Rhodes, Greece
Posts: 2,837
Default

Okay... I see a an url here. Looking at the CSS I see that you didn't set media queries at all.

You should have something like this:
HTML Code:
<link href="mobile.css" rel="stylesheet" type="text/css" media="screen and (min-width: 320px)"  />
<link href="tablet.css" rel="stylesheet" type="text/css" media="screen and (min-width: 768px)" />
<link href="desktop.css" rel="stylesheet" type="text/css" media="screen and (min-width: 1024px)" />
Or you can just make one stylesheet and set the media queries in there.

But! Looking at that homepage it's only images. That's not how you should develop websites and this is certainly not going to work on a small screen. You should use real text like on the other pages and align everything properly. I recognize the 1, 2, 3 boxes which I gave you an example code for yesterday. if you're not up to that, then changing layouts with media queries is really tough. You must understand at least the basics of CSS and how the normal flow of the document and how floats works.
Your navigation for instance should be an unordered list which would be in the first place the right and semantic choice and it will be easier to change (with media queries) if the viewport gets smaller such as the mobile phone.
__________________
www.gentlemedia.nl

Last edited by gentleone; 05-22-2012 at 10:11 PM..
gentleone is offline   Reply With Quote
Old 05-23-2012, 12:59 PM   #3
domedia
Administrator
domedia's Avatar
 
Join Date: Dec 2003
Posts: 9,730
Default

Merging threads.
domedia is offline   Reply With Quote
Old 05-23-2012, 02:30 PM   #4
pamr
 
Join Date: May 2012
Posts: 6
Default

Thanks so much for your help. I created a test page where I split everything up in the CSS so not everything is an image. The featured image with that text is still a flat image though, mainly because I don't know how to fix it. However, it's coming from the external CSS stylesheet instead of within the HTML page. I hope this makes sense!
I've tried adding media queries to the site before, but when I alter, say, tablet.css, it edits the main stylesheet too. For example, the featured image is 960px. When I write code for the featured image in tablet.css and import a photo that's 700 px or something, that 700 px image also shows up in the main CSS. I feel like I'm missing something but I can't tell what it is.
pamr is offline   Reply With Quote
Old 05-23-2012, 06:18 PM   #5
gentleone
gentleone's Avatar
 
Join Date: Nov 2009
Location: Rhodes, Greece
Posts: 2,837
Default

I'm not sure what you mean. Do you have that test page online?
__________________
www.gentlemedia.nl
gentleone is offline   Reply With Quote
Old 05-23-2012, 06:28 PM   #6
pamr
 
Join Date: May 2012
Posts: 6
Default

First I want to thank you for just even reading my posts!
I created a test page and started from a DW template to figure this craziness out. I'm slowly starting to get the hang of it, but I'm having difficulty placing images and text while making sure everything is a percentage (so the width is 100% instead of 960 px). I'm also having trouble with the footer since it's one huge graphic. Actually, everything is a graphic but I don't know how to build some of it in straight HTML. Do you have any tutorial links you'd recommend? I'm checking out the Media Queries tutorial on DW Club right now.
www.worryfreeclaims.com
www.worryfreeclaims.com/test
pamr is offline   Reply With Quote
Old 05-23-2012, 07:01 PM   #7
gentleone
gentleone's Avatar
 
Join Date: Nov 2009
Location: Rhodes, Greece
Posts: 2,837
Default

I'd recommend to start with learning the basics of HTML & CSS. Hacking around a DW template without really knowing what you're exactly doing will give you a hard time. I also can't explain how to do all that's necessary through DW design view. I work with code, so I'm useless explaining things regarding design view.

HTML & CSS is not that difficult once you understand how the natural flow of a HTML document is, how the CSS box model works and how to position elements with CSS. These are things that you really need to know before even thinking of working with media queries.

Please don't get me wrong, because I really don't want to offend you, but if you don't know how to code that header image, then working with media queries is a level too high for you. The thing with media queries is that you can reposition elements or swap /override background images based on a certain screen width (breakpoint), so knowing how to position elements with CSS (floats, position property, display property, etc.) is a must with media queries.

I'd recommend to start learning the basics at this site otherwise you will hit wall after wall after wall.
http://htmldog.com/guides/
__________________
www.gentlemedia.nl
gentleone is offline   Reply With Quote
Old 05-23-2012, 07:02 PM   #8
pamr
 
Join Date: May 2012
Posts: 6
Default

No offense taken! I've only made extremely basic HTML sites before. I'm not a developer, but being forced to be one :/ thank you for all your patience and the link!
pamr is offline   Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 09:30 PM.


Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Copyright 2006 DreamweaverClub.com