I searched but couldn't find a question quite like mine. Apologies if there's an answer somewhere.
I'm attempting to do a very simple flex layout in row format where 2 containers are side by side. I have a card component with an ngFor loop inside another component. Here's my code:
top-cta-HTML:
<section id="cta-container">
<h1>Take Control of Your Financial Future</h1>
<h4>
Whether you’re looking at annuities to guarantee future income, <br />save
for a life change, or selling your structured settlement,<br />
we’re here to help with guidance, advice, and experience
</h4>
<app-cta-card></app-cta-card>
</section>
top-cta-CSS:
#cta-container {
margin: 2.5rem 0 0 auto;
padding: 0 20px 0 5px;
background-color: orange;
width: 35%;
border-bottom-left-radius: 60px;
text-align: end;
}
#cta-container h1 {
font-size: 2.75rem;
font-weight: 900;
}
#cta-container h4 {
margin-top: -20px;
font-size: 1.2rem;
font-weight: 500;
line-height: 1.5em;
}
card-HTML:
<article id="card-parent-container">
<div class="top-cta-card" *ngFor="let card of ctaCards">
<div class="cta-card-topper">1</div>
<h3>{{ card.title }}</h3>
➔
<p>{{ card.description }}</p>
</div>
</article>
card-CSS:
.top-cta-card {
background-color: var(--cream);
width: 300px;
}
#card-parent-container {
display: flex;
flex-direction: column;
}
.cta-card-topper {
background-color: var(--teal);
height: 100%;
width: 100%;
color: var(--teal);
}
.top-cta-links {
background-color: var(--teal);
color: var(--cream);
padding: 5px 6px;
border-radius: 50%;
box-shadow: 3px 2px 3px var(--gunMetal50);
}
This code produces 2 cards stacked on top of each other and no matter what I change they won't sit in row format.
As a test, I made 2 divs inside the top-cta-HTML file with no ngFor loop and got the desired result. Any ideas here on what I'm doing wrong?
Thank you for any and all help, I really appreciate it!
So the issue was that my flex code was one layer too deep. I ended up putting the flex code on app-cta-card it the flex works as intended.
Here's the Stack Blitz code:
https://stackblitz.com/edit/angular-6oxcmy
Related
i'm new and after finishing my site i realized the parts i created are not responsive is there a way to fix it without starting from scratch?
herer is my css, i tried to add media query and put the width to 100% but it didn't help the problem.
.main_content {
display: flex;
justify-content: center;
}
.main_content h1 {
margin-top: 80px;
display: inline-block;
width: 50vw;
text-align: center;
font-family: "henny penny";
color: #995932;
}
.main_content p {
margin-top: 10px;
display: inline-block;
font-family: "roboto";
color: #995932;
background-color: #fdc8a8;
width: 50vw;
height: 50vh;
padding: 30px 30px;
text-align: justify;
line-height: 4.5vh;
box-shadow: 8px 15px rgba(0, 0, 0, 0.2);
}
.sub_content {
display: flex;
justify-content: center;
align-items: center;
margin-top: 30px;
margin-bottom: 50px;
}
.sub_content div {
width: 40vw;
margin: 20px;
}
.sub_content h2 {
text-align: center;
font-family: "henny penny";
color: #9c9c27;
}
.sub_content p {
text-align: justify;
font-family: "roboto";
color: #aaaa36;
padding: 40px 40px;
background-color: #ffff99;
line-height: 3.5vh;
box-shadow: 8px 15px rgba(0, 0, 0, 0.2);
}
.mayor_content h2 {
margin-top: 30px;
margin-bottom: 20px;
text-align: center;
font-family: "henny penny";
color: #5a873b;
}
.mayor_content div {
margin: 0 auto;
width: 80vw;
height: 80vh;
text-align: center;
background-color: #b6db9d;
box-shadow: 8px 15px rgba(0, 0, 0, 0.2);
}
.mayor_content div h3 {
margin-bottom: 20px;
font-family: "henny penny";
color: #5a873b;
}
.mayor_content div p {
display: inline-block;
text-align: justify;
width: 35vw;
height: 20vh;
color: #547c39;
}
.mayor_content img {
width: 150px;
height: 200px;
position: relative;
bottom: 300px;
left: 570px;
image-rendering: crisp-edges;
}
the html seems organized but if i could order it more then i would be happy to.
<main>
<section>
<div class="main_content">
<div>
<h1>Mardi Gras in New Orleans</h1>
<p>The holiday of Mardi Gras is celebrated in all of Louisiana, including the city of
New
Orleans.
Celebrations
are
concentrated for about two weeks before and through Shrove Tuesday, the day before Ash Wednesday
(the
start
of
lent in the Western Christian tradition). Usually there is one major parade each day (weather
permitting);
many
days have several large parades. The largest and most elaborate parades take place the last five
days of
the
Mardi Gras season. In the final week, many events occur throughout New Orleans and surrounding
communities,
including parades and balls </p>
</div>
</div>
<div class="sub_content">
<div>
<h2>Traditional colors</h2>
<p>The colors traditionally associated with Mardi Gras in New Orleans are green, gold,
and
purple. The
colors
were first specified in proclamations by the Rex organization during the lead-up to their
inaugural
parade
in 1872, suggesting that balconies be draped in banners of these colors. It is unknown why these
specific
colors were chosen; some accounts suggest that they were initially selected solely on their
aesthetic
appeal, as opposed to any true symbolism.</p>
</div>
<div>
<h2>Costumes and masks</h2>
<p>In New Orleans, costumes and masks are seldom publicly worn by non-Krewe members on
the
days before Fat
Tuesday (other than at parties), but are frequently worn on Mardi Gras. Laws against concealing
one's
identity with a mask are suspended for the day. Banks are closed, and some businesses and other
places
with
security concerns (such as convenience stores) post signs asking people to remove their masks
before
entering.</p>
</div>
</div>
</section>
<div class="break_point2"></div>
<section class="mayor_content">
<h2>Mayor of New Orleans</h2>
<div>
<h3>LaToya Cantrell</h3>
<p>LaToya Cantrell born April 3, 1972 is an American politician serving as the Mayor of New
Orleans, Louisiana, a post she has held since May 7, 2018. A Democrat, Cantrell is the first woman
to
hold the post. Before becoming mayor, Cantrell represented District B on the New Orleans City
Council
from 2012–2018.</p>
</div>
<img src="./images/mayor.jpeg" alt="LaToya Cantrell">
</section>
</main>
Because you are using vw in certain places, this unit takes a fixed percentage of browser size of 50vw mean 500px of 1000px screen and 50px of 100px screen, I would suggest to use rem instead also, you can go a bit advanced and use css clamp() to fix width of multiple screen at once.
This question already exists:
Is Inline Block Not Working Because Margins Are Set? [duplicate]
Closed 2 years ago.
I have a header and a "p" element that I want on one horizontal line. I've managed to obtain the desired result manually using CSS "position" function, but I would like to learn the proper way to do this so that both elements are mathematically aligned for future reference. I want the middle of each element to be on the same horizontal line, as one element has more height than the other. I tried using "display: inline-block" and that didn't work, perhaps because I have different margins set for each element but I'm not sure.
HTML:
<div class="head-one">
<h2 id="#about-me">About Me</h2>
<p id="cal">My name is Cal Cook. I'm 26 years old and live in Boston, Massachusetts. I'm from NYC originally. I'm passionate about cryptocurrency, web design and SEO. I built this site to feature my work.</p>
</div>
CSS:
h2 {
padding: 75px;
margin-left: 30px;
font-family: 'Nunito Sans', sans-serif;
}
#cal {
font-family: 'Roboto', sans-serif;
border: solid;
border-radius: 25px;
padding: 10px;
margin-left: 350px;
margin-right: 250px;
position: relative;
bottom: 140px;
}
It's a perfect situation (like almost every other) for CSS_layout/Flexbox
.head-one {
display: flex;
align-items: center;
justify-content: space-around;
}
#cal {
max-width: 60vw;
border: solid;
border-radius: 25px;
padding: 10px;
}
<div class="head-one">
<h2 id="#about-me">About Me</h2>
<p id="cal">My name is Cal Cook. I'm 26 years old and live in Boston, Massachusetts. I'm from NYC originally. I'm passionate about cryptocurrency, web design and SEO. I built this site to feature my work.</p>
</div>
CSS_layout/Flexbox
I would suggest removing all of your positing code. Use display: flex on the container and flex: 1 on the #cal element.
.head-one {
display: flex;
align-items: center;
}
h2 {
font-family: 'Nunito Sans', sans-serif;
white-space: no-wrap;
padding: 75px;
}
#cal {
font-family: 'Roboto', sans-serif;
border: solid;
border-radius: 25px;
padding: 10px;
flex: 1;
}
<div class="head-one">
<h2 id="#about-me">About Me</h2>
<p id="cal">My name is Cal Cook. I'm 26 years old and live in Boston, Massachusetts. I'm from NYC originally. I'm passionate about cryptocurrency, web design and SEO. I built this site to feature my work.</p>
</div>
I have the task of using CSS to create a stylized text box that looks like this:
I've been the server developer for many sites and occasionally do jump in to CSS, and usually figure things out in a reasonably clean way. However, I'm really stuck with this one - it's been an hours-long drag slowly working my way through things, to begin to get this going.
I have not yet begun the colorizing or borders. For now, I'm stuck trying to position the first line of text vertically. I would rather not force the height or width of any of the lines of text, as this seems to me to risk breaking if text/size is slightly changed.
Instead, I'd rather use semantics such as centering and vertical-align: top; (etc) (at least partially).
The green colorization is optional for this question. I'm much more concerned about the positioning of the text. Also, please don't be concerned about the choice of font (I'll hopefully be able to figure that out myself) - but font SIZE (and bolding) is important.
The current state of my attempted CSS is shown below - which doesn't work. My current CSS (below) leaves the image on the page looking like this:
(The blue colorization is just Chrome Web Developer highlighting, which I've provided to indicate the size of the div that includes the text of the first line. The actual background color is white.)
In the above image, I have not begun worrying about the colorization or borders. The current status of the above image is that I'm just trying to get the text "CLICK HERE for a" to appear at the TOP of its div - as noted, WITHOUT setting the height or width of the div to "collapse" onto the text, if possible.
My current trouble positioning the "CLICK HERE for a" text vertically is just one issue I've been dealing with. I would like to have a complete, working sample of the text and text positioning for this image, done "the right way" (or at least done in not a bad way). Perhaps the right way really is to set the width and height of the click-here-for-a div (see CSS below) to be nearly equal to the text dimensions, in order to force its absolute positioning (but as noted, I'd rather not unless answers here correct me, by telling me that this is a good way to do it).
Here is the HTML / CSS for the above (incorrect) image:
HTML:
<div class="smooth-click-region">
<div class="click-here-for-a">
CLICK HERE for a
</div>
<div class="intro-offer-on-home-delivery">
<div class="intro-offer">Special Introductory Offer</div>
<div class="on-home-delivery">on Home Delivery</div>
</div>
<div class="discount-description">2 weeks # 30% off - as low as $78/week</div>
</div>
CSS:
.intro-offer-smooth-click-region {
position: relative;
display: inline-block;
overflow: hidden;
width: 258px;
height: 61px;
}
.click-here-for-a {
position: absolute;
display: block;
left: 0;
right: 0;
top: 0;
vertical-align: top;
font-size: 8pt;
}
.intro-offer-on-home-delivery {
font-size: 9pt;
text-align: center;
}
.intro-offer {
position: absolute;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}
.on-home-delivery {
position: absolute;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}
.discount-description {
position: absolute;
font-size: 9pt;
height: 12px;
}
What is the right way to use CSS to create the image above - at least in terms of text formatting and positioning?
Posting as an answer at your request. It helps to add span tags around single lines of text that you want to style independently.
JSFiddle Example
HTML:
<div class="smooth-click-region">
<div class="click-here-for-a">
<span>CLICK HERE</span> for a
</div>
<div class="intro-offer-on-home-delivery">
<div class="intro-offer">Special Introductory Offer</div>
<div class="on-home-delivery">on Home Delivery</div>
</div>
<div class="discount-description">2 weeks # 30% off - as low as $78/week</div>
</div>
CSS:
.smooth-click-region {
display: inline-block;
overflow: hidden;
width: 258px;
height: 61px;
background: #cebd44;
border: inset 1px dotted;
border-style: double;
}
.click-here-for-a span {
font-weight: bold;
}
.click-here-for-a {
display: block;
text-align: center;
vertical-align: top;
font-size: 8pt;
}
.intro-offer-on-home-delivery {
font-size: 9pt;
text-align: center;
font-weight: bold;
}
.intro-offer {
margin-left: auto;
margin-right: auto;
}
.on-home-delivery {
margin-left: auto;
margin-right: auto;
}
.discount-description {
font-size: 9pt;
height: 12px;
text-align: center;
}
Here you are, as simple as it gets http://jsfiddle.net/1dmhLm9c/
.smooth-click-region{
text-align: center;
width: 300px;
background: green;
padding: 10px;
}
p, h2{
margin: 0px;
}
You can style it as you want :)
You can find some site with a similar boxes that works well and inspect it with firebug. That will show you the html layout.. You can get some good ideas for how you want to create your own.
Very simple.
Demo http://jsfiddle.net/7xtf1f8m/
CSS:
.smooth-click-region {
display: inline-block;
border: 2px solid #aa6;
padding: 2px;
background-color: #cc0;
box-sizing: border-box;
text-align: center;
font-family: Arial;
}
.smooth-click-region span {
font-weight: 700;
}
.inner {
padding: 0.3em 3em;
background-color: #aa6;
}
.click-here-for-a {
font-size: 0.8em;
}
.intro-offer-on-home-delivery {
font-weight: 700;
}
.discount-description {
font-size: 0.7em;
}
HTML:
<div class="smooth-click-region">
<div class="inner">
<div class="click-here-for-a"><span>CLICK HERE</span> for a</div>
<div class="intro-offer-on-home-delivery">
Special Introductory Offer<br/>
on Home Delivery
</div>
<div class="discount-description">2 weeks # 30% off - as low as $78/week</div>
</div>
</div>
You can create the multiple borders by using the CSS3 box-shadow property. HTML tags have by default some CSS attributes so you do not have to define them in your CSS. For example the tag <div> is a block level element and by default has display: block; (you defined it for div.click-here-for-a).
You do not have to write too much unnecessary css.
This is my example for you:
.smooth-click-region {
background:#acb014;
width:260px;
padding:5px;
position:relative;
box-shadow: 0 0 0 5px #FFF,0 0 0 10px #acb014;
text-align:center;
}
<div class="smooth-click-region">
<div class="click-here-for-a">
CLICK HERE for a
</div>
<div class="intro-offer-on-home-delivery">
<div class="intro-offer"><strong>Special Introductory Offer</strong></div>
<div class="on-home-delivery"><strong>on Home Delivery</strong></div>
</div>
<div class="discount-description">2 weeks # 30% off - as low as $78/week</div>
</div>
I did not changed your html code but I advise you to use other HTML tags that have their default css. Use h1, h2, h3 for headlines and p for paragraphs, etc.
So currently when I add a new entry to my kind of list it goes like this:
[entry] -> [new entry]
and then starts on the line beneath. How do I do so it first fills the first line straight down and then creates a second line and fills that one straight down.
To easier show what I mean. I will give every entry a number and show how it works.
How it works right now:
1 2
3 4
5 6...
And I want it to work like:
1 4
2 5
3 6
Anyone know how I should do?
Code comes here.
HTML
<div id="staffs">
<h5>The Management</h5>
<p>
<div class="staff_box">
<img src="/images/users/1.png" class="staff_img" />
<h3 class="staff_name">Sarah Doe <img src="/images/flags/Sweden-Flag-16.png" class="staff_country" /></h3>
<text class="staff_pos">CEO, Founder, Owner</text>
</div>
<div class="staff_box">
<img src="/images/users/1.png" class="staff_img" />
<h3 class="staff_name">David Doe <img src="/images/flags/Sweden-Flag-16.png" class="staff_country" /></h3>
<text class="staff_pos">CEO, Founder, Owner</text>
</div>
<!--Same boxes are repeated-->
</p>
</div>
CSS:
#staffs {
width: 530px;
height: 275px;
float: left;
clear: left;
overflow-y: hidden;
}
h5 {
text-align: center;
background: #222;
color: #888;
padding: 5px;
width: 510px;
font-weight: bold;
border-radius: 4px;
}
.staff_country {
height: 12px;
width: 12px;
}
.staff_box {
width: 175px;
height: 50px;
margin-left: 5px;
margin-top: 5px;
clear: left;
display: inline-block;
}
.staff_img {
height: 50px;
width: 50px;
float: left;
margin-right: 3px;
border-radius: 4px;
border: 1px solid #BBB;
}
.staff_name {
font-size: 13px !important;
margin: 0 !important;
padding: 0 !important;
padding-top: 2.5px !important;
}
.staff_pos {
font-size: 11px;
color: #777;
}
To see it in action, here is a JSFiddle: http://jsfiddle.net/7MfLU/4/
I would also need some help on how to move the top entries higher up, closer to the titlebar.
Probably the easiest way, since you're just using divs anyway, is to just reorder them in your HTML. You could also create two diva inside staff_box, a left and a right, and put your diva in the appropriate column that way. To move the entries closer to the title bar, change the margin-top to something smaller (you can go negative if you need to).
i try to put a button under a text using css but i tried different solutions (, white-space: pre-wrap;..) but nothing changes i'm getting the button ( OK ) near the text .
Here's the code:
CSS:
/* Styles for game Help popup */
#popupHelp {
font-family: 'Orbitron', serif;
font-size: 20px;
font-weight: 600;
text-shadow: 0px 1px 2px #fff;
color: #222;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(0,0,0,.5);
display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;
-webkit-transition: all .5s ease-in;}
#popupHelp h1 {
font-weight: 400;}
#popup-box {
width: 400px;
height: 400px;
background: #ccc url(../images/popup_bg.jpg);
border-radius: 10px;
position: relative;
-webkit-box-shadow: 0 5px 5px #333;
display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;
-webkit-transition: all .5s ease-in;}
#popup-box small {
font-size: .6em;}
/* the type of OK button */
#popup-box a.buttonOk {
background: white;
border-radius: 5px;
display: inline;
font-size: 30px;
margin: 230px auto 0;
padding: 10px;
width: 150px;
border: 3px solid #006438;
color:#006438;
text-decoration:none;}
#popup-box a.buttonOk:hover {
background: #006438;
color:#fff;
text-decoration:none;}
HTML:
<section id="popupHelp" class="hide">
<div id="popup-bg"></div>
<div id="popup-box">
Cards are laid out in a grid face down,
and players take turns flipping pairs of cards over.
On each turn, the player will first turn one card over,
then a second. If the two cards match,
the player scores one point,
the two cards are removed from the game,
and the player gets another turn.
If they do not match, the cards are turned back over.
<div> <p><a id="ok" class="buttonOk" href="">OK</a></p
</div>
</div>
</section>
Any idea please thank u in advance
Quick glance the easiest option seems to be to simply move the button outside of the popup-box div.
<section id="popupHelp" class="hide">
<div id="popup-bg"></div>
<div id="popup-box">
Cards are laid out in a grid face down,
and players take turns flipping pairs of cards over.
On each turn, the player will first turn one card over,
then a second. If the two cards match,
the player scores one point,
the two cards are removed from the game,
and the player gets another turn.
If they do not match, the cards are turned back over.
</div>
<div><p><a id="ok" class="buttonOk" href="">OK</a></p>
</div>
</section>
Did you try taking out the <div>?
also you're missing a ">" at the end of the
<p><a id="ok" class="buttonOk" href="">OK</a></p>