Mastering the art of creating this particular design with CSS

I'm currently working on a web design project and I'm facing some challenges. In the past, I used tables to align elements on the page, but I know that's outdated now in 2011. CSS is the way to go these days, however, I'm struggling to implement the design I have in mind. Can anyone provide guidance or point me in the right direction?

You can view the layout I'm trying to achieve here:

Edit:

I realize I forgot to share the CSS and HTML code I've been working on so far (thanks to my wife who distracted me with shopping). I didn't expect anyone to do the work for me, but I appreciate the help I've received already from others.

My main issue seems to be with the "float" property. While I've gathered from suggestions that using "!important" can be crucial in certain cases, there might be more tips worth exploring.

Answer №1

To truly understand HTML, you must start from the largest elements and work your way down to the smallest, moving from top to bottom.

I won't reveal any advanced tricks or shortcuts for CSS3 - those are things you'll need to discover on your own.

When tackling a task like this, treat it as if you're writing a document: first create the content, then format it appropriately.

Begin with basic HTML and then progress to constructing frames:

<!DOCTYPE HTML>
<html>
<head>
    <title>My layout</title>
</head>
<body>
<div id="zones_theSite">
    <div id="zones_unb"><p>Universal navigation bar</p></div>
    <div id="zones_body">
        <div id="zones_header"><p>Header</p></div>
        <div id="zones_fnnb"><p>Flashing news navigation bar</p></div>
        <div id="zones_fn"><p>Flashing news</p></div>
        <div id="zones_main">
            <div id="zones_lsb" class="column"><p>Left sidebar</p></div>
            <div id="zones_mp" class="column"><p>Main page</p></div>
            <div id="zones_rsb" class="column"><p>Right sidebar</p></div>
            <div class="clearfix"></div>
        </div>
        <div id="zones_footer"><p>Footer</p></div>
    </div>
</div>
</body>
</html>

Now let's move on to formatting. CSS provides endless possibilities when styling divisions (DIV).

<head>
    <title>My layout</title>
    <style type="text/css">
    body {
        background-color: #616161;
        margin: 0;
    }
    div { position: relative; }
    p {
        margin: 0; padding: 3px;
        color: #FFF;
        text-transform: uppercase;
        font-family: Verdana, sans-serif;
        font-weight: bold;
    }
    .clearfix { clear: both; }
    #zones_unb {
        width: 100%;
        background-color: #000;
        line-height: 2em;
        text-align: center;
    }
    #zones_body {
        width: 1000px;
        margin: 0 auto;
        background-color: #616161;
    }
    #zones_body div {
        width: 100%;
        text-align: center;
    }
    #zones_header {
        height: 100px;
        background-color: #E20000;
    }
    #zones_fnnb {
        background-color: #0078FF;
        line-height: 2em;
    }
    #zones_fn {
        height: 80px;
        background-color: #003ACE;
    }
    #zones_main p {
        color: #000;
    }
    #zones_main {
        width: 984px!important;
        padding: 5px;
        background-color: #FFF;
        border: 3px solid #000;
    }
    #zones_main .column {
        float: left;
    }
    #zones_lsb, #zones_rsb {
        width: 200px!important; height: 300px;
        border: 3px solid #000;
        padding: 5px;
    }
    #zones_mp {
        width: 552px!important;
    }
    #zones_footer {
        height: 80px;
        background-color: #3FCE00;
    }
    </style>
</head>

Simply replace the final HEAD section with the initial HEAD section in the first HTML code and you're all set. Remember, consider separating your CSS into a standalone .css file and customize it according to your preferences. :)

Answer №2

Obtaining a full design may be challenging due to the complex nature of the task.

If you're seeking guidance, I recommend starting with this tutorial on positioning. Feel free to return here with any specific inquiries you may have!

Answer №3

If you want to create a layout like that and truly understand it, your best bet is to dive into learning CSS instead of relying on someone else to do it for you. I suggest checking out this resource: https://developer.mozilla.org/es/learn/css

