Skip to content
View in the app

A better way to browse. Learn more.

Web Designer Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Flexible height: havin problems with this box!

Featured Replies

Hello Community,

 

Im am working on a new design!

 

I am using a CMS (joomla)

Playground:

casa.taijiworld.de

 

The Design SHOULD work like this:

 

Design centered

Top: Big logo

Right: Small Logo and space for a modul (news)

middle: THATS THE PROBLEM

 

The content and menu are placed on a medieval pergament roll. This roll is build with 3 images.

  1. Top roll (called o-rolle.jpg / never touched from content),
  2. mid roll (called m-rolle.jpg / thats the background for the content / should repeat-y),
  3. bottom (called u-rolle.jpg / never touched from content).

The mid-images should "repeat-y".

 

The mid-section contains the menu and the main content.

 

The menu should stay at the left sided and the content of the right side of the mid-section.

This section should alwas have enough height to wrap the content. The content should never leave the mid-section graphic (called m-rolle.jpg).

 

NOW THAT IS THE PROBLEM.

However I structure the code, HTML or CSS. I don´t get the mid section to have a flexible hight. The content always leaves the mid-section and the background (m-rolle.jpg) doesn´t expand (repeat-y). The content than leaves the roll-image.

 

 

How do I get this working?

Hello Community,

 

Im am working on a new design!

 

I am using a CMS (joomla)

Playground:

casa.taijiworld.de

 

The Design SHOULD work like this:

 

Design centered

Top: Big logo

Right: Small Logo and space for a modul (news)

middle: THATS THE PROBLEM

 

The content and menu are placed on a medieval pergament roll. This roll is build with 3 images.

  1. Top roll (called o-rolle.jpg / never touched from content),
  2. mid roll (called m-rolle.jpg / thats the background for the content / should repeat-y),
  3. bottom (called u-rolle.jpg / never touched from content).

The mid-images should "repeat-y".

 

The mid-section contains the menu and the main content.

 

The menu should stay at the left sided and the content of the right side of the mid-section.

This section should alwas have enough height to wrap the content. The content should never leave the mid-section graphic (called m-rolle.jpg).

 

NOW THAT IS THE PROBLEM.

However I structure the code, HTML or CSS. I don´t get the mid section to have a flexible hight. The content always leaves the mid-section and the background (m-rolle.jpg) doesn´t expand (repeat-y). The content than leaves the roll-image.

How do I get this working?

 

Hello, and welcome to the forums!

 

I have had a look at your site and I have added some more content to it and the background does repeat..?

Could you let me know what you're testing it on so I can see what you mean.

 

I'm on mac but I have a PC too.

 

Oli

It seems to have been corrected since the post was made, as the background does repeat now (two days ago when I first viewed the site, it didn't).

 

*Shrug*

  • Author
It seems to have been corrected since the post was made, as the background does repeat now (two days ago when I first viewed the site, it didn't).

 

*Shrug*

 

Yes I found the error!

 

Inside HTML I used a ID "menu" but I declared a CLASS "menu" in CSS.

 

After I found that error I handled the rest pretty easy.

Excellent. Glad to hear it's sorted. :)

Create an account or sign in to comment

Account

Navigation

Search

Search

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.