Welche Position sollte ich für meine Website verwenden? [

]

Ich arbeite gerade an meiner Website ... und nun habe ich versucht, ein Bild auf der Seite hinzuzufügen. Also fing ich an, indem Sie diesen die Homepage aus -Welche Position sollte ich für meine Website verwenden? [

#titleOne, #paraOne, #paraTwo, #paraThree{ 
 
\t text-align: center; 
 
}

<!DOCTYPE html> 
 
\t <html> 
 
\t \t <head> 
 
\t \t \t <link rel="stylesheet" type="text/css" href="style.css"> 
 
\t \t </head> 
 
\t <body> \t 
 
     <center> 
 
\t \t <h1 id="titleOne">Hello!</h1> 
 
\t \t <p id="paraOne">This is my first website!</p> 
 

 
\t \t <hr> 
 

 
\t \t <p id="paraTwo">Hopefully this isn't too boring :/ stay and you might like what you see in the future!</p> 
 
\t \t <p id="paraThree">Fact: I will not stop until I get it done.</p> 
 

 
    </center> 
 
\t </body> 
 
\t </html>

Das funktioniert gut, ist alles in der Mitte und sieht gut aus! Aber jetzt, wenn ich versuche, ein Bild hinzuzufügen, und ich lege es in die Mitte Tags fügt es in das Zentrum. Ich will das nicht ... Ich möchte, dass das Bild oben rechts auf dem Bildschirm erscheint, aber mit ein paar Prozent Abstand, so dass es nicht an der Seite des Bildschirms hängen bleibt. Ich kann das anscheinend nicht erreichen, weil ich dazu Stellung nehmen muss: absolut; und wenn ich das tue, bewegt sich alles fehl am Platz. Was würdest du empfehlen? Hier ist der Bildcode.

#img { 
 
    /*position: absolute;*/ 
 
\t width: 100px; 
 
\t height: 100px; 
 
\t border-radius: 100%; 
 
\t -webkit-animation: fadein 2s; 
 
} 
 

 
@keyframes fadein { 
 
\t from { opacity: 0; } 
 
\t to { opacity: 1; } 
 
}

<img id="img" src="imgs/meFive.JPG" alt="My picture" >

Dank!

Quelle

2017-01-26 InfiSnyp

absolute Positionierung zu einem Element hinzufügen, wird nicht alles andere klopfen fehl am Platz, es muss etwas anderes geben, das es verursacht. –

Das center-Tag ist veraltet, daher sollten Sie es in ein DIV transformieren und eventuell Text per CSS zentrieren. Über das Bild, versuchen Sie mit Float: rechts – Massimo

sollten Sie das Bild nicht in center-Tag setzen. Sie sollten

img { 
    width: 100px; 
    height: 100px; 
    border-radius: 100%; 
    -webkit-animation: fadein 2s; 
    position: absolute; 
    top: 0px; 
    right: 0px; 
}

Quelle

2017-01-26 07:40:03 anguspcw

außerhalb des Zentrums Tag setzen, wie Sie unten sehen können, die absolute positioniertes Element nicht ändert, was bereits auf der Seite ist mit:

#img { 
    position: absolute; 
    right: 0; 
    top: 0; 
    margin: 3%; 
    width: 100px; 
    height: 100px; 
    background: red; 
}

#titleOne, #paraOne, #paraTwo, #paraThree{ 
 
\t text-align: center; 
 
} 
 
#img { 
 
    position: absolute; 
 
    right: 0; 
 
    top: 0; 
 
    margin: 3%; 
 
    width: 100px; 
 
    height: 100px; 
 
    background: red; 
 
}

<!DOCTYPE html> 
 
\t <html> 
 
\t \t <head> 
 
\t \t \t <link rel="stylesheet" type="text/css" href="style.css"> 
 
\t \t </head> 
 
\t <body> \t <img id="img" src="imgs/meFive.JPG" alt="My picture" > 
 
     <center> 
 
\t \t <h1 id="titleOne">Hello!</h1> 
 
\t \t <p id="paraOne">This is my first website!</p> 
 

 
\t \t <hr> 
 

 
\t \t <p id="paraTwo">Hopefully this isn't too boring :/ stay and you might like what you see in the future!</p> 
 
\t \t <p id="paraThree">Fact: I will not stop until I get it done.</p> 
 

 
    </center> 
 
\t </body> 
 
\t </html>

Quelle

2017-01-26 07:42:04

Ich verstehe nicht wirklich, was du machen wolltest! aber denken Sie daran, wenn Sie position: absolute; Eltern dieses Elements verwenden möchten MUSS eine Position haben. es ist egal, welche Position relative, absolute, ... aber es muss eine oder das Element geht aus dem Bildschirm oder in einigen seltsamen Orten. (in der Regel basierend auf Fensterbildschirmposition)

Quelle

2017-01-26 07:46:17 moay

Welche Position sollte ich für meine Website verwenden? [

Antwort

Verwandte Themen