Hey all - I don't know why my rollover links don't work now. I think it may have to do with z-index and divs being hidden.
The breadcrumbs for example:
<div id="breadcrumbs">
Home >>
Section Title >>
Parent Menu Item >>
Sub-Item 1
</div>
The last two work for some reason. You can look at the page and view the source from here:
http://cpkdesign.com/uiaustin
Thanks everyone.
For the div with the right id, if you can give it the following css:
#right {
margin-left: 0px;
margin-top: 0;
padding-left: 0px;
width: 745px;
float: left;
}
That should hopefully take care of your problem.
More info:
The reason why you're running into this issue is that the right div is overlapping your links. The general rule is, if you're gonna start floating your elements, then keep an eye on the non-floating elements...that div is your non-floating element in a sea of floating divs.
Related
I'm not very good with HTML/CSS. Here is the website that I'm trying to edit. I'm unsure if this should be in WordPress Stack because even though my website is in WordPress, the problem is with the CSS. Also, I'm really sorry for bad English (I know 5 languages so its kinda hard to keep up).
The problem is that the grid (Essential Grid which displays a product catalog) and the container above it are both children of one div. When I try to change the padding of my grid, It changes the padding relative to the top of the parent div rather than instead of its sibling which is on top of it.
I'm not sure what CSS properties might be affecting this(I'm not very good at CSS) but I have posted the ones which I think might be the problem. Please visit the link and inspect element (Sorry..)
.child-on-top{
//acutal id on page is featured-111
width: 99.8936px;
height: 449px;
background-size: 100% 100%;
}
.child-below{
position: relative;
padding-top: 100px;
}
.parent{
//actual id is wrapper.
position: relative;
clear: both;
}
One solution that has worked so far is if I increase the top padding to about 500 px, that would add about 50 pixels of padding above the child element thats below. But that will only work in desktop. In mobile, you will get a lot of empty space. So it isn't really a solution.
Add folowing css and then check. Your div which have id featured-111 which take floating from class grid and because of this problem create. So write this css
#featured-111{
float:none;
}
I have two divs inside a main container. One is floating left (youtube video), and the other one on the right (soundcloud player).
When I zoom in (110%) the div container on the right collapses underneath, onto the next line.
How can I stop this from happening? Am I missing something in the CSS?
.youtube {
float: left;
width: 640px;
height: 360px;
}
.maincontainer {
position:relative;
margin-top: 1%;
margin-right: auto;
margin-left: auto;
max-width: 1900px;
height: 1000px;
padding-right: 10px;
padding-left: 10px;
}
.soundcloud {
float:right;
height:388px;
width:580px;
padding-right:50px;
}
jsfiddle : http://jsfiddle.net/richirich/nZgw5/1/
Thanks!
EDIT: Figured it out. I was using "max-width" in the .maincontainer div. I changed it and used "width" instead and now the soundcloud player doesn't drop down to the next line anymore. So that's solved.
This leads me to another question though: how am I supposed to know whether to use % or px to define the dimensions of a div? People have given me conflicting answers and it just confuses me...
I personally found that using pixels helps the boxes to stay in place and not drift apart when zooming in or zooming out..
Add a CSS Reset, which involves putting:
* {
margin:0;
padding 0;
}
at the top of your CSS file. This resets all margins and padding.
If that doesn't work try making the div that contains the whole middle section of the site (The youtube video and text and the soundcloud box), I think you've called it main container, a little bigger. Add maybe 10-15 pixels to the width. It could be running out of space.
Hope this helps. Next time try posting a little more info and in particular some code :)
I'm currently creating a website and I came across a strange thing: I have a content div that's 950 width and centered on the page. Inside that I have a header div, a menu div and some other content div. I would like the menu div and that other content div to be right next to each other so I thought about using float:left on both divs. However, when I use this float:left on the menu div, it's getting pushed to the right and I can't figure out why. I think some other element is pushing it to the right.
I'm using a custom Drupal theme, a subtheme of Zen to create the page by the way.
Here's the HTML I'm using to create the page (without the header):
<div id="root">
<div class="content">
<div class="left-menu">
<ul>
<li><p>Camera</p></li>
<li><p>Audio</p></li>
<li><p>Licht</p></li>
<li><p>Lenzen</p></li>
<li><p>Grip</p></li>
<li><p>Accessoires</p></li>
<li><p>Recorders</p></li>
<li><p>Transport</p></li>
<li><p>Edit suits</p></li>
<li><p>Crew</p></li>
</ul>
</div>
<div class="products-overview">
This is some other content that I want to the right of the menu.
</div>
</div>
And here are some CSS properties I've set on left-menu and products-overview:
.left-menu {
margin-top: 10px;
background-color: #BBB;
width: 150px;
float: left;
}
.products-overview {
background-color: #BBB;
float: left;
}
Could anyone please explain me why the left-menu is being pushed to the right?
Hmm, I believe this is a result of the normalize.css stylesheet you're using.
The problem stems actually from the .header element, which has a table within it. The normalizing stylesheet has a margin-bottom:1.5em applied to the table, which translates into a margin on the .header element (since it has no padding/border), which in turn sends the .left-menu to the right (since the margin causes there to be no space for it to fit on the left).
Adding to your current .header table definition can fix this, with a simple:
.header table{
margin-bottom: 0;
}
I hope this is what you were looking for! If not, let me know and I'll be happy to help further. Good luck!
I tried to replicate your problem. I did and found a solution that should work. Just set the products-overview class to float:none. See this fiddle. http://jsfiddle.net/shaansingh/yj4Uc/
In Mozilla Firefox it looks ok to me. From your code, I can only see that you need a width for the content div. and watch the dimensions, especially left/right padding and borders.
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Space at the bottom and right side of my page
First off, I am sorry for posting this twice, my previous question earlier got good replies but they did not fix my problem.. so I am posting it again to hopefully get some more answers (I really need to fix this issue!)
Link for the actual page
Basically, at the bottom of my page between the offers/properties div and the footer there is a big space. I know why this is; I have used relative positioning and used top: -256px; to position the boxes where they are.
I have tried:
Aligning the 2 divs with absolute positioning - that does the trick of getting rid of the space at the bottom and I can get the boxes where I want them however if I was to scale down the browser, the boxes go out of position..(is there a way to get around that?)
Removing all positioning and floating them to the left/right - removes the space at the bottom/right but doesn't go into the position I would like them to
Sam on my previous question did this, it sorts of my problem just I can get them into position!
Adding overflow: hidden; to the container div.
I just don't know what to do so any help is really appreciated!
Thanks in advance!
EDIT:
Just saw that you got that answer already.. The next step is to put those boxes in a container.
<div id="offer_box_wrap"></div>
style
#offer_box_wrap {
width: 650px;
float: left;
margin-left: 5px;
}
you'll have to tweak it but it should work
end EDIT
You are relatively positioning your left boxes so...
i would suggest this
do not use <li> for boxes
use a div with a class that aligns them as you want.
<div class="offer_box"></div>
style it
.offer_box {
width: 208px;
height: 170px;
background: url(http://www.propertytest.uphero.com/images/offers_box.png) no-repeat;
float:left;
margin: (figure out the spacing you need for 3 per row)
}
put a clear div underneath the last one
<div style="clear: both"></div>
see it here http://jsfiddle.net/atTGa/2/
On the website http://thornhillss.ca/pages.php?id=7 The footer looks fine in every browser. Yet in chrome it doesn't touch the bottom of the frame. Why is that. It should be a simple fix however I just dont know why it wont work.
*It should stick to the bottom of my div. Not my page.
This is because the div with the id "main2" isn't set to expand with the right-hand floated div. By default divs won't expand to fit floated child elements, so you need to tell it to hide overflow (which will tell it to expand to fit all child elements as long as you don't also give it a fixed height):
#main2 {
width: 860px;
margin-top: 15px;
margin-left: 20px;
margin-right: 20px;
position: relative;
overflow:hidden;
}
You're p.clear class has a margin on it as you're not using a reset.
If you add margin:0 to your .clear styles the margin goes away and it displays how you want it to.
This is what you are looking for it works and is awesome sticky footer