New member approaching.
I'm new at HTML and CSS. I'm a designer and i got amazed by HTML and CSS, i'm studying methods of position elements inside a div. And recently I came across some problems. I was trying to make the elements fit the spaces above, but it seems like there's a line dividing the two parts of the blocks. Here's an image to illustrate what I'm experiencing.
Problem
My markup is:
<section style="max-width:470px; background-color:green;">
<div class="bloco1">
hello
</div>
<div class="bloco2">
hi
</div>
<div class="bloco3">
hey
</div>
<div class="bloco3">
I want this elements to fit those spaces above
</div>
<div class="bloco1">
I want this elements to fit those spaces above
</div>
<div class="bloco2">
I want this elements to fit those spaces above
</div>
And CSS is:
.block1 {
display:inline-block;
width:150px;
height:200px;
background-color:gray;
}
.block2 {
display:inline-block;
width:150px;
height:100px;
background-color:yellow;
}
.block3 {
display:inline-block;
width:150px;
height:180px;
background-color:blue;
}
So, I've tried to mess with position but it didn't served well. What should i do?
Related
I want the output to be something like this. I tried to make the <div> element position: absolute but it pushed all the way down to the last page.
Instead I want to accomplish this without using any PDF libraries.
many different ways to do this. Here are two. The first uses flexbox and the second uses absolute positioning.
answer updated.
.container2{
display:flex;
height:100vh;
width:100vw;
justify-content:center;
}
#page4{
background:pink;
position:relative;
}
#bottom2{
position:absolute;
height:20vh;
width:30vw;
left:calc(50vw - 30vw/2 + 10vw);
background:purple;
top:calc(100vh - 20vh);
}
#content{
height:35vh;
width:80vw;
background:white;
margin-top:10vh;
}
<div class='container2' id='page4'>
<div id='content'>
</div>
<div id='bottom2'></div>
</div>
<div class='container2' id='page5'>
</div>
<div class='container2' id='page6'>
</div>
What I am trying to achieve seems relatively simple, but I can't seem to get it to work.
I want to have my article previews on my website appear in tiled form.
The tiles, for the sake of the argument would be a fixed height and width. Lets say 300px by 300px.
I want then for the title of the article and perhaps even a short excerpt to appear, overlaying the image. Kind of like what theverge.com have.
What I need help with is that Im just trying to do a proof of concept mock up. I can do the specific styling fine myself but its literally just the structure I cant seem to figure out.
I cant seem to get the h1 to overlay the img.
I've tried creating a parent container div, and then containing both elements within separate div containers and giving the container with the h1 or "post info" absolute positioning.
But It never seems to work out quite right.
HTML:
<div class="container">
<div class="feat-img">
<img src="www.sample.com"/>
</div>
<div class="post-info">
<h1>Post Title</h1>
</div>
</div>
CSS:
.container: {width: 300px; height:300px;float:left;}
.feat-img img: {width:300px; height:300px; float:left;}
.post-info: {position:absolute;bottom:0px;}
Ok so I know there is a lot wrong with that style but I just did it off the top of my head there. It has the general jist of my train of thought.
Any help would be greatly appreciated as I havent found anything (Probably becuase I dont really know what Im searching for)
First, you need to know how an absolute div relates to a relative one.
Add
.feat-img {
position:relative;
height:300px;
width:300px;
}
to your CSS,
and place the .post-info div inside the .feat-img div:
<div class="feat-img">
<div class="post-info">
<h1>Post Title</h1>
</div>
<img src="image.jpg"/>
</div>
apply this CSS:
.post-info {
position:absolute;
bottom:0px; /* or whatever position */
left:0px; /* or whatever position */
}
Please have a look at this jsFiddle for a quick mockup: http://jsfiddle.net/ZJT6f/
Cheers,
Jeroen
look on this:
demo
html code:
<div class="container">
<div class="feat-img"><img src="http://lorempixel.com/300/300/"/></div>
<div class="post-info"><h1>Post Title</h1></div>
</div>
css code:
*{margin:0; padding:0}
.container: {width: 300px; height:300px; display:block; position: relative;}
.feat-img img: {width:300px; height:300px; position:absolute; top:0; left:0; display:block;}
.post-info{position:absolute; top:130px; left:0; display:block; width:300px; height:300px; text-align: center; color:#fff;}
I'm trying to make the left column static and the contentwrapper responsive to browser resizing. I do not want to use floats because when I do not want it to shift the content down.
HTML
<div id="maincontainer">
<div id="leftcolumn">
</div>
<div id="contentwrapper">
</div>
</div>
As far as I have understood from your question I think you need something like this:
http://jsfiddle.net/v5FZv/1/
CSS
#maincontainer{
display:table;
width:100%;
}
#leftcolumn{
display:table-cell;
min-width:100px;
background-color:red;
}
#contentwrapper{
display:table-cell;
width:100%;
background-color:blue;
}
This is not a question, it is a solution, but maybe someone of you can explain why this is happening. I built a table using divs (row wrapper with white-space=nowrap and cells with display=inline-block). The header row and the rest of the table were in two different container divs with different IDs.
The code is like the following:
<div id="main_container">
<div id="header_wrapper">
<div id="header_row">
<div class="column_cell1">...</div>
<div class="column_cell2">...</div>
...other cells...
</div>
</div> --closed the header container
<div id="table_content_wrapper">
<div id="table_row">
<div class="column_cell1">...</div>
<div class="column_cell2">...</div>
...other cells identical classes as the header...
</div>
...several other table rows...
</div> --closed the table container
</div> --closed the main container
The CSS looked like:
#header_wrapper {
position:absolute;
top:100px;
height:100px;
width:100%;
}
#table_content_wrapper {
position:absolute;
top:200px;
bottom:0;
width:100%;
}
#header_row {
height:100%;
white-space:nowrap;
}
#column_row {
height:100px;
white-space:nowrap;
}
.column_cellN (all equal) {
height:100%;
width:10%;
display:inline-block;
white-space:normal;
}
No matter what I did, the header cells and the table row cells were misaligned. The only way (after a gazillion tentatives) to make them look the same has been to assign the same div ID to the header row wrapper and to the table row wrapper.
The most strange thing is that the developer tools in chrome reported that the various cells in the header and in the table had the same width in pixel, but they were actually rendered differently in the browser. Same behaviour also in IE.
Does someone know why this is happening?
Works for me.
http://jsfiddle.net/UMf3k/2/
Correct your css: #header_wrapper {position:relative;}
I am trying to create a website where I have several divs positioned in-front of a background div by using z-index and position:absolute. This background div will be transformed later into a content carousel so it is vital that its text are selectable. My current code does not allow for the text and link to be selected and I am wondering how would I fix this.
http://jsfiddle.net/6fwf9/2/
HTML:
<div id="header" class="box">header</div>
<div id="bg">
Cannot highlight this text <br>
Cannot click on this link
</div>
<div class="box">content</div>
CSS:
.box { width: 150px; height:50px; background:aqua; margin:20px; }
#header { margin-bottom: 150px; }
#bg { width:200px; height:200px; padding-top:100px; background:pink;
position:absolute; top:0; z-index:-10;}
EDIT - Image of what I am trying to achieve: http://imgur.com/r9tYx
Make sure the overlaid elements (.box) don't sit in front of the text content, if they are to be selectable. That means positioning them some other way than by using margins. This example works because the boxes uses absolute positioning: http://jsfiddle.net/2pPKz/
Alternatively, if the background is to become a carousel, couldn't you worry about it when it's actually a carousel, and move it to the front then?
I just saw your picture, This is how I would do it.
<div id="bg">
<div id="container">
Cannot highlight this text
<br>
Cannot click on this link
</div>
</div>
<div id="header" class="box">header</div>
<div class="box">content</div>
And for the CSS, Please take notes that I put border around the container to show where it is and what is the width and height
.box{
width:150px;
height:150px;
z-index:2;
position:absolute;
background: cyan;
top:150px;
left:20px;
}
#bg{
background-color:pink;
width:200px;
height:170px;
position:absolute;
top:0px;
}
#header{
position:absolute;
width:150px;
height:50px;
left:20px;
top:20px;
z-index:2;
background: cyan;
}
#container{
width:100%;
position:relative;
border:1px solid black;
margin-top:100px;
}
The only thing left is you play with your dimention.
Actualy I put everything absolute exept the container.
It is because the bottom margin of the Header is over the text. I sugest you to change the way you are doing things here. Why don't you just make elements be inside the bg box?
<div id="bg">
<div id="header" class="box">header</div>
<p>Cannot highlight this text Cannot click on this link</p>
<div class="box">content</div>
</div>
With static position? Even if you want to use absolute positioning, you could have everything inside the bg div and have it with position:relative, so the elements inside will be positioned absolutely respected to it.
Unfortunately the only way to do what you're trying to do is to split up the background and the text content for the slider.
That means each slide would need to consist of a background div that is absolutely positioned behind the content, and a content div that is absolutely positioned in front of everything else.