Positionnement du texte et d'une image avec CSS et HTML

Salut, je suis en train de faire un site web simple pour obtenir plus d'expérience avec HTML et CSS actuellement, j'ai un problème simple avec le placement dans mon en-tête. J'essaie d'obtenir un logo et un texte à un endroit précis, mais je ne sais pas comment l'atteindre avec mes compétences en CSS. Fondamentalement, j'ai ce moment:Positionnement du texte et d'une image avec CSS et HTML

Voilà ce que je voudrais avoir pour le texte en forme avec le logo:

Je ne suis pas sûr de savoir comment obtenir cette mise en forme en CSS et ont été à la recherche d'informations sur les écoles W3 pour l'information et ont appris tout à fait mais mais pas assez pour comprendre cela tristement. Je peux comprendre le style de couleur qui correspondra à la version désirée, mais je ne peux pas comprendre comment obtenir le texte et le logo à l'endroit où ils devraient être.

Voici le CSS et HTML, je l'ai jusqu'à présent (très basique):

#header { 
 
    background-color:#011836; 
 
    color:#ECE7E7; 
 
    padding-top: 5px; 
 
    padding-left: 5px; 
 
    padding-right: 5px; 
 
    padding-bottom: 5px; 
 
    line-height: .1px; 
 
} 
 
.logo{ 
 
    position: relative; 
 
    left: 5px; 
 
    top:5px; 
 
    bottom:0px; 
 
} 
 
.headerText{ 
 
    text-indent: 160px; 
 
    bottom:20px; 
 
    font-family: "Verdana"; 
 
    
 
} 
 
#nav { 
 
    line-height:30px; 
 
    background-color:#179fe8; 
 
    color:white; 
 
    height:50px; 
 
    padding: 5px; 
 
} 
 
.button{ 
 
    background-color: #179fe8; 
 
    border: none; 
 
    color: white; 
 
    padding: 15px 25px; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    display: inline-block; 
 
    font-size: 12px; 
 
    margin: 4px 4px; 
 
    cursor: pointer; 
 
    -webkit-transition-duration: 0.4s; 
 
    transition-duration: 0.4s; 
 
} 
 

 
.button2:hover{ 
 
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19); 
 
} 
 
#section { 
 
    width:350px; 
 
    float:left; 
 
    padding:10px; 
 
} 
 
#footer { 
 
    background-color:#011836; 
 
    color:white; 
 
    font-family: "Verdana"; 
 
    clear:both; 
 
    text-align:center; 
 
    padding:5px; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<link rel="stylesheet" type="text/css" href="stylesheet.css"> 
 
</head> 
 
<body> 
 

 
<div id="header"> 
 

 
    <img class="logo" src="http://imgur.com/O2qNi6p" alt="Clarence White Logo" width="168" height="168"> 
 

 
    <h1 class="headerText" style= "display:inline;">BIOENGINEERING CLUB </h1> 
 
    <h5 class="headerText">UNIVERSITY OF MAINE</h5> 
 
</div> 
 

 
<div id="nav"> 
 
<button href="about.html" class="button button2">ABOUT</button> 
 
<button href="projects.html" class="button button2">PROJECTS</button> 
 
<button href="resume.html" class="button button2">RESUME</button> 
 
</div> 
 

 
<div id="section"> 
 
<h2>London</h2> 
 
<p>London is the capital city of England. It is the most populous city in the United Kingdom, 
 
with a metropolitan area of over 13 million inhabitants.</p> 
 
<p>Standing on the River Thames, London has been a major settlement for two millennia, 
 
its history going back to its founding by the Romans, who named it Londinium.</p> 
 
</div> 
 

 
<div id="footer"> 
 

 
</div> 
 

 
</body> 
 
</html>

Toute orientation sur la façon de mieux atteindre le style serait très apprécié! S'il vous plaît soyez patient avec moi, je suis en train d'apprendre tout cela à nouveau et je vous remercie pour votre temps!

Source

2016-05-29 mm19

#header { 
 
    background-color:#011836; 
 
    color:#ECE7E7; 
 
    padding: 5px; 
 
    position:relative;    /* ADDED */ 
 
} 
 
#header:after{     /* ADDED */ 
 
    content:""; 
 
    display: table; 
 
    clear:both; 
 
} 
 
.headerText{      /* CHANGED */ 
 
    position:absolute; 
 
    bottom:0; 
 
    left:200px; 
 
} 
 
.logo{ 
 
    position: relative; 
 
    float:left;     /* ADDED */ 
 
    left: 5px; 
 
    top:5px; 
 
} 
 

 
#nav { 
 
    line-height:30px; 
 
    background-color:#179fe8; 
 
    color:white; 
 
    height:50px; 
 
    padding: 5px; 
 
} 
 
.button{ 
 
    background-color: #179fe8; 
 
    border: none; 
 
    color: white; 
 
    padding: 15px 25px; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    display: inline-block; 
 
    font-size: 12px; 
 
    margin: 4px 4px; 
 
    cursor: pointer; 
 
    -webkit-transition-duration: 0.4s; 
 
    transition-duration: 0.4s; 
 
} 
 

 
.button2:hover{ 
 
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19); 
 
} 
 
#section { 
 
    width:350px; 
 
    float:left; 
 
    padding:10px; 
 
} 
 
#footer { 
 
    background-color:#011836; 
 
    color:white; 
 
    font-family: "Verdana"; 
 
    clear:both; 
 
    text-align:center; 
 
    padding:5px; 
 
}

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <link rel="stylesheet" type="text/css" href="stylesheet.css"> 
 
    </head> 
 
    <body> 
 

 
    <div id="header"> 
 

 
     <img class="logo" src="http://imgur.com/O2qNi6p" alt="Clarence White Logo" width="168" height="168"> 
 
     <div class="headerText"> <!-- CREATED AN ABSOLUTE POS. PARENT --> 
 
     <h1>BIOENGINEERING CLUB </h1> 
 
     <h5>UNIVERSITY OF MAINE</h5> 
 
     </div> 
 
    </div> 
 

 
    <div id="nav"> 
 
     <button href="about.html" class="button button2">ABOUT</button> 
 
     <button href="projects.html" class="button button2">PROJECTS</button> 
 
     <button href="resume.html" class="button button2">RESUME</button> 
 
    </div> 
 

 
    <div id="section"> 
 
     <h2>London</h2> 
 
     <p>London is the capital city of England. It is the most populous city in the United Kingdom, 
 
     with a metropolitan area of over 13 million inhabitants.</p> 
 
     <p>Standing on the River Thames, London has been a major settlement for two millennia, 
 
     its history going back to its founding by the Romans, who named it Londinium.</p> 
 
    </div> 
 

 
    <div id="footer"> 
 

 
    </div> 
 

 
    </body> 
 
</html>

Source

2016-05-29 20:53:52

Parfait merci qui ne fait sens que les positions seraient relatif! J'apprécie votre aide passez une bonne journée! – mm19

De rien. Rester bien ;) –

Positionnement du texte et d'une image avec CSS et HTML

Répondre

Questions connexes