Creating a Two-Column Layout with CSS in ASP .NET MVC3 using Razor Syntax

I've been working on some basic CSS to set up a layout with a header, navigation, main column, sidebar, and footer. While I can see the layout, I'm struggling to change the colors as intended. Despite my efforts to make everything Blue, the footer remains unchanged. Could I have inadvertently removed something essential for MVC3 and Razor? I also noticed that if images weren't placed under Content, they wouldn't show up.

Below is the CSS code:

body, html {
    margin:0;
    padding:0;
    color:Blue;
    background:Blue;
}

#wrap {
    width:750px;
    margin:0 auto;
    color: Blue;
    background:Blue;
}

#header {
    padding:5px 10px;
    background:Blue;
}

h1 {
    margin:0;
}

#nav {
    padding:5px 10px;
    background:Blue;
}

#main {
    float:left;
    width:300px;
    padding:10px;
    color:Blue;
    background:Blue;
}

h2 {
    margin:0 0 1em;
}

#sidebar {
    float:right;
    width:410px;
    padding:10px;
    color:Blue;
    background:Blue;
}

#footer {
    clear:both;
    padding:5px 10px;
    background:#ddd;
}

#footer p {
    margin:0;
    height: 1px;
}

#nav ul {
    margin:0;
    padding:0;
    list-style:none;
}

#nav li {
    display:list-item;
    margin:0;
    padding:0;
}

Answer №1

You have applied the same color (Blue) to the background and color properties. This causes both text and background to blend together, making it difficult to see the content even though it is there.

To fix this issue, change the color: Blue; to color: #fff; for elements such as body, html, #wrap, #sidebar, etc.

Check out the DEMO here.

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

Repeated item replacing my model using ngOptions

I am struggling with an issue related to a select element in my HTML code. The select element has certain data attributes and ng-model bindings that should allow me to update the category when an item is selected. However, whenever I try to console log the ...

Stop a form field from being visible on the screen

I'm working on a project where I would like to hide the user field in the form. models.py class Questions(models.Model): user=models.ForeignKey(User) category=models.ForeignKey(Categories) question=models.TextField(max_length=500) cr ...

Ways to extend the length/size of the HTML5 range input type

Is there a way to adjust the length or size of the HTML5 range input for it to appear longer or bigger? <!DOCTYPE html> <html> <body> <form action="/" method="get"> Points: <input type="range" name="points" min="0" max="10"& ...

Trouble with Bootstrap 5 Padding Distorting the Aspect Ratio of Image Collection

I am struggling to manage three images in a layout where they span one row and two columns (please refer to the image). While I can make it look perfect at one screen resolution, the ratio of the images becomes distorted when viewed in other screen sizes d ...

What is the best way to add HTML elements into my table?

Is there a way to store formatted text in a table using a rich text editor that outputs HTML? I encountered an issue when running it: An error occurred while parsing the query. [ Token line number = 1,Token line offset = 31,Token in error = < ] Th ...

Steps for incorporating code to calculate the total price and append it to the orderMessage

I am seeking help with this program that my professor assigned to me. The instructions marked by "//" are the ones I need to implement in the code, but I'm struggling to understand how to proceed. Any assistance would be greatly appreciated, even just ...

Changing the Width of a Material Icon

I'm currently working with Angular and Angular Material, and I have a md-button that includes both an icon and text. You can view it here: http://jsfiddle.net/u7fp5wxv Here is the code snippet for reference: <md-button layout="row" style="width: ...

How can I deactivate a specific range without altering the appearance with Bootstrap 5?

My challenge lies in maintaining the style of a range input while disabling user interaction with it. I've tried to recreate the original styling manually, but without success: <!DOCTYPE html> <html lang="en"> <head> <!-- ...

What are some effective ways to resize the fontawesome glyph icon on my twitter-bootstrap website while maintaining proper alignment?

Are you able to figure out the code change needed on this under construction web page? There is a white box next to the company name at the top left, check it out here The site is twitter-bootstrap based with a white box "glyph icon" from FontAwesome. I&a ...

Tips for customizing the CSS of the Bootstrap 4.5 tooltip

Using bootstrap 4.5.3, I have created a tooltip and now I want to customize its appearance by adding my own styles: .tooltip { display: flex; justify-content: flex-start; position: absolute; z-index: 9999; background: #ddff9d; color ...

Searching for text boxes in Bootstrap dropdown

I've modified a bootstrap template by adding a text box to the navigation bar. My goal is to have this text box display a dropdown list of items automatically as users type, rather than requiring them to manually click search or navigate to another pa ...

Drop down selection triggering text change is malfunctioning

I am facing an issue with a script I wrote that is supposed to change the label name based on the selection made from a dropdown menu. The problem I am encountering is that the label does not appear when I select an option from the dropdown. I would appre ...

PHP: Bootstrap CSS for Carousels

I'm experiencing some difficulties with the Bootstrap CSS Carousel on my website. The left and right arrows seem to be unresponsive, and the slides are not transitioning automatically. I have been unable to identify the root cause of this issue. Belo ...

Loading times for the Polymer Project are sluggish

The website design is very appealing. However, it seems to be loading quite slowly even on Google's servers. Is there a way to speed up the initial load time of the Polymer site? Additionally, there are numerous HTTP requests being made; is there a wa ...

Dynamic jQuery dropdown menu with nested or multi-level options, allowing for changing options within the same field based on selection

I am looking to implement a unique dropdown feature that combines chained fields with navigation for select field options. The concept involves dynamically loading options from Ajax/php, where the user can select an option and then navigate back to previou ...

The bootstrap carousel images are arranged in a vertical stack, regardless of the size of the screen

I'm having some trouble with my bootstrap carousel. The images are stacking on top of each other when the page loads, even though everything else seems to be working fine - controls, indicators, etc. Any ideas on what's causing this issue? <! ...

Is it necessary for nested Bootstrap 3 rows to be enclosed within a col-sm-*?

Is it necessary for nested Bootstrap 3 rows to be within a col-sm-* or can they also be nested within a col-md-, col-xs-, etc? The documentation specifies col-sm-* but does not clearly state if nesting within other col sizes is not allowed. http://getboo ...

Limiting an HTML table from scrolling in a single direction on an iPad

I have a simple HTML table with restricted width and height to enable vertical and horizontal scrolling. However, on iPad, users can scroll in all directions, including diagonally. I would like to limit the scrolling to one direction at a time. Can this be ...

Assigning a specific data type value to an element as it enters the top of the viewport

I have a unique color code stored for each section, and when a section reaches the top of the screen (specifically -180px for the header), I want to dynamically change the text color of the header element as you scroll through the sections. Despite no erro ...

Tips for dynamically updating the URL based on a query string within the URL

Here is a table generated by GridView: <table id="ctl00_centerContent_GridView1"> <tr> <th scope="col"> <!-- COLUMN INFORMATION --> </th> </tr> <tr> ...