I have been using Serif Webplus for some time and I really like it. It is so easy to use BUT it cant create responsive sites so I thought I really should learn HTML/CSS etc and do it properly. I am using the trial of Dreamweaver CC but am trying to use code view as much as possible. I am really struggling with positioning items. I understand the basic idea of using css to style and control elements but the positioning is doing my head in.
So far I have given almost every element an ID which may or may not be correct, and am probably using too many DIVs.
The above image is an example of what I am trying to do. As you can see, it consists of three graphics and some text. The open and close quotes are both graphics. How would I create this using html and css? The image was captured from webplus.
If my site was going to be non-responsive I would have tried absolute positioning but I don’t think I can do that for a responsive design.
Also how do I overlap images or images overlapping text?
I hope someone can guide me in the right direction.
for the quote, I’d use a <blockquote> element and have padding around each side. That padding would be slightly more than the width/height of the quote mark image or images. You could use one image for the quote marks, creating a “sprite” image. That is, a transparent image with the quote marks spaced wide apart. Or you could have them as separate images. It doesn’t matter much. Anyhow, either way, place the quote marks as backgrounds on the blockquote, placing them top left and bottom right. (You are allowed to have multiple bg images on an element, but if you want to support older browsers, you could, say, devise a second element onto which one of the quote marks is attached, or use a pseudo element on the blockquote like :after.
Indeed, if the smiley face is part of the quote, you could also increase the padding on the blockquote and add that as a top right bg image too, of perhaps attach it to the heading instead in a similar way.
Don’t limit your thinking ( this is the perfect time, now that you are trying to learn and have not yet acquired any bad habits or set routines. ). BTW, you can use AP in responsive and mobile layouts ( FIXED positioning is a bit more risky tho)
( some of this ralph may have already said)
you could achieve the effect with CSS3 multiple bg images and padding; caveat being IE 8 and older
You could use a combination of pseudo elements ( blockquote:before and blockquote:before:after. ) for your quotes to either use images OR text . you could position this using floats and margins, or AP . then use the smiley as a bg image for the block quote.
Consider the specific situation…
a) does EACH block quote come with a smiley? No? then why not have the smiley be part of your headline’s bg, have your first paragraph tag inside the block quote be the open quote image, and your blockquote tag be your close quote
b) Does each block quote have a ‘thank you?’, then that probably warped in a tag as well… then you have at least 3 tags for your 3 images ( Blockqoute, at least one P and the tag for your thanks)
just a few ways to approach this… before even starting to code. hope that helps
I can see that when creating a site there are many different ways to solve a particular problem. I will try your suggestions.
dresden_phoenix, you say you can use AP with responsive design. How would you do this? I gather, from what I have read on various forums, that absolute positioning is bad. To me it seems quite easy. I tried using AP with the smiley as a test and it was fine but when I resized my browser window it did not move with the other content.
I have so many other questions but I maybe I can just add a quick one here.
I am trying to create two columns of text in the right two-thirds of my page.
I have created a “left_column” div and a “right_column” div.
I am trying to create the two text columns inside the “right_column” div.
The text on the page has the “p” tag applied to it. When I set half the right column text to float right all of the text goes right, I assume because I am telling all p text to go right.
Do I need to assign ID’s to virtually everything in order for me to apply unique styling or layout options to it?
How would you set some text to float left and some to float right?
The key is to set the parent element to position: relative. That way, the absolutely placed element will always stay positioned relative to the parent element, even as it resizes. Just make sure to give the parent element a padding area in which you place the absolute element—so that there’s always some room for it.
How would you set some text to float left and some to float right?