Group: http://groups.google.com/group/sitedesign/topics
- Layout Tutotial [7 Updates]
- Ian Jamieson <ian@cogocreative.co.uk> May 28 08:18AM +0200
I'd need to know more. Are you talking about a grid based layout?
- Artist <SitePro@gmail.com> May 28 11:26AM -0700
Yes. It is grid based, but theoretically I could also make it responsive
with a different set of css instructions for mobile based handhelds.
A perfect example is at
http://www.s-dakota.com/
Notice how there is a line right through the layout and there is no menu?
The actual file that I am playing around TRYING to make some sort of layout
with is at...
http://www.s-dakota.com/layout.html
That one is driving me nuts. It IS supposed to be a CSS tables build
layout, but for some reason the jumbled mess comes out, and I cannot make
sense of it.
As I said, I have many such examples. Even the WDADG.org site is one of
them. Right now, the single column layout is what you see, but the
problem is that I am having the same issue with the double column version.
So, as these are related to using CSS <div> correctly, and I have NEVER
been able to do it right because I can't get a handle on it, I am not
looking for a fellow designer to correct my mistakes and leave me in the
dark (which is always what happens here). I am looking for a good
tutorial on how to use CSS to structure my HTML <div> tags correctly and
appropriately that will allow me to walk away with a "that makes sense, I
can't believe it was always that simple." kinda feeling.
CSS layouts have been around a very long time, and even though I have been
using them, if I can't figure it out for each and every instance I go to
use them, it is starting to make less and less sense in doing so. I'm
embarrassed by my own work, my inability to get certain things right, and I
JUST WANT TO GET IT.
Thank you.
-Doug
On Wednesday, May 28, 2014 1:18:37 AM UTC-5, COGO wrote:
- Joni Mueller <joni@jonimueller.com> May 28 01:42PM -0500
I am not sure background: none; is the right choice in a lot of instances (I'd likely use background: transparent; or background: inherit -- depending on what you want to achieve.
You have no floated elements, which is a good thing, but the positioning may need to be tweaked.
I can take a closer look later this evening. I struggled with moving away from tables back a few years and like you, I couldn't get things to lay down the way I wanted them at first, but I finally had m lightbulb moment, and so will you. :)))
Joni Mueller
Pixelita Designs
www.pixelita.com
________________________________________
From: sitedesign@googlegroups.com [sitedesign@googlegroups.com] On Behalf Of Artist [SitePro@gmail.com]
Sent: Wednesday, May 28, 2014 1:26 PM
To: sitedesign@googlegroups.com
Subject: Re: [WD&D] Layout Tutotial
Yes. It is grid based, but theoretically I could also make it responsive with a different set of css instructions for mobile based handhelds.
A perfect example is at
http://www.s-dakota.com/
Notice how there is a line right through the layout and there is no menu?
The actual file that I am playing around TRYING to make some sort of layout with is at...
http://www.s-dakota.com/layout.html
That one is driving me nuts. It IS supposed to be a CSS tables build layout, but for some reason the jumbled mess comes out, and I cannot make sense of it.
As I said, I have many such examples. Even the WDADG.org site is one of them. Right now, the single column layout is what you see, but the problem is that I am having the same issue with the double column version.
So, as these are related to using CSS <div> correctly, and I have NEVER been able to do it right because I can't get a handle on it, I am not looking for a fellow designer to correct my mistakes and leave me in the dark (which is always what happens here). I am looking for a good tutorial on how to use CSS to structure my HTML <div> tags correctly and appropriately that will allow me to walk away with a "that makes sense, I can't believe it was always that simple." kinda feeling.
CSS layouts have been around a very long time, and even though I have been using them, if I can't figure it out for each and every instance I go to use them, it is starting to make less and less sense in doing so. I'm embarrassed by my own work, my inability to get certain things right, and I JUST WANT TO GET IT.
Thank you.
-Doug
On Wednesday, May 28, 2014 1:18:37 AM UTC-5, COGO wrote:
I'd need to know more. Are you talking about a grid based layout?
On May 27, 2014 11:16 PM, "Joni Mueller" wrote:
Can you give me a sample of what you mean? What kind of layouts are you attempting to create? Do they need to be responsive as well?
Joni Mueller
Pixelita Designs
www.pixelita.com<http://www.pixelita.com>
________________________________________
From: sitedesign@googlegroups.com<mailto:sitedesign@googlegroups.com> [sitedesign@googlegroups.com<mailto:sitedesign@googlegroups.com>] On Behalf Of Artist
Sent: Tuesday, May 27, 2014 4:10 PM
To: sitedesign@googlegroups.com<mailto:sitedesign@googlegroups.com>
Subject: [WD&D] Layout Tutotial
l have had a great deal of difficulty stacking CSS divs. I always have, but eventually I'd figure it out and get it right. Unfortunately, I have about half a dozen website layouts nearly done t to use for myself now, but they all suck because there gaps between the blocks (divs).
Can anyone point me to a decent CSS layout tutorial that will finally explain how to style divs correctly so that they are finally usable to me... so that I can finally get it and actually get something done?
Thanks!
Doug
--
--
You received this because you are subscribed to the "Web Design and Development" group at Google Groups. Messages are prefixed with [WD&D] in the subject. No spam is allowed. Be civil, be professional; try to be helpful & mind your netiquette. All posts are Copyright the original author and the Web Design and Development group. No reproduction of this content is allowed in any electronic or printed form outside the group at Google Groups and the http://www.WDaDg.org website. Any unauthorized use of our copy constitutes illegal Copyright infringement and may well be prosecuted to the full extent of the law. Digital Signature: $©"[W|D|&|D]g"|^|!SiteDesign@GG||#%$
To post to this group, email SiteDesign@googlegroups.com
To unsubscribe, email SiteDesign-unsubscribe@googlegroups.com
For more options, visit this group at http://groups.google.com/group/SiteDesign?hl=en
---
You received this message because you are subscribed to the Google Groups "Web Design and Development" group.
To unsubscribe from this group and stop receiving emails from it, send an email to sitedesign+unsubscribe@googlegroups.com<mailto:sitedesign+unsubscribe@googlegroups.com>.
For more options, visit https://groups.google.com/d/optout.
- Joni Mueller <joni@jonimueller.com> May 28 01:45PM -0500
Here are some tutorials that discuss the box model so hopefully this will help you sort it out. I know you've been building sites for quite a while so forgive me if these links seem elementary. Some of the material discussed is basic, but who can memorize all the behaviors?
http://css-tricks.com/the-css-box-model/
http://learn.shayhowe.com/html-css/opening-the-box-model/
http://www.brainjar.com/css/positioning/
http://www.smashingmagazine.com/2011/09/19/css3-flexible-box-layout-explained/
Joni Mueller
Pixelita Designs
www.pixelita.com
________________________________________
From: sitedesign@googlegroups.com [sitedesign@googlegroups.com] On Behalf Of Artist [SitePro@gmail.com]
Sent: Wednesday, May 28, 2014 1:26 PM
To: sitedesign@googlegroups.com
Subject: Re: [WD&D] Layout Tutotial
Yes. It is grid based, but theoretically I could also make it responsive with a different set of css instructions for mobile based handhelds.
A perfect example is at
http://www.s-dakota.com/
Notice how there is a line right through the layout and there is no menu?
The actual file that I am playing around TRYING to make some sort of layout with is at...
http://www.s-dakota.com/layout.html
That one is driving me nuts. It IS supposed to be a CSS tables build layout, but for some reason the jumbled mess comes out, and I cannot make sense of it.
As I said, I have many such examples. Even the WDADG.org site is one of them. Right now, the single column layout is what you see, but the problem is that I am having the same issue with the double column version.
So, as these are related to using CSS <div> correctly, and I have NEVER been able to do it right because I can't get a handle on it, I am not looking for a fellow designer to correct my mistakes and leave me in the dark (which is always what happens here). I am looking for a good tutorial on how to use CSS to structure my HTML <div> tags correctly and appropriately that will allow me to walk away with a "that makes sense, I can't believe it was always that simple." kinda feeling.
CSS layouts have been around a very long time, and even though I have been using them, if I can't figure it out for each and every instance I go to use them, it is starting to make less and less sense in doing so. I'm embarrassed by my own work, my inability to get certain things right, and I JUST WANT TO GET IT.
Thank you.
-Doug
On Wednesday, May 28, 2014 1:18:37 AM UTC-5, COGO wrote:
I'd need to know more. Are you talking about a grid based layout?
On May 27, 2014 11:16 PM, "Joni Mueller" wrote:
Can you give me a sample of what you mean? What kind of layouts are you attempting to create? Do they need to be responsive as well?
Joni Mueller
Pixelita Designs
www.pixelita.com<http://www.pixelita.com>
________________________________________
From: sitedesign@googlegroups.com<mailto:sitedesign@googlegroups.com> [sitedesign@googlegroups.com<mailto:sitedesign@googlegroups.com>] On Behalf Of Artist
Sent: Tuesday, May 27, 2014 4:10 PM
To: sitedesign@googlegroups.com<mailto:sitedesign@googlegroups.com>
Subject: [WD&D] Layout Tutotial
l have had a great deal of difficulty stacking CSS divs. I always have, but eventually I'd figure it out and get it right. Unfortunately, I have about half a dozen website layouts nearly done t to use for myself now, but they all suck because there gaps between the blocks (divs).
Can anyone point me to a decent CSS layout tutorial that will finally explain how to style divs correctly so that they are finally usable to me... so that I can finally get it and actually get something done?
Thanks!
Doug
--
--
You received this because you are subscribed to the "Web Design and Development" group at Google Groups. Messages are prefixed with [WD&D] in the subject. No spam is allowed. Be civil, be professional; try to be helpful & mind your netiquette. All posts are Copyright the original author and the Web Design and Development group. No reproduction of this content is allowed in any electronic or printed form outside the group at Google Groups and the http://www.WDaDg.org website. Any unauthorized use of our copy constitutes illegal Copyright infringement and may well be prosecuted to the full extent of the law. Digital Signature: $©"[W|D|&|D]g"|^|!SiteDesign@GG||#%$
To post to this group, email SiteDesign@googlegroups.com
To unsubscribe, email SiteDesign-unsubscribe@googlegroups.com
For more options, visit this group at http://groups.google.com/group/SiteDesign?hl=en
---
You received this message because you are subscribed to the Google Groups "Web Design and Development" group.
To unsubscribe from this group and stop receiving emails from it, send an email to sitedesign+unsubscribe@googlegroups.com<mailto:sitedesign+unsubscribe@googlegroups.com>.
For more options, visit https://groups.google.com/d/optout.
- "Michael J. Fuhrman" <mfuhrman@enetarch.net> May 28 12:17PM -0700
Doug,
A long time ago, I build a javascript and css library that created
windows menus using DIVs and SPANS. It's really old code, but it could
provide you with a clue to what is missing.
If you'd like to look at it, contact me through skype. ENetArch
Mike,
--
On 5/28/2014 11:26 AM, Artist wrote:
- Liam Kenneth <liam.kenneth89@gmail.com> May 28 09:35PM +0100
if you remove the table-cell from #ContentArea and the br tag above it. the
layout then looks pretty good!
On Wed, May 28, 2014 at 8:17 PM, Michael J. Fuhrman
- Liam Kenneth <liam.kenneth89@gmail.com> May 28 09:40PM +0100
[image: Inline image 1]
No comments:
Post a Comment