Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

css issues #11

Open
MashalMohammed opened this issue Jul 4, 2017 · 13 comments
Open

css issues #11

MashalMohammed opened this issue Jul 4, 2017 · 13 comments

Comments

@MashalMohammed
Copy link
Contributor

MashalMohammed commented Jul 4, 2017

inline css is working fine for both bg image and color.

i cant put background image or background color, via home.css:

body
{
  padding-left: 0px;
  padding-right: 0px;
  background-color:#555555;
}

this too , not working:
background-image:url(/assets/images/bg.bmp);

btw, me newbie

@ebeyabraham
Copy link
Member

ebeyabraham commented Jul 4, 2017

yeah the body class is not working for me too. You make a different class.
Ex

#bodyBG
{
//Content
}

and then in the html tag you give < body id="bodyBG" >

@ParadoxZero
Copy link
Member

@Poirot1729 while I am not exactly sure, #bodyBG makes styles an id, .bodyBG styles a class 😅

@bineeth923
Copy link
Member

Try background-image:url("assets/images/bg.bmp");
Are you sure the linking this css file into the html is correct?

@bineeth923
Copy link
Member

Using of id's and class wisely saves time a lot.

Id's are unique. They can be used only once in that HTML page (strictly speaking).
Classes can be used at multiple times.

Like if you want to create a card like thing.. and if there are several sections,

HTML

<div id="section-1" class="card">
//some data
</div>
<div id="section-2" class="card">
//some data
</div>
<div id="section-3" class="card">
//some data
</div>

//... continues till .. say 20.

And for styling it, if one is using id's only then
CSS

#section-1 , #section-2 , #section-3 , ... , #section-20{
   border : solid #555555 1px;
   padding : 1em 2em;
   margin : auto;
   border-radius : 5px;
   // rest..
}

With the use of class, it simplifies to
CSS

.card{
   border : solid #555555 1px;
   padding : 1em 2em;
   margin : auto;
   border-radius : 5px;
   // rest..
}

Another advantage is that if you want to add one more section , just give it class "card" . No need of editing CSS everytime.

@MashalMohammed
Copy link
Contributor Author

MashalMohammed commented Jul 6, 2017

The ID Selectors
You can define style rules based on the id attribute of the elements. All the
elements having that id will be formatted according to the defined rule.

#black {
    color: #000000;
}

This rule renders the content in black for every element with id attribute set
to black in our document. You can make it a bit more particular. For example:

h1#black {
     color: #000000;
}

This rule renders the content in black for only <h1> elements with id attribute
set to black.
The true power of id selectors is when they are used as the foundation for
descendant selectors. For example:

#black h2 {
     color: #000000;
}

In this example, all level 2 headings will be displayed in black color when those
headings will lie within tags having id attribute set to black.

Something I just read.

@MashalMohammed
Copy link
Contributor Author

@bineeth923 tried background-image:url("assets/images/bg.bmp");
not working.
Note that neither background-color:#555555; is working.

@bineeth923
Copy link
Member

@MashalMohamed
In html, there are no "errors" statements ..but only "invalid" statements
IDs should be unique.. not must.
Some of the problems that might arise if you use id multiple times

  • Serious unexpected behaviour will occur when you use JS . Like getelementbyid() expects a object not a array

  • Its confuses things.. because IDs are used to uniquely identify a element in a html page. Using multiple times same name doesn't make sense! For this purpose, classes are there.
    In your case, #black{..} should uniquely select only one element in that html page.
    You can use html validator of W3C to check the html page. There you can see the warning. But anyways the site will render.

Now you are just creating a static site, so there won't be much problem. But as the time progresses both editing and documentation of this site will be very difficult.

@bineeth923
Copy link
Member

@MashalMohamed the html you are working with.. it's in pushed in GitHub right?

@bineeth923
Copy link
Member

I just went through the project.
The background-image:url("assets/images/bg.bmp"); doesn't worked because the home.css file is in the CSS folder and the img you want to access is in assets folder. The URL property works with relative addressing. Since the assets folder is not in CSS folder, you can't access that file from CSS.
@MashalMohamed I recommend restructuring the project as its good practice to keep the style sheets and HTML separate.

@MashalMohammed
Copy link
Contributor Author

I have tried absolute pathing. Doesn't work.
@bineeth923 y isn't background-color working?
Were you able to fix these 2 cases. If so, share the code.

@bineeth923
Copy link
Member

In your body tag, an inline CSS is present style="background: url(assets/images/bg.bmp) fixed;"
Instead of background property, try background-image there. Then add background-color property for body in css. It will work.
NB: when you have background-image with repeat set (by default it is inherit, which in this case is repeat.), the background-color will not be seen as it comes behind the image.

<body style="background: url(assets/images/bg.bmp) fixed;">
The reason for not working with background-color in the CSS file is that background is a shorthand for all the properties related to the background (including background-image). Since CSS is last come serve type, default value inherit will be taken for background-image because the inline CSS loads last.
Use developer tools of the browser. It comes handy for such scenarios.

I'm attaching a demo, check it out.

@ebeyabraham
Copy link
Member

There is one more issue. We are using 2 css file for the same page, one from bootstrap and other one we made, that is why there is issues in CSS? Any workaround? Or should we merge it into the bootstrap css?

@bineeth923
Copy link
Member

Cascading Style Sheets.

"Cascading" means that styles can fall (or cascade) from one style sheet to another, enabling multiple style sheets to be used on one HTML document.

So @Poirot1729 , just load the bootstrap CSS first, then load your CSS file. And if you want to change any property of bootstrap's, then change it in your CSS.

Just for a note... even the simplest HTML document may have three or more style sheets associated with it including:

  • The browser's style sheet
  • The user's style sheet
  • The author's style sheet

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants