I want to place a div element a relativ below another one b. The html has the following structure:
<div id="a"></div>
<form>
<div id="b"></div>
<div id="c"></div>
</form>
a cannot be moved to be contained in the form because it contains another form. I need a to be shown between b and c.
CSS can't really do this unless everything has a fixed size (then you could use positioning)...so it's not really recommended. You'd need Javascript. –
Jquery would make this very simple.
$('#a').insertAfter('#b');
JSfiddle Demo
Related
I'm trying to do this when someone clicks a box:
It's seems simple, if I put the gray div inside the ng-repeat, when a user clicks a box, the new div would be shown.
<div ng-repeat="friend in friends" ng-click...>
<div>
{{friend}}
</div>
<div collapse="expand">
some content
</div>
</div>
But, what if I don't want to repeat the gray div? (Let's say it's a bunch of html that is not necessary to be repeat by each element).
So, I have this plunker, where the gray div is outside the ng-repeat.
Is it any possibility to do what you see in the image with pure CSS or some trick in angular or javascript?
I heard that I could use jQuery to inject the html, but maybe could exist a cleaner way.
Considerations:
A row could have one to n items.
What I have tried
Put the gray div with position relative, but this would not push down the other divs.
First of all your task is unachievable unless you change markup. The result should be like this.
<div class="row">
<div class="col-md-4">
Age
</div>
<div class="col-md-4">
Age
</div>
</div>
<div class="row">
<div class="col-md-4">
Age
</div>
<div class="col-md-4">
Age
</div>
</div>
For that you need to use custom filter. I took it from here
how to split the ng-repeat data with three columns using bootstrap
Since you use jQuery you can easily manipulate elements now. You can get you collapse div and append it to every row.
You modified working planker is here
http://plnkr.co/edit/WUGDcUsxqRqrrmK4I9Lh?p=preview
I've tried several remedies after searching here but can't seem to make this work.
2 separate divs: 1 div with 4 image links in separate columns (each has a CSS fade rollover effect), and one div underneath with a simple line of text in a full-width column. I'm trying to hide the text div and reveal it upon triangle image rollover.
Here's a link with the images and the first text blurb shown below: http://goodsouldesign.com/redmont
<div id="triangles>
<a>image1</a>
<a>image2</a>
<a>image3</a>
<a>image4</a>
</div>
<div id="blurb1>Text here</div>
<div id="blurb2>Text here</div>
<div id="blurb3>Text here</div>
<div id="blurb4>Text here</div>
Any ideas are appreciated!
Now that I know exactly how you have it laid out, I'm writing a new answer. While you may need the blurbs to span the full width, they are still very close to the elements, which means they could be made into siblings. Take this for example:
<div id="wrapper">
<a id="tri1"></a>
<a id="tri2"></a>
<a id="tri3"></a>
<a id="tri4"></a>
<div id="blurbs">
<div id="blurb1">Text here 1</div>
<div id="blurb2">Text here 2</div>
<div id="blurb3">Text here 3</div>
<div id="blurb4">Text here 4</div>
</div>
</div>
The blurbs are now a child of the blurbs container, which in turn is a sibling of the triangles. This would allow you to use the css sibling selector ~ to access them.
Alternatively, you don't even need the blurbs container.. It might make styling a little easier, but you could accomplish this layout simply by having the blurbs be block elements, whilst the triangles are display: inline-block;. This would put all the triangles on the same line, and bump a blurb down below it. Give it 100% width, and it should be what you want.
Here's a fiddle that shows how to do this with no container, and the sibling selector:
#wrapper #tri1:hover ~ #blurb1 { display: block; }
http://jsfiddle.net/cJJtc/1/
Hope that helps!
UPDATE:
I realized that my answer might have been a bit to quick to dismiss what you were doing.. I assumed that you had the text blurbs in a different area than the triangles which would make this impossible... However, if the text is meant to be right underneath the images or some similar layout, you can move the blurbs to be inside of the triangles wrapper, underneath their corresponding triangle image, and then use an adjacent css selector (exactly like the example you posted in the comments) to hide and show them. Let me know if you need an example.
Pure CSS cannot be used to create an effect such as this. The reason for this is that CSS is sequential, and can only be applied in an inward and onward fashion.. Basically, a CSS selector can only apply to an element, it's siblings which come after it, or it's children. Selecting parent elements, or elements outside of an element's "family" is not something that CSS should be used for.
An effect like this would typically be done with Javascript, which has much more power of selection.
For example:
document.getElementById('tri1').onmouseover=function(){
document.getElementById('blurb1').style.display = "block";
};
document.getElementById('tri1').onmouseout=function(){
document.getElementById('blurb1').style.display = "none";
};
See this fiddle for a full example:
http://jsfiddle.net/tQjd4/
(I'm not expert on javascript, so I'm sure there are more efficient ways to do it, but that works!)
I tend to use jQuery to shortcut my javascript, which would be something like:
$('#triangles a').hover(function(){
$('#'+$(this).attr('rel')).css('display','block');
}, function(){
$('#'+$(this).attr('rel')).css('display','none');
});
assuming that you've given each triangle a rel attr equivalent to the blurb text id
I am not very good with CSS, HTML and mark-up, but after having read many and many CSS articles, I just have no idea how to get the div-elements on the right place.
Current site in tables: http://daweb.nl/
Current attempt in div: http://daweb.nl/daweb/
I would like to have the right-menu and content in the right place. If you have general comments regarding the current state of my HTML and CSS, please feel free. I have worked with CSS, HTML much, but never built a site from scratch with div-elements.
http://jsfiddle.net/qJBpk/10/
Check the preview here.
This is a basic setup, you have a wrapper div which contain all your structure: a header, three columns and a footer.
Wrapper div has margin set to auto, this will allow it to be horizontally center placed (along with all its content) in the browser window.
The three columns have the float property set to left, so that each one is placed next to the other.
The footer has a clear property set to both, this will allow it to be placed after the most tall floated column, to avoid a layout crash.
Div elements are block level elements. This means, among other things, they take up all the avaiable width space, so no need to set a width for the #header and #footer divs.
EDIT
To avoid cross browser incompatibilities and issues, it's better to have a CSS reset (a set of CSS rules which will make all elements shows as much as possible the same across all browsers), like the YUI. Place it first before any other CSS code.
This is a good place to start learning about css positioning.
Also, after looking at your code, you may want to wrap certain elements in a wrapper div so you can position everything inside it with one CSS rule.
Instead of:
<div id="menu-header">
<h1>HEADER</h1>
</div>
<div id="menu-body">
<p>MENU BODY</p>
</div>
Try something like:
<div id="menu">
<div id="menu-header">
<h1>HEADER</h1>
</div>
<div id="menu-body">
<p>MENU BODY</p>
</div>
</div>
That way if you want to move the menu and everything in it you can write a CSS rule like this:
#menu {float:left;margin:15px 0 0 25px;}
just another one! ;-)
full-working-demo: http://so.devilmaycode.it/converting-tables-to-css-layers
hope this help!
Looks like a simple 3 div layout. You need to create 3 divs. One for the left, middle, and right-hand content. These three divs will be placed in a wrapper div.
So take your left_menu, content, and right_menu divs, give them a width and set them to float: left; so they will all be placed beside each other. Place them inside a wrapper div that is larger than all three. You're done!
Ok, so I'm working on a prototype of my UI before I start coding the webapp. I got the design mostly done while working in Firefox and (of course) when I tested it in IE, there were a lot of rendering issues. One of those issues is that if I have a div that contains some text and another div that's set to float:right, that nested div shows up on the next line, below its parent div. This is the problem markup in its simplest form...
<div style="background-color:red;">
Text
<div style="background-color:yellow; float:right;">Right</div>
</div>
I scoured the internet for solutions and the only working relevant solution I found that makes this work in IE is to place the floating div at the beginning of its parent like this...
<div style="background-color:red;">
<div style="background-color:yellow; float:right;">Right</div>
Text
</div>
In reality, the nested div has a class and my CSS is floating that class. But what happens if I eventually make another stylesheet to target mobile devices and I no longer want that inner div to be floated? Then the content itself would be out of order in HTML, just for the sake of accommodating a CSS issue in IE. Is there a better way to solve this?
A colleague of mine recently had a very similar problem. I recommended simply using positioning rather than floating. I believe you could do the same here:
<div style="background-color:red; position:relative;">
Text
<div style="background-color:yellow; position:absolute; right:0; top:0;">Right</div>
</div>
I don't know if you have a requirement to use floats or not. Using the positioning method will cause the positioned element to not take up space in normal flow, but otherwise keep the correct source order and visually accomplish what I think you want to do.
Set a width value on your inner div and make it display: inline-block. Div's are block elements that take 100% width of the parent, that's why IE puts it on the next line.
I am not sure if it is a possibility for you, but putting the text within the outer div in a div of its own seems to solve the problem
<div style="background-color:red;">
<div style="float: left;">Text</div>
<div style="background-color:yellow; float:right;">Right</div>
</div>
I just hit this problem in IE7 - in my case, the item that was going to clear the float was going to be full width anyway. I just set that to "float: none;clear: left" and it seems to work.
ok this header image is driving me crazy-- ive cleaned up the divs and edited the css - before i learn positioning etc, id love to see a quick fix that just puts that image down at the bottom of the page
sorry, the question was in the title-- im trying to get the footer not to float on top of the page but ive gotten some responses about absolute positioning so ill try and work on that myself, additional answers still appreciated, thanks
http://we-live.in/the_sierra
<div style="text-align:center;">
<div id="footernav">
Home
About Us
Contact Us
</div>
Your main content div appears to be the div with the id "to_div". Your footer floats to the top because you've used position:absolute on to_div which takes it out of the flow. Either absolutely position your div on the bottom or stop using absolutely positioning. I recommend the latter.
That happens because you have set up to absolute the position of each div (to_text, nav_deals, etc.) but the div that contains the footer is rendered as a normal div element (because its position is not absolute)!
I suggest to redo this simple layout without the absolute positioning! Or you can solve by setting to absolute even the position of the last div!
The problem is that you are using absolutes. Absolutes do not affect the flow (in other words for the positioning of other elements it's as if they don't exist).
Do something like this (I've put the css as text)
<div id="wrapper">
<div id = "main">
<div id="to">FLOAT:LEFT</div>
<div id="from">FLOAT:RIGHT</div>
<p class="extro">CLEAR:BOTH</p>
</div>
<div id="footer"></div>
</div>