I created a site on my blog where I'm putting yt videos. Unfortunately the container of this site goes left and I have no idea why. It doesn't happen to any other site of the blog.
I'm using Virtue theme - https://www.kadencethemes.com/product/virtue-free-theme/
Here's the link to the site I have problem with: http://mlodziez-wks.slask.pl/multimedia/wideo/
I would be more than thankful for help.
This is happening because you added that CSS in your stylesheet
.wideo {
width: 300px;
heignt: 169px;
display: inline-block;
}
Which class is getting called in your "body" tag. And you are forcing your body to stay in 300px width only. Therefore you need to remove it or replace it with
.wideo {
width: 100%;
heignt: 169px;
display: inline-block;
}
it is because you have the CSS class wideo iny our body element, that is adding the following CSS style to it:
width: 300px;
heignt: 169px;
display: inline-block;
You need to remove this class from the body, it is defined outside a CSS file, so it must be added over some theme customisation or similar stuff.
Set your css to
.wideo {
width:100%;
height: 169px;
display: inline-block;
}
This will solve your problem.
Related
Newbie here. I'm re-learning web on HTML5 - customizing a blogger site to cut-my-teeth. I've been able to change a lot from the defaults (w3schools is invaluable!) but I'm getting stuck when trying to change formats for specific objects.
Three things I can't figure out as examples (site www.paddlebeforethewave.com)
1) Featured Post (top) - image wrapping text is a default behavior for blog posts that isn't followed for featured post. I was able to change the image/size position as below - but can't figure out how to have text wrap the image.
.FeaturedPost .snippet-thumbnail img {
max-width: 100px;
float: left;
margin: 0px;
padding: 0px;
display: inline;
}
2) Featured post (top) - I want to change background color of only the featuredpost. I've tried to identify and modify it as follows - but no effect.
.Blog .blog-posts .post-outer-container, #page_body .FeaturedPost {
background: $(posts.background.color);
min-height: 40px;
padding: 30px 40px;
width: auto;
}
OR
.FeaturedPost .bgcolor {
background-color: #cfe2f3;
}
OR
many permutations of above
3) Page 2 content - I created a second page (http://www.paddlebeforethewave.com/p/contact.html) and the formatting is lost for vertical padding and location of page labels.
Is my approach flawed? Could you use one fix as example (I want to learn!)
thank you!
Screenshot for (1) and (2)
1) Add the following code to your theme:
.FeaturedPost .snippet-thumbnail,
.FeaturedPost .post-snippet {
display: inline;
}
2) Your approach is fine, if you haven't seen any changes, try to clear your browser cache. Correct classes for featured post are:
.Blog .post-outer-container, #page_body .FeaturedPost {
}
3) I'm not sure I can see the problem. Could you provide a screenshot, please?
EDIT:
Found it! Go to your theme code and add following property to this class:
.item-view .blog-name {
-webkit-flex-flow: column;
flex-flow: column;
}
I see you fixed your problem I did however see an issue on your site. For big screens a white bar appears if the screen is larger than 1800px.
You can fix this by finding this code in your CSS
.sidebar-container
and adding
display:none;
You could test this in your browser by zooming out until the bar appears. Cheers
Mousing over a link in the sidebar works; therefore the sidebar is on top.
Issue description
Commends ending under the sidebar cannot be deleted.
What I've tried
Workaround: using Stylebot to set a user-side CSS rule:
td.comment-text {
width: 500px;
}
Question
My attempts to target have failed. Would someone help me find the right target and rule?
!Additional info
This is not necessarily a stackexchange bug. I use font scaling because it prevents horizontal scrolling, which is very inconvenient for low-vision users.
UPDATE/Resolution
tr td textarea{
width: 475px;
}
Well, the default styles have a rule like this:
.comments {
width: 660px;
}
Maybe try overriding that?
.comments {
width: 500px;
}
Update
The comments textarea specifies a cols attribute that makes it too wide, as well. This should shrink it down.
.comment-form textarea{
width: 475px;
}
I'm going to die. This is happening to me the second time this week, however I have not idea how i fixed it the first time.
I'm completely helpless and angry. First off, w3c validator says no errors. My SASS Framework for CSS says no errors and I just don't have errors.
this is all I have, the entire page is styled successfully...
<body>
<div id="doc">
<header>
<div class="inner">
<div id="branding">
<a class="logo" href="#">Jihaa</a>
</div>
...and suddenly... i can't select the .logo inside of #branding ARRRRGGGG.
#branding .logo {
width: 200px;
height: 70px;
background: red;
}
this should do the job right, but no.
Neither does this header #branding .inner .logo {or any other possible combination.
Why? I'm completely helpless. No inspecting tool in all my browsers selects the appropriate css. It just doesn't relate to it!
.logo is an a which is an inline element and won't accept width and height.
Add display:inline-block; to the style and it should work.
#branding .logo {
width: 200px;
height: 70px;
background: red;
display:inline-block;
}
EDIT
To address #jackJoe's comment below.
In case you need to support IE6 or 7, you can add the following at the bottom of the rule:
zoom:1;
*display: inline;
_height: 12px; //or whatever you need
I don't think you can set a width or height for an anchor because it is an inline element.
Use the {display:inline-block;} that Jason Gennaro mentioned above.
in this case, if you would like to style the a with those properties, you need to specify its display to block
#branding .logo {
width: 200px;
height: 70px;
background: red;
display: block;
}
Make sure you don't use the same ids anywhere else in the page.
Also try taking the logo class out of a tag and put it in a div.
What makes you think you cannot select it? If its because your height and width are being ignored in your .logo class, that would be because you need to display:block .logo in order for your to respect them.
I want to show images on the page but I don't want to hardcode the references to the images in html.
Is it possible to do something like:
HTML:
<span id="got-easier"></span>
CSS:
#got-easier { image: url(/i/trend-down.gif); }
(IE6 should be supported)
Yes, use a background image :)
#got-easier { background-image: url(/i/trend-down.gif); }
Remember to set a span to display: block; and set width/height of your image if you use it.
As David Dorward pointed out, if it's an image relevant to the information, it should be included in the document with an <img> tag and alt attribute.
Heya, the common term for it is css Image Replacement technique (or IR). Here are the commonly used methods currently. Just choose any of the two ;)
/* Leahy Langridge Method */
span#imageName {
display: block;
height: 0 !important;
overflow: hidden;
padding-top: 0px; /* height of image */
width: 0px; /* width of image */
background: url(url/of/image.jpg) no-repeat
}
/* Phark Method */
span#imageName {
display: block;
width: 0px;
height: 0px;
background: url(url/of/image.jpg) no-repeat;
text-indent: -9999px
}
In case you want to display the images inline, position:absolute does the trick:
#got-easier {
display:inline;
position:absolute;
width:img-Xpx;
height:img-Ypx;
background:url(/i/trend-down.gif) no-repeat;
}
The only problem with this is that, since the image position is absolute, it will overlay whatever is next to it (in IE6 it might appear behind), and the workarounds that I found to fix this (with both CSS and jQuery) aren't supported in IE6. Your image-container will have to be followed by new line.
This might be useful when, for instance, you'd like to place a (?) image next to a form caption or a button (that usually have nothing next to them) to display help with onmouseover.
I know this is probably the dumbest question ever, however I am a total beginner when it comes to CSS; how do you hyperlink an image on a webpage using an image which is sourced from CSS? I am trying to set the title image on my website linkable to the frontpage. Thanks!
Edit: Just to make it clear, I'm sourcing my image from CSS, the CSS code for the header div is as follows:-
#header
{
width: 1000px;
margin: 0px auto;
padding: 0px 15px 0px 15px;
border: none;
background: url(images/title.png) no-repeat bottom;
width: 1000px;
height: 100px;
}
I want to know how to make this div hyperlinked on my webpage without having to make it an anchor rather than a div.
You control design and styles with CSS, not the behavior of your content.
You're going to have to use something like <a id="header" href="[your link]">Logo</a> and then have a CSS block such as:
a#header {
background-image: url(...);
display: block;
width: ..;
height: ...;
}
You cannot nest a div inside <a> and still have 'valid' code. <a> is an inline element that cannot legally contain a block element. The only non-Javascript way to make a link is with the <a> element.
You can nest your <a> tag inside <div> and then put your image inside :)
If you don't want that, you're going to have to use JavaScript to make your <div> clickable:
Document.getElementById("header").onclick = function() {
window.location='...';
}
To link a css-sourced background-image:
#header {
display:block;
margin: 0px auto;
padding: 0px 15px 0px 15px;
border: none;
background: url(images/title.png) no-repeat bottom;
width: 1000px;
height: 100px;
}
<a id="header" href="blah.html" class="linkedImage">
The key thing here is to turn the anchor tag into a block element, so height and width work. Otherwise it's an inline element and will ignore height.
That's really not a CSS thing. You still need your A tag to make that work. (But use CSS to make sure the image border is either removed, or designed to your required spec.)
<img src="foo" class="whatever" alt="foo alt" />
EDIT: Taking original intent (updated question) into account, a new code sample is below:
<img id="header" alt="foo alt" />
You're still in an HTML world for links, as described by other answers on this question.
sorry to spoil your fun ladies and gentlemen, it is possible.
Write in your header: [link](http://"link here")
then in your css:
#header a[href="https://link here"] {
display: inline-block;
width: 75px;
height: 75px;
font-size: 0;
}
.side .md a[href="link here"] {
background: url(%%picture here%%) no-repeat;
}
then in your css
.titleLink {
background-image: url(imageUrl);
}
You still create links in HTML with 'a' (anchor) tags just like normal. CSS does not have anything that can specify if something is a link to somewhere or not.
Edit
The comments of mine and others still apply. To clarify, you can use JavaScript to make a div act as a link:
<div id="header" onclick="window.location='http://google.com';">My Header</div>
That isn't really great for usability however as people without JavaScript enabled will be unable to click that and have it act as a link.
Also, you may want to add a cursor: pointer; line to your CSS to give the header div the correct mouse cursor for a link.
CSS is for presentation only, not content. A link is content and should be put into the HTML of the site using a standard <a href=""> tag. You can then style this link (or add an image to the link) using CSS.
You have to use an anchor element, wrapped in a container. On your homepage, your title would normally be an h1, but then on content pages it would probably change to a div. You should also always have text in the anchor element for people without CSS support and/or screen readers. The easiest way to hide that is through CSS. Here are both examples:
<h1 id="title"><a title="Home" href="index.html>My Title</a></h1>
<div id="title"><a title="Home" href="index.html>My Title</a></div>
and the CSS:
#title {
position:relative; /*Makes this a containing element*/
}
#title a {
background: transparent url(../images/logo.png) no-repeat scroll 0 0;
display:block;
text-indent:-9999px; /*Hides the anchor text*/
height:50px; /*Set height and width to the exact size of your image*/
width:200px;
}
Depending on the rest of your stylesheet you may need to adjus it for the h1 to make it look the same as the div, check out CSS Resets for possible solutions to this.
Try this - use an H1 as the seat of your graphic instead. Saved my butt time and time again:
<h1 class="technique-six">
CSS-Tricks
</h1>
h1.technique-six {
width: 350px;
padding: 75px 0 0 0;
height: 0;
background: url("images/header-image.jpg") no-repeat;
overflow: hidden;
}
Accessible, and also solid across browsers IE6 and > . You could also link the H1.
HTML is the only way to create links - it defines the structure and content of a web site.
CSS stands for Cascading Style Sheets - it only affects how things look.
Although normally an <a/>; tag is the only way to create a link, you can make a <div/> clickable with JavaScript. I'd use jQuery:
$("div#header").click(function() {window.location=XXXXXX;});