1 Replies - 289 Views - Last Post: 06 July 2019 - 08:14 AM

#1 Maxx5   User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 227
  • Joined: 15-September 15

adjusting header

Posted 29 June 2019 - 03:06 PM

Hello everyone. It has been a long time since I have done any web work. I have a question. In my header I have a image on the left side and a title on the right. I want to remove the title , so I can place a new image right accross the top. I've been playing with the code but getting no where.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/screen.css">
  <link href="https://fonts.googleapis.com/css?family=Kaushan+Script" rel="stylesheet">
  <title>Home - 1 Finger Trigger Photographer</title>
</head>
  <body>
    <div class="wrap">

      <div class="header">
        <div class="logo"></div>
        <div class="heading">
           <h1>
			Charisma Communications
            </h1>
           <p class="small"> Home</p>
          
       
        </div>
      </div><!--Header Ends -->

      <ul class="menu">
        <li><a href="index.html" class="current">Home</a></li>
        <li><a href="https://1fingertriggerphotographer.myportfolio.com/" target="_blank">Photography</a></li>
        <li><a href="speaker.html">Speaker</a></li>
        <li><a href="contact.html">Contact</a></li>
      </ul><!-- Menu Ends -->

      <div class="main home">
        
        <div class="row">
          <div>
            <img src="images/fullbody.png" alt="Photo Of Louis Gaudry" width="305" height="750">
            <div class="author">Lou Gaudry</div>
          </div>
          <div>
            <p>Favorite Quote</p>
            <blockquote>
              If every person who complains about their problems could come from all corners of the earth,
              and take and pile their problems in a heap, and if each person could see the size, and gravity
              of the problems of others, they would sneak forward shame facedly and take their petty
              problems away, and creep into the night.
              <cite>"Anonymous"</cite>
            </blockquote>
          </div>
        </div>
      </div><!-- .Main Content Ends -->

      <div id="footer">
        <p> &copy; 2018 1 Finger Trigger Photographer. Division of Charisma Communications All rights reserved</p>
      </div>

    </div><!-- Wrap Ends -->
  </body>
</html>


body {
  background: #ffffff;
  font: 100%/1.2 tahoma, helvetica, sans-serif;
}

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
.wrap {
  border: 1px solid black;
  border-radius: 20px;
  max-width: 72em;
  margin: 0 auto;
}
#footer {
  text-align: center;
  border-top: 1px solid #000;
}
img { /* this targets all images on the site!, could cause issues later on*/
  border-radius: 19px;
  display: block;
  width: 100%;
  height: auto;
}

/*--- Header Styles ---*/
.header {
  display: flex;
  flex-flow: row nowrap;
  border-radius: 20px 20px 0 0;
}
  .logo {
    flex: 0 0 50%;
    border-radius: 19px 0 0 0;
    background: url(../images/logo2.jpg) no-repeat 50% 50%;
    background-size: cover;
  }
   .heading {
    flex: 1 1 50%;
    padding: 0 .8em 0 0;
    font-size: 2em;
    text-align: right;
  }
    .heading h1 {
      display: table; /*shrinkwrap text*/
      margin-left: auto;/*push it to the right*/
      margin-top: 1.5em;
      line-height: 1.1;
      font-size: 1.4em;
      font-family: 'Kaushan Script', cursive;
      font-weight: 500;
    }
    h1 span {
      display: table; /*shrinkwrap text*/
      margin-left: auto;/*push it to the right*/
    }
    h1 span:nth-of-type(1) {
      font-size: 1.4em;
      font-family: 'Kaushan Script', cursive;
      font-weight: 500;
    }
   h1 span:nth-of-type(2) {
    margin: .33em 0 .5em auto; /* added .5em bottom margin*/
    font-size: .75em;
    font-family: tahoma;
    font-weight: 500;
}
    p.small {
    display: table;
    margin: .5em 0 1.5em auto;
    font-size: .95em;
    font-family: sans-serif;
    font-weight: 700;
}

/*--- Menu Styles ---*/
.menu {
  list-style: none;
  text-align: center;
  padding: 0.25em 0 0;
  margin: 0 auto;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
}
.menu li {
  display: inline-block;
}
.menu a {
  display: block;
  padding: 0.25em 0;
  margin: 0 1em .6em;
  text-decoration: none;
  font-size: .85em;
  font-weight: bold;
  color: #000;
}
.menu a:hover {
  color: #0000EE;
}
.menu a.current {  /*this is the current page anchor styles*/
  cursor: default;
  border-bottom: 1px solid;
}
.menu a.current:hover {
  color: #000;
}

/*--- Main Content Styles ---*/
.main {
	padding: 1px 0;
}
.contain:after { /*to contain floats when they exist, just add a .contain class*/
  content: "";
  display: block;
  clear: both;
}
h2 {
  font-size: 1.3em;
  margin: .75em;
  text-align: center;
}
h3 {
  font-size: 1.1em;
  margin: .75em;
  text-align: center;
}
p {
  margin: .75em;
}

/*--- Home Page ---*/
.home .row > div {
  padding: 0;
  font-size: 1.1em;
  /*outline: 1px solid red;*/
}
.home .row p {
  font-size: 1.3em;
  margin: 1em 0;
  font-weight: 600;
  /* outline: 1px solid red; */
}
.home blockquote {
  margin: 1em 0 0 2em;
  padding: 1px 0;
  font-weight: 500;
  font-size: 1em;
  /* outline: 1px solid red; */
}
.home blockquote cite {
  display: block;
  text-align: right;
  font-size: 1.4em;
  margin: .5em .5em 0 0;
  /* outline: 1px solid red; */
}
  /*outline: 1px solid red;*/


