I'm working on a Wordpress website and I use the custom CSS to change small things from the template. So I only know how to work with html and CSS.
But now I have a problem...
After uploading my logo, the header seems to stretch slightly out of proportion. There seems to be too much padding above the logo, more then below it, which makes it look uneven and the header just looks slightly too large on the whole. There is just too much white space in it… Whereas it was slimmer and a lot more streamline before uploading the logo.
The page I need help with: https://delizabeth.nl
Is there any way someone can help me fix this.
Your header has a max-height of 200px.
With the image added the way it is, the actual content exceeds that height and is cut off at the bottom.
The logo has padding around it and margin at the bottom. Since it only has margin at the bottom, the text doesn´t get verticaly centered to where the center of the image is but to the middle including the margin.
If you remove the padding and the margin around the logo, then the extra whitespace will disappear and only the padding from the header itself will remain.
It then all fits inside the max-height so nothing is cut off.
I don´t know how that theme works, but if it always has the same ID then the css would be:
#media_image-11 {
margin: 0;
padding: 0;
}
you need to set class[widget] (padding: initial;) and you can set image height and width.
Related
It seems I'm having an issue with a design I'm working on. I'm using the kickstart HTML framework but I have a couple issues.
Firstly is that there is a very large white gap between the top of my page (logo, navbar) and the text.
Secondly I've tried to overlay the logo over the the navbar by using z-index. However it causes a negative horizontal scroll. I've tried to hide it by hiding overflow-x but it just doesn't seem like the best solution.
You can see the issues at http://jkr.me.uk/problem.html
Thanks,
John
Using position: relative on the logo makes it take up space that you're refferring to.
Instead, use float: right, or position it with position: absolute;
The issue with the white gap is the image. If you disable the position:relative property the image bottom will be touching the top margin of the fist header tag. A dirty fix for this would be something like margin-top: -200px on the first header or alternatively margin-bottom: -200px on the logo image. You could also use the method from the previous answerer.
As for the logo image overlaying the navbar, it does for me in both Chrome and IE 9.
This is the website I'm working on:
http://uber.imu.uiowa.edu/isa/
The footer was floating to the top of the page since there wasn't enough content, so I used this trick to push the footer to the bottom:
http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
Problem is, there is too much space and it added a scrollbar. How do I fix it so the footer is on the bottom of the page, but doesn't add that scrollbar?
The current method is great, i use it all the time. You just forgot to set the negative bottom margin of the wrapper to the same height as footer and footer-push. Update your .wrapper css to this margin: 0 auto -300px; Did the trick for me in the chrome inspector.
Well, keeping your current method, I'd just decrease the height of .push:
.push{
height:50px;
}
But that's not the best way to do this.
http://jsfiddle.net/VFqTv/
In this example, you give the body tag a background color (or image) that is the same as the footer, then the content fills up as much space as it needs. The footer lies right below it, and the remaining part below it that flils the rest of the screen acts as a filler of sorts.
The Contents in you webpage are too much to fit on the single screen. So if you want to remove the scroll bar, either you have to reduce the font and the contents size or you have to remove some contents.
But if you want to reduce some vertical space in webpage remove height:200px; from .push {} and add margin-top:100px;
The image of footer is too big, i think you have to resize your image in photoshop then use it in the footer, or put the image over your footer.
I'm making a webpage where I have a div ("container") that is a parent to the div "rounded". For some odd reason, the webpage doesn't let me scroll down even though both of the divs' height are larger than the screen.
Here's a jFiddle with the components that aren't working out: http://jsfiddle.net/pmg92/19/
Any ideas as to why this isn't working?
You need to take the position:fixed off the .container so that it allows the page to be scrollable
EDIT
Check this out here http://jsfiddle.net/pmg92/23/ I think this is what you are looking for. I took out the non relevant css so don't just copy and paste to yours. I eliminated your background rounded image in place of using border-radius because by using a background image you can't really shrink or expand depending on content. This won't work on older browsers unless you use webkits and so on.
If you want to use an image I would suggest slicing the image between a top, bottom, and middle. The top would contain the top section with the radii. The middle would be 1px tall that repeats vertical as needed. The bottom would contain the bottom section with the radii.
The problem is that you have the position of the container fixed.
Im a novice, apologies up front if this is unclear! I know what I want, but Im not sure how to get there or if its even possible with HTML/CSS. Ive been trying for a week with no luck.
The main content area is 955px wide. In the header, I have a logo in the upper right corner of this 955px width, but would like the logo to continue to the right, for computers that have a higher res. So the main header area is set to margin: 0 auto, and I can put a 1px wide sliver to repeat to the right which is ok, but I would prefer the image to continue, not just some boring gradient.
Is this possible?
I created this image to show what I mean but cant post it because i need 11 rep and have 10. ;)
In it, the logo has been split into Image 1 & 2, but of course, if its possible to overflow the centered 955px wide header, then it could be one image.
I can get it to work fine with two images, as long as the window width isnt altered - then you can see Image 2 moving and doesn't line up with Image 1.
Thank you for any help!
Thanks to both Tullo and COBOLdinosaur - I couldn't get your suggestions to work right (probably more to do with my lack of skills) but you guys helped me figure out the solution to my problem. Here's what I did:
Created the image in one piece, rather than two images. Floated right within a 955px wide main-header container div. And then I used negative margins to push the image further to the right. This seems to work great.
Thanks for the help!
Put the image in a div with a width of 100% and with a background color that matches up nicely with the image. Then for the CSS on the image remove the margin and include
clear:both; float:right;
I am working on my portfolio and I am having an issue with the project description shifting the images on the left downward when the browser resize. A picture of the issue here: click here When you resize the browser the text will shift over and move the images down. I've tried setting min-width but that doesn't help the text nor the image div to make sure it doesn't resize at a certain point.
Here is a sample link to the page itself: [click here][2]
I tried adding min-widths to a image element but that doesn't work either. I do not want to use absolute position as it will overlap on top on resize. Any thoughts or suggestions?
You have an image that is 1052px wide, which is in a UL element that has a margin-left of 1.5em. Your description box is 350px. Basically your #imagewrapper div needs to be equal to or wider than all of these elements.
Right now that's about 1422px. It will change if the effective font size for your UL.imagewrap-pad changes.
That's a pretty wide web site. You probably should make it a bit narrower if you're making it for general viewing, especially with all the tablets etc out there now.
Anyway, the code you want is
#imagewrapper
{
width:1422px;
margin:0 auto;
}
The second line makes it center on the screen.
P.S - get Firebug for Firefox, or use similar tools in chrome. They let you endlessly experiment with styles to find out what works for you.
To solve the problem just set the "width" property in #imagewrapper :
#imagewrapper {
width: 1430px;
}
Have You tried setting up width attr on the parent element to around 1800px?
div#imagewrapper {
width:1800px;
}
It will put a scroll bar at the bottom of Your browser, but if You want to put such a big image beside that text then You do need a lot of space. Just keep in mind that it won't fit in users monitors.
To make it look nice I guess You should apply that attribute to the body tag.