I'm creating a website based on unequal column, the site divided by .col-md-2 and .col-md-10 and it's look like this:
-------------------------------------
|Side | Content |
| | |
| | |
-------------------------------------
And then I want divide the content again into 2 unequal columns with <aside>, I want it has same layout styling, so inside .col-md-10, i uses .col-md-8 for Content and col-md-4 for <aside>, so it's look like this:
-----------------------------------------
|Side | Content | Aside |
| | | |
| | | |
-----------------------------------------
Inside Content I want to fill it with <article>, and each of it has Detail and I want put it on Side position while the content <article> still inside the Content.
To achieve this, I split <article> into 2 unequal columns again and pull each of them, so it uses .col-md-pull-4 .col-md-4 and .col-md-pull-4 .col-md-8, and currently, it looks like:
-----------------------------------------
|Side | Content | Aside |
|(Detail) | (Article) *| | |
| | | |
-----------------------------------------
the layout works as expected, however the Article width only reach until *|
if i use .col-md-pull-4 .col-md-12 on <article> content, it will looks like this
-----------------------------------------
|Side | Content | Aside |
|(Detail) | | |
| | (Article) | |
| | | |
-----------------------------------------
The article has full width, but it create a new "row"
the output i want is:
-----------------------------------------
|Side | Content | Aside |
|(Detail) | (Article) | |
| | | |
-----------------------------------------
Update
Here is my current code on bootply
Progress
I haven't figure out how to do this, but basically, what i want is pull a column outside of its container / parent and fill the container with another column, if you think i was doing it wrong, provide a correct way to achieve this kind of layout is very appreciated.
Update 2
Finally I ended up messing with margin-left property with minus values, since it displayed incorrectly under specific resolution, i have to use media queries to workaround against it.
If there are better ways to achieve this kind of layout, correct me how to implement this will be very appreciated
Related
This is related to Creating a peek in effect with animate.css which was answered via using overflow:hidden, but does not work with column-count:
I am using the excellent animate.css library for animations. I was wondering if its possible to create a "peek in" and "peek out" effect that is similar to the SlideIn/SlideOut but with the following difference:
slideOutRight
+-------------+ +-------------+
| | | |
| | | |
| +---------+ | +---+----+
| | anim | | | anim |
| +---------+ | +---+----+
| | | |
+-------------+ +-------------+
peekOutRight
+-------------+ +--------------+
| | | |
| | | |
| +---------+ | +----+
| | anim | | | an|
| +---------+ | +----+
| | | |
+-------------+ +--------------+
In other words, the difference is that peek does not go out of the parent object boundaries. I've tried adding clip/clip-path to the anim element but it does not look like translate3d takes that into account.
The slideInRight/OutRight code of animate.css is pretty straighforward -
It's moving X by 100% - I'd like to make sure it gets cropped as it moves out of the parent frame.
I've setup a codepen to illustrate this in action - would appreciate any advice
http://codepen.io/pliablepixels/pen/pgxqOX
The caveat is that it must work with -column-count. as you see in the codepen, the moment you use column-count, the 2nd column does not show the header
Added Clarification on why I need it to work with columns:
I need to pack the frames so that odd sized frames are not arranged by row. This codepen illustrates the issue of using flex-row vs. column-count -http://codepen.io/pliablepixels/pen/MKPLBp
If you switch to byrow you'll see images are aligned in a way that the row takes up the height of the largest image, which means if you reduce the browser width,"D" goes to row 3 instead of going under "C". Switch to column mode and it packs in better.
Request:
I am trying to make my website have a background where it repeats along the x-axis, but when it finishes on the y-axis it display a different image. I would like it to continue.
Example:
---------------
| |
| (ORIGINAL) | (repeats on x-axis)
| |
---------------
| (SECOND) |
| |
---------------
| (SECOND) |
| |
---------------
| (SECOND) |
| |
---------------
| (SECOND) |
| |
---------------
(Etc.)
How would I accomplish this?
Use the multiple backgrounds CSS3 feature http://www.w3.org/TR/css3-background/#layering
Have a look at a jsfiddle live example at http://jsfiddle.net/pWw2A/
body {
background: url(http://placehold.it/150x80/ff0000/ffffff) repeat-x,
url(http://placehold.it/150x50/00ff00/000000) 0 80px repeat-y;
}
First the scrolling background can be done with background-attachment:fixed;
Then for the multiple backgrounds you'll need to use CSS3 Like this: http://www.w3schools.com/css3/tryit.asp?filename=trycss3_background_multiple
This tutorial might help you to achieve what you want:
http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/
It has a nice example on how to do this (mixed with the fixed background will be is more or less what you want):
http://silverbackapp.com/
HOPE IT HELPS!
I want to create an static drawing (say any animals like giraffe) using some points, lines, drawing etc. Now i want to update the drawing by passing the parameters say height of his legs, its width or its color.
The parameters are supplied from the web page. The image will be a 2D image
I am searching on which technology should i implement this for more than 10 hours but cannot find any perfect solution.
Right now i am thinking i can use Adobe flash in which i can do some programming to create an drawing and change the drawing by passing the parameters to a Flash file, i think we can pass it when we embed an flv.
Whether i am right? Or there is any other solution. I have no knowledge of any thing except asp.net
Please help.
Any help is appreciated
I'd like to build on the previous post - you could also incorporate svg graphics into the mix. This would allow you control over color, width, and height. You can manipulate SVG files with javascript (Dynamic SVG). You'll probably get that going faster than learning action script.
If you just want to be able to stretch or recolor parts of an image, you could do that using ordinary HTML parameters. Just create a giraffe image, break it into the chunks that you want to be able to resize independently, and use CSS layout or tables to assemble them. Here's an artistic rendering:
___________________________
|image 1 V__ <<|
|head |oo | <<| <--- delicious acacia leaves
| | < <<<|
---------------------------
|image 2 | | |
|neck |o| |
| | | |
---------------------------
|image 3 / | |
|body /------/ \ |
| | \ |
---------------------------
|image 4| | | | | | | | |
|legs | | | | | | | | |
| \_/ \_/ \_/ \_/ | <--- I do not know what giraffe feet look like
---------------------------
If you want to give your giraffe a short neck without changing anything else about it, you can just alter the height attribute of the second image, like so:
___________________________
|image 1 V__ <<|
|head |oo | <<|
| | < <<<|
---------------------------
|image 2 | | |
---------------------------
|image 3 / | |
|body /------/ \ |
| | \ |
---------------------------
|image 4| | | | | | | | |
|legs | | | | | | | | |
| \_/ \_/ \_/ \_/ |
---------------------------
Obviously, changing the width of just one image would cause the boundaries to no longer match up, so you'd need to change them all to the same value.
To handle color changes, you can make use of image transparency. Each image would be white, with a transparent region representing the giraffe. Then, you'd set the background color of the div or table cell to the color you want the giraffe to appear. Again, this is clunky, but it would let you do what you want without needing anything other than static GIF / PNG images and basic HTML.
Okay, I have an html page with two iframes on it so.
-------------------------------------------------
| PARENT |
| |
| |
| [iframe1 id=i1 name=i1] |
| |
| |
| |
| [iframe2 id=i2 name=i2] |
| |
| |
-------------------------------------------------
When I click on a link in iframe1, i need the resulting page to display in iframe2. I have tried:
<a href=blah.html target=parent.i2>link</a>
but that does not work.
any one know how to do this?
I think you might need JavaScript. Something like
onclick="javascript:parent.i2.document.location='blah.html'"
link
You just need to put "i2" it should be unique window name in this page. No need to specify parent etc.
Ok, not too sure where to start...
I'm putting myself together a blogger, completely gutting it's css and just using it as a simple content manager. here is the test site i've been working with
http://jamesparishtestblog.blogspot.com/
Ignore the header, its broken, but I know what I'm doing there. My problem is with the film reviews (stolen from apple trailers as temp content). As you resize the page, they flow fluidly into rows of different lengths. Great! Trouble is, the second row (and thus third, fourth, etc.) aligns itself vertically to the bottom of the longest (lowest) div in the above row. However, I want each div to fit neatly below the one above, 15px apart, and to flow neatly if another div is expanded (by clicking read more...).
Placing the divs in a column is ruled out, because I want the top row to contain the most recent posts side by side (with a column they would be below one another on the left hand side).
Set heights for the divs is ruled out too, because the articles need to expand, and for the full desired design, be mis-matched intentionally.
This has been troubling me for hours. I hope I've explained myself clearly, and that someone will can help.
Thanks for your time.
So you want this?
--------------------------
| __________ _______ |
| | | | | |
| | | | | |
| | | | | |
| ---------- | | |
| __________ | | |
| | | |_____| |
| | | _______ |
| | | | | |
| ---------- | | |
| ------- |
|________________________|
Without using columns you can't do it relying on CSS alone. You'd need to use some javascript or server side stuff to put things in the right place. Essentially you want a collage, too bad there's no "display: collage"!
Of course, I could be completely misunderstanding you.
Edit:
"any suggestions on the javascript front?"
I use mootools for almost all my sites. I'll define a bit there first:
dispose : takes an element out of the dom and stores it in a variable.
inject : plops an element into the dom.
I'd load these into columns, then dispose all the ones in the "recent" column and inject them back in to the top of the rest of the columns, one for each column. In other words, all the layout is done with CSS, the only javascript going on is putting your "recent" stuff as the top "row".