special requirement for a design & page layout // CSS question to center the content

[Joerg_Knoerchen]

Hello,

I just have a new design in mind where the content will have to stay in a given rectangle (like a business card). The rectangle should always have a specific height and width. Depending on the screen resolution it should be displayed smaller or larger of course. Images and text have to stay always at the same ratio, so if images are larger also the text needs to be bigger.

The rectangle should be centered at the browser, so top, bottom as well as the right and left side should have the same “blank” room like shown at the following image:

The first question is the design & page layout possible with Weaver Xtreme? 

Where an equal space to the left and right seems to be an easy task, my second question is how to achieve an equal space to the top and bottom?

Any help, idea or hint?

I started trying to play with

div#wrapper {

 width:900px;

 height:600px;

 margin:0 auto;

 position:absolute;

 left:50%;

 top:50%;

 margin-left:-250px;

 margin-top:-250px;

}

But it doesn’t work 🙁

Many thanks!

Cheers

Joerg

 

[Weaver]

The left/right can probably be done using by centering the middle “box”.

Vertical centering is more difficult. The auto margins don’t seem to work all that well with changing heights on browsers – you can try a div inside a div with auto top/bottom margins, but my memory says that won’t work as you want.

Auto changing font sizes require JavaScript. That is not easy to do. I think there are JavaScript plugins that can do that, if not WP plugins.

What seems like a nice simple design is not easily achieved.

[scrambler]

There are ways to do vertical centering as I explained here

http://forum.weavertheme.com/discussion/12197/entry-page-with-centred-text

But we need to know the structure of the page to understand the container in which your design will be centered.

As for the piece itself I would create a blackimage of the maximum size your design should have (500px in the example below), then do something like

<div style=”position:relative;max-width:500px;margin:0 auto;”>
<img src=”blackimageurl“/>
<img src=”insideimageurl” style=”width:30%;height:auto;left:10px;top:10px;position:absolute;”/>
<div style=”position:absolute;left:35%;top:10px;”>Your text Your text Your text Your text Your text </div>
</div>

When you have that placed in the page in question we can help with adapting the vertical centering part

[Joerg_Knoerchen]

Hi @scrambler,

I will definitely have a look into it and if I have a page to show I will come back with it!

Meantime here are two themes and a page that do what I’m trying to achieve…

http://circlus.wp-theme.pro

http://themes.thememates.com/precision/

http://satzgrafik-dalley.de

At least they center the content…

Cheers & many thanks!

Joerg

[scrambler]

The thread I gave you is exactly about creating a landing page with just a centered piece like your referenced site.

The HTML I gave you will create a centered piece like you initially described. Some of your pages have different designed with blocks that stack under a certain width, and that is definitely feasible too.

[Joerg_Knoerchen]

Ok, I put the following to the site…

#wrapper {position:absolute;top:50%;left:50%;-webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}in-top:-250px;max-width:1280px;max-height:1024px;}

and it already looks similar to what I’m looking for.

Although I set a color for dividers at the menu they do not show up. Additionally I like to display a border-bottom before the menu. (PRO is activated!)

At the end it should look like this:

Here is the link to the stage… http://stage.yogie.de/susanne/

Then I have an issue with the slider, it’s starts with a two images, instead of showing just one, that is not depending on my setting “Force images to use full width of slider.“! After the first slide the images are displayed correct, with one caveat, they show a single vertical pixel line of the next image to the right. 

I placed the menu with a text widget:

  <p class=”line”><span>[extra_menu menu_name='Footer' menu_type='horizontal' ]</span></p>

and added the following CSS:

.line { line-height: 0.5; text-align: center; }

.line span { display: inline-block; position: relative; }

