I'm trying to create my portfolio website and I'm not sure where the 78.500 margin on the right side of the image is coming from?
I set my container of that image and the caption underneath in html as:
.main__img--container {
text-align: center;
box-sizing: border-box;
margin: 0;
margin-right: auto;
padding: 0;
}
#main__img {
height: 80%;
width: 80%;
display: flex;
clip-path: circle();
}
.caption {
text-align: center;
font-size: 35px;
display: block;
background-color: #87CEEB;
background-image: linear-gradient(to top, #4169E1 0%, #33cee2 100%);
background-size: 100%;
-webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
}
.caption2 {
text-align: center;
font-size: 20px;
display: block;
align-items: center;
background-color: #87CEEB;
background-image: linear-gradient(to top, #4169E1 0%, #33cee2 100%);
background-size: 100%;
-webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
}
<figure class="main__image--container">
<img src="images/Profile Photo.jpg" class="profile" alt="pic" id="main__img">
<figcaption class="caption">Daichi Furukawa</figcaption>
<figcaption class="caption2">Cognitive Systems under Computer Science at UBC</figcaption>
</figure>
I played around the margin in #main__img, but it didn't change anything.
I would like to get rid of the 78.500 margin so I can put my image more on the right side of the page.
Even when I change the width from % to px, it still creates the margin on the right side of the page...
This margin is generated when you applied width to your image
#main__img {
height: 80%;
width: 80%;
display: flex;
clip-path: circle();
}
Use some other property to achieve the results you're looking for.
The code given in your question is far from complete to really get a reliable answer, but I see that your image has 80% width inside its parent element .main__img--container. So most likely that "margin" is the empty 20% which are left of the container's width. (Also the centered position of the caption in the screenshot you posted would fit to that)
As above, width is set to 80%, leaving 20% of empty space. Try floating it to the right:
float: right;
That should push it all the way to the right and switch the margin to the left of the image instead.
Related
There is a little space between my two divided blocks.
https://i.imgur.com/l411V0t.png here you can see my problem. I've can’t figure out why the blocks act like this.
body, main {
width: 100%;
margin: 0;
background: black;
}
.container {
display: block;
height: 200px;
margin: auto;
}
.block {
width: 100%;
height: 100%;
background:
linear-gradient(-135deg, transparent 45px, wheat 0) top right,
linear-gradient(45deg, transparent 45px, wheat 0) bottom left;
background-size: 100% 50%;
background-repeat: no-repeat;
}
<main>
<div class="container">
<div class="block">
</div>
</div>
</main>
In Firefox there is no gap to be found, in Edge and IE it shows so it seems to be a sizing issue. Increasing the background size to 51% closes the gap also in Edge.
I'll try to find how the different browsers calculate background sizes.
body, main {
width: 100%;
margin: 0;
background: black;
}
.container {
display: block;
height: 200px;
margin: auto;
}
.block {
width: 100%;
height: 100%;
background:
linear-gradient(-135deg, transparent 45px, wheat 0) top right,
linear-gradient(45deg, transparent 45px, wheat 0) bottom left;
background-size: 100% 51%;
background-repeat: no-repeat;
}
<main>
<div class="container">
<div class="block">
</div>
</div>
</main>
Interesting question, while when the container height is set to even number pixel, the line will be removed. When the container height is odd pixel, the line will be displayed.
The key factor should be background-size: 100% 50%; , so you could use scss round function to skip the rounding problem here.
I'm trying to set a png to be the bottom border of one div and again at the top of my footer. I've tried border-image as well as using it as the background image for my div, but I've failed to figure it out. Right now I'm just getting a black bar at the bottom of my first div, and a little black mark at the top of my Footer. Any explanation would be greatly appreciated.
Here's my code so far.
Main Page
<div className='about-wrapper'>
<img src='https://image.shutterstock.com/image-photo/gorilla-thinking-260nw-54482215.jpg' alt='Adam Face'></img>
<h2>Name</h2>
<p>Welcome to my site! I am a developer currently developing in ReactJS.</p>
</div>
.about-wrapper {
padding: 20px;
border-bottom: 50px solid transparent;
border-image: url('https://ubisafe.org/images/detorted-clipart-sky-line-1.png') 1%;
background: linear-gradient(#519DFE, #110BFF);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
text-align: center;
height: 100vh;
color: white;
}
Footer
<div className='footer-wrapper'>
</div>
.footer-wrapper {
height: 400px;
background: #001ED4;
border-top: 50px solid transparent;
border-image: url('https://ubisafe.org/images/detorted-clipart-sky-line-1.png') 1%;
Here's what my pages look like
First Div
Footer
The border-image-slice property indicates which parts of the image are used for the border; with only a single value, it will the same percentage of the width and height for the slices.
(Note that I used about 10% in my illustration to make it clear, but it works the same for 1%.) Since you have only a border bottom for the about-wrapper div, only the bottom part will be used.
So if you want the entire picture for a bottom border, the solution is to not use an 1% image slice. You would need 0 0 100% 0 (for top, right, bottom, left respectively). Same with the footer: for the top border there, use 100% 0 0 0.
.about-wrapper {
padding: 20px;
border-bottom: 50px solid transparent;
border-image: url('https://ubisafe.org/images/detorted-clipart-sky-line-1.png') 0 0 100% 0;
background: #110BFF linear-gradient(#519DFE, #110BFF);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
text-align: center;
height: 100vh;
color: white;
}
.footer-wrapper {
height: 400px;
background: #001ED4;
border-top: 50px solid transparent;
border-image: url('https://ubisafe.org/images/detorted-clipart-sky-line-1.png') 100% 0 0 0;
<div class='about-wrapper'>
<img src='https://image.shutterstock.com/image-photo/gorilla-thinking-260nw-54482215.jpg' alt='Adam Face'>
<h2>Name</h2>
<p>Welcome to my site! I am a developer currently developing in ReactJS.</p>
</div>
<!-- Footer -->
<div class='footer-wrapper'>
</div>
I want to have a split background with a color on the left side and a image on the right side and both should be equally big(50% each). So I know I can style the body like this to get red on 50% left of the body and blue on the right side:
background-image: linear-gradient(to right, red, red 50%, blue 50%, blue);
I would instead want something like this:
background-image: linear-gradient(to right, red, red 50%, url('image.jpg') 50%, url('image.jpg'));
Is this possible or should I take another approach?
I know I can split it up to two divs and make them take up 50% each and set whatever background I want on them but I want to have a navbar that is transparent and it should go from left all the way to the right so that's the problem with having two divs.
Thanks for the help!
You can do
background: linear-gradient(90deg, red 50%, rgba(0, 0, 0, 0) 50%), url('image.jpg');
You can use both together with commas as linear-gradient uses the background-image css property, but using a background image and linear gradient like this seems like the hard way of making this work. If you make an absolute positioned inner container in the nav a with a width of 100% and add two divs inside, those divs can both be 50% and then you can style each accordingly. Make sure the parent element is position: relative so you can set z-index to make the inner-container sit underneath your nav elements. Below is a sample of how it could work. Hope this helps.
Example
nav {
height: 240px;
width: 100%;
display: block;
position: relative;
}
.inner-container {
height: 100%;
width: 100%;
position: absolute;
display: flex;
opacity: 0.5;
z-index: 0;
}
.inner-container > div {
flex: 1 1 50%;
}
#blue-box {
background: linear-gradient(#e66465, #9198e5);
}
#img-box {
background: url(https://teamroboboogie.com/wp-content/uploads/2017/06/campo_logo_lrg.png) no-repeat;
background-size: 100% 100%;
}
ul {
margin: 0;
padding: 0;
display: block;
z-index: 1;
position: relative;
}
li {
display: inline-block;
width: 30%;
background: rebeccapurple;
color: white;
padding: 20px;
box-sizing: border-box;
cursor: pointer;
}
li:nth-child(2) {
margin: 0 5%;
}
<nav>
<div class="inner-container">
<div id="blue-box">
</div>
<div id="img-box">
</div>
</div>
<ul>
<li>This could be a button</li><!--
--><li>This could be a button</li><!--
--><li>This could be a button</li>
</ul>
</nav>
Alright, here is the thing. This is what I'm trying to accomplish, which I did so far:
The problem is I use hardcoded pixels right now, but it really needs to be more responsive. So it needs a height of 100% (not 200px like now). And the total width of the diagonal and content containers needs to be 50%, like the image above (so not hardcoded 100px like now). The main problem seems to be the diagonal, cause it almost seems I can only use pixels and not percentages. So if the content block gets more content, it will expand, but the diagonal will not, which is a problem.
It looks like a position absolute could fix it, but then I can't really place the content and diagonal blocks next to each other anymore. Now I gave them two different colors to be clear, but in the live example they need to look like one shape with the same background color.
.shape {
width:400px;
margin:0 auto;
display: block;
height: 200px;
position: relative;
background-image: url('https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSQdX7yx0pVXUlaNF7WkbSJpZp5r0TflV3WdsojKKK1Xon_1hh08l4OL1yd');
}
.diagonal {
height:0;
border-width: 0px 0 200px 100px;
border-style:solid;
border-color: transparent transparent transparent #d71f55 ;
float: left;
}
.content {
height: 100%;
width: 100px;
background-color: #888;
float: left;
color: #fff;
}
<div class="shape">
<div class="content">
Content goes here
Like this
</div>
<div class="diagonal"></div>
</div>
EDIT:
By the way, I already tried using two backgrounds as well, like:
background-color: #f87f73;
background-image: -webkit-linear-gradient( -28deg, #f87f73 0%, #f87f73 60%, #292423 60%, #292423 60%);
background-image: linear-gradient( -28deg, #f87f73 0%, #f87f73 60%, #292423 60%, #292423 60%);
But that really got ugly. Too pixelated.
Edit 2:
Browser which needs to be supported:
OS: windows 8/10 :
** browsers: Chrome 47/48
** Firefox 43/44
** Internet Explorer 11
OS: mac OSX 10.9/10.10
** Chrome 47/48
** Firefox 43/44
** Safari 8/9
OS: android 5/6
** Chrome latest version
OS: iOS 8/9
** Safari latest version
You can use viewport related units for the border as described in Shape with a slanted side (responsive). This will allow you to make the shape 50% width and 100% height of the viewport and responsive:
* {
margin: 0;
padding: 0;
}
.shape {
width: 100%;
margin: 0 auto;
display: block;
height: 100vh;
position: relative;
background-image: url('https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSQdX7yx0pVXUlaNF7WkbSJpZp5r0TflV3WdsojKKK1Xon_1hh08l4OL1yd');
}
.diagonal {
height: 0;
border-width: 0 0 100vh 25vw;
border-style: solid;
border-color: transparent transparent transparent #d71f55;
float: left;
}
.content {
height: 100vh;
width: 25vw;
background-color: #888;
float: left;
color: #fff;
}
<div class="shape">
<div class="content">
Content goes here Like this
</div>
<div class="diagonal"></div>
</div>
Viewport related units (vh and vw) have good browser support. For more info, see canIuse
This is probably how I would approach it. Using a hard 50/50 gradient rather than a border makes it pretty trivial. It seems to render ok in chrome but I haven't checked other browsers. If you want this inside a container remember to set the container to position: relative
.shape {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: auto;
height: auto;
display: block;
background-image: url('https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSQdX7yx0pVXUlaNF7WkbSJpZp5r0TflV3WdsojKKK1Xon_1hh08l4OL1yd');
}
.content {
height: 100%;
width: 25%;
background-color: #888;
color: #fff;
float: left;
}
.diagonal {
height: 100%;
width: 25%;
background: linear-gradient(to bottom right, #888 50%, transparent 50%);
float: left;
border: none;
}
<div class="shape">
<div class="content">
Content goes here Like this
</div>
<div class="diagonal"></div>
</div>
I can't quite get to the bottom of this: it seems that my parent div is being ignored by the browser when I want to align it. Hopefully any of you guys can get it! Thanks!
This is my parent div:
#button-subheading {
height: auto;
width: auto;
text-align: center;
margin-left: auto;
margin-right: auto;
}
and this is my child:
.button, button {
color: #fff !important;
font-size: -63px;
font-family: "CentraleSans-Bold","Helvetica Neue",Helvetica,Arial;
line-height: 265%;
text-decoration: none;
background-color: #167de4;
padding: 0 20px;
position: absolute;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
-webkit-background-clip: padding;
-moz-background-clip: padding;
border: 1px solid #1d4ea4;
-moz-box-shadow: 0 1px 1px rgba(0,0,0,0.23),inset 0 1px 0 rgba(255,255,255,0.19);
background-image: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(0%, #3669ef), color-stop(100%, #4f95f4));
background-image: -webkit-linear-gradient(bottom, #3669ef 0%,#4f95f4 100%);
background-image: -moz-linear-gradient(bottom, #3669ef 0%,#4f95f4 100%);
background-image: -o-linear-gradient(bottom, #3669ef 0%,#4f95f4 100%);
background-image: linear-gradient(bottom, #3669ef 0%,#4f95f4 100%);
text-shadow: 0 1px 2px rgba(0,0,0,0.75);
white-space: nowrap;
text-overflow: ellipsis;
}
when I try to implement it trough this HTML it gets stuck on the left of the screen:
<div id="button-subheading">
<div class="button" href="#" style="opacity: 1;">Get started with a free 30-day trial</div>
</div>
If you want to place only that element into the center, this could be a way to go:
#button-subheading {
position: absolute;
left: 50%;
top: 50%;
height: auto;
width: auto;
text-align: center;
margin-left: -150px; /* half the width of your element */
margin-top: -150px; /* half the height of your element */
}
FIDDLE
There are already a couple answers here, and even a chosen one. But I suppose I'll share my alternate solution anyways, so there are even more options available to you.
The way I solved with was by changing one line of CSS under the .button, button styles, turning position:absolute to display:inline-block. Absolute positioning can be very difficult to properly work into a layout, since it basically removes the element from the "flow" of the HTML.
Also, another minor thing I think might be helpful to you, is to use an anchor (a) element for the button, rather than a div, since clicking on an anchor would actually bring you to the specified href.
Here's a JSfiddle: http://jsfiddle.net/RgGHW/
Regardless though, glad you got an answer to your question!
Absolute positioning can get a bit annoying, i'm assuming you have a container div with a pixel width.
Just set a width on the container (button-sub heading) then set a width and auto margin on the button. The button will center in its container.
You have to have a width set on elements you want to center with margin:auto
Here is rough example: http://jsfiddle.net/hppXY/4/