1

I'm very new to css, html and asp.net. I'm trying to clone a website in order to learn web tech concepts. Well, when i write everything in inline css, everything works fine. But when put these inline css codes into an external file, it's all messed up. How can i fix this? I always face this trouble when I use external css. Some of my previous codes are affecting my following or later codes and I face this trouble.

I don't understand how css works. I use classes with dots, ids with # but can't uderstand yet how to put them in an order between my html codes.

I want to add a JSFiddle When I hover on recipes there's a new div pops up. There are 3 new divs in that popped up div. The 1st div has a list holding the info of soup, legume etc. I want those 3 divs stay next to each other. I want to be able to style them. I don't know how to style nested elements by using class and id. This leads to trouble. To clarify nested elements have a look at this please: div paragraph div list a how to style these elements from an external CSS file instead of inline CSS such as style="bla bla bla"

here's my codes and pics.

.auto-style1 {
  width: 100%;
}

.aMain {
  text-decoration: none;
  color: black;
  background-color: #ddd6d6;
  display: inline-flex;
  width: 100px;
  height: 30px;
  font-size: 13.5px;
  justify-content: space-between;
  align-items: center;
  margin-left: 180px;
}

.divLogin {
  border-style: solid;
  border-width: 1px;
  height: 46px;
  width: 120px;
  float: right;
  margin-right: 180px;
  margin-left: 16px;
  margin-top: 12px;
  background-color: #ffffff;
  border-radius: 5px;
}

.pIcon {
  background-color: transparent;
  align-items: center;
  margin-top: 8px;
  margin-left: 6px;
}

.pLoginText {
  float: right;
  margin-right: 6px;
  margin-top: 5px;
  font-size: 15px;
  text-align: center;
}

.divSendRecipe {
  border-style: solid;
  border-width: 1px;
  width: 140px;
  height: 46px;
  float: right;
  margin-top: 12px;
  border-width: 1px;
  background-color: #ff6a00;
  border-radius: 5px;
}

.pSendRecipe {
  background-color: transparent;
  align-items: center;
  margin-top: 8px;
  margin-left: 6px;
}

.divSearch {
  border-style: solid;
  border-width: 1px;
  border-radius: 5px;
  width: 426px;
  height: 46px;
  float: right;
  margin-top: 12px;
  margin-right: 16px;
  border-width: 1px;
  background-color: #ffffff;
}

.divSearch .divSearchContainer {
  border-style: solid;
  border-width: 1px;
  border-radius: 5px;
  width: 426px;
  height: 200px;
  float: right;
  margin-top: 2px;
  border-width: 1px;
  background-color: #ffffff;
  z-index: 1;
  position: relative;
  display: none;
}

.divSearch:hover .divSearchContainer {
  display: block;
  background-color: #ffffff;
}

.divSearch .divSearchContainer span {
  display: inline-block;
  margin-left: 10px;
  margin-top: 12px;
  font-size: 18px;
  font-weight: bold;
  color: white;
}

.divSearch .divSearchContainer a {
  display: inline-block;
  background-color: #ddd6d6;
  width: 80px;
  height: 24px;
  padding: 3px 0 0 0;
  margin: 4px 0 0 8px;
  border-radius: 25px;
  text-decoration: none;
  color: white;
  text-align: center;
  font-size: 16px;
}

.divSearch input[type=search] {
  all: unset;
  font: 16px system-ui;
  color: #fff;
  height: 100%;
  width: 360px;
  padding-left: 6px;
  float: left;
}

