Skip to main content
T
TheOriginal150mph
Inspiring
April 24, 2019
Answered

Need help matching layout

  • April 24, 2019
  • 2 replies
  • 668 views

Rusty student here, need assistance matching HTML & CSS to my layout for a school project site. I want only simple basic HTML and CSS that a beginner can understand, not Bootstrap, etc. Pls. take a look at what I've got so far here:

http://larrysullivandesign.com/GIT480/index.html


- How to best set up the header graphics?  (logo, guys, soc. media icons + red BG color gradient)  - full size & responsive
- I want the nav below header like the comp, but struggling ATM...

- How to fill the content space with the main image (BG-main-image.jpg). Is there a better way (eg. in the html) than to make it a background image using CSS?

- How to float social media icons top right?

- How to best get 2 guys pic in header - merged or standalone?

Below are Photoshop comps I'm trying to match.

Index:

Work page comp:


logo / guys png:

guys only:

This topic has been closed for replies.
Correct answer BenPleysier

Have a look at Responsive images - Learn web development | MDN

2 replies

B
Community Expert
Ben MCommunity Expert
Community Expert
April 24, 2019

- How to best set up the header graphics?  (logo, guys, soc. media icons + red BG color gradient)  - full size & responsive

If you want responsive layout, you have options of using a framework like Foundation or Bootstrap, or using the CSS Grid. Then it's a matter of placing your elements within that grid and determining how you want your responsive version to render.  Based on your comps, I don't see a mobile version to comment enough on tips to render your layout.

- I want the nav below header like the comp, but struggling ATM...

Think of a grid like a table. The nav below the header is just another row of content.

- How to fill the content space with the main image (BG-main-image.jpg). Is there a better way (eg. in the html) than to make it a background image using CSS?

I would simplify your header - one transparent PNG image with a CSS gradient background to get the desired effect.

- How to float social media icons top right?

See response to the best setup for header graphics. This is determined by the code base you are choosing.

- How to best get 2 guys pic in header - merged or standalone?

See response to fill content space.

T
TheOriginal150mphAuthor
Inspiring
April 25, 2019

Thanks for taking the time to try to help me with this prototype comp.


Ok Ive been pounding away at it more, so I know my questions weren't very focused because I forgot some of the reasoning behind why I set up the previous site (that I'm usurping) like I did (with help from here).

If you can take a look again - http://larrysullivandesign.com/GIT480/index.html   - specifically the Media query in the CSS.

I want to swap the main car image (BG-main-image.jpg) with a small one for mobile (BG-main-mobile.jpg) below 768px. But when I uncomment the code below, and get rid of the <img src=..>  line, then the bg image gets huge and it breaks.

<main-index>

<!-- <section class="main-image"></section>-->

   <img src="images/BG-main-image.jpg" alt=""/>

</main-index>

Is there a simple fix to this code to swap in this image?

BenPleysier
Community Expert
BenPleysierCommunity ExpertCorrect answer
Community Expert
April 25, 2019

Have a look at Responsive images - Learn web development | MDN

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
BenPleysier
Community Expert
BenPleysierCommunity Expert
Community Expert
April 24, 2019

Just a few remarks:

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices