I'm trying to make two boxes where to put a chart and I'd like them to have same width for the entire width of page and autoresizing when I resize the page:
<style>
#middle_row_contents li {
display: inline-block;
list-style-type: none;
padding-right: 2em;
*display: inline;
}
</style>
<div class="middle_row_box">
<ul id="middle_row_contents">
<li>
<div class="hours_rooms_used">
<div><h3>Meeting hours per room</h3><select id="years_rooms_used"></select></div>
<div class="tab_rooms_used"><canvas id="chart_rooms_used"></canvas></div>
</div>
</li>
<li>
<div class="hours_per_customer">
<div><h3>Meeting hours per customer</h3><select id="years_rooms_customer"></select></div>
<div class="tab_rooms_customer"><canvas id="chart_per_customer"></canvas></div>
</div>
</li>
</ul>
</div>
I tried to put width: 50%; on both and assing width: 100% on middle_row_box's div but it didn't worked...how I could do that? And if I put two elements like and a inside a , shouldn't they appear side by side since in my case looks like in a new row?
Cheers,
Luigi
You need to set width to LIs too. How they should know you want to resize them?
#middle_row_contents {margin: 0; padding: 0;}
#middle_row_contents li {
display: inline-block;
list-style-type: none;
padding-right: 2%; /* ems and % aren't compatible, use the same units */
*display: inline;
width: 47%; /* lower than 48% because of a white-space gap between inline-block elements. Use float to avoid this gap. */
background: red;
}
http://jsfiddle.net/x98g7c3k/
Try this javascript snippet
document.getElementById("hoursd_per_customers").style.width = (document.getElementById("hours_rooms_used").clientWidth - 10) + "px";
Hope it will work.
For more details, Click here...
Related
I need to centre a div. This div is the width of its 2 containing 'rows'. The width of these 'rows' is defined by their content. The content has both left and right aligned elements. I also need the content which is less tall to be vertically centred.
So far Ive done all of this. I also need a background colour on the rows and a space between them. Ive done the space with div.spacer but im wondering if its possible to achieve the same thing without an empty div to keep my markup cleaner?
Im struggling as display table-row and table-cell don't allow for margin.
I also tried using pseudo content to absolutely position a white block over the top to make it look like there was a space between the rows, but relative display doesnt apply well to an element with display table-row cross browser.
I tried using the border-spacing css property but it adds margin both above and below rows, and I just need the margin below.
Below is my markup. The image shows exactly what I need to achieve, so can I do the same thing without div.spacer?
http://codepen.io/anon/pen/ZWMPgB
<div class="cont">
<div class="row">
<h2>Heading</h2>
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</div>
<div class="spacer"></div>
<div class="row">
<h2>Longer Heading</h2>
<ul>
<li>Four</li>
<li>Five</li>
<li>Six</li>
</ul>
</div>
</div>
body {
padding-top: 10px;
}
* {
margin: 0;
padding: 0;
}
.cont {
display: table;
margin: auto;
}
.row {
display: table-row;
background: grey;
}
h2 {
display: table-cell;
padding-right: 50px;
font-size: 3em;
}
ul {
display: table-cell;
vertical-align: middle;
}
li {
display: inline-block;
}
.spacer {
display: table-row;
height: 10px;
}
Maybe you need something like this:
.row > * {
border-bottom: 5px solid #ffffff;
}
This will add 5px space after your rows.
I am beginner to UI World, trying to style and arrange html components in one of my example, but I could not see the style applied for all the children of HTML header component. Here is what I have tried Demo in JsFiddle
.page_header_style {
border: 1px solid blue;
}
.title_style {
text-align:center;
}
ul {
list-style: none;
}
li {
display: block;
}
.user_style {
float: right;
margin-top: 0px;
}
<header class="page_header_style">
<div>
<div class="title_style">Main Title</div>
<div>
<ul class="user_style">
<li>Welcome Srk</li>
<li>Logout</li>
</ul>
</div>
</div>
</header>
I would like to see the second div i.e., Welcome message & a list in the same line of the title, keeping the title at the center.
In order to make the "title" text in the center viewport wise, you can make the "user info" as position:absolute, so it will be out of the normal content flow. See the demo below.
.page_header_style {
border: 1px solid blue;
padding: 20px 0;
position: relative;
}
.title_style {
text-align:center;
}
.user_style {
position: absolute;
top: 10px;
right: 10px;
list-style: none;
padding: 0;
margin: 0;
}
<header class="page_header_style">
<div>
<div class="title_style">Main Title</div>
<div>
<ul class="user_style">
<li>Welcome Srk</li>
<li>Logout</li>
</ul>
</div>
</div>
</header>
JSFiddle Demo: http://jsfiddle.net/wt5f81qz/
You should apply float: left to the .title_style, and put a clearing element (clear:both) on the bottom of inner content of .page_header_style
Here: http://jsfiddle.net/r1af39at/
Kosturko answer regarding clearfixes
You can alternatively use the clearfix solutions with is better than adding clear:both to an element, because in some case you'd need extra markup to apply clear:both.
The both clearfixes are applied to the immediate parent containing the floating elements.
Clearfix 1: is just to apply overflow:hidden; this works but can cause styling issues if say you wanted something to flow outside the parent using position absolute for example.
The better clearfix is to use the micro clearfix, best applied using a CSS preprocessor.
Good luck
By default, div elements have the display: block; attribute. Without other css styling, browsers will render them below the last block element. Try using the display: inline-block; as this will treat each div as an inline element, but treat its contents as the contents of a block element.
For example, the following css will display the main title and both list elements on the same line.
li{
display: inline-block;
}
div {
display: inline-block;
}
See w3schools's page on the display property for more on this.
i want to ask you how can i make a responsive list with 3 items in wich when i reduce the size of my browser the items go vertical and the one is below the other, when the browser window is growing the items will be in one. My code for the list is the following , i managed to order them in center and in one row but i am getting confused about the responsive..
<div class="list">
<ul id="2" class="3">
<li>< </li>
<li> </li>
<li> </li>
</ul>
</div>
and the css
.list{
position: relative;
width: 100%;
display: block;
}
.list li {
width: 33.3%; /* nice 3 columns */
float: left;
padding: 0; /* should have zero paddng/margin */
margin: 0;
}
.list li > span {
margin: 6% 6% 0 0; /* now margins are specified relative to outer <li> width */
display: block;
}
What you are looking for are css media queries. For example, add this to your css:
#media (max-width:500px){
.list li {
float:none;
}
}
Here's a jsfiddle.
Suggest you read this:
https://developers.google.com/web/fundamentals/layouts/rwd-fundamentals/use-media-queries?hl=en
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
http://cssmediaqueries.com/what-are-css-media-queries.html
You can use media queries to set a breakpoint and set the ".list li" width to 100% when the window width is less than the size you want.
Here's a link about media queries: http://cssmediaqueries.com/
Just a simple image that uses some jQuery to fade some content over the top when moused over.
Only problem is that when the hover over takes effect, the hover spills into the div gutter making the hover over bigger than the actual container.
each image is layed out like so
<li class="large-4 columns item">
<div class="description"><h1>Image hover</h1></div>
<img class="display" src="http://placehold.it/400x300">
</li>
Can see a live example here.
http://jsfiddle.net/QLUMH/
Any ideas on ways to fix/improve what I am doing here? Cheers
Demo
Here you have live example,
you are giving 100% to width and height.
so that really goes overflow.
Code edited-
#portfolio .description {
position: absolute;
background: rgba(0,199,134,0.8);
display: none;
width: 400px;
height: 300px;
}
The issue is that your description fills the entire column, which is wider than your image. If you add an "inner column"/container that collapse to the same width as your image, it will work alright. I've created a fork of your demo that demonstrates this.
I've added a wrapper "ib" (Just stands for inner block. rename this to a proper name) inside each .column.item like so:
<div class="ib">
<div class="description">
<h1>Image hover</h1>
</div>
<img class="display" src="http://placehold.it/400x300">
</div>
And then just created a very simple CSS rule for making this wrapper collapse to its contents:
.ib {
display: inline-block;
position: relative;
}
You did not style your li. The issue is that in foundation.css it is getting padding-left and padding-right. You need to remove that and use margin-left and margin-right instead. And you also need to fix the width of the li. As .description will get its 100% height. So you need to include a small css in your own file (don not modify foundation.css).
#portfolio li.columns{
/* You can use the width in '%' if you want to make the design fluid */
width: 400px;
padding: 0px;
margin: 0px 0.9375em;
}
Fiddle
You'll just have to get rid of the padding on tne li
li{ padding:0 }
or use the the box-sizing property:
`li { box-sizing:border-box; -moz-box-sizing:border-box; }
Change in CSs will help,
I have updated the same in fiddle
with change in CSS,
#portfolio .description {
position: absolute;
background: rgba(0,199,134,0.8);
display: none;
width: 400px;
height: 300px;
}
#portfolio .description h1 {
color: white;
opacity: 1;
font-size: 1.4em;
text-transform: uppercase;
text-align: center;
margin-top: 20%;
width:400px;
height:300px;
overflow:hidden;
}
Update:
If the H1 created extra cutter and wrapping issue(for some), please use the DIV tag instead, which should work fine!
I hope this will solve your problem :)
Hey i'm trying to align things next to each other and under each other
Here is the css I'm using.
/* title styles */
#wpp-post-title {
float:right;
width:100px
}
/* thumbnail styles */
#wpp-thumbnail {
float:left;
width:80px;
}
It shows up like this
but i want it to show like this
Use classes instead of ids and look at clear property http://www.w3schools.com/cssref/pr_class_clear.asp
Something like this could work:
jsFiddle demo: http://jsfiddle.net/vPvbn/
CSS:
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
li {
display: block;
height: 80px;
margin: 10px 0;
padding: 20px 0 0 85px;
}
HTML:
<ul>
<li style="background: url(http://i.imgur.com/9M7yb.jpg) no-repeat 0 0; padding-right: 10px;">LEAKED: The Winner of RuPaul's Drag Race Season 4 Is...</li>
<li style="background: url(http://i.imgur.com/eJxiy.jpg) no-repeat 0 0; padding-right: 10px;">WATCH: Rihanna's 'Battlefield' Movie Trailer.</li>
</ul>
/* title styles */
#wpp-post-title {
width:100px
display: inline-block;
.display: inline;
.zoom:1;
}
/* thumbnail styles */
#wpp-thumbnail {
display: inline-block;
.display: inline;
.zoom:1;
width:80px;
}
Without seeing your HTML, I can only guess, but my best guess would be to add the following style to your CSS:
/* You will probably need to change "li" to something more specific, lest it
break your existing list styles. */
li {
overflow:hidden;
}
This will force the list item to wrap itself around your floated bits. Elements that are floated do not change the height of the parent container, so because everything inside the <li> is floated, your <li> element has a height of 0px, and you get the weird behaviour that you're seeing. overflow: hidden fixes this by forcing the <li> to acknowledge the height of #wpp-thumbnail and #wpp-post-title.
Giving #wpp-post-title a height that is equal to your thumbnail should solve the problem, at the moment the browser is automatically determining the height of the div based on the text inside it.
Also, make sure both divs are given display: inline-block property