I'm coding a comment page on my website and it all works fine, but when you make it bigger part of my pages (notifications) move across the page. I've coded the text area to the position I wanted using position relative. Here is the css code I've use:....
#mainSection{
text-align:left;
margin-top:3px;
margin-bottom:50px;
margin-left:270px;
position:relative;
bottom:650px;
}
#mainSection .newPost{
width:500px;
height:125px;
}
You can prevent the user from resizing the textbox altogether:
textarea {
resize: none;
}
Related
I have a dilemma that appreciates and tries any suggestion put forward. I have a localhost running wordpress using the theme The Fox. I have everything running perfectly except for the footer.
I have some pages that the content does not extend a page, while others extend more than a page and the issue I have is that the footer starts exactly where the text ends and I dont want to add white space because of view port dissimilarities. As you can see below, I have a screenshot of a sample page with small content.
I hope you noticed the extra white space after the footer, which is also on the screen taking the footer to the center of the page.
I want the footer to extend to the end of the page no matter the length of the content or the size of the screen.
Inside the CSS, there is a footer section and it is here on Pastebin but I think the most important one is as below;
footer
{
bottom:0px;
right:0;
left:0;
overflow:auto;
padding:0px;
min-height:70px!important;
height:auto;
position: relative;
z-index: 9000;}
In the footer, I am using just a single column and I think this code handles that... also in pastebin.
.footer_1_col .widget_wrap
{
width:100%!important;
float:none!important;
margin-left:auto!important;
margin-right:auto!important;
padding-right:10px!important;
}
And on the footer type, I use type 8, which uses the code;
/**************************************************
Footer Type 8
**************************************************/
.footer_type_8 .widget_wrap {
margin: 10px 0px 0px 0;
}
.footer_type_8 .widget {
margin:0px 0px 0px 0;
}
.footer_type_8 .widget h2 {
font-size:10px;
text-transform:uppercase;
font-weight:900;
letter-spacing:normal;
line-height:14px;
margin-bottom:0px;
padding-left:0px;
position: fixed;
}
.footer_type_8 .widget_line {
display:none;
}
Please what am I doing wrong and where do I need to make changes? If you need to see some other code, please let me know and I will post it on pastebin.
Thanks.
Special thanks to #Firasd for his comments that made this possible.
All I did was to look for the body element using the browser inspector, and then recalculate the size for that element using the already known static height of the header and footer.
This Was Added to the Page's CSS Section
html,body {height:100%;}#fw_c { min-height: calc(100vh - 162px);}
The theme uses Bakerly Visual Composer and I just had to add the above code to the page I want the changes.
Note that if you have a slider, you will need to put that in your calculation too except if your slider is in a row element.
I've created a few sites with facebook like button in the footer.
However, the popup that appears after you like a page, is not visible, so I'd like to move it over the like button.
So that this wouldn't happen.
How could I target the html5 implemented like button?
<div class="fb-like span6" data-href="https://www.facebook.com/pages/xxxxxx?fref=ts" data-send="true" data-width="450" data-show-faces="false" data-action="like" data-font="segoe ui"></div>
And what css would I need to apply to it?
Unfortunately you can't really get the popup to move independently of the button, because once the button is clicked it opens the widget in an iframe and you won't be able to affect the contents of the iframe with out playing with the same origin policy. Apparently there are Ways to circumvent the same-origin policy but its probably way more of a headache than it's really worth for something like this.
However, if you just want the iframe opening above the edge of the window you could move the iframe around like this:
.fb_iframe_widget iframe {
position:absolute;
top:-165px;
background:#fff; /* in your case you may want to add a white background */
}
Also you'll need to remove overflow:hidden from #footer.
You should end up with this:
I know it's not ideal, but given Facebook's lack of interest in being particularly developer friendly it is likely as close as you can get to what you're after.
Update:
Wrap the whole widget in a div and position the div where you had it to begin with. Then you can you use the following CSS to position the iframe.
.fb_iframe_widget iframe {
position:absolute;
top:-165px;
background:#fff;
right:10px;
}
#media (min-width:1200px) {
.fb_iframe_widget iframe {
position:absolute;
top:-165px;
background:#fff;
right:-45px;
}
}
#media (max-width:979px) and (min-width: 768px) {
.fb_iframe_widget iframe {
position:absolute;
top:-165px;
background:#fff;
right:110px;
}
}
#media (max-width:767px) {
.fb_iframe_widget iframe {
position:absolute;
top:-165px;
background:#fff;
right:0px;
}
}
a) you should change your footer's height, it won't affect much your design, even your responsive options, it could be like this:
#footer {
margin-left: 0;
height: 230px;
background: #fff;
border-top: 1px solid whiteSmoke;
}
or...
b) you can put the like button in your side bar without changing any css, i will look something like this:
http://puu.sh/3Srmq.png
I have a compromise solution too.
After user clicked the like button, scroll window untill widget totally shows up by callback function.
Code looks like
FB.Event.subscribe('edge.create', function(response) {
$('html, body').animate({
scrollTop : $("#yourFacebookWidgetID").offset().top + 170 //add offset.
}, 10);
});
Here is the fiddle.(I borrowed this instance, Somebody made it long time ago.)
Here is the screenshots.
After clicked the like button, just before auto scroll.
And this is the screen after auto scrolling finished.
Please notice the last like button.
Edited : add the 170px offset .
Add screenshots.
That's what worked out for me.
.wrap-parent {
zoom: 1; //or your clearfix class
}
.wrap {
overflow: visible;
}
The html will be something like
<div class='wrap-parent>
<div class='wrap'>
<!-- button here -->
</div>
</div>
I have just got a developer to redesign my website and I have noticed one thing.
In Google Chrome my web page has a nice margin around it, about 2". But on IE the page goes right up to the edge of the page and makes the page look super big.
I want them both to have a margin around the page.
The web page I am talking about is, web design quotes.
Is the code I need to change in the CSS?
Any help is appreciated.
This link will show you how to make 'responsive web designs' so it fits all resolutions.
http://blog.teamtreehouse.com/beginners-guide-to-responsive-web-design
You can try this. it helps you when it does not work in IE
body {
margin:50px 0px; padding:0px;
text-align:center;
}
#Content {
width:500px;
margin:0px auto;
text-align:left;
padding:15px;
border:1px dashed #333;
background-color:#eee;
}
in your body you give the margin and in your content you do an margin auto.
as explained here: http://bluerobot.com/web/css/center1.html
I am making a website for someone and I want it to resize itself depending on the screen resolution and the zoom of the browser(I am not including smartphones). I currently have a menu wich is like that :
every element in the menu is in a div and here is the css:
#barre_utilisateur //For the menu bar(the red bar)
{
height:45px;
background-color:#A31E39;
width:100%;
}
#content_boutton_accueil //the home button
{
margin-left:2%;
width:200px;
display:inline-block;
}
#notification //exclamation mark button
{
cursor:pointer;
width:60px;
height:45px;
display:inline-block;
}
and now, I want the cogwheel icon the stick on the right on the left of the user button. I don't see how I can achieve this.
Also, when I zoom in too much the righ part of the menu get out of where it is supposed to be is there a way to prevent this?
A good example of what I am trying to achieve is the new outlook live page
You can position the overall menu div (#barre_utilisateur) relatively, and then its children absolutely in it. For example:
#barre_utilisateur {
position: relative;
}
#cogwheel {
position: absolute;
right: 0;
}
Another way could be to have 2 divs inside the menu (#barre_utilisateur), and then to float the first one to the left and the other - to the right.
Please take a look at THIS page.
Please feed in some random data and click on the edges of the button to submit.
PROBLEM: I am not able to click the button on the edges.
AIM: I want to extend the click-able portion to all over the button.
I think I have to introduce to it. But I am not sure where and how it has to be done.
The code I use for the button is
<?php echo $form->submit('Submit', array('class' => 'submit_input', 'div' => array('class' => 'stndrd_btn', 'style' => 'margin-top:20px;'))); ?>
Thanks and have a good day
What library/framework are you using to generate forms? The code you posted doesn't tell us much about the generated HTML.
Anyway. If you inspect the DOM with Firebug or something similar, you'll see that the button element doesn't cover all the visual space.
Looking at your CSS (global_style.css), I can see that the width for this button is hardcoded to 131 pixels:
.submit_input {
color:#FFF;
margin:0 auto;
text-align:center;
font-size:14px;
font-weight:bold;
background:none;
border:none;
width:131px;
height:22px;
padding-top:6px;
cursor:pointer;
}
The element that wraps the actual button (and shows the visual pointer cursor and background image) has a width of 140px and a height of 30px.
Now, you don't want to hardcode these values to the button again, you want to set this button to 100% width and height. This might not work if it's an inline element, so you need to set its display property to block. Replace the .submit_input selector to the following:
.submit_input {
color:#FFF;
margin:0 auto;
text-align:center;
font-size:14px;
font-weight:bold;
background:none;
border:none;
width: 100%;
height: 100%;
display: block;
padding-top:6px;
cursor:pointer;
}
That should do it. Cheers.
Set the width and height attributes in submit_input css class to 100%