Need help with my classes

HTML-CSS
#1

It seems like i have a class limitation.
When i add another class it dosent get coloured and the effect dosent show on my
webpage.
When i delete a working class, suddenly i can add a class and it works.
Thats why it feels like a class limitation.
I hope you can find a solution with me <3 .
Btw sorry for my bad english :slight_smile:

My Index

<!DOCTYPE html>
<html>
<head>
	<title>Tabellen Sammlung</title>
	<link class="links" rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
	<div class="header1">
		<h1> tabular profile collection </h1>
	</div> 
	
	<hr><br><br>

	<div class="ae">
		<br><a href="C:\Users\Adam\Desktop\ts\secondpage.html">Ahmed Elbakri</a>
	<!---img class="pictures" src="C:\Users\Adam\Desktop\ts\smileyface.png"--->


	</div>

	<div class="on">
		<br><a href="C:\Users\Adam\Desktop\ts\secondpage.html">Olliver Nix</a>
	<!---img class="pictures" src="C:\Users\Adam\Desktop\ts\smileyface.png"--->


	</div>


<div class="et">
		<br><a href="C:\Users\Adam\Desktop\ts\secondpage.html">Enes TĂĽrksever</a>
		<!---img class="pictures" src="C:\Users\Adam\Desktop\ts\smileyface.png"--->

	</div>

<div class="aa">
		<br><a href="C:\Users\Adam\Desktop\ts\secondpage.html">Amir Ahmad</a>
		<!---img class="pictures" src="C:\Users\Adam\Desktop\ts\smileyface.png"--->

	</div>

<div class="la">
		<br><a href="C:\Users\Adam\Desktop\ts\secondpage.html">Luay Asad</a>
		<!---img class="pictures" src="C:\Users\Adam\Desktop\ts\smileyface.png"--->

	</div>

<div id="bb">
		<br><a href="C:\Users\Adam\Desktop\ts\secondpage.html">Bastian Bier</a>
		<!---img class="pictures" src="C:\Users\Adam\Desktop\ts\smileyface.png"--->

	</div>

	<div id="sbb">
		<br><a href="C:\Users\Adam\Desktop\ts\secondpage.html">Sandro Bugiel</a>
		<!---img class="pictures" src="C:\Users\Adam\Desktop\ts\smileyface.png"--->

	

	</div>



	</div>
</body>
</html>

The CSS of “Index”

a {
	font-family: Verdana;
	font-size: 30px;
	font-weight: bold;
	color: black;
	text-decoration: none;
	background-color: grey;

}

a:hover  {
	background-color: grey;
	color: black;
	text-decoration: underline;
}

h1 {
	font-size: 45px;
	font-family: Verdana;
	font-weight: bold;
	text-align: center;
}

body {
	background-color: grey;
}

.ae {
	background-color: white;
	text-align: center;
	height: 80px;
	width: 300px;

}

.on {
	background-color: white;
	text-align: center;
	height: 80px;
	width: 300px;
	right: -400px;
	top: -80px;
	position: relative;
}




.et {
	background-color: white;
	text-align: center;
	height: 80px;
	width: 300px;
	position: relative;
	right: -800px;
	top: -160px;

}

.aa {
	background-color: white;
	text-align: center;
	height: 80px;
	width: 300px;
	position: relative;
	right: 0 px;
	top: -130px;
}

.la {
	background-color: white;
	text-align: center;
	height: 80px;
	width: 300px;
	position: relative;
	right: -400px;
	top: -210px;
}

#bb {
	background-color: white;
	text-align: center;
	height: 80px;
	width: 300px;
	position: relative;
	right: -800px;
	top: -290px;

#sbb {
	background-color: white;
	text-align: center;
	height: 80px;
	width: 300px;
	position: relative;
	right: -800px;
	top: -290px;
Class not working. why?
#2

You need to explain what’s happening. What element are you adding classes to? Do you have an example of the code that doesn’t work? Which part does work?

Also, side issue but those class names are not good, they are going to make things exceptionally difficult for you to follow the more you add

1 Like
#3

Hi Dan ,
so the class .bb is working, but the class below (sbb) dosent work.

index.html

<div id="bb">
		<br><a href="C:\Users\Adam\Desktop\ts\secondpage.html">Bastian Bier</a>
		<!---img class="pictures" src="C:\Users\Adam\Desktop\ts\smileyface.png"--->

	</div>

	<div id="sbb">
		<br><a href="C:\Users\Adam\Desktop\ts\secondpage.html">Sandro Bugiel</a>
		<!---img class="pictures" src="C:\Users\Adam\Desktop\ts\smileyface.png"--->

stylesheet.css

#bb {
	background-color: white;
	text-align: center;
	height: 80px;
	width: 300px;
	position: relative;
	right: -800px;
	top: -290px;

#sbb {
	background-color: white;
	text-align: center;
	height: 80px;
	width: 300px;
	position: relative;
	right: -800px;
	top: -290px;

Thanks for your time !

#4

The problem is that the class (#sbb) is not working. when i add another class it dosent work too. But when i delete a working class like #bb and insert the exact same code from #sbb it works.
That gives me the feeling of limitation in the amount of classes i can use at once.

the index file

<div id="bb">
		<br><a href="C:\Users\Adam\Desktop\ts\secondpage.html">Bastian Bier</a>
		<!---img class="pictures" src="C:\Users\Adam\Desktop\ts\smileyface.png"--->

	</div>

	<div id="sbb">
		<br><a href="C:\Users\Adam\Desktop\ts\secondpage.html">Sandro Bugiel</a>
		<!---img class="pictures" src="C:\Users\Adam\Desktop\ts\smileyface.png"--->

the CSS file

#bb {
	background-color: white;
	text-align: center;
	height: 80px;
	width: 300px;
	position: relative;
	right: -800px;
	top: -290px;

#sbb {
	background-color: white;
	text-align: center;
	height: 80px;
	width: 300px;
	position: relative;
	right: -800px;
	top: -290px;
#5

you can give a single id to an element

classes are given with class="class-name"

a big issue you have, is that you are missing all the closing graph parenthesis }, try with that

1 Like
#6

They’re not classes, they’re ids, hence id="bb" and #bb. There are no CSS classes being used in that code at all. The original code has classes, this does not.

If you’ve just mistyped on the forum and they are actually classes in your real code, this still doesn’t really help – what do you mean “isn’t working”. what isn’t working?

It is easier if you can provide a Codepen that demonstrates what happens

#7

ieahleen and DanCouper are to the point. You are confusing ids with classes. Classes are added as class="classname1 classname2 classname3" etc to an element while id is added as id ="myId".

Please note that while each element can have only one ID and each ID in a page are unique (i.e. different from each others). Classes however are reusable and different elements can share same classes for styling elements similarly. Classes use dot (.) notation for selection instead of # symbol used for IDs.

An example is below:

<div id="bb" class="bb sbb">
My BB div content.  Applies styles from both bb and sbb class
</div>

<div id="sbb" class="sbb">
My SBB div. Only applies styles from sbb class. 
</div>

css can now be applied as follows:

.bb {
	background-color: white;
	text-align: center;
}

.sbb {
	background-color: white;
	text-align: center;
    /* Add more declarations/styles as per need*/
}

Hope this helps.

#8

Maybe the problem is just the extra closing div tag at the end of your code. Did you try to remove it?

1 Like
#9