Wie werde ich diese unnötige graue Whitespace in meiner Website los? ⇐ CSS

[Guest]

Ich habe versucht, eine große Whitespace loszuwerden, die ich nicht brauche. Dies erschien, nachdem ich Anzeige verwendet habe: Raster, um einige Positionierungsprobleme für meine Bilder zu entfernen. >

Code: Select all

 TCGCards.com 
 Power to the People! [/b] 
[b]

A marketplace for trading card collectors, and players. Here, we have a great and varied selection of
trading card goods from all over the world! You will never find any better deals then this!
[/b][b]









  Browse Our Collection 
















< /code>
Hier ist mein CSS: < /p>

body{

background-color: gray;
}

.cards{
position: relative;
left: 430px;
top: 50px;
}

.movDetails{

position: relative;
top: 25px;

}

.movImage{

position: relative;
top: 50px;
}

.movIndexImages{
position: relative;
bottom: 50px;
z-index: -1;
}

.hyperlink a{

text-decoration: none;

}

.movNav{
position: relative;
bottom: 90px;
}

footer{

background-color: rgb(217, 205, 205);
color: white;
}

.gridMain{

display: grid;
grid-template-columns: 100px 100px 100px 100px 100px 100px;
grid-template-rows: 100px 100px 100px 100px 100px 100px;

position: relative;
left: 300px;
}

.item1{

grid-row-start:1;
grid-row-end: 20;
grid-column-start: 1;
grid-column-end: 20;

}

.item2{

grid-row-start:1;
grid-row-end: 20;
grid-column-start: 1;
grid-column-end: 20;

position: relative;
right: 300px;

width: 530px;
}

.item3{

grid-row-start:1;
grid-row-end: 20;
grid-column-start: 1;
grid-column-end: 20;

height: 300px;
width: 300px;

position: relative;
left: 300px;
bottom: 530px;
}

.item4{

grid-row-start:1;
grid-row-end: 20;
grid-column-start: 1;
grid-column-end: 20;

height: 300px;
width:300px;

position: relative;
left: 300px;
bottom: 460px;
}

.tag-remover a p{

text-decoration: none;

}

.movTcg{

position: relative;
top: 40px;
height: 110px;
}

.movDescription{
position: relative;
right: 300px;
bottom: 100px;
}

.movSearchBar{

position: relative;
left: 350px;

}

.movText{

position: relative;
left: 30px;
top: 40px;

}

.movBrowserBar{
position: relative;
left: 300px;
}

.movHololive{
position: relative;
height: 300px;
left: 200px;
top: 80px;
}

.movFooter{

position: relative;
top: 100%;

/* display:flex; */
align-items:center;
justify-content: space-between;
}

.refFlex{

/* display: flex; */
justify-content: flex-end;
gap: 30px;

/* Why is this refusing to be moved? */
bottom: 50px;

}

/* Ul is whole box container containing ul. */
ul{

list-style-type: none;
display: flex;
justify-content: flex-end;
gap: 20px;

}

/* Targets all li. Makes it seem like it forms a blue box, but
really all it is doing is making sure every li is
colored the set color.  */
ul li{

position: relative;
bottom: 40px;
right: 40px;

}

ul li a{

}

.items{
display: flex;
gap: 100px;
flex-wrap: wrap;
position: relative;
left: 80px;

}

section .movItems{

}

section a img{

height: 400px;
width: 300px;
}

.item1 img{

height: 300px;
width: 200px;
}

< /code>
Ich habe versucht, dies zu verwenden: < /p>
.Tag-remover a p {< /p>
text-decoration: none;
< /code>
} < /p>
, aber es hat nichts getan. Ich bin mir nicht sicher, warum dieses Problem auftritt. Ich hätte gedacht, dies hätte leicht behoben, da ich dies auf jedes P unter meinem A -Tag anwende. class = "snippet">

body {

background-color: gray;
}

.cards {
position: relative;
left: 430px;
top: 50px;
}

.movDetails {

position: relative;
top: 25px;

}

.movImage {

position: relative;
top: 50px;
}

.movIndexImages {
position: relative;
bottom: 50px;
z-index: -1;
}

.hyperlink a {

text-decoration: none;

}

.movNav {
position: relative;
bottom: 90px;
}

footer {

background-color: rgb(217, 205, 205);
color: white;
}

.gridMain {

display: grid;
grid-template-columns: 100px 100px 100px 100px 100px 100px;
grid-template-rows: 100px 100px 100px 100px 100px 100px;

position: relative;
left: 300px;
}

.item1 {

grid-row-start: 1;
grid-row-end: 20;
grid-column-start: 1;
grid-column-end: 20;

}

.item2 {

grid-row-start: 1;
grid-row-end: 20;
grid-column-start: 1;
grid-column-end: 20;

position: relative;
right: 300px;

width: 530px;
}

.item3 {

grid-row-start: 1;
grid-row-end: 20;
grid-column-start: 1;
grid-column-end: 20;

height: 300px;
width: 300px;

position: relative;
left: 300px;
bottom: 530px;
}

.item4 {

grid-row-start: 1;
grid-row-end: 20;
grid-column-start: 1;
grid-column-end: 20;

height: 300px;
width: 300px;

position: relative;
left: 300px;
bottom: 460px;
}

.tag-remover a p {

text-decoration: none;

}

.movTcg {

position: relative;
top: 40px;
height: 110px;
}

.movDescription {
position: relative;
right: 300px;
bottom: 100px;
}

.movSearchBar {

position: relative;
left: 350px;

}

.movText {

position: relative;
left: 30px;
top: 40px;

}

.movBrowserBar {
position: relative;
left: 300px;
}

.movHololive {
position: relative;
height: 300px;
left: 200px;
top: 80px;
}

.movFooter {

position: relative;
top: 100%;

/* display:flex; */
align-items: center;
justify-content: space-between;
}

.refFlex {

/* display: flex; */
justify-content: flex-end;
gap: 30px;

/* Why is this refusing to be moved? */
bottom: 50px;

}

/* Ul is whole box container containing ul. */
ul {

list-style-type: none;
display: flex;
justify-content: flex-end;
gap: 20px;

}

/* Targets all li. Makes it seem like it forms a blue box, but
really all it is doing is making sure every li is
colored the set color.  */
ul li {

position: relative;
bottom: 40px;
right: 40px;

}

ul li a {}

.items {
display: flex;
gap: 100px;
flex-wrap: wrap;
position: relative;
left: 80px;

}

section .movItems {}

section a img {

height: 400px;
width: 300px;
}

.item1 img {

height: 300px;
width: 200px;
}

.tag-remover a p {

text-decoration: none;

}< /code>






 TCGCards.com 
  Power to the People! [/b] 
[b]

A marketplace for trading card collectors, and players. Here, we have a great and varied selection of
trading card goods from all over the world! You will never find any better deals then this!
[/b]









  Browse Our Collection