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:
Here is my HTML:
<div class="logo">
Dwayne Walker
</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?
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">
Dwayne Walker
</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
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;
}
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">
Hi
</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">
Hi
</div>
</div>
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">
Dwayne Walker
</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.
Related
I would love your help with an issue I have with my html code.
I have the following code:
<img id="logo" src="images/logo.png">
<div id="content">
<h2>header</h2>
<p>text</p>
</div>
and my css code is:
img#logo {
width: 300px;
position:absolute;
right: 10px;
z-index:-1;
}
div#content {
text-align: center;
border: 2px solid;
border-radius: 25px;
margin: 100px 25 0 25px;
}
My problem is that the div includes the image within its borders (so it pulls the image to the margin of 100px from top.
When I include an <br> after the <img> it won't happen but that isn't the best way to solve it.
Does anybody know how to solve this?
this is happening because you have positioned your image absolutely meaning it is taken out of the flow of the page. If you are just wanting to place the image on the right, try using
float:right;
margin-right:10px;
instead of absolute positioning. You can then ensure the content div appears below the image by adding clear:right to it's styles
top position is missing to the absolute logo image. And a typo in right margin (missing px) -
img#logo {
width: 300px;
position:absolute;
right: 10px;
top: 0;
z-index:-1;
}
div#content {
text-align: center;
border: 2px solid;
border-radius: 25px;
margin: 150px 25px 0 25px;
}
Fiddle
I am trying to place a css element to the right side of the header but not sure exactly how to do it. I tried using:
position: Absolute; top: 20px; right 0px;
That would work but if you adjust the browser the text moves with it.
I created a JFiddle that you can find here:
http://jsfiddle.net/rKWXQ/
This way you can see what I am trying to do. I have a text inside a wrapped div element that says Call Now (555) 555-5555.
Here is the header element and inside of that I have a right_header element.
<div id="header">
<span class="right_header">Call Now (555) 555-5555</span>
</div>
Here is my Header CSS:
/* Header */
#header {margin: auto; width: 1007px; height: 123px; background: url(../images/logo.png) no-repeat 20px; background-color: #37352b; border: 1px solid #862209;}
.right_header{color: #fff; position: absolute; top: 70px; right: 0px}
Can someone please tell me the proper way to accomplish this please?
Note the left side will have a logo there that will not load in JFiddle!
Thanks!
You can easily just float it to the right, no need for relative or absolute positioning.
.right_header {
color: #fff;
float: right;
}
Updated jsFiddle - might need to add some padding/margins - like this.
Two more ways to do it:
Using margins on the element you want to position to the right of its parent.
.element {
margin-right: 0px;
margin-left: auto;
}
Using flexbox on the parent element:
.parent {
display: flex;
justify-content: right;
}
As JoshC mentioned, using float is one option. I think your situation suggests another solution, though.
You need to set position: relative on your #header element in order for the position: absolute on your #right_header to take effect. once you set that, you are free to position #right_header however you want relative to #header
You can do this way also if you want to do with position, Try this please
#header {margin: auto; position:relative; width: 1007px; height: 123px; background: url(../images/logo.png) no-repeat 20px; background-color: #37352b; border: 1px solid #862209;}
.right_header{color: #fff; position: absolute; top: 0px; right: 0px}
The answer using floats from JoshC will work fine, however, I think there is a reason this is not working.
The reason your code does not work, is that the absolute position is relative to the which has dimensions of 0x0.
The '' should be absolutely position in order for this code to work.
#header {margin: auto; width: 1007px; height: 123px; background: url(../images/logo.png) no-repeat 20px; background-color: #37352b; border: 1px solid #862209;}
change it to...
#header {margin: auto; position: absolute; left: 0px; right: 0px; top 0px; height: 123px; background: url(../images/logo.png) no-repeat 20px; background-color: #37352b; border: 1px solid #862209;}
<div><button>Continue</button></div>
to make button on the right of div
<style>
button {
display:block;
margin-left:auto;
}
</style>
So, I have a div for which three sides are shown and the bottom border is set to none. However, I'd like to keep the bottom left and right corners visible. Does anyone know of a way to do this? Thanks!
This should work
.test {
border-bottom:1px solid #000;
border-bottom-left-radius:1px;
border-bottom-right-radius:1px;
}
use css styles
<html>
<div id="test" >something </div>
</html>
<style>
#test {
border-top-style: hidden;
border-right-style:solid;
border-bottom-style:solid;
border-left-style:solid;
}
</style>
There is no native css support for this type of effect. Setting a border style will affect the entire length of that border. A very creative answer was given here CSS - show only corner border. You will need to modify it to fit your liking, but the basis is there.
If you want to have corner shaped borders two approaches come to mind.
use border image
use absolutely positioned inner divs to create the affect
Demo of #2
HTML:
<div class="outer">
<div class="bottom-left"></div>
<div class="bottom-right"></div>
</div>
CSS:
.outer {
position: relative;
width: 200px;
height: 200px;
border-left: 1px solid black;
border-right: 1px solid black;
border-top: 1px solid black;
}
.bottom-left, .bottom-right {
position: absolute;
bottom: 0;
width: 50px;
border-bottom: 1px solid black;
}
.bottom-left {
left: 0;
}
.bottom-right {
right: 0;
}
Is there anyway I can vertical-align text to appear above the border-top like I can below the border-bottom when the height is set to height:0px;?
HTML:
<ul id="experiment" style="background: #FFDD00;">
<li id="test1"><span class="v-align-bot">Chocolate</span></li>
<li id="test2"><span class="v-align-top">Potato</span></li>
</ul>
CSS:
#test1 {
height: 0px;
border-bottom: 50px solid #648291; /*grey*/
}
#test2 {
height: 0px;
border-top: 50px solid #FA8723; /*orange*/
}
.v-align-bot {
vertical-align: -50px;
}
.v-align-top {
vertical-align: 50px;
}
The Chocolate easily aligns below the border-bottom. The Potato does align above the li but the border-top follows(?) it as well.
TL;DR: Is there anyway I can make the BUTTONs in this fiddle below align properly?
http://jsfiddle.net/jLYhg/
Weird wishes eh ;) for doing this, actually the border of an element renders outside the element, so there's no straight way of doing this, but still if you want to get the text vertically middle on the borders, than you need to change couple of things in your markup as well as your CSS.
First of all wrap the words using a simple span tag, than use the below rules in your CSS
Demo
.v-align-bot span {
position: absolute;
top: 15px;
}
.v-align-top span {
position: absolute;
top: -35px;
}
Also make sure you use position: relative; on the below id's else they will flow out in the wild.
#test1 {
height: 0px;
border-bottom: 50px solid #648291; /*grey*/
position: relative;
}
#test2 {
height: 0px;
border-top: 50px solid #FA8723; /*orange*/
position: relative;
}
I am trying to make an overlapping a DIV onto other visually . I am trying
{
position:absolute;
top:-10px;
}
in css, but I found that this top attribute is not working properly in firefox. Dear fellas, how to do that? Please help me with some codes or examples.
thx in advance
Here's an easy way
CSS
.top {
position: relative;
}
.topabs {
position: absolute;
}
HTML
<div class='top'>
<div class='topabs'>
I'm the top div
</div>
</div>
<div>No styles, just frowns :(</div>
The relative positioned div collapses as there are no contents, causing the coordinates 0,0 coordinates of the absolute positioned div to be that of the div underneath.
Fiddle
http://jsfiddle.net/y5SzW/
Try this, I like to use relative position for this kind of thing.
<html>
<head>
<style type="text/css">
body{
background-color: #000;
padding:0;
margin:0;
}
#bottom {
width: 200px;
height: 200px;
border: 5px #fff solid;
background-color:#f00;
margin: 0 auto;
}
.top {
width: 200px;
height:200px;
top: 10px;
left: -100px;
z-index: 10;
background-color: #00f;
color: #333;
border: 5px solid #fff;
position: relative;
}
</style>
</head>
<body>
<div id="bottom">
<div class="top"></div>
</div>
</body>
</head>
I would of course seperate the CSS into it's own file later.
Just use position: relative instead of absolute, or add a negative margin-top: -10px instead.