By design, I have a site container. I need to create one block so that there are no container restrictions on the right, but they are on the left.
On the design below, the image should be pressed to the right edge of the page, and the container limits should be on the left.
How can I make such a block?
My HTML:
.container {
width: 100%;
max-width: 1260px;
padding-right: 30px;
padding-left: 30px;
margin-right: auto;
margin-left: auto;
}
.main-screen {
width: 100%;
background: linear-gradient(180deg, #dedde2 0%, #e3e6ed 44.29%, #dde6ef 100%);
}
.main-screen-content {
display: flex;
justify-content: space-between;
padding-top: 118px;
}
<section class="main-screen">
<div class="container">
<div class="main-screen-content">
<div class="main-screen-title">
<h1>
Replace awkward lab visits with at-home <span class="blue-text-style">STI testing</span> and
<span class="orange-text-style">treatment</span>.
</h1>
<div class="site-button main-screen-button">
<button class="text-button">
Get started
</button>
</div>
</div>
<div class="main-screen-img">
<img src="./img/main-screen-img.png" alt="">
</div>
</div>
</div>
</section>
I prefer to add the blue bg with the image as a single image and add it as a background. But I could see in the comment section this method is not suitable for your need.
Alternative way,
How about adding blue color as a background to the main section And positioning the person image using position: absolute; right: 0; bottom: 0; to the section.
Related
I have spent some time trying to work this out but with no luck.
I’m trying to align the text elements along side the image like this picture below. I was able to do this with absolute positioning.
absolute positioning
However I also want my page to be responsive so I decided to use a flex box container to put the text elements and the image elements side by side and get the equal distancing when I resized the window. However when I increase the size of my image the content area just ignore its padding margins and parent container. It creates a scroll on the window width and a plain white background.
responsive image
Would love to hear what people think I’m doing wrong. Would also like to hear any other ways that people would go about creating the desired effect I’m looking for.
This is my code below 👇
<body>
<header>
<div class="container">
<div class="justify">
<div class="inline">
<h1>App name</h1>
<h2>Download on the app store!</h2>
<a href="https://www.apple.com/uk/app-store/" target="_blank"><img class="downloadimg" src="appstore.png" alt="download link">
</a>
</div>
<div class="inline">
<img class="werewolf" src="werewolf.png" alt="app logo">
</div>
</div>
</div>
</header>
</body>
</html>
CSS code:
body{
margin: 0px;
padding: 0px;
font-family: 'Bebas Neue', cursive;
}
header{
background-color: aqua;
font-size: 40px;
padding-left: 10%;
padding-top: 10%;
padding-bottom:10%;
border-style: dashed;
border-color: rgb(255, 0, 0);
}
.justify{
display: flex;
align-items: center;
justify-content: space-between;
}
.downloadimg{
width: 50%;
}
.inline{
border-style: dashed;
border-color: rgb(255, 0, 0);
}
.werewolf{
width: 140%;
}
Try adding this to your image css rules:
image.werewolf {
display: block; /* or inline-block */
max-width: 100%;
height: auto; /* to maintain aspect ratio */
}
I'm trying to add two sidebars to both edges of the middle element. The left one works without an issue, however, the right one won't. Instead, it appears below its parent element (as seen in the picture) unless I position it as absolute, then however, it goes over the navbar.
Relevant css:
/* The parent element */
main {
margin: 0;
position: relative;
left: 22%;
right: 22%;
width: 56%;
height: 50vh;
background-color: #c5c5c5;
}
/* The correctly shown sidebar */
.sidenav {
margin: 0;
height: 100%;
width: 160px;
top: 7%;
left: 0;
background-color: #111;
overflow-x: hidden;
padding-top: 7%;
}
/* The wrongly shown sidebar */
.bar-right{
float: right;
margin: 0;
width: 200px;
height: 100%;
background-color: #111;
overflow-x: hidden;
padding-top: 7%;
}
HTML:
<main>
<div class="topbar">
[top bar stuff]
</div>
<div class="sidenav">
[usernamestuff]
Link1
Link2
Link3
</div>
<div class="bar-right">
<p>text for test</p>
</div>
</main>
Both sidebars are effectively identical so I don't understand why they behave so differently. How do I get them both to their appropriate edges of the main element?
I would recommend you to use Bootstrap. This will help you to achieve what you looking for so easy, by this code:
<div class="container">
<div class="row">
<div class="col-sm-3">
// First sidebar
</div>
<div class="col-offset-6 col-sm-3">
// Second sidebar
</div>
</div>
</div>
Im creating an application which includes the home screen. This will have a biography of the client. Im trying to create a header, which will include the title and a round display image. From the code i used 3 divs, which will hold the wrapper, title and picture. I done the display:flex which will have them in 1 line, and flex:1 to move the image to the right. When doing the radius 50% its squishing the photo . Can you help me out?
Thanks. Heres the code.
.headerOfBio {
display: flex
}
.displayPic {
flex: 1 background-image: url("../images/displayPicture.jpg") border-radius: 50%
}
<div class="quote titleBio">
<div class="headerOfBio">
<h3>
MEET THE <span class="diffColor">FOUNDER</span>
</h3>
<div class="displayPic">
</div>
</div>
</div>
After adding height and width it becomes like this:
Instead of adding a background image to a div, adding a img tag will give a better result.
.headerOfBio {
display: flex;
}
.displayPic img {
flex: 1;
width:50%;
border-radius:100%
}
<div class="quote titleBio">
<div class="headerOfBio">
<h3>
MEET THE <span class="diffColor">FOUNDER</span>
</h3>
<div class="displayPic">
<img src="https://placeimg.com/250/250/nature" />
</div>
</div>
</div>
Mention width, height for the div holding the image and change border-radius to half of the width/height.
.displayPic{
flex: 1
background-image: url("../images/displayPicture.jpg")
width: 300px;
height: 300px;
border-radius: 150px;
}
Why have you used flex:1?
Try this...
.headerOfBio {
display: flex;
align-items: center;
justify-content: space-between;
}
.displayPic {
background: url("https://aeutas.org.au/wp-content/uploads/2014/12/people-icon.png") no-repeat;
border-radius: 50%;
height: 100px;
width: 100px;
border-radius : 50%;
}
https://jsfiddle.net/cd3czf30/1/
I have a question that I suspect has a simple answer. I'm using Bootstrap to make a personal webpage, and I'm attempting to divide the background into 3 equal columns (which will all have different images).
I know this could be done with class="col-xs-4" but the issue is that I'd like to keep what's over the background as-is (it's a "col-lg-12" that is responsive).
Is there a way to split my background (again, going to upload images into the 3 panels, and the panels will essentially mask the full images), and still have all the "col-lg-12" heading stuff on top?
Thanks for any help you can give, my current html code is such:
<header>
<div class="container">
<div class="row">
<div class="col-lg-12">
<img class="img-responsive" src="img/picture.png" alt="">
<div class="intro-text">
<span class="intohead">Filler Text</span>
<span class="subhead">More detailed, longer filler text for below</span>
</div>
</div>
</div>
</div>
</header>
Basically, there are three columns with background images, and then a cover div that is placed on top of the three columns. You can place anything you like in the cover div. Here's an article about CSS positioning.
.wrap {
width: 100%;
height: 300px;
position:relative;
}
.section {
float: left;
height: 300px;
width: 33.33333%;
}
.one {
background: url(http://placehold.it/200x300/ccc/666/&text=img+1) no-repeat;
background-size: 100%;
}
.two {
background: url(http://placehold.it/200x300/666/ccc/&text=img+2) no-repeat;
background-size: 100%;
}
.three {
background: url(http://placehold.it/200x300/ccc/666/&text=img+3) no-repeat;
background-size: 100%;
}
.cover {
width: 100%;
height: 100%;
/*A background isn't needed, it's just to show that the element is there*/
background: salmon;
opacity: .5;
/* this stuff is key */
position: absolute;
top: 0;
left: 0;
/* place cover on top */
z-index: 10;
}
<div class="wrap">
<div class="cover">Put all you content in here</div>
<div class="section one"></div>
<div class="section two"></div>
<div class="section three"></div>
</div>
Run the code snippet and tell me what happens. Is this what you're looking for?
I have the following html:
<div class="container">
<a href="url here">
<div class="logo">
<h1>Name</h1>
</div>
</a>
</div>
and css:
.container {
width: 20%;
}
.logo {
background: url(images/ui-sprite.svg) no-repeat 0 0;
text-indent: -9999px;
height: 30px;
width: 150px;
margin: 25px 0;
}
The issue I have is with linking the logo (background image). At the moment the link area you can hover over is the full width of the container div, despite the fact that the logo class has a defined width. Any ideas here on best practice with linking of background images?
Thanks
Found this to be ultimately useful, and less markup too!
http://ran.ge/2012/04/03/css-trick-turning-a-background-image-into-a-clickable-link-take-2/