Can someone point out the mistakes in my CSS Layout?

I've been struggling to make progress on this task over the past couple of days, encountering roadblocks with no clear solution in sight. The maze of nested divs I'm navigating through might be playing tricks on my mind, so having a fresh pair of eyes look at the code and provide some guidance would be greatly appreciated.

Current URL:

Desired URL structure:

I decided to revamp this website because the original version heavily relied on tables, and I'm on a mission to eliminate that practice from my coding repertoire. This revamp is essentially an exercise in moving away from table-based layouts for good!

The following CSS snippet can be found at:

@charset "utf-8";

#bodytext {
    color: #6B6351;
    font-family: arial, Arial, Helvetica, sans-serif;
    font-size: 11px;
    line-height: 14pt;
    margin: 35px 0px 0px 30px;
    width: 370px;
}

#logo {
    float: left;
    background: url(../images/logosmall.gif) no-repeat;
    width: 75px;
    height: 152px;
    text-indent: -9999px;
}

#process_title {
    clear: both;
    float: left;
    background: url(../images/process/process_title.gif) no-repeat;
    width: 75px;
    height: 347px;
    text-indent: -9999px;   
}

#header {
    float: left;
    background: url(../images/process/header.gif) no-repeat;
    width: 163px;
    height: 26px;
    text-indent: -9999px;
    margin-top: 1px;
}

Answer №1

#mainbody {
color:#6B6351;
font-family:arial,Arial,Helvetica,sans-serif;
font-size:11px;
line-height:14pt;
margin:35px 0 0 80px;
width:395px;
}

#topHeader {
background:url("../images/process/header.gif") no-repeat scroll 0 0 transparent;
height:26px;
margin-left:100px;
margin-top:159px;
text-indent:-9999px;
width:163px;
}

If you want to maintain your markup and class/ids, this is the method to follow. Make sure to wrap the last line of the copy in a <tag> tag.

This approach is suitable for beginners, wishing you all the best!

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

Adding design to distinct element after clicking a button

Struggling with a JS/Jquery issue on my portfolio website, I admit that I am still just an average programmer. My portfolio website has five buttons, each representing a different project. For each project, there is a corresponding text description and an ...

Navigate through content to reach the bottom of the webpage

I am currently working on a layout that is similar to Facebook's messaging system (facebook.com/messages). I have made some progress with it, but not quite there yet. You can view my work so far here: https://jsfiddle.net/3nd0b17m/23/ The main issue ...

A variable in Javascript storing data about jQuery DOM elements

Currently, I am using the slick slider for my development (http://kenwheeler.github.io/slick/) In JavaScript, there is an event that returns a variable called 'slick' When I print the variable using console.log, this is what I see: From what I ...

Issue with FlexSlider 2 and thumbnail slider: Previous and Next buttons not functioning for main image

I have encountered an issue while using FlexSlider 2 with the thumbnail slider. The problem is that the main image does not respond as expected. When I try to navigate using the next/prev buttons, it does not slide or fade to the next/prev image. Even cl ...

Instead of loading the HTML into the div, Ajax is now sending me the link instead

I have just begun working on a new laravel project and am currently working on the user profile page, which will include a sidebar with links like Portfolio, Account Settings, etc. My goal is to dynamically load each page into a div when a link in the side ...

AngularJS search box functionality allows users to easily search through a

1 I am looking to develop a search box using AngularJS similar to the one shown in the image. While I am familiar with creating a normal text box, I am unsure of how to incorporate the search icon. Any guidance on how to achieve this would be greatly appr ...

Adjusting CSS Div Blocks for Different Screen Sizes

I am currently working on designing a page layout that includes two sidebars and a main article area. My goal is to have the sidebars stack vertically beside the main area when viewed on a tablet or phone, with both eventually moving below it. However, I a ...

The Yeoman/Grunt-usemin is failing to update the index.html file even after adding new JavaScript code

As I work on developing a web app using Yeoman and the Angular generator on Windows 7, I go through the process of running 'yo angular' followed by 'grunt' to build the app for deployment. The index.html file in the dist folder gets upd ...

Smoothly automate horizontal scrolling using JavaScript

My programming journey involved creating a code snippet that automatically scrolls paragraphs horizontally, giving it the appearance of "Breaking News" updates on popular websites. The Javascript script I implemented performs automatic scrolling, but once ...

jquery function context

I'm having trouble grasping function scope in this scenario. When a button is clicked, it triggers a dialog box with a textarea inside displaying a URL that can be copied for camera setup. <button id="axis-details" onclick="apikey('<?php e ...

What methods are available for implementing hover effects within attributes using a JavaScript object?

const customPanelStyle = { 'background-color': 'red', 'border': '1px solid green', ':hover'{ 'background': 'blue' } } class some extends React.Component{ rende ...

Postpone the inclusion of html files within ng-include in AngularJS

I need to optimize the startup performance of my app by delaying the loading of a series of HTML files that are being included into my main controller. These files are not needed for at least 4 seconds while one specific HTML file processes. How can I de ...

javascript code producing incorrect HTML

I created a script to populate a selectbox with various options. Initially, the data is in the form of a string like this: "key=value;key2=value2;etc...": //splitting the string to separate different options for the selectbox var values = data.split(&apo ...

The function `jQuery .html('<img>')` is not functional in Firefox and Opera browsers

This particular code snippet jq("#description" + tourId).html('<b>Opis: </b> '+ data); has been tested and functions correctly in Internet Explorer, Firefox, and Opera. However, when it comes to this specific piece of code jq("#i ...

What is the method for importing .scss files throughout a Next.js application?

I'm looking to transform my React app into a Next.js app. In the current React setup, I have .scss CSS files being imported in various components. However, once I transfer the code to a Next.js environment, I encounter an error: Global CSS cannot be ...

Showing a diverse range of data types with null values in the Django admin list_display

My explanation of the title might have been unclear. I have a simple chat application where users can send text, audio, video, or images. To render these messages, I have a method that checks the message type and renders it accordingly. If the message is t ...

Organizing items in rows with alternating quantities using CSS within a fluid design

Encountering a peculiar issue while attempting to organize items spread across multiple rows, with each row having either 5 or 4 items (alternating between 5 and 4 items per row). However, when the screen width reaches 480px, the layout automatically switc ...

What is the best way to center a button element horizontally within a div element?

I am looking for a way to center a button horizontally without adding CSS directly to the div element (for example, using <div style="text-align: center;">). My goal is to apply CSS code specifically to the button element. <div> <butto ...

div containing various images of varying sizes

I am working with a layout that requires 4 images to be displayed together within a container. One image should be larger and positioned on the left, while the other three should be uniform in size and placed next to it on the right. Despite my efforts t ...

Leveraging .Net ConfigurationManager.AppSettings in Cascading Style Sheets

I am facing an issue where I have a specific color key in my AppSettings for the company's brand color, which needs to be applied to a CSS class. The challenge is how to incorporate this key into my stylesheet. Is there a way to access the Configurati ...