I am trying to make a custom accordion structure in React. The content of the accordion gets rendered depending on some condition.The issue is that the accordion content transition is not smooth.
Two ways i tried to render the content
Remove and add div using tertiary operator depending upon the
condition
Change style to display none depending upon the condition
In Both ways my Transition css does not work and the transition from showing to hiding seems off.
Here is the sample code of what i am trying to achieve
Approach1
export default function App() {
const classes = useStyles();
const [cond, setCond] = useState(false);
return (
<Grid style={{ transition: "all 1s ease" }}>
<Grid
onClick={() => {
setCond(!cond);
}}
>
item 1
</Grid>
{cond ? (
<Grid>
item 2 content Lorem ipsum dolor sit amet, consectetur adipiscing
elit, sed do eiusmod tempor incididunt ut labore et dolore magna
</Grid>
) : (
<></>
)}
</Grid>
);
}
Approach 2
export default function App() {
const classes = useStyles();
const [cond, setCond] = useState(false);
return (
<Grid style={{ transition: "all 1s ease" }}>
<Grid
onClick={() => {
setCond(!cond);
}}
>
item 1
</Grid>
<Grid style={cond ? {} : { display: "none" }}>
item 2 content Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
</Grid>
</Grid>
);
}
Here item 1 will be my accordion header
item 2 will be my accordion content
Your code has comments and unnecessary lines, instead you should do this:
<Grid
style={cond ? { display: "none" } : {}}
>
item 2 content Lorem ipsum dolor sit amet, consectetur adipiscing
elit, sed do eiusmod tempor incididunt ut labore et dolore magna
</Grid>
Another way of doing an accordtion is by using classes instead of inline styles (not recommended):
// js
import { useState } from 'react';
import styles from './App.module.css'; // your css file here
export default function App() {
const [accordionState, setAccordtionState] = useState(false);
return (
<div className={styles.accordionWrapper}>
<button onClick={() => setAccordionState(!accordionState)}>
<span>Toggle item 1</span>
</button>
{/* accordion container */}
<div className={styles.accordion} hidden={accordionState}>
<span>
Lorem ipsum dolor sit amet, consectetur adipiscing
elit, sed do eiusmod tempor incididunt ut labore et
dolore magna
</span>
</div>
</div>
)
}
// css
.accordion {
height: 300px;
transition: height 0.1s ease-in-out;
}
.accordion[hidden="true"] {
height: 0;
}
I am trying to develop a single-screen, pure css website interface that allows a User to click through a series of choices. The goal is to allow the User to self-select their way to a desired action (signup, contact form, load a new page, etc).
My approach was to put several absolutely positioned divs in a relatively positioned wrapper, then use a combination of z-index and :target to achieve the desired result.
The issue I am encountering is the transition between slides (each slide displays two choices the User can make). In the first test (A/B Slide Choice Test (Working) the transtion works by sliding divs from left to right. The two subsequent slides are absoultely positioned to right:100%, then right:0 using :target
#target2:target {
right: 0;
}
#target3:target {
right: 0;
}
#target1, #target2, #target3 {
transition: all 0.6s ease-out;
}
#target1 {
z-index:1;
}
#target2 {
z-index:2;
right: 100%;
}
#target3 {
z-index:3;
right: 100%;
}
The result is working as desired - when clicking on choice 1A or 1B, the transitions are occuring and the correct slides are displayed.
But in the second test, A/B Slide Choice Test (not working), the two subsequent divs, Slide 2 and 3, are absoultely positioned to left:100%, then left:0 using :target
#target2:target {
left: 0;
}
#target3:target {
left: 0;
}
#target1, #target2, #target3 {
transition: all 0.6s ease-out;
}
#target1 {
z-index:1;
}
#target2 {
z-index:2;
left: 100%;
}
#target3 {
z-index:3;
left: 100%;
}
Several things are happening:
Clicking on decision 1A:
Result: Slide 3 (#target3) moves into position without transition.
Expected: Slide 2 (#target2) slides in from the right side of the screen.
As near as I can tell, clicking on 1A is activating the wrong target and/or Slide 2 and 3 are both moving to the left (with Slide 2 being pushed all the way offscreen to the left). Then if you click choice 3A the transition works properly (slides back to the right, revealing Slide 1 again)
Clicking on decision 1B:
Result: Slide 3 (#target3) suddenly appears, and moves to offscreen (to the left) with transition, revealing Slide 2 (#target2).
Expected: Slide 3 (#target3) slides in from the right side of the screen.
Then if you click choice 2B the transion works properly (the sldie goes back to the right, revealing Slide 1 again)
I have tried this absolutely positioned transition using using top:100% and top:0, and bottom:100% and bottom:0
The same issue occurs: Using absolutely positioned 'top' values works, while 'bottom' values creates the undesired behavior.
I want to be able to use transtions in any direction, the ultimate goal being that 'direction' will be a configurable backend parameter in a Joomla module. The module is actually written, installed, and working properly except for this transition issue.
I don't know if :target is somehow breaking the desired behavior, or if I'm doing something wrong with absolute positioned CSS values, or both. Or if my (limited) understanding of Flexbox is messing things up.
I am completely open to using a different method of getting the desired behavior shown in the working version (ideally using CSS only) if that's what is required.
But so far in my internet searches I haven't found any code snippets or examples of the one-screen A/B interface I am trying to accomplish.
I am extremely grateful for any assistance!
EDIT: I've been playing around with values to see if I can get a better understanding of what's going on.
#target2:target {
left: 100%;
}
#target3:target {
left: 100%;
}
#target1, #target2, #target3 {
transition: all 0.6s ease-out;
}
#target1 {
z-index:1;
}
#target2 {
z-index:2;
left: 100%;
}
#target3 {
z-index:3;
left: 100%;
}
In theory (as far as my understanding goes), with the CSS above, there should be no change as both values are left:100%
But in practice clicking on decision 1A or 1B causes #target2 and #target3 to move onscreen (though without transition).
Then I added multiple slides into the relatively positioned wrapping div, and what I've found is that all the slide IDs are affected (#target2, #target3, #target4, #target5 etc.).
Again my understanding is that clicking on the href="#target2" should only affect #target2:target, but it is affecting all other slide IDs, making me think that position:absolute and :target are conflicting somehow.
(bangs head on desk)
The issue that you are running into is indeed that the position:absolute and the targeting are conflicting. The way they are conflicting is because the browser tries to scroll to the right location because you are using anchor tags. Then the position starts to change which causes the element you want to show up to disappear.
So, your two choices to get it to really work how you want are to prevent the browser from scrolling. e.g. Abandon the anchor tags to prevent the browser from scrolling instead of you (maybe a sprinkle of JS instead?).
Or you can go all in on the scrolling and leave out the change in location from the absolute positioning.
CSS only solution
Since you asked for even alternatives (preferably without JS), here's using CSS scroll snapping (CSS Tricks) to do the heavy lifting of the transitions. All your markup is the same.
Main pieces of this solution that are of note:
the html element is the one that has the scrollbar in this case, so it needs the scroll-snap-type and behavior
html {
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
}
All of the targets need to be snapping points:
#target1,
#target2,
#target3 {
scroll-snap-align: center;
}
Those were the main two things to get this working at a base level, but there were a couple other interesting additions to get it to look a bit nicer.
We need to increase the targets to a larger z-index when they are targeted so they'll always be on top.
#target2:target,
#target3:target {
z-index: 5;
}
Target 1 needs to be fixed position when it's not targeted so it looks like it stays in one location as it's being scrolled off of (unfortunately I couldn't come up with a good way to get the reverse done).
#target1:not(:target) {
position: fixed;
left: 0;
}
There needs to be a transition on the z-index specifically in this case so target2 doesn't immediately go under target 3 when it is transitioning off screen
section:not(:target) {
transition: z-index 2s ease-out;
}
body,
html {
width: 100%;
height: 100%;
margin: 0;
font-family: sans-serif;
}
html {
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
overflow: hidden;
}
.mainwrap {
height: 100%;
position: relative;
}
.flexwrap {
position: relative;
display: flex;
height: 100%;
}
.contentwrap {
display: flex;
flex: 1;
}
figure {
display: flex;
flex-direction: column;
align-items: center;
flex: 1;
padding: 0;
margin: 0;
}
.flexcolumn {
display: flex;
flex-direction: column;
height: 100%;
}
.leftbox,
.rightbox {
padding: 5%;
}
.leftbox {
color: #fff;
}
.rightbox {
color: #574a46;
}
#media screen and (min-width: 993px) {
.contentwrap {
flex-direction: row;
}
figure {
flex-direction: column;
}
.flexcolumn {
justify-content: center;
}
}
#media screen and (max-width: 992px) {
.contentwrap {
flex-direction: column;
}
figure {
flex-direction: row;
}
.flexcolumn {
justify-content: center;
}
}
.drab {
background-color: #676c27;
}
.orange {
background-color: #ff9600;
}
.yellow {
background-color: #ffcc00;
}
.burgundy {
background-color: #83240f;
}
.lime {
background-color: #cccc33;
}
.olive {
background-color: #333300;
}
.navy {
background-color: #000033;
}
a {
color: #ffffff;
}
#target2:target,
#target3:target {
z-index: 5;
}
#target1:not(:target) {
position: fixed;
left: 0;
}
section:not(:target) {
transition: z-index 2s ease-out;
}
#target1,
#target2,
#target3 {
scroll-snap-align: center;
}
#target1 {
z-index: 1;
}
#target2 {
z-index: 2;
left: 100%;
}
#target3 {
z-index: 3;
left: 100%;
}
.start {
position: absolute;
width: 100%;
height: 100%;
}
.reset {
position: absolute;
height: 100%;
width: 100%;
overflow: hidden;
/* left: 0%; */
z-index: -1;
/* transform: translateX(100%); */
}
<div id="decisionTree" class="mainwrap">
<section class="start" id="target1">
<div class="flexwrap">
<div class="contentwrap">
<figure id="tree1" class="fadebox leftbox navy">
<div class="flexcolumn">
<h3>I am Decision #1a</h3>
<figcaption>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</figcaption>
</div>
CLICK
</figure>
<figure id="tree2" class="fadebox rightbox yellow">
<div class="flexcolumn">
<h3>I am Decision #1b</h3>
<figcaption>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</figcaption>
</div>
CLICK
</figure>
</div>
</div>
</section>
<section class="reset" id="target2">
<div class="flexwrap">
<div class="contentwrap">
<figure id="tree1" class="fadebox leftbox olive">
<div class="flexcolumn">
<h3>I am Decision #2a</h3>
<figcaption>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</figcaption>
</div>
CLICK
</figure>
<figure id="tree2" class="fadebox rightbox orange">
<div class="flexcolumn">
<h3>I am Decision #2b</h3>
<figcaption>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</figcaption>
</div>
CLICK
</figure>
</div>
</div>
</section>
<section class="reset" id="target3">
<div class="flexwrap">
<div class="contentwrap">
<figure id="tree1" class="fadebox leftbox burgundy">
<div class="flexcolumn">
<h3>I am Decision #3a</h3>
<figcaption>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</figcaption>
</div>
CLICK
</figure>
<figure id="tree2" class="fadebox rightbox lime">
<div class="flexcolumn">
<h3>I am Decision #3b</h3>
<figcaption>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</figcaption>
</div>
CLICK
</figure>
</div>
</div>
</section>
</div>
Important to note, you won't get the effect of this from the minimized result because it seems to require at least a certain height to work. So you'll have to run the snippet then click full screen.
JavaScript based solution
As was mentioned a JS solution is fine as long as it is explained well / simple enough:
In this case, the JS is as follows. The actual pieces are commented to make them easier to follow. In general, instead of using :target, this solution works by toggling the .selected class in elements instead. The main benefit of this is to get rid of the browser's scrolling events that anchor tags provide.
function clickHandler(target){
// Get the element that should be selected
const elem = document.querySelector(target);
// There were no elements to be selected
if(!elem) return;
// Get the old selected element (if any)
const prevElem = document.querySelector('.selected');
if(prevElem){
// If there was a previously selected element, it isn't anymore
prevElem.classList.remove('selected');
}
// Make the new element selected
elem.classList.add('selected');
}
The CSS changes are also minor:
instead of using :target, we use .selected
#target2.selected,
#target3.selected {
left: 0;
}
The html changes I made were changing the a tags to buttons (to be more semantically correct) and gave them an onClick event handler:
<button onClick="clickHandler('#target3')">CLICK</button>
For the sake of display within stack overflow due to it providing such a short and squat window by default, I set min-height to be 390px (so there is a base size to avoid the weirdnesses from having everything based on % when they don't fit)
html {
min-height: 390px;
overflow-x: hidden;
overflow-y: auto;
}
function clickHandler(target) {
// Get the element that should be selected
const elem = document.querySelector(target);
// There were no elements to be selected
if (!elem) return;
// Get the old selected element (if any)
const prevElem = document.querySelector('.selected');
if (prevElem) {
// If there was a previously selected element, it isn't anymore
prevElem.classList.remove('selected');
}
// Make the new element selected
elem.classList.add('selected');
}
html {
min-height: 390px;
overflow-x: hidden;
overflow-y: auto;
}
body,
html {
width: 100%;
height: 100%;
margin: 0;
font-family: sans-serif;
}
.mainwrap {
height: 100%;
position: relative;
}
.flexwrap {
position: relative;
display: flex;
height: 100%;
}
.contentwrap {
display: flex;
flex: 1;
}
figure {
display: flex;
flex-direction: column;
align-items: center;
flex: 1;
padding: 0;
margin: 0;
}
.flexcolumn {
display: flex;
flex-direction: column;
height: 100%;
}
.leftbox,
.rightbox {
padding: 5%;
}
.leftbox {
color: #fff;
}
.rightbox {
color: #574a46;
}
#media screen and (min-width: 993px) {
.contentwrap {
flex-direction: row;
}
figure {
flex-direction: column;
}
.flexcolumn {
justify-content: center;
}
}
#media screen and (max-width: 992px) {
.contentwrap {
flex-direction: column;
}
figure {
flex-direction: row;
}
.flexcolumn {
justify-content: center;
}
}
.drab {
background-color: #676c27;
}
.orange {
background-color: #ff9600;
}
.yellow {
background-color: #ffcc00;
}
.burgundy {
background-color: #83240f;
}
.lime {
background-color: #cccc33;
}
.olive {
background-color: #333300;
}
.navy {
background-color: #000033;
}
a {
color: #ffffff;
}
#target2.selected,
#target3.selected {
left: 0;
}
#target1,
#target2,
#target3 {
transition: all 0.6s ease-out;
}
#target1 {
z-index: 1;
}
#target2 {
z-index: 2;
left: 100%;
}
#target3 {
z-index: 3;
left: 100%;
}
.start {
position: absolute;
width: 100%;
height: 100%;
}
.reset {
position: absolute;
height: 100%;
width: 100%;
overflow: hidden;
}
<div id="decisionTree" class="mainwrap">
<section class="start" id="target1">
<div class="flexwrap">
<div class="contentwrap">
<figure id="tree1" class="fadebox leftbox navy">
<div class="flexcolumn">
<h3>I am Decision #1a</h3>
<figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</figcaption>
</div>
<button onClick="clickHandler('#target2')">CLICK</button>
</figure>
<figure id="tree2" class="fadebox rightbox yellow">
<div class="flexcolumn">
<h3>I am Decision #1b</h3>
<figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</figcaption>
</div>
<button onClick="clickHandler('#target3')">CLICK</button>
</figure>
</div>
</div>
</section>
<section class="reset" id="target2">
<div class="flexwrap">
<div class="contentwrap">
<figure id="tree1" class="fadebox leftbox olive">
<div class="flexcolumn">
<h3>I am Decision #2a</h3>
<figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</figcaption>
</div>
<button onClick="clickHandler('#target1')">CLICK</button>
</figure>
<figure id="tree2" class="fadebox rightbox orange">
<div class="flexcolumn">
<h3>I am Decision #2b</h3>
<figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</figcaption>
</div>
<button onClick="clickHandler('#target1')">CLICK</button>
</figure>
</div>
</div>
</section>
<section class="reset" id="target3">
<div class="flexwrap">
<div class="contentwrap">
<figure id="tree1" class="fadebox leftbox burgundy">
<div class="flexcolumn">
<h3>I am Decision #3a</h3>
<figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</figcaption>
</div>
<button onClick="clickHandler('#target1')">CLICK</button>
</figure>
<figure id="tree2" class="fadebox rightbox lime">
<div class="flexcolumn">
<h3>I am Decision #3b</h3>
<figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</figcaption>
</div>
<button onClick="clickHandler('#target1')">CLICK</button>
</figure>
</div>
</div>
</section>
</div>
hey man it will be much easier if you made a codepen or a jsfiddle. Its a pretty long explanation and pretty hard to follow through. sorry i dont have the solution but if you make a jsfiddle i will help you with what i can.
I am new to web components.
I am trying to create a web component that looks like a "drop down / select".
when the element is closed but visible (not expanded) I would like it to be presented on the screen in the regular flow of the web page. Under it is some text that is not part of the control.
When the control is expanded, The expanded part should cover (go above) the text that is displayed under the control.
In practice the text is being pushed down.
Changing the control's css places the visual part over the text that should be below it.
I would appreciate ideas how to address the issue of creating a control that one part of it should be in the "flow" of the web page and the other part should "float" above the web page and located in relation to the visual part.
The following code is the web component: drop-down.html
<template id="drop-down">
<style>
.row {
z-index: 5;
position:relative;
background-color: white;
}
.drop-down {
z-index: 5;
position: relative;
background-color: red;
}
</style>
<div class="drop-down">
<div class="row">
<button onclick="addListElement(this);">+</button>
<input type="text" placeholder="Enter List Item">
</div>
</div>
</template>
<template id="list-item">
<div class="row">
<button onclick="addListElement(this);">+</button>
<input type="text" placeholder="Enter List Item">
</div>
</template>
<script>
let ddTemplate = document.currentScript.ownerDocument.querySelector('#drop-down');
let liTemplate = document.currentScript.ownerDocument.querySelector('#list-item');
customElements.define('drop-down', class extends HTMLElement {
constructor() {
super(); // always call super() first in the ctor.
let shadowRoot = this.attachShadow( {mode: 'open'} );
shadowRoot.appendChild( ddTemplate.content.cloneNode( true ));
}
});
function addListElement( el ) {
var parent = el.parentNode;
parent.parentNode.appendChild(liTemplate.content.cloneNode(true));
}
</script>
The html that tests it is the following: testDropDown.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test Drop-Down</title>
<link rel="import" href="./drop-down/drop-down.html">
</head>
<body>
<drop-down>My Drop Down</drop-down>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do<br/>
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim<br/>
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut<br/>
aliquip ex ea commodo consequat. Duis aute irure dolor in<br/>
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla<br/>
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in<br/>
culpa qui officia deserunt mollit anim id est laborum."
</p>
</body>
</html>
If I want override inline css i must use !important or javascript.
But if I want to override, for example, inline width without important I can use max-width or min-width
Is there some way to override inline
overflow:hidden
Using CSS
You can override the inline style using !important keyword like below. The inline style background green is override with other color through the class style using !important keyword.
.test {
background-color:#ff00ff !important;
}
<div class="test" style="background-color:green">
<h1>
Sample
</h1>
</div>
Using Javascript
The same you can achieve using JavaScript also.
document.getElementById('test').style.backgroundColor = '#fff000';
<div id="test" style="background-color:green">
<h1>
Sample
</h1>
</div>
You can override the inline style using !important keyword
.overwrite_css{
background-color: blue !important;
}
<div class="overwrite_css" style="background-color: red;font-size: 25px;">
<h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
</h2>
</div>
Still not able to override it then try this one
Note: Using !important ONLY will work here, but I've used overwrite_css[style]
selector to specifically select div having style attribute
The example uses [style] (the attribute selector) to show us that the CSS is targetting the div with the “style” attribute.
.overwrite_css[style]{
background-color: blue !important;
}
<div class="overwrite_css" style="background-color: red;font-size: 25px;">
<h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
</h2>
</div>
You can only override inline css with
!important
or you have to use javascript to do so.
If you want to change inline css you should use js, you can override through !important tag but it has high priority so it may affect other css style...
So it's good to use js instead of !important tag.
I'm working on a page right now which has blocks of text set in border boxes, and the text within these is styled.
Basically, the main problem I'm having is that within the styled <p> tag containing the border styling, when I try to break the text into another paragraph, the text after the </p> jumps outside of the box. I've tried adding the <p> in all kinds of different places but it just won't do what I want, and I can't find any tutorials on how to add extra paras within a paragraph styled with a border. Sample code below... this box was easy because there is only a single short paragraph. The rest of the page has multiple paragraphs that all need to fall within the border box.
Can anyone please help?
<p style="border: solid 3px #4D545E; padding: 6px;">
<strong style="color: #c01d21;">Book your Christmas party</strong>
on any Monday-Thursday in November – and all your guests will receive a complimentary Sorbete al Cava cocktail.
<br>
<a style="text-transform: uppercase;line-height: 38px;text-align: center; " class="link" href="http://www.manchesterconfidential.co.uk/b.aspx?b=6980" target="_blank">
<strong>Click to book a table</strong>
</a>
Or call <strong>#### ### ####</strong>
</p>
If i understand what you are saying, i have mad a snippet code for you here so that you can check it out, if it suites what you want, you can use it or try to explain more about what you want.
.wrapper{
border: solid 3px #4D545E; padding: 6px;
}
.center{
text-align:center;
}
<div class="wrapper">
<p><strong style="color: #c01d21;">Book your Christmas party</strong> on any Monday-Thursday in November – and all your guests will receive a complimentary Sorbete al Cava cocktail.</p>
<p class="center">
<a style="text-transform: uppercase;line-height: 38px;text-align: center; "class="link" href="http://www.manchesterconfidential.co.uk/b.aspx?b=6980" target="_blank"><strong>Click to book a table</strong></a></p>
<P class="center">
Or call <strong>#### ### ####</strong></p>
</div>
following up on Jerry's answer above, to add multiple paragraphs should be as simple as adding<p>tags (assuming this is what you are looking for).
code wise, it'll be (working off Jerry's solution)
.wrapper{
border: solid 3px #4D545E; padding: 6px;
}
.center{
text-align:center;
}
strong {
color: #c01d21;
}
a {
text-transform: uppercase;
line-height: 38px;
text-algin: center;
}
I moved all your styling to CSS. And the html would be (same as above) + more <p> or any other tag you choose to add.
<div class="wrapper">
<p><strong>Book your Christmas party</strong> on any Monday-Thursday in November – and all your guests will receive a complimentary Sorbete al Cava cocktail.</p>
<p class="center">
<a class="link" href="http://www.manchesterconfidential.co.uk/b.aspx?b=6980" target="_blank"><strong>Click to book a table</strong></a></p>
<P class="center">Or call <strong>#### ### ####</strong></p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.</p>
<p class="center"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.</p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.</p>
</div>
Hope this helps.
p.one {
border-style: solid;
border-width: 5px;
}
<p class="one">Some text.</p>
http://www.w3schools.com/css/css_border.asp
Sorry guys, I'm really up against it here and I don't always get chance to jump back on and reply. There is an intern here at the moment who can answer some of my HTML questions, but thank you all for your input. No doubt I'll have more questions soon... :)