I have a page with a vertical drop down menu, and i need to create a photo gallery next to it, however, the gallery is displaying below the menu instead. I've tried adjusting the dimensions to make room for it, but nothing is working.
#gallery {
position:absolute;
float:left;
display:block;
width:500px;
}
.square {
width:150px;
height:150px;
float:left;
position:relative;
background-color:#dbdbdb;
}
.square2 {
width:149px;
height:149px;
float:left;
position:relative;
border: 1px solid;
border-color:#dbdbdb;
}
There are multiple ways of achieving this:
Apply the style display:inline-block; to the DIVs in question
Specify float:left; and a width: on the DIVs that should be next to each other
(For either method) make sure the container is wide enough to fit both of them next to each other
Related
I have two divs inside a single div and I want to hide the left div on clicking button.I am trying but hiding is done on lower to upper side and i want toggling from right to left.can someone give me suggestion....
Here is my code..
.pg_bd {
width:100%;
height:100%;
display:table-caption;
}
.pg_bd_left_mod {
width:240px;
background-color:#7f7f7f;
margin-top:5%;
margin-left : 0.5%;
/*display:inline-block;*/
}
.pg_bd_right_mod {
width:85%;
height:100%;
background-color:#7f7f7f;
float:right;
}
This question already has answers here:
How to align a <div> to the middle (horizontally/width) of the page [duplicate]
(27 answers)
Closed 8 years ago.
I'm trying to make a kind of menu where consists of many DVD covers. When the cursor is positioned over each cover it will show the complete title name in a single line (not wrapped inside the cover container). How can I align the title right in the center of each cover.
Note: I would like to place the title a bit above the cover, not completely over it.
Here is the HTML example:
<div id="cover"><span>Here is the title in a single line!</span></div>
Here is the CSS:
#cover{
height:200px;
width: 150px;
background-color:#00f;
margin-top:50px;
margin-left:auto;
margin-right:auto;
}
#cover span{
position:absolute;
background-color:#0f0;
display:none;
}
#cover:hover span{
display:block;
}
JSFIDDLE: example
When the cursor is positioned over each cover it will show the
complete title name in a single line (not wrapped inside the cover
container). How can I align the title right in the center of each
cover.
I think this will take care of it.
Codepen.io Demo
CSS
.cover{
height:200px;
width: 150px;
background-color:#00f;
margin-top:50px;
margin-left:auto;
margin-right:auto;
position: relative;
}
.cover span{
position:absolute;
background-color:#0f0;
display:none;
color:white;
}
.cover:hover span{
display:block;
position: absolute;
left:50%;
top:10%; /* adjust to suit */
width:auto;
white-space: nowrap;
-webkit-transform:translateX(-50%);
transform:translateX(-50%);
}
I would like to place the title a bit above the cover, not completely
over it.
I'm not sure what this means but the vertical positon can be adjusted by means of the top value.
"Piggybacking" on #Paulie_D's answer, I would include the element's properties in the 'normal' state rather than on the :hover state. Two benefits of this:
The element's properties don't need to be applied on every :hover action, hence optimizing elements' repaint a bit.
Just in case you want to show that content on the 'normal' state, the element will already have all the styles applied to it.
Here's what I mean:
.cover {
height:200px;
width: 150px;
background-color:#00f;
margin-top:50px;
margin-left:auto;
margin-right:auto;
position: relative;
}
.cover span {
position:absolute;
background-color:#f00;
white-space: nowrap;
width:auto;
transform:translateX(-50%);
position: absolute;
left:50%;
top:10%; /* adjust to suit */
display: none;
}
.cover:hover span{
display:block;
}
Truth be told though:
Using :hover to display content is a content strategy and user experience bad practice: http://uxmovement.com/navigation/why-hover-menus-do-users-more-harm-than-good/
Not only that but the content cannot be seen in touch screen devices, which renders this approach completely unusable.
Good luck.
I have some trouble with my website.
I have a contact from which is based on 4 divs posisioned like this:
div 1 is the place where you can fill out your information
div 2 is the textarea for your message and a send button
div 3 is contact information
and div 4 are social media icons.
this all works great. on mobile they're are scaled beneath eachother and it works like a charm.
But now my designer want to add a format for landscape posioned mobiles (which I agree with him is nesacery because the contact page is way to long if you keep all the divs beneath eachother. so what he came up with is:
so div 1 and 2 beneath eachother with all the fill out fields. and on the right the information en social media icons.
but here starts my problem. because floating items will go beneath eachother in order. this means that div2 will stay beside div 2 and div 3 will be beneath div 1 like this (the arrow incades which 2 I want to swap:
is there any way to change this by just using css? the solution I came up with is writing a a new code posisioned in the good way for this problem and make it display none until the right landscape mode is registerd.. but this would be a bit of a heavy solution for such a problem in my opinion. so anyway has a better idea:
here a fiddle:http://jsfiddle.net/skunheal/p6Yy6/
#container{
height:200px;
width:400px;
background:#212121;
}
#id1{
height:90px;
width:190px;
background:#fff;
float: left;
}
#id2{
height:90px;
width:190px;
background:#fff;
float: left;
}
#id3{
height:90px;
width:190px;
background:#fff;
float: left;
}
#id4{
height:90px;
width:190px;
background:#fff;
float: left;
}
this is my css right now. in the jsfiddle is the position of every box displayed. aldo it doesnt matter if the boxes on the right are swapped.
Hope anyone can help me out!
If I understand corectly the "responsive" behavior you are looking for , you ca wrap the two first divs together and the two last ones together. and float the wraps to the left. Then using a percent width and max-width/min-width you can achieve the desired behaviour.
See this FIDDLE (I modified the width of #container in your fiddle so it is responsive)
HTML :
<div id="container">
<div id="left_wrap">
<div id="id1">left above</div>
<div id="id2">left under</div>
</div>
<div id="right_wrap">
<div id="id3">right above</div>
<div id="id4">right under</div>
</div>
</div>
CSS (modified)
#left_wrap,#right_wrap{
width:50%;
max-width:380px;
min-width:190px;
float:left;
}
#container {
height:100%;
width:100%;
background:#212121;
}
#id1,#id2,#id3,#id4 {
height:90px;
width:190px;
background:#fff;
float: left;
}
Now, if you change the width of the fiddle window, you will see that if the window width is over 760px the divs all align normaly. If the window is between 760px and 380px you get the disired behaviour. If th window is under 190px the divs all stand on to of each other.
Since you are working with fixed height/width on these, you should be able to use absolute positioning instead of floats.
#container{
height:200px;
width:400px;
background:#212121;
position:relative;
}
#id1{
height:90px;
width:190px;
background:#fff;
position:absolute;
top:0;
left:0;
}
#id2{
height:90px;
width:190px;
background:#fff;
position:absolute;
bottom:0;
left:0;
}
#id3{
height:90px;
width:190px;
background:#fff;
position:absolute;
top:0;
right:0;
}
#id4{
height:90px;
width:190px;
background:#fff;
position:absolute;
bottom:0;
right:0;
}
So I have divs that I have within my webpage .. like header , or div boxes .. they adjust fine on bigger screen sizes so that they dont look too tiny on a big monitor , but the issue is that when I resize the window or browser to make it small , all the elements move along till they reach a point where they all meet and it gets ugly .. How can I make it so the divs I have adjust to bigger screen sizes becoming bigger as well , but then stop them from moving along with the window when resizing the window making it smaller ??? I used percentages from all the elements I want to readjust and make bigger on bigger /wider screens
Below is an example of my code .. my header and other elements with these classes move to the point where they overlap when resizing the window
.header{
position:absolute;
top:0px;
width:100%;
height:100px;
left:0;
background:#EB6A4A;
}
.slogan{
position:absolute;
top:60%;
left:40.5%;
}
.login{
position:absolute;
top:15%;
left:90%;
}
.whitebackground{
background:#FFFFFF;
}
I'm not sure about your question because you didn't post any code but i think that your solution can be using css style:
max-width:50%;
min-width:800px;
max-height:500px;
min-height:21%;
properties in pecentage or pixel as you prefer, so you can tell divs how much expand and how much get smaller.
Hope it helps, if you post your code maybe i can be more useful.
Regards
EDIT 1:
This should resolve your problem:
*{
margin: 0;
padding: 0;
text-decoration: none;
color: inherit;
}
.header{
position:relative;
float:left;
top:0px;
width:100%;
height:100px;
left:0;
background:#EB6A4A;
}
.slogan{
position:relative;
float:left;
top:60%;
left:40.5%;
}
.login{
position:relative;
float:left;
top:15%;
left:90%;
}
.whitebackground{
background:#FFFFFF;
}
Just do the same with the class you didn't poste in css. The idea is having all items with position relative and floated on the left so they don't move. Should work!
I have boxes floated inside a div sort of like the SO Chat except i am making a box for my own website where users can make their own chat room, these boxes on the page represent chatrooms and i want to make a perfect width for them so they will fit exactly on the page without any excess space in the margins. the main div they are positioned in is 965px with a padding of 15px on the left and right side of it making a 935px width i reduced the width from 965px to 935px to keep a total width of 965px.
To get an idea of my scenario check out A Fiddle
As you can see there is some space left at the end right side of the div and i dont want that, i want the chat boxes to fit pixel perfectly the full width and remember to take into account that borders count as widths too. If someone could help me that would be great!
CSS Styles
body {
width:1000px;
}
#Body {
width:935px;
padding:15px;
height:500px;
background-color:#F1F1F1;
margin:0 auto;
}
.ChatRoom {
float:left;
width:223px;
height:200px;
border:1px solid #666;
cursor:pointer;
margin-right:8.75px;
background-color:#FFF;
}
.ChatTitle {
width:100%;
height:30px;
line-height:30px;
font-size:13px;
font-weight:bold;
text-align:center;
background-color:#C6D6D9;
border-bottom:2px solid #9C0;
}
You can accomplish this using box-sizing:border-box. What it does is includes the padding and border sizes from the width, as opposed to its normal behaviour of adding to it (which makes the <div> overflow to the next line). I've added a div.Inner here which will have the border and white background while the .ChatRoom is used to provide space using padding.
jsFiddle
HTML
<div class="ChatRoom">
<div class="Inner">
<div class="ChatTitle">My Chat Room</div>
</div>
</div>
CSS
.ChatRoom {
float:left;
width:25%;
height:200px;
padding:8px;
box-sizing:border-box;
}
.ChatRoom .Inner {
border:1px solid #666;
box-sizing:border-box;
background-color:#FFF;
cursor:pointer;
height:100%;
}
Without border-box
Turns out it's pretty easy without border-box too, utilising margin on .Inner.
jsFiddle
.ChatRoom {
float:left;
width:25%;
height:200px;
}
.ChatRoom .Inner {
border:1px solid #666;
margin:8px;
background-color:#FFF;
cursor:pointer;
height:100%;
}
http://jsfiddle.net/DyTT8/1/
The last div needs to have the margin reset if not it will add to the 15px of padding. I did this by giving it class="last and making the .ChatRoom div 225px; This will give you the proper spacing.
You could also put the divs in an unordered list and target the last div with li:last-child and remove the margin that way.