CODEWITHSUNDEEP
htmlcss
David Wade
David Wade

Reputation: 7

How to stop text spilling out of div

I'm making a website from scratch and in my navigation bar, I have a div to the left hand side which I have a hyperlink saying 'Dwayne Walker' in it.

For some reason it is 'spilling' out of the div, I think its because I have a diagonal border in the div. Here is an image:

ScreenShot

Here is my HTML:

<div class="logo">
    <a href="index.html">Dwayne Walker</a>
</div>

Here is my CSS:

.logo {
height: 50px;
width: 200px;
border-top: 50px solid red;
border-right: 50px solid transparent;}

Can anyone help me fix this?

Upvotes: 0

Views: 1308

Answers (4)

Yehudaz
Yehudaz

Reputation: 1

I'm not sure what is exactly the problem. because the hyperlink is exactly where it's suppose to be. inside the DIV parent!

i'm guessing your'e trying to put the hyperlink inside the red part which is the red top-border. and if it is so it may be done by using positioning which is the most efficient way to do that: look my code below:

  .logo {
            height: 50px;
            width: 200px;
            border-top: 50px solid red;
            border-right: 50px solid transparent;
            outline: 1px dotted green;
            position: relative;
        }

.logo a {
           position: absolute;
           top: -35px;
        }
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<div class="logo">
    <a href="index.html">Dwayne Walker</a>
</div>
</body>
</html>

using position:absolute on the child element is the most efficient way to control element's position relative to the first parent which has a position:relative\absolute.

w3schools:

position: absolute; An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed). However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.

Upvotes: 0

kanudo
kanudo

Reputation: 2219

Your anchor text is inside the div only. But if you need the text to visible on the border, then you simply need to remove height from you .logo div as there is no need for height. And then implement the following css, and it's done.

You can see the output by Run code snippet.

.logo {
    width: 200px;
    border-top: 50px solid red;
    border-right: 50px solid transparent;
    position: relative;
}

.logo a {
  position:absolute;
  top: -35px;
  left: 25px;
  color: #fff;
  }
<div class="logo">
    <a href="index.html">Dwayne Walker</a>
</div>

You can also choose not to use position:relative; in .logo, for that you will have to set top property of .logo a to positive value.

But it is NOT a good practice as the .logo a will become relative to body tag or the nearest parent having postion:relative

Upvotes: 1

user508633
user508633

Reputation: 406

With some extra color to make clear what's going on: 

.logo {
  height: 50px;
  width: 200px;
  border-top: 50px solid red;
  border-right: 50px solid green;
  background-color: yellow;
}
<div class="logo">
  <a href="http://something">Hi</a>
</div>

Not sure what the best way is to actually stick text on the border, but there are probably plenty of solutions and opinions about which is best there (or if that's even the "right" approach to making that logo shape).

My idea is probably adding a margin-top: -50px inner container around the actual link, which is probably all-kinds of terrible style, but probably works just the same.

.logo {
  height: 0px;
  width: 150px;
  border-top: 50px solid red;
  border-right: 50px solid transparent;
}

.logo-content {
  height: 50px;
  margin-top: -50px;
  line-height: 50px;
  padding: 0px 10px;
}
<div class="logo">
  <div class="logo-content">
    <a href="http://something">Hi</a>
  </div>
</div>

Upvotes: 0

Kalpesh Singh
Kalpesh Singh

Reputation: 1717

Here you go! 

 <div class="logo">
    <a class="site-name" href="index.html">Dwayne Walker</a>
</div>


.logo {
  height: 50px;
  width: 200px;
  border-top: 50px solid red;
  border-right: 50px solid transparent;
  position:relative;
}
.site-name {
  position:absolute;
  top:-50px;
  left:0;
}

Upvotes: 0

Related Questions