Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
So I have a logo on my site and the problem is when you hover under it or around it you can still click it. I want it only to be clickable once on it.
www.theanimedatabase.com
The logo is found in the top right!
If you right click on your logo and click "Inspect Element", you will be able to see the area of your image is actually 200px x 200px.
Try crop away your logo extra height at the bottom (and extra height on the top I am guessing you have extra height at the top as well because you set the header img margin-top as -68px to push your logo upwards) so that the total height of your logo is 70px. Which will match with your header.
Next, change this in your css:
header img {
margin-top: -68px;
float: left;
width: 200px;
height: 200px;
float: left auto;
}
to:
header img {
float: left;
width: 200px;
height: 70px;
float: left auto;
}
best solutions would be to crop image appropriately, but you can solve it with adding this css rule to your image:
overflow: hidden
notice this will hide part of the image, so if you have something under Anime Database it would be hidden.
Look at this image:
Just as stated by everybody, cropping your image is the best solution.
header {
overflow: hidden;
}
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I have this blogspot blog: sourcewing.blogspot.com
Now if you go to drawings tab, you'll notice the electric bulb image is not aligned center of the post. What I want to say is that it is taking its original width and height. If the width would be 1200px, it would go out of the tbody (Please check the HTML of this image).
What I want is that it should shrink automatically (maintaining the proportions), according to the width of div class="post-body entry-content"... element (you'd find by inspect element). This should apply on the all images that have more width than this div.
Also, I would like to know why isn't it automatically shrinking, while the text is automatically aligned?
Remove the fixed height and width attributes from the img element.
You can then add a class eg .auto-contain or whatever with the following css:
.auto-contain {
display: block;
height: auto;
max-width: 100%;
width: 100%;
}
This will force the image to always have the same width as the container, but the height will grow in proportion.
So you are missing a few things.
height: auto;
max-width: 100%;
box-sizing: border-box;
This will achieve exactly what you are after.
Just to explain:
height: auto; - This will make sure your picture remains in proportion.
max-width: 100%; - Your image will behave responsively but wont break it's own natural sizing.
box-sizing: border-box; - Because you have padding you don't want to break the width this will keep padding but not break out of your container.
First remove the width and height attribute from your img tag.
To solve the problem :
img {
height: 90%;
width: 90%;
}
if you set height and width 100% normally your image would be as big as the parent. But in your case this does not work. 90% however looks better.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I have a top div with some text floated to the left and a div floated right that contains an ad image, social media links, and a search box. My search box is not floating right even though it is in it's own div that I have set to float right. It also appears my ad is not floating right. Also, my social media icons are showing up backwards. Many thanks for the help.
#gsc-control-cse form.gsc-search-box { float:right; width: 200px; }
Fiddle: here
Image of what site looks like when I preview is here
Remove the float right on the inner elements and remove the width 70% on #top-right
#top-right {
float: right;
}
#top-right ul li {
display: inline;
list-style-type: none;
}
#gsc-control-cse form.gsc-search-box {
width: 200px;
}
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I am doing a website with wordpress and I have this problem. While editing some of the css of the page, I wanted to make the footer go a little bit closer to the image widgets. The problem is on Firefox, the site is perfect, but when we look at it from other browsers (eg: chrome or safari) it is on top of the images.
Can anyone figure this one out? I have spent hours trying to change this but it doesn't really work.
Here is the link of the website:
http://portugalweddingphotographer.com/
Thank you very much
I agree, refresh your cache. To make footer closer than what it is currently, remove/adjust padding and margin for:
footer#footer-container p.copyright {
margin: 30px 0; /*can make this 10px for example*/
}
footer#footer-container {
padding: 30px 0; /*can make this 10px for example*/
}
I like doing something like this:
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
}
Where .footer is the class on your outermost footer wrapper, and it's the last thing inside the body but below your content wrapper or whatever. And you'd change the 60px to whatever height that entire footer is.
It's hard to say for sure what's happening though because I couldn't reproduce the bug just looking at the website -- could you post the html/css of your site?
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
This is what I have so far:
http://clients.emagid.com/practice_work/darwin/index.html
What I want the final result is this webpage:
http://php1.emagid.net/~laurenbe/
I'm just doing a practice work on an already finished website. I want to make my responsive Menu button to be in the center (0 auto) when I resize my browser and not fixed to the top right corner as most bootstrap menu buttons do.
Additionally, how do I make it so that when I click the menu button, the menu lists would push down all the content below so that it doesn't stay underneath it? (Try my webpage and see what I mean, instead of pushing down the body content along with the lists, the body content overlaps the lists).
And last but not least, how do I make my images rescale smaller as I resize the browser? (Check my webpage and the finished one).
At the moment, the button is floating to the right because at line 4300 in bootstrap.min.css there is the rule
.navbar-toggle {
position: relative;
float: right; <==== problem
padding: 9px 10px;
....
}
One solution would be to add the following inside the max-width:767px media query
#media (max-width:767px){
.navbar-toggle {
float: none;
}
}
The problem of the expanded mobile menu not pushing the main page content is because at line 121 on style.css you have fixed the height of the header:
header {
height: 198px; <== problem
text-align: center;
margin: 0 auto;
max-width: 710px;
}
You could either remove this height rule, or maybe reset it for in the max-width:767px #mendia block.
To force your images to scale, you could size them based on %. So for example, if you made width:80%; then they would be 80% of their parent element. In practice, this isn't always easy though because you'll need to have multiple #media rules so that the image sizes stays appropriate and doesn't go weird on you when the bootstrap grid collapses at narrow viewport.
Hope this helps!
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
Have a look at mockup image
The site have a fixed content width. I need elements inside a red area to be stretched, depending on the screen width. So in case it's like on the image, green and blue stripes should go till the end of the screen. If screen is wider, site content area( that is inside the vertical red lines ) will be the same. But blue and green lines will stretch more, to reach the sites left and right side.
I was going to implement it using absolute positioning. But I need to know the width of the block. And as it can be different I do not know how to do it, except for using javascript. but I'd like to use html and css only.
There are many ways to accomplish this, but the coolest of all is using the before & after pseudo elements to fill in the edges.
.container {
width: 1200px; /* whatever... */
margin: 0 auto;
}
.header {
position: relative;
background: #000; /* whatever... */
}
.header:before, .header:after {
content: '';
position: absolute;
background: #000; /* whatever... */
top:0 ; bottom: 0; width: 999em;
}
.header:before {
right: 100%;
}
.header:after {
left: 100%;
}
Here's the fiddle: http://jsfiddle.net/bnket/
Check out this cool article by Chris Coyer: Full Browser Width Bars.
using css assume your center content is 800px in width..
You would add 800 plus the width of the stripes and asign fixed left & right
thats about it.
This is all i can provide due to the lack of a jsfiddle