As a starting point, the HTML code would resemble something along these lines:

<div id="navBar"></div>
<div id="middleBody">
  <div id="header"></div> 
  <div id="newsBar"></div>
  <div id="flashingNews"></div>
  <div id="mainPage">
    <div id="leftBar"></div>
    <div id="rightBar"></div>
  </div>
  <div id="footer"></div>
</div>

The corresponding CSS code might look something like this:

#navBar {
  width:100%;
  height:30px;
}

#middleBody {
  margin:0 auto; /* This will center the middle body */
}

#header {
  height:200px;
}

and so on...

Answer №4

Creating layouts like these is a breeze with the help of CSS frameworks:

  • 960 Grid System:
  • Blueprint Framework:

Answer №5

Here is an example:

<html>
<head></head>
<body>
<div style="width:100%; height: 150px; background:#f00;">Header</div>
<div style="width:100%; height: 20px; background:#00f;"">Nav</div>
<div style="width:100%; height: 150px; background:#005;"">News</div>
<div style="width:100%;">
  <div style="width:200px; float:left; height: 300px; border: 1px solid #000;">Left column</div>
  <div style="width:200px; float:right; height: 300px;border: 1px solid #000">Right column</div>
  Center text
</div>
<div style="width:100%; height: 150px; background:#0f0; clear: both;"">Footer</div>
</body>
</html>

This code mimics your design layout effectively, incorporating all the necessary CSS styles directly into the HTML.

Answer №6

it can be summarized as follows:

HTML structure:

<div id="universal-navigation"></div>
<div id="wrapper">
  <div id="header"></div>
  <div id="navigation-bar"></div>
  <div id="flashing-news"></div>
  <div id="main">
    <div id="left-sidebar"></div>
    <div id="content"></div>
    <div id="right-sidebar"></div>
  </div>
  <div id="footer"></div>
</div>

CSS styling:

* { margin:0; padding:0 }
#universal-navigation { width:100%; height:20px }
#wrapper { width:960px; margin:0 auto }
#header { width:960px; height:200px }
#navigation-bar { width:960px; height:40px }
#flashing-news { width:960px; height:150px }
#main { width:960px; height:100px }
#left-sidebar { position:relative; float:left; width:180px; overflow:hidden }
#right-sidebar { position:relative; float:left; width:180px; overflow:hidden }
#content { position:relative; float:left; width:600px; overflow:hidden }
#footer { width:960px; height:100px }

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

Incorporating Blank Class into HTML Tag with Modernizr

Currently, I am experimenting with Modernizr for the first time and facing some challenges in adding a class to the HTML tag as per the documentation. To check compatibility for the CSS Object Fit property, I used Modernizr's build feature to create ...

Can you explain the distinction between using inline-block and inline-table display properties?

It appears that these display selectors are indistinguishable based on my assessment. According to the Mozilla CSS documentation: inline-table: The inline-table value doesn't have a direct HTML equivalent. It functions like a <table> HTML elem ...

Step-by-step guide to activating vertical scrolling for select tiers in a multi-layered fly-out navigation

Currently working on a multi-level flyout menu to be integrated into a daterange picker for selecting time periods. Check out the jsfiddle link here: https://jsfiddle.net/6t72hd4x/1/ I attempted to set overflow-y: auto; in the .inner-list class to handle ...

How can I stack images on top of each other within a div

Currently, I am in the process of creating a blackjack game and encountering an issue with overlapping cards. Despite implementing the code below, all I see is a column of cards displayed. I have looked at similar questions for guidance, but I'm unab ...

Tips for enhancing the appearance of the dropdown scrollbar in PrimeNG

Just started exploring Angular and I've been struggling to customize the scrollbar on a PrimeNG dropdown. Does anyone have any tips or tricks to achieve this? Here is the HTML code: <p-autoComplete placeholder="- Select -" (onSelect)="onSelect(dh ...

Encountering issues with accessing image files located in the public folder of my Next.js project - Receiving a 404 Error message

