First off, let me apologise for the lack of SSCCE. I don't really have enough expertise in this area to figure out what's relevant and what isn't.
In short, the problem is that on two different computers running the same resolution (1366x768), the top border (around the content) on my girlfriend's tumblr theme is off by about 1-3 pixels on one or the other screen. We've tried using measurements in pixels, percentages and em but to no avail. One system is running chromium on Ubuntu 11.10, the other is running Chrome on Windows 7. At the moment, it's the Windows 7 system that's wrong.
Here's what it looks like on my screen:
Hopefully it's obvious what it should look like.
Here's the snippet that counts:
#header {
width: 650px;
height: 10px;
background: url('http://24.media.tumblr.com/tumblr_m7nz4c8UrU1rnrxu1o1_1280.png') no-repeat;
margin-left: 34.40em;
margin-top: 30px;
}
I'd like to draw particular attention to the margin-left rule as that is the rule that, if changed, affects the alignment of the border.
Finally, here's a pastebin link to the entire page, markup and all, in case there's something else that's relevant:
http://pastebin.com/MfxYgv0C
try to use wrapper div for header and content and set the left margin to wrapper.
Related
I've made my own static website from scratch using html5 and css(3) only.But I have got 2 issues.
The first one is the white space between the top's menu and header's image bottom.I've tried everything.
Maybe the only solution for that is float:left; but then the image goes into the navigation tag or negative value on margin's property but I've heard that this technique is bad.
The second issue I'll display via image http://www.filedropper.com/discoversite that's my simple WebSite. I know my css is awful but I'm still a beginner. The second issue is here. http://postimg.org/image/5adp6379d/ . As you can see the text is going out of the box. (I am using % in css for more responsive). I will be glad if anyone can help me.
I can only have a guess for your first issue as I don't know the exact code for your website (create jsfiddle :D ). Try to apply vertical-align: bottom; or display: block; to your header image. Why? Because images are placed like text and some letters like g, j, q and p are going underneath the bottom level. Your browser will leave a tiny space for these letters. Also setting a min-width is a good solution like Kirk Logan said.
And for your second problem there are multiple solutions (depending on what you want):
You can handle your content with overflow: hidden; or overflow: scroll as Kirk Logan suggested. But this wouldn't make any sense in the case you have shown us in the picture.
Or (is a little more complex) you could remove the white borders on the left and right side (just when the screen is too small) in order to gain more space for the text. This can be done by:
#media only screen and (max-width: 768px) {
#BigBorder1 { border-width: 0px; }
#BigBorder2 { border-width: 0px; }
}
Everthing inside the outer brackets will only be applied when the screen's width is smaller than 768px. But to be honest this is usually done the other way round: When the screen is bigger than 768px then something happens. This simplification is only in order to make it easier for you.
I have a relatively easy issue that I need fixed mainly because I haven't come across it before and don't know how to go about fixing the issue.
Near the bottom of the page there are four images grouped together under the title "Photo Gallery". In Firefox and Google Chrome, the photo gallery is displayed correctly, with the correct formatting being the images side-by-side rather than the incorrect style of stacked images. Thanks!
Below is the code for the individual image fields (with the only difference being .odd rather than .even
.field.field-name-field-photo-gallery.field-type-image.field-label-above .field-items .field-item.even {
width: auto;
display: inline;
margin-top: 0px;
top: 0;
(Incorrect Image Gallery)
(Correct Image Gallery)
For something like this it would be worth considering using a grid system,
Susy is my preferred option, its inclusion in a project would result in code like
Assuming the design is 12 col,
#include span(3 of 9);
On your images (Selectors way too long too) would achieve with margin the design you are after.
Susy outputs floats by default, so if you did want to do it manually, do some simple math to work out % widths and apply floats. Works in all browsers and doesn't give the weird 3px extra that inline elements get.
So I had my "My Work" page laid out exactly the way I wanted it yesterday, and I needed to change servers. I changed servers, and all my other sites are fine, but the look of my "My Work" page got messed up. Basically the background image from the bottom widget area is now in the middle of the page. It looks like nothing on this page is inside of its container anymore. It definitely was before I changed servers.
Any help would be greatly appreciated, I've no idea why it's only affecting this one page on this one site. I tried re-uploading the css file, and the entire theme to the new server and nothing changed.
Edit: Sorry, here is the css for the widget area that's floating in the middle of the page:
.widget-area {
padding-top: 40px;
font-family: 'Alegreya Sans', sans-serif;
font-size: 20px;
color:#d2c1ad;
margin-top: 3%;
background-image:url(images/widgetarea.png);
background-repeat:no-repeat;
background-size: 101%;
}
EDIT:
Floated items do not take up any space. So even though you have a bunch of .gallery-item divs in there, they are not making the container have a height since they're floated. You need to clear the float. The easiest way is to add a div after the last .gallery-item. Give it the css of clear:both;
On line 555 of your stylesheet where you have .widget-area, add:
background-position: bottom center;
The problem is the margin-top on your aside objects in the widget. To prove this, change the margin-top to a smaller value for your .widget class. For me, this moved the black wiggly thingy to the bottom, just above the footer, and the three aside elements were to the right, all above or below each other.
I'm guessing there is a better way to make this work, and I personally would stay away with using percentages. But I'm in no way a css expert and there are plenty of those on here that might give you a better, more robust solution to your problem.
I recently read about the "holy grail" design and read implementations for it.
I saw a solution that does something strange on the menus from the sides.
{
margin-bottom: -3200px;
padding-bottom: 32000px;
}
I understand this mechanism causes the menu to be "infinite", I also found out this trick is called bleeding.
I don't understand how it works. Can someone please explain?
EDIT:
both answers were great. Wish I could pick 2. Picked the first one answered. I found another resource that emphasizes on negative margin values which explains bleed as well.
http://coding.smashingmagazine.com/2009/07/27/the-definitive-guide-to-using-negative-margins/
Thanks.
Padding-bottom at that value with stretch the background of the menu down far enough that it will always be seen to take up the whole length of the page. The margin adjustment gives the ability to still position content over this stretched out menu at a position according to the design of your site. Here is an example with the properties adjusted so that you can more easily see what is happening:
http://jsfiddle.net/PVKbp/23/
.two
{
margin-bottom: -3200px;
padding-bottom: 32000px;
margin-left: 100px;
margin-right: 100px;
background-color: #aaaaaa;
}
Bleed in printing is where you create a design purposely extended over the boundaries of the canvas, to ensure that all the page is covered. It basically means that you won't get any dodgy white edges where your design didn't "fit" the document properly:
http://www.duggal.com/connect/wp-content/uploads/2010/08/bleed2.jpg
I suppose the idea of bleed is the same in this instance, whereby you're trying to cover having any potential white spaces by adding padding to the menu
CSS
The only "holy grail" I've heard of in CSS is the 3-column one? If this is the case, I would say that having padding 32000px will be needlessly resource intensive
I've never really created 100% height responsive stuff, so here's a good resource for you: Twitter Bootstrap2 100% height responsive
I couldn't find a previous post for this, and I apologize if this is an uber-n00b question.
I am working on my first practice site (just XHTML and CSS/3 stages right now). I wanted to test the page to make sure that when I reduce the size of the browser window everything still looks the same. When I did that, my navigation column overlapped part of the page and the background image I have embedded in my h1 header doesn't fill all the x-axis all the way to the right.
What did I do wrong, and how can I fix this the right (web standards)?
P.S...Here's the code
h1 {
font-size: x-large;
color: white;
padding-top: 2em;
padding-bottom: .2em;
padding-left: .4em;
margin: 0;
background: navy url(backgrounds/header-bg.jpg) repeat-y right;
}
#navigation {
width: 180px;
height: 484px;
background: #7da5d8 url(backgrounds/nav-bg.jpg) no-repeat;
}
There are several strategies. it's really an art and it's a bit too involved to be answered fully here. It's something web designers have been dealing with for years, and you'll develop your own style and strategy, but there are good recommendations and best practices available on the web to find.
I'd start with this search:
http://www.bing.com/search?q=web+design+gracefully++resize&src=IE-SearchBox&FORM=IE8SRC
This is the first truly good result from that search: http://mirificampress.com/permalink/daynamically_resizing_text_with_css_and_javascript
but there are other good results as well.
Try giving a fixed width to the main container or the body itself.
body{
width:1000px;
}
If you post your current code, we may give you a better solution.
Ah well, this was going to be a comment, but I just kept going...
The nav column overlap is most likely because it is defined with a fixed width (px or em (which are fixed for this purpose)) and not a fluid unit like percentage. With all respect to David Stratton (and he's right, it is an art to in-depth to be answered here), try building your layout using percentages when appropriate to make the page scale well.
In response to the idea of fixing the width of an outer container, that is also a possibility, but one which doesn't degrade nicely if the user has a very small or large screen or a very high or low resolution.
Try googling with fluid page layout web design