In search of the most optimal solution for converting PSD files to HTML/CSS

I am currently working on converting a layout into HTML/CSS, but I am facing challenges in determining the best way to structure the HTML/CSS for major content elements. For example, there is a different background block in the middle that should be under the 960px content block and cover the entire width. I have provided a visual representation of the layout below:

My main questions are:

  • How should I handle the custom background block that is "outside" of the grid? Should it be inside the grid, with the content block inside the background block but outside the container containing the logo and menu?
  • What is the best approach to dealing with custom PNG shadows (without using CSS3) that need to be placed outside the content slider as shown in the image?
  • Similarly, when it comes to the footer, should it be positioned outside the main 960px container? Is it necessary to use a "main container" at all in this scenario? I am unsure about the best practice in this situation.

Thank you!

htmlcsspsd

Answer №1

Unfortunately, I am unable to view the attachment at this time. However, I will provide you with some helpful guidelines:

  1. Ensure that your main content is centered on the screen and has a width of 960px.
  2. If the header/footer do not extend beyond 960px in width, place them within the container div. If they are wider than 960px, place each one in its own div with the necessary width, and then insert another div inside it with a width of 960px for centering purposes.

Here is an example layout:

<div id="headerWrapper">
    <div id="header">...</div>
</div>
<div id="content">...</div>
<div id="footerWrapper">
    <div id="footer">...</div>
</div>
  1. If you wish to include PNG shadows without utilizing CSS3, you will need to slice the image with the shadow effect.

I hope this information helps answer your queries.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Extract content within Python pre tags

A Python code snippet is being used to extract content between PRE tags: s = br.open(base_url+str(string)) u = br.geturl() seq = br.open(u) blat = BeautifulSoup(seq) for res in blat.find('pre').findChildren(): seq = res.string ...

pythonhtmlparsingbeautifulsouppre

Resetting the state of toggle/click states in AJAX and jQuery

Currently, I am encountering a small dilemma with a .on function and AJAX in conjunction with a mobile menu. The mobile menu is located in the header of a site that relies heavily on AJAX for its content loading. This poses an issue because when an AJAX ca ...

javascriptjqueryhtmlcssajax

Can validity api provide a means of displaying errors in a list format?

Currently, I'm working on developing a contact form and attempting to utilize the validity API for the first time. Adapting to WCAG2.1 standards has posed some challenges, but I've managed to display errors underneath each field as I code. Howeve ...

javascripthtmlcss

The flashing of Bootstrap tabs can be seen on various pages

Currently, I am encountering an issue with bootstrap tabs on my website. There seems to be a blinking problem with the tabs on certain pages. Check out this video showcasing the blinking tab in the search result page: Watch Here Interestingly, the same ta ...

jqueryhtmlcsstwitter-bootstrap

Adjust the width of the floating division

I'm facing an issue with a div structure that contains two other divs displayed like this: ---------------------------- | | | | | | | div 1 | div 2 | | | | | ...

csshtmlwidthcss-float

What is the best method to retrieve particular HTML lines (containing a flex container) with IronPython?

Utilizing IronPython 2.7.9.0 in Grasshopper and Rhino, I am extracting data through web scraping from a specific widget on the following link: The code snippet being used is shown below import urllib import os web = urllib.urlopen(url) html = web.read() ...

pythonhtmlweb-scrapingflexboxgrasshopper

Creating a new form upon clicking

By clicking the "Add New Job" link, a new form with three fields will appear. This is the primary form: <h2>JOB EXPERIENCE 1</h2> <div class="job-content"> <input type="text" value="Company" name="company" /> <input type="te ...

phpjqueryhtmlajax

Issue with Google Maps functionality within the jQuery easytabs platform

Upon clicking the contact tab, the gmaps loads but unfortunately only shows the left corner of the map. Quite intriguing... Any thoughts on how to fix this? Here is the corresponding jsfiddle This is the structure of my HTML code: <div id="menu-contai ...

jqueryhtmlcssgoogle-maps

How about placing one element above another? What sets apart using the margin property versus the position property for achieving this effect?

As I pondered the concept of stacking context, a question arose in my mind. Through my readings, I learned that by not applying any CSS properties that create a stacking context (such as position), it is possible to stack elements on top of each other usin ...

csspositioncss-positionmargin

Can Anyone Provide Assistance with CSS for Customizing the Bootstrap 4 Navbar Burger Icon

I am working on implementing a bootstrap 4 navbar into my Angular code base. When the screen size of the browser becomes smaller, I want to hide the navbar and instead display a hamburger icon with a side menu. I have tried a few solutions, but have not b ...

cssangularbootstrap-4navbarhamburger-menu

Incorporate an external JavaScript script using code

I'm currently working on integrating a map widget from 'Awesome Table' into the codebase of an open-source CRM platform. The specific code snippet I need to add is <div data-type="AwesomeTableView" data-viewID="-KLtnY5OHJPgnEOX1bKf"> ...

javascriptjqueryhtmlsrc

Retrieving specific HTML data without the need to download the entire webpage

Is there a way to extract data from an HTML table on a webpage without downloading the entire HTML content? In my Delphi XE2 application, I am using TWebBrowser and TEmbeddedWB to load the webpage and then parse the Table element. However, due to the heav ...

htmldelphibrowserextractindy

What are the steps to incorporate jQuery Mobile features into a simple webpage?

Recently, I utilized Adobe Dreamweaver CC 2014 to create a jQuery Mobile Webpage. While exploring its features, I discovered a unique capability within the jQuery Mobile Website. This particular webpage was connected to the necessary jQuery CDNs. What stoo ...

jqueryhtmljquery-mobiledreamweaver

What is the best way to eliminate excessive margin-bottom on a floating image?

Is it possible to maintain the same margin at the right and bottom of an image when using <img> inside <p><img style="float:left">dummy text dummy text dummy text dummy text</p>? ...

htmlcssxhtml

Issue with automatic completion for classes and IDs in Visual Studio Code

Auto completion does not seem to work when I attempt to use a previously written class or ID in my HTML file. It doesn't function in the same HTML file, CSS file, or JS file. While ctrl + space works for some classes within the same HTML file, it is n ...

javascripthtmlcssclassautocomplete

How can we ensure that navbar items in Bootstrap 3 stay outside the collapse and don't wrap to a new line?

I am having trouble with my Bootstrap 3 navbar collapsing properly. Any advice would be appreciated. I have already searched extensively for a solution, but haven't found the right one yet. The navbar I created is responsive and based on the Bootstr ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

What is the best way to ensure that an element remains fixed at the bottom of a div or card

I am currently working on creating cards that contain a link at the end. My goal is to have these links consistently displayed at the bottom of the div, regardless of the text length. Currently, they appear at the end of the text content. Is there an easy ...

cssbootstrap-4

Is there a way to display the value of an object within an HTML file?

I have a function in AngularJS that retrieves values from a checkbox set - determining which checkboxes were checked (true or false) and stores this information in an object. It then creates a variable to hold the value of the first element in the object. ...

htmlangularjs

Unexpected server error encountered during navigation of php pages

I am using PHP to retrieve data from a MySQL table and display it in an HTML table. Each row in the table has a 'remove' button that triggers a PHP script (remove.php) to delete the corresponding row from the database table and return to admin.ph ...

phphtmlmysqlmysqliwamp

Using CodeIgniter, input information into a textbox and verify if there is a corresponding record in the database when submitting

Working on a CodeIgniter project, I am faced with the task of adding information to a form within my view page called meal_add.php. Below is the form structure: <div id="content" class="box"> <form action="<?php echo base_url(); ?>index ...

phphtmlmysqlcodeigniter