I have uploaded the following page to make easier for you to help me:
http://www.rebuslondon.com/GEBROCHUREcopy.html
Do not use Internet Explorer as I have not optimised the page for that.
As you can see, there are 4 images, being three orange and one yellow.
While the orange ones are simply embedded into the parent element, the yellow one is floated so that it will stick to the parent's right edge when the browser window is enlarged.
This works all right but when the window is narrowed (for example 1024*768), this creates a gap below the floated image.
Is there a way to make that gap disappear? I guess the best way for you to understand what the issue is is trying resizing the browser window. You'll notice that the narrower the window the bigger the gap will become.
Thanks much!
The problem is the fact that you have added clear:both to the li immediately following li.right. If you remove this rule, it displays fine.
#portfolio #container > ul.projFlow li.floated + li {
clear: both;
}
Simply remove clear both from your contents.css line 90
#portfolio #container > ul.projFlow li.floated + li {
clear: both;
}
Just remove that completely and it will be fine.
Related
I am trying to figure out how to do something which is quite hard to explain. I have set up a test here
When you visit that site, you will see I have a left and right column. The left column is fixed into position, and when you scroll down, only the right column scrolls. I have put some colourful images in there to show this happening.
What I want to do on the right hand side is have two images side by side, rather than one below each other. To achieve this, I can do
.project {
float: left;
width: 50%;
}
This now displays the images how I want them to display.
However, if you scroll now, you will notice that the left section scrolls down to the bottom instead of staying fixed like it was before.
How can I make the change I am after whilst keeping the left section the same?
Thanks
Maybe instead of changing your .project, you can change the styling of the list elements that contain the project pictures.
I added display: inline-block; to the list using the browser developer tools. It looks like the effect you want.
Edit1: I also added width: 49%;.
New picture:
Edit2: If you must have no spaces between those colorful box things, then using flex is a good way to do that.
To the parent tag (<ul>), you add styling to make it a flex with row wrapping. Then you can set the child's width to 50%.
According to Chrome's developer tools, this should be added around styles.css, line 3238.
nav > ol, nav > ul {
display: flex;
flex: wrap;
}
Note: this will work for at least both inline-block and block child elements.
You have some JS that is removing the class 'title--fixed' from the left hand panel on scrolling, which means it loses the position: fixed. If you add position: fixed to
.chapter .chapter__title {
position: fixed
}
That should resolve
Hi so I am working on creating a wordpress template from an existing static website.
However I can't seem to get the CSS for the menu to work correctly.
I need a style that is applied to the menu to be applied to all of the li and not have to code each one individually.
The problem is I want to add a background-color to each item (making them look like buttons). If you look at the site again, it puts a huge box rather than putting a small background-color to each item. I hope that makes sense.
You can see the site here: http://lawrences.work/
First, remove your width:149px; on #menu-menu.
Second, on #menu-menu li, remove all margins, and try apply this code
# menu-menu li {
background-color: #FFC0CB;
display: inline;
padding: 10px 20px;
}
Alright, so I've checked it out and it appears to be that the div#logo is causing your menu to be vertically stretched.
I'm not entirely sure as to why since I didn't scan all the CSS or couldn't find anything related to it directly.
Either way I do have an explanation for what actually happened anyways.
So this div.menu-menu-container in your HTML is lexically positioned just below the div#logo - if you inspect element on them you should see highlighting overlap when hovering between the two.
An element that is float: left basically has no height. It is sort-of removed from the document flow unless the div below it has clear: both or the parent has overflow: hidden - both which have their own nasty side-effects.
Anyway, this div#logo caused your div.menu-menu-container to stretch vertically because the div#logo was floated and your div.menu-menu-container wasn't causing it to be quirky.
To fix this I added one property to div.menu-menu-container which should not harm your layout in any way except for keeping these floated elements out of your way.
the property clear: both allows you to clear a float so that the document flow after it turns back to normal. This shrunk your menu down to the size it's supposed to be in the position it's supposed to be in.
EDIT (18-11-2015)
I actually had a choice of using clear: both or float: left - both fix the issue since all floated elements do think about each other, just not about the non-floated elements as much.
clear: both however is the nicest solution in this case because it doesn't change the behaviour of that element specifically whereas floating it does.
Also, the snippet you're going to need for your code to work:
.menu-menu-container {
clear: both; // or float: left; for that matter
}
For more reading on MDN / css-tricks
float
clear
css-tricks on float
Hope this helps you understand your issue, if you need more information I'll see it in the comments!
Good luck
http://jsfiddle.net/gUckp/
In the above demo, I'd like to show an orange round image BELOW the center of menu item when it is hovered.
However I am not able to show all the image. The bottom is cut.
How can I do it with CSS?
Thanks in advance.
When using display:inline; on the li items, the height attribute you've given is ignored. Put the :hover on the li items istead of the a tags and it works. The height and line-height you've used becomes superfluous.
Updated jsfiddle
Your a tag needs a block specification.
See: http://jsfiddle.net/gUckp/16/.
Note the line display: inline-block; for the #nav a class.
The reason for the image not displaying correctly in your sample is because it was being placed outside of the a tag rendered block size.
EDIT
Firebug helps tremendously in resolving these types of issues. It allows you to inspect elements etc. I'd suggest adding it to your development toolkit.
background: #01291e url(http://demo.chevereto.com/images/hoverorang.png) no-repeat 50%;
See the updated jsfiddle.
Edit: O sorry, that's not what you asked for. Will try again... ;)
Edit 2: Hereby the correct one.
Edit 3: Or this one with a nicer focusrect size. Enjoy!
lately i've been slamming my head against my desk to solve this Problem. Didn't work out. I know it can be solved by editing the contents with some clearing elements. Sadly there is some javascript sorting beeing used and the Sourcode is being generated by CMS Components so that would be my last shot.
I'm having a few boxes beeing floated alwayes 2 in a row. The boxes have a diffrent height but equal width and are all placed in a container with static width. The link shows the source i need to reproduce the Problem. My Boxes are beeing floated left. I tried to fix this with clear: left on odd and clear: right on even elements. But that only works in ff/ie8/chrome Browsers, not ie7.
Example: http://www.i3rutus.de/ie7divfloatexample/
Anyone knows a possibility to fix this Problem by just editing the CSS not the actual XHTML? Problem appears in IE7. IE8, Chrome and FF work fine.
Any Ideas?
Thanks in advance
Here's the deal. You only need to float one of each of the pairs of boxes. Here's the amended css rules:
.even {
float: left;
clear: left;
margin-top: 0
}
.odd {
}
Demo
(Incidentally, your use of odd and even had me chasing my tail for a while ;) )
Just remove
.even {
clear: left;
}
.odd {
clear: right;
}
and it works as intented.
If you are able to include a js in the header then maybe try to use http://code.google.com/p/ie7-js/?
I played with it but given float:right screws it up, it's probably a little more complex than experimenting with float values.
-- update --
I seemed to be able to get it work in ie7 by:
remove float:left on .clear,
added float:left;margin-top:0px to .even
I have a site I made really fast that uses floats to display different sections of content. The floated content and the content that has an additional margin both appear fine in FF/IE, but on safari one of the divs is completely hidden. I've tried switching to padding and position:relative, but nothing has worked for me. If I take out the code to display it to the right it shows up again but under the floated content.
The main section of css that seems to be causing the problem is:
#settings{
float:left;
}
#right_content{
margin-top:20px;
margin-left:440px;
width:400px;
}
This gives me the same result whether I specify a size to the #settings div or not. Any ideas would be appreciated.
The site is available at: http://frickinsweet.com/tools/Theme.mvc.aspx to see the source code.
I believe the error lies in the mark up that the color picker is generating. I saved the page and removed that code for the color picker and it renders fine in IE/FF/SF.
Have you tried floating the #right_content div to the right?
#right_content{
float: right;
margin-top: 20px;
width: 400px;
}
Sorry I should have mentioned that as well. I tried floating that content right and additionally tried floating it left and setting the position with the thinking that both divs would start out at left:0 where setting the margin of the right would move it over.
Thanks
A few things you should fix beforehand:
Your <style> tag is in <body>, when it belongs in <head>
You have a typo "realtive" in one of your inline styles:
<a href="http://feeds.feedburner.com/ryanlanciaux" style="position:realtive; top:-6px;">
Try to get your page to validate; this should make debugging the actual problems far easier.