Trying to align an image added by my client in the WordPress header. As someone who is still learning CSS, I'm struggling to get it exactly where we want it.
Visit the site here
The Options House graphic currently sits on the right. My goal is to have it positioned to the right of the word "stocks" in the tagline. Any suggestions?
====Adjustments made based on feedback below====
@Beardminator offered a solution, but after implementing the code, this is how the site header appeared:
To adjust the position of the options_house element, you can use the following CSS styles:
#options_house {
float: right;
position: relative;
top: 40px;
left: 52px;
}
Additionally, make sure to remove the "overflow: hidden" property from the header class.
Replace the following 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;
}
To align the logo to the right, add right:0px; to the .logo_mmj CSS rules.
.logo_mmj
{
position:relative;
float:right;
}
Update:
Adjust the left property in .slogan and increase the top value in the .logo_mmj div for better alignment, especially if the site has a different logo.
Having some difficulty with the :first-child selector. It just won't cooperate in my code. The goal is to execute a simple transform on two elements using the :first-child, but it's failing in multiple instances. Let me explain: First scenario: ...
I have implemented slick.js to display a grid of 6 items (2 rows, 3 columns) per slide. I am looking for a way to include both the standard prev and next arrow navigation as well as an indication of the active item count for pagination assistance. For exa ...
I'm trying to implement an active record association in the DOM, but I'm encountering some difficulties. Here is my editor class: .editing .row .col-sm-3 .col-sm-8 .text-left #font-20 .title-font . ...
As I delve into Angular and experiment with some code, I am focusing on implementing the following functionality: 1. Depending on the user's preference for adding additional details, they can choose between 'yes' or 'no' using radi ...
Is there a way to make only the rhombus image respond to hover events? I want to exclude the transparent area, as shown in this picture. <img src='http://s30.postimg.org/xpd6gwla9/1_Copy.jpg' id="first"> #first:hover { -moz-box-shadow ...
I'm experiencing some issues with a website that is displaying differently in Firefox on Windows compared to Mac. I did some research online to see if there are any known differences in CSS rendering between the two versions of Firefox, but it doesn&a ...
I am interested in updating the color scheme of a website that I modeled after this example: http://getbootstrap.com/examples/navbar/ So far, I have successfully changed the background color of the entire page using: body{background-color:#XXXXXX} Howev ...
I recently worked on a project where I encountered a similar situation to the one showcased in this CodePen. Here is the link to the specific CodePen One issue I faced was that the selected items would disappear when performing an invalid search. After i ...
When you wish to navigate by scrolling with the middle mouse button instead of using the scroll wheel, simply middle-click and your cursor will change allowing for easy scrolling on web pages. Even though I am utilizing style="cursor: pointer" and @click. ...
I'm working on coding a to-do app using JavaScript, HTML, and CSS. The issue I'm facing is that when I add the text-decoration: line-through property to the list items, it also affects the X icon used for deleting tasks. I suspect this problem ar ...
When creating a form that accepts numbers, there may be a specific element, such as a phone number input named phNo, that needs to be exactly 7 digits long. To achieve this validation using JavaScript, the approach is: If the length of the element is not ...
Within my web application, I am dynamically changing the style of an HTML element using JavaScript. Below is the code snippet: function layout() { if(document.getElementById('sh1').getAttribute('src') == "abc.png") { docum ...
I have a function that reveals hidden rows in a table, which works perfectly in all tested browsers except for IE7. The function is written using Prototype.js. function showInactives(){ var row_list = $$('tr.inactive'); var ck =$('inactive_ ...
Currently, I am utilizing styled components to apply styles to a child element inside a div using nested css. For a demonstration, you can view my example here const customStyles = theme => ({ root: { ...theme.typography.button, background ...
I am attempting to style text retrieved from a SQL database, but when I try to preview it, I encounter a Fatal error: Maximum execution time of 30 seconds exceeded on line 64 . I tried setting the maximum execution time to 300 with `ini_set('max_execu ...
After successful JSON Ajax response, a treeview structure with checkboxes is displayed. I need to capture the number of checkboxes checked when the save button is clicked. @model MedeilMVC_CLOUD.Models.UserView <script type="text/javascript"> ...
One issue I am facing is related to two tables with radio buttons. Each table highlights the corresponding row when a radio button is checked, working independently. However, I need a specific value from table 1 to un-highlight any previously checked rows ...
I need some help creating a progress bar to track file uploads on my website. Here's what I have so far: HTML: <form action="upload/files.php" method="post" enctype="multipart/form-data" id="frmUpload"> <input type="file" name="upfile" ...
I'm facing an issue with a chart that doesn't have a specified height or width. My goal is to print the graph in a taller and larger size when I click on the print button. I attempted to use setSize() function, but since there are no original di ...
Recently, I have encountered an issue with the position of a menu icon on my website. The icon is displayed when the window reaches a certain size, but it is not aligned properly on the right side of the site. Ideally, I would like to use the "right" prope ...