I have got this style.css
.testing {
display: block;
width: 800px;
text-align: center;
padding: 30px;
margin: 0 auto;
}
applying to one element in html
<div class="testing"><div id="disqus_thread"></div></div>
It works fine on localhost server, where it centers the things inside and makes it 800px wide. When I upload it on the same webpage as my localhost, but to the internet hosting, that one style does not apply at all. Looking at active page styles, it's not loaded. Can you help me explain and fix this? I have no clue why.
EDIT: css import <link rel="stylesheet" href="css/style.css">
how it should look like and how it looks on localhost server
(proper padding on top and sides with proper width)
how it looks like on web hosting
(no padding, no width, nothing applies)
other styles within style.css applies properly to other elements on my pages
Use # for ID selector not (.) because in your live site there is not class .testing it's an ID.
#testing {
display: block;
width: 800px;
text-align: center;
padding: 30px;
margin: 0 auto;
}
Hard coding it into HTML with style="" works. It's not pretty, but there's no other way around
Related
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.
I've made a simple intro website to my site, simply with the buttons 'Media' and 'Share' and a background. On my PC, when I run the site it appears exactly how I would like it to, however when I run it from my site's server (or JSFiddle) the second button doesn't appear. The image is on the server in the correct location.
#first {
margin: 0 auto;
margin-top: 5%;
text-align: center;
}
#second {
margin: 0 auto;
margin-top: 10%;
text-align: center;
}
https://jsfiddle.net/4cg2k722/1/ - Second button doesn't appear. (also appears like this on the server)
https://gyazo.com/6031a7b8c768120b8d7f4adb3e439e20 - How it appears on my PC.
I am using the same browser when I try both.
EDIT: When you load the page from the website, for a split second you see the icon of an unloaded image. before disappearing.
You had a typo in your HTML code. You were missing the closing " in your second <img> tag. The code should be <img src="http://i.imgur.com/4ZCrEHW.png">.
seem that you miss the location of your pictures. http:/asscave.co.uk/wallpaper.jpg do not reach; same for the 2 other pictures http://asscave.co.uk/media.png and http://asscave.co.uk/share.png.
check the link by copy and paste it in browser seperately. If it appears in your browser it must appear also on your Web page.
try to improve your CSS like this
html,body {
width:100%;
height:100%; //no need to specify
background-image:url(https://i.gyazo.com/6031a7b8c768120b8d7f4adb3e439e20.png)
margin: 0 auto;
text-align: center;
}
#first {
//set the width and float it
margin-top: 5%;
}
#second {
margin-top: 10%; //why 10px as margin-top?
//set the width and float it
}
I'm new at this and I don't know why the text inside my h1 tag goes to the right when I zoom in.
Here's the CSS code:
h1 {
font-family: 'Raleway', sans-serif;
border-bottom: 1px solid black;
border-top: 1px solid black;
margin-right: 500px;
margin-left: 500px;
text-align: center;
}
Also, I didn't use <div> because I didn't know what it was for when I began to code. I tried to change it but everything is build around my current technique.
Thanks.
Seeing as you are just beginning to code - this looks great!
I did the same thing when I first started and I'm pretty sure most people do. But Like the comments say - {margin: 0 auto} works best.
Divs are very, very important.
Use chrome's development tools - This is a good way to add and remove CSS rules quickly.
View -> Developer -> Developer Tools.
Navigate to the header through the collapsable menus, click it and note the associated rules on the right. Uncheck Your margin left and right to test the CSS rules.
You need to remove your margin-left: and right 500px;
I would STILL suggest something like this
<div id="container">
<h1> Your Header </h1>
</div>
This way, you can target JUST the h1 in the div of container in your css
#container h1 {
text-align:center
}
#container{
margin: 0 auto;
}
If this worked, please mark answered
I have been building a site and can't figure out how to center the navigation links. The site is in HTML using a CSS sheet.
I have tried to center them using
margin: 0 auto;
Any suggestions would be great!
The site address is http://tinyurl.com/7x7nzz3
If you would like me to paste all the code into here then please request that however I didn't feel it necessary as the code is openly available from view source
try applying the following css rule to div#header
text-align: center;
First, in your CSS you have this:
#menu li {
float: left;
}
DELETE THIS!
Second, try with this:
#menu
{
text-align: center;
}
It will only center any text in #menu and you can also add this if it doesn't work:
#menu ul, #menu ul li
{
text-align: center;
}
If it doesn't work, I don't know why!
add
display: block;
width: 600px
margin: 0px auto needs an fixed width and a block element !
This works using firebug:
#menu ul {
line-height: normal;
list-style: none;
margin: 0 auto;
padding: 0;
width: 600px;
}
CSS is used when one has to print text in a specified format like color,positioning,font etc..
repeatedly after certain intervals.For example say you have 2 type of fonts font1,font2.
Now you want to print the text as follows,
font1
font2
hyperlink(navigation link)
font1
table
font2
Here we have used CSS for two type of fonts that we use repeatedly but not continously and writting the logic for same color,position,font type etc.. each time is a tiresome process hen ce CSS comes into picture lo make our job easy.In this case as, it is alreay writtrn in HTML and navigation links have nothing to do with CSS hence a simple <center> CLICK ME</center> in HTML code would do the required change. <center> tag here indicates that this should be printed in the center and if dont close the tag </center> properly after the use then all the remaining contents on the page would also be centered by dafault.
I'm 10 lines in to my second attempt at HTML and CSS and it is immediately doing completely barmy things.
I have the following code (this the entire page):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Some page title</title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.1.1/build/cssreset/reset-min.css" />
<link rel="stylesheet" type="text/css" href="47926.css" />
<link rel="stylesheet" type="text/css" href="960Clear.css" />
</head>
<body>
<div id="rootDiv">
<div class="container_16" id="topBarDiv">
<div id="topBarLogoDiv">
<a id="topBarLogoLink" href="~/Home/ComingSoon" title="Coming soon page"/>
</div>
</div>
</div>
</body>
</html>
And here's the CSS (960Clear.css, the others are 960 grids and YUI reset):
#rootDiv {
height: 70px;
background-color: #F7F7F7;
}
#topBarLogoDiv {
background-image: url('file:///C:/Users/Public/Documents/~Main/Vuplan/S26.Vuplan.Web.Application/Images/logo-vuplan-color-on-alpha-172x49.png');
background-color: #F7F7F7;
background-repeat: no-repeat;
margin-left: 20px;
height: 50px;
width: 172px;
display: block;
overflow: hidden;
}
#topBarLogoLink {
height: 50px;
width: 172px;
min-height: 50px;
min-width: 172px;
display: table-cell;
}
This simple, simple page doesn't work. Internet Explorer was my initial problem, rendering up to four logos in the top corner, but let's ignore Internet Explorer for now because even Firefox is doing the nuttiest thing.
I render another, whole anchor element outside of the wrapper div and this oddness is even visible as another line of code in the F12 diag tools window!
I took a screen shot to demonstrate:
http://0olmuq.bay.livefilestore.com/y1pxx75x_th_V0FX15uiLSOAK7MbKnHOQ17L9WMLg4K1TrIoZ0_xEaTgveh0_xF0S8o1Ae8WVvQLNWjQzyGl5AXsPpMV9MW0aDI/One%20Anchor%20Tag%20Renders%20Two%20Anchor%20Tags%20Crap.jpg?psid=1
For me, HTML+CSS work is a punishment served in Hell, but this takes the biscuit. What on Earth is going on here?
Note
My fault - I should've added this disclaimer before.
The code above seems to have tickled some people. Please remember that it's in an experimental state as I try to work out why I am getting multiple logos and general oddness.
I haven't got as far as correcting local links (which will be completely different in production and generated via ASP.NET MVC methods anyway).
Imagine that someone is having problems plumbing a house and you go to investigate. The house may not be finished yet; please ignore the missing carpet ;-)
You can't close an A tag with /> you need to close it with Link
The double rendering is Firefox/Firebug parsing invalid HTML.
First of all, if you're know you're going to write bad code at least let the browser know in advance. Use a more forgiving doctype than strict (technically this doesn't really do much, but every bit helps I think)
Next, unlike most other languages, grid frameworks and aids like that are actually better for intermediate and advanced users. Those new to CSS are more likely to be confused by them. (This is subjective, I know, but it is a sentiment expressed by many, and we are giving out advice here, aren't we?)
Now for the site logo. Its a matter of personal preference I suppose, but its usual to see logos being marked up as h1s. There are multiple ways of achieving what you want here, I'll just give the one I habitually use:
HTML:
<h1>
Site Name
</h1>
CSS:
h1 {
float: left;
overflow: hidden;
}
h1 a {
display: block;
background: url('path/to/logo.png') no-repeat;
width: 100px;
height: 100px;
text-indent: -9999px;
}
You're URLs are incorrect: ~/Home/ComingSoon and file:///C:/Users/Public/Documents/~Main/Vuplan/S26.Vuplan.Web.Application/Images/logo-vuplan-color-on-alpha-172x49.png might work locally, but you need to use relative paths if you are going to place this onto a server (assuming you are not going to use server-side scripts to generate those URLs)
#topBarLogoLink {
height: 50px;
width: 172px;
min-height: 50px;
min-width: 172px;
display: table-cell;
}
The min-height and min-width declarations are useless: They are only useful if you do not declare a fixed width and height. min-height and max-height properties, and their width counterparts, are used for fluid layouts, where the designer give the browser a certain degree of flexibility to accommodate for different screen sizes and other uncontrollable factors.
The display: table-cell declaration is also slightly suspicious: if you want the inline a element to expand out to the size of its parent div you can just use display: block
#topBarLogoDiv {
background-image: url('file:///C:/Users/Public/Documents/~Main/Vuplan/S26.Vuplan.Web.Application/Images/logo-vuplan-color-on-alpha-172x49.png');
background-color: #F7F7F7;
background-repeat: no-repeat;
margin-left: 20px;
height: 50px;
width: 172px;
display: block;
overflow: hidden;
}
Other than the url issue, the background color should also not be redeclared - HTML elements have transparent background color by default. Declaring display: block here is also unnecessary - divs are block level elements.
Oh, and I'm really really sorry if you feel offended by that comment. I really am. Consider this me making up for that, okay?
Try not making the <a> self-closing. It should be Text or .