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
Related
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
I have a dynamically generated list of moderators on a minecraft network with a tooltip generated for each head that is generated showing their username on hover. The functionality works, the tooltip generates and has the correct username in it however, the position is wrong. It's shifted to the left and falls apart as I move down the list. Here's a gif on what's happening:
I simply do not know what to do in this situation.
Well the plugin seems to work correctly (if the names are okay), I suppose it might be a css issue. Maybe the parts of the tooltip get somehow some margin on them. try to inspect them with right click and see if they have any other style attributes than the defaults.
Anyway, if you could post some of the codes, that would be easier.
Seems like this page has changed since you asked this question, but I bet it was a CSS issue. You probably needed to center the tooltip box relative to its parent. Here's some (unvetted) code that might help. I've only included the properties that would affect the centering on the tooltip container:
.parent {
position: relative;
}
.tooltip-container {
position: absolute;
left: 50%;
width: 100px;
margin-left: -50px;
}
Notice, you have to set a width on the tooltip-container. margin-left is 1/2 the width, and negative (visualize that left: 50% will put the left edge of the container at the center of the parent, and the negative margin-left will shift the container half the width of the container).
I have one more problem to solve before I can call my first website done, and I would greatly appreicate the help of this community.
You can see my website for yourself at www.dylanbisch.com
The problem I am trying to solve occurs on the homescreen between the class artdesign and tumblr-wrapper.
Basically, the class "artdesign" contains the two circular buttons and the class "tumblr-wrapper" contains the black and white photos on the homescreen.
My problem occurs if you shrink the browers window and then try to scroll left and right. Instead of scrolling left and right across the entire page, only the black and white photos in the "tumblr-wrapper" class scroll left and right.
I am looking for a solution that would stop the tumblr-wrapper from being the only thing to scroll when the brower window is small, and would create full page left right scrolling.
I hope I have explained by problem adequately, but if I need to explain something differently please let me know.
On line 370 of style.css, you have a position:fixed applied to the .artdesign.
Im not sure what the logic was for putting it there exactly, but if you remove it, the page will scroll as you expect.
The fixed position means that div is fixed and will not move (even if you scroll), its mainly used to stick headers and footers to the top and bottom of pages. (Like the twitter bootstrap page [notice the black header menu along the top?.. thats fixed])
So basically:
.artdesign { /* Line 370 of style.css */
float: left;
padding: 200px 0 0 10px;
position: fixed; /* REMOVE THIS POSITION FIXED TO SCROLL! */
width: 579px;
list-style-type: none;
}
You have .artdesign set to "position: fixed" so this will always stay at the same window location. Change this to "position: absolute" and this should solve the problem.
I'm learning HTML/CSS and I encountered a problem. I'm currently working on goodwill.heyscout.com as a side project.
From learnlayout.org, I learned that the best way to structure a layout with a div is to give the inner a position:absolute, and the outer a position:relative. This works.
However, this throws the alignment off as soon as I add the position:absolute (I want the profile cards side-by-side). Without the position absolute, everything gets shifted if I want to alter the layout of the profile card. As you can see on the bottom two profile cards, they align as those aren't altered.
Can anybody point me in the right direction?
I also know that my code is pretty messy and that's what I really need to get better at... any other suggestions on how I can improve my code would also be useful.
You can throw a float: left onto your outer class and that should get them sitting side by side again. You may want to read up on using floats at some point as they can be very powerful (if a little hard to get your head around at first)
.outer {
width: 49%;
display: inline-block;
float: left;
}
BTW, I notice you using id="outer" multiple times. You should change this to class="outer" as an ID should be unique, whereas a class can be used multiple times. You'll see in the above CSS that I've used .outer as I'm targeting by a class name (rather than #outer which targets by ID)
Interesting problem you have found. I can't tell you exactly why it is behaving this way but it appears to be related to having text directly in the #box div or not. If you remove the "test" from the second one it aligns as you would expect. Likewise, if you put the exact same content in the second div as the first, they align.
For improvements I would start by never re-using an id (like you are doing with #outer and #box for example, these should be classes). The id attribute needs to be unique, no two DOM-elements should have the same id.
I would also suggest using a ul for #businesscards sice it represents a list of cards. This would make #outer an li. You did this in #navlist so you know what I mean.
Give just vertical-align: top; to your #outer div. The problem will be solved.
As this happens only to child elements, give something like this to solve the issue:
div > * { /* or just '*' */
vertical-align: top; /* or middle */
}
My page looks like this: http://ink-12.terc.edu/index.cfm
I want to get the picture (kids' drawings) on the left to follow the rest of the centered content, when the window expands:
Per the suggestions I found in other answers, I added an outer div (#maincontent) to hold my two divs that I want to scroll instead of wrap (#tbltframe and #drawings), and some additional coding (overflow:auto; display:inline-block; white-space:nowrap).
Now my page looks like this:
http://ink-12.web5test.terc.edu/index.cfm
So now it doesn't wrap (great!), but it cut off my drop shadow on the right side (you can still see it on the bottom). And I need to get the main content centered again (following the centered header and footer)--similar to the first webpage I listed. After the changes, the main content aligns left. I tried adding margin-right and margin-left:auto, as well as text-align:center, but neither did it. I also added a min-width, which doesn't seem to do it either. I can see the drop shadow again when I change the min-width to something significantly larger (74em), then but I don't know why, because #tbltframe (50em) and #drawings (14em) = 64em total.
Any help would be very much appreciated. Suggestions to move forward with the code on either webpage I listed would be fine. Thank you!
Please try the below css on skeleton.css line 64
#maincontent {
display: inline-block;
overflow: auto;
white-space: nowrap;
width: 1169px;
}
It will increase the width of the main content div so the images will not cut from sides..
Found a solution: http://www.search-this.com/2008/08/28/lets-all-get-inline-in-a-block-in-a-block/
Have to:
Create a min-width or width on the outer div (#maincontent)
Make #maincontent a block element with display:block
Center #maincontent with text-align:center
Make the inside divs (#drawings and #tbltframe)not wrap in #maincontent with white-space:nowrap;
Make the inside divs inline block elements with display:inline-block
Then make the text inside wrap again (if you want) with white-space:normal