Rectangles

Community Off Topic
1

How can I position rectangles around my text? I know I can make a border around it with the border attribute in CSS, but I want to customize how far it is from the text, and the size…

Any suggestions? :slight_smile: Thanks!

2

Hey Goldendraws,

Padding will let you control how far from the text the border is.
border-width or the first part of the value for border will control how large it is. Example:

border-width: 3px;
/* is the same as */
border: 3px /* style */ /* color */;

I hope this helps :slight_smile:
And please let me know if you’ve got any more questions about this :slight_smile:

3

padding is the spacing inside the box, so if you add: padding: 10px; the text will be 10px away from the border, you might want to consider to use box-sizing: border-box (this makes the border and padding part of the width and of the element and prevents it the box becomes bigger then your specified width

resources:
padding
box-sizing

Like zystvan says, if you have any further questions, feel free to ask, if you have a specific problem, please also include your code

4

I’ve got another question; I’m trying to remake the website… so below the nav bar I wanted to add a shadow affect, with a really thin rectangle… (Look at the top of your screen).

Whatever I do though… It doesn’t work… Here’s the HTML and CSS code:

    <div class="navigationMenu">  
        <ul class="pull-left">
            <div class="logo">
                <a href="index.html">
                    <img src="http://i.imgur.com/D8oyAMK.png" />
                </a>
            </div>
        </ul>
        <ul class="pull-right">
                <a href="profile.html">
                    <div class="profileIcon">
                    <img src="http://i.imgur.com/JcpRgTI.png" height = "50" width = "50">
                          </div>
                        </a>
            
            

.navigationMenu ul {
    background-color: white;
    
}

.navigationMenu a {
  color: #393D60;
  font-size: 15px;
  font-weight: normal;
  text-transform: uppercase;
}

.navigationMenu li {
  display: inline;
}

.navigationMenu {
    position: relative;
}

.navMenuLogIn a {
    margin-top: 500px;  
    height: 100px
}


a:hover {
  text-decoration: none;
}
a {
  text-decoration: none;
}


.underlineA {
    margin-right:100px;
    
}


a:click {
  text-decoration: none;
}
a {
  text-decoration: none;
}



.profileIcon {
    padding-right: 121px;
    margin-top: 10px;
    width: 20px;
    height: 20px;
}

.logo {
    margin-top: 14px;
}

What can I do to make it work?

5

if you want to add a shadow effect, why do you not use the box-shadow property?

6

Because as you can tell by now, I love to over-complicate things. :laughing:

7

i see. @zystvan, would you be so nice to helpen goldendraws? i simple do not understand what he is trying to achieve, i find his code overcomplicated, i don’t do overcomplicated

1 Like
8

@goldendraws

If you deliberately do something the hard way for no reason other than that you feel like it, you’re not really going to go anywhere as a programmer.
If you look at the code for this site’s header’s shadow, they use this:

box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.25);

If you’re still determined to do it the hard way, you might be able to create a pseudo ::after element from the header, and give it a background with a linear gradient going from top to bottom. Do some research on “CSS linear-gradient”.