I recently got a few designs made and am trying to slice and code them to get better at CSS. On my first design, I ran into some issues.
First, do I have too many divs? I have a wrapper around each section to allow the expandable background section on the left and right of the content to be a different color than the content itself. I also had to use a conditional style to get IE to position the ul correctly. Is there a better way to do that?
Second, would I make a div for each colored block in the content section? That would give me a white, blue, white, gray, and blue div all stacked onto each other. The main issue with that is going to be the parrot and the great price $199 emblem that breaks out of the div.
Here's what I got:
http://www.astigmaproductions.com/
Here's what it should look like:
http://www.astigmaproductions.com/ap.jpg
You're not using a reset css, which will lead to crossbrowser issues. Consider adding one. You will run into IE issues and in this case a conditional style is the way to go. But adding a reset will lead to less IE problems.
Since the parot breaks out of its div you shouldn't break everything into multiple divs. There is a gradient that is non-linear and lots of graphics going on in this header. Just grab the image and make it a big background (blue bg + grey line + parrot) and it should work. Add the skype and co. icons on top of that as well as the text.
If you want the text to be anti-aliased, try using sIFR or add the text to the main background.
That's pretty much it from what I see, you just need to start working and see if you run into issues.
Related
I'm building an adaptive design using CSS and I'm wondering how I can keep things nicely aligned. Two examples so far: my page: http://www.spabc.com/drupal/ now, I would like to keep the check-rates_btn aligned with the titleimg as the browser window resizes but due to the image being set a width of 95%, I can't really keep things aligned. I'd also like to keep the logo nicely aligned with the image i.e. where it hangs over titleimg, I want to keep the room that it hangs over = to the distance on the right side to the border of the titleimg. I tried to depict what I mean here: The distances depicted with red lines should stay equal. How do I do this?
You will need to adjust the styles for check-rates_btn and titleimg accordingly using CSS Media Queries.
Unfortunately, you are using Drupal and have too many cached CSS files for me to look through, but the ones I did look at (layout.css and system.theme.css) only had a few specific media queries that were not altering these classes.
Hope this helps.
My test site is at: http://www.stagecraft.org/msi/
On the third "page" (Portfolio) I have three images that flip around and show text on the "back". I have two problems:
I can't get the text where the architect, owner, and GC are listed to change. I have tried creating a class of .spinbody but when I apply it, the text doesn't change. I need a different text styling/size here.
The images aren't fitting their rectangular regions exactly. They seem to be shifted "down" a bit. The images are 300px x 500px and the regions are as well. But the images are offset from the regions.
Any ideas where my mistakes are? I am pretty much a novice and have been piecing this code together.
Thanks in advance for any assistance!
Steve
What style are you trying to aply to this text? There are already
css rules that style it and you may have some CSS overrides that
block your changes. You could add !important at the end of your
new rules but it isn't the best solution. The best solution would be
to inspect your CSS with some browser developper tools (ex: firebug
for firefox) and see how you can itegrate your new CSS rules to the
existing code.
For the second problem, there is a top-margin aplied to the images
so they are shifted down. the margin is aplied on #section1 img
line 173 of msi_style.css you could delete it but be sure it
won't change the other images too.
EDIT
The text size on the back of the flip card comes from .intro p on line 190 of msi_style.css
Check on to the firebug where exactly your css rules collapsing and try to make your this rule more specific using element and id combination...
Or for time being you can fix it by using !important at the end of your new rules but it isn't the best solution....
Certain fonts have a variant for outline and filled, and if you use these on overlapping text it draws an outlined or shaded stroke over the filled text. This is different than just an outline that strokes the text like -webkit-text-stroke-color would give you, since sometimes the filled font contains shading or other details.
Here's some examples of fonts designed to be used this way.
http://www.myfonts.com/fonts/matchandkerosene/duotone/
http://www.myfonts.com/fonts/scrowleyfonts/stomp/
I was sort of able to get this to work using CSS like this:
http://jsfiddle.net/6SakC/2/
This creates two H1 spans and uses the top-margin to move the outline one atop the filled one.
However, this doesn't seem ideal to me. Two problems:
I don't want to duplicate the text in the html.
I have to guesstimate the top-margin by trial and error.
If the text wraps, this doesn't work anymore.
Is there a better way to do this? I can live with having to duplicate the text, but I'd really like a more automatic way to do the positioning.
Thanks!
You can place the outline text inside the h1 and use absolute positioning instead of estimating the margin, as in this jsFiddle: http://jsfiddle.net/6SakC/4/
That also solves the problem with the text wrapping.
To avoid duplicating the text in the markup, you can use JavaScript to create the duplicate text, as in this jsFiddle: http://jsfiddle.net/6SakC/5/ (This might not be the best idea, though, since the text might get a moment to display without the outline, and JS is occasionally disabled in the browser settings.)
I am using html5 and am trying to create a rough edged seamless border(top, sides + bottom).
I am aware ie8 does not support the CSS3 border image. IE8 is as far back as am willing to cater for.
So am using 3 div's to have the background image display, the only problem is depending on the length of the content, the bottom background image does not align nicely and make the box appear seamless, due to the repeated middle image being cut off prior to the point where the border merges.
I have used a brush in photoshop to create the jagged container. I have had a nose around about this but can not find a solution to fit.
The solution is to set a specific increase of height increment for your content area. This can be done in a couple of ways:
If your content is mostly text, you can set your line-height and/or the height of any other used elements to be the desired increment (or a multiple thereof) and hope for the best.
If this will not work, the only other way would be to use JavaScript.
Here are a couple discussions of this very challenge, including some thoughts on using line height and some starts at workable JavaScript code:
http://doctype.com/any-way-increase-hieght-div-specific-increment
http://www.dynamicdrive.com/forums/showthread.php?t=64034
At work i am given a task to create a simple menu UI that resembels the Ribbon UI. It doesn't have to be that sophisticated or nice looking, but it needs to have a specific look that I don't know how to do.
I need to make the bottom of a selected tab round, but facing outwards, just like in Office. It was easy to make the top of a selected tab round using CSS3 (border-top-left-radius:4px and same for right), which is supported in all modern browsers (we don't need round corners on old browsers. They can easily upgrade if they want to :) ). But if I use border-bottom-left-radius:4px on a selected tab, it has the normal round bottom corner, facing inwards, not outwards (sorry for my bad english).
Can it be achieved somehow using CSS3?
If I understand correctly, than this is what you want: http://jsfiddle.net/U84ng/
This is faking a little, and gets more complex when your background is an image instead of solid color. But unless it's an image that changes horizontally (ie. not a gradient or pattern) and your tabs aren't flexible in width (depending on text width, rather than one fixed in css) it can be done.