SitePoint Sponsor

User Tag List

Results 1 to 24 of 24
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2007
    Posts
    55
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Images and text in rounded boxes

    OK, here is a image of what I want to learn to do in CSS correctly!

    www.nogglevideoproductions.com/sample.jpg

    Let me start off by saying thanks to those of you who have helped me so far with my CSS "schooling"!

    Now, this image is of an actual page (not live yet) created in DW with "Layers". As you can see, even in FF, the alignment is off. You can imagine what it looks like in IE6. Yes, I need to include IE6 because who knows what these various folks use as a browser?

    We all know how you guys feel about DW and Layers...

    This is why I want to resolve this and get out of this trap and do it correctly.

    So, I will break down in steps what I have done to create this starting with the outer area first and moving in to the center of the layout.

    1) In DW, I set the BG color to the brown that it is on the page properties.

    2) The banner at the top was created in Illustrator (including the Navigation which my thought was to use something to activate what looks like links. Image Maps maybe?

    3) Below the banner in the lighter brown box (also created in Illustrator) you see several round cornered rectangles. These are part of the Illustrator image. FYI, the Illustrator images are all converted to jpg and that is what they are in the actual DW layout. The block 3px border around this entire box is done in DW, not Illustrator. Actual Illustrator converted jpg here: www.nogglevideoproductions.com/video.jpg

    4) This is where the Layers come into play because I can't get anything else to work. Notice that the rectangular photos of people and the Navigation (CLICK PHOTO FOR VIDEO) are slightly out of layout with their corresponding round cornered rectangle placeholder. These need to be centered by "superimposing" them over the round cornered rectangle placeholder.

    So, I guess this is the starting point of what do I do from here to:
    A) get the layout that I want
    B) create a complient page/site

    5) this is another Illustrator jpg for another page that will also sit below the same banner above to hold Flash video with the little box being for a text caption... www.nogglevideoproductions.com/video-flash.jpg

    Anyone that can help me out with this learning curve would be greatly appreciated. I have been over this for more than a month now and still way to slow. I have even resorted to trying to modify templates and that really isn't working either.

    Thanks, Jay

  2. #2
    SitePoint Enthusiast
    Join Date
    Aug 2007
    Posts
    55
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    anyone willing to help via Skype?

    Hi all:

    please see my post: "I just can't wrap my head around this"

    I have a feeling that I am missing some important info with CSS that is causing me to have so many problems.

    If I could actually have a conversation with someone about CSS basics, I could probably figure out what I am missing.

    Anyone have a few minutes via Skype to do this?

    It would sure be more effective than trying to explain and "bat emails back and forth".

    Jay
    Last edited by Paul O'B; Oct 18, 2007 at 16:16. Reason: Please don't double post and note that thes are public forums and not for procuring private help

  3. #3
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,122
    Mentioned
    29 Post(s)
    Tagged
    2 Thread(s)
    Hi Jay,

    That design is hard to code the way I like to.
    And it's probably not worth the effort doing it 'the right way' in this instance.
    Here's my shot at what you are after, obviously the images need tweeking and you could nudge the positioning of the elements using negative margins.

    I don't think the design looks as good as something simpler so when faced with a design problem like this I would generally choose to go back to a blank canvas and make another design that's easier to work with.

    http://www.yellowshoe.com.au/examples/coosbaytv/

    Most people who create designs that are really unstructured like this opt for absolute positioning, there's nothing inherintly evil about it, it's just that the layout will break when the font-size changes.
    You can't use layers because it creates bloated code, just learn how to position the elements yourself and understand what the CSS is doing.
    For the left blocks give them a width, left:0; and a top value, for the right blocks give them a width, right:0 and a top value.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    That design isn't very web friendly I'm afraid

    To do a good job on that is going to take a lot of work and will mean breaking those round images into fluid round boxes that can expand and contract when text is resized. You will need to re-slice then either into four corners for each box, or cap then top and bottom and

    It's never a good idea to just plonk your content over a fixed height image like that because it takes no account of what size the text may be and doesn't leave room for expansion.

    There are may examples of rounded corner tutorials about so just google them and you will find. Once you've worked out how to have your text in a fluid box then you can simply float the elements into place and create overlapping effect with negative margins and z-indexes.

    The rest of the page is straight forward except that you will need an image replacement technique for the nav but there are many about like this.

    You can't really ask us to build it for you so you are going to have to make a start yourself. Start from the outside in. Construct the page wrapper and then start on the header and navigation. Then move on to the round boxes in the centre.

    You can ask for help on the way but you need to get started on this yourself so that we have some code to pull to bits

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by me
    You can't really ask us to build it for you
    lol - Mark just did

  6. #6
    SitePoint Enthusiast
    Join Date
    Aug 2007
    Posts
    55
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Mark & Paul:

    Thanks for the honest feedback.

    Just to clarify, I wasn't asking for someone to "build the site for me" but rather by talking and asking questions (via Skype) find out what I was missing on this.

    I have tried on several occasions to take some tutorials and apply them to this project only to make a larger mess than I started with.

    If it is any consolation, I went to the library and checked out "Build your own website the right way using html and CSS". I have just spent over a month diligently (about 4 hours a day) reading posts, tutorials, videos... and thought by now I would at least have a general understanding of where to start.

    So Paul, if I understand you correctly, my building the "box" in Illustrator is a bad idea because of lack of "flow" of text? If you specify what the text properties are, why would they change or "flow" if all is compliant with the browsers you are coding for?

    I also know about CSS rounded corners but since I can't even get my text layout the same in multiple browsers, that isn't an option now, "simple" as it is.

    Thanks again for taking a look, Jay

  7. #7
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,122
    Mentioned
    29 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    lol - Mark just did
    It needs a lot of work, but should show the basics of how you could slice it up into flexible containers..

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    If you specify what the text properties are, why would they change or "flow" if all is compliant with the browsers you are coding fo
    Because you don't know what size text the user is going to use. It is beyond your control completely. You therefore have to ensure that whatever text size they use your layout is constructed in such a way as to still be usable.

    I can't even get my text layout the same in multiple browsers, that isn't an option now, "simple" as it is.
    It is simple if you do it right. There are no real cross browser issues apart from bugs. The rest of the time its simply down to the coder not understanding how things work correctly. Most browsers will display more or less the same if you do it correctly and take full control of what you are doing. Positional differences are usually down to not controlling the margins and padding correctly from the start.

    Quote Originally Posted by mark
    It needs a lot of work,
    Yes it does

    And here's the result

    http://www.pmob.co.uk/temp/coos-page.htm

    Now if you look at that page Jay and resize the text you will see that the layout doesn't break. The positions are the same cross-browser and its a very simple 2 column floated layout. There is nothing difficult here apart form working out how to manipulate the background images to produce a seamless layout.

    Quote Originally Posted by Jay
    I wasn't asking for someone to "build the site for me" but rather by talking and asking questions (via Skype) find out what I was missing on this.
    As I said before the forums aren't just for your own personal use to get people to contact you privately. What good would that be to everybody else. The place would just be strewn with useless threads and no-one would visit

    The forums are for everybody to learn and watch and see how things progress. They are not here just for you and the answers aren't just for you either. If you you want that type of help then you should post in the looking to hire forum and pay for it . There ends the lecture

  9. #9
    SitePoint Guru james_littler's Avatar
    Join Date
    May 2007
    Location
    Portsmouth, UK
    Posts
    775
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    the technique described by paul is the easiest way to produce rounded corners and is refered to as '9-slicing' as the box is divided into the 4 corners the 4 (l.h.side/top/r.h.side/bottom) in betweens and the large centre for the content, hence 9-slice. its pretty easy to understand, basically looks like a stretched o's and x's grid. just google 9-slice ;p

  10. #10
    SitePoint Enthusiast
    Join Date
    Aug 2007
    Posts
    55
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Because you don't know what size text the user is going to use. It is beyond your control completely. You therefore have to ensure that whatever text size they use your layout is constructed in such a way as to still be usable.
    OK, here is what bugs me and I don't understand:

    1) by learning CSS and using it to display the page how we see fit, we exercise our control to do so.

    2) If control is really in the hands of the user rather than designer of the page, what is the percentage of users that actually change these text settings from the default of the browser.

    Thanks, Jay

  11. #11
    SitePoint Guru james_littler's Avatar
    Join Date
    May 2007
    Location
    Portsmouth, UK
    Posts
    775
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    anyone with accessability issue may have their font size increased, as will many other people - just because they can. the user can also change default colours for a high contrast view. accessability is of paramount importance as you can have a webpage/site that looks great to you but if noone else can see it its not much use, the asthethics of the site come secondary to this... its often a bit if a comprimise depending on your target audience but its always better to air on the side of caution.. you never know you 'might' get a half blind granny buying acid house rave tickets from your site.. or something like that anyway


    the heirachy goes

    1. user !important
    2. author !important
    3. user
    4. author

    hope this helps a bit with your understanding
    Last edited by james_littler; Oct 19, 2007 at 13:35.

  12. #12
    SitePoint Enthusiast
    Join Date
    Aug 2007
    Posts
    55
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    accessability is of paramount importance as you can have a webpage/site that looks great to you but if noone else can see it its not much use
    This is exactly the problem.

    I am learning to build sites for the purpose of distributing video to convey my client's story rather than text and images because we live in a new culture that is media-centric.

    Along with "accessibility" for the minority of web users that are visually impaired for example, these folks won't find much benefit to my format of content anyway. They simply are not my target audience.

    It just seems to me that with all the advances in broadband (60% of US households) that CSS is moving backwards for the minority from this standpoint in the sense of "less code for quicker load".

    Our connectivity speeds have never been faster and yet now we are concerned about pages loading quicker? I am referring to the US, Asian and European markets.

    Yes, I understand that there are others in the world (Global Market) that may not be on broadband! I also understand that there are people with disabilities (my own son included) that also want access to content. But if accessibility really is the issue, how come I don't see any developers providing an mp3 audio version of content for the visually impaired? Wouldn't this be a simpler approach?

    If someone CAN'T read three pages of text of the body of a website, why do we continue to force those of us that can read to obtain the three pages of content via text? Maybe I don't want to read it, but instead take it with me on the go and listen to it while driving to work or some other multitasking situation. This is not true accessibility.

    All that said, my frustration in trying to grasp this concept of CSS and "do it the right way" is forcing me to question the motives behind what is considered "good code" versus "bad code". It is starting to look a little like subjective art from an objective point of view.

    So if I take the time to correctly learn the rules of CSS, only to find that the information that I obtained on "How TO..." is superseded by the users ability to change the browser format and the text size, my layout doesn't matter.

    But, now I know about the text rule (by accident) but still do not have an answer as to the percentage of people who actually take advantage of this option. If we are talking about single digits of a percent, why the concern? To me, it makes more sense to be concerned with the 20% plus that are still using IE6. Many of which are probably the same crowd in this country who are still on dial-up and need quicker code via CSS!

    Sorry for the rant, I just see this as several mixed messages and a matter of inconsistent logic.

    Jay

  13. #13
    SitePoint Enthusiast
    Join Date
    Aug 2007
    Posts
    55
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    actually, now that I think about it, this is the same argument in broadcast media as far as widescreen versus standard definition. Not to mention my colors and contrast can be perfect but if the "fat guy in his Lazyboy" has tweaked his tv's color setting, my video is going to look like crap. No control over that either.

  14. #14
    SitePoint Guru james_littler's Avatar
    Join Date
    May 2007
    Location
    Portsmouth, UK
    Posts
    775
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    it is consistant, the whole idea of the internet is that its accessable to everyone..that has access to a computer anyway..they're the ones that matter afterall ;p

    you can make your site look the way you want and have javascript performing all sorts of functions, you can have the most valid, pretty css in the world and it'll make no difference to those with java or css disabled. your site should be accessably by everyone, the main information should be thee no matter what, then those with the capabilities ie fast connection, good cpu, good gpu, can see the additional benefits that go towards making the site look pretty.

    bottom line is it can look just how you want it, as long as it is viable to those who cant/dont use css java flash etc you'll get no gripes here.

    just as an example, turn flash player off and go to a flash site..you'll soon realise what im on about.

    just a note, you said '60%of the us on bb'... well that means 40% are on dial up...40% isnt a figure to take light heartedly..its nearly half!!! thats alot of people and alot of prospective clients.

    51% of the worlds population are women...should we stop making mens toilets because there aren't as many of us??? HELL NO

  15. #15
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Jay
    1) by learning CSS and using it to display the page how we see fit, we exercise our control to do so.
    No, You have an obligation to your viewers to provide them with accessible content. This has nothing to do with CSS really and in fact you have a legal obligation not to discriminate against people with disabilities. The web is a unique medium and you can't really compare it with anything else. Besides why would you want to cut down your audience before you've even got any viewers.

    Accessibility and usability usually go hand in hand and the benefits far outweigh the extra work required. It is very narrow-minded to exclude viewers just because they may be disadvantaged in some way.

    2) If control is really in the hands of the user rather than designer of the page, what is the percentage of users that actually change these text settings from the default of the browser.

    Thanks, Jay
    More than you think. I am constantly resizing text to get a better view and if I'm out and about without my glasses then I can't see a thing on the screen unless I resize the text. Who are you to tell me what size text I'm allowed to read at?

    My Father is 83 and spends more time on the web than I do and he always has the text size increased. If a site blows to pieces when the text is resized then they lose another visitor and a lot of respect.

    Along with "accessibility" for the minority of web users that are visually impaired for example, these folks won't find much benefit to my format of content anyway. They simply are not my target audience.
    This is a very bad attitude and an often sited excuse and will make a lot of people angry. It's based on ignorance and mis-understanding and you have no right to tell people what they can or cannot view.

    You mention "accessibility" is for a minority but did you know that 1 in 3 people will be disabled at some time in their life. In the over 50's probably 80 or 90% can't read without glasses and would have trouble reading off a computer screen. You are not talking a minority here by any means.

    If you want to be a web designer then design for the web and not yourself.

    Sorry for the rant, I just see this as several mixed messages and a matter of inconsistent logic.
    Yours is the only inconsistent logic If you want visitors then make your site accessible to them all. It just needs a little bit of care and effort. You don't have to go over the top but you do have to think a bit further ahead that the photoshop image you are looking at. The web is a unique medium and isn't a piece of paper. You don't know what a visitor will be viewing your site on so you have to make it as robust as you can.

    If the site is just for you and your Mum then you can do what you like but if you are stepping into the real world with real people then you should do your best to accommodate them rather than irritate them. It's good business sense after all as the "customer is always right" .

    Besides as I said before it only takes a little work and you haven't commented on the mock up I did for you below.

    http://www.pmob.co.uk/temp/coos-page.htm

    As I said above you can resize the text right up and down and still have a page that looks pretty good. Why wouldn't you want to do that - I just don't understand!

  16. #16
    SitePoint Enthusiast
    Join Date
    Aug 2007
    Posts
    55
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    James:

    Thanks for the feedback and dialogue. I do love this stuff and appreciate the fact that you are willing.

    FYI, the quote button isn't working so the separate things below are your quotes from the previous post.

    I am still just a little concerned with a few points and if you can fill me in on what I am missing, we both win!

    The easiest thing for us to agree on is the flash concept;

    "turn flash player off and go to a flash site...".

    Been there, done that. I don't like Flash intros either and do not plan on going that direction just because it is "cool".

    I also agree that "the main information should be thee no matter what". This is about communication. My choice of media happens to be video rather than text an images.

    Now, I come from a TV Sales background and my boss and I used to go round on this. If viewers get your signal by both rabbit ears and cable then both are viable as potential customers of advertised products. The problem that I had with this is that IF the rabbit ear viewers were equal in relevance to the cable viewers, that is true. However, if the reason that the rabbit ear viewers were on rabbit ears and not cable was economic, then they probably don't have the funds to buy your advertiser's products either. So now, how relevant are they?

    "40% isnt a figure to take light heartedly..its nearly half!!! thats alot of people and alot of prospective clients."

    This is true with the BB/dial-up analogy as well and that is why I am not concerned with them for my specific purposes. Even more relevant is if I am working with Business to Business clients with the same approach, it is even more true as most of the business community are now broadband because it is actually more cost effective.

    "to those with java or css disabled. your site should be accessably by everyone"

    My points are that accessibility to everyone for my purpose is not practical or good business. The television industry has recently gone HD and before that, satellite and cable. If they wanted to be "accessible to everyone", this would not have happened as there are still people in the world that are only on rabbit ears and even black and white sets. Yet, they make offerings to those who are equipped to receive their signal.
    I am taking this approach for my clients to "use" the Net as the distribution channel to send out their video message to a targeted, not mass audience.

    So, if your belief on accessibility is because the Net is supposed to be accessible to all because that is what it's intension is, then fine. But the origin of Television was pretty much the same. Both will always have a restriction in that you have to have access to the "box" in order to take advantage of obtaining the content.

    The difference is that for the first time, small business has access to a distribution channel that is no longer restricted by cost alone.

    The very definition of Internet Marketing is one of "Narrow Casting" as opposed to "Broadcasting". This is what the Net does so well. So why do I need to create my content in a way that is more in line with a Broadcast oriented delivery system than a Narrowcast method?

    If you look at Podcasting or Blogging for example, they are very niche oriented if they are done correctly because that is what the Net does well. You can reach a narrow audience effectively with very little waste. Why then must there be this huge amount of extra energy used when creating this content to ensure it be accessible "to all"? Why not instead, take the "WAP" approach and have an alternative site available that the server recognizes the device and sends the appropriate version of the content?

    Accessibility, from my perspective is for everyone EXCEPT those that want to "tell their OWN story" because the new rules of proper web design make it almost impossible to achieve without access to someone with a working knowledge of those rules.

    I am trying to learn the rules for the benefit of my clients in offering them access to something that several years ago would have cost at least 10 times as much. But now I am being told that I have to learn to "tweak my settings" just "incase" the viewer has his text set to something other than default.

    Do we really even know who these people are? "those who cant/dont use css java flash etc"

    So if I am selling cars, don't expect me to include pre-teens in my marketing.

    Jay

  17. #17
    [Biped] LJK's Avatar
    Join Date
    Jun 2004
    Location
    In My Jammies
    Posts
    761
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Off Topic:

    Hear, Hear!
    And I'll give you some props for your helpfulness, Paul ;-)


    Seriously: I think it takes a paradigm shift as well...

    You have to let go a bit and imagine the skeleton underneath
    as being more important than the sheath that
    covers it. [How to get that information to as many people as
    possible since Content is King, yes?]
    Unless the client is in comitted to that particular layout
    [which was a bit old-school IMHO], why not investigate
    more flexible ways to present it?

    Think you'd enjoy Dan Cederholm's "Bullet-Proof Web Design" mightily.

    Have fun & good luck,
    El

    P.S.
    Quote Originally Posted by coosbaytv
    But now I am being told that I have to learn to "tweak my settings" just "incase" the viewer has his text set to something other than default.
    Well, you don't want it to look crappy to millions of folks who may have stumbled onto your site, despite coming from a niche you may not have marketed to - - do you?
    F-Fox 2.0 :: WIN :: el design :: US

  18. #18
    SitePoint Guru james_littler's Avatar
    Join Date
    May 2007
    Location
    Portsmouth, UK
    Posts
    775
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hey paul, where in hampshire are you from.. Im a portsmouth boy nothing to smile about really

  19. #19
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by coosbaytv
    Accessibility, from my perspective is for everyone EXCEPT those that want to "tell their OWN story" because the new rules of proper web design make it almost impossible to achieve without access to someone with a working knowledge of those rules.
    What exactly are you saying here? Just because you don't know how to do it then you won't. Who said web design was supposed to be that simple? You have to learn how to do it and I assume that's why you are asking advice here but you don't seem to be listening.
    Do we really even know who these people are? "
    Yes they are you, me ,my father and my son. They are the man next door and the one next door to him .

    You asked for help and advice and you got answers from people who know and who do this daily and have heard the same arguments 1000 times before. Fine, it's a free world and if you don't want to take good advice when its freely given then do it your own way but don't say you weren't warned.

    If a job's worth doing it's worth doing properly and that's always been my attitude and it always pays dividends.

    However this is the CSS forum and not the accessibility forum and I suggest you ask questions in the accessibility forum if you have more questions along these lines as you will get even more informed answers.

    If you have questions about how to achieve certain effects in CSS then fire away.

  20. #20
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Off Topic:


    Quote Originally Posted by james
    Im a portsmouth boy nothing to smile about really
    I'm about 15 miles away from you on the other side of Petersfield

  21. #21
    SitePoint Enthusiast
    Join Date
    Aug 2007
    Posts
    55
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul:thanks for the mock up, you are correct in that I didn't comment on it. It is pretty amazing? I can't believe you knocked that out in such a short time.

    Looking at your response, I hope that I actually was able to explain some of your concerns in my reply to James. And yes, there are probably many people that tweak there setting but locally here I have not run across them. It is mostly "plug and play". This is why my solution of using Quicktime h.264 codec is no longer viable for me because too few folks have it. I am in the process of learning to correctly encode and implement Flash video as 98% of users have it and it is easy to manipulate. This is also my frustration in that there are so many things I am having to learn simultaneously to make this work. It is overwhelming.

    I realize that I am "unorthodox" in my approach to the Net but I have specific reasons why and I hope that I made those fairly clear by now in this dialogue.

    I am not tying to purposely discriminate against anyone but rather properly spend my client's money to reach a select market and increase their business. Maybe I have not made this clear but I don't really take on clients that have products that "everyone" could be their customer. We aren't selling toilet paper or bottled water. This is why I am taking the approach I am. Again, Narrowcasting.

    As to your closing comment below:

    "As I said above you can resize the text right up and down and still have a page that looks pretty good. Why wouldn't you want to do that - I just don't understand!"

    The page looks freakin awesome! And I do want to do it. I do want to get into the web developer game to help MY CLIENTS SPECIFIC needs.
    The problem is, I CAN'T! I don't know how to make it work and I am asking for help as I first stated in the other posts I have made here at Sitepoint.

    The problem is that so far in other threads, I have met a lot of resistance because I mentioned Dreamweaver or Layers or some other "taboo" and that is where the help stops.

    Unfortunately, this is my starting point and I am working with the tools I have available. If I could already create the round corners in CSS, I would be doing that and all the other great things in this web version of "The DaVinci Code" that I am trying to unlock has to offer.

    Thanks, Jay

  22. #22
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    I can't believe you knocked that out in such a short time.
    Thanks - It took about 30 minutes start to finish

    The problem is, I CAN'T! I don't know how to make it work
    Yes you can.

    Once you get a grip on what can happen it's not that difficult to change a few things to make it work well enough for everyone. There's a steep learning curve at first but the techniques I used in your mock up will pay dividends everywhere else because they simplify things to some degree.

    If I run through the mock up quickly you will get a quick idea of how its was done. I did make this mock up simpler than it could have been especially for you

    The top of both boxes are one image.

    http://www.pmob.co.uk/temp/images/coo-top1.gif

    This is simply placed in the background of the first row which is this wrapper for the first two side by side boxes:
    Code:
    .top{
        background:url(images/coo-top1.gif) no-repeat 3px 0;
        width:778px;
        padding:48px 0 0 0;
    }
    Next we need a repeating section that supplies the middle colors and borders for both columns and we simply nest another div and apply this image to it.

    http://www.pmob.co.uk/temp/images/coo-mid1.gif

    Then we nest one more div so that we can add the bottom image to finish the effect.

    http://www.pmob.co.uk/temp/images/coo-base1.gif

    Next we simply create 2 elements to be floated left and one to the right in the middle of the nested divs. This is just simply 2 floats of correct width and floated into position with suitable margins.

    We must make sure the floats are cleared (see faq on floats) and then whichever column is longest the other column will follow suit because the main container is stretched which carries both the columns background.

    Here is the final html for that section.

    Code:
    <div class="top">
    		<div class="inner1">
    			<div class="top-base">
    				<p class="image"><img src="images/zimg4.jpg" width="300" height="160" alt="Example image" /><a href="#">Click for larger Picture</a></p>
    				<div class="text">
    					<h2>Text Heading</h2>
    					<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed mollis. Nullam laoreet leo eget ligula. Mauris tristique nulla id sem. Nunc laoreet libero quis nibh. Duis urna odio, laoreet in, adipiscing nec, blandit in, sem.</p>
    					<p> Vivamus metus nisi, rhoncus et, malesuada vestibulum, placerat ut, erat. Duis porttitor, nisl a egestas tempus, urna enim blandit arcu, at dignissim nulla magna quis nisi. Donec rhoncus.</p>
    				</div>
    			</div>
    		</div>
    	</div>
    As you see there isn't much to it really and apart from some padding to make room and a negative margin to pull the content into the background in places there isn't much more to do and doesn't need any hacks at all to be cross browser compatible.

    The other sections are the same but as you had inverse colours then there are some new images needed but the basic format is the same. I used new classes to keep it simple but I could have used more generic classes and added the changes in with multi classes instead.

    Now we have a pretty solid layout that will size up and down with ease and not break and in fact by thinking about the task in hand we have actually made the code simpler than if we had dived straight in.

    To be accessible in this case has resulted in less work because we thought about the problem beforehand and came up with a more robust solution.

    Hope that explains the logic behind this

  23. #23
    SitePoint Enthusiast
    Join Date
    Aug 2007
    Posts
    55
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Many thanks on the private lesson!

    As with most Americans, I want the instant gratification version of CSS and there is no such thing. I admit as a video producer, I wanted to jump in and offer my clients the same level of visually pleasing site that I am able to provide them with on the video. After all, look at cable TV. All the opens to the reality shows are intense motion graphics. Wasn't happening! Instant frustration instead of gratification.

    So, taking a step backwards and looking at the canvas, I think that we are both a lot closer in ideals as designers than what has been conveyed. We have to look at the "story" and then at the blank canvas of choice and ask, "What is the most effective way to go about telling this story?"

    Already being a VISUAL storyteller, I am frustrated because I can't get this damn "typewriter" to work! END OF RANT AND ANYTHING NON CSS...

    FYI: I did find the Eric Meyer podcasts and others on Search-This.com.

    I will be going through the Sitepoint book by Ian Lloyd as well.

    Hopefully sooner than later, I will be shedding the CSS training wheels and can start to ride with the big kids.

    Jay

  24. #24
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hopefully sooner than later, I will be shedding the CSS training wheels and can start to ride with the big kids.
    Good Luck

    Don't forget we all went through this learning curve and have probably said the same things as you. After a while I promise it will make sense and pay dividends.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •