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

[Joerg_Knoerchen]

Well it should look like this

But in IE the right text (it is an image) displays below the left image, which should only be the case for smaller screens and smartphones. The size I set for the images is not taken into account.

As said before the site is still under development a few things might change till the final version.

With the menu I will try to bring an additional to the header for a smartphone.

BTW This is the design where I would need the sorting of the Weaver Slider Post sorted by the post sorting attribute. 😉

[scrambler]

the way you are styling leftimage and rightimage cannot work responsively and reliably.

You are using margin in em and width in pixel

You should use % units for all and make sure the total is 100%

Like width 60% and 39%, and margin left/right of 0.5%

[Joerg_Knoerchen]

But with HTML5 and the image size there is only PX left, the % is gone as far as I know

[scrambler]

???

If you say you cant use % with HTML5 I don’t know where you got that info, and it is simply not true.

Change your rules to the ones below with values totaling 100%

.leftimage { margin-bottom: 2em !important; width:60% !important; box-shadow: 8px 8px 5px #999999; vertical-align: middle !important; vertical-align: top !important; text-align:center !important;  }
.rightimage { margin-left: 0.5%; margin-right: 0.5%; width:39%  !important; vertical-align: top !important; }

[Joerg_Knoerchen]

Hi @scrambler,

many thanks – I will try the settings with %.

Anyway when I look into the HTML5 docu it is said integer values and pixels only…

http://w3c.github.io/html-reference/img.html

Cheers

Joerg

[scrambler]

You are referring to width and height html attributes, not CSS

[Author]

Posts