How to implement this logo area in css?

HTML & CSS
1

I want to implement this design template in css:


and tried some methods then got following result: http://demo4wp.info/test1/,

but it doesn’t look the same. How to edit the logo area to get page which is pixel perfect?

2

Hi sizyh. Welcome to the forums. :slight_smile:

You’ll never get pixel perfection unless you use an image, as every browser renders fonts differently. What don’t you like about the current look?

3

hi,
I have some questions about psd to html.
How to determine the relative position of text and text or text and pic from design template, it’s difficult for me to write css that meet the standard.I don’t know when using line-height,padding, margin or other css property.
Just above example, how to determine the relative position of text?how to write css meeting most clients requirement.

4

You’ve done pretty well already. The styles you’ve used work pretty well. There are all sorts of extra things you can do, such as using top margin etc. But I don’t know what you want to change, so can’t give actual code yet.

It would be better not to have the <p> inside the span, but other than that, you’ve done OK.

5

Thanks for your reply.
I just expect a general idea about page layout.
this the whole design page http://i.imgur.com/aQXYtq7.jpg?1
please look at the text “home” in side navigation.how to determine the its relative position to the top border?maybe i can measure the pixel and use the margin-top to set the position,or i want a “fluid” page, so i measure the pixel of font and calculate a “em” value.Is this the best method from psd to html?

6

I actually measure the image and use pixels if the graphics weenie I’m working with/for actually complains like “there are only 20 px between these words but the comp clearly shows 22.6px” or similar.

One thing that REALLY helps is knowing which fonts were used, otherwise you’ll never get pixel-perfection.

If I know the line-height used in the comp I can measure that, put a coloured block over it, and now measure things like vertical distances and decide if I want bottom margin or what.

I measure with the GIMP, but any decent image editor has a measuring compass thingie somewhere.

If you are working with a “20px is not 22px” graphics weenie, you canNOT use em’s or fluid design. This is why if you want to deliver quality to the client you hope to your dear sweet god(s) that such a graphics person is not involved, because then you can write fluid and go by eyeball.

I usually am able to get away with using em’s, my favourite unit. But this is still always after someone has demanded a base font size in px.

So I usually have
body {
font: 100%/1.3 some, font, family;
}
and per-client
#container {
font-size: their-requested-px;
sometimes also their-requested-lineheight;
}

So now all my body/base fonts are whatever the browser thinks is “requested-font”, which is 1em, and I’m good to go. If someone whines a bit about sizes and knows what they want for things like headings (if they know they want some h2 to be only 14px instead of whatever the default is) then you give it a go in em’s (say, 1.2em) and you can check the px rendered using the browser’s debugger (somewhere by computed styles) to see how close 1.2em matches. Since most of my clients demand 12px, I don’t check mine anymore. I know which em unit will give me the other px they want, and the rest is done by eye. Same goes for margins, you can set them in em and then check what the browser made of it. Browsers will differ, but usually not hugely.

7

If you have a psd then you will know the size of the font exactly from the psd info and you can convert that into a similar size using ems based on the method that Stomme mentioned above.Ems will allow those fonts to scale nicely depending on user preferences although ultimately you have little control over what the user may have set as their default. However, that doesn’t really matter as long as you maintain a suitable relationship between your elements.

To find the distance between elements elements on the psd you will have to measure them. Most paint packages have a measurement tool. I use Fireworks and just grab the crop guide tool as it has a running total of the distance covered. You can use that as your margin or padding bearing in mind that you will also need to set the line-height and font-size of the text to make it all match up.

In fact I find it easier to just guess roughly first and then open firebug with ( a pixel perfect overlay) and just adjust the values in the firebug window until it matches the psd.

