The first ModalPopupExtender appears in the center of the screen, when i show the second ModalPopupExtender it appears bellow and to the right of the first one (though above the first one).
I want to place it in the center of the screen.
Update:
I found that the problem with second popup was:
PopupDragHandleControlID="pnlDragMe"
if i remove this, it's ok.
but i need the drag-control!
This is my drag panel:
<div id="pnlDragMe" class="pnlDragMe">
Image Uploader
</div>
and it's css:
.pnlDragMe
{
background-color: #4D676A;
height: 24px;
cursor: move;
width: 100%;
text-indent: 10px;
}
Page Layout CSS:
/* General styles */
body {
margin:0;
padding:0;
border:0;
width:100%;
background:#fff;
min-width:600px;
font-size:90%;
}
a {
color:#369;
}
/* column container */
.colmask {
position:relative;
clear:both;
float:left;
width:100%;
overflow:hidden;
}
/* 2 column left menu settings */
.leftmenu {
background:#FFD8B7;
}
.leftmenu .colright {
float:left;
width:200%;
position:relative;
left:195px;
background:#fff;
}
.leftmenu .col1wrap {
float:right;
width:50%;
position:relative;
right:200px;
padding-bottom:1em;
}
.leftmenu .col1 {
margin: 0 5px 0 205px;
position:relative;
right:100%;
overflow:hidden;
}
.leftmenu .col2 {
float:left;
position:relative;
/*width:170px;
right:185px;*/
width:170px;
right:190px;
}
/* Footer styles */
#footer {
clear:both;
float:left;
width:100%;
border-top:1px solid #000;
}
#footer p {
padding:10px;
margin:0;
}
Jquery center plugin
This works for me very well
Related
I'm trying to figure out why this footer is acting unusual. If you notice in the demo the HR tag in the location section is being pushed to the bottom of the page. Which is changing the layout. Also i'm trying to get the Facebook Icon to float:left so that it will be to the left of the HR tag within the "Network With Us section." My CSS looks fine to me, but this is the first time i've used the section tags for html5.
Also i'm having troubles applying a background-color or a margin-top:50px to my #footer.It's as if the #footer is ignoring me.
Here is my Demo
#footer {
background-color:#95643d;
width:100%;
margin:30px 0px 0px 0px;
clear:both;
}
#footer h3 {
font-family: 'Dancing Script', cursive;
font-weight:700;
color:#FFF;
font-size:2em;
}
#footer hr {
width:60%;
float:left;
height:4px;
background-color:#FFF;
}
#footer p {
margin:0px;
padding: 0px;
color:#FFF;
font-family: 'Arimo', sans-serif;
}
#footer_logo {
width:25%;
float:left;
background-color:#95643d;
}
#footer_logo img {
margin:20px 0px 0px 20px;
}
#footer_network {
width:25%;
float:left;
background-color:#95643d;
}
#footer_contact {
width:25%;
float:left;
background-color:#95643d;
}
#footer_network img {
float:left;
}
}
#footer_location {
width:25%;
float:left;
background-color:#95643d;
}
You can use this CSS:
/* Footer */
#footer {
background-color:#95643d;
width:100%;
}
#footer h3 {
font-family: 'Dancing Script', cursive;
font-weight:700;
color:#FFF;
font-size:2em;
text-align: center;
}
#footer hr {
width:100%;
float:left;
height:4px;
background-color:#FFF;
}
#footer p {
margin:0px;
padding: 0px;
color:#FFF;
font-family: 'Arimo', sans-serif;
text-align: center;
margin-bottom: 10px;
}
#footer_logo {
width:100%;
float:left;
background-color:#95643d;
}
#footer_logo img {
margin: 10px auto;
display: block;
}
#footer_network {
float:left;
background-color:#95643d;
width: 33%;
}
#footer_contact {
width: 33%;
float:left;
background-color:#95643d;
}
#footer_network img {
margin: 0 auto;
display: block;
}
#footer_location {
display: inline-block;
background-color:#95643d;
width: 34%;
}
Also i'm having troubles applying a background-color or a margin-top:50px to my #footer.It's as if the #footer is ignoring me.
When you have floats, the parent element collapses, so you have to clear the floats. One often-used technique is the clearfix class. Applied to your element it would look like this:
#footer:after {
content: "";
display: table;
clear: both;
}
I have a fiddle with cleaner code that you can use parts of it, or the whole thing, at your convenience. https://jsfiddle.net/r3ruzLL2/2
https://jsfiddle.net/r3ruzLL2/2/embedded/result/
EDIT: For the Facebook logo, an easy solution is to use a negative margin-top.
Add this rule:
section{
overflow:hidden;
}
Here you go, this seems to be fixing your problem: http://jsfiddle.net/weissman258/kpo4y108/10/.
Here are the things I added.
#footer {
display:inline-block;
}
#footer_network {
position:relative;
}
#footer_network a {
position:absolute;
left:0;
}
#footer_location {
display:inline-block;
}
As well as removing:
#footer_network img {
float:left;
}
Edit: Your first line on location seemed to be aligned right, so made another change to fix it:
#footer p {
clear:left;
}
Here is a fiddle for you https://jsfiddle.net/kpo4y108/6/ . You have break's in your html that you don't need. You have background's in different div's, which you don't need if you are only going to have one color. Let me know if you have any questions.
<div id="footer">
<section id="footer_logo">
<img src="http://nuskinprinting.com/atticstash/images/as_logo.png" />
</section>
<section id="footer_network">
<a><img src="http://nuskinprinting.com/atticstash/images/facebook_icon.png" /></a>
<h3>Network With Us</h3>
<hr />
</section>
<section id="footer_contact">
<h3>Contact Us</h3>
<hr />
<p> Vivian#advancedlitho.com<br />(972)999-9999 </p>
</section>
<section id="footer_location">
<h3>Location</h3>
<hr />
<p> Orange Circle Antique Mall<br />118 South Glassell Street<br />Orange, CA 92866<br />(714)538-8160<br />Mon. 10 a.m. - 4:45 p.m.<br />Tues - Sat 10 a.m. - 5:45 p.m.<br />Sun. 11 a.m. - 5:45 p.m. </p>
</section>
</div>
css:
/* Footer */
#footer {
background-color:black;
width:100%;
margin:30px 0px 0px 0px;
clear:both;
float:left;
}
#footer h3 {
font-family: 'Dancing Script', cursive;
font-weight:700;
color:#FFF;
font-size:1.5em;
margin:0px;
padding:0px;
}
#footer hr {
width:60%;
float:left;
height:4px;
}
#footer p {
margin:0px;
padding: 0px;
color:#FFF;
font-family: 'Arimo', sans-serif;
float:left;
word-wrap:break-word;
}
#footer_logo {
width:25%;
float:left;
}
#footer_logo img {
margin:20px 0px 0px 20px;
max-width:80%;
}
#footer_network {
width:25%;
float:left;
}
#footer_contact {
width:25%;
float:left;
}
#footer_network img {
float:left;
width:25px;
height:25px;
margin: 5px 5px 0 0;
}
#footer_location {
width:25%;
float:left;
}
Hi i'm doing the a basic layout and i have a problem with my css.
I have a footer tag set, but it doesnt appear at the bottom it appears a the midway point in the page.
Here is my CSS code
My "footer" doesn't appear at the foot if the page ?
I think it might be the height and width i have set but i'm not sure what to set it as prperly.
Thanks in advance
body
{
background: url("http://ulyssesonline.com/wp-content/uploads/2011/12/darkwood.jpg");
height: 100%;
width: 100%;
}
#social {
float: right;
background-color:black;
}
#social1 {
float:right;
background-color:black;
}
#wrapper,#header,#main,#footer
{
width:100%;
}
#wrapper
{
width:960px;
height:720px;
margin:0 auto;
}
#header
{
height:100px;
background:#000;
}
#main
{
height:750px;
background:#666;
}
#footer
{
margin-bottom:-50px;
height:50px;
background-color:red;}
}
Replace the footer with:
#footer
{ position:absolute;
bottom:0;
width:100%;
height:50px; /* Height of the footer */
background:#6cf;
background-color:red;}
The tutorial used: http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
This is my full CSS:
body
{
background: url("http://ulyssesonline.com/wp-content/uploads/2011/12/darkwood.jpg");
height: 100%;
width: 100%;
}
#social {
float: right;
background-color:black;
}
#social1 {
float:right;
background-color:black;
}
#wrapper,#header,#main,#footer
{
width:100%;
}
#wrapper
{
width:960px;
height:720px;
margin:0 auto;
}
#header
{
height:100px;
background:#000;
}
#main
{
height:750px;
background:#666;
}
And this is how i referenced it from the html:
<footer id ="footer">Some footer text</footer>
I suspect you did not reference it correctly, with the proper id from your div?
I think I see your problem. In the footer css code you have the following:
#footer
{
margin-bottom:-50px;
height:50px;
background-color:red;}
}
Pretty sure the margin-bottom being a negative number is the issue. Change that to 5 or 10 and see if it appears.
i got it thanks for all your help.
i got this from summer codes answer above
#footer
{ position:absolute;
bottom:0;
width:100%;
height:50px; /* Height of the footer */
background:#6cf;
background-color:red;}
and i had to change the main section to
#main
{
position:relative;
height:100%;
background:#666;
}
I'm trying to fit a sidebar to the end of the #SUBCONTAINER div. this is the HTML code:
<body>
<div id="container">
<div id="subcontainer">
<div id="sidebar">
<div class="logo">
<img src="pictures/icon.png" alt="LOGO">
</div>
</div>
<div id="pagecontainer">
<div class="page">
<p>Lorem ipsum dolor sit amet...</p>
</div>
</div>
</div>
<div id="footer">
footer
</div>
</div>
</body>
and this is the CSS I'm using right now:
html, body {
background-color:#ffffff;
margin:0 0 0 0;
height:100%;
}
#container {
position:relative;
width:100%;
}
#subcontainer {
position:relative;
clear:both;
}
#sidebar {
width:20%;
float:left;
background-color:#BD4538;
color:white;
}
.logo {
text-align:center;
left:50%;
right:50%;
border-left:-8em;
border-right:-8em;
}
#pagecontainer {
width:80%;
float:right;
background-color:#FFFFFF;
color:black;
}
.page {
padding:1em 1em 1em 1em;
background-color:#FFFFFF;
color:black;
}
#footer {
clear:both;
height:10em;
width:100%;
bottom:0;
background-color:#B82928;
color:white;
}
p {
margin: 0em 0em 0em 0em;
text-align:justify;
text-indent:1em;
}
Unfortunatelly the SIDEBAR DIV does not extend to the end of the parent SUBCONTAINER container, so if I have a longer text in PAGECONTAINER DIV, I will see the white background of the parent BODY under the SIDEBARE DIV.
I thought of a trick: if I change the background of the container PAGECONTAINER to the bgcolor of SIDEBAR I have what I want, but I'm working on a responsive website thus SIDEBAR need to change position and to go to the top of the pabe
So, any suggestion?
I've modified the code little bit. Normally to make a equal height column div display:table display:table-cell property used.
html, body {
background-color:#ffffff;
margin:0 0 0 0;
height:100%;
}
#container {
width:100%;
}
#subcontainer {
display:table;
}
#sidebar {
width:20%;
background-color:#BD4538;
color:white;
display:table-cell;
}
.logo {
text-align:center;
border-left:-8em;
border-right:-8em;
}
#pagecontainer {
width:80%;
display:table-cell;
background-color:#FFFFFF;
color:black;}
Working Demo link.
http://jsbin.com/mopunime/1/edit
Remove the "float" property from both the #sidebar div and the #pagecontainer div, and set them as display: table-cell;
Also, set the #subcontainer to display:table and width:100%;. That will make sidebar and pagecontainer to fill the subcontainer div.
Check it out:
html, body {
background-color:#ffffff;
margin:0 0 0 0;
height:100%;
}
#container {
position:relative;
width:100%;
}
#subcontainer {
position:relative;
display: table;
clear:both;
width: 100%;
}
#sidebar {
width:20%;
display: table-cell;
background-color:#BD4538;
color:white;
}
.logo {
text-align:center;
left:50%;
right:50%;
border-left:-8em;
border-right:-8em;
}
#pagecontainer {
width:80%;
display:table-cell;
background-color:#FFFFFF;
color:black;
}
.page {
padding:1em 1em 1em 1em;
background-color:#FFFFFF;
color:black;
}
#footer {
clear:both;
height:10em;
width:100%;
bottom:0;
background-color:#B82928;
color:white;
}
p {
margin: 0em 0em 0em 0em;
text-align:justify;
text-indent:1em;
}
Here's the fiddle: http://jsfiddle.net/z56S3/
If what you want is that the DIV "Sidebar" fit (width or height) to the div "subcontainer" then do that:
#sidebar {
width:100%;
height: 100%;
float:left;
background-color:#BD4538;
color:white;
}
I am trying to make a UL or DIV's where each list item / child div is full screen (100% width 100% height) and floated left so i can scroll horizontally through them, any idea how I can do this? here is my code but it is not working as I had thought
HTML:
<html>
<body>
<div id="site-holder">
<div class="toronto-full">
TESTING
</div>
<div class="montreal-full">
TESTING
</div>
</div>
</body>
</html>
CSS:
html { width:150%; height:100%; margin:0; padding:0; }
body { width:150%; height:100%; margin:0; padding:0; }
#site-holder { width:100%; height:100%; margin:0; padding:0; float:left; }
.toronto-full {background-color:green; width:50%; height:100%; float:left; }
.montreal-full {background-color:red; width:50%; height:100%; float:left; }
Any Ideas?
FIDDLE
Try this:
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#site-holder {
width:100%;
height:100%;
margin:0;
padding:0;
white-space: nowrap;
font-size: 0;
}
.toronto-full, .montreal-full {
width: 100%;
height: 100%;
display: inline-block;
vertical-align: top; /* this line added in edit */
font-size: initial;
}
.toronto-full {
background: green;
}
.montreal-full {
background: red;
}
EDIT:
Review the code again. I added a line which fixes the problem with vertical mismatch of the divs.
Why do you even want to use float for this?
You could use inline-block display;
.toronto-full {
background-color:green;
width:50%;
height:100%;
display: inline-block;
}
.montreal-full {
background-color:red;
width:50%;
height:100%;
display: inline-block;
}
Example: http://jsfiddle.net/7DxFE/
Im trying to display my posts on serperate rows, but they keep overflowing the bounds of the container. I tried setting the width of of parent to a minimum, but it still overflows. heres a link to my blog site
www.darealistmedia.com
There you can see my problem. And heres the my CSS file. "Main" is the container im trying to keep them in.
* {
margin:0px;
padding:0px;
}
h1 {
font:bold 20px Tahoma;
}
h2 {
font:bold 14px Tahoma;
}
header, section, footer, aside, nav, article, hgroup {
display:block;
}
body {
width:100%;
display:-webkit-box;
-webkit-box-pack:center;
}
.holder {
max-width:1000px;
margin:15px 0;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-box-flex:1;
}
header {
background:yellow;
border:3px solid black;
padding:auto;
/*20*/
}
.navigation {
border:3px solid black;
background:blue;
color:white;
padding:10px;
text-align:center;
}
.navigation div {
display:inline-block;
}
.new_div {
display:-webkit-box;
-webkit-box-orient:horizontal;
}
.main {
text-align:center;
border:4px solid orange;
-webkit-box-flex:1;
margin:20px;
padding:20px;
}
.right-sidebar {
border:1px solid red;
width:220px;
margin:20px;
margin: background:#66cccc;
}
footer {
text-align:center;
padding:20px;
border-top:2px solic green;
}
/*Post Styles*/
.postSection {
display:-webkit-box;
-webkit-box-orient:horizontal;
width:800px;
overflow:scroll;
}
.postWrapper {
border:2px solid red;
padding:5px;
margin:11px;
width:270px;
height:270px;
}
.postTitle {
background-color:#303030;
font-size:28px;
font-weight:bold;
font-family:Trajan Pro;
color:white;
padding:5px;
}
.postContent {
background:#c7c7c7;
}
.postTabs {
text-align:center;
background-color:#202020;
float:left;
color:white;
padding:5px;
}
.day {
font-size:30px;
}
.linkList {
float:right;
}
What am I doing wrong?
This behaves exactly as it is supposed to. You told the postWrapper to have a height of 270px, and it does, even if the content is larger. You could use overflow: hidden; to hide the extra content, but this will cut off your content mid-sentence. Possibly better to replace height: 270px; with min-height: 270px;:
.postWrapper {
border:2px solid red;
padding:5px;
margin:11px;
width:270px;
min-height:270px;
}