.line span:before { content: “”; position: absolute; height: 15px; border-bottom: 2px solid #F49E00; top: 0; width: 600px; }

.line span:before { right: 100%; margin-right: 15px; }

but somehow the line, it should bring, is not showing. 

Demo

[scrambler]

If you want the menu to inherit full styling, you need to use the standard menu type, not horizontal. horizontal is for a minimalist menu.

Then you can add menu_style=’xxxx’

using primary secondary or extra to pickup a menu style. make sure that menu style uses aligned right.

For your line, you should not put the menu shortcode in a paragraph or span tag as nesting a div in a p / span tag is invalid.

Instead, try to add the following rules in Main options > Fonts & Custom > Custom CSS Rule box

#extra-x1:before {content:””;right:100%;position:absolute;border-bottom:2px solid #F49E00;width:100%;top:20px;}

We may need some tweaking to control where the left line is cutoff

[Joerg_Knoerchen]

Hello @scrambler,

many thanks already I’ve now changed the setting as per your recommendation as follows:

#extra-x1:before {content:””;right:100%;position:absolute;border-bottom:2px solid #F49E00;width:100%;top:20px;}

#extra-x1 li:last-child a {border:none;}

#extra-x1 li:first-child {border:none;}

the only thing is, that the line in front of the menu will not show up, I already tried several changes to the line, but didn’t find any setting that worked. Do you have any further ideas?

Many thanks again!

Cheers

Joerg

[scrambler]

First ou appear to have some syntax error preventing your rule to be used (in yellow)

#wrapper {position:absolute;top:50%;left:50%;-webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}in-top:-250px;max-width:1280px;max-height:1024px;}

#extra-x1:before {content:””;right:100%;position:absolute;border-bottom:2px solid #F49E00;width:100%;top:20px;}
#extra-x1 li:last-child a {border:none;}
#extra-x1 li:first-child {border:none;}

But even if I add the rule manually, for some reason it is not working on your page (while it worked on my test). I tested a different rule that does see to work. Try that instead of your 3 rules.

#extra-x1 li:nth-of-type(1):before {content:””;right:100%;position:absolute;border-bottom:2px solid #F49E00;width:200%;top:20px;}

[Joerg_Knoerchen]

Thank you @scrambler I didn’t saw the bracket at the wrapper line. 

The new solution you provided works fine…

Thanks a million!

[Joerg_Knoerchen]

Today I worked again on that layout and found out that it is not a good design when it’s coming to an smartphone. So I decided to place .is-desktop in front of the rules but then the rules will not work and the layout will be shifted somehow to the right upper corner…

.is-desktop #wrapper {position:absolute;top:50%;left:50%;-webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); in-top:-250px;max-width:1280px;max-height:1024px;}

.is-desktop #extra-x1:before {content:””;right:100%;position:absolute;border-bottom:2px solid #F49E00;width:100%;top:20px;}
.is-desktop #extra-x1 li:last-child a {border:none;}
.is-desktop #extra-x1 li:first-child {border:none;}

Any idea what’s happening?

[scrambler]

I dont actually see any problem on myside, so clear your cahce

If not, You must have messed up something somewhere.

For starter you have some invalid CSS in the first rule. in-top:250px is not a valid CSS property and needs to go

.is-desktop #wrapper {position:absolute;top:50%;left:50%;-webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); in-top:-250px;max-width:1280px;max-height:1024px;}

[Joerg_Knoerchen]

Well I have put the .is-desktop in place now and there is no CSS else than this now:

/* Custom CSS rules for Plain sub-theme */

.is-desktop #wrapper {position:absolute;top:50%;left:50%;-webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }

.is-desktop #extra-x1 li:nth-of-type(1):before {content:””;right:100%;position:absolute;border-bottom:1px solid #F49E00;width:350%;top:28px;}

.is-desktop #extra-x1 li:last-child a {border:none;}

.is-desktop #extra-x1 li:first-child {border:none;}

h2 { font-size: 1.875em; padding-bottom:0em; margin-bottom: 0em; padding-top: 0em; margin-top: 0em;}

if you go to http://stage.yogie.de/susanne/ you see the result, which is different from not having the .is-desktop in place in front of the wrapper.

[Joerg_Knoerchen]

I put  !important behind the parameters and it works.

[Joerg_Knoerchen]

Hello,

I’m still working on this design. I still have to tweak the one or the other thing to finish it off. 

In general the landing page seems to work in all browsers now http://stage.yogie.de/susanne/

but when going to one of the other categories (Editorial Design …. up to … Impressum) then I get different results in various browsers, especially in Internet Explorer.

The first three categories of the menu have pages with two images which should be displayed side by side horizontally, they do as far as I could check, except when I use Internet Explorer, where it looks like that the size I’ve set for the images are not followed.

Any idea how I can fix that?

Many thanks in advance…

Cheers

Joerg

[Weaver]

I am seeing identical results on Chrome, Firefox, and IE10.

I’m not sure what you mean by two images side by side. All my browsers are showing jus a single image in each sub-page (the ones you get by clicking the navigation number list on the bottom right).

But the way this design works absolutely drives me crazy. I would say it only works pleasantly on my very wide desktop where I’m getting the desktop view. I see you changed the tablet transition point to 1605px, and in my opinion, this doesn’t work.

On my main monitor (I have 3 side by side on my Mac Pro), I like the look a lot. I like seeing the menu at the bottom.

But when I open on one of my smaller monitors, the site opens in tablet mode, with the mobile hamburger menu not even showing at the bottom – my thought is “How do I navigate this site????” – then found the menu. I’m just not sure that having a menu at the bottom on mobile devices works as an easy user interface, even if it looks good (which it does).

But I’m getting identical behavior and layout on all my browsers – unless I just don’t understand what to look for.

[Author]

Posts