I am building a simple web-page with a few sections in it and I've been stomped at how to solve one little styling issue.
I have several DIVs with solid border and a few other GUI items (text boxes, buttons, etc) inside each one. Each DIV kind of "boxes" related items into a nice, visually pleasing and meaningful way. However, I would like to add a title or a caption onto the DIV in the middle of the border to describe that box's function. So far I can add text below the border or above, but not in the middle. Is that even possible?
Thank you!
What I have:
What I want:
What you want looks like a fieldset element with a legend tag inside, but I wouldn't recommend using them.
Just use position: absolute like this:
<div class='section'>
<header>Header</header>
....
</div>
.section{
position: relative;
}
.section header{
position: absolute;
top: 0;
transform: translate(0, -50%);
background: white;
}
What you looking for is build in HTML nativly: The border Frame is part of the <fieldset> while the title is the <legend>
<fieldset>
<legend>Header</legend>
</fieldset>
Related
Whenever I want to be able to make two things overlap (like an image over another image or something), using margin or padding works but it can make other things not work properly (like text not going to the next line or not being able to make other things overlap anymore). I want to know this for future use in any project, not really a specific one so I don't have a code snippet.
I would go with position: relative for both (or at least one of the) elements in question.
That does not affect the position of the other elements of that document, because is isn't removing the elements from the normal document flow.
The overlap of the relatively positioned elements is then realized by offsetting each of them relative to itself based on the values of top, right, bottom, and left.
CSS to make 2 divs overlap vertically 10px:
div {
border: 1px solid red;
}
.overlap {
position: relative;
}
.overlap.one {
bottom: -5px;
}
.overlap.two {
top: -5px;
}
<div>Before</div>
<div class="one">Div One - without overlap</div>
<div class="two">Div Two - without overlap</div>
<div>After</div>
<hr>
<div>Before</div>
<div class="overlap one">Div One - overlapping downwards</div>
<div class="overlap two">Div Two - overlapping upwards</div>
<div>After</div>
<hr>
I want to make a button and next to it a div, but div should have relative position and be moved to the left, so this way it would overlap a button and it couldn't be clicked, so I wonder is there a way to do that? except putting a button into that div.
here is something what i'm trying to do:
div {
background-color:green;
width:200px;
}
input:checked+div {
background-color:salmon;
}
<body>
<input type=checkbox>
<div style="display:inline-block;width:200px;position:relative;left:-30px;">
<p>
text
</p>
</div>
</body>
So i just need to make input here clickable
Not a good way to solve it, but you could work with position: relative; z-index: 1 on your button. I would consider creating a different structure altogether, since this is really ugly and unmanageable. See https://jsfiddle.net/w6ymq758/
I want price be at same line, just above View details button. I have tried
vertical-align: bottom
but no luck.
http://enterprise-demo.user.magentotrial.com/women/tops-blouses.html
You can also move your
<div class="price-box">
in your
<div class="action">
as his first child.
Give each div some class like this
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
If you can alternate the HTML structure, then you can copy div.price-box into the .actions div, as #Roy says.
Else, you can do
.products-grid .price-box{position:absolute;width:100%;bottom:90px}
The prices are not aligned vertically with the "view detail" button because the the div.action block has position:absolute. To make the price always be just above the "view detail" button, you can make it absolutely positioned.
You have a lot of ways of align vertically a div. The best way is learn the concepts about vertical aligning and use the best approach to your case. This blog post shows 6 ways of doing that and has helped me a lot.
I want to create a set of the newest messages that have been posted on my page. Those boxes should always be the same size (as they're in a row, instead of below each other) and consist of three parts:
Heading (h3)
Content (no specific tag)
Author (span)
While it isn't that difficult to keep the heading always at the same position, I couldn't really think of a method of having the author to be always on the bottom of the box, no matter how much content there is above.
Perhaps I just think too complicated.
Thanks in advance for any help!
position: relative on the parent box, position: absolute; bottom: 0; on the author box.
I won't give you a full solution, because that would not really help.
CSS Positioning 101
you can use a wrapper set to relative from css and the span positioned absolute
HTML
<div class="wrapper">
<h3>Title</h3>
<p>Title</p>
<span class="author">Title</span>
CSS
.wrapper{position: relative; padding-bottom: 1em;}
.author{position: absolute; bottom: 0; right: 0
I'm looking to clone the Google Instant "underlay/type ahead" type look, where what the system is predicting is grayed out and infront of what you are typing.
The technical part of it I am completely sorted, as well as representing the text. I simply am unable to work out how to do the CSS positioning and transparent textbox over the top of the gray text.
Anyone know how to simply do this?
I've tried to adapt code from other sources, but been unable to get the text with the gray text underneath a transparent textbox.
I believe you're looking for something like this. Keep in mind they need to be posiitoned together, so it's probably a good idea to wrap this in a div together.
HTML
<div class='top'>
<input type='text' id='gray'/>
</div>
<div>
<input type='text' id='type'/>
</div>
CSS
.top {
background:transparent;
position:relative;
}
input {
font-size: 14px;
width: 200px;
}
#type {
background: transparent;
z-index: 1;
}
#gray {
position: absolute;
z-index: -1;
color: silver;
}
Live Example
http://jsfiddle.net/r4jSR/
Edit
This positioning works by stacking a position:relative div on top of another block level element, then setting the div's contents to absolute, but with no positioning. This causes the div to collapse as it has no contents, and - as long as neither block element has a margin - the 0,0 coordinates for absolute positioning should put it right on top of the block element below. Presto. This is the way Google does it.