I am building a webshop with on the left side a sidebar with a sort of navbar in it.
But the background (color Brown) has to fill the whole left side, but if my page is longer it covers not the complete left side.
This is my CSS for the background:
.sidebar {
z-index: 10;
border-top: 2px #000000;
position: absolute;
float: left;
left: 0;
margin-top: -5%;
padding-bottom: -10px;
width: 15%;
min-height: 115%;
max-height: 200%;
background: #C6A970;
}
Does anyone have an idea how to cover the left side of my webpage?
Thanx in advance!
according to the informations you gave you probably search something like that:
Fiddle
Your provided css already shows that your code must be messy, using float and position absolute together is weird and your min-height and max-height are over 100%.
We could help a little better if you provide full code.
Please try this:
Use this css:
.sidebar {
z-index: 10;
border-top: 2px #000000;
position: absolute;
float: left;
left: 0;
bottom: 0;
margin-top: -5%;
padding-bottom: -10px;
width: 15%;
min-height: 100%;
background: #C6A970;
}
or refer to the jsfiddle link below:
https://jsfiddle.net/89f074ke/1/
Related
I want to make a message box at the lower left corner of the browser window. I want the div to remain stuck to the lower left corner. So if I make the browser smaller it will not disappear. Here is the jsfiddle I am working with. But it's not working. How can it be done in css? Here is my css code:
#lowerleft
{
margin-bottom: 1px;
margin-left : 1px;
width: 200px;
height: 200px;
background-color: red;
color: green;
}
Take a look at position; in this case position: fixed; bottom: 0;
https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
#lowerleft
{
margin-bottom: 1px;
margin-left : 1px;
width: 200px;
height: 200px;
background-color: red;
color: green;
position: fixed;
bottom: 0;
}
<div id="lowerleft">
I am stuck to lower left border of browser. And I am stuck at the top of lower boundary of te browser.
</diV>
#lowerleft
{
position:fixed;
bottom:0;
left:0;
margin-bottom: 1px;
margin-left : 1px;
width: 200px;
height: 200px;
background-color: red;
color: green;
}
Jsfiddle Demo
To your css add this:
position: absolute;
bottom: 0px;
left: 0px;
JSFiddle
Use absolute positioning (syntax example below):
#lowerleft {
position: absolute;
left: 0; bottom: 0;
}
What you are currently doing is modifying the margin of the element. This only has an effect on the elements surrounding the subject.
Using absolute positioning places the subject div on top of everything else, having no effect on surrounding elements.
Find out about absolute positioning from the w3Schools site here.
I have recently tried to position a "username" and "password" field in a div which it's background has some graphics. In the graphics, I need a text field to be positioned and sized. I have a live view at the front page of "spaggit.com". Here is my CSS code:
#pageFrontMiddle {
margin: 0px auto;
width: 1000px;
background-color: #F9F9F9;
height: 590px;
background: url('/images/frontImage.png') no-repeat;
}
and here is the image:http://www.spaggit.com/images/frontImage.png
Any help would be greatly appreciated.
Thanks in advance,
-Jaydon.
Although this is NOT how you should develop your website, here is how you can do it:
Just put relative positioning on the Image Wrapper and absolute positioning on the Inputs and mess with the height, width, top and left properties.
#pageFrontMiddle #input_username {
border: 0;
background: transparent;
height: 51px;
width: 365px;
padding: 10px 20px;
font-size: 20px;
position: absolute;
top: 289px;
left: 466px;
}
JSFiddle
my client has added an image to their WordPress header. I am having difficulty (I'm still learning CSS) getting the image to align where we want it.
This is the site here
You can see the Options House graphic on the right. I want it to be to the right of the word "stocks" in the tagline. Help?
====Edits based upon suggestions below====
#Beardminator made a suggested answer, but this is what the site header looked like after including that code:
Relatively position that options_house div like so:
#options_house {
float: right;
position: relative;
top: 40px;
left: 52px;
}
And take off the overflow hidden from the header class.
Here is the 2 div which you should replace with this code:
.slogan {
color: #EBEBEB;
font-size: 17px;
left: 200px;
line-height: 25px;
position: absolute;
text-shadow: 0 2px 4px #0F243E;
top: 59px;
}
.logo_mmj, .logo_mmj:visited, .logo_mmj:hover, .logo_mmj:visited:hover {
background: url("../images/logo_marijuana.png") no-repeat scroll 0 0 transparent;
display: block;
float: right;
height: 95px;
position: absolute;
right: 0;
text-decoration: none;
top: 23px;
width: 392px;
}
You need to put the logo to the right, so the .logo_mmj should contain
right:0px;
Or if you use position:relative;
You can use like this:
.logo_mmj
{
position:relative;
float:right;
}
update:
The site you linked have very different logo that's why It only made it worse. You only need to adjust
.slogan left property. And add
to .logo_mmj div top:30px or much more.
Here is what it looks like:
I'd like to have the picture and the name be in the same line as the header... Without having to do manual margin-top...
Just to note... I am using Bootstrap.
http://getbootstrap.com/
Here is the HTML code...
Here is the CSS code...
.navbar-top {
height: 64px;
background-color: #772A75;
position: fixed;
width: 100%;
min-height: 64px;
top: 0;
left: 0;
z-index: 1000;
box-shadow: 0px 2px 10px #888888;
}
.navbar-container {
padding: 0 20px;
}
.navbar-heading {
margin-top: 10px;
}
Just set float: left for the left heading and set float: right for the right image block.
You can move the dropdown-toggle after the h1 tag, make sure to add display : inline-block to both of them. you might have to play with floats and width to get them the way you want...
I am trying to place a css element to the right side of the header but not sure exactly how to do it. I tried using:
position: Absolute; top: 20px; right 0px;
That would work but if you adjust the browser the text moves with it.
I created a JFiddle that you can find here:
http://jsfiddle.net/rKWXQ/
This way you can see what I am trying to do. I have a text inside a wrapped div element that says Call Now (555) 555-5555.
Here is the header element and inside of that I have a right_header element.
<div id="header">
<span class="right_header">Call Now (555) 555-5555</span>
</div>
Here is my Header CSS:
/* Header */
#header {margin: auto; width: 1007px; height: 123px; background: url(../images/logo.png) no-repeat 20px; background-color: #37352b; border: 1px solid #862209;}
.right_header{color: #fff; position: absolute; top: 70px; right: 0px}
Can someone please tell me the proper way to accomplish this please?
Note the left side will have a logo there that will not load in JFiddle!
Thanks!
You can easily just float it to the right, no need for relative or absolute positioning.
.right_header {
color: #fff;
float: right;
}
Updated jsFiddle - might need to add some padding/margins - like this.
Two more ways to do it:
Using margins on the element you want to position to the right of its parent.
.element {
margin-right: 0px;
margin-left: auto;
}
Using flexbox on the parent element:
.parent {
display: flex;
justify-content: right;
}
As JoshC mentioned, using float is one option. I think your situation suggests another solution, though.
You need to set position: relative on your #header element in order for the position: absolute on your #right_header to take effect. once you set that, you are free to position #right_header however you want relative to #header
You can do this way also if you want to do with position, Try this please
#header {margin: auto; position:relative; width: 1007px; height: 123px; background: url(../images/logo.png) no-repeat 20px; background-color: #37352b; border: 1px solid #862209;}
.right_header{color: #fff; position: absolute; top: 0px; right: 0px}
The answer using floats from JoshC will work fine, however, I think there is a reason this is not working.
The reason your code does not work, is that the absolute position is relative to the which has dimensions of 0x0.
The '' should be absolutely position in order for this code to work.
#header {margin: auto; width: 1007px; height: 123px; background: url(../images/logo.png) no-repeat 20px; background-color: #37352b; border: 1px solid #862209;}
change it to...
#header {margin: auto; position: absolute; left: 0px; right: 0px; top 0px; height: 123px; background: url(../images/logo.png) no-repeat 20px; background-color: #37352b; border: 1px solid #862209;}
<div><button>Continue</button></div>
to make button on the right of div
<style>
button {
display:block;
margin-left:auto;
}
</style>