I'm almost finished with a pretty big text project that I'm working on, and I need to address a problem I've been putting off: the sidenotes I'm using are occasionally running into each other and overlapping. You can see the problem here if you look for ovoce a or Euripedes.
There are probably lots of different ways of solving the problem. But I'm just not sure where to begin. Any suggestions or clever ideas would be very welcome. Thanks!
EDIT: I'm trying this again. The solution that seemed to work turned out not to work too well!
In your HTML structure, the asides belong to the same column as the main text. If you take away the asides' CSS, they will appear in their original positions, pushing the main text further down. The CSS pushes the asides to the left; position:absolute prevents the asides from taking up space in the main text's column. The layout relies heavily on position:absolute. Take the property out and all the numbering pseudo-elements in front of the paragraphs will be displaced as well.
To achieve the same effect without absolute positioning, you have to rewrite a lot of code: either introduce a 4-column (instead of 2-column) table and move the sidenotes to their own columns, or switch to a jungle of floated divs. Welcome to CSS hell.
I don't know how strict the restrictions on your project are, but here's another approach.
.sidenote {
background-color: white;
}
.sidenote:hover {
z-index: 10;
}
By setting background-color to white, the asides will be opaque. Should they overlap, the aside further down will cover the one above it. As soon as the user hovers over an aside, it will be brought on top of the nearby asides.
I searched for ovoce and found the issue. The sidenote for the text above it is too long so it overlaps. Anyway you can just style the text below it and give it a margin-top like this?
style="margin-top: 60px;"
Related
I am using wordpress and I can only add Custom CSS to it. I want to push it a bit more on the right side so that my text (article) width can increase.
Here is my website, http://www.defensionem.com/schwellenpflug/
http://www.defensionem.com.
Notice the side-bar on the right, which has a link for Facebook. I want my content to appear in the "middle" of the screen hence I added a bit of padding on the left. But I find I am unable to increase the width of the text.
How do I move the side-bar a bit to the right?
Yes I did try, but nothing worked.
Also, how do I hide the the paragraph tags?
http://www.defensionem.com/profile/Renaud-Mayers/
I typed that info in the Wordpress column. (I cannot make a new post for 90mins so I added it here. Sorry)
The easiest way is just to do lower the margin-right value:
.content-wrapper__inside.sidebar--true.sidebar--right .main-content__inside
{
margin-right: 180px;
}
Be aware that the styles are for a responsive site. So you might have to change it for other screen sizes as well.
it looks like you put your paragraph tags inside of the quotes:
"<p>Currently working on behalf of the Belgian Ministry of Defence, thanks to my high knowledge in WWII and other areas. Working in two WWII era fortresses still belonging to the Army.</p>"
just move them to the outside, or perhaps get rid of them altogether.
i have completed the basic template for my site. Although i have one problem. When you make the browser to small everything starts to scrunch together. The pictures get smaller and smaller until you cant see them anymore. The text starts to all go into one line. I am not sure why this is happening. My guess is that by changing the position it should work, so that is what i did. When i did change the positioning everything on my site went crazy. Is there anyway to group everything in a site and make it all static together? I am stuck at this point so any advice would be great. Basically i would like to know how to group together my site at the center while keeping the whole thing together.
I would assume that giving you a link to my site would be more effective than a fiddle.
mytesttestwebsite.com
But here is a jsfiddleanyways
http://jsfiddle.net/4yeb5x6g/
This is the code to one of the images that shrink when you make the site smaller.
.image10 {
z-index: 5;
margin-top: 738px;
margin-left: 478px;
position: absolute;
}
I would personally not start messing with the z-index property.
From the small css code you put here isn't enough to gauge the problem. I would suggest that you enclose everything into a div with a set width
<<'div id='container' style='width:800px'>>
place website in this space
'<<'/div>>'
sorry ignore the ' i don't know how to display code yet!
Good luck,
Boom!
Based on what you said, I feel that it is safe to assume you have used things like width="50%" or height="100%" or whatever.
Make sure you are using set heights, such as width="87px" or height="168px"
I have just looked at your code and yes, you need to define a wide for the entire site, so as I said before. You must put everything in a div tag and specify a width for it in CSS or the html
take a look at this site.
http://testrc-aandis.rhcloud.com/
It has been built purely with css and html. Don't worry about the random text. I made it that way. :P
Everything looks alright. But go ahead and resize your browser. Everything gets messed up. What am I doing wrong here? One thing I know is that I use relative positioning a lot. I try to position every element individually. But I read somewhere that relative positioning isn't bad practice at all. So why is this happening. Please advice me so that this doesn't happen again.
PS-I've also included bootstrap in the html files because I planned to use them, but haven't used them as of now. Not sure though if that is causing the problem.
Your .circle divs are 200px wide and have 14px x 11em = 154px right margin each plus 210px left margin in the first .circle. That makes 1272px all together. How can you expect your site to NOT mess up? If you want it to work properly on smaller resolutions, make it responsive or simply reduce the margins.
Another thing is the menu .nav. It is a mess.
You should do the following things:
add text-align: center to ul.nav
remove margin-left property from .hg div
I'm creating my personal website build on wordpress and now I'm remaking template. After whole day of doing css, html and php...and looking for a lot of things of internet, I encountred for a lot of people known problem.
Somewhere in my site, some element is giving me margin which i don't want. You can see it on the picture below:
I know the rules of this website, to give code and you will try to help me, but now, I don't know where is the problem. So if someone with bigger experience and little bit of time can look at my page, I would be really thankfull.
My site si svrcek.webfix.sk
You front slider has a <p> in it that has margin.
delete this node and the space goes.
As it is empty do you need it? and if so can you add styling to it?
I don't know why you have this margin, but this CSS will fix that :
.front-slider {
float: left;
}
Your .front-slider element is causing the gap. Add a position:absolute to fix it. (If it's not the markup of the slider, you could also remove the redundant <p> which initially is causing the problem.)
To have really clean code, you should remove all absolute positioning from the child elements and just position the .front-slider wrapper accordingly. Also it seems like your green navigation buttons don't work. Probably there is an option to position and style the soliloquy-next and soliloquy-prev buttons which seem a but redundant at the moment.
Noormally you can select text with left click function
I work on this Site and am not able to select text in the top areas of the page.
What is wrong with the code?
HTML: link
CSS: link
The footer is on top of the text. Just remove position:absolute form #footer
EDIT:
I can't replicate your issues because my solution is working. Here you can see it
I right clicked the offending text in firefox and used the "inspect element" option, which helpfully tells me what element is sitting directly below the mouse.
Your #footer div is sitting ontop of the text, due to having position:absolute; set with no actual positioning.
If you remove the position:absolute; from #footer and reposition it properly, your problem should go away.
Related note:
I notice that the way you're handling positioning content on the page is a bit weird - you're using position:absolute for nearly everything?
It's outside of the scope of this answer but seriously consider moving away from this -- it's causing this problem and will probably give you a headache in future. That thing you're doing where the contents of your footer have massive margins to push them further down the page past the content? That's an unstable solution and a good sign that your layout has gone wrong somewhere.
This is a fairly simple layout and can be handled fine by basic flow control like floats...
The footer div blocks the text so only the upper part is unselectable. You might want to change your layout or structure of your html and css to avoid blocking the text.
Take a look at this: