This is basically the site http://funkz.nfshost.com/
The bottom post with <div id="big-post"></div> element is floated to the left,
and the sidebar with <aside id="tab-lists"></aside> element is floated to the right,
but when i add another(or more) <div id="big-post"> element after the first one it moves the whole sidebar down with the post...
I've tried clearing, but nothing helped...I'm pretty sure the solution is simple, can someone help me?
<div class="some_new_div">
<div id="big-post">...</div>
<div id="big-post">...</div>
<div id="big-post">...</div>
</div>
<aside id="tab-lists"></aside>
CSS
.some_new_div{float: left;}
Remove float from big-post and then take a new element, inside that- put big-post element
Right-floated elements have to be placed before other elements, so you have to do something like this:
....
<aside id="tab-lists"></aside>
<div id="big-post"></div>
<div id="big-post"></div>
....
Your <aside id="tab-lists"></aside> element needs to occur before any of the<div id="big-post"> elements.
I've just moved it above the post div in chrome developer tools and could add another post successfully.
right goes over left in this case, your aside needs to be moved up in the chain, in this case above the big-post.
Related
I want to move div behind the parent element, but still elements in the div to raise up and to be able to click them. I tried to use z-index but it seems or I don't know to use it properly or it doesn't work in a way I need.
So parent div should be behind container, but child divs should be on the container.
<div class = "container">
<div class = "parent">
<div class = "child"></div>
<div class = "child"></div>
<div class = "child"></div>
</div>
</div>
P.S. http://driglou.pusku.com/moreira/ so here is what i try to do, and i need .labels to be behind the .header and .label_icon to be on the header, so you would be able to click this .label_icon.
I don't have enough time to recreate the situation or find a working solution - all i could see in the minute i checked your example was the usage of the position-style element.
Maybe you could checkout that article (how to use z-index with relative positioning?) and see if it helps because you are switching positions (relative and absolute) between your parent/child elements.
Hope that this answer helps you any further.
By the look of the link all you need to do is set a container then an image for the head, and then headers for the tabs, and finally the link image.
<div class="container">
<div class="parent_header">
<div class="tab1"></div>
<div class="tab2"><img src="#" /></div>
<div class="tab3"></div>
</div>
</div>
Remove the absolute positioning on class and apply instead to individual ID'
Here's the fiddle: http://jsfiddle.net/vhcFw/
Here's the code:
<div style='display:block-inline;height:100px;width:100px;background:red;'></div>
<div style='display:block-inline;height:100px;width:100px;background:blue;'></div>
Essentially, I cannot get the divs to render side- by side (especially when using inline styling). I realise this is a simple mistake, but I cannot figure out how to fix it. Thanks in advance.
Simple syntax error.
Use display:inline-block not display:block-inline
Updated jsFiddle here
See MDN - display properties.
Alternatively, you could also float the elements.
jsFiddle here
simply add float:left.to your style
<div style='display:block;height:100px;width:100px;background:red;float:left;'> </div>
<div style='display:block;height:100px;width:100px;background:blue;float:left;'></div>
You have a few options here to consider. The best choice would be to use a flex container to surround the the elements which will by default render them side by side.
<div style='display:flex;'>
<div style='height:100px;width:100px;background:red;'></div>
<div style='height:100px;width:100px;background:blue;'></div>
</div>
Without a container you can just leave them to their default display which would be as block elements and float them left using float: left;.
<div style='height:100px;width:100px;background:red;float:left;'></div>
<div style='height:100px;width:100px;background:blue;float:left;'></div>
You can also change their display to be inline-block which have properties of both inline and block elements. MDN has exhaustive documentation about the display property.
<div style='height:100px;width:100px;background:red;display:inline-block;'></div>
<div style='height:100px;width:100px;background:blue;display:inline-block;'></div>
I've got some HTML:
<div id="thing">
<div id="contentheader">
<h3>Header</h3>
</div>
<div id="contentcontainer">
<div id="image">
<img alt="balt" src="imagesrc">
</div>
<div id="body">
<p>hegl gegl</p>
</div>
</div>
</div>
I need to push the h3 in 'contentheader' down alongside the image in 'contentcontainer' while having the body text sit alongside it. Everything is of variable width save the image.
Perhaps an image will demonstrate better:
As you can see, grey corresponds with 'thing', green with 'contentcontainer' and blue with 'contentheader'.
Editing the HTML would be a major hassle. I also can't make anything other than the image fixed-width. Is it possible to do it with just CSS? (It'd be awesome to be able to do it with floats and stuff but I don't know if it's doable)
I don't think you're going to find a perfect solution with CSS. You could use positioning but you would probably run into issues if you had a long title that ran more than one line.
If you're open to using javascript the following non-framework snippet would work.
// Add the header inside the container div just before the body
containerDiv = document.getElementById('contentcontainer');
headerDiv = document.getElementById('contentheader');
bodyDiv = document.getElementById('body');
containerDiv.insertBefore(headerDiv, bodyDiv);
You could recreate this code as a neater, one-liner using jQuery or another javascript framework.
Sure, heres the Css for a rudimentary setup:
http://jsfiddle.net/Nkapr/
Ask if you have any questions.
The problem here is the HTML structure, it's not been written really with your goal in mind (which is a bummer!)
If all you're after is pushing the H3 container 'contentheader' down in line with the rest of the stuff inside 'contentcontainer' you could set a negative top margin on 'contentcontainer' to pull it upwards, and then add a positive top margin to the elements in 'contentcontainer' which need to go down (in this case 'image') giving the impression that the h3 section actually sits in with the rest of the content. It's a bit of a hack but it might do the trick if you can't alter the HTML.
Thirtydot's answewr in the comments section solved my issue.
I am pretty new to web design stuff but what I understood from DIV tag is that I it like a logical container for what ever is inside it and those thing will follow its rules..
so now I have an outer DIV tag defined as <div style="margin-left: 10px;" >and I have put some textbox, buttons, comboboxes inside it...now I also have a HyperLink that I want it to be there BUT I want this one to be at the right hand side , aligned to right , so I defined another DIV like <div align="right"> and put the hyperlink insde this one. they are all still inside that other outer DIV tho. but it is not going to the right...what is wrong and how can I fix it? I attached the picture, see I want it to be like this picture, at the right hand side of that combobox...
thanks all
As long as you need to align inline element (your link tag) to the right, you can use text-align property of the style, and set it to right:
<div style="text-align:right">
blabla
</div>
there is no align. Do you mean text-align? That will affect inline elements within block level elements.
Try this:
<div style="margin-left: 10px;">
<p>Reason for Referral</p>
<input type='text'></input>
<div style="display:inline"><a href='#'>Not Found?</a></div>
</div>
Maybe its below the combobox becouse the text is too long to fit in the outer div? that would make it go one row lower.
If you have something like:
<div class='group'>
<p>Reason for Referral</p><br/>
<input type='text'></input>
<div class='right'><a href='#'>Not Found?</a></div>
</div>
Then in css:
div.right {
float: right;
}
You should get something close to the effect you want.
I have a JPEG image that I want to slice into HTML, I am little confused about positioning things into divs. Can anyone suggest me how can I do this I am sending the jpeg along with the question.
Regards
Umair
I would look at what pieces seem to contain themselves. For instance, the fill out the form box would be a div, the legal info at the bottom would be a div, the why use online box would be a div, the 2 header pieces would also be a div. You could wrap the entire thing in a div and use a css sprite image (CSS Sprite article) for the background gradient.enter code here
<div id=pageWrapper>
<div id=header1>OnlineGrantFinders.com</div>
<div id=header2>Looking for grant money?</div>
<div id=mainContent>
<div class='infoText'>You can apply for grants ....</div>
<div class='infoText' id='whyUseUs'>Why Use Online Grant Finders.com....</div>
<div id=fileForm>Fill Out the form below....</div>
</div>
<div id='footer'>This website is owned...</div>
</div>
The css shouldn't be too difficult from here. If you don't know about floating elements I would look into that and learn how to clear them as well. The fileForm element would be best as an absolutely positioned element I would suspect.