I am trying to align my popup at the center of the page.
whichever image box i click, popup should appear in the center of the page without need to scroll up or down
Please help me to achieve it.
Test Link Site : http://www.scs-qa.com/panamera/trading.html
.white_content
{
-moz-border-radius: 5px 5px 5px 5px;
background-color: white;
border: 3px solid #000000;
display: none;
height: auto;
left: 30%;
overflow: auto;
padding: 16px;
position: absolute;
top: 10%;
width: 500px;
z-index: 1002;
border-radius: 15px 15px 15px 15px;
text-align: justify;
font-size: 10pt;
font-family: 'Tahoma' ;
}
HTML
<div class="trading-img-box">
<a href = "javascript:void(0)" onclick = "document.getElementById('trading1').style.display='block';document.getElementById('body-below-otherpage-small-trading').style.display='none'">
<img class="trading-img" src="img/trading1.png">
</a>
<h1 class="trading-h1">Furniture</h1>
<p style="height:0; clear:both;" class="trading-p">It 's pleasant to live spec..</p>
</div>
<div id="trading1" class="white_content">
<a style="float:right" href = "javascript:void(0)" onclick = "document.getElementById('trading1').style.display='none';document.getElementById('body-below-otherpage-small-trading').style.display='block'">Close</a>
<br/><br/>
<img src="img/tradingb1.png" style="margin-top: 5px; margin-left: 25px; margin-right: 5px"><br/><br/>
<strong>Furniture</strong>
<p>some text
</p><br/>
<p>some text
</p>
</div>
Try this:
.white_content {
left:50%;
margin-left:-250px;
}
If you need a solution independent of the size of the div, then you need to use javascript or jquery.
http://jsfiddle.net/DerekL/GbDw9/
Related
For some reason when I am using margin auto on each side to centre the element it's not working. I am assuming it's because I am using percentages and whatnot.
I tried to use calc() a bit more, but since the contents of the element I want to centre may vary over time, I want to try and make it always be centred.
I am doing this with the following: margin: 0px calc(50% - 554px / 2) 0px calc(50% - 554px / 2);
The current width of the element is 554px. So dividing it by 2 and removing that from 50% of the parent element will give it the margin on each side that it needs to be centred.
The problem is, the size may vary in the future so I want to replace 554 with an automatic width if that makes sense. So basically I want to haveit like this: margin: 0px calc(50% - width / 2) 0px calc(50% - width / 2); with width being the current element width of course. How can I do this?
I have tried looking this up online, sorry for wasting your time with may seem like a simple question.
div#game {
margin-top: 50px;
width: 80%;
display: inline-block;
float: left;
}
div#gameselect {
margin: 0px calc(50% - 554px / 2) 0px calc(50% - 554px / 2);
display: inline-block;
}
div.gameselect {
float: left;
display: inline-block;
position: relative;
}
p.lefttri {
width: 0;
height: 0;
border-bottom: 30px solid #FF4444;
border-left: 20px solid transparent;
float: left;
}
p#test {
font-family: title;
font-size: 30px;
line-height: 24px;
height: 24px;
color: white;
padding: 3px 11px 3px 0px;
background-color: #FF4444;
display: inline-block;
float: left;
}
p.righttri {
width: 0;
height: 0;
border-top: 30px solid #FF4444;
border-right: 20px solid transparent;
float: left;
z-index: 0;
position: relative;
}
<div id="gameselect">
<a href="https://www.google.com"><div class="gameselect">
<p class="lefttri"></p>
<p id="test">
ONE
</p>
<p class="righttri"></p>
</div></a>
<div class="gameselect gs2">
<p class="lefttri"></p>
<p id="test">
TWO
</p>
<p class="righttri"></p>
</div>
<div class="gameselect gs3">
<p class="lefttri"></p>
<p id="test">
THREE
</p>
<p class="righttri"></p>
</div>
</div>
If you're going to hard code 554px in when calculating those margins, you could just apply width: 554px to #gameselect, then your margin: auto; would work. But it isn't 554px on my side - that width is going to vary depending on the user's browser, and as you can see it doesn't truly center the element. http://codepen.io/anon/pen/wJpNLK Or who knows, maybe this will be centered on your side now.
But there are a number of other ways you could center this content. display: flex; justify-content: center on #gameselect does it fluidly without having to specify fixed widths like that, which you want to avoid.
div#game {
margin-top: 50px;
width: 80%;
display: inline-block;
float: left;
}
div#gameselect {
display: flex;
justify-content: center;
}
div.gameselect {
float: left;
display: inline-block;
position: relative;
}
p.lefttri {
width: 0;
height: 0;
border-bottom: 30px solid #FF4444;
border-left: 20px solid transparent;
float: left;
}
p#test {
font-family: title;
font-size: 30px;
line-height: 24px;
height: 24px;
color: white;
padding: 3px 11px 3px 0px;
background-color: #FF4444;
display: inline-block;
float: left;
}
p.righttri {
width: 0;
height: 0;
border-top: 30px solid #FF4444;
border-right: 20px solid transparent;
float: left;
z-index: 0;
position: relative;
}
<div id="gameselect">
<a href="https://www.google.com">
<div class="gameselect">
<p class="lefttri"></p>
<p id="test">
ONE
</p>
<p class="righttri"></p>
</div>
</a>
<div class="gameselect gs2">
<p class="lefttri"></p>
<p id="test">
TWO
</p>
<p class="righttri"></p>
</div>
<div class="gameselect gs3">
<p class="lefttri"></p>
<p id="test">
THREE
</p>
<p class="righttri"></p>
</div>
</div>
I have a div 'imgcontainer' and a div 'commentcontainer'. Representing a large image and a white box filled with comments below. I want to add a third image that sits on top of the two, vertically centered.
So basically what I'm trying to do is this: https://d13yacurqjgara.cloudfront.net/users/488816/screenshots/1726057/1_1x.jpg
My problem is that I can't figure out how to integrate the CSS to do this into my code below. What can I add to the 'profilepic' div in order to set that image to sit midway between the imgcontainer and commentcontainer ?
HTML
<div id="timeline">
<div class="block2x3 block">
<div class="imgcontainer">
<img src="top-picture.jpg" />
<div class="profilepic">
<img src="facepic.png" />
</div>
</div>
<div class="commentcontainer">
<div class="peoples">
<strong class="people name">Joe Schmoe</strong> and 42 other people bought this
<p>Have commented on your wall post</p>
</div>
</div>
</div>
CSS3
#media (max-width:1860px) {
#timeline .block .imgcontainer img {width:100%;}
#timeline div[class*="block"][class*="x1"] {height:150px;}
#timeline div[class*="block"][class*="x2"] {height:300px;}
#timeline div[class*="block"][class*="x3"] {height:450px;}
#timeline div[class*="block2x3"] .imgcontainer {height:60%; position:relative; z-index:1;}
#timeline div[class*="block2x3"] .commentcontainer {height:40%; z-index:2;}
.profilepic {
margin: 40px 0px 0px 0px;
border: 7px solid white;
border-radius: 70px;
}
On your CSS to center the 'profile' pic you can add this to you CSS:
.profilepic {
/*margin: 40px 0px 0px 0px; INSTED OF THIS */
margin-left: auto; /* USE */
margin-right: auto; /* THIS */
border: 7px solid white;
border-radius: 70px;
}
but first you will have to add this to you css file:
html { width: 100%; height: 100%; margin: 0; padding: 0; }
body { width: 100%; height: 100%; margin: 0; padding: 0; }
Hope it works :')
this is small code for side menu of my page
<div style="display: block;" id="overlay" class="overlay">
<div id="sideMenuGroups">
<div id="sideMenuGroupHeader" class="mSideMenuSeparator">GROUPS</div>
<div id="sideMenuGroupContent" class="mSideMenuContent">
<div id="teacherGroup">As Teacher
<a onclick="groupFeeds();" href="#">Data Mining</a>
<a onclick="groupFeeds();" href="#">Data Structures</a>
<a onclick="groupFeeds();" href="#">C Language</a>
//**display anchor tag to full width of overlay**
<a onclick="groupFeeds();" href="#">Introduction to IT</a>
</div>
</div>
</div>
</div><!--overlay ends here-->
the css for the styles used is
*mSideMenuConten*t has no style defined
mSideMenuContent a- tells how each anchor tag would be visible, i have tried display:table-cell property, but it is not effective for me
overlay tells how the side menu would be
.mSideMenuContent
{
}
.mSideMenuContent a
{
display: table-cell;
height: 37px;
color: #c4ccda;
padding: 3px 0 3px 8px;
font-size: small;
}
.mSideMenuContent a:hover
{
background:#262c3a;
color: #c4ccda;
}
.mSideMenuSeparator
{
background: #434b5c;
border-top: 1px solid #242a37;
border-bottom: 1px solid #242a37;
font-family:Helvetica, sans-serif;
font-size:x-small;
color: #7a8292;
height:17px;
padding-top:4px;
padding-left: 10px;
text-shadow: 0 1px 0 rgba(0, 0, 0, .6)
}
.overlay {
z-index: 1000;
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 50%;
height: 100%;
background:#31394a;;
color: #c4ccda;
display: none;
}
i want to display the anchor tag to full width of the side menu, how do i do that??
Use this:
display:inline-block;
width: 100%;
By saying inline block, you allow yourself to define a width for the element. Inline elements can't do this be default.
I found display block more convenient. I applied some margin and padding and i got cool/desired output.
display:block;
padding: some padding;
margin: some margin;
I have a page with fixed width and I am trying to put borders on it, left and right without success.
I know how to show borders but I cannot make them to reach the bottom of the page and stay there, unlees I set my divs to position:fixed which is not desired for my content div since I want it to scroll. is there a way to get around it?
Here is my css file (the code as shone below makes my borders go until 1/3 of my window even if I set body height:100%) - Thank you in advance:
body {
margin: 0 auto;
padding: 0 0 0 0;
width: 1024px;
/*height: 100%;*/
min-width: 50%;
font-family: calibri;
background-color: #999;
background-image: url("bg.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top center;
overflow-y: scroll;
overflow-x: auto;
border-right: solid;
border-right-width: 5px;
border-left: solid;
border-left-width: 5px;
border-color: #1d687b;
}
div#all {
position: relative;
width: 1024px;
height: 100%;
margin: 0 auto;
/*padding: 0 0 5px 0;
border-right: solid;
border-right-width: 5px;
border-color: #1d687b;*/
}
div#top {
position: fixed;
margin: 0 auto;
width: 1024px;
height: 145px;
background-image: url("images/bg_ttl.jpg");
/*border-right: solid;
border-right-width: 5px;*/
border-bottom: solid;
border-bottom-width: 5px;
/*border-left: solid;
border-left-width: 5px;*/
border-color: #1d687b;
overflow: hidden;
z-index: 1;
}
div#top_left {
position: relative;
width: 190px;
height: 135px;
padding: 5px;
float: left;
text-align: left;
vertical-align: middle;
}
div#top_right {
position: relative;
width: 190px;
height: 135px;
padding: 5px;
float: right;
text-align: center;
vertical-align: middle;
}
div#top_center {
position: absolute;
left: 200px;
width: 624px;
height: 135px;
padding: 5px 0;
float: right;
font-family: metalord;
font-weight: bold;
text-align: center;
vertical-align: middle;
}
div#left_menu {
position: fixed;
top: 150px;
float: left;
width: 185px;
height: 100%;
padding: 15px 5px 15px 5px;
border-right: solid;
border-right-width: 5px;
/*border-left: solid;
border-left-width: 5px;*/
border-color: #1d687b;
overflow: hidden;
}
div#content {
position: relative;
top: 150px;
left: 205px;
width: 784px;
height: 100%;
padding: 15px 15px 5px 15px;
/*border-right: solid;
border-right-width: 5px;
border-color: #1d687b;*/
}
HTML
<!DOCTYPE>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>arserus.com</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="all">
<div id="top">
<div id="top_left">
<span class="ttl_sd_l">
<img src="images/bttn_prpl.png" class="tl_txt" alt=""> network
<br />
& support
<br />
<br />
<img src="images/bttn_prpl.png" class="tl_txt" alt=""> creative ideas
<br />
& organization</span>
</div>
<div id="top_center">
<span class="ttl_txt">ARSERUS</span>
</div>
<div id="top_right">
<div>
<span class="ttl_sd_r">
<u>e-mail:</u>
<br />
info#arserus.com
<br />
<br />
<u>phone No. (cy):</u>
<br />
7000 17 37</span>
</div>
</div>
</div>
<div id="left_menu">
<div align="right">
<span class="mn_lnk"><a id="p_home" class="lnk">home</a></span>
<br />
<br />
<span class="mn_lnk"><a id="p_about" class="lnk">about us</a></span>
</div>
<div id="cp_rght">
<span class="txt_cr">© 2012 ARSERUS</span>
</div>
</div>
<div id="content">
<?php
require_once('p_home.php');
?>
</div>
</div>
</body>
</html>
The old school answer to this problem is to use Faux Columns -
http://www.alistapart.com/articles/fauxcolumns/
The idea is that you actually use a background image on your body element that is 1px tall, and as wide as you want, including the 'border' as part of the image, and to tile the image vertically.
True, it doesn't rely on CSS borders, and making changes involves image editing, but it is reliable.
For the most part, I've found approaching web design with the idea of a fixed height to be problematic, and I try to avoid it.
It sounds like there is another css rule conflicting with your border rule. So what I would do to begin with, is:
remove all css rules.
apply your css border rule.
Re-add your other rule one at a time till the styles break over the problem rule.
This will narrow down the problem, and make the solution easier to find.
Aside from that, you could try applying the border styles to the <html> tag. Hope this helps!
You might try setting a static height:
height: 768px;
If you are looking to make a fluid (% - based) height scheme in CSS, that is really tough. You might try using jQuery to get the window height and style your elements according to that:
var divHeight = $(document).height();
$('#yourDivId').height(divHeight);
I have a CSS problem that I'm not able to figure out. I'm not even sure it is possible. What I want is the following:
I have three buttons/tabs like this http://sv.tinypic.com/r/21cf85t/6 and when you click one tab a different div should show for each tab like this http://sv.tinypic.com/r/21l5y85/6 or http://sv.tinypic.com/r/2dbrv5u/6.
I know how to show/hide the divs with jQuery but the problem is that the divs will increase in height http://sv.tinypic.com/r/k2xxfb/6 and then they will push the other tabs and divs down. Is there a way to create what I am trying to do?
I'm not a guru in CSS so if you have an example to look at or can post code here I would be very very thankful!
This is the HTML I'm using for my tabs:
<div class="MainContent">Content</div>
<div class="TabsHolder">
<div id="Tab1">
<div style="width:200px">
Content Tab 1
</div>
</div>
<a class="Button1" href="#Tab1"></a>
<div class="clearer"></div>
<div id="Tab2">
<div style="width:200px">
Content Tab 2
</div>
</div>
<a class="Button2" href="#Tab2"></a>
</div>
CSS:
.MainContent {
float: left;
}
.TabsHolder
{
float: left;
}
.Button1
{
float: left;
margin: 100px 0px 20px 0px;
background: url(images/Button1.png) no-repeat 0 0;
height: 79px;
width: 27px;
}
#Tab1
{
width: 200px;
margin: 80px 0px 20px 0px;
border: solid 1px #ACCD45;
position: relative;
float: left;
overflow: hidden;
padding: 20px;
}
.Button2
{
float: left;
margin: 0px 0px 20px 0px;
background: url(images/Button2.png) no-repeat 0 0;
height: 97px;
width: 27px;
}
#Tab2
{
width: 200px;
margin: 0px 0px 20px 0px;
border: solid 1px #ACCD45;
position: relative;
float: left;
overflow: hidden;
padding: 20px;
}
div.clearer
{
clear: both;
margin: 0px;
margin-bottom: 0px;
margin-top: 0px;
padding: 0px;
line-height: 0px;
height: 0px;
width: 0px;
overflow: hidden;
}
Here is what I put together using pure CSS - Tested in Firefox, IE8 and Chrome (not sure about others). Try out a demo here.
Note: I wanted to make a comment about one thing in your original HTML - you can't add a background image to a link <a> tag.
CSS
.MainContent {
float: left;
width: 400px;
height: 400px;
background: #444;
}
.buttons {
float: left;
margin: 10px 0 10px 0;
width: 27px;
clear: both;
}
.Button1 {
background: #555 url(images/Button1.png) no-repeat 0 0;
height: 79px;
}
.Button2 {
background: #555 url(images/Button2.png) no-repeat 0 0;
height: 97px;
}
.Button3 {
background: #555 url(images/Button3.png) no-repeat 0 0;
height: 127px;
}
.tabsHolder {
float: left;
position: relative;
}
.tabs {
width: 200px;
height: 200px;
margin: 0 0 20px 0;
border: solid 1px #ACCD45;
background: #444;
overflow: hidden;
padding: 20px;
display: none;
position: absolute;
left: 0;
}
#tab1 { top: 0; }
#tab2 { top: 98px; }
#tab3 { top: 215px; }
a:hover .tabs {display: block;}
HTML
<div class="MainContent">Content</div>
<div class="tabsHolder">
<a href="#tab1"><div class="buttons Button1">1</div>
<div id="tab1" class="tabs">
Content tab 1
</div>
</a>
<a href="#tab2"><div class="buttons Button2">2</div>
<div id="tab2" class="tabs">
Content tab 2
</div>
</a>
<a href="#tab3"><div class="buttons Button3">3</div>
<div id="tab3" class="tabs">
Content tab 3
</div>
</a>
</div>
</div>
You will need to define the pages (divs to hide/show) and tabs in two separate divs.
These will want to be floated next to each other, so you will have something like
<div class="pages">
<div class="page" id="tab1">....</div>
<div class="page" id="tab2">....</div>
</div>
<div class="tabs">
<div class="tab">Tab 1</div>
<div class="tab">Tab 2</div>
</div>
You can then set a min-height on pages (height for IE6, put into a conditional stylesheet), set pages and tabs to both float left, both with fixed widths.
Finally when you attach your event to $('#tab a'), make sure you iterate over all the pages hiding the non-relevant ones.
Without JavaScript, you cannot hide one of your divs, you can only have an HTML page per tab (like this or this).
If you want something more dynamic, you should use JavaScript. The tabs system is a built-in component of jQuery, for instance. (Homepage, live demo).
Hope that'll help you.