I have a situation where I cannot change the css files but not html/php. I have two buttons in the page with ID's "moveprevbtn" and "movenextbtn". They are at present closely located. Using Css or using any scripts I need to spread them away. I am not being able to do it.
With CSS I tried something like this,
#moveprevbtn {
position: relative;
left: -30px;
}
#movenextbtn {
position: relative;
right: 30px;
}
But didnt help me much. Any suggestion.
I am talking in context of LimeSurvey. PHP/MySql
Here the IDs Previous button and next button respectively. I can edit the CSS files. I have to move them to left and right by providing space between them.
It looks like you are looking to have the buttons side-by-side and just spaced further apart. If that is correct, this would work.
#moveprevbtn {
position: absolute;
left: 30px;
}
#movenextbtn {
position: absolute;
right: 30px;
}
ALTERNATIVELY:
you could just add space between the two buttons like this:
#moveprevbtn {
position: relative;
margin-left: -30px;
}
#movenextbtn {
position: relative;
margin-right: -30px;
}
The first option will put your buttons 30px from the right and 30px from the left side of your view port.
The second will should simply subtract space on the opposing sides of your buttons which adds space between the two.
If I understand the question right and you want your buttons side by side with space in middle:
Add margin-left to #movenextbtn
#movenextbtn {
background: transparent url(myNextImage.png) 0 0 no-repeat;
margin-left:100px;
position: relative;
}
DEMO
Related
I've got a site which is about to hit a traffic milestone. As we countdown to our millionth visitor, I thought it would be fun to move my stats widget from the right sidebar, and nest it in the corner of my site header element.
So far, I've managed to use this CSS to move the Widget out of the side menu... but I'm really struggling to figure out how to put this element into another div.
.bottomright {
position: absolute;
bottom: 8px;
right: 16px;
font-size: 18px;
}
This popped the widget out of the sidebar, and made it hover always in the corner. Neat...
My goal though, is to move that widget into this spot
Following this guide from the W3 Schools page, I've tried to nest the widget into the div I want it to go inside of (which is called header.site-header)
Here's the element I want it to go inside:
If I set it's position absolute and fiddle with sizing, I can shove it where I want it to go, but this doesn't look good for tablets or mobiles.
#blog-stats-2 {
position: absolute;
top: 75px;
right:5px;
width: 300px;
border: 3px solid #73AD21;
z-index:5;
}
Is there any keyword I'm missing to nest this in the corner of the site-header div?
You'll need to move your hit counter into the header HTML first before using position: absolute; otherwise it simply won't work. Try something like this.
You'll need to work this into your HTML code.
<header class="site-header">
<div id="blog-stats-2">
<!-- code here -->
</div>
</header>
Then your CSS like this.
header.site-header {
position: relative;
}
#blog-stats-2 {
position: absolute;
right: 20px;
bottom: 20px;
z-index: 123;
}
What that does is moves your hit counter into the header section and positions it absolutely to the bottom right of the header. Using position: relative; on a parent container and position: absolute; on a child element will make sure the top, right, bottom and left attributes are relative to the parents location all the time.
For mobile you'll need to change this further using media queries to make sure it sits inside the header nicely.
#media screen and (max-width: 768px) {
#blog-stats-2 {
left: 10px;
right: auto;
bottom: 10px;
}
}
So without the form my bottom bar is touching the end of the vertical lines. When I add the HTML for the search bar it causes the horizontal line to shift down. I cant figure out how to move the seach bar so that it's in line with the the other words. I've tried using padding, margins, positive, and negative pixels to move the search bar, but nothing works. Below are the three blocks that have effects on the div the form is in.
#search-bar {
top: 0px;
}
.topbar {
float: left;
height: 150%;
}
#top-bar {
width:1200px;
margin: 0 auto;
height: 40px;
}
Have you tried:
position: fixed;
Further, if you want the search bar to be flush against the let hand side, use
left: 0px;
For bottom, use bottom: 0px;
Top: top: 0px; etc
http://www.w3schools.com/cssref/pr_class_position.asp
This is a follow up to my last post, I found a issue after putting the images on top not sure if this is directly related. The issue is where you can't click on the nav links as they are transparent.
Only one shows the hover color when the cursor is put in a specific position. None of them can be click other that one which only works in a specific position. They do not show the hover color.
Code:
CODE HAS BEEN DELETED AS WEBSITE IS POSTED
Your problem is located here:
div.staffimg {
top: 100px;
left: 0px;
right: 205px;
bottom: 0px;
position: fixed;
}
Instead of just positioning your element, you are creating a block element that covers your navigation as it extends to bottom of screen.
Remove the left and bottom properties to solve this:
div.staffimg {
top: 100px;
/* left: 0px; */
right: 205px;
/* bottom: 0px; */
position: fixed;
}
I am currently working on the site at http://crowfell.com/index2.php, if you enter a username into the log in form and log in a player profile appears in the top-right corner. When a user isn't logged in the page is fine, but once they've logged in the player profile div creates a 100% width div that starts at the right side of the page, extending it unnecessarily to the right into blank space.
How can I stop a position:absolute div from having a 100% width?
This is created using the following code:
HTML/PHP:
<div class='fixed'>
<?php
echo "<h1>" . $_SESSION['name'] . "</h1>";
include 'comp.php';
?>
<p>0 posts, 0 votes</p>
</div>
<div class='userimg'>
<img src='images/user.jpg'>
</div>
CSS:
.fixed {
/*font-family: 'Cinzel Decorative', cursive;*/
width: 160px;
color: #eeeeee;
position: absolute;
top: 0;
margin-left: 86%;
}
.userimg {
position: absolute;
top: 2px;
margin-left: 78%;
}
The PHP file in the include is simply a random complement generator and adds a short line, which is only affected by the div css.
I have tried adding width:20%; to each css style, I have also tried giving it a low left value, adding overflow:hidden;, as well as containing the two divs in a third and giving that different width and overflow properties. None have worked!
Thanks in advance for any help you can offer!
You're making it harder than it has to be with your left and margin-left on your fixed and userimg classes.
Try this CSS instead. Remove the left and margin-left on both of them and use
.fixed {
color: #EEEEEE;
position: absolute;
right: 2px;
top: 0;
width: 160px;
}
.userimg {
position: absolute;
right: 180px;
top: 2px;
}
Now you're making them relative to each other on the right side of the screen instead of trying to bump from the left.
I am trying to make a website responsive; I am almost done with it, except that when I make the window smaller, the nav links overlap the logo on the left. Look at it here
How do i make the nav bar move to under the logo when i re-size the window?
Thanks for any help
I had a play with your code and the first thing I spotted was the two #nav id's.
You should only have one unique id per page.
However, your main issue is the position fixed of the navigation items.
This is causing the nav to always just march on over the logo.
Position fixed ignores the document flow and places it wherever you put it.
You need to get the navigation back into the document flow
Change your nav items to relative and meddle with the top positioning.
You should place these in a new media query relating to your break points
You will also need to remove all those positioning styles.
That should get you half way there.
I would help more but I've just been given a rum and coke so best to stop now.
Steve
Either move the logo down, or create some space above it and put the links in said space.
You have to change many of the position attributes along with the float properties - I played around with the CSS on the site, and this is what I changed:
#topBar {
height: 300px;
}
.BODYcontainer {
margin-top: 300px;
}
.container .columns {
float: none;
}
.container .columns.logoBox {
left: 0;
position: relative;
display: block;
float: none;
margin-bottom: 50px;
}
#nav {
position: relative;
float: none;
top: 0;
left: 0;
right: 0;
text-align: center;
display: block;
}
#companyNav {
float: none;
position: relative;
top: 0;
}