It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center.
Closed 10 years ago.
Is this Link possible without javascript?
I'm trying to learn css and floating layouts.
I've searched on the forums and people's links to this site, and even if this is looks like a good solution I would like to broaden my skills in css and html.
Using CSS3 Columns you can easily achieve the same result on modern browser:
Example jsbin: http://jsbin.com/ivumoq/1/edit
relevant CSS
body > div {
-webkit-column-count:3;
-webkit-column-width:200px;
-moz-column-count:3;
-moz-column-width:200px
column-count:3;
column-width:200px;
}
You may also define the number of columns according to a specific mediaquery. E.g. if you wanto to display 4 columns when the viewport is larger that > 960px
#media all and (min-width:960px) {
body > div {
-webkit-column-count:4;
-moz-column-count:4;
column-count:4;
}
}
So you could emulate the reflow of masonry on browser resize.
Example with mediaqueries: http://jsbin.com/ivumoq/2/edit
Otherwise, using float you need to define three floated containers (as three independent columns) and place approx.ly 1/3 of the images on each container.
Working Fiddle
HTML:
<div class="parent">
<div class="left-col">
<div class="small"></div>
<div class="medium"></div>
<div class="large"></div>
<div class="large"></div>
<div class="medium"></div>
<div class="small"></div>
</div>
<div class="right-col">
<div class="large"></div>
<div class="medium"></div>
<div class="small"></div>
<div class="small"></div>
<div class="medium"></div>
<div class="large"></div>
</div>
</div>
CSS:
.parent {
width:400px;
height:auto !important;
background:yellow;
}
.left-col {
max-width:200px;
height:0 auto;
width:200px;
float:left;
display:inline-block;
}
.right-col {
max-width:200px;
height:0 auto;
width:200px;
float:left;
display:inline-block;
}
.small {
width:190px;
margin:10px;
height:100px;
background:green;
display:block;
}
.medium {
width:190px;
margin:10px;
height:200px;
background:blue;
display:block;
}
.large {
width:190px;
margin:10px;
background:brown;
height:400px;
display:block;
}
it is possible, but you'll have to have different columns. If you use display: inline-block the images will not align properly, and if you float them, you'll have a problem when the first one on a row is taller then the last one.
I fiddled it up:
http://jsfiddle.net/VeecS/
one column html:
<div class="col">
<h2>Column1</h2>
<img src="http://placehold.it/300X150" />
<img src="http://placehold.it/300X320" />
<img src="http://placehold.it/300X120" />
</div>
css:
.col {
width:24%;
padding: 10px 0;
background: #f1f1f1;
float: left;
margin-right: 1%;
}
Related
<div class="wrapper">
<nav class="main-menu">
<div class="main-menu-placeholder">
<div class="main-menu-wrapper">
<ul class="top-main-menu load-responsive" rel="Main Menu">
<li>ANASAYFA</li>
<li>İÇİNDEKİLER</li>
<li>EDİTÖR</li>
</ul>
</div>
</div>
</nav>
</div>
Here is my codes what i asking about. i have tried everything to make it centered but i cant do it. is there any solution ?
DEMO
Here is a solution that centers it both vertically and horizontally, as you didn't mention how... The basic idea behind it is to place a div with position:relative into one positioned absolute
.wrapper {
position:absolute;
width:100%;
vertical-align:center;
line-height:70px;
height:70px;
background:black;
}
.main-menu {
position:relative;
width:70%;
background:#FE4C03;
line-height:35px;
margin: 0 auto;
}
li,ul{
list-style-type:none;
display:inline;
margin:0 0;
}
this might be a simple enough solution for you:
<div class="main-menu-wrapper">
.main-menu-wrapper {
display:table;
margin:0 auto 0 auto;
}
Im trying to do a simple layout with css and html, the layout consist of a menu on the left and some boxes on the right side, the idea is that the left side will alway be a menu. How can I fix that the content never get under the menu ? or how can I exapand the menu
FIDDLE Demo http://jsfiddle.net/56JdE/
CSS
#wrapper
{
margin:0 auto;
width:960px;
height:auto;
}
#leftNav
{
height:500px;
width:200px;
background:#F00;
float:left;
margin-right:10px;
}
#div1
{
height:200px;
width:250px;
float:left;
background:#000;
margin-right:10px;
}
#div2
{
height:300px;
width:400px;
background:#00C;
float:left;
margin-right:10px;
}
#div3
{
height:200px;
width:250px;
float:left;
background:#00C;
margin-right:10px;
}
#div4
{
height:200px;
width:400px;
float:left;
background:#000;
margin-right:10px;
}
HTML
<div id="wrapper">
<div id="leftNav">
<h2>Menu</h2>
</div>
<div id="div1">
</div>
<div id="div2">
</div>
<div id="div3">
</div>
<div id="div4">
</div>
<div id="div4">
</div>
</div>
From the look of your FIDDLE, I believe the question is why is my div under the menu?
This is because you have two div4's.
I amended your FIDDLE Demo which fixed the issue.
<div id="div4">
</div>
<div id="div4"> -Remove this!
</div> -And this!
Having two div4's caused the total width to exceed your wrapper width making the float:leftproperty move the div to under your menu.
You can just wrap the div's in another div, and make the margin 210px to left so that is never goes underneath the menu.
#contentRight{
margin-left:210px;
}
<div id="wrapper">
<div id="leftNav">
<h2>Menu</h2>
</div>
<div id="contentRight">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div class="div4"></div>
<div class="div4"></div>
</div>
See a working example here: http://jsfiddle.net/mtruty/HQ6WJ/3/
Also, ID's should correspond to a single element within the DOM. You should change that second div4 to div5, or make those div's classes. (e.g. class="div4"). I bet you were just adding that extra div4 to show how the box overflowed, but none the less, it is good to always make sure your markup is valid.
Just add a wrapper around content, and set the apropriate width's so they match the parent wrapper.
<div id="leftNav">
<h2>Menu</h2>
</div>
<div id="content_wrapper">
...
</div>
See fiddle:
http://jsfiddle.net/56JdE/2/
There's two simple ways you could do this. Either add some padding to the wrapper, maybe 20% to the left or whatever the width of the menu would be, and then absolutely position that menu to the left.
OR
You could create a parent container for your content, within the wrapper, and float both the menu ( first ) and the new container to fill up the wrapper accordingly. If you go the float method you'd have to add a clear somewhere after the content to keep the wrapper from collapsing, or float it as well.
.wrapper {
margin:0 auto;
}
.menu {
height:500px;
width:20%;
float: left;
background: red;
}
.content {
width: 80%;
float: left;
}
Full example # http://jsfiddle.net/M58C6/2/
I can't seem to center my image slider, seems like an easy fix but I can't get it to center dead in the middle of my page (centered left & right, centered top and bottom) Any suggestions?
The image slider is #logo-and-slider in the CSS
Heres the jsfiddle: http://jsfiddle.net/gZDVL/13/ (thanks to #MaggiQall)
And here is a live link to it: http://jtcraddock.ie/boards/
I don't understand.
Is this your desired result?
<div><img src="http://testjd.net46.net/1.jpg" alt="1"/></div>
<div><img src="http://testjd.net46.net/2.jpg" alt="1"/></div>
<div><img src="http://testjd.net46.net/3.jpg" alt="1"/></div>
I closed your img-tags. with />
http://jsfiddle.net/gZDVL/2/
I am not very sure about whether you want to include the logo in the content to be centered. I have shown the idea below. I have added some borders to clearly display how the elements are laid out. If you don't want to include logo remove it from the HTML structure. Basically what I have done is placed the content in a table-cell element with the content center aligned horizontally with middle vertical alignment. That places the content at "dead center" as you wanted :-) See the fiddle at http://jsfiddle.net/linuxexpert/WYadL/
HTML:
<html>
<body>
<div class="outer-box">
<div class="inner-box">
<div class="innermost-box">
<div class="logo">
Logo
</div>
<div class="controller">
<
</div>
<div class="scroller">
Image scroller
</div>
<div class="controller">
>
</div>
</div>
</div>
</div>
</body>
</html>
CSS:
html, body {
width:100%;
height:100%;
}
.outer-box {
display:table;
width:100%;
height:100%;
}
.inner-box {
display:table-cell;
vertical-align:middle;
height:100%;
width:100%;
border:1px solid red;
text-align:center;
}
.innermost-box {
display:table;
height:50%;
width:80%;
margin:0px auto;
border:1px solid blue;
}
.innermost-box > * {
display:table-cell;
height:100%;
vertical-align:middle;
border:1px solid green;
}
.logo {
width:40%;
}
.controller {
width:5%;
}
.scroller {
width:50%;
}
Could someone help me with creating a simple concept for content sliding?
What I want can be seen in this website's (https://www.palatine.fr) bottom part - 4 panels, which slide out on hover, and coming back to their original state after unhovering. I already tried a few fiddles with css blocks, but it gets up very complex, plus I know that I'll need jQuery in the end anyway for things like not stopping animation when the mouse unhovers a panel.
So what I'm asking is if anyone would be so kind and help me create a simple concept of this type of animation for content?
EDIT: http://jsfiddle.net/z3gY7/ is what I've done, yet it's not much at all, and probably won't be compatable at all. It's basicly done by div's and animations.
LIVE DEMO
HTML:
<div class="slideContent">
<p>Content here</p>
<div class="slideIn"><p>Sub Content</p></div>
</div>
CSS:
.slideContent, .slideIn{
height:300px;
width:180px;
}
.slideContent{
position:relative;
overflow:hidden;
}
.slideIn{
position:absolute;
left:0;
bottom:0px;
display:none;
}
jQ:
$('.slideContent').hover(function(){
$('.slideIn',this).stop().slideToggle();
});
Important note: This one works even better than the one on the website you provided :)
<div class="wrap">
<div class="wrap-inner">
<div class="normal">
Original text
</div>
<div class="hover">
other text
</div>
</div>
</div>
.wrap
{
display:block;
width:300px;
height: 300px;
position:absolute;
top:0px;
overflow:hidden;
}
.wrap-inner{
position:absolute;
height:600px;
width:300px;
top:0;
-webkit-transition: top 300ms ease;
}
.wrap-inner:hover{
top:-300px;
}
.normal
{
display:block;
width:300px;
height:300px;
background-color:green;
}
.hover
{
width:300px;
height:300px;
background-color:red;
}
I think you are close, just have to keep a 600px container inside wrap, that could hold the two 300px items one below other. Otherwise the second item wont be rendered when wrap height is made 300px.
http://jsfiddle.net/z3gY7/4/
http://jsfiddle.net/z3gY7/19/
HTML:
<div class="wrap">
<div class='box'>
<div class="normal">
Original text
</div>
<div class="hover">
other text
</div>
</div>
<div class='box'>
<div class="normal">
Original text222
</div>
<div class="hover">
other text2222
</div>
</div>
</div>
CSS:
.wrap
{
width:100%;
height: 300px;
position:absolute;
overflow:hidden;
}
.box {
width:25%;
height:600px;
float:left;
}
.normal {
width:100%;
height:300px;
background-color:blue;
}
.hover {
width:100%;
height:300px;
background-color:red;
}
And, jquery:
$('.box').hover(
function () {
$(this).stop().animate({ 'margin-top':'-300px' }, 1000);
},
function () {
$(this).stop().animate({ 'margin-top': '0px' }, 1000);
}
);
You can change speed, to fit your needs...
I am new to web programming. I want to use multiple column layout where each column will have content corresponding to column title, as used in tweetdeck app http://www.tweetdeck.com/ in my google chrome application. How can I go about doing this.
You can use flexbox to create the desired layout (JSFiddle):
HTML:
<div class="container">
<div class="container__column">Column 1</div>
<div class="container__column">Column 2</div>
<div class="container__column">Column 3</div>
<div class="container__column">Column 4</div>
</div>
CSS:
.container {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: flex; /* applying flexbox layout for all browsers */
}
.container__column {
-webkit-flex: 1;
-moz-flex: 1;
-ms-flex: 1;
flex: 1; /* 1 for equal column widths */
}
Your question is a bit vague. Are you asking how to achieve the same sort of layout or do you want to know how to populate a column with content?
If it's the former, you could do something like this:
HTML:
<body>
<div id="container">
<div class="columns" id="div1"></div>
<div class="columns" id="div3"></div>
<div class="columns" id="div2"></div>
</div>
CSS:
body {
padding:0px;
margin:0px;
}
#container {
width:900px;
margin:0 auto;
text-align:center;
}
.columns {
width:280px;
height:250px;
background:#CCCCCC;
}
#div1 {
float:left;
}
#div2 {
margin: 0 auto;
}
#div3 {
float:right;
}
To give each column content it really depends what you're doing. If it's your own content, you could use a database and AJAX to pull in content from PHP scrips.