.divSearch button {
  all: unset;
  cursor: pointer;
  width: 46px;
  height: 100%;
  float: right;
  font-size: 16px;
  font-weight: lighter;
  background-color: #d91616;
  color: white;
  text-align: center;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

.divSearch button:hover {
  font-size: 20px;
}

.table {
  border-collapse: collapse;
  table-layout: fixed;
  width: 500px;
  height: 70px;
  margin-left: auto;
  margin-right: auto;
}

.table a {
  text-decoration: none;
  color: white;
  font-weight: bold;
}

.table td {
  width: 25%;
  font-size: 15px;
  text-align: center;
  vertical-align: top;
  position: relative;
  border: 1px solid;
}

.table td .divContainer {
  border-style: solid;
  border-width: 1px;
  border-radius: 5px;
  width: 732px;
  height: 400px;
  margin-top: 52px;
  border-width: 1px;
  background-color: #ffffff;
  z-index: 1;
  position: relative;
  display: none;
}


/*.table td .divContainer div {
                    border-style: solid;
                    border-width: 1px;
                    width: 240px;
                    height: 300px;
                    background-color: brown;
                    margin-left: 2px;
                    margin-right: 2px;
                    float:left;
                    margin-top: 52px;
                    position: absolute;
                    display: inline;
                }*/


/*.table td .divContainer ul li a {
                    display: inline-block;
                    background-color: #ddd6d6;
                    width: 244px;
                    height: 24px;
                    padding: 3px 0 0 0;
                    margin: 4px 0 0 8px;
                    border-radius: 25px;
                    text-decoration: none;
                    color: blue;
                    text-align: left;
                    font-size: 16px;
                }*/

.table td:hover .divContainer {
  background-color: #b50c0c;
  display: block;
}

.image {
  height: 40px;
  width: 40px;
  border: none;
  position: absolute;
  top: 23px;
  left: 42px;
}
<head runat="server">
  <title></title>
  <link href="testCSS.css" rel="stylesheet" />
  <link rel="stylesheet" href="/fontAwesome/css/all.min.css" />
  <link rel="stylesheet" href="style.css" />

  <asp:ContentPlaceHolder ID="head" runat="server">
  </asp:ContentPlaceHolder>
</head>

<body>
  <form id="form1" runat="server">
    <div style="height: 30px; background-color: #ddd6d6">
      <a href="mainPage.aspx" class="aMain"><i class="fas fa-home"></i>MAIN PAGE</a>
    </div>
    <div style="height: 70px; background-color: #ffffff">
      <a href="mainPage.aspx">
        <asp:Image ID="Image1" runat="server" Height="45px" Width="120px" ImageUrl="pics/logo.png" title="Logo" Style="margin-left: 180px; margin-top: 12px; float: left;" />
      </a>
      <div class="divLogin">
        <p class="pLoginText">
          <strong>Log In<br />
                            or Sign Up</strong>
        </p>
        <p class="pIcon"><i class="fas fa-2x fa-user-circle"></i></p>
      </div>
      <div class="divSendRecipe">
        <p style="margin-right: 10px; margin-top: 15px; text-align: center; float: right; font-size: 15px;"><strong>Send Recipe</strong></p>
        <p class="pIcon"><i class="fas fa-2x fa-marker"></i></p>
      </div>
      <div class="divSearch">
        <input type="search" id="query" name="q" placeholder="Search cook or recipe..." />
        <button><i class="fas fa-search"></i></button>
        <div class="divSearchContainer">
          <div>
            <span>Popular Searchs</span><br />
            <a href="#">cake</a>
            <a href="#">cookie</a>
            <a href="#">pasta</a>
            <a href="#">dessert</a>
            <a href="#">wet cake</a>
            <a href="#">browni</a>
            <a href="#">pastry</a>
          </div>
          <div><span>My Last Searchs</span></div>
        </div>
      </div>
    </div>
    <div style="z-index: -1; height: 70px; background-color: #d91616;">
      <table class="table">
        <tr>
          <td class="td"><a href="recipesPage.aspx">RECIPES<img class="image" src="pics/cook book.png" /></a>
            <div class="divContainer">
              <div style="width: 240px;height: 300px;background-color: brown; margin-left: 2px; margin-right:2px; margin-top:6px; float:left;">
                <ul>
                  <li style="text-align:left;"><a style="width:230px;height:30px;">Soaps</a></li>
                  <li style="text-align:left;"><a style="width:230px;height:30px;">Legume Recipes</a></li>
                  <li style="text-align:left;"><a style="width:230px;height:30px;">Vegetable Dishes</a></li>
                  <li style="text-align:left;"><a style="width:230px;height:30px;">Meat Dishes</a></li>
                </ul>
              </div>
              <div style="width: 240px;height: 300px;background-color: brown; margin-left: 2px; margin-right:2px; margin-top:6px; float:left;">div2</div>
              <div style="width: 240px;height: 300px;background-color: brown; margin-left: 2px; margin-right:2px; margin-top:6px;  float:left;">div3</div>
            </div>
          </td>
          <td class="td"><a href="videosPage.aspx">VIDEOS<img class="image" src="pics/camera.png" /></a>
            <div class="divContainer" style="margin-left:-124px;">videos</div>
          </td>
          <td class="td"><a href="trendsPage.aspx">TRENDS<img class="image" src="pics/trends.png" /></a></td>
          <td class="td"><a href="suggestionsPage.aspx">SUGGESTIONS?<img class="image" src="pics/what should i cook.png" /></a></td>
        </tr>
      </table>
    </div>
    <div style="width: 1000px; height: 1000px; margin-left: auto; margin-right: auto; background-color: #D9FFFF">
      <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
      </asp:ContentPlaceHolder>
    </div>
  </form>
</body>

this is what my codes do:

this is what i want it to do: enter image description here

this is how my website looks. enter image description here

Improve this question
24
  • If you put the CSS in an external .css file then you need to tell your page about the existence of it using a <link> tag. You haven't shown one in your sample, so it's not clear if you've done that or not. See tutorialrepublic.com/css-tutorial/css-get-started.php for details. Commented Jun 28, 2021 at 12:49
  • 1
    As you are looking for a source to understand the concepts as well, this might help you. developer.mozilla.org/en-US/docs/Learn/CSS Commented Jun 28, 2021 at 12:50
  • P.S. the HTML you've shown doesn't reflect all the contents of your screenshot, so we can't even tell if the CSS would actually work (once included correctly) Commented Jun 28, 2021 at 12:50
  • @ADyson oh sorry, i didn't put that part here, already added it to my page. my troubles are generally caused by some other css codes affect my codes. i couldn't handle with this. Commented Jun 28, 2021 at 13:05
  • Ok, so please edit your question to show a) the CSS link, and b) a more complete example of the HTML, to reflect the screenshot. Commented Jun 28, 2021 at 13:06