I am currently facing an issue with my Next.js project where I am unable to use image files from the public folder. Despite checking that the file paths, names, and extensions are correct, as well as ensuring my configurations are accurate, I keep encounte ...

Modify the table layout by incorporating images within separate div containers for each row

In my layout, there is a grey box element that contains a table with rows of small images. I want the table to automatically adjust based on the number of images so that when the grey box reaches its maximum size, the images move to the next row. Is this a ...

Floating elements can be vertically aligned with spans

I am facing an issue with aligning three spans vertically inside a div. It seems simple to achieve, but vertical alignment is not working properly when I use float. My goal is to have the light blue bar vertically centered. Here is the code snippet: .co ...

Alignment of Material within Two Adjacent Divisions

I'm having trouble centering the content within two side-by-side divs. It seems like the content in each of these divs is centering towards one another, which is not what I want. I've created a main container and placed two divs inside it. The ...

Styling with CSS Variables and Transforming Elements

After conducting thorough research both on this platform and via Google, I have yet to find a solution to my query: "how can CSS variables be utilized in a CSS transform?" Within the HTML header, three CSS variables and their fallback values are declared: ...

Google Maps introduces a new feature that creates a blur effect on

Currently, I am utilizing the sample code provided below to superimpose an element on a Google map. <!DOCTYPE HTML> <html> <head> <title>Google Map Test</title> <style> html, body { margin: 0; ...

What is the best way to place a vertical line above the text when it is in use?

How can I add a vertical line above the active element using CSS? I was recommended to use either :before or :after, but I'm not sure how to implement them. I tried using :after without success. Any advice on achieving this effect? See the design exam ...

Steps to display a div element periodically at set time intervals

I've created a user greeting message that changes based on the time of day - saying Good Morning, Good Afternoon, or Good Evening. It's working well, but I'm wondering how I can make the message hide after it shows once until the next part o ...

Unusual spacing issue observed between <div> elements on Internet Explorer, but not on Firefox or Opera

I am facing a common question that many others may have asked before, but I haven't been able to find a solution to my specific issue. When viewing my website on FF, Opera, and IE on Windows 7, everything displays correctly. However, when using IE7 o ...

I have created a Joomla Template that incorporates my own CSS through JavaScript. Is there a method to include a distinct version tag to my custom CSS file, such as custom.css?20180101?

My usual method involves adding a unique tag to the css path in the html section, but my template is incorporating custom CSS through Javascript: if (is_file(T3_TEMPLATE_PATH . '/css/custom.css')) { $this->addStyleSheet(T3_TEMPLATE_URL . &apo ...

Adjust the color of the icon depending on the value

I am new to Angular2 and I'm looking for a way to dynamically change the CSS of an icon based on specific values. Here is the code in HTML: <li><i class="fa fa-check" [style.color]="'switch(types)'"></i>{{ types }}</l ...

Javascript functions correctly when the HTML file is opened locally, however, it encounters issues when accessed through an http-server

My HTML file includes an embedded web widget from tradingview.com with the following code: <!-- TradingView Widget BEGIN --> <span id="tradingview-copyright"><a ref="nofollow noopener" target="_blank" href="http://www.tradingview.com" style ...

NodeJS for CSS Parsing and Selecting

Can anyone recommend a NodeJS library similar to https://github.com/alexdunae/css_parser? I have tried using https://github.com/visionmedia/css, but it doesn't fulfill all my requirements. For example, when I parse the following CSS: .behavior1 {co ...

Is the imported style file not properly scoped?

Whenever I attempt to import a CSS file using this method, the styling is not properly scoped. Is it necessary to write the styles within a style tag for them to work correctly? I have been experimenting with this in Vue-cli. <style scoped> @im ...

Tips for overlaying text on the background in Next.js:

I'm currently working on creating an image element with overlay text. Check out my jsx code below: <div className={styles.img}> <img src={src} alt="" /> <p>{`(${size})`}</p> </div> And here is t ...