Highlighted

How do I position my Div so my text shows up furthur down?

Enthusiast ,
Dec 27, 2017

Copy link to clipboard

Copied

This is so very frustrating!!

How do I make a div show up where I want it to show up. I want the Coming Soon text to show up where it should be... the center and under the banner where it can be read. In stead it's flush against the upper nav bar.

Should I be using the position tool in the properties panel for this?

Adobe Community Professional
Correct answer by BenPleysier | Adobe Community Professional

Have a look ate the following. I never use the panels and do everything in code view.

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>Untitled Document</title>

<style>

* { /* reset browser defaults */

/* this should be part of a larger reset code */

margin: 0;

padding: 0;

}

header.main {

background-color: lightgreen;

}

header.main h1 {

text-align: center;

font-size: 4em;

padding: 16px 0;

}

article.main h4 {

text-transform: uppercase;

text-align: center;

padding-top:  120px;

}

</style>

</head>

<body>

<header class="main"><h1>banner</h1> </header>

<article class="main"><h4>Coming Soon</h4> </article>

</body>

</html>

Views

175

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

How do I position my Div so my text shows up furthur down?

Enthusiast ,
Dec 27, 2017

Copy link to clipboard

Copied

This is so very frustrating!!

How do I make a div show up where I want it to show up. I want the Coming Soon text to show up where it should be... the center and under the banner where it can be read. In stead it's flush against the upper nav bar.

Should I be using the position tool in the properties panel for this?

Adobe Community Professional
Correct answer by BenPleysier | Adobe Community Professional

Have a look ate the following. I never use the panels and do everything in code view.

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>Untitled Document</title>

<style>

* { /* reset browser defaults */

/* this should be part of a larger reset code */

margin: 0;

padding: 0;

}

header.main {

background-color: lightgreen;

}

header.main h1 {

text-align: center;

font-size: 4em;

padding: 16px 0;

}

article.main h4 {

text-transform: uppercase;

text-align: center;

padding-top:  120px;

}

</style>

</head>

<body>

<header class="main"><h1>banner</h1> </header>

<article class="main"><h4>Coming Soon</h4> </article>

</body>

</html>

Views

176

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
Dec 27, 2017 0
Adobe Community Professional ,
Dec 27, 2017

Copy link to clipboard

Copied

Have a look ate the following. I never use the panels and do everything in code view.

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>Untitled Document</title>

<style>

* { /* reset browser defaults */

/* this should be part of a larger reset code */

margin: 0;

padding: 0;

}

header.main {

background-color: lightgreen;

}

header.main h1 {

text-align: center;

font-size: 4em;

padding: 16px 0;

}

article.main h4 {

text-transform: uppercase;

text-align: center;

padding-top:  120px;

}

</style>

</head>

<body>

<header class="main"><h1>banner</h1> </header>

<article class="main"><h4>Coming Soon</h4> </article>

</body>

</html>


Ben

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...
Dec 27, 2017 1
Enthusiast ,
Dec 27, 2017

Copy link to clipboard

Copied

I am not at the level of coding yet. I wonder if I ever will get there. I will check out your code and work with it.

Thank you.

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...
Dec 27, 2017 0
Adobe Community Professional ,
Dec 27, 2017

Copy link to clipboard

Copied

You know what would be really helpful?    Draw a picture of what you want your layout to look like.  Include some notes about colors, backgrounds, typography and anything else you think is important.

Then do the same thing for Tablet size and another one for mobile size devices.    I use pencil and paper for rough mockups.   But you could use Photoshop.

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...
Dec 27, 2017 0