asked on

HTML and CSS for a complex page

I am trying to build a page that looks like the follow:

Unfortunately, my HTML/CSS skills are not there. I have labelled the regions with their usages (text and image). Those labels are only their to explain the purposes of the regions. It's a combination of nest DIVs and floats, but beyond my skills. Please note that the section with the text "..." is to illustrate that that section has a random number of pictures to add to it.

Any help/advice on this would be greatly appreciated.

Julian Hansen

Can we use a grid layout or do you specifically want custom?
On a grid system you are looking at

<div class="row">
  <div class="col-md-2"><img src="images/foreground1.png" /></div>
  <div class="col-md-8">TEXT</div>
  <div class="col-md-2"><img src="images/foreground2.png" /></div>
</div>
<div class="row">
  <div class="col-md-12">LONG TEXT</div>
  <div class="col-md-2"><img src="images/foreground3.png" /></div>
  <div class="col-md-10">TEXT</div>
</div>
<div class="row">
  <div class="col-md-2"><img src="images/foreground4.png" /></div>
  <div class="col-md-2"><img src="images/foreground1.png" /></div>
  <div class="col-md-2"><input type="password" value="*****" /></div>
  <div class="col-md-2"><img src="images/foreground2.png" /></div>
  <div class="col-md-4">TEXT</div>
  <div class="col-md-12">
	<button class="btn btn-primary">Button1</button>
	<button class="btn btn-primary">Button2</button>
	<button class="btn btn-primary">Button3</button>
	<button class="btn btn-primary">Button4</button>
  </div>
</div>

Open in new window

The above is just a sample - obviously questions like responsiveness and what the screen would need to look like at lower resolutions could change the layout.

If you don't want to use bootstrap an identical layout can be achieved using custom styles based on the same principles that Bootstrap uses.

Example to follow if interested.

Howard Bash

ASKER

I really like bootstrap. I'd like to try it with bootstrap and if bootstrap doesn't work, fall back to "roll your own CSS".

The HTML will be provided through a fair among of XSL which is to be used to render the XML data of a SharePoint list. It will need to be baked into a template in the ItemStyles.xsl file that can then be chosen with a Content Query Web Part to render a list in a custom fashion vs. the vanilla out of the box view which lacks much.

Walter Curtis

If you are using SharePoint, you should try using a web part page and start from there.

Howard Bash

ASKER

I am using a content query web part (which be definition is placed on a web part page). I am customizing the display of the list items by writing custom xsl to the ItemStyle.xsl templates file.
I am retrieving the fields I need in my XSL and want to house that data as depicted above.

Walter Curtis

What version of SharePoint are you using?

Howard Bash

ASKER

SharePoint Online

Walter Curtis

Thanks for the info. Good luck...

Howard Bash

ASKER

There are couple of tricks to customizing the display here (other than the styling which I am pretty clueless about). One thing is that to get columns from a customized list, you may have to modify the content query web part to know about the columns (what a pain!).

Julian Hansen

Here is a sample based on the code in this post

Howard Bash

ASKER

It loaded once and now the server hangs. Not sure if you're making any updates...

When it did load, the scale of the regions didn't seem right. The proportions seem off to me. I like the images though. ;-)

Julian Hansen

No that is our ISP - need to move from them they are useless.
The proportions are based on guess work using the image you provided.

Site should be working now.

Howard Bash

ASKER

How can I adjust the image sizes? There need to be two sizes for them. The large one is about 3/4 the size of the first image and the rest are all to be 1/2 of that.

Here is a more detailed mockup with some content obscured...

ASKER CERTIFIED SOLUTION

Julian Hansen

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Howard Bash

ASKER

There is no requirement for support of mobile/pads, only a normal desktop monitor or laptop.

Julian Hansen

Ok then you can then just style the image to have a width and a height using a class.

Howard Bash

ASKER

I tried that with the solution you uploaded and the images do resize, but they appear to be contained and have a lot of space around them.

Julian Hansen

Can you post your markup and I will take a look.

Can you also upload some of the images.

Howard Bash

ASKER

I have my attempt with too much CSS. It has images and "almost" looks like the screen capture above. The text and boxing isn't right, but it looks closer. Some of the text isn't flowing as it needs to.

My Attempt

Feel free to delete the CSS and redo as it is painfully poor.

Howard Bash

ASKER

Hi,

Any suggestions on how to fix my attempt?

Thanks.

Julian Hansen

What do you need to change?