To format a block of code in a message, please
Begin the block of code with three (3) backticks on a line by themselves,
paste the code next,
END the block of code with three (3) backticks on a like by themselves.
```
Paste code here
```
OR
paste the code into a message, then highlight the block of code and click the </> button in the message editor bar.
Rule of thumb: if it looks funny to you, it looks the same to us.
Thank you.
Sortedā¦
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>Bike King </title>
<link rel="stylesheet" href="screen.css" media="screen">
</head>
<body>
<div id="container">
<div id="header">
<a href="index.html"> Sign in/Register</a>
<div>Need Help? : 02080207651</div>
<div>FREE International shipping on<span>Selected Items</span></div>
<!-- #header --></div>
<div id="form-container">
<img src="image/logo.png" alt="logo">
<form action="#">
<input type="text" id="textbox" name="textbox" required placeholder="Search Bike King...">
<input type="submit" value="Search">
</form>
<!-- #form-container --></div>
</div>
</body>
</html>
* {
padding: 0;
margin: 0;
}
body {
background-color: #f0f0f0;
font: 100%/160% verdana, arial, helvetica, sans-serif;
padding:0em 0em 0em;
}
#container{
padding-right:10em;
padding-left:10em;
}
#header {
padding:0.75em 1em;
background-color: black;
text-align: center;
color:#fff;
}
#header a {
float: left;
color: #fff;
text-decoration: none;
}
#header a:hover {
color: #fcab15;
}
#header div:first-of-type {
float: right;
}
#header div:last-of-type {
display: inline-block;
}
#header div:last-of-type span {
margin-left: 0.5em;
color: #fcab15;
}
#form-container {
padding: 0.75em 1em 3em;
background-color: #065671;
text-align: center;
}
#form-container img{
float:left;
margin-top:-0.75em;
position:relative;
}
#form-container form {
display: inline-block;
vertical-align: middle;
margin-top:2em;
margin-right:20em;
}
#form-container form input[type="text"] {
line-height: 2.5em;
font-size: 1em;
}
#form-container form input[type="submit"] {/*Controls submit box*/
border-color: #008000;
border-style: outset;
background-color: #008000;
line-height: 2.5em;
font-size: 1em;
}
@media ( max-width:50em ) {
#header a,
#header div:first-of-type,
#header div:last-of-type {
float: none;
display: block;
}
}
@media ( max-width:30.5em) {
#form-container img {
display: block;
margin: none;
}
#form-container label {
display: block;
margin: 0.5em 0;
}
}
@media (min-width:90.5em){
#header a,
#header div:first-of-type,
#header div:last-of-type {
float: none;
display: block;
}
}
Thank you for letting me know how to do this
I now understand how difficult it is for a beginner to create a responsive website therefore i will be taking it slow and steady and leaving creating a responsive website until i have fully grasped html and css. To allow for better learning i will be investing in a book:
However i have some last questions that would really help me.
1.) As I want the website that i am creating to only be used on desktop displays with similar sizes would i need to use the position style in css to allow for the elements to stay in place?
2.)How long did you guys take to learn HTML and CSS to a level which can be considered proffessional?
(Thank you to everyone who helped me and were patient with me as i am a slow learner)
I really appreciate this forum and i will be using it a lot as it is amazing.
You canāt pick and choose 
You either do it properly or you do it wrong.
If you do it properly it works no matter the device or screen size. It is impractical to say you want it just for desktop as there is no such thing as a ādesktopā size these days.
Some laptops are bigger than desktops and some tablets are bigger than laptops and some phones are bigger than tablets and so onā¦
One size just does not cut it any more.
The techniques you use are the same anyway and no matter the device you will use the same techniques.
You will not use position absolute for structural layout but instead use techniques that allow the page to flow freely within its boundaries. Most of the time one element will follow another logically and in the flow of the document.
You can of course start simply until you grasp the concepts but the approach is the same in that you allow your content to fit fluidly into the space that it has to fit.
Avoid fixed widths and fixed heights. Use max-width if you need to restrict a container and margin auto to center it. Donāt add loads of left and right padding just to centre the page as that is an immediate fail.
It does not take long to master the basics in css but it is an ongoing job as it is constantly evolving and now covers a vast range of properties.
Learn the basics and learn how to do things properly from the start so that you donāt have to unlearn bad habits. Take your time and do it properly or donāt do it at all
No. Avoid using the position property as much as you can, certainly until you really understand css.
The position values of relative, absolute and fixed do have their uses, but that are minority cases. It is a common mistake for beginners to use them liberally to force a particular layout.
Itās better to keep things in the natural document flow as much as possible, that is key to maintaining fluidity in the layout.
Thatās a difficult one. It would depend on how much time you dedicate to it. But itās one of those things where you never stop learning and improving the longer you do it. And I donāt see a rigid threshold where you cross the line from beginner to pro. You may at some point thing you have nailed it and you know CSS*, then some time later look at the work you did at that time and see it as rather shabby and amateurish.
*Here CSS could be substituted for any web language, be it PHP or whatever.
Another trap to avoid: I have heard many time before people say āI will make the site, but then make it responsive afterwardsā. That is the wrong approach, you will be doing the work twice undoing the rigid rules of a non responsive site.
Why?
So how hard is it?
How about you make a page in html, but donāt use any css. Then see how responsive it is.
The chances are, it will be. Most vanilla html will display fully responsive without any css. The main exceptions to this are images and tables (when too wide). Images can be dealt with quite easily with a couple of lines of css: img { max-width: 100%; height: auto }
Wide tables on the other hand are more tricky to make responsive.
But my point is: you can make a page fully responsive with virtually no css at all.
So why does everyone think itās so difficult?
I think many from the old school of web design got set in their ways of applying rigid rules and magic numbers to make a layout. Too much width: this, height: that and position: here going on, forgetting to use the natural document flow which is there from the start.
And then this notion of making the layout, then converting it to responsive, as in work on doing something, then have to work to undo what you did, the rework again to make it what it should have been in the first place. That sounds like a lot of work to me.
So if you think of your page as being responsive to begin with, then it is only the css that you then apply to it that determines whether it stays that way, which is mostly a case of avoiding rigid rules like fixed widths, setting heights and shoehorning things into place with positioning.
So going back to your original css, Iāll go though and pull it apart.
Where you have a 0 value, you donāt need units, 0 = 0 in any unit.
No need for 100% on your block element, it is full width by default with a value of width: auto which is more useful than 100% taking account of margins and padding.
Here is the first ārigid ruleā fail. If the screen is any smaller than that, you get scrollers. But so easy to fix: max-width: 1300px Use max-width instead of width, that way the block element will retain its default width: auto making it no wider than any given screen, while the max-width keeps a cap on it for any larger screen.
And the next one to avoid, just donāt fix heights. Height should be determined by the content, the element will expand vertically to contain whatever you put in it. If you need more space in it, add padding. If you really really must set a height for whatever reason, then use min-height to do it so it leaves room for expansion.
Not sure what you were doing there, like looking for a crow in a coal mine.
A prime example of magic numbers.
Also a magic number, but with line-height the rule is simple, always define as unitelss, that way the height will always be relative to the font size, where a value of 1 give no space between lines, 2 will be double line spacing, 0.5 will actually overlap the lines half way (not a good example) so generall you would use a value between 1 and 2 as in one point something.
And thatās a big magic number. The bigger they are, the nastier they are.
I could go on and onā¦
Reeeally helpful, thank you! I am working on the code and implementing what you just said and ill be sure to post it here so it can be seen.
Thanks.
Hello again, i done what you said this time and did not use position a lot of times and rather let the layout stay natural. In terms of the width, the website is perfect however the height is not so when ever i scroll in the content part (excluding the header/nav) or the white part becomes longer and i want it to stay in a set height. So when the user scrolls out too much the height of the white div stays the same.
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>Bike King </title>
<link rel="stylesheet" href="screen.css" media="screen">
</head>
<body>
<div id="headertop">
</div>
<div id="bodytop">
</div>
<div id="header">
<a id="sign" href="index.html"> Sign in/Register</a>
<div>Need Help? : 02080207651</div>
<div>FREE International shipping on<span>Selected Items</span></div>
<!-- #header -->
</div>
<div id="form-container">
<img src="image/logo.png" alt="logo">
<form action="#">
<input type="text" id="textbox" name="textbox" required placeholder="Search Bike King...">
<input type="submit" value="Search">
</form>
<!-- #form-container -->
</div>
<div class="nav" >
<ul>
<li><a href="index.html" class="active">Home</a></li>
<li><a href="male.html">Male</a></li>
<li><a href="female.html">Female</a></li>
<li><a href="unisex.html">Unisex</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</div>
<footer>
Bike King
</footer>
</body>
</html>
* {
padding: 0;
margin: 0;
}
body {
background-color: #f0f0f0;
font: 100%/160% verdana, arial, helvetica, sans-serif;
padding: 0em 0em 0em;
max-width:980px;
margin:0 auto;
}
#headertop {
background-color:black;
width:100%;
min-height:41px;
position:fixed;
z-index:-1;
right:0px;
}
#bodytop {
background-color:white;
position:fixed;
max-width:980px;
min-width:980px;
bottom:0px;
min-height:960;
z-index:-1;
right:auto;
top:100px;
margin:auto;
}
footer {
background-color:black;
position:fixed;
bottom:10px;
max-width:980px;
min-width:980px;
color:white;
bottom:0px;
min-height:40px;
text-align:center;
}
#header {
padding: 0.50em 0em;
background-color: black;
text-align: center;
color: #fff;
list-style-type: none;
}
#sign{
float: left;
color: #fff;
text-decoration: none;
list-style-type: none;
}
#header a:hover {
color: #fcab15;
list-style-type: none;
}
#header div:first-of-type {
float: right;
}
#header div:last-of-type {
display: inline-block;
}
#header div:last-of-type span {
margin-left: 0.5em;
color: #fcab15;
}
#form-container {
padding: 0.75em 0em 1em;
background-color: #065671;
text-align: center;
}
#form-container img {
float: left;
margin-top: -0.75em;
position: relative;
}
#form-container form {
display: inline-block;
margin-top: 2.5em;
margin-right: 25em;
}
#form-container form input[type="text"] {
line-height: 2em;
font-size: 1em;
border-radius:5px;
padding:0px 20px 1px;
}
#form-container form input[type="submit"] {
/*Controls submit box*/
border-color: black;
border-radius:5px;
background-color: black;
color:white;
line-height: 2;
font-size: 1em;
}
.nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color:#065671 ;
float: left;
text-align: center;
width:100%;
}
.nav li{
display: inline-block;
max-width: 120px;
min-width: 120px;
max-height:40px;
min-height:40px;
border-bottom: 3px solid #F8AD0F;
margin-right: -6px;
}
.nav a {
display: block;
color: white;
text-decoration: none;
font-size: 17px;
max-width: 120px;
min-width: 120px;
max-height:40px;
min-height:40px;
}
.nav a:hover {
background-color: #111;
color:white;
}
.nav a.active {
background-color: #4CAF50;
color: white;
border-top: 3px solid #F8AD0F;
background-color:#065671;
}
Thank you for your help
Nevermind i think i got it to work
* {
padding: 0;
margin: 0;
}
body {
background-color: #f0f0f0;
font: 100%/160% verdana, arial, helvetica, sans-serif;
padding: 0em 0em 0em;
max-width:980px;
margin:0 auto;
}
#headertop {
background-color:black;
width:100%;
min-height:41px;
position:fixed;
z-index:-1;
right:0px;
}
#bodytop {
background-color:white;
position:fixed;
max-width:980px;
min-width:980px;
top:40px;
min-height:910px;
max-height:910px;
z-index:-1;
right:auto;
margin:auto;
}
footer {
background-color:black;
position:fixed;
max-width:980px;
min-width:980px;
color:white;
bottom:0px;
min-height:40px;
max-height:40px;
bottom:820px;
top:910px;
text-align:center;
}
#header {
padding: 0.50em 0em;
background-color: black;
text-align: center;
color: #fff;
list-style-type: none;
}
#sign{
float: left;
color: #fff;
text-decoration: none;
list-style-type: none;
}
#header a:hover {
color: #fcab15;
list-style-type: none;
}
#header div:first-of-type {
float: right;
}
#header div:last-of-type {
display: inline-block;
}
#header div:last-of-type span {
margin-left: 0.5em;
color: #fcab15;
}
#form-container {
padding: 0.75em 0em 1em;
background-color: #065671;
text-align: center;
}
#form-container img {
float: left;
margin-top: -0.75em;
position: relative;
}
#form-container form {
display: inline-block;
margin-top: 2.5em;
margin-right: 25em;
}
#form-container form input[type="text"] {
line-height: 2em;
font-size: 1em;
border-radius:5px;
padding:0px 20px 1px;
}
#form-container form input[type="submit"] {
/*Controls submit box*/
border-color: black;
border-radius:5px;
background-color: black;
color:white;
line-height: 2;
font-size: 1em;
}
.nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color:#065671 ;
float: left;
text-align: center;
width:100%;
}
.nav li{
display: inline-block;
max-width: 120px;
min-width: 120px;
max-height:40px;
min-height:40px;
border-bottom: 3px solid #F8AD0F;
margin-right: -6px;
}
.nav a {
display: block;
color: white;
text-decoration: none;
font-size: 17px;
max-width: 120px;
min-width: 120px;
max-height:40px;
min-height:40px;
}
.nav a:hover {
background-color: #111;
color:white;
}
.nav a.active {
background-color: #4CAF50;
color: white;
border-top: 3px solid #F8AD0F;
background-color:#065671;
}
Anyways if anybody has any feedback please let me know.
Well, this linkā¦
Placeholder Attribute Is Not A Label!
ā¦must have a high priority for starters. 
coothead
Try these free tools to validate your website. Both tools allow urls or pasting complete or partial web pages.
If the we pages do not validate then the browser has to guess what is trying to be achievedā¦
When you put both min and max to the same width then you are effectively saying the same as if you had only specified width.
e.g. width:120px is all you will get.
You usually want to set a max-width and then that allows the element to get smaller if squeezed.
Also donāt add empty elements just to make backgrounds when there are plenty of existing elements you can use.
Iāve done a quick and very rough re-jig of your code to show what you should be aiming for although I realise I have changed your header as I didnāt know where you were going with it.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Untitled Document</title>
<style>
/* this is ok for demos but a pain in the neck on real sites so just reset elements as you go (or use a proper reset method))
* {
padding: 0;
margin: 0;
}
*/
/* use border-box model as it is much easier - padding and borders are included inside the width */
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
-webkit-text-size-adjust: 100%; /* stop ios zooming text on orientation change */
text-size-adjust: 100%;
}
html,
body {
height: 100%;
}
html,
body,
p,
form,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
ol {
margin: 0;
padding: 0;
}
body {
background-color: #f0f0f0;
font: 100%/160% verdana, arial, helvetica, sans-serif;
padding: 0em 0em 0em;
max-width: 980px;
margin: 0 auto;
}
.header,
.footer {
position: fixed;
right: 0;
left: 0;
top: 0;
background: black;
color: #fff;
min-height: 3em;
z-index: 99; /* keep above everything else */
}
.footer {
text-align: center;
top: auto;
bottom: 0;
font-size: 0.8em;
}
.footer p {
line-height: 3em;
}
.inner {
max-width: 980px;
margin: auto;
padding: 0 10px;
}
.header .inner {
padding: 0.5em 10px;
text-align: center;
color: #fff;
display: flex; /* modern browsers only */
justify-content: space-between;
}
.header a {
color: #fff;
text-decoration: none;
}
.header a:hover {
color: #fcab15;
list-style-type: none;
}
.free b {
margin-left: 0.5em;
color: #fcab15;
font-weight: normal;
}
/* keep everything else inside the wrapper */
.wrapper {
background: white;
min-height: 100%;
max-width: 980px;
padding: 3em 0; /* push content so its visible otherwise it will be hidden under the fixed header and footer */
margin: auto;
}
.content-header {
padding: 0 0 1em;
background: #065671;
text-align: center;
overflow: hidden;
}
.content-header h1 {
float: left;
position: relative;
font-size: 100%;
color: #fff;
}
.content-header h1 img {
display: block;
max-width: 100%;
}
.content-header form {
float: right;
padding: 1em;
}
.search-label {
position: absolute;
left: -999em;
}
.content-header form input[type="text"] {
line-height: 2em;
font-size: 1em;
border-radius: 5px;
padding: 0px 20px 1px;
margin: 5px 0;
}
.content-header form input[type="submit"] {
/*Controls submit box*/
border-color: black;
border-radius: 5px;
background-color: black;
color: white;
line-height: 2;
font-size: 1em;
margin: 5px 0;
}
.nav {
list-style-type: none;
background: #065671;
overflow: hidden;
clear: both;
text-align: center;
display: flex;
}
.nav li {
flex: 1 0 0;
display: inline-block;
}
.nav li.close-menu {
display: none;
}
.nav a {
display: block;
color: white;
text-decoration: none;
font-size: 17px;
line-height: 40px;
border-top: 3px solid transparent;
border-bottom: 3px solid #f8ad0f;
}
.nav a:hover {
background-color: #111;
color: white;
}
.nav a.active {
background-color: #4caf50;
color: white;
border-top: 3px solid #f8ad0f;
border-bottom: 3px solid transparent;
background-color: #065671;
}
.content {
padding: 20px 10px;
}
.content h2 {
margin: 0 0 1em;
text-align: center;
}
.content p {
margin: 0 0 1em;
}
.mobile-nav {
display: none;
}
@media screen and (max-width: 900px) {
.header,
.footer {
position: static;
}
.wrapper {
padding: 0;
}
}
@media screen and (max-width: 560px) {
.content-header h1 {
float: none;
margin: auto;
display: table;
}
.content-header form {
float: none;
}
.mobile-nav {
display: block;
background: #000;
color: #fff;
text-align: center;
}
.mobile-nav a {
color: #fff;
text-decoration: none;
display: block;
padding: 5px 10px;
}
.mobile-nav a:hover {
background: #f8ad0f;
}
.nav {
position: fixed;
left: -320px;
top: 0;
bottom: 0;
overflow: auto;
z-index: 1000;
width: 320px;
display: block;
padding: 0;
text-align: center;
transition: all 0.5s ease;
}
.nav li {
display: block;
}
.nav li a {
line-height: normal;
padding: 5px 10px;
border-bottom: 1px solid #f8ad0f;
display: block;
}
.nav:target {
left: 0;
box-shadow: 0 0 10px 10px rgba(0, 0, 0, 0.5);
}
.nav a.active {
border: none;
border-bottom: 1px solid #f8ad0f;
background: #000;
}
.nav li.close-menu {
display: block;
}
.header,
.header .inner {
display: block;
}
.header a,
.header span {
display: block;
}
}
</style>
</head>
<body>
<div class="wrapper">
<header id="header" class="header">
<p class="inner"> <a id="sign" href="index.html"> Sign in/Register</a> <span class="free">FREE International shipping on <b>Selected Items</b></span> <span>Need Help? : 01234 56789</span> </p>
</header>
<main>
<div class="content-header">
<h1><img src="http://lorempixel.com/200/100/sports" width="200" height="100" alt="Company Name Here"></h1>
<form action="#">
<label for="textbox" class="search-label">Search this site</label>
<input type="text" id="textbox" name="textbox" required placeholder="Search Site...">
<input type="submit" value="Search">
</form>
<!-- .content-header -->
</div>
<div class="mobile-nav"><a href="#nav">Menu</a></div>
<ul id="nav" class="nav">
<li><a href="index.html" class="active">Home</a></li>
<li><a href="male.html">Male</a></li>
<li><a href="female.html">Female</a></li>
<li><a href="unisex.html">Unisex</a></li>
<li><a href="contact.html">Contact Us</a></li>
<li class="close-menu"><a href="#header">Close menu</a></li>
</ul>
<div class="content">
<h2>Section header</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vehicula enim non eleifend tempor. Aliquam efficitur urna non risus feugiat, sit amet porta enim consequat. Integer consequat velit nec pretium ullamcorper. Sed lacus justo, tempus et enim non, pharetra gravida massa. Donec magna est, varius in accumsan id, ultrices vitae lectus. Suspendisse varius augue sed velit faucibus semper. Phasellus bibendum libero ultricies, faucibus sapien id, fermentum velit. Mauris dolor odio, ultricies id hendrerit eget, congue a libero.</p>
<p>Integer metus lacus, semper sit amet nisi vitae, finibus imperdiet sapien. Suspendisse sollicitudin nisi eget commodo laoreet. Maecenas tellus felis, ullamcorper vel fermentum in, eleifend sit amet orci. Nulla facilisi. Nulla facilisi. Suspendisse potenti. Pellentesque vulputate nibh nec faucibus ultricies. Sed a gravida libero, vel vulputate est. Vestibulum vitae aliquet dolor. Morbi tristique felis vitae enim facilisis, convallis dignissim leo dictum. Morbi sit amet leo mattis, blandit diam sit amet, blandit arcu. Donec eu semper tortor.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vehicula enim non eleifend tempor. Aliquam efficitur urna non risus feugiat, sit amet porta enim consequat. Integer consequat velit nec pretium ullamcorper. Sed lacus justo, tempus et enim non, pharetra gravida massa. Donec magna est, varius in accumsan id, ultrices vitae lectus. Suspendisse varius augue sed velit faucibus semper. Phasellus bibendum libero ultricies, faucibus sapien id, fermentum velit. Mauris dolor odio, ultricies id hendrerit eget, congue a libero.</p>
<p>Integer metus lacus, semper sit amet nisi vitae, finibus imperdiet sapien. Suspendisse sollicitudin nisi eget commodo laoreet. Maecenas tellus felis, ullamcorper vel fermentum in, eleifend sit amet orci. Nulla facilisi. Nulla facilisi. Suspendisse potenti. Pellentesque vulputate nibh nec faucibus ultricies. Sed a gravida libero, vel vulputate est. Vestibulum vitae aliquet dolor. Morbi tristique felis vitae enim facilisis, convallis dignissim leo dictum. Morbi sit amet leo mattis, blandit diam sit amet, blandit arcu. Donec eu semper tortor.</p>
</div>
</main>
<footer class="footer">
<div class="inner">
<p>Copyright © Company Name</p>
</div>
</footer>
</div>
</body>
</html>
Iāve put it on codepen so its easier to see and mess about with:
(View on codepen to see full effect and to open and close browser window)
Bear in mind this is just a rough draft to show you how to handle fixed headers and footers and how to scale easily down to mobile. You can easily change the design to suit (i.e. look better) but just remember to keep checking the design at different widths and then make the necessary adjustments with media queries (open and close the browser window and if the viewport gets a horizontal scrollbar or content doesnāt fit then throw in a media query at that point and make it better).
Oh btw I found a bug on safari browsers where if u want to size dropdown boxes the height never works and have to apply a line-height above 40px to even get a size on dropdown boxes I used to have that problem as cross browser issues is a gigantic pain!
anyway I donāt know if it still is a case anymore also I donāt think my 2c comment is useful anymore.
may I ask why is IDās bad practice over classes?
Itās an issue to me as using idās overwrite any codes added under certain classes and the use of classes sometimes takes on the parent element as this can be an issue as incase applying styles to an existing element overrides classes and can be a setback for the way you wish to design
as in use of idās it will usually overwrite any code the parent element gives them and can be helpful to target certain elements as for instance like a file structure.
Head ā nav-> a:links I never go past 3 id selections but doing it this avoids too many complications to codes edited by other idās, and for me can be handy to pin point problems a little better.
I just want to know why is it better to use classes as this causes too many different assigned classes to effect their siblings and can be confusing when trying to fix?
The main reason not to use IDs, is the reason you are using IDs: because of their very high specificity, it makes the styles very difficult to override when needed.
If you find you are regularly having to use IDs as a means to brute force a selection, the chances are you approach is flawed somewhere before that point and to need to rethink your methods. Like using !important itās a slippery slope that will end in an unmaintainable mess.
The other big reason against it is that an ID must be unique to the page, so it can only be used on a single element which is quite an inefficient way to write css.
I donāt say I never use ID selectors, but only very sparingly when there is a special reason to do so.
I am not using brute force. I mean to say that in a sense of something like this:
<div id="head">
<h1></h1>
<p></p>
</div>
<div id="footer">
<h1></h1>
<p id="center"></p>
<p id="left"></p>
this is not a big work or anything just a example I am using now the way i prefer to use the idās is in the css selection I use the ID followed by the element for specific effects like so
#head h1{
fon-size 60px;
}
I know you would say never to use h1 tags more than once this is just example purpose.
now if i were to add another h1 tag it would get overwritten by the css as a parent selector now adding a new id to style it separately would work but applying class would not make a big different as most of the time id triumphs over any other form of css selectors now if i added a class it would not overwrite the element but would add to it.
itās kind of hard to explain what I am trying to say the use of idās gives me more control over the elements than what classes do as it can become more complicated the more in depthās the css gets, but using idās to specify parts of an element has more control and where one fails the other helps to give control.
for instance one issue I somehow run into background images donāt seem to work on classes opposed to idās or element selections using siblings.
I donāt usually know why but it has some strange effects when I use classes rather than elements,
I have tried it in the past but could never grasp why some effects never seem to work on classes opposed to elements and using sibling elements uses less code than having to apply classes to everything on the page.
That example does not make sense to me. There is no reason why this would not work:-
.head h1 { color: red }
.footer h1 { color: green }
or even:-
header h1 { color: red }
footer h1 { color: green }
/* Using bare semantic elements with no class or ID */
Classes work. If they do not work and you need to resort to IDs then you are brute forcing a selection.
You need to learn about specificity.
Hi there SamA74,
I use the āid attributeā on a regular basis.
Do you find thisā¦
HTML
<div id="header">
<a href="index.html"> Sign in/Register</a>
<div>Need Help? : 02080207651</div>
<div>FREE International shipping on<span>Selected Items</span></div>
<!-- #header --></div>
CSS
#header {
padding:0.75em 1em;
background-color: #000;
text-align: center;
color:#fff;
}
#header a {
float: left;
color: #fff;
text-decoration: none;
}
#header a:hover {
color: #fcab15;
}
#header div:first-of-type {
float: right;
}
#header div:last-of-type {
display: inline-block;
}
#header div:last-of-type span {
margin-left: 0.5em;
color: #fcab15;
}
ā¦to be an objectionable coding pracise?
ccothead
Thatās how I use IDsā too, in small doses on the page. For elements that are only used once, as IDsā were intended.
I find that the child elements in my header and footer are most often unique anyway so Iām not having to set up a new class or override one.
Just recently ran across a piece of code that would have got real messy with multiple classes , IDsā were an efficient way to handle the differences.
As long as one understands the weight and specificity that IDsā carry then they understand when to use them. A newcomer may not have that knowledge under their belt yet and can easily get themselves backed into a corner.
Sam did have a disclaimer statement at the end of post #36