Highlighted

img positioning in header of DW example file

Explorer ,
Jul 23, 2018

Copy link to clipboard

Copied

I'm working with the DW HTML One column liquid, centered, header and footer example file.

In the header there is a logo on the far left. My question is probably super simple: how do I move the logo to the far right?

The relevant code is

<div class="container">

  <div class="header"><a href="#"><img src="" alt="Insert Logo Here" name="Insert_logo" width="20%" height="90" id="Insert_logo" style="background: #8090AB; display:block;" /></a>

    <!-- end .header --></div>

.container {

width: 80%;

max-width: 1260px;

min-width: 780px;/

background: #FFF;

margin: 0 auto;

}

.header {

background: #6F7D94;

}

I'm guessing that the logo is displaying far left because there is no positioning on it but I can't figure out how(and where) to specify where to position the logo in the css.

Thanks for any help.

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

Do you want something like this?

<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>Untitled Document</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<style>

.flex-grid { display: flex; }

.col { flex: 1; }

.right {text-align:right}

</style>

</head>

<body>

<header class="flex-grid">

<div class="col">

<h1>My Awesome Website</h1>

</div>

<div class="col right">

<h3>

<img  src="https://dummyimage.com/300x150" alt="logo"></h3>

</div>

</header>

</body>

</html>

TOPICS
Learn Dreamweaver

Views

416

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

img positioning in header of DW example file

Explorer ,
Jul 23, 2018

Copy link to clipboard

Copied

I'm working with the DW HTML One column liquid, centered, header and footer example file.

In the header there is a logo on the far left. My question is probably super simple: how do I move the logo to the far right?

The relevant code is

<div class="container">

  <div class="header"><a href="#"><img src="" alt="Insert Logo Here" name="Insert_logo" width="20%" height="90" id="Insert_logo" style="background: #8090AB; display:block;" /></a>

    <!-- end .header --></div>

.container {

width: 80%;

max-width: 1260px;

min-width: 780px;/

background: #FFF;

margin: 0 auto;

}

.header {

background: #6F7D94;

}

I'm guessing that the logo is displaying far left because there is no positioning on it but I can't figure out how(and where) to specify where to position the logo in the css.

Thanks for any help.

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

Do you want something like this?

<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>Untitled Document</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<style>

.flex-grid { display: flex; }

.col { flex: 1; }

.right {text-align:right}

</style>

</head>

<body>

<header class="flex-grid">

<div class="col">

<h1>My Awesome Website</h1>

</div>

<div class="col right">

<h3>

<img  src="https://dummyimage.com/300x150" alt="logo"></h3>

</div>

</header>

</body>

</html>

TOPICS
Learn Dreamweaver

Views

417

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jul 23, 2018 0
Adobe Community Professional ,
Jul 23, 2018

Copy link to clipboard

Copied

Do you want something like this?

<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>Untitled Document</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<style>

.flex-grid { display: flex; }

.col { flex: 1; }

.right {text-align:right}

</style>

</head>

<body>

<header class="flex-grid">

<div class="col">

<h1>My Awesome Website</h1>

</div>

<div class="col right">

<h3>

<img  src="https://dummyimage.com/300x150" alt="logo"></h3>

</div>

</header>

</body>

</html>

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 23, 2018 0
Community Beginner ,
Jul 24, 2018

Copy link to clipboard

Copied

.header>img{

                      float: right

                      margin-right: 10px //*or whatever you want*//

                      }

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 24, 2018 0
Adobe Community Professional ,
Jul 24, 2018

Copy link to clipboard

Copied

arisa53851427  wrote

.header>img{

                      float: right

                      margin-right: 10px //*or whatever you want*//

                      }

That code won't work.  Do you know why?

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 24, 2018 0
Community Beginner ,
Jul 24, 2018

Copy link to clipboard

Copied

O sorry forgot the semicolons;)

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 24, 2018 1