I have a little experience with dabbling in css but I cannot figure this out. I bet there is only one number somewhere thats wrong but I cant find it.
I was wondering if someone could please help
Website: www.maxanthonyphotography.com/portfolio
P.s The website isn't finished yet anyway but my ocd is driving me mad
thank you in advance
Looking at the style.css file you have around line 2120
div {
height: 650px;
(etc)
}
This will mean that all div tags on the page will have a height of 650px (unless you override it with a class or something).
for now try changing that line to height: 100%;
for future reference (depending on the browser) right click on the page and go to inspect element, this will show you what is going on with different elements on the page.
Related
Right, so, I've been informed by a usually high-quality, reliable source that best practice when creating linked images that also include text is as follows:
Create some placeholder text inside the anchor element like this:
<a class="logoWithText" href="logoWithText.raw">Mr Happy Forever Foobar</a>
Change the element CSS to indent this text outside the viewing window:
.logoWithText {
background-image: logoWithText;
width = 200px;
height = 100px;
display: inline-block;
text-indent: -9999px;
}
The idea is that without doing this, if CSS is turned off on a user's machine, or they are trying to look at it with a screen reader, they're going to have problems viewing the image. But this way they will only see the text if CSS is switched off, and it will be positioned correctly.
But what if the image fails to load for some reason but they do have CSS switched on? The user is not going to see the placeholder text at all... and I'm also pretty uneasy about the whole put the text all of the way off the screen, as far as it can go as it seems pretty inelegant and I am worried there are likely to be all sort of unforeseen problems with writing code that's totally against the logic of the language in this way.
Can anyone suggest a solution which would account for both broken image links and a lack of CSS support on a user's device, and which would be more immediately intuitive to people viewing the code? If there's really no other way of doing this or you guys think my approach is totally wrong or whatever that's ok, I just want to know if I'm going about things the right way.
Why not
Html
<a href="http://yoururl.com" class="logo--text">
<img src="zoidberg.jpg" alt="This is the text that shows up when your image is broken">
</a>
CSS
.logo--text{ width:200px; height:100px; }
I make tumblr themes (though I'm not a professional nor a student in any way, I learnt what I know by messing around) and I've been struggling with a 'malfunction' regarding post images.
Basically when you hover on a post, the images 'lose' a few px to the right just to 'get them back' after a few seconds, and this is affecting both full images and the eventual image padding - this only happening in webkit browsers.
Here's an example:
http://songbirdtheme8.tumblr.com/
and the code:
http://pastebin.com/XZgihVeX
If you scroll down the page you can see that the picture of cotton candy is not affected by this. I'd like to know:
Why is the whole thing happening?
How to fix it?
I found the solution but I can't exactly tell what the problem is.
Here's the solution: #post img { padding-right: 0 }
(not related) You shouldn't use the same id for multiple elements, you should turn #post, into .post (you'll have to figure out why by yourself)
The problem I'm having is located at http://fourbetpoker.com/play/index.html
If you click on either "Poker" or "Dice", you'll see that my iframe has space around it (easier to see on the dicing tab). Can anyone tell me why, and potential fixes? I've been messing with the code for well over an hour and I have no idea what's wrong with it. I'm a newbie when it comes to Bootstrap/CSS. Thanks!
When I click Dice tab, I saw lot of empty space around for the content. It is coming because of the following class available in global.css file. Margin applied around the form.
#loginContent #loginHeadlineContainer
{
margin:100px 100px 0 100px;
}
If you don't want apply any margin then reduce it in the class. By Simple make it zero.
#loginContent #loginHeadlineContainer
{
margin:0;
}
I am using Google Blogger. I just changed template of my blog and choose a new one. But there is a problem with this one. My logo is not fully showing.
My website: www.pkgeek.com
The K of the logo is missing. I tried to find the code for the logo, but didn't find. I think the author haven't typed specific code for the logo.
I think the blogger it self is doing some customization.
How can i fix this ?
Your div is way too small for you Logo :).
Just go in your css file and paste this code.
'#header { width: 30%; }'
I put 30% in case you need to add some things on the right of your logo, if not, just put 100% it goes well.
Good luck ;)
#header needs to be set to width: 267px instead of 220px in your css
First, the website - http://www.channeltraveldeal.co.uk/blog
Now - That's out the way so lets go... Hi, I'm currently tinkering with a friends WP powered business page. Sadly, I'm not all that experienced with web design, I just know more than my friend and so I'm in need of some assistance if anyone is able to help.
I'm trying to make sure it's viewed correctly across as many platforms as possible, the theme that has been used has responsiveness settings built in which has obviously helped with this, but unfortunately the header image isn't playing ball and is too big (on tablet only).
I read that the best way to sort this out would be to add this to the CSS for the header image -
width: 100%;
height: auto;
... This is the confusing part (for me), I used Firebug to locate the HTML and CSS for the image and this is what I found -
HTML - <img width="1010" height="220" alt="Channel Travel Deal" src="http://channeltraveldeal.co.uk/blog/wp-content/uploads/2014/02/ctdlogotrue.jpg" class="preload-me">
CSS (from the right pane when the linked HTML is clicked on) - http://pastebin.com/6hyN7yTr
I assumed that the "preload.me" img class is the one I needed to amend. I googled for a bit and came up with a few different snippets to try but none of them worked. Here are the ones I tried.
.preload.me {
width: 100%;
height: auto;
}
preload.me {
width: 100%;
height: auto;
}
I tried those two variations with [style] added after the class name (with no space) and/or !important after the CSS values.
Nothing worked. Would someone let me know if I'm doing something wrong, or if there is something stopping me from overriding this inline style. Also, if my method is on completely the wrong track, if I can do it some other way.
If class="preload-me"
then you need to use the css as preload-me not preload.me
and it should be:
.preload-me{}