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.
Related
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/
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 looked at the other questions to this topic but the answers doesn't help me.
It's a little bit hard to explain but i'll try. So I have a footer:
#fußzeile{
width: 100%;
background-color: #e9e8e5;
padding-top: 14px;
padding-bottom: 14px;
bottom: 0;
padding-left: 24px;
height: 36px;
text-align: center;
}
I tried overflow: hidden, height: 100% etc.
I used margin-top to push the wrapper down then it works but if I minimize the site the gap is back again.. Position: absolute/relative doesn't work also..
Try using the following in your css:
#fußzeile{
position: fixed;
bottom: 0px;
}
Try this:
#fußzeile{
display:block;
position:absolute;
left:0;
right:0;
bottom:0;
background-color: #e9e8e5;
padding-top: 14px;
padding-bottom: 14px;
padding-left: 24px;
height: 36px;
text-align: center;
}
Here is a working demo.
position: absolute;
width: 100%;
this corrected it for me with 2 added lines of code.
This happens when there is no content above the footer. You can try this Move the footer div outside any container (if it is contained in a container, make sure its a direct child to the html) and then make the POSITION : absolute;
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>
Please check this page: http://badadesigns.com/work438/
Here at the top of the page there are social media icons but they are not aligned to the right side of the page. When I am resizing the browser page then the alignment is changing.
I am really not sure what code is being used, but I think this is it:
#logincont {
width:330px;
float:left;
margin-left:1145px;
}
Can anyone please help me with the alignment so that it is fixed and set along the right side border of the page?
div #logincont is set to float:left and has a huge margin-left which is unnecessary.
It should be float: right without margin, like this
#logincont {
width:330px;
float:right;
}
Update : If I understand correctly, you want the social media icons to be aligned on the right but not further than the content of the site.
Try this :
#logincont {
width: 940px;
text-align: right;
margin: 0 auto;
}
width is set to the width of the #content div, the content of #logincont is aligned right and #logincont itself is centered on the page with margin: 0 auto
If you are trying to get all of the content to stay within view try fixing this:
#logincont {
postition:absolute;
right:2px;
}
You could try this:
#logincont {
width:330px;
float:right;
}
Based on your requirements and the type of element you might need to add more properties.
Not sure what you're looking for specifically, but try this:
#login {
background: #113240;
color: #DDD;
height: 30px;
padding: 8px;
position: fixed;
z-index: 3;
top: 0;
right: 0;
left: 0;
}
#logincont {
width: 330px;
position: fixed;
right: 0;
}
#header {
background: white;
border-bottom: 1px solid #EBEBEC;
padding: 4.429em 0 0;
position: relative;
z-index: 1;
}