I've been experimenting with bootstrap and I think it's great. However, I've come to an issue that I would love to be able to apply this style, but do not know how to properly do so. What I want is for a section to be split into 2 halves (side by side) - one section has text and content and the other has an image. I know how to achieve this with bootstrap using containers/rows/columns, but I want to remove the borders and margins from the second section so that the image I set in there will take up the full space. It is difficult for me to describe in writing exactly what I want to I have attached a screenshot to depict what I mean.
Please refer to the "OTHER EXPERTISE" and "AMAZING PORTFOLIO" sections in screenshot..
It sounds like all your trying to do is make that other section full width? In that case just set the container width to 100%
Related
I'm fairly new to bootstrap and I having trouble making my site do what I want it to. Hopefully someone can steer me in the right direction.
I used bootstrap to make a nice responsive grid for my site within a container. The problem I am having is that I would like my backgrounds (different backgrounds in different sections) to fill browser window while the page content stays at 1170px max-width. Is there anyway to do this?
of course. adding your own css is not that bad but make sure your css is in last (e.g , )
do this in your background telling your div
<div style="position:absolute; top:0;left:0;background-image: url('img/urbg.png');">
dont box here. experiment, play and explore. bootstrap is boxed dont get TRAP with BOOTSTRAP. its cool but you need to know when to handle design with image background. see this
This is essentially what I'm trying to do:
I have an image I want to use as the background for the webpage, and I want to put content over it, while keeping everything responsive so it's always centered!. I'm using Foundation 4, which is making things tricky (but I want to learn how to do it this way). The black boxes will be images, and the idea behind this is that everything can remain responsive.
The black boxes are supposed to be centered. I've tried using absolute positioning for the boxes and forgoing trying to put them in a , but it doesn't seem to work too well (i could be doing something wrong).
Overlapping anything in Foundation 4 seems tough. I must be going about it wrong somehow. Thanks for your time!
I'd need to check your HTML code structure to confirm but I think what you want is .small-centered and .large-centered (they work the same as .small-1,.large-1 but for centering).
http://foundation.zurb.com/docs/components/grid.html (Search for Centered Columns on page).
Also for the boxes I hope you are using Foundation's Block-Grid for your boxes - it will make your boxing a lot easier to do.
http://foundation.zurb.com/docs/components/block-grid.html
Can anyone please help?
I am trying to do the following layout in HTML and CSS. This image is just a rough representation of the general layout for a website.
The top bar (or header) will be e.g. light grey and the sidebar 1 will be the same colour. The sidebar 1 also has a rounded bottom left corner and the sidebar 2 has a rounded top right hand corner. The effect I’m trying to recreate is that the header will “flow” into the sidebar 1 and that the sidebar 2 will “flow” into the footer.
So far I have the boxes coded so that it seems that they are touching and I also have the rounded corners done. But what Ive been stuck with for the whole day now is how to do the colours so that it seems that the 1 is flowing into the next one. Here is an example of what I have so far (still very rough as I am just trying to block out the shapes etc.) hansmoolman.com
The relevant section in the website above is the one called "This is the main container" which is about half way down the page and contains the sidebar 1 (the one with the Twitter feed) and sidebar 2 (the one with all the Lorenm Ipsum stuff). The top bar will be the one with the logo and navigation stuff. The footer is not yet implemented.
Can anyone suggest how I can do this? I am trying to stay away from a background image that will represent this as the sidebar 1 and 2 should be able to grow dynamically and independently of one another should more content be added.
Or can this done with a background image/images?
Can anyone please help as all the solutions I have been working on has become very messy with boxes inside and on top of other boxes. It does not look good code wise and I am concerned that it might not display as intended on all devices.
If more clarity or code is needed on this question just let me know and I can provide both.
Thanks in advance
*Edit - this is a possible solution as suggested by flem
Build your layot with divs like this (spacing just for visibility):
You will also need an element behind each of the rounded corners with the opposite colour. (You only need to do one of them if you set your body background colour.)
Firstly, I'd like to say that I don't want to do this with Javascript.
http://jsfiddle.net/WqrBY/2/
In this jsFiddle, I've got two columns but the bottom right div is obviously aligned with the bottom left. I'd like to be able to (without adjusting the markup) move the bottom right div just under the top right (just like how the bottom left is under the top left).
I don't want to change the markup because the order of the divs is important when it switches to a one-column layout for smaller screen sizes.
Can anyone help me out here?
I'm going to preface this with saying I'm not sure why this works... I'm going to keep fiddling to test it. Comments welcome.
Here's my fiddle
Edit:
I know that you specifically mentioned that you don't want to 'change' the markup because of the div ordering. Would you be open to adding to the markup? This shouldn't change the order of information, but it might be a simple fix to what you're trying to do: http://jsfiddle.net/tracyfu/WqrBY/7/
I know how to make it look like a table, and I know how it would grow when info is added, but the problem is the table's border is rounded and has a header area to it. I was thinking of making it a background image but I don't know how I could get it to grow while keeping the rounded corners..
Image link:
http://i51.tinypic.com/15yyhe0.jpg
Any ideas would be very helpful
To make it grow you have to set the rounded corners as separate backgrounds. In html 5 this is a lot easier, however for the current usage you can check out here
This is an old site, that still works. This can also be done with javascript that doesn't use any images, there are lots of options depending on your end goal.
Are you wanting to grow width or height? Adding columns or rows? Are you going to use <table> or <div> tags?
Or are thinking of using accordions that expand upon user click JS Accordions