Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 2 years ago.
Improve this question
Like what container do if I used it on div tag and what will wrapper do if I used it on div tag or what is the different between them.
Container and wrapper are the same thing - they are classes usually applied to divs that contain other elements (or wrap around them). The only differernce is that in Bootsatrap - .container has specific styling applied to it - but the concept is that they are both just classes that are applied to elements and not just to divs either -could be any element that houses other elements.
As can be seen in the snuippet - they are exactly the same.
I personally use .wrapper more than container due to the Bootstrap connotations and I like the idea tht a div wraps around the inner contents - but that is person preference only.
.container,
.wrapper {
border: solid 1px red;
padding: 8px 16px;
margin: 16px
}
<div class="container">
<p> I am a p element within a div with a class of container</p>
</div>
<div class="wrapper">
<p> I am a p element within a div with a class of wrapper</p>
</div>
Related
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
I have an image like this
I want to put small clickable boxes on it, like this
Does anybody have any idea how to do this using HTML/CSS?
Edit: Thanks to #BCollingwood, his answer with boxes property as absolute worked like a charm.
You can add all images to a container div then position them relative to each other using CSS:
HTML
<div class="container">
<img class="image_1" /> // the background
<img class="image_2" /> // the clickable square
</div>
CSS
.container {
position: relative;
}
.image_2 {
position: absolute;
left: 50px;
top: 50px;
}
you have to use svg. it is not wise to use anything other than svg to make certain part of image clickable.
[https://www.w3schools.com/graphics/svg_intro.asp]
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 4 years ago.
Improve this question
I am not asking this because it's a problem for me, actually, that's exactly how I wanted to display the divs, but I didn't know they would appear below each other. Why is that? I only gave them width and height, I didn't position them.
I thought they would appear on each other at the same position
<div class="D1">
</div>
<div class="D2">
</div>
<div class="D3">
</div>
<div class="D4">
</div>
.D1,.D2,.D3,.D4{
border:1px solid;
border-color:red;
width:500px;
height:200px;
}
/* OR
div{
border:1px solid;
border-color:red;
width:500px;
height:200px;
}
*/
Sorry for this probably dumb question, but I'm just curious :D
That's the expected behavior.
div by default are block elements which means that they always start on a new line and take up the full width available.
If you want elements to be on the same line and to only take up as much width as necessary, you must use inline elements, such as span.
Find here a complete reference
By default, the flow of the page will display your divs elements (which are blocks) one below another as you have seen.
If you want to override this behaviour you could set a
position: absolute;
property to your divs so they can be placed wherever you want regardless of the position of other elements. For example you may want to set all your divs at the top left corner by doing:
div {
position: absolute;
top: 0;
left: 0;
}
By default display property is block for div.Change it to inline to display in one line.
If you use float: left; in css, the problem will be solved. Because div element is a block level element.
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'm working on Wordpress template, and got this little problem which is:
I can't position the date label above the image thumbnail, as you can see here:
http://cl.ly/image/3X1j3h3j0E0X
If I make it position: absolute its position would be changed while the windows is changing.
How could I implement the right CSS for that.
This is the CodePen example, try to resize the window:
`http://codepen.io/msabdullah/pen/rplgC`
You need to use a combination of position: relative and left right top bottom to position it correctly. It should be positioned relative to the parent element.
<div class="parent">
<div class="child">
</div>
<div>
If you had the above html structure then you would need to make sure both had positioning, and then position the child relative to the parent:
.parent {
position: relative;
}
.child {
position: relative:
top: 0;
right: 0;
}
This is just an example, but it should be something similar.
Try to give position relative to parent element to maintain the uniformity.
check the DEMO.
CSS like this: Where div is parent element have position:relative.
img, p{display:inline-block;}
div{position:relative;}
p{position:absolute; right:0; top:0;}
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
I have started a new project and I need (only) responsive grid for layout.
I have tried with http://www.responsivegridsystem.com/ this grid system and it's fine but it adds some classes for inputs and other elements that I don't need and it makes a mess in some of my forms.
I am looking for any solution.
I need just responsive grid that will not mess with other elements.
Is there any such framework?
Maybe you can use display:flex , setting min-height min-width for childs to keep safe minimal size where little content.:
http://codepen.io/gc-nomade/pen/wFHfq
In order to see IE 10/11 , working too , you need to add a width or height to main container. Most of the time width:100% will do , here i setted height:100% on body.
This will not work for older browser, you may use vendor-prefix and old syntax to increase compatibility. here is something to read and here too .
body div {
display:flex;/* flex it */
flex-wrap:wrap;
min-width:320px;
min-height:160px;
box-shadow:inset 0 0 5px white, 2px 2px 3px;
flex:1;
}
html,body {
height:100%;/*IE*/
margin:0;
}
body>div {
min-height:100%;
}
div div {
background:pink;
}
div div:nth-child(even) {
background:lightgray
}
BASIC HTML TEST:
<div>
<div>
</div>
<div>
</div>
<div>
</div>
<!-- and so on -->
</div>
try semantic.gs
Set column and gutter widths, choose the number of columns, and switch between pixels and percentages.
All without any .grid_x classes in your markup. Oh, and did we mention it's responsive?
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
I am trying to place some links between my top area and bottom area so that they overlap both of them by an equal amount. I have the navmenu div set to a larger z-index than all the other div's but I can't get it to overlap anything. site is at http://www.joekellywebdesign.com/churchsample1/index.html
stylesheet is at http://www.joekellywebdesign.com/churchsample1/css/styles.css
Thanks in advance for the help.
Many ways to do it.
You can simply specify a negative margin for your navmenu
#navmenu {
margin: -10px 0;
}
Since you have specified the position as relative, which means the location of the div will depend on previous div. Its top would be the top plus the height of the previous div.
You can either change the position into absolute, or adjust the margin or padding values to display content inside the div in your way.
z-index will only be effective when elements are overlapping. In your case, all divs are in relative position. None of them is overlapping.
You could for instance do the following:
<div id="navmenu">
<div class="inner"><h1>Test text</h1></div>
</div>
and than in CSS:
#navmenu .inner {
padding-bottom: 15px;
margin-top: -15px;
position: relative;
z-index: 200;
background-color: #F00;
}