It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center.
Closed 10 years ago.
Can anyone help by providing some samples, or examples to generate a css class to re-produce the effect similar to outlook.com's login page?
Where the page is centralized, splitted into 2 halves, the left side containing an image, and the right side with the login fields
not a downvoter, had a look at the Outlook site; nearly threw up when I had a look at the source code Outlook.com:
and their css is well... see for yourself.
What I'd do is build a page with two colums of predefined width (can use absolute values in this case). So a class of column width in pixels, and have this assigned to two sections - one featuring the image, and the other featuring the login/ everything else. If the page is resized to be smaller one should appear below the other - which is nice degrading.
You possibly could have an image and a login box without using CSS and somehow configure the login box to be middle aligned with the image - but it's a bad solution and certainly using deprecated code.
Related
It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center.
Closed 9 years ago.
So, when ive been looking at the code that goes along with a HTML website i noticed at the top where the Facebook, Twitter & Google logos are i searched for the HTML code where i found a link. However can someone explain why there is no <img src="...."> with the image and only <a href=".....">. This may be a novice question but its bugging me. Thanks for any help.
That <a> is probably styled with CSS to have a background image:
background-image: url('path/to/background/image.jpg');
It's somewhat common to just set the background-image CSS property on e.g. a link, instead of including a full image tag, in instances like a logo.
Without seeing the example code, one good reason for this might be because they have styled the tag to look nice when putting images inside the body of the page, but they don't want to apply those styles to their logo (it shouldn't have, probably, padding, margins, etc.). Using background-image is a way to avoid inheriting styles, without just overriding them explicitly.
For a more detailed discussion of when one is used instead of the other, you might try reading some of the answers in this other SO question: When to use IMG vs. CSS background-image?
It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center.
Closed 9 years ago.
The problem for mobile website is when the screen is landscape, it is widescreen, however, when the screen rotate and change to potartiat, it will become less wider and the CSS rules should be different in order to keep element display consistently. Therefore, I would like to know are there anyway to set when the landscape use landscape.css, when potarait use the potariat .css . Or I need to specific the css once $(window).resize{}? What is the standard way to handle the difference ? Thanks.
There is no silver bullet, what you should do depends on your website. Apple has some good documentation describing various approaches:
http://developer.apple.com/library/ios/#documentation/AppleApplications/Reference/SafariWebContent/OptimizingforSafarioniPhone/OptimizingforSafarioniPhone.html
Also have a look at Bootstap, which is an open framework created by Twitter to make things easier. http://twitter.github.com/bootstrap/
It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center.
Closed 10 years ago.
I'm coding a PSD template into html/css. The file consists of about 50 layers, which I have exported to PNG with a Photoshop script.
I started like this:
<div id="container_1">
<div id="container_2">
<div id="containter_3">
etc
</div>
</div>
</div>
Each layer is exactly the template size, with transparent background. At first I was happy with this approach, as it worked all right and allowed me not to worry about positioning much, but as the number of divs is now enormous, the code starts looking weird to me, not to mention the page loads really slowly now.
This must be a really stupid question to ask, but should I have cropped the images after exporting them from the PSD? Maybe even combine several layers together instead of putting them on the page separately one over another (there are several layers that create a decorative border around blocks with text)?
You could give this tutorial a try: http://net.tutsplus.com/articles/news/slice-and-dice-that-psd/
It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center.
Closed 10 years ago.
Appearance-wise, I am struggling to use CSS to create buttons for forms that will look ok cross-platform and be consistent with each other without using images. Is there such a thing? I just need add/delete/cancel/validate buttons for my form, but I'd like them to be uniform, and ideally work cross platform whether they are submit inputs, buttons, or links.
I really don't want to fiddle in Photoshop though.
I found this resource on Rediscovering the Button Element (archive.org), which shows it can be done with CSS and an image gallery for designers who don't want to create their own.
The solution looks ok, but there are complaints about what IE submits in the postdata in the comments, and about how IE renders the buttons in IE 6. How can I get around the issues with IE6?
There are a few options, one being color gradients. There is a way to do it in "The Big Three" (Firefox, Chrome/Safari, IE), and you can find a great example here.
A second option is to use jQuery UI, and that is a nice way that tends to be cross-browser safe, but the drawback is that it can be a lot to include for buttons.
The last option would be to use images as the background, but that can be a bit tricky in IE, or at least that I've found.
It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center.
Closed 11 years ago.
I am having a problem with margins / line-height in one of our websites.
I am using a Jquery script to create a Drop Cap effect in the first letter of each sections, that adds a class to them. There are two types of dropcaps, as you can see. Google Chrome is not rendering the smaller ones correctly. You can compare with other browser and see the difference.
Any idea about why is this happening? Is there a fix / hack for this?
I managed to fix it by adjusting your line-height on your p tags.
I adjusted it to 1.8 - anything less and the third line of copy can not flow underneath the drop cap.
See the images:
alt text http://web17.twitpic.com/img/126705561-f3957c59ceac70c081953d4ce00c9d5e.4c35afb0-full.png
alt text http://web14.twitpic.com/img/126705484-0b710f203011f574c598d698fffce8ab.4c35afb0-full.png
A workaround would be to set margin-top:-1px to the .dropcap CSS rule ..
must be some discrepancy on the size the text gets rendered..
Changing the line-height to 1.8em worked for me. But in general, this problem is very difficult to avoid because fonts are rendered differently across platforms and even across browsers.