I have a div (#socmed) with an ul containing li's which i have positioned at the top right of my page. You can find the div inside the header tag. These are social media buttons by the way.
http://digilabs.be/tutu/collection.php
As you can see, it only shows up in chrome and safari (haven't tested in IE yet).
I have tried changing the z-index, because I felt like it got overlapped by the parent div, which is colored pink. But that didn't seem to work. I have no idea what to do.
Thanks in advance for all help.
In your main.css:Line 73
Add a width to the <li> item.
#socmed li {
list-style: none outside none;
margin-top: 5px;
width: 25px; /* Add this width..! */
}
This seems to fix your problem.
Your outer #socmed div has width: 25px, but your <li> within it does not, and by default it is larger then the 25px as specified on #socmed, so would not display.
2 CSS adjustments you can make. First make a relative container (not fully tested on your page, but usually a good practice...
header {
position:relative;
}
Second, define a width for your ul list items in your header...
#socmed ul {
width:30px;
}
Hopefully this helps
This issue is related to the width of div#socmed:
#socmed{
width: auto;
height: 125px;
position: absolute;
top:8px;
right: 40px;
}
Originally, you set width to 25px, and this was not wide enough to show your icons.
This question from:
ul, ol {
margin: 0 0 10px 25px; // to margin:0
padding: 0;
}
please don't in the ul,ol such values margin: 0 0 10px 25px; It is a gobal.
I have put relative div in relative container. It worked.
Related
I have a layout using DIV tags and I have having a hard time controlling the fill of the div tags as well as unnecessary scroll bars. When the content in the "rightside" div tag doesn't fill the screen there is still a scroll bar on the page. How do I cut the tags so they don't fill past the first screen if not needed.
A second issue that I have is when there is enough content in the "rightside" div tag to create the need for a scroll bar, the background of the "sidebar" div tag does not extent to match the bottom of the "rightside"
I have played around with so many of the tag, I have no clue where to go from here. Any help is greatly appreciated!
Here is my CSS Code:
.content_container {
border:2px solid red;
overflow: auto;
height:100%;
}
#sidebar {
background:#a4c2c2;
width:231px;
font:12px georgia;
color: #336666;
line-height:18px;
float:left;
position: absolute;
overflow:hidden;
z-index:-1;
height:100%;
min-height:auto;
}
#sidebar div {
height:2000px;
}
#rightside {
float: left;
width: 500px;
height:100%;
margin-left:231px;
padding: 10px 0px 0px 25px;
}
http://jsfiddle.net/03hcm6ta/
EDIT-
I solved my issue, well almost, with a table. However there is a weird border issue happening and I can't seem to solve it. The side bar and rightside div tags dont seem to completely cover the content_container div. Any suggestions?
http://jsfiddle.net/eh92awh0/
Hopefully I've understood your issue... You had a couple of stray /div tags plus you'd opened paragraphs with P and closed with /p and some duplicated classes in your CSS :)
EDIT - Updated fiddle; http://jsfiddle.net/richardblyth/L9afr65f/
The key is setting all relevant elements to
height: 100%;
position: relative;
And on your container
overflow: hidden;
See my fiddle :)
So, I've managed to make this CSS work, but I'm not 100% sure why it does. I know that's the classic programmer's scenario. I'd like to know why it does, though, so that I can get better.
Here are the two JSfiddle cases (they're exactly the same but with one line different):
With display:block
With float:left
As you can see, the important line of CSS:
.name::before {
content: '';
background: purple;
position: relative;
float: left; /* OR -display: block;- */
height: 22px; width: 100%;
margin-top: -22px; margin-left: -11px;
padding: 0 0px 0 22px;
}
With display:block, the pseudo-element matches the width of the main element (including the borders and padding. However, with float:left, the pseudo-element actually extends the width of the main element; if you change the padding-left to 11px, the increased width disappears, but the ::before stops short and doesn't include the main element's padding+border. This makes me think that inline elements affect other elements that it doesn't share a line with, as long as they're in the same container. Is that right?
Oddly, if you make change the padding to padding: 0 11px, it doesn't extend the right side of the ::before to the edge of the main element like I thought it would. Why is that?
Thanks!
My opinion is:
display: block;
only display the element in block,
while
float: left;
does push the element to the very left of its parents.
If you want to have all the elements to be in one line,
try to use display: inline;
I downloaded a CSS Menu from here and trying to make some changes, here is fiddle file jsfiddle and the full screen result.
Now I trying to do 2 things:
Make Logo text/image not to have hover
Fix the width, I put 100% but if you look at full screen result you will notice what is wrong
Change line 42 to: #navbar li:not(:first-child):hover {
This will make sure the hover effect is not applied to the first <li> which in your case contains the logo. jsFiddle
This is called CSS Selectors Level 3
To fix your nav position use:
#nav {
width: 100%;
position: fixed;
margin: 0 auto;
left: 0px;
}
EDIT: if you still want the little margin on each side use:
#nav {
position: fixed;
margin: 0;
left: 1%; /* you can change this to whatever margin you like */
right: 1%;
}
and add:
#navbar {
width: auto;
}
Try #navbar>li:first-child~li:hover. I updated your fiddle at
http://jsfiddle.net/PHPglue/h4uL6/7/
If you do need a fixed position for some reason, wrap the entire code in a <div>, position:absolute; it and give it the same width and margins as I gave #nav to this <div> then make #nav's position:fixed;.
(I'm looking at this site in IE 8.) As you can see the content floats center knocking the sidebar below it. It works perfectly in Chrome. I can't think why the float:left; command isn't working in IE.
#content {
margin: 5px 0 5px 5px;
font: 1.2em Verdana, Arial, Helvetica, sans-serif;
width:65%;
float:left;
}
Thanks for your help.
Tara
If you add overflow: hidden to your ul#list-nav then that will prevent the floating navigation messing up the rest of the document.
As for why the navigation is displaying strangely, it's because you're specifying your widths and layout badly. What you should be using is this:
ul#list-nav {
overflow: hidden;
}
ul#list-nav li {
width: 16.66%;
float: left;
display: block;
margin: 0;
padding: 0;
}
ul#list-nav li a{
display: block;
margin-left: 1px;text-decoration: none;
padding: 5px 0;
background: #754C78;
color: #EEE;
text-align: center;
}
That way, the width of each element is exactly 16.66%, rather than 16.62% + 1px
what i currently see in IE8 is:
the problem is that menu links are too wide in IE. You've set the width to 16.62% to each anchor in the menu and that's too wide for IE. Since the width of your content is fixed I suggest you set fixed width in pixels (132px) for these links so they fit on one line and look consistent across browsers, also removing li style setting margin: 0.5em 2em to fix positioning problem in IE.
After my fix I see this:
To me it looks like theres nothing really wrong with the content.
In ie6-ie9 the menu seems to be failing in some way.
and also the menu goes in two rows which pushes everything down. I'm not sure if that is all due to the s letter or not at this point..
Note that the extra letter s seems to be somewhere between #menu and #content .containers.
Edit2: the problem is clearly the menu a width which is too much and the menu goes into two rows.
The way menu is often done is that the ulor outer div holds the color and then the menu li are either centered within that or just plain floated to the left. this way you get the full height feel without the tourbles of the menu braking like this ( though if you do it without ignoring the width.. it is possible with too many menu items and so on. )
add clear:both; on menu container.
note: is broken in Firefox to
How can I get an image to stretch the height of a DIV class?
Currently it looks like this:
However, I would like the DIV to be stretched so the image fits properly, but I do not want to resize the `image.
Here is the CSS for the DIV (the grey box):
.product1 {
width: 100%;
padding: 5px;
margin: 0px 0px 15px -5px;
background: #ADA19A;
color: #000000;
min-height: 100px;
}
The CSS being applied on the image:
.product{
display: inline;
float: left;
}
So, how can I fix this?
Add overflow:auto; to .product1
In the markup after the image, insert something like <div style="clear:left"/>. A bit messy, but it's the easiest way I've found.
And while you're at it, put a bit of margin on that image so the text doesn't butt up against it.
Assuming #John Millikin is correct, the code
.product + * { clear: left; }
would suffice to do the same thing without forcing you to manually adjust the code after the div.
One trick you can use is to set the <div>'s overflow property to hidden. This forces browsers to calculate the physical size of the box, and fixes the weird overlap problem with the floated image. It will save you from adding in any extra HTML markup.
Here's how the class should look:
.product1 {
width: 100%;
padding: 5px;
margin: 0px 0px 15px -5px;
background: #ADA19A;
color: #000000;
min-height: 100px;
overflow: hidden;
}
This looks like a job for clearfix to me ...
Try the following:
.Strech
{
background:url(image.jpg);
background-size:100% 100%;
background-repeat:no-repeat;
width:500px;
height:500px;
}
display:inline
float:left
is your problem
Floating makes the parents width not be stretched by the child, try placing the image without the float. If you take the float off, it should give you the desired effect.
Another approach would be to make sure you are clearing your floats at the end of the parent element so that they don't scope creep.
Update: After viewing your link Your height issue as displayed, is because the floats are not being cleared.