How to display block by 100% of container-fluid? [closed] - html

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 3 years ago.
Improve this question
There is block:
<div class="container-fluid">
<div class="body_wrapper">
</div>
</div>
How to show block .body_wrapper by 100% of content with margin from body borders?

Add some content and use width: 100% in body_wrapper css
.body_wrapper {
width: 100%;
background-color: blue;
}
<div class="container-fluid">
<div class="body_wrapper">
Content
</div>
</div>

Related

how to make a frosted glass effect? [closed]

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 10 months ago.
Improve this question
I am making a site and want a fosted glass effect, any help is welcome, I have tried blur and other things but am struggligng
the html to aply it to is
<div class="frostedhere">
<p> this is in the box</p>
</div>
You could try using background-image:and adding an image of some frosted ice. If you want to add it overtop, add the image then make a z-index of 2, and change the opacity to maybe 0.5.
.frostedhere{
background-image(url"image location or url here");
z-index:2;
opacity: 0.5;
}
.frostedhere{
background-image:url("https://previews.123rf.com/images/miramiska/miramiska1606/miramiska160600143/58708185-gel-de-glace-d-hiver-fond-gel%C3%A9-texture-de-verre-de-fen%C3%AAtre-d%C3%A9poli-fond-froid-de-gla%C3%A7ons-frais-sc%C3%A8ne-.jpg");
z-index:2;
opacity: 0.4;
padding: 50px;
}
<div class = "frostedhere">
<p> placeholder </p>
</div>
here is a codepen to it
https://codepen.io/Person2356/pen/ZEvZMKE?editors=1100
the divs with the container and card are what will make it work
html
<body>
<div class="container">
<div class="card">
<p><b>hello people </b></p>
</div>
</div>

How to style a logo as a link? [closed]

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 1 year ago.
Improve this question
How can I style this into a clickable image link ?
<h1 class="logo">
<a class="logo__link" href="main.html">
<img class="logo__img" src="Image/Logo_1.PNG" alt="logo">
</a>
</h1>
Using the same code you have provided, I added a few css to make the a cover the image, as well as setting a width to the img so that it will be contained in the a.
img {
max-width: 200px;
}
.logo__link {
display: inline-block;
}
<h1 class="logo">
<a class="logo__link" href="main.html">
<img class="logo__img" src="https://www.logo.bot/blog/wp-content/uploads/2021/04/Untitled-3-26-1.png" alt="logo">
</a>
</h1>

How can I scroll multiple div on one fixed div? [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
This person has a portfolio: https://eliasakentour.com/about
If you look at it you will notice that his first page gets scrolled on top by the second one.. How can I achieve that?
<div style="
background-image: url('https://www.gettyimages.pt/gi-resources/images/Homepage/Hero/PT/PT_hero_42_153645159.jpg');
background-size: 100%;
height: 100vh;
overflow-y: scroll;
padding: 0px;
margin: 0px;
">
<div style="height: 100vh;background-color: transparent">
</div>
<div style="height: 100vh;background-color: green"></div>
<div style="height: 100vh;background-color: transparent"></div>
</div>

How to remove white space between nested divs [closed]

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 7 years ago.
Improve this question
How can you remove white space between divs nested within each other. For example
<div>
<div>
</div>
</div>
Could you specify which space are you referring to with reference to the below link
http://jsfiddle.net/meghanagpal/4khuL01a/1/
HTML
<div class="default"></div>
<div class="default"></div>
CSS
.default{
height:100px;
width:100px;
border:1px solid red;
}
Add this CSS to your code
div{
margin: 0;
}
or add inline CSS to your div like this
<div style="margin:0"></div>

In CSS and HTML Footer Page [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I am trying to create a footer page - but I am abit stuck...! I want to have in-line text as shown on this link:
http://postimg.org/image/6cyb2y2mx/
The copyright on the left and the links on the right. Can someone guide me how to achieve this? My working progress is here: jsfiddle.net/5GRpH/5/
Thank you.
You can use float:left; and float:right; after the floated the elements, you should do a clear:both to make sure the footer height is reset.
HTML
<div>
<div class="left">copy 2013</div>
<div class="right">sitemap | contact</div>
<div class="clear"></div>
</div>
CSS
.right{
float:right;
}
.left{
float:left;
}
.clear{
clear:both;
}
See here on jsfiddle: http://jsfiddle.net/5GRpH/6/