I'm using the following code to align a caption to the right bottom of an image. The code works well.
I was wondering if it was possible to rewrite it without specifying the min-width of the picture container (.picture class). With no width the caption shifts down when resizing the browser window:
<div class="picture">
<img src="image.jpg">
<div class='captioning'>
<div class='title'>text</div>
<div class='caption'>text</div>
</div>
</div>
.picture {
position: relative;
overflow: hidden;
min-width: 1200px;
}
.picture img {
float: left;
}
.picture .captioning {
float: left;
width: 150px;
margin: 0 0 0 15px;
}
.picture .captioning .caption {
position: absolute;
bottom: 0;
}
.picture .captioning .title {
position: absolute;
bottom: 0;
}
Any ideas?
Thanks in advance
I found the solution. I used display: inline-block on both the image and the caption, and white-space: nowrap on the container:
.picture {
position: relative;
overflow: hidden;
white-space: nowrap;
}
.picture img {
display: inline-block;
}
.picture .captioning {
display: inline-block;
width: 150px;
margin: 0 0 0 15px;
white-space: normal;
}
.picture .captioning .caption {
position: absolute;
bottom: 0;
}
.picture .captioning .title {
position: absolute;
bottom: 0;
}
Related
I want to align the bottom of my mat icon and that of the img next to it. I've tried multiple things, and this is what it currently looks like:
Here's my HTML:
<div class="container">
<p class="triage"><mat-icon>assignment_ind</mat-icon></p>
<p class="O2"><img src="../../assets/med_O2.png"></p>
</div>
CSS:
.O2, .triage{
display: inline-block;
vertical-align: middle;
}
.container img {
width: 50px;
height: 50px;
}
.container mat-icon{
font-size: 60px;
width: 60px;
}
Use line-height:
.container
{
line-height: 60px; //or what ever height your container is
}
Can you push mat-icon down with a little bit of margin or padding?
.container mat-icon{
font-size: 60px;
width: 60px;
margin-top: 5px;
}
What about something like this?
<style>
.container {
position: relative;
width: 65px;
height: 100px;
}
p.triage {
background: blue;
width: 30px;
height: 40px;
position: absolute;
bottom: 0;
right: 0;
}
p.O2 {
width: 30px;
height: 20px;
background: red;
position: absolute;
bottom: 0;
left: 0;
}
</style>
<div class="container">
<p class="triage"></p>
<p class="O2"></p>
</div>
I am a novice in CSS and I have not yet solved what I am trying to achieve.
I want the items of a horizontal menu to be centered regardless of the monitor resolution. Here is my code:
The HTML semantic:
<body>
<div class="inicio_m"></div>
<div id="menu">
<div id="cab_menu" class="clearfix">
<div class="conteudo_menu clearfix">
Item 1
Item 2
Item 3
Item 4
</div>
</div>
</div>
</body>
This is the CSS format:
html, body {
height: 100%;
width: 100%;
}
#menu {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 100;
background: #000000;
}
#cab_menu {
width: 100%;
position: relative;
}
#cab_menu a {
padding: 20px 10px;
float: left;
color: #FFFF40;
}
.clearfix { display: block; }
.conteudo_menu {
width: 100%;
margin: 0 auto;
}
I posted on Fiddle for a more convenient check:
http://jsfiddle.net/nQXd7/
Thanks in advance
Remove the floats and use display:inline-block instead. Then add text-align:center to the wrapping element.
JSFiddle
CSS
html, body {
height: 100%;
width: 100%;
}
#menu {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 100;
background: #000000;
}
#cab_menu {
width: 100%;
position: relative;
}
#cab_menu a {
font-size: 12px;
font-weight: bold;
padding: 20px 10px;
display: inline-block;
color: #FFFF40;
}
.clearfix {
display: block;
}
.conteudo_menu {
width: 100%;
margin: 0 auto;
text-align: center;
}
Please remove the unwanted codes in css, try this one in order to make the menus just simply centered.
html, body {
height: 100%;
width: 100%;
}
#menu {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 100;
background: #000000;
}
.conteudo_menu {
text-align: center;
}
#cab_menu a {
padding: 20px 10px;
color: #FFFF40;
display: inline-block;
}
My problem is that I wanted to have split page by two divs side by side (50% width). Inside of them I wanted to place another divs and make them aligned vertically and horizontally at the same time.
I think that it is possible to make it without JS, but I'm not able to do that.
Can anybody make my two circles placed in the center (V,H) of their parent DIV, which are 50% of width and 100% of height so that when I will resize my window the circles will always be in center (and side by side as is now)?
Here is my code:
<div id="container">
<div class="left">
<div class="kolo1">
sometext1
</div>
</div>
<div class="right">
<div class="kolo2">
sometext 2
</div>
</div>
</div>
And a JSFiddle for that: http://jsfiddle.net/m5LCx/
Thanks in advance in solving my quest :)
It's actually quite simple, all you need to do is to simulate a table-like behaviour:
HTML markup:
<div id="container">
<div>
<div class="half left">
<div class="circle">hello</div>
</div>
<div class="half right">
<div class="circle">world</div>
</div>
</div>
</div>
CSS styles:
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#container {
display: table;
width: 100%;
height: 100%;
}
#container > div {
display: table-row;
}
.half {
display: table-cell;
width: 50%;
text-align: center;
vertical-align: middle;
}
.half.left {
background: red;
}
.half.right {
background: blue;
}
.circle {
display: inline-block;
padding: 50px;
border-radius: 50%;
}
.half.left .circle {
background: blue;
}
.half.right .circle {
background: red;
}
Final result http://jsfiddle.net/m5LCx/11/:
Working here http://jsfiddle.net/3KmbV/
add position: relative in .left and .right class and than add margin: auto; position: absolute; top: 0; left: 0; right: 0; bottom: 0; in .kolo1 and .kolo2 class. and remove top position from .left class
try it
body {
background-color: #006666;
margin: 0 auto;
height: 100%;
width: 100%;
font-size: 62.5%;
}
#container {
width: 100%;
min-height: 100%;
height: 100%;
position: absolute;
}
.left {
width: 50%;
min-height: 100%;
float: left;
top: 0;
background-color: #660066;
position: relative;
}
.right {
width: 50%;
min-height: 100%;
float: right;
min-height: 100%;
background-color: #003366;
position: relative;
}
.kolo1 {
background-color: #0f0;
width: 10em;
height: 10em;
border-radius: 5em;
line-height: 10em;
text-align: center;
margin: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.kolo2 {
background-color: #00f;
width: 10em;
height: 10em;
border-radius: 5em;
line-height: 10em;
text-align: center;
margin: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
you can give postion: relative to .left and .right.
and give below CSS for to .kolo1 and .kolo2
margin: -5em 0 0 -5em;
position: absolute;
left: 50%;
top: 50%;
Updated demo
Another fiddle. This one uses absolute positioning with negative margins to ensure the circles are always in the centre. CSS looks like this
.kolo1 {
position: absolute;
top: 50%;
left: 50%;
margin-left: -5em; /* this must be half of the width */
margin-top: -5em; /* this must be half of the height */
}
As #Tushar points out, you need to set the position of the parent element to relative also.
Working Fiddle
.kolo1 {
background-color: #0f0;
width: 10em;
height: 10em;
border-radius: 5em;
line-height: 10em;
text-align: center;
margin: 50% auto 0 auto;
}
.kolo2 {
background-color: #00f;
width: 10em;
height: 10em;
border-radius: 5em;
line-height: 10em;
text-align: center;
margin: 50% auto 0 auto;
}
Try adding padding-top:50% for parent divs (having class left and right)
I have been searching the web for a while now for an answer to my question. I would like to extend a div background-color beyond the div (and the container div as well) so it reaches the width of the browser. Like so http://vinnusal.is/
The problem with the example above is I'm using a padding/margin fix which creates an annoying scroll to the right. I have tried overflow without any luck.
I know this could be done with a container div that is 100% and nesting divs that are smaller. However I would like to use another way if possible, because this is my first shot at a fluid site with all complications that follow.
Thanks in advance,
Helgi
Here is the HTML markup:
<body>
<div class="gridContainer clearfix"> <!-- Container -->
<div class="gridContainer clearfix header" id="header"> <!--Header begins-->
<img src="pics/hvitt.png" alt="VFI Logo" name="logo" id="logo">
<!-- Menu Horizontal -->
... irrelevant markup for menu...
</div>
<!-- Header ends -->
<div class="gridContainer clearfix submenu" id="submenu"> <!-- Submenu begins -->
<h1><!-- InstanceBeginEditable name="title" -->Articles<!-- InstanceEndEditable --></h1>
And the CSS:
/* Mobile Layout: 480px and below. */
.gridContainer {
margin-left: auto;
margin-right: auto;
width: 88.626%;
padding-left: 1.1869%;
padding-right: 1.1869%;
}
#LayoutDiv1 {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#header {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#submenu {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#article {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#footer {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#leftColumn {
clear: none;
float: left;
margin-left: 2.6785%;
width: 100%;
display: block;
}
#rightColumn {
clear: none;
float: left;
margin-left: 2.6785%;
width: 100%;
display: block;
}
#header2 {
clear: none;
float: left;
margin-left: 2.6785%;
width: 100%;
display: block;
}
/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */
#media only screen and (min-width: 481px) {
.gridContainer {
width: 91.4836%;
padding-left: 0.7581%;
padding-right: 0.7581%;
}
#LayoutDiv1 {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#header {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#submenu {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#article {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#footer {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#leftColumn {
clear: none;
float: left;
margin-left: 1.6574%;
width: 100%;
display: block;
}
#rightColumn {
clear: none;
float: left;
margin-left: 1.6574%;
width: 100%;
display: block;
}
#header2 {
clear: none;
float: left;
margin-left: 1.6574%;
width: 100%;
display: block;
}
}
/* Desktop Layout: 769px to a max of 1232px. Inherits styles from: Mobile Layout and Tablet Layout. */
#media only screen and (min-width: 769px) {
.gridContainer {
width: 78.9565%;
max-width: 1232px;
padding-left: 0.5217%;
padding-right: 0.5217%;
margin: auto;
}
#LayoutDiv1 {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#header {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#submenu {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#article {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#footer {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#leftColumn {
clear: none;
float: left;
margin-left: 1.3215%;
width: 100%;
display: block;
}
#rightColumn {
clear: none;
float: left;
margin-left: 1.3215%;
width: 100%;
display: block;
}
}
You can use the :before pseudo element with absolute positioning and negative z-index to extend the background color of a contained div the entire way to the edge of the page.
#container {
width: 100px;
margin: 0 auto;
background-color: #FFFFCC;
}
.stripe {
background-color:#CCFFFF;
height: 100px;
position: relative;
}
.stripe:before {
content:"";
background-color:#CCFFFF;
position: absolute;
height: 100%;
width: 4000px;
left: -2000px;
z-index: -1;
}
<div id="container">
<div>one</div>
<div class="stripe">two</div>
<div>three</div>
</div>
The accepted answer seems to rely on a fixed height, which I find rare in these days of responsive sites, so building on top of the answer given by Stephen Ostermiller (thanks!) The following code worked for me and surrounds objects of a dynamic height:
.container{
background-color:#000;
padding-bottom:30px;
}
.stripe {
background-color:#000;
position: relative;
display: grid;
}
.stripe:before {
content:"";
background-color:#000;
position: absolute;
height: 100%;
width: 200vw;
left: -100vw;
z-index: -1;
}
Kevin Powell made a Youtube Video about how to do this
https://www.youtube.com/shorts/81pnuZFarRw
All you have to do is add a class to the element and add a couple of lines of CSS! You're basically making a color the whole background and then clipping it based on the element.
CSS
.full-bleed {
box-shadow: 0 0 0 100vmax red;
clip-path: inset(0 -100vmax);
}
HTML
<div class="full-bleed"></div>
Boom, you're done!
Both solutions will cause an overflow.
try this:
.container{
background-color:#000;
padding-bottom:30px;
}
.stripe {
position: relative;
display: grid;
}
.stripe:before {
content:"";
background-color:#000;
position: absolute;
top:0;
right:0;
bottom:0;
left:0;
width: 100vw;
margin-left: -50%;
transform: translateX(-50%);
z-index: -1;
}
I want to vertical center a text inside a responsive div but I really don't find the way to do it without new CSS3 tricks..
Here a fiddle : http://jsfiddle.net/M8rwn/
.iosSlider {
position: relative;
overflow: hidden;
width: 100%;
height: 100%;
}
/* slider */
.iosSlider .Slider {
width: 100%;
height: 100%;
}
/* slide */
.iosSlider .Slider .Slide {
float: left;
width: 100%;
}
.iosSlider .Slider .Slide img{
width: 100%;
height: auto;
}
.slider-prevContainer {
position: absolute;
top: 0;
left: 10px;
width: 50px;
height: 50%;
color: #595e62;
text-align: center;
}
.slider-nextContainer {
position: absolute;
top: 0;
right: 0;
width: 50px;
height: 100%;
opacity: 1;
color: #595e62;
background: blue;
}
.slider-next {
position:absolute;
height: 50%;
width: 100%;
top: 25%;
text-align: center;
vertical-align: middle;
background: red;
box-sizing: border-box;
font-size: 50px;
}
#single-slider {
float: left;
width: 500px;
height: 500px;
min-width: 0;
margin: 0;
border: none;
background: #000;
}
Okay, I think I have a solution.
Adjusted HTML:
<div class="slider-next">
<div id='slider-next-inner'>
>
</div>
</div>
Added CSS:
#slider-next-inner{
position:relative;
top:50%;
margin-top:-30px;
/* Margin-top is 1/2 the elements height (currently it is 59px) */
}
Link: http://jsfiddle.net/M8rwn/18/