Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
maybe my title is not good description about the thing i want to ask, i need specific border and i dont have any idea how to do it.
http://prntscr.com/eaqmcs
<div class="row first-column">
<h2>100%</h2>
<h1 class="col-md-12">Monetize your Mobile <span>Traffic</span></h1>
<p class="col-md-5 offset-md-4 pull-right">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia ducimus veniam earum! Architecto omnis ex nobis nemo enim culpa,
natus deleniti assumenda accusantium inventore laboriosam soluta perferendis, corporis facilis sunt?
</p>
</div>
This is my css
.first-column{
margin-left: 18%;
margin-right: 18%;
margin-top: -5%;
}
.first-column h1{
text-align: center;
letter-spacing: 2px;
font-weight: bold;
border-bottom: 1px solid #acacac;
}
.first-column h2{
color: #fff;
margin-left: 13%;
font-weight: bold;
font-size: 57px;
}
you can achieve this effect using skew transformation.
as the shape you have given is like a skewed div with only bottom and right radius
.test{
width: 150px;
height: 10px;
margin-left: 100px;
border-bottom: 2px solid red;
border-right: 4px solid red;
transform: skewX(-60deg);
border-bottom-right-radius: 2px;
}
<div class=test></div>
You could use pseudo elements, like h1 span:after, to achieve the effect:
http://codepen.io/Sixl/pen/jyjrmz
Related
This question already has answers here:
Two divs side by side - Fluid display [duplicate]
(9 answers)
Closed 1 year ago.
Div with class name main goes to the next line. I don't need it. It's wrong. I've vertical navbar with display block. I don't know why it goes to the next line.
Here's HTML code:
/* Nav */
nav {
padding-left: 30px;
padding-top: 30px;
height: 100vw;
width: 290px;
border-right: 1px solid #333333;
}
.nav__link {
color: #FFFFFF;
width: 250px;
display: block;
border-radius: 8px;
padding: 6px 0px 6px 30px;
transition: background-color .2s linear;
font-family: 'Lato', sans-serif;
font-weight: 700;
font-size: 18px;
margin-top: 20px;
}
.nav__link:hover {
background-color: #707070;
}
/* Main */
.main {
margin-left: 300px;
}
<!-- Nav -->
<nav>
Project 1
Project 2
Project 3
Project 4
</nav>
<!-- Main -->
<div class="main">
<div class="project">
<h1 class="project__name">Project 1</h1>
<p class="project__description">Lorem ipsum, dolor sit amet consectetur adipisicing, elit. Facere voluptates sapiente soluta velit aliquid unde similique quas fugit animi, fugiat, non? At provident totam esse, molestias? Quos, quam. Adipisci, animi.</p>
</div>
</div>
Any ideas to solve this problem, guys?
Add display: flex; to their parent, which is currently <body>:
body {
display: flex;
}
block elements take up entire width, so nav will push the <div> to next line by default.
Side note: I recommend using more semantic elements like <aside> and <main>
/* Nav */
body {
display: flex;
}
nav {
padding-left: 30px;
padding-top: 30px;
height: 100vw;
width: 290px;
border-right: 1px solid #333333;
background: grey;
}
.nav__link {
color: #FFFFFF;
width: 250px;
display: block;
border-radius: 8px;
padding: 6px 0px 6px 30px;
transition: background-color .2s linear;
font-family: 'Lato', sans-serif;
font-weight: 700;
font-size: 18px;
margin-top: 20px;
}
.nav__link:hover {
background-color: #707070;
}
/* Main */
main {
margin-left: 300px;
}
<aside>
<nav>
Project 1
Project 2
Project 3
Project 4
</nav>
</aside>
<!-- Main -->
<main>
<div class="project">
<h1 class="project__name">Project 1</h1>
<p class="project__description">Lorem ipsum, dolor sit amet consectetur adipisicing, elit. Facere voluptates sapiente soluta velit aliquid unde similique quas fugit animi, fugiat, non? At provident totam esse, molestias? Quos, quam. Adipisci, animi.</p>
</div>
</main>
I want make a tribute page like this:
I'm having trouble adding text with a border next to my image. Im only able to add it below the caption but not next to the image (exactly like the tribute page example). I'd like to do this with only html and css
<!DOCTYPE html>
<html lang="en">
<Style>
body {
background-color: grey;
}
#img-div {
width: 100%;
max-width: 633px;
height: auto;
margin-left: auto;
margin-right: auto;
display: block;
border-style: outset;
padding: 2px 500px 2px 2px;
margin-bottom: 2em;
text-align: center;
border-image-width: auto;
}
#main {
border-style: double;
text-align: center;
}
header {
text-align: center;
}
#image {
border: groove;
}
p {
border: black;
}
</Style>
<header>Crikey, mate</header>
<head>
<title id="tittle">Steve Irwin</title>
</head>
<body>
<div id="img-div">
<img id="image" alt="steve Irwin" src="Steve-Irwin.jpg">
<caption id="img-caption">"We dont own planet earth, we belong to it. And we must share it with our wildlife"</caption>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor repellat amet illo hic doloribus dolore eius accusantium quisquam eaque repudiandae adipisci ipsam iure quaerat saepe, assumenda molestias maiores inventore rem?</p>
</div>
<main id="main">
<a id="tribute-link" target="_blank" href="https://en.wikipedia.org/wiki/Steve_Irwin">Learn More</a>
</main>
</body>
</html>
Try this. It floats the image to the left and uses clear: both on the following text to ensure it goes below the image.
body {
background-color: grey;
}
#img-div {
width: 100%;
max-width: 633px;
height: auto;
margin-left: auto;
margin-right: auto;
display: block;
border-style: outset;
padding: 2px 500px 2px 2px;
margin-bottom: 2em;
text-align: center;
border-image-width: auto;
}
#image {
border: groove;
max-width: 300px;
float: left;
}
#img-caption {
font-size: 300px;
}
.clear {
clear: both;
}
<div id="img-div">
<img id="image" alt="steve Irwin" src="https://www.abc.net.au/cm/rimage/6508936-3x2-large.jpg?v=2">
<caption id="img-caption">"We dont own planet earth, we belong to it. And we must share it with our wildlife"</caption>
<p class="clear">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor repellat amet illo hic doloribus dolore eius accusantium quisquam eaque repudiandae adipisci ipsam iure quaerat saepe, assumenda molestias maiores inventore rem?</p>
</div>
The html element to use here is the figure element - this allows for an image and related content to be shown and then a caption to be presented that is either the first or last child. All elements can be styled.
In your case - you want to have an image and text positioned horizontally and then the caption below it all. So wrap the image and desired text in a div - apply display: flex to that to get it to be aligned horizontally (no need for floats or clearning floats with flexbox);
Then the figcaption sits below and is as wide as the entire figure.
figure {
background-color: grey;
border: solid 1px black
}
#img-div {
display: flex;
padding: 8px
}
#image {
border: groove;
width: 200px;
}
#img-quote {
flex-grow: 1;
padding: 8px
}
figcaption {
background: white;
padding: 8px;
}
<figure>
<div id="img-div">
<img id="image" alt="steve Irwin" src="https://www.abc.net.au/cm/rimage/6508936-3x2-large.jpg?v=2">
<p id="img-quote">"We dont own planet earth, we belong to it. And we must share it with our wildlife"</p>
</div>
<figcaption>Lorem ipsum dolor sit amet consectetur adipisicing elit.</figcaption>
</figure>
This question already has answers here:
CSS margin terror; Margin adds space outside parent element [duplicate]
(7 answers)
Closed 2 years ago.
I have two div elements and I want to remove the space between them, which is filled with the background color at the moment. This is what it looks like. I want to remove the space between the green section and where the background image ends for the first div element. Here is the HTML for the page:
<body style="background-color: #c5ffff">
<div class="main-search hero-image">
Log Out
<div class="welcome-text">
<div class="title">Welcome to Ripple.</div>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aliquam commodi doloremque esse itaque iusto, labore laborum maxime odio, quidem quos, repellat rerum? Ab, asperiores aspernatur assumenda atque distinctio dolor dolore eveniet facilis, id illo ipsa ipsam minus nemo nobis porro quam quia quibusdam quis ratione rerum soluta suscipit temporibus vel vitae voluptate. Accusamus dignissimos ea esse expedita itaque mollitia nobis, numquam odio, quaerat qui vel voluptatibus?</div>
<button class="search_button" >Search for a location</button>
<button class="search_button">Search for a song</button>
</div>
</div>
<div class="main-left">
<div class="title">Collections Near Me</div>
<div>
</div>
</body>
And the CSS:
.main-left {
vertical-align: top;
margin-top: 0;
margin-left: 0;
position: relative;
background-color: #85dcba;
text-align: left;
width: 100%;
float: top;
left: 50%;
transform: translate(-50%);
}
.main-search {
vertical-align: top;
background-color: #d2fdff;
text-align: left;
margin: 0;
padding-top: 2em;
position: relative;
top: 0;
width: 100%;
left: 50%;
transform: translate(-50%);
}
.hero-image {
background-image: url("main_background.jpg");
background-size: cover;
background-repeat: no-repeat;
}
.title {
color: black;
font-family: Roboto, sans-serif;
font-size: 3em;
margin-top: 0.5em;
margin-left: 10px;
margin-bottom: 0.5em;
}
.content {
color: black;
font-family: Roboto, sans-serif;
font-size: 1em;
margin: 1em;
}
.welcome-text {
top: 5%;
left: 5%;
max-width: 35%;
}
There is a gap because div is block element, if you want to remove the gap between div use display: inline-block to remove it.
body > div { display: inline-block; }
This will display an element as an inline-level block container. Please refer to CSS Display
You could try setting the margin values of the elements manually. I see you've set the padding- Which refers to the internal distance of contents to edge, but not the margin- which refers to the distance between seperate elements.
Also, nice looking design so far!
Display flex has a nifty way of removing undesirable whitespace from the html
So place flex on the wrapper of these elements, in this case the body tag
css
body {
display: flex;
flex-direction: column;
}
Set margin-top of the .title to zero and for space between the .main-search and .title, give padding-bottom to .main-search as well. Below is how it will look like:
body{
background-color: #c5ffff;
}
.main-left{
vertical-align: top;
margin-top: 0;
margin-left: 0;
position: relative;
background-color: #85dcba;
text-align: left;
width: 100%;
float: top;
left: 50%;
transform: translate(-50%);
}
.main-search{
vertical-align: top;
background-color: #d2fdff;
text-align: left;
margin: 0;
padding: 2em 0;
position: relative;
top: 0;
width: 100%;
left: 50%;
transform: translate(-50%);
}
.hero-image{
background-image: url("https://picsum.photos/500/500");
background-size: cover;
background-repeat: no-repeat;
}
.title{
color: black;
font-family: Roboto, sans-serif;
font-size: 3em;
margin-top: 0;
margin-left: 10px;
margin-bottom: 0.5em;
}
.content{
color: black;
font-family: Roboto, sans-serif;
font-size: 1em;
margin: 1em;
}
.welcome-text{
top: 5%;
left: 5%;
max-width: 35%;
}
<div class="main-search hero-image">
Log Out
<div class="welcome-text">
<div class="title">Welcome to Ripple.</div>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aliquam commodi doloremque esse itaque iusto, labore laborum maxime odio, quidem quos, repellat rerum? Ab, asperiores aspernatur assumenda atque distinctio dolor dolore eveniet facilis, id illo ipsa ipsam minus nemo nobis porro quam quia quibusdam quis ratione rerum soluta suscipit temporibus vel vitae voluptate. Accusamus dignissimos ea esse expedita itaque mollitia nobis, numquam odio, quaerat qui vel voluptatibus?</div>
<button class="search_button" >Search for a location</button>
<button class="search_button">Search for a song</button>
</div>
</div>
<div class="main-left">
<div class="title">Collections Near Me</div>
<div>
remove margin-top:0.5em; on your title class.
.title {
color: black;
font-family: Roboto, sans-serif;
font-size: 3em;
margin-top: 0.5em; <-- REMOVE
margin-left: 10px;
margin-bottom: 0.5em;
When I scale my site down or view on mobile/tablet, there is all of this margin/whitespace on right side and it cuts off text content in #main section. Why is this happening and how can I make it all scale correctly? I have tried overflow hidden on various parts which didn't solve anything and I have tried zeroing out margins and messing with padding. I'm unsure how to make it scale correctly and get rid of that extra margin/space on the right. There isnt much yet, only header, nav and #main section.
Thank you for your help in advance
html:
<body>
<header id="main-header">
<div class="container">
<h1 class="display-4">.Richardson</h1>
</div>
</header>
<nav id="navbar">
<div class="container">
<ul class="my-nav">
<li>Home</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</nav>
<section id="main">
<div class="container">
<div class="col-md-8" id="welcome-text">
<h1 class="display-4">Welcome</h1>
<hr class="rule">
<p><cite>"Discipline is the bridge between goals and accomplishments" ~ Jim Rohn</cite></p>
<p>Hey, I'm <span style="font-size: 24px; color: #FFFC31"><strong>Name!</strong></span> Congratulations on joining me in my path to becoming a highly valued, self-taught <span style="font-size: 24px; color:#FFFC31"><strong>Front-End Web Developer</strong></span>. My journey began with <span style="font-size: 24px; color: #FFFC31"><strong>Free Code Camp</strong></span> and the <span style="font-size: 24px; color: #FFFC31"><strong>Code Academy,</strong></span> as well as many youtube tutorials. I've learned <span style="font-size: 24px; color: #FFFC31"><strong>HTML, CSS and Javascript</strong></span> basics thus far. I aspire to put my coding skills to use by adding value and making a difference. Continually challenging myself and improving my craft. <span style="font-size: 24px; color: #FFFC31"><strong>I'm passionate</strong></span> about Nature, animals, traveling, serving the community, maintaining a healthy mind, body and spirit, and enjoying great food and craft beer with great people.</p>
</div>
</div>
</section>
<section>
<h1>Portfolio</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint recusandae, labore, cumque voluptas consequatur excepturi aut qui delectus error harum atque fuga voluptate voluptatibus rem, perferendis laboriosam, pariatur quae hic?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint recusandae, labore, cumque voluptas consequatur excepturi aut qui delectus error harum atque fuga voluptate voluptatibus rem, perferendis laboriosam, pariatur quae hic?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint recusandae, labore, cumque voluptas consequatur excepturi aut qui delectus error harum atque fuga voluptate voluptatibus rem, perferendis laboriosam, pariatur quae hic?</p>
</section>
css:
* {
margin: 0;
padding: 0;
}
.container {
width: 80%;
margin:auto;
overflow: hidden;
}
img {
min-width: 100%;
margin: 0;
}
h1,h2,h3,h4,h5,h6 {
font-family: "Helvetica", "geneva", sans-serif;
}
p {
font-family: sans-serif;
font-size: 1.3rem;
line-height: 2.5rem;
}
a {
color: #4e0250;
}
a:hover {
text-decoration: none;
background-color: gray;
padding: 10px;
color: #D3D3D3;
border-radius: 20px;
}
#main-header {
background: #4E0250;
color: silver;
text-align: center;
position: sticky;
top: 0;
right: 0;
z-index: 1;
}
#navbar {
text-align: center;
background-color: #D3D3D3;
color: #4e0250;
font-size: 1.4rem;
z-index: 1;
}
#navbar ul {
padding-left: 65px;
}
#navbar ul li {
text-align: center;
list-style: none;
padding-right: 40px;
display: inline;
}
#navbar {
position: fixed;
width: 100%;
}
#navbar .my-nav {
margin: 15px;
}
#main {
padding-top: 5rem;
background: url('../img/headon3.jpg') center center no-repeat;
background-size: cover;
min-height: 757px;
overflow: hidden;
}
#main .container {
margin-top: 55px;
margin-left: 150px;
}
#main #welcome-text {
background-color: rgba(92, 92, 92, 0.9);
color: #D3D3D3;
padding: 0 20px;
border-radius: 10%;
padding-bottom: 5px;
min-width: 40%;
}
#main h1 {
padding-top: 20px;
}
.rule {
border-top: 1px solid floralwhite;
padding-bottom: 10px;
}
Your main issue is you're not letting bootstrap take care of margins padding with rows and columns properly. In order to fix this immediate issue you have two problems:
First,
http://getbootstrap.com/docs/3.3/css/#grid-media-queries
#main .container {
margin-top: 55px;
margin-left: 150px;
}
Is getting in the way. Let the .container class take care of itself. It uses media queries to accurately define the margin-left at different widths. What you've done here is hard code it to always be 150px, and on an iphone that is most of the screen.
Second,
http://getbootstrap.com/docs/3.3/css/#grid
Container > rows > columns.
You are missing a row class here:
<div class="container">
<div class="row">
<div class="col-md-8" id="welcome-text">
I am trying to style a blockquote and child cite elements to replicate the appearance of a fieldset and legend element, where there is a border around the fieldset, and the legend label is inset in the top of the border -- if you've seen a fieldset you'll know what I mean.
I have a solution in which I give the cite a background-color, but this will only work when placed on a similar colored background. I need a solution that will work on all backgrounds, bg images, etc. in IE8+
Assume the following markup (cannot be changed from this. no additional elements allowed):
<blockquote class="quote">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas rem, animi
facere illum deserunt nam ipsa, et sapiente quisquam sed repudiandae aliquam
delectus. Reiciendis repellat illo, et natus earum odit!
<cite class="attribution">Mr. Jefferson</cite>
</blockquote>
CSS I have so far:
.quote {
border: 4px solid black;
padding: 1rem;
position: relative;
}
.attribution {
position: absolute;
top: 0;
left: 1rem;
margin-top: -0.65rem;
padding: 0 1rem;
background: white; /* this works, but breaks if the background isn't white. I need a solution that works for all possible page bg colors */
}
This is what I have so far: http://jsbin.com/viqegerivi/edit?html,css,output
I have to admit, I enjoyed this one. Used absolutely positioned :befores and :afters, didn't touch your HTML markup but, as expected, went wild on CSS. Cheers!
fieldset {
border: 4px solid black;
padding: 1rem 2rem;
}
legend {
font-style: italic;
padding: 0 1rem;
}
.quote {
border-bottom: 4px solid black;
padding: 2.6rem calc(2rem + 6px) 1rem;
position: relative;
overflow: hidden;
margin: 0;
}
.quote:before,
.quote:after {
content: ' ';
position: absolute;
width: 4px;
height: 100%;
background-color: black;
bottom: 0;
top: 1rem;
}
.quote:after {
left: 0;
}
.quote:before {
right: 0;
}
.attribution {
position: absolute;
top: 0;
left: 0;
margin-left: 2.4rem;
margin-top: .35rem;
padding: 0 1rem;
background: transparent;
}
.attribution:before,
.attribution:after {
position: absolute;
content: ' ';
bottom: calc(50% - 1px);
height: 4px;
background-color: black;
width: 100vw;
}
.attribution:before {
right: 100%;
}
.attribution:after {
left: 100%;
}
<p>Desired Look:</p>
<fieldset>
<legend>Mr. Jefferson</legend>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas rem, animi facere illum deserunt nam ipsa, et sapiente quisquam sed repudiandae aliquam delectus. Reiciendis repellat illo, et natus earum odit!
</fieldset>
<p>What I currently have:</p>
<blockquote class="quote">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas rem, animi facere illum deserunt nam ipsa, et sapiente quisquam sed repudiandae aliquam delectus. Reiciendis repellat illo, et natus earum odit!
<cite class="attribution">Mr. Jefferson</cite>
</blockquote>
EDIT: As Mr Lister spotted, there is a differece between this and the fieldbox title model: the background of the blockquote runs above (what looks like) top border.
I personally don't consider it a significant problem as
it can be easily overcome by adding an extra wrapper for background-clipping, so it's achievable, but requires a slightly more complex markup.
I don't think many will use this model with a background color that is different from that of the page. My personal oppinion is that this model looks best when used with transparent background (that's why we interrupt the line, right?).
Also, the intial challenge I set for myself was to achieve the effect without touching the markup.
I tried this out, works well:
html {background:blue}
fieldset {
border: 4px solid black;
padding: 1rem 2rem;
}
legend {
font-style: italic;
padding: 0 1rem;
}
.quote {
border: 4px solid black;
padding: 1rem;
width:auto;
margin:0;
position: relative;
}
.attribution {
position: absolute;
top: 0;
left: 1rem;
margin-top: -0.65rem;
padding: 0 1rem;
background:blue
}