FreeCodeCamp/HelpFrontEnd

Get help on our Front End Development projects.

Suzanne Atkinson

@AdventureBear

ich kann noch...but not very well

@PattyCreates can you make the div with the left border occur after the div with the top border?

then it can show up below that one

PattyCreates

@PattyCreates

Hm, so it's an HTML email. So less is more being that it's pretty complicated with TRs and TDs as is. I've tried assigning it to the TR but it still keeps inheriting the TD as the dominant one.

So box-sizing doesn't work for it either. :/

Michiel

@MichielHuijse

@AdventureBear hablas espaniol? Que bueno yo tambien, estuve en sud america.

Tarek Alabd

@TarekAlabd

hey , how to make nav bar like this : https://codepen.io/FreeCodeCamp/full/YqLyXB/

Michiel

@MichielHuijse

anyway off topic :)

Suzanne Atkinson

@AdventureBear

@MichielHuijse Mi español es tampoco muy malo. Solo por hablando de medicina?

Michiel

@MichielHuijse

You need css html jquery, in my case I used a framwork bootstrap but you can do it all yourself

Suzanne Atkinson

@AdventureBear

@PattyCreates unless you are displaying tabular data you don't need to use a table. Are you making a web page or writing an email?

Rimi.

@Codevotee

@TarekAlabd go for an easier navbar

PattyCreates

@PattyCreates

@AdventureBear it's an email.

Which gives me the shivers. :/

Rimi.

@Codevotee

@TarekAlabd that code is too complicated for what FCC teaches before the Portfolio task

Michiel

@MichielHuijse

@AdventureBear Tampoco muy malo, meens you are really not bad at spanish.

Tarek Alabd

@TarekAlabd

@MichielHuijse I tried but i don't know how to make any navbar

Tyler Moeller

@TylerMoeller

@PattyCreates If you can share the code, we might be able to help more. You may be able to get away with using outlines instead of borders, or a mix of the two

Tarek Alabd

@TarekAlabd

@APRim05 that's true

Tyler Moeller

@TylerMoeller

@TarekAlabd They're using the bootstrap fixed-to-top navbar with additional CSS styling to make it unique: https://getbootstrap.com/components/#navbar-fixed-top

Rimi.

@Codevotee

@TarekAlabd are you using bootstrap?

Michiel

@MichielHuijse

@TarekAlabd A navbar is an unordered list. with list items that float next to eachother

@TarekAlabd and an unordered list is a class: .ul which can be styled in the cascading style sheet. or css

Tarek Alabd

@TarekAlabd

@APRim05 yes

PattyCreates

@PattyCreates

@TylerMoeller @AdventureBear

<div style="margin:0 auto;max-width:600px;background:#ffffff;"><table role="presentation" cellpadding="0" cellspacing="0" style="font-size:0px;width:100%;background:#ffffff;" align="center" border="0" mc:repeatable="thumbnailWithText" mc:variant="thumbnailMain"><tbody><tr style="border-bottom: 2px solid #ededed;"><td style="text-align:center;vertical-align:top;font-size:0px;padding:20px;">

Tarek Alabd

@TarekAlabd

@MichielHuijse I'll try again , thanks

CamperBot

@camperbot

tarekalabd sends brownie points to @michielhuijse :sparkles: :thumbsup: :sparkles:

:cookie: 270 | @michielhuijse |http://www.freecodecamp.com/michielhuijse

Suzanne Atkinson

@AdventureBear

@PattyCreates I only see the gray border in that code and it looks like it will be at the bottom of that first table row. I don't see the orange border. Again, unless you are displaying tabular data I would not style that with table HTML. Use DIVs instaed

Tyler Moeller

@TylerMoeller

@PattyCreates I only get a white rectangle when I use that code. I don't think you can apply a border to <tr>

Alexander Domikov

@AlexanderDom

<div style="margin:0 auto; max-width:600px; background:#ffffff;">
  <table role="presentation" cellpadding="0" cellspacing="0" style="font-size:0px;width:100%;background:#ffffff;" align="center" border="0" mc:repeatable="thumbnailWithText" mc:variant="thumbnailMain">
    <tbody>
      <tr style="border-bottom: 2px solid #ededed;">
        <td style="text-align:center;vertical-align:top;font-size:0px;padding:20px;"></td>
      </tr>
    </tbody>
  </table>
</div>

Evan W

@Dirtier

@sorinr cant you just use em?

Tyler Moeller

@TylerMoeller

@AdventureBear She's using HTML email, it's stuck in the 90s :) and needs to use tables.

Alexander Domikov

@AlexanderDom

no you can't put border on <tr>

PattyCreates

@PattyCreates

Ah silly me.

Evan W

@Dirtier

@sorinr instead of px

PattyCreates

@PattyCreates

<div style="margin:0 auto;max-width:600px;background:#ffffff;">
  <table role="presentation" cellpadding="0" cellspacing="0" style="font-size:0px;width:100%;background:#ffffff;" align="center" border="0" mc:repeatable="thumbnailWithText" mc:variant="thumbnailGreen">
    <tbody>
      <tr style="border-bottom: 2px solid #ededed;">
        <td style="text-align:center;vertical-align:top;font-size:0px;padding:20px 20px 20px 15px;border-left: 5px solid #a5cf4a;">

Excuse the poor indentation

Alexander Domikov

@AlexanderDom

you can use two spaces for it, codepen or something like that it's easier to share code by the way

@PattyCreates

what you really want to achieve ?

PattyCreates

@PattyCreates

Screen Shot 2016-09-26 at 2.50.20 PM.png

The opposite of this @AlexanderDom

The sides are hilights.

But i'm actually having a weird bug atm. fml. One of the borders doesn't show up on mailchimp preview. Although its consistent with the others.

Alexander Domikov

@AlexanderDom

sorry i don't understand :(

cameron nicklaus

@camnicklaus

I'm probably going about this all wrong, but is there a way to make the parent container display "on top" of the child elements? I want to make it's opacity less than 1 so it looks as though you are looking "through" it at the contents

Amit

@amit-s

@camnicklaus css z-index maybe?

Tyler Moeller

@TylerMoeller

@camnicklaus Opacity will affect everything, you can use RGBA instead to adjust the opacity on specific elements: background-color: rgba(170,170,170,.3);

The .3 at the end adjusts the opacity of the color applied

Where communities thrive

People

Repo info

Activity