I am having an issue in trying to get the 2 product ul items to sit within the first tab, they are always outside the tab
if i remove the:
float: left
from the
.featured-products-grid li.item { float:left; width:132px; padding:25px 5px 30px; }
thin it works, but the products are not aligned horizontally.
here is the page
http://khine.3b1.org/jquery/product.html
what am i missing
I think you just need to clear your floats. If you add the following style to ul.featured-products-grid you should be good:
ul.featured-products-grid {
overflow: auto;
width: 100%;
}
Related
At the bottom of my page there are 3 buttons. "Send, Save and Cancel" buttons. The Save and Cancel buttons are the same height but the "Send" button is different from the other two. Why is this happening?
I read on another post that said elements render buttons different from normal buttons so I tried to fix it with the solution given but it didn't work. I also tried removing element but it still didn't work. Thanks for your help!
Buttons Styles
background-color: #8f81e8;
color: #fff;
border-radius: 5px;
text-transform: uppercase;
font-weight: 300;
font-size: 16px;
cursor: pointer;
padding: 1rem;
CodePen
It's because your send is input while other elements are button.
Add border: none; to your css
you can give static height to all three buttons.
You have two different divs: .user-messages (the left one) and .settings the right one.
The left one contains an input, while the right one contains two buttons. So you can either add border:none to the left one to make the border disappear and then re-arrange your layout to use a button instead of an input.
Update
Wrap the buttons into a seperate div below the div of the two pages and do the following:
div {
display:flex;
justify-content:space-around;
}
button {
width: 100%;
margin: 5px; /* or whatever you want to have */
}
<div style="width: 100%; background-color: green;">
<button type="button">A</button>
<button type="button">B</button>
<button type="button">C</button>
</div>
Is the result of my snippet the desired outcome?
Seems to be the display: flex on the settings-btn-box that is causing it. One solution could look something like this:
.settings-btn-box {
/* display: flex; */
}
.settings-btn-box button {
width: 49%;
}
.btn-save {
/* margin-right: 10px; */
}
.btn-cancel {
/* margin-left: 10px; */
float: right;
}
Personally, I'm not a big fan of float, but since it's the last element in the div it should be fine.
I recently took on a project building a website for a friend of mine. It's a real estate website and you can view it here.
The site uses and IDX to pull data from an MLS. An MLS is a multiple listing service which posts homes for sale and gives a lot of information on them, the IDX (internet data exchange) grabs that information and populates it to your website. It's not cheap either, in my opinion anyway.
The thing with using an IDX, well the IDX my client uses anyway, which is IDX Broker is that their code is in place for the widgets and pages. It's editable, but there are only a handful of styles they have in place. If you want something to look different, you have to edit their css.
I know some css, but not as much as I'd like, and I can't get this code for a widget I want redesigned to do what I want.
What I want is the image to be on the left, and the data (text) to be on the right, probably in two columns, and to be aligned with the image. This widget was originally designed with the image on top and the text center aligned below it, which is the code I started from for this widget. I changed a few things to get the text on the right hand side and the image on the left (float: left;), and I changed the image size to be 350px in height and width. The text on the right side is against the top of the container, and is not aligned well with the image. Also, the images appear in different sizes and appear to have different margin sizes. I'm not sure why this is, but I'm guessing it has something to do with the images on the MLS site, where they are pulled from. I've played around a ton with trying to add float, margins, and align-center to try to get things to look well, but I've had no luck. The selectors used are the ones which were set in place by IDX and ones I must use. It appears it is formatted with tables, rows and cells, but I'm not certain what and where changes to these are affecting. There is also a class selector with a pseudo class called #IDX-showcaseGallery-35264 .IDX-showcaseLink:before which I'm not sure what is or does. I do know I had to change the width in this from 100% to auto in order to get the text on the right hand side of the image, without it being below the image.
Anyway, I'll paste the code below. Any and all help is greatly appreciated.
#IDX-showcaseGallery-35264.IDX-showcaseTable {
table-layout:fixed;
border-spacing:8px;
font-size:11px; }
#IDX-showcaseGallery-35264 .IDX-showcaseRow {
display:table-row; }
#IDX-showcaseGallery-35264 .IDX-showcaseCell {
display:table-cell; margin-top:20px;
}
#IDX-showcaseGallery-35264 .IDX-showcaseContainer {
border:1px solid #666;
-webkit-box-shadow: 1px 1px 3px rgba(22,22,22,.4);
box-shadow: 1px 1px 3px rgba(22,22,22,.4);
padding:3px;
}
#IDX-showcaseGallery-35264 .IDX-showcaseLink {
height: 100%;
width: auto;
font-size: 0;
text-align: center;
display: inline-block;
float: left;
}
#IDX-showcaseGallery-35264 .IDX-showcaseLink:before {
content: "";
display: inline-block;
vertical-align: middle;
}
#IDX-showcaseGallery-35264 .IDX-showcasePhoto {
height: 350px;
width: 350px;
display: inline-block;
float: left;
}
#IDX-showcaseGallery-35264 .IDX-showcaseCell div {
text-align: center;}
/*#IDX-showcaseGallery-35264 .IDX-showcaseListingID,
#IDX-showcaseGallery-35264 .IDX-showcaseBeds,
#IDX-showcaseGallery-35264 .IDX-showcaseBaths,
#IDX-showcaseGallery-35264 .IDX-showcaseFull,
#IDX-showcaseGallery-35264 .IDX-showcasePartial,
#IDX-showcaseGallery-35264 .IDX-showcaseRemarks,
#IDX-showcaseGallery-35264 .IDX-showcaseDisclaimerLink,
#IDX-showcaseGallery-35264 .IDX-showcaseStatus,*/
#IDX-showcaseGallery-35264 .IDX-showcaseStateAbrv {display:none;}
#IDX-showcaseGallery-35264 .IDX-showcaseContainer {
position:relative;
margin-top: 40px;}
Consider using "!important" in your 'custom css' to overwrite plugin's default css.
For instance:
#IDX-showcaseGallery-35264 .IDX-showcasePhoto {
height: 350px!important;
width: 350px!important;
display: inline-block!important;
float: left!important;
}
I have an unordered list within a body and the body tag is aligned to the center, the text for the ul list goes to the middle but the gif image stays to the left side of the page. How do I fix this?
http://www.student.nvcc.edu/home/kosindi/test/ul.html
That is a link to my website which has an example of my problem.
Please explain your logic, thank you.
as per your HTML code you gave in link just few change will do.
in css
body {
padding-left: 45%; // add this css
text-align: left; // change this css
}
You have two variants, choose one:
1.Use this CSS and it will work:
li { list-style-position: inside; }
2.If you want the basket balls to appear one under another then use this CSS:
body { text-align: left; }
ul { width: 200px; margin: 0 auto; }
It's a tricky problem I have and I don't find the best solution. Here is the page:
https://waaave.com/tutorial/android/android-ics-for-your-htc-desire/
As you can see, the green div element overflows the user profile. I don't want to use a margin-left to align it because it will change the position of other green elements and I want to keep a common structure between each of them (this means I don't want to add a new class to align this green element). I want to design a clean solution and make this green element automatically align when it is in the first part (next to the user profile) and in the second part (below the user profile) and only with css (I want this solution working with JavaScript deactivation).
here is the main class for this div (others are just margin top and bottom adjustments):
.block-info {
display: block;
margin: 10px 0 0;
padding-bottom: 3px;
border-left: 28px solid $green;
.icon-block, .text-block {
display: block;
}
.icon-block {
float: left;
margin-top: 5px;
margin-left: -23px;
}
.text-block {
padding-left: 18px;
}
+ br {
display: none;
}
}
If someone have an idea.
Set .block-info to display: table and its children to display:table-cell (this might not be needed, but I believe it should be done for correctness) and it should behave more like you expect.
I have a menu and a search box. I would like to put the search box along with menu items. But my menu is being built in a different file in a div called 'custommenu' which uses the following css:
#custommenu {
position:relative;
z-index:999;
font-size: 14px;
margin: 0 auto;
padding: 10px 16px;
width: 918px;
background-color: #FB0A51;
border-top-left-radius: 10px 10px;
-moz-border-top-left-radius: 10px 10px;
border-top-right-radius: 10px 10px;
-moz-border-top-right-radius: 10px 10px;
}
Whereas I have my search box in a separate file which looks like this:
<div class="header">
some code
<div class="quick-access">
some code
<php echo $this->getChildHtml('topSearch') ?>;
</div>
</div>
I tried adding the following to the css file so that the search box comes on top of the menu but it did not work
.header .form-search {
position:absolute;
right:29px;
z-index:1000;
top: 80px;
width:315px;
height:30px;
padding:1px 0 0 16px;
}
Still the search box gets hidden behind the menu. I would like to have the search box n the menu. How do i do it?
EDIT: Here's the css of the div's which contains the search box,
.header { width:930px; margin:0 auto; padding:10px; text-align:right; position:relative; z-index:10; border-top:3px solid #3C3C42;}
.header .quick-access { float:right; width:600px;margin-top:-125px; padding:28px 10px 0 0; }
.header .form-search { position:relative; top: 100px;left: 300px; z-index:9999; width:315px; height:30px; padding:1px 0 0 16px; }
And this is how it looks right now, (purple links - quick access, white box is search which is going behind the pink 'custommenu' area. I would like to have the white box on the pink area. And all of this is inside 'header')
#all
Sorry for replying very late. But I found the solution after a little bit of fiddling. I set the z-index of my header to a higher value than my custommenu. Since my header contains the search box it needed to have a higher value for the search box to come over the menu.
The code looks like this now
.header{ position: relative; z-index: 4000; }
.header search { position: relative; z-index: 99999; }
.custommenu { position: relative; z-index: 1000 ;}
This perfectly got my search box on top of my menu aligned. Thanks again for all those who helped. Appreciate it.
Try with float? or display:block;
If I was using this code, I would write the css like this:
position:relative;
left:some value;
top:some value;
Z-index: -999
The search box appearing behind the menu sounds like a z-index issue - perhaps the container of the menu has a higher z-index to the search box, try changing the searchbox z-index to 999999.
z-index requires non-static positioning however it is not clear from your code examples which type of positioning is actually used by the elements you are trying to stack with z-index.
Either way here is a very helpful tool which might help you determine which type of positioning you have to use for your elements in regards to how they relate.
http://tjkdesign.com/articles/z-index/teach_yourself_how_elements_stack.asp