I am trying to create 5 links in my web app. The problem is that they need to be all positioned.
they are image links and they are like:
-----
| |
----- | |
| | -----
| | -----
----- | |
----- | |
| | -----
| | -----
----- | |
| |
-----
<a href='#'class='link'><img src='btn1.png'/></a>
<a href='#'class='link'><img src='btn2.png'/></a>
<a href='#'class='link'><img src='btn3.png'/></a>
<a href='#'class='link'><img src='btn4.png'/></a>
<a href='#'class='link'><img src='btn5.png'/></a>
I was wondering what the best way is to do this. Thanks a lot!
the easiest way is using relative container and absolute links,maybe will need responsive modifications it depends of your layout
http://jsfiddle.net/venuK/1/
<p>content before</p>
<div class="absolute-container">
<a href='#'class='link'>img1</a>
<a href='#'class='link'>img2</a>
<a href='#'class='link'>img3</a>
<a href='#'class='link'>img4</a>
<a href='#'class='link'>img5</a>
</div>
<p>content after</p>
.absolute-container{
position:relative;
width:100%;
height:200px;
}
.absolute-container a{
position:absolute;
display:block;
height:60px;
width:50px;
border:1px dotted red;
}
.absolute-container a:nth-child(1){
top:40px;
left:0;
}
.absolute-container a:nth-child(2){
top:0;
left:70px;
}
.absolute-container a:nth-child(3){
top:80px;
left:160px;
}
.absolute-container a:nth-child(4){
top:130px;
left:10px;
}
.absolute-container a:nth-child(5){
top:150px;
left:130px;
}
Related
Salaam,
I want to make an HTML layout like below:
+----------------------+-----+
| upSide | |
|----------------------| |
| |right|
| |side |
| | |
| mainSide | |
| | |
| | |
+----------------------+-----+
Some thing like this:
<div id="rightSide"></div>
<div id="mainFrame">
<div id="upside"></div>
<div id="mainSide"></div>
</div>
where I want to #upSide be over the #mainSide, in other word when you scrolling the #mainFrame, elements which in the #mainSide be visible at behind the #upSide, when the #upSide's background is transparent(e.g. background-color:rgba(0,0,0,0.35)).
Problem is when I set some things like below:
#upSide{
position:fixed;
width: 80%;
}
#rightSide{
width:20%;
float:right;
position:relative;
}
#mainFrame{
height:100%;
overflow:auto;
}
all things true, but the scrollbar(which in the #mainFrame) goes behind the #upSide.
What's your suggestion for this situation?
The scroll bar goes behind #upSide because of the position:fixed that you added.
Try something like this.
<html>
<head>
<style>
#upSide{
height:200px;
width: 80%;
background:blue;
}
#mainSide{
height:800px;
width: 80%;
background:green;
}
#rightSide{
width:20%;
height:800px;
float:right;
position:relative;
background:red;
}
#mainFrame{
height:800px;
width: 80%;
overflow:auto;
background:yellow;
}
</style>
</head>
<body>
<div id="rightSide"></div>
<div id="mainFrame">
<div id="upside"></div>
<div id="mainSide"></div>
</div>
</body>
I have a container of a fixed size, containing a vertical list of blocks of varying heights .
I would like to hide all blocks that does not fit completely within the container.
So assuming something like this:
#container{
height: 150px;
width: 220px;
border:1px solid green;
padding:10px;
overflow: hidden;
}
.inner{
border:1px solid blue;
height: 50px;
width: 200px;
margin: 10px;
text-align: center;
vertical-align: middle;
line-height: 50px;
}
<div id="container" >
<div class="inner">A</div>
<div class="inner">B</div>
<div class="inner">C</div>
<div class="inner">D</div>
</div>
(See: http://jsfiddle.net/TSCzS/)
I get something like this:
+-------------+
| |
| +-------+ |
| | A | |
| +-------+ |
| |
| +-------+ |
| | B | |
| +-------+ |
| |
| +-------+ |
+--| C |--+
+-------+
+-------+
| D |
+-------+
I do not want to just have the C block clipped:
(as when simply using overflow:hidden on the container)
+-------------+
| |
| +-------+ |
| | A | |
| +-------+ |
| |
| +-------+ |
| | B | |
| +-------+ |
| |
| +-------+ |
| | C | |
+-------------+
but instead, the blocks C and D should be hidden like this:
+-------------+
| |
| +-------+ |
| | A | |
| +-------+ |
| |
| +-------+ |
| | B | |
| +-------+ |
| |
| |
+-------------+
How can I do this?
My application for this is that I have a full screen browser window (in a digital signage application) showing the "latest news". The units have no input devices, so scrolling is not possible.
A similar question, but without a working solution:
Hide block which does not fit container height
Thanks.
The only way I can imagine a solution is via JavaScript. CSS itself wont help.
Here's an update of your fiddle: http://jsfiddle.net/bukfixart/TSCzS/1/
This snippet selects all clipping elements and hides them.
$('.inner', '#container').filter(function() {
return $('#container').offset().top + $('#container').height() < $(this).offset().top + $(this).height();
}).hide();
For this solution you need to use jQuery
edit:
For all the pure CSS enthusiasts ;-)
http://jsfiddle.net/bukfixart/CfMer/
I tried a solution without javascript and used css3 transformations instead. Therefore some markup changes are necessary
<div id="outercontainer" >
<div id="container" >
<div class="outer">
<div class="inner">A</div>
</div>
<div class="outer">
<div class="inner">B</div>
</div>
<div class="outer">
<div class="inner">C</div>
</div>
<div class="outer">
<div class="inner">D</div>
</div>
<div style="clear:left;"></div>
</div>
</div>
And here's the a little bit stranger style code
#outercontainer {
width:240px; /* container width + padding */
height:170px; /* container height + padding */
border:1px solid green;
}
#container{
height: 220px; /* container width ^^ */
width: 150px; /* container height ^^ */
padding:10px;
overflow: hidden;
position:relative;
left:35px; /* half of difference from width + padding to outer container width */
top:-35px; /* half of difference from height + padding to outer container height */
-webkit-transform:rotate(90deg);
}
.outer{
float:left;
height:202px; /* width of the inner box + border */
width:52px; /* height of the inner box + border */
margin:10px 10px 10px 0px;
line-height:200px; /* width of the inner box */
vertical-align:middle;
-webkit-transform:rotate(-90deg);
}
.inner{
border:1px solid blue;
height: 50px;
width: 200px;
text-align: center;
vertical-align: middle;
line-height: 50px;
display:inline-block;
position: relative;
left: -75px; /* half of difference between width and height */
}
I'd like to have a two column list of items with square image and two lines of text next to it, nicely aligned
_________ ________
| | | | |
| | Line one h3 tag | | | Line one h3 tag
| | Line two p tag | | | Line two p tag
| | | | |
_________ | __________
Here's my code: http://jsfiddle.net/PEMKs/3/
HTML:
<div class="wrapper">
<div class="right clearfix">
<img src="http://placehold.it/100x100" >
<h4>My name is Markup.</h4><p>I live in Vienna</p>
</div>
<div class="left ">
<img src="http://placehold.it/100x100" >
<h4>My name is Markup.</h4> <p>I live in Vienna</p>
</div>
</div>
CSS:
.wrapper{
width:650px
}
.right{
width:300px;
height:100px;
position:relative;
float:right;
}
.right h4, .right p{
float:right;
margin-right:25px;
font-family:sans-serif;
}
.left{
width:300px;
height:100px;
position:relative;
margin-right:145px;
border-right:1px dashed #cccccc;
}
.left h4, .left p{
float:right;
margin-right:25px;
font-family:sans-serif;
}
.clearfix:after {
content: ".";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
p{
display:inline-block;
}
How's this work for you?
http://jsfiddle.net/42XUW/
<div class="wrapper">
<div class="right clearfix">
<img src="http://placehold.it/100x100" style="float:left;" >
<h4>My name is Markup.</h4><p>I live in Vienna</p>
</div>
<div class="left ">
<img src="http://placehold.it/100x100" style="float:left;" >
<h4>My name is Markup.</h4> <p>I live in Vienna</p>
</div>
</div>
the style of the image will be set to float:left. It solves your problem.
You can add a CSS style to your image
.left img { float: right;}
The basic question is: How can a be shrink-to-fit over an element while itself containing other elements?
The goal is to have a (centered) menu over an (centered) image, which´s width and height shall relate to the images dimensions.
All of it being responsive, meaning no absolute sizes!
Here´s the sample code:
<div id="menu">
<img src="picture.jpg" />
<div id="left">
test1
</div>
<div id="right">
test2
</div>
</div>
#menu{
position:relative;
display: table; /*tried inline-block as well */
text-align: center;
line-height: 1;
}
#menu img{
height: 90%;
position:relative;
}
#left{
width: 46%;
background-color: #ffcdcc;
float: left;
text-align: right;
}
#clear{
clear: both;
}
#right{
width: 46%;
background-color: #324344;
float: right;
text-align: left;
}
and this is what it´s supposed to look like:
____________________________________
| |
| ------------------------------ |
| | | |
| | p i c t u r e | |
| | | |
| | | |
| | | |
| | | |
| | left <button> right | |
| | | |
| ------------------------------ |
| |
------------------------------------
The height/width ratio of the picture is always the same. It´s total size depends on the users window though.
I just can´t get the "menu" div to wrap around the and the "left" and "right" divs be positionable at the same time.
Is this even possible? I´m not even talking about browser compatibiliy yet...
See if this works: http://jsfiddle.net/sdvnh/1/
Changes:
#menu {
display: block;
}
#menu img{
height: 90%;
width: 90%;
}
I got a tag inside a :
#in .css file
div.box {
width: 50px;
height: 30px;
}
#in .html file
<div class="box">
<p>Here</p>
</div>
and it looks like this:
------------
| |
| Here |
| |
------------
but I want to put <p> at the bottom of <div>, like this:
------------
| |
| |
| Here |
------------
How?
add this
div.box {
width: 50px;
height: 30px;
position:relative;
}
div.box p{
margin:0;
padding:0;
position:absolute;
bottom:0;
}