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
Related
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.
I'm creating a gallery with images having an overlay dark background and caption text. The placement is alright but the overlay div is falling out of the bounds of the image because a padding is used on the container element.
I read about it at several places and learned that border-box could solve this problem but it isn't. Am I doing something wrong here? Check out the code:
HTML:
<div class="dest-item">
<img src="http://lorempixel.com/500/400">
<div class="dest-caption">
<div class="dest-text">
<h3>This is a caption</h3>
</div>
</div>
</div>
CSS:
.dest-item{
position:relative;
overflow:hidden;
z-index:1;
padding:10px;
width: 500px;
}
.dest-item img{
width: 100%;
}
.dest-caption{
position: absolute;
top: 0px;
background: rgba(0,0,0,0.2);
z-index: 2;
width: 100%;
height: 100%;
box-sizing: border-box;
}
.dest-text{
position: absolute;
bottom: 0;
background: rgba(255,255,255,0.9);
width: 100%;
padding: 0px 10px;
}
Playground link: Code Pen
Try this (fork here:http://codepen.io/anon/pen/RNqbjB)
CSS:
/*remove the padding*/
.dest-item{
position:relative;
overflow:hidden;
z-index:1;
padding:0px;
width: 500px;
}
HTML:
<!--Add a wrapper and add the padding to that-->
<div style="padding:10px;">
<div class="dest-item">
<img src="http://lorempixel.com/500/400">
<div class="dest-caption">
<div class="dest-text">
<h3>This is a caption</h3>
</div>
</div>
</div>
</div>
Remove the padding from whole dest-item div. you don't need that padding over there as I think:
.dest-item {
position: relative;
overflow: hidden;
z-index: 1;
/* padding: 10px; */
width: 500px;
}
Not sure if this is along the right lines?
.dest-item{
position:relative;
overflow:hidden;
z-index:0;
padding:10px;
width: 500px;
}
.dest-item img{
width: 100%;
}
.dest-caption{
position: absolute;
top: 0;
left: 0;
background: rgba(0,0,0,0.2);
width: 100%;
height: 100%;
}
.dest-text{
color: black;
position: absolute;
text-shadow: 2px 2px 40px rgba(255,255,255, 1);
bottom: 0;
left: 0;
background: rgba(255,255,255,0.38);
width: 100%;
padding: 2px 0px 10px 20px;
}
<div class="dest-item">
<img src="http://lorempixel.com/500/400">
<div class="dest-caption">
<div class="dest-text">
<h3>This is a caption</h3>
</div>
</div>
</div>
You don't need border-box to do what you want.
There are 3 types of box-sizing:
content-box is the default behavior and only includes the width and height. It does not account for padding or border width. If you have an element with 500px width + 10px padding + 1px border then the display size of the whole element is 522px wide and the size of the available space for actual content is 500px.
padding-box includes the padding but not the border. Same example as above, if you are using padding-box then the display size is 502px but the available content space is 480px.
border-box covers everything. So in our example, the display size is 500px but available space for content is 478px.
Margins are never counted in the size, in any case.
Depending on how you want the end result to look, then you will achieve this differently but based on your Code Pen sample, it looks like you want to fill the entire item container so the overlay cover the 10px padding as well. You can do this without changing the box-sizing for anything.
First, you need to offset your .dest-caption element to the left by 10px to account for the padding. Then you need to add 10px padding and remove the border-box attribute.
Like this:
.dest-caption {
position: absolute;
top: 0px;
left: -10px; /* offset */
background: rgba(0,0,0,0.5);
z-index: 2;
width: 100%;
height: 100%;
padding: 10px; /* add padding */
}
With that fixed, your text and its box is misaligned and the size of the box is not well-controlled. It is affected by the margin of the H3 tag. Fix this by removing the margins from the H3 tag inside of any .dest-text elements:
.dest-text H3 {
margin: 0px;
}
Without the margins on the H3 tag, the text overlay actually disappears out of the drawable area because it's misaligned. You can fix this by offsetting .dest-text from the bottom by the .dest-caption padding width (x2). You will probably also want top and bottom padding for .dest-text.
.dest-text {
position: absolute;
bottom: 20px; /* account for padding on .dest-caption */
background: rgba(255,255,255,0.9);
width: 100%;
padding: 10px 10px; /* add top/bottom padding */
}
Code Pen Link
I have an image in my website that is defined with the following CSS:
#settings_big{
border: none !important;
margin: auto 0 0 0 !important;
padding: 0 !important;
float: right;
}
Because of the float the image obviously sits on the right side of the content. The top margin causes the image to sit right beneath the lowest hanging element in the content. This looks OK, but I would really prefer that the image sit as low as possible in the browser window to somewhat frame the content. I've seen multiple examples that use fixed positioning to achieve this, and this would work, however my content has a max and min width of 960px; using a fixed position of
bottom: 0;
right: 0;
causes the image to get pushed far right outside of the content to the edge of the browser window. Is it possible to push the image to the bottom of the browser window while keeping the
float: right;
positioning? I would rather not use JavaScript or jQuery but it is an option I suppose. Thanks in advance.
New answer:
<div class="container contentCont">
<div id="content"></div>
</div>
<div class="container imageCont">
<div id="image"></div>
</div>
With CSS:
.container {
width: 200px;
margin: 0 auto;
background: #ccc;
}
.contentCont {
min-height: 600px;
}
.imageCont {
position: fixed;
bottom: 0;
right: 0;
left: 0;
}
#image {
float: right;
width: 20px;
height: 20px;
border: 4px solid red;
}
Does it right as in this JSFiddle: http://jsfiddle.net/WYX7H/1/
The following might be close to what you need.
Assuming that your page layout vaguely looks like the following HTML:
<div class="wrapper">
<p>some words...</p>
<div class="slot">
<img src="http://placehold.it/200x200">
</div>
</div>
apply the following CSS:
.wrapper {
width: 600px;
height: 600px; /* for demo only, not critical... */
margin: 0 auto;
border: 1px solid blue;
}
.slot {
text-align: right;
position: fixed;
left: 50%;
bottom: 0;
margin-left: -301px;
width: 600px;
border: 1px dotted blue;
}
.wrapper img {
vertical-align: top;
}
See demo at: http://jsfiddle.net/audetwebdesign/6Xnxj/
If you don't know the width of the image (or you don't want to specify it),
create a wrapper that matches the width of the parent element and apply position: fixed to it.
The image can then be either floated or text-aligned to the right within the fixed block.
The fixed block can then be positioned to the left and bottom, and using margin-left
to keep it centered.
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>
I've searched a whole bunch but couldn't find anything that was coming close to it..
I want to have a horizontal line that has an image centered in it..
What's the best way of achieving this with the HR tag or any different way?
This is the image that I want to use: http://www.dylanvanheugten.nl/images/logo.png
Thanks in advance!
This might get you started:
HTML:
<div class="line">
<span class="logo"></span>
</div>
CSS:
.logo {
position: absolute;
left: 50%;
top: 50%;
margin-left: -25px;
margin-top: -25px;
padding: 0 5px;
height: 50px;
width: 50px;
background: #fff url(http://www.dylanvanheugten.nl/images/logo.png) no-repeat 50% 50%;
}
.line {
position: relative;
overflow: visible;
height: 1px;
background-color: #ddd;
border: 1px solid #ddd;
}
Here's a fiddle you can play with: http://jsfiddle.net/4tZLD/1/
You can refer to this article. Maybe you can find a solution that covers all the browsers (or at least the ones you care about):
http://www.sovavsiti.cz/css/hr.html
I think that you want something like this, if I understood right.
http://jsfiddle.net/9yjmU/
HTML:
<div class="image">
<img src="http://www.dylanvanheugten.nl/images/logo.png"/>
</div>
<div class="line">
</div>
CSS:
.image{
text-align: center;
}
.line{
border-top: 1px solid black;
margin-top: -20px;
}
You can see that I used a div with a border-top and a margin-top: -20px; so it's in the center of the image (which looks 40px; height).
HTML:
<div class="line">
<img src="http://www.dylanvanheugten.nl/images/logo.png" class="lineImg">
</div>
CSS:
.line {
border-bottom: 1px solid black;
text-align:center;
height:17px;
margin-bottom:17px;
}
.lineImg {
background-color:white;
padding:0px 5px 0px 5px;
}
see: http://jsfiddle.net/V5wj6/3/
the height and margin-bottom of .line need to be exaclty half the height of img, this way, the image will be vertically centered on the line and the following content wont be directly under the border.
in the .lineImg style the background-color makes it look better by removing the line underneath the img, and the padding gives it some more space, you will have to adjust the background-color to your page
This, hopefully, will finally deliver a simple solution to the never ending quest to centre a horizontally placed graphic and auto locate on resize. The calc() method is supported by most browsers. The below syntax uses a graphic with a 728px width.
Full width = 728px, get 50% = 364px. Then apply the following:
#imagecentre1 {
left : calc(100% / 2 - 364px);
/*rest of syntax */
}
It is important to ensure 'white space' either side of '+' and "-" this to ensure that values, both negative and positive work correctly and for the sake of continuity the practice should apply to '/' and '*'. I'm sure someone will confirm order of execution, from memory it will be +, -, x, /. Calc() has basic features, no 'auto'!!
Expect some limitations. Just give it wirl!