2 Answers 2

Reset to default
3

when put these inline css codes into an external file, it's all messed up. how can i fix this? i always face this trouble when i use external css.

You can your css in a separate .css file and import it to your HTML file inside the <head></head> tags.

I think the below example explains it clearly.

Here I have my CSS in a separate .css file called myStyle.css. Then I have imported it to my HTML file. Remember in this example, both files are inside the same directory. Of course, you can put them anywhere and change the href accordingly.

/* myStyle.css */

.table {
border-collapse: collapse;
table-layout: fixed;
width: 500px;
height: 70px;
margin-left: auto;
margin-right: auto;
}
<head>
<link href="myStyle.css" rel="stylesheet">
</head>
<body>

</body>

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

well, i already recognized my page the css file but didn't share that part here. i'm facing a trouble like this: my codes are somehow affected by other codes. i can't get over it.
is your code specificity stronger than "other codes"?
2

The code share in the question

is not separating your CSS code into another file, but it is putting it inside the file as text, which is not evaluated as CSS. First, try to put that CSS code into a style tag as a proof-of-concept:

<style type="text/css">
.table {
border-collapse: collapse;
table-layout: fixed;
width: 500px;
height: 70px;
margin-left: auto;
margin-right: auto;
}

.table a {
    text-decoration: none;
    color: white;
    font-weight: bold;
}

.table td {
    width: 25%;
    font-size: 15px;
    text-align: center;
    vertical-align: top;
    position: relative;
    border: 1px solid;
}

    .table td .divContainer {
        border-style: solid;
        border-width: 1px;
        border-radius: 5px;
        width: 732px;
        height: 400px;
        margin-top: 52px;
        border-width: 1px;
        background-color: #ffffff;
        z-index: 1;
        position: relative;
        display: none;
    }

        .table td .divContainer div {
            border-style: solid;
            border-width: 1px;
            width: 240px;
            height: 300px;
            background-color: brown;
            margin-left: 2px;
            margin-right: 2px;
            margin-top: 52px;
            float:left;
            position: absolute;
            display: inline;
        }

        .table td .divContainer ul li a {
            display: inline-block;
            background-color: #ddd6d6;
            width: 244px;
            height: 24px;
            padding: 3px 0 0 0;
            margin: 4px 0 0 8px;
            border-radius: 25px;
            text-decoration: none;
            color: blue;
            text-align: left;
            font-size: 16px;
        }

    .table td:hover .divContainer {
        background-color: #b50c0c;
        display: block;
    }
</style>

Once that works, you can proceed in separating the CSS code into a file.

Linking a CSS file

Let's create a CSS called style.css. Remember where it is and add this code to your head tag:

<link rel="stylesheet" href="/my/correct/path/style.css">

Now, load your page in the browser. Look at the Console of your Dev Tools. If you see an error that states that the file was not successfully loaded, then you have specified the wrong path. Fix the path until loading your page no longer complains about the file not being loaded correctly.

Moving the CSS

Now copy the inner content of your style tag discussed earlier and paste into your style.css. Don't copy the <style type="text/css">, nor the </style. Remove the style tag. Reload the page. Make sure that for now style.css does not contain anything else. Work until the page reflects your styling.

Resolve conflicts

Now, assuming that you have different external CSS that conflicts with your rule, the first question is: do you need the external CSS? If not, then don't load it. If yes, then adjust your rules to be more specific than the remote CSS's rules if you want your CSS to be reflected. Change your structure if necessary. Work on your structure and design bit-by-bit until you fix all conflicting rules and your page looks good.

Test in several browsers

When you are done with your changes, load your page in several browsers and see whether some browsers don't handle your design well. If so, find out what the problems are and fix them.

Improve this answer

12 Comments

i added whole of my codes, sir. css codes of other parts are in the same file as my table codes. previous parts are working well. but table part isn't working properly. firstly, i had added only the codes of table part. but now i added all of my codes.some codes in the table area are affecting my innermost div's codes which is the div of divContainer
@electriciansmurf okay, please create a Fiddle with a problem and explain what the intention was and what you have got instead. Reviewing all of your code would be too time-consuming, so, let's focus on a single issue for now and once we figure out what the problem is and what the solution is, hopefully you will be able to apply the same idea for the other conflicts. If not, then we get to the next problem as well. So, we should solve one well-defined problem at a time.
okay, I don't know how to create a Fiddle but I'l search about it. So, instead of a Fiddle, I added 2 pics of what I want and what my code does.
@electriciansmurf I have seen them, but in order to convert the behavior from one picture into another, one would have to fix all problems. That might require some hard labor. My point is that we should take a single problem and fix that first. Maybe if we do that, then you will be able to fix the other problems. If fixing a problem still leaves you with questions, then we can fix the second problem and so on. So, let's focus on Minimal, Reproducible examples. As about creating a fiddle, visit jsfiddle.net, add your problem there, save and share the link.
@electriciansmurf but, again, people here will be less willing to fix all your problems than fixing a single problem at a time.
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.