I am writing a CSS and I need to use a float to place an element in the top-left corner. I want the element to not move when the page resizes. However, when I resize the page the element (a navigation header for my webpage) moves to the next line and I want to stay in its position. I have tried positioning it as fixed but it needs to scroll with the whole page.
#navigation {
float: right;
width: 400px;
height: 400px;
background-color: blue;
margin-left: 5px;
}
#navigation a{
color: white;
}
<div id="navigation">
<a class="navButton" href="#">Stores</a>
<a class="navButton" href="#">Buy</a>
<a class="navButton" href="#">Shop</a>
<a class="navButton" href="#">Information</a>
</div>
Related
I've the following very basic menu bar on the top of my page:
The left "hamburger" menu opens aligned to the left, with the width expanding toward the right. All is well:
However, the right one also aligns to the left, with the width expanding toward the right. This isn't so great:
How would I go about making that right menu rest against the right edge, in the same way the left menu rests against the left edge?
My html is below. The css is somewhat long (therefore, here's a paste link) but simple.
<div id='header'>
<div id='headerContent'>
<div id='breadcrumbs'>
<div id='hamburger' class='headerMenu'>
<i class='fa fa-bars'></i>
<ul>
<li><a href='/'>Page</a></li>
<li><a href='/'>Whatever</a></li>
<li><a href='/'>Other stuff</a></li>
</ul>
</div> Title
</div>
<div id='login'>
<div class='headerMenu'>
<i class='fa fa-user-circle'></i>
<ul>
<li><a href='/user/logout/'>Logout</a></li>
</ul>
</div>
</div>
</div>
</div>
I feel like having a container to hold the button and menu with position: relative and setting text-align: right, then using right: 0 on the menu would be the right way to go:
#header {
background: lightblue;
}
.right {
text-align: right;
position: relative;
width: 200px;
}
.popup {
position: absolute;
padding-left: 0;
margin: 0;
right: 0;
background: lightgreen;
}
<div id="header">
<div class="right">
<a>Menu</a>
<ul class="popup">
Popup menu
</ul>
</div>
</div>
You should be able to modify the container div in many ways (e.g. width, margin, display: inline-block, etc) without messing up the behavior.
This question has been asked a couple of times, but all are at least 4-5 years old from what I see. So I am wondering if there is a new better/easier way to do this.
I got a menu with a button in it, the menu will change in size according to the logo that is posted in it. So when I upload a large logo the menu is stretched in height, but the button stays the same height. The menubar has no specified height so height:100% will not work.
Image for more clarity:
The white bar is my menu, and the grey area my button.
The html markup:
<nav class="navbar navbar-default navbar-static-top m-b-0">
<div class="navbar-header">
<a class="navbar-toggle hidden-sm hidden-md hidden-lg " href="javascript:void(0)" data-toggle="collapse" data-target=".navbar-collapse"><i class="ti-menu"></i></a>
<div class="top-left-part"><a class="logo" href="index.php"><img style="height:100%;" src="logo.png" alt="home" /></a></div>
<ul class="nav navbar-top-links navbar-left hidden-xs">
<li><i class="icon-arrow-left-circle ti-menu"></i></li>
</ul>
<ul class="nav navbar-top-links navbar-right pull-right">
<li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#"><b class="hidden-xs"><i class="fa fa-user"></i> User</b> </a>
<ul class="dropdown-menu dropdown-user animated flipInY">
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</li>
</ul>
</div>
</nav>
Relevant css:
.navbar-default {
position: relative;
width: 100%;
top: 0;
}
.navbar-header {
background: #fff !important;
width: 100%;
border: 0;
}
.nav {
padding-left: 0;
margin-bottom: 0;
list-style: none;
}
.navbar-top-links > li > a {
color: #1f7db1;
padding: 0 12px;
line-height: 60px;
min-height: 60px;
}
.navbar-top-links > li > a:hover {
background: rgba(0, 0, 0, 0.1);
}
using CSS this could be down with display:table on parent and display:table-cell on the children. but i don't suggest you use that in your current situation because you have a bunch of divs there, navbars etc.
so i made a JQ solution. i hope you don't mind. it's very easy to understand and easy to modify if needed.
let me know if it helps
see fiddle here > Jsfiddle
JQ code :
var newHeight = $(".top-left-part").height()
$(".pull-right > li.dropdown > a.dropdown-toggle").height(newHeight)
to align the text vertically i added
a.dropdown-toggle {
display:flex
align-items:center;
}
Here is a proof-of-concept solution that may help. This solution uses CSS only and does not require JavaScript.
Let .wrap be the parent container that contains your navigation, logo and so on.
In .wrap, create a protected area to the right that will contain your button. Do this by specifying padding-right: 100px (for example) and then specify position: relative.
You can now define an element called .right-panel that will contain your button and so on. For .right-panel, specify position: absolute and set the offsets as top: 0 and bottom: 0 to force it to keep to the height of the parent block, and then right: 0 to pin it to the right of the parent and then set the width: 100px (for example).
As you change the content in the parent container, the .right-panel will take on the height of the parent in a responsive manner.
The limitation here is that you need to specify a width for the right-hand side panel/element, which may not be too limiting since you know something about the design of the button (such as its dimensions).
You might need to specify a min-height for the parent .wrap for cases where you have either no logo or a logo whose height is less than that of the intrinsic height of the button.
Note: If you are using a CSS framework like Bootstrap, you may need to do some more work fit this into a floated parent, but I have not tried it.
.wrap {
border: 1px dotted blue;
position: relative;
padding-right: 100px;
}
.right-panel {
border: 1px dashed gray;
position: absolute;
right:0;
top: 0;
bottom: 0;
width: 100px;
}
<div class="wrap">
<h1>Some header that can be text or a logo.</h1>
<p>Some content and so on.</p>
<div class="right-panel">
<p>A button or whatever.</p>
</div>
</div>
I have a div called Buttons with 100% width inside a floating sidebar. The sidebar has 30% width.
Inside the div Buttons I have four links with background-images. I want to center the four links inside the div, but they must spread (all have the same margin, but the left one should be completely left and the right one completely right). But: it should also work inside my Responsive website. So if I resize my window, they must also be centered. That is why I can't set margins in pixels.
Please help me!
Sorry for my English.
[EDIT: My code]:
HTML:
<div id="sidebar">
<div id="buttons">
<a id="twitter" href="http://www.twitter.com" title="Twitter" target="_blank"></a>
<a id="facebook" href="http://www.facebook.com" title="Facebook" target="_blank"></a>
<a id="rss" href="rss.php" title="RSS" target="_blank"></a>
<a id="youtube" href="http://www.youtube.come" title="YouTube" target="_blank"></a>
</div>
</div>
CSS:
#sidebar{
float:right;
width:30%;
text-align:center;
}
#buttons{
width:100%;
}
#twitter,#facebook,#rss,#youtube{
height:40px;
display: inline-block;
margin-top:20px;
}
#twitter{width:40px;}
#twitter{background:url('/images/icons.png') 0 0;}
#facebook{width:40px;}
#facebook{background:url('/images/icons.png') -40px 0;}
#rss{width:40px;}
#rss{background:url('/images/icons.png') -80px 0;}
#youtube{width:40px;}
#youtube{background:url('/images/icons.png') -120px 0;}
Seeing your code would definitely help, but I'm guessing you're looking for something like this:
--edit--
Okay so it looks like we need to position these buttons absolutely, so try:
#buttons {
position: relative;
min-height: 40px;
}
#buttons > a {
position: absolute;
width: 40px;
height: 40px;
}
a#twitter { background: red; left: 0px; }
a#facebook { background: orange; left: 36%; margin-left: -20px; }
a#rss { background: yellow; left: 64%; margin-left: -20px; }
a#youtube { background: green; right: 0px;}
Aaand fiddle: http://jsfiddle.net/ttjAW/9/
You might need to adjust the left percentages because the buttons have fixed widths (its hard to do this using fixed and variable width elements...) I then applied a negative margin of half of the buttons width to centre them.
Does this do what you needed?
Use text-align: justify on your #buttons element to center the button elements perfectly and allow them to expand responsively within the space.
Add text-align: justify on your #buttons element
Add a #buttons:after pseudo element with 100% width to force the buttons to fill the entire sidebar
Here's a working example on JSbin.
And here's the code for your situation:
HTML:
<div id="sidebar">
<div id="buttons">
<a id="twitter" href="#">1</a>
<a id="facebook" href="#">2</a>
<a id="rss" href="#">3</a>
<a id="youtube" href="#">4</a>
</div>
</div>
CSS:
#buttons {
text-align: justify;
width: 100%;
}
#buttons:after {
content: '';
display: inline-block;
width: 100%;
}
#buttons a {
display: inline-block;
height: 40px;
width: 40px;
}
This method is more fully documented here: http://www.barrelny.com/blog/text-align-justify-and-rwd/
I have a bunch of vertically aligned tab items in which and I can't seem to get the parent container (the <a href...> in my HTML) to expand to cover the child elements. I've tried using a <br style="clear: both"> and overflow: hidden;but the first didn't do anything and the second just cut it off (using auto just added a scroll bar, which doesn't help) any thoughts on how to fix it?
HTML sample:
<li class="active">
<a href="#pane1a" data-toggle="tab">
<div class="preview-box">
<img class="preview-image" src="img/monestary_floorplan.png">
<p id="previewcarousel1a"></p>
</div>
</a>
</li>
<li>
<a href="#pane1b" data-toggle="tab">
<div class="preview-box">
<img class="preview-image" src="img/bkg-img-home2.jpg">
<p id="previewcarousel1b"></p>
</div>
</a>
</li>
CSS:
.preview-box {
width: 90px;
height: 80px;
/*border: 2px solid red;*/
margin-left:auto;
margin-right:auto;
}
.preview-image {
display: block;
width: 75px;
height: 60px;
border: 4px solid #84be46;
margin-left:auto;
margin-right:auto;
}
.preview-items p{
color: #84be46;
text-align: center;
margin-top: 5px;
}
The whole site can be seen here
Adding display: inline-block; to your a element seems to solve your problem. You may have adjust padding/margin, though.
For a project of mine I decided to start using Responsive Design. The guide I was using wasn't definitive and purely introductory so I got lost somewhere there and can't find the problem here. If use the code below you'll render yourself a navigation menu. It looks fine on a 13 inch screen but go to a smaller screen size by perhaps shortening the width of your browser you'll notice that the navigation menu will take over the logo's space. How can I tweak this so that the navigation menu won't be on top of the logo and perhaps will stop before it goes over the logo?
HTML:
<header class="bar_top">
<div class="logo_block">
<a href="index.php">
<img alt="Logo" src="/logo.png" class="logo">
</a>
</div>
<nav class="menu_above">
<ul class="menu">
<li class="menu_inner">Home</li>
<li class="menu_inner">Our Products</li>
<li class="menu_inner">Services</li>
<li class="menu_inner">About Company</li>
<li class="menu_inner">Contact
<ul class="menu_layer">
<li class="menu_contact_is"><a class="menu_contact_inner" href="#">Menu 1</a>
</li>
<li class="menu_contact_is"><a class="menu_contact_inner" href="#">Menu 2</a>
</li>
<li class="menu_contact_is"><a class="menu_contact_inner" href="#">Menu 3</a>
</li>
</ul>
</li>
<span class="phone_us">000-000-0000</span>
</ul>
</nav>
</header>
CSS:
.bar_top {
background-color: #FFFFFF;
font-size:14.5px;
width: 100%;
height: 82px;
top: 0;
left: 0;
position:absolute;
z-index: 99;
}
.logo_block {
display: block;
position: absolute;
z-index: 998;
}
.logo {
margin-left: 30px;
margin-top: -3px;
height: 85px;
}
.menu_above {
width: 960px;
margin: 40px auto;
float:right;
}
.menu_layer {
margin-left: -40px;
}
.menu_contact_is {
color: #ffffff !important;
}
a.menu_contact_inner {
color: #ffffff !important;
}
.phone_us {
font-size: 1.5625em;
margin-left: 75px;
}
Try the attribute margin: auto; to set elements on the center of the screen or the container, instead of using static values to position the elements
Also you can read about flexible design and responsive design to learn about.
If you are trying to keep the menu next to the logo on the left side of the page you should try this:
.logo_block {
display: inline-block;
vertical-align: top;
}
.menu_above {
margin: 40px auto;
display: inline-block;
}
It's quite common to wrap the content with a div container that has a fixed with and auto margin on the sides to keep it on the center of the page.
You should also consider to revise the other elements on you page as you are using unnecessary relative positioning. ;)