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
Related
I am using this CSS to display Forms in center of the screen.
.Absolute-Center
{
width: 40%;
height: 50%;
overflow: auto;
margin: auto;
position: fixed;
top: 0; left: 0; bottom: 0; right: 0;
}
Different forms have different number of elements. For example say Login Form have 4 elements, and Forgot password form have 2 elements and form-3 have 12 elements.
For me Login Form is display perfectly. PassWord Form showing some blank area in Bottom. and form-3 showing scroll bar to see bottom elements.
I don't want Blank area or scroll bar in any of the form.
What changes needed in this CSS Class to achieve that?
you need to remove the commented out lines:
.Absolute-Center {
width: 40%;
/* height: auto; */
/* overflow: auto; */
margin: auto;
position: fixed;
/* top: 0; */
/* left: 0; */
/* bottom: 0; */
/* right: 0; */
}
Setting the height to 50% means that the height of the form will be fixed to 50% of the height of its container and setting overflow to auto means that if the form is to big to fit in that height, you'll get a scroll bar. By removing these lines, you'll allow the browser to set the height of the form based on the content. You'll also want to removed the top and bottom properties, as these stretch the div over the entire page.
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
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.
How can I make a semi-transparent element with text in it which goes on top of one navigation bar, but goes under the other? I am trying to make an effect like in http://hongkong.grand.hyatt.com/en/hotel/home.html where the red Hyatt logo and "hong kong" go above [over] the brown bar, but below the white (top of screen). https://www.dropbox.com/s/xarl3qe3ncxrdm1/Untitled20130520174504.jpg?v=0rc-s
You'll just need to use various z-index values for the arrangement and opacity to get the transparency.
(source: snag.gy)
#topbar {
height: 20px;
width: 100%;
position: fixed; /*so it doesn't scroll with the page*/
left: 0;
top: 0;
z-index: 3; /*the bar on top gets the highest index because it's above everything else*/
}
#secondtopbar {
height: 20px;
width: 100%;
position: fixed;
top: 20px;
left: 0;
z-index: 1; /*the second bar on top gets the lowest index because it's below everything else except the text, with doesn't even get a z-index*/
}
#logo {
opacity: 0.5; /*this makes it half-transparent, on a scale from 0-1*/
height: 100px;
width: 100px;
position: absolute;
top: 30px;
left: 30px;
z-index: 2; /*the logo gets the middle index because it's in between*/
}
What type of a solution are you searching for? If you check out what the Grand Hyatt did, they're using an image and setting position: absolute to place it where they want it to appear.
If you do not want to use an image, you could use some HTML elements layered on top of each other to recreate the logo: See here http://jsfiddle.net/U3mCz/
Couple of notes:
You'll have to set a lower z-index on the parent of the logowrapper
(in my example, anything under 500 will work), so that the logo stays
on top.
You'll need to adjust your css on the logowrapper to position the logo where you want it.
If you adjust the height of the red bar, make sure you set your line-height equal to the height of the red bar to ensure vertical-centering of your text!
Hope that helps you out.
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;
}