I have this design and i can not figure out how to make the top left curve and also it being that I can fit a nav bar on the left and the top as well
Please see
I have tried this but i dont think that this is a good solutuon
<Card style={{ overflowY: "auto", width: "100%", height: "calc(100vh - 60px - 20px - 100px)", borderRadius: "100px 0 0 0", // border radius on top left corner padding: "100px", }} > <Text>Hello, moiz has been here</Text> </Card>
use this code
<div style="background-color: #000; width: 600px; height:400px; padding: 20px; padding-left: 42px;">
<div style="background-color: #fff;
border-radius: 24px; padding:16px 24px;">
<div> your content here</div>
<div> your content here</div>
<div> your content here</div>
<div> your content here</div>
<div> your content here</div>
<div> your content here</div>
<div> your content here</div>
<div> your content here</div>
<div> your content here</div>
<div> your content here</div>
<div> your content here</div>
<div> your content here</div>
<div> your content here</div>
</div>
</div>
Related
I am trying to achieve the layout shown in the picture with CSS. I am currently using float:left; for both text sections with a width: 100%; but they keep moving below the fixed image on the left.
<div style="float:left;">
<div style="width: 100px; height: 200px;">
Some Image
</div>
<div style="float:left;">
<div style="float:left; width: 100%;">Some text</div>
<div style="float:left; width: 100%;">Some text</div>
</div>
</div>
This doesn’t need that much floating and/or explicit widths.
overflow:hidden can be used to make the element next to the floated image keep that reduced width, instead of being laid out under the whole image (which is the effect float normally has - the div itself would still go over the whole width, and only its content flows around the image.)
.container {
width: 250px;
outline: 1px dashed;
}
.container img {
float: left;
}
.container div {
overflow: hidden;
}
<div class="container">
<img src="https://via.placeholder.com/100x200">
<div>
<p>Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text </p>
<p>Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text </p>
</div>
</div>
Well this is more style issue and can be done by making second div to align/float right. Further you can use width on outer div too.
<div style="float:left; width: 40%">
<div style="width: 100px; height: 200px;">
Some Image
</div>
<div>
<div style="float:right; width: 60%">
<div style="float:left; width: 100%;">Some text</div>
<div style="float:left; width: 100%;">Some text</div>
</div>
<div style="float:left; width: 40%">
<div style="width: 100px;">
Some Image
</div>
<div>
<div style="float:right; width: 60%">
<div style="float:left;">Some text</div>
<div style="float:left; width: 100%;">Some text</div>
</div>
Problem is Height 200px is remove than check please
body{padding:20px;}
body div{margin:5px;}
.main{display:block; border:2px #333 solid; width:100%; overflow:hidden;}
.vert{ padding:1%; border:2px #333 solid; width:20%;
height:200px; float:left; }
.vert img{width:100%}
.hor{position:relative; left:0px; righ:0px; width:66%; float:left; }
.hor div{border:2px #333 solid; width:99%; margin-bottom:5px; padding:5%;}
<div class="main">
<div class="vert"><img src="https://cdn4.buysellads.net/uu/1/3386/1525189887-61450.png"></div>
<div class="hor">
<div>Some Text some text some text</div>
<div>Some Text some text some text</div>
<div>Some Text some text some text</div>
</div>
</div>
I'm building a Carousel-type component, but am having some difficulty getting it to work just right.
My basic approach is a div (wrapper) with lots of other divs (items) in it. I want to display 4 items on the carousel at any one time. The items have various content heights, but the heights of the items should be equal (to the largest required).
I can't work out the CSS combination I need to get this to work correctly.
With this setup (HTML + CSS at bottom of post), the width: 25%; on each item-container is ignored.
If I add a fixed with to .item, then the 25% kicks in, but the item width is unknown -- it depends on the browsers size. Setting it to 1000px means you lose content from the item. Setting it to ~210px works, but when you start shrinking your browser, you lose content. On a large browser, you have excessive spacing.
Curiously, if I add flex-wrap: wrap to the CSS, then the 25% width is applied correctly -- but I can't do that, because then it's not a carousel! Example
The scenario is simple:
An unknown amount of items in a div with overflow: auto, which are equal heights should be displayed, with 4 of the children divs on the screen at any one time.
My HTML is structured as follows:
<div id="container">
<div id="wrapper">
<div class="item-container">
<div class="item">
<p>
Carousel Item #1 with some quite long text.
</p>
</div>
</div>
<div class="item-container">
<div class="item">
<p>
Carousel Item #2.
</p>
</div>
</div>
<div class="item-container">
<div class="item">
<p>
Carousel Item #3.
</p>
</div>
</div>
...
</div>
</div>
My CSS:
#container {
width: 100%;
background: #0f0;
overflow: auto;
}
#wrapper {
display: flex;
}
.item-container {
border: 1px solid #f00;
width: 25%;
}
Note, this is my MCVE. On my real component, I have buttons for scrolling left and right, the content is significantly more complex and stuff like that.
All you need is to add flex: 0 0 auto to .item-container elements.
* {
box-sizing: border-box;
}
#container {
width: 100%;
background: #0f0;
overflow: auto;
}
#wrapper {
display: flex;
}
.item-container {
border: 1px solid #f00;
flex: 0 0 auto;
width: 25%;
}
<div id="container">
<div id="wrapper">
<div class="item-container">
<div class="item">
<p>
Carousel Item #1 with some quite long text.
</p>
</div>
</div>
<div class="item-container">
<div class="item">
<p>
Carousel Item #2.
</p>
</div>
</div>
<div class="item-container">
<div class="item">
<p>
Carousel Item #3.
</p>
</div>
</div>
<div class="item-container">
<div class="item">
<p>
Carousel Item #4.
</p>
</div>
</div>
<div class="item-container">
<div class="item">
<p>
Carousel Item #5.
</p>
</div>
</div>
<div class="item-container">
<div class="item">
<p>
Carousel Item #6.
</p>
</div>
</div>
<div class="item-container">
<div class="item">
<p>
Carousel Item #7.
</p>
</div>
</div>
</div>
</div>
i coded a 6 divs beside each other
how can i make one div only to expand to take full width of wrapped div on hover and the other 5 divs get on bottom to the fully expanded div
html:
<div class="row">
<div class="col-md-2" id="discuss_block">
div1.....
</div>
<div class="col-md-2" id="discuss_block">
div2.....
</div>
<div class="col-md-2" id="discuss_block">
div3.....
</div>
<div class="col-md-2" id="discuss_block">
div4.....
</div>
<div class="col-md-2" id="discuss_block">
div5.....
</div>
<div class="col-md-2" id="discuss_block">
div6.....
</div>
</div>
css:
#discuss_block{
background: #FFBC2F;
color: #FFF;
z-index: 30;
top: 0px;
}
#discuss_block:hover{
width:100%;
}
You can use float:left http://jsfiddle.net/sfnxkav5/1/
#discuss_block{
width:50px;
float:left;
background: #FFBC2F;
color: #FFF;
z-index: 30;
top: 0px;
}
Hello I'm new to html & css and I have a question. I'm using the following code to set some images with text above and under it as you can see here:
http://jsfiddle.net/thespacebean/xGqDE/
But now i'm trying to re-use that code in another box but the text isn't where it needs to be. here a use another type of box:
css:
#content{
margin: 30px 0;
background: white;
padding: 20px;
clear: both;
box-shadow: 0px 1px 1px #999;
}
html:
<div id="content">
<h2>Kleding</h2>
<div id="navbanner">
<div id="nav2">
<ul>
<li>Baby</li>
<li>Peuter</li>
<li>Kleuter</li>
</ul>
</div>
</div>
<div id="img">
<img src="../images/winkelwagen.jpg">
</div>
<h3>Baby</h3>
<div class="section">
Pika deken
<img src="../images/baby1.jpg" />
€20
</div>
<div class="section">
School outfit
<img src="../images/boy1.jpg" />
€140
</div>
<div class="section">
Bussines girl
<img src="../images/girl2.jpg" />
€250
</div>
<div class="section">
Summer
<img src="../images/girl1.jpg" />
€99.99
</div>
</div>
And thats why everything is floating left. Can someone get my images and the text under and above centerd without moving the navbar and Baby title? Thanks in advance !
the fiddle example has
text-align: center;
in the CSS put you don't appear to have this in your CSS so the text will be on the left;
This is probably a pretty basic question, but I have a banner with an image on the left and text on the right. Under the banner is just a block of color. When the page gets smaller, my expectation is that the bits in the banner would stack (maintaining the background color for both) and the block of color (class="blue-line") would fall beneath them.
Here is the mark-up:
<section>
<div class="row header">
<div class="col-sm-6">
<img src="../images/logo.png" height="100px" />
</div>
<div class="col-sm-6 title">
<h2>Some Title Text</h2>
</div>
</div>
<div class="row">
<div class="col-sm-12 blue-line"></div>
</div>
</section>
and the css
.header {
background-color: #F2EBCC;
border: 10px solid #F2EBCC;
height: 120px;
}
.row > .title {
text-align: right;
top: 45%;
}
Thanks in advance!
JSFiddle: http://jsfiddle.net/3n6Kd/
try this:
<section>
<div class="row header">
<div class="col-sm-6">
<img src="../images/logo.png" height="100px" />
</div>
<div class="col-sm-6 title">
<h2>Some Title Text</h2>
</div>
</div>
<div class="row">
<div class="col-sm-12 blue-line"></div>
</div>
and:
.header {
background-color: #F2EBCC;
height: 120px;
}
.title {
text-align: right;
display: block;
padding: 10px;
}
.blue-line {
margin-top:10px;
height: 15px;
background-color: blue;
}
the text go under the first column not the blue-line, but it seems to appear above the blue-line so try it in your computer because some time jsfiddle.net don't show code correctly.
hope it will help you.