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
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'm working on a couple of aspects of someone's website and I'm having a bit of an issue with getting the tabbed navigation to display properly without absolute positioning, and as it's set to absolute the text on the Details tab overruns the "footer" sometimes. (They use a random Testimonials block which pulls varied length quotes, the short quotes cause the overrunning. If it doesn't go over please just refresh)
http://goo.gl/5Iwc1r
Normally I would put this into a jsfiddle but to get the issue to display I would practically have to copy the entire css and html of the page, which wouldn't be very efficient and certainly not very clear to look through.
So, does anyone have any suggestions on the best way to approach this problem? All advice would be much appreciated.
I'm not 100% sure what you're trying to accomplish here. But I'll give it a shot...
Try adding a div underneath the tabbed navigation to act as a spacer, because of the way positioning acts upon screen real estate, this "spacer" div can keep things underneath it nice and tidy. Just set a height value to it to force the content to display where you would like it to.
Hope this helps :)
Because of the way you've structured your pages, it's not going to be easy. The content is places with a position: absolute;. This causes the content to not push down the footer, since the height isn't registered.
I think the fastest way to solve this, without having to rebuild half your website, is by using javascript. Since I see jQuery is loaded, I shall write this using jQuery.
jQuery(document).ready(function(){
setHeight();
jQuery('input[type="radio"]').on('click', function(){
setHeight();
});
});
function setHeight(){
jQuery('#wrapper').height('#wrapper > div > div').is(':visible').height());
}
This piece of code should set the div with id wrapper to the height of the currently visible div.
I haven't tested this, and it is no pretty solution, but it should work.
Good luck!
I'm pretty new to using HTML and CSS and have been building a website for my band. I've uploaded the first version of the site to the net and have been experiencing problems with the text on the "Bio" page when viewing in resolutions lower than 1440x900. Originally the whole site looked weird at lower resolutions but since I added a wrapper it stopped that for everything except the text on the bio page.
When I was creating the site I used the <pre> tag to add the text and I wonder if this is part of my problem? does anyone know how I can rectify this problem? The text is supposed to go to the right of the images.
The website is www.wealmostwere.com
Any tips or hints are most appreciated :)
Many thanks!!
Jay
just add
position: relative;
width: 100%;
to #biotext
This will solve your problem..
When you give an element a width of 100% in CSS, you’re makeing this element’s content area exactly equal to the explicit width of its parent — but only if its parent has an explicit width..
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;"
I'm sure some of you have seen it before, but it happened twice to me before and just now another time. Sometimes when I navigate on my site, the entire body shifts like 2 or 3 pixels to the left or the right. Although the CSS and code isn't changing...
Has anyone an idea where this behavior comes from? Or how to solve this? (I can't paste code, since it's a very large and complex website, and pasting this mass here would bother most of you guys :)
Bet it's the scrollbar either being there or not.
To get round that, force it always to show one by adding overflow-y:scroll; to your html tag.
(Edit: my brain broke)
this usually occurs when the body height is less then the window height. so you can do it by adding overflow:scroll; in css