/*--- Gallery Styles ---*/
.main.gallery { /*this allows for page specific styling*/
  text-align: center; /* center the inline-block thumbs*/
}
.thumbs {
  display:inline-block;
  vertical-align:top;
  width: 23%;
  margin: 0 .25em .75em;/* added .25em side margins*/
  /*padding: 0 6px; /*removed padding*/
  border: 1px solid #ccc;
  border-radius: 20px;
}
.thumbs:hover {
  border: 1px solid #777;
}
div.desc {
  padding: 15px;
  text-align: center;
}

/*--- Single Large Image Page Styles --*/
.img-wrap {
  width: 90%;
  margin: auto;
  text-align: center;
}
.index {
  display: table;
  width: 100%;
  margin: .75em 0;
  line-height: 1.1;
}
.index a {
  display: table-cell;
  width: 33.33%;
  text-decoration: none;
  font-size: 1em;
  font-weight: bold;
}
.index a:first-child {
  text-align: left;
}
.index a:last-child {
  text-align: right;
}
.img-wrap h1 {
  font-size: 1.5em;
  margin: .75em 0;
}
.img-wrap img {/*leave this selector here for future styles*/
  margin: auto; /* margin:auto is already on img styles*/
}

/*--- Begin Bio & Equipment Page ---*/
.main.bio-eqpmnt { /*this allows for page specific styling*/
  background: #eee; /*example background color, could be a background image*/
}
.row, .cap-columns {
  display: table;
  width: 100%;
  box-sizing: border-box;
  border-spacing: .5em;
}
.row > div, .column {
  display: table-cell;
  padding: .5em;
}
.caption-image img {
  display: block;
  width: 100%;
  max-width: 400px; /*actual image width*/
  height: auto; /* maintain aspect ratio*/
  margin: auto;
}
div.center {
  text-align: center;
  font-weight: 600;
}

/*--- .row is the 100% width captions ---*/
/*--- these classes are also used on the home page ---*/
.row {
  width: 90%;
  margin: auto;
}
.row > div {
  width: 50%;
  vertical-align: middle;
  font-weight: 500;
}
.row .author {
  display: block;
  max-width: 400px;
  margin: .5em auto;
  font-weight: 600;
  text-align: center;
}
.bio-eqpmnt .row p { /* bio-eqpt page only */
  max-width: 500px;
  margin: .5em auto;
  font-weight: 600;
}

/*--- .column is the 50% width captions ---*/
.equipment {
  border-top: 1px solid;
}
.column {
  width: 50%;
  vertical-align: top;
}
.column p {
  max-width: 400px;
  margin: 1em auto 0;
  font-weight: 600;
}
  .column ul {
    display: table;
    margin: 0 auto;
    padding: 0;
  }
  .column li {
    margin:.25em;
  }
@media all and (max-width: 800px) {
  .row {
    width: 100%;
  }
}
@media all and (max-width: 600px) {
  .row, .cap-columns,
  .row > div, .column {
    display: table;
    width: 100%;
  }
  .row .last {
    display: table-footer-group;
  }
}
/*--- End Bio & Equipment Page ---*/
/*--- Begin Contact Page ---*/
.contact{ text-align:center;}
.contact h2 {
  margin-bottom: 3em; /*or what ever you need*/
}


/*--- Media Queries ---*/
@media only screen and (max-width: 700px) {
  .thumbs {
    width: 46%;
  }
  .heading {
    font-size: 1.6em;
  }
  .logo {
    flex: 0 0 40%;
  }
}

@media only screen and (max-width: 500px) {
  .thumbs {
  	width: 95%;
  }
  .header {
    background: url(../images/logo.jpg) no-repeat 50% 50%;
    background-size: cover;
  }
  .logo {
    display:none;
  }
  .heading {
    font-size: 1.5em;
    padding: 0 .5em;
  }
 
  .bio-image {
    float: none;
    display: block;
    width: 95%;
    margin: .75em auto;
  }
a  {   
    word-break: break-all;
  }
}


Is This A Good Question/Topic? 0
  • +

Replies To: adjusting header

#2 RamonRobben   User is offline

  • D.I.C Addict
  • member icon

Reputation: 91
  • View blog
  • Posts: 599
  • Joined: 19-May 14

Re: adjusting header

Posted 06 July 2019 - 08:14 AM

I'm not sure exactly what you want but if you want an image on the right aswell without having that title saying "favorite quote"
then just replace the title with an image like so:

				<div>
					<img src="https://via.placeholder.com/750x305" alt="Photo Of Louis Gaudry" width="305" height="750">
					<blockquote>
						If every person who complains about their problems could come from all corners of the earth,
						and take and pile their problems in a heap, and if each person could see the size, and gravity
						of the problems of others, they would sneak forward shame facedly and take their petty
						problems away, and creep into the night.
						<cite>"Anonymous"</cite>
					</blockquote>
				</div>



The only thing that might look a bit odd is the left image because it has a verticle align.
Was This Post Helpful? 1
  • +
  • -

Page 1 of 1