Regarding your logo then usually a logo is something you can’t change as it must be standardised (including the text it uses) as that is their company brand. So don’t make browser text out of text in a logo but use the whole image as it is and then use an image replacement technique to get the real information into the html (or include the text in the [URL=“http://www.456bereastreet.com/archive/200412/the_alt_and_title_attributes/”]alt attribute of the image).

8

Indeed, I should go for a complete image logo, which you can make pixel-exact (also in the letter-spacing: browsers have their own metods of text rendering, with differences in rounding the distances).
To get the logo text in the html, an easy way is to set the image as background-image, to write the plain text in the html, and then give the text a strong negative text-indent. Then the text is aboard (for pure text browsers and Google!), but invisible on screen:

<h1 id="logo">DesignBits - Simply Awesome Designs</h1>

#logo {
	margin: 0;
	padding: 0;
	height: 210px;
	background: url(images/designbits-logo-nw.png) no-repeat;
	text-indent: -9999px;
	}

While the <h1> has the height of the logo image, and a <h1> is a block element, the next element will be placed just under it. And if needed, that element can get a margin-top for some more distance.

An example with a start of a general idea about page layout you can find on:

Some remarks.

[LIST]
[]In general a 100% pixel-perfect website is not feasible. A small story about the difference between paper-design and webdesign: “[U]The Graphical Designer and the CSS Zen Guru[/U]”.
[]In your page the height of the two columns can be dangerous. If the visitor has set his/her font-size bigger or smaller, the columns can lose their equal height (and the background color). Solution is to use the “faux columns” technique, with a common background-image (not yet in the example).
[]Pay attention to the contrast of text and background. For the text “Simply Awesome Designs” in the logo (foreground-color: #A0A0A0, background-color: #454445) the contrast ratio is: 3,7:1. But according to the Web Content Accessiblity Guidelines ([U]WCAG[/U]) text (and images of text) must have a minimum contrast ratio of at least 5:1; better is at least 7:1. - In the example logo I made the contrast ratio: 6,0:1.
[]You can download the Contrast Analyser over here: [U]www.paciellogroup.com/resources/contrastAnalyser[/U][/LIST]
And last but not least:

[list]
[*]In your pseudo-screenshot [U]http://i.imgur.com/aQXYtq7.jpg?1[/U] I see in the bottom: “Powered by Wordpress”.
But … if is has to be a Wordpress-site, you can’t make a html/css design and drop it in Wordpress: that doesn’t fit. :rolleyes:
In that case, you have to do it just the other way: start with a Wordpress-template, and adapt it for what you need.[/list]

9
Off Topic:

Super cool to see you back, Francky. We’ve missed you. :slight_smile:

10

Good work Francky :slight_smile:

One small addition needed though to clear the floated columns: :wink:


body:after{
clear:both;
content:" ";
display:block;
height:0;
}
11

@Paul O’B:
Thanks for the compliment, Paul. Yes, of course the float clearing has to be added. - I stopped after seeing the “proudly Wordpress” line: to be or not to be Wordpress (or another CMS; and if so, which template will be used) will make quite a difference for the development of the site. :wink:

12

Thank you for your reply.
How do you complete page quickly?
I find http://designborg.com/ useful, which can get images and informations from psd layers.css3ps is a ps plugin which can transform psd layers to css3.But I don’t think these tools are enough,some people can complete a page in an hour,I need much more time because of the lacking of techniques,experience and tools.
Could you give me some suggestions on psd to html? What tools do you think is useful for psd to html?Thanks

13

Thank you all.
I have almost completed the page,except some erros
1.the body can’t wrap the div.footer, i don’t know why…
2. the .right-column .portfolio p don’t look the same with psd, how to implement it in css?
3.the arrow image in .right .porrfolio .slider can’t be centered vertically.
Could give some hints?Thanks.
http://demo4wp.info/test1/

14

See post #10 :wink:

15

@sizyh #12:

What tools do you think is useful for psd to html?

Well, I don’t know, for I don’t use psd-conversions at all. Looking at the desired design, I started building the page from scratch with the raw setup: a body, a leftcolumn and a content part. According to the “[U]Golden Rules of CSS[/U]”, I worked from top-left downwards, step by step adding new elements and the CSS for it.

  • With psd-transormations the difficulty is that you have to check the results: is it the right way of ordering the elements? - Is it flexible enough for scaling of the font size by the visitor? For different screen sizes? - and so on. Checking and correcting this needs css-knowledge as well; so I think it’s easier to compose the css yourself.
16

@sizyh #13:

  1. the .right-column .portfolio p don’t look the same with psd, how to implement it in css?

What is the difference?

=======

3.the arrow image in .right .portfolio .slider can’t be centered vertically.

The <div> inside is prohibiting that, but can be missed, and the images (inline elements) can be placed directly:

<div class="slidercontainer" >
	<img src="images/left-arrow.png" alt="left arrow">
	<img class="slider" alt="slide picture" src="images/slide.jpg">
	<img src="images/right-arrow.png" alt="right arrow">
</div>

With:

.slidercontainer {
	text-align: center;
}
.slidercontainer img {
	vertical-align: middle;
}
.slider {
	margin: 0 15px;	
	padding: 10px;
	border: 1px solid #E6E6E6;
}

=======
PS:
The Lorem-text in the “Service”-blocks is the same in each block. In real life the amount of text will differ. In the construction as it is now that will give [U]this result[/U]. Is that what you want?

17

They’re telling fibs :slight_smile:

I can usually convert a small PSD in a day but some complicated ones can take weeks.

Most tools can’t make design decisions and these days where responsive layouts are necessary it’s not just a matter of grabbing an image as such. Hand coding is still the best way to approach this as you want to keep full control over what you use…

18

This will have any graphics weenies in a rage if they happened to be Firefox users, because if the logo is clickable (usually is), the focus ring will show itself all the way to the left side of the page, because that’s how FF thinks it should deal with the text being pulled offscreen.

So if I can help it I’ll use Gilder-Levin instead. If that’s not feasable and also not some negative z-index tricks, and if I then must fall back to neg. text-indent, I’ll add overflow: hidden or similar to the element so I can keep my focus ring w/o getting my ears boxed off.

Luckily, it is a known fact that 99.99999% of all pixel-raging graphics people use Macs, and shun even Firefox-for-Mac. It’s MacChrome all the way, and the webkits (and so prolly the blinks too) don’t seem to leave :focus behind on clicked thingies (apparently browsers are differing greatly between “mouse focus” and “keyboard focus” and there’s still no safe way to designate these via CSS reliably). So honestly even the fact that browsers differ regarding fonts and ems can be ignored: you only have to know which browser and OS the graphics person uses and write for that.
Yes, all the clients who work in real offices will actually be viewing the page in IE, but they don’t measure pixels nearly as badly as ar-tíests.

[quote=“Paul”]

They’re telling fibs[/quote]

Or they’re writing out horrible eye-bleaching code that would make the Saw films look like the Wiggles

19

Stomme Poes:
if the logo is clickable (usually is) …

Yes, in general a logo is clickable (> homepage). In this design the Home button of the menu is just under the logo, and easy to recognize for the visitor. Therefore I omitted the click-option on the logo which would be an unnecessary doubling (in particular for visitors with a pure text browser or a screen reading browser).

But if a clickable logo is desired, I should use a foreground image and a span with absolute positioning outside the screen for the text (or a background image in case a hover variant will be shown) instead of a negative text-indent.
It is also possible to push the hidden text of the logo image complete outside the logo link itself.

Clarification

I guess in this way the navigation is accessible for everybody, without losing the user-friendliness (usability).

20

: (

Connection closed by remote server

You tried to access the address http://www.clba.nl/sitepoint/designbits-2.htm, which is currently unavailable.

be:

The outline (dotted lines around) at focusing on the logo-image is deliberately omitted. In this way Tab key visitors can not reach the logo-link, but the Home-link in the menu is the first thing on the page they see as they are Tabbing the links: no doubling.

You also add a neg tab index? While that hasn’t stopped me with a screen reader it does prevent sighted keyboarders multi-tabbing over same destination. I use it often in e-commerce where the title, image and name of product may all just go to the main product page. I’ve sometimes used aria-hidden if a long list of things each has multiple same-destination links but I’m very wary of that one and try to use something else instead.

I should use a foreground image and a span with absolute positioning outside the screen for the text (or a background image in case a hover variant will be shown)

This is a popular method for me, mostly when labelling things, or keeping semantics that belong on a page but the Graphics Person thought it was fugly.