I was wondering if anyone could help me regarding centering the table on this webpage:
http://stoltz.caltech.edu/members.html
Specifically, the table containing the photos of each person is off center from the header of the webpage. I've been trying to center it to no avail.
Any help would greatly be appreciated!
I went to your website and did some changes in css now you can try these changes
body {
background-color: #F9F9F9;
color: #231F20;
font: normal 12px/2.4em Verdana, Tahoma, Helvetica, sans-serif;
text-align: center;
margin: 0 -120px;
padding: 0;
}
Related
I uploaded a responsive site I did for a friend that does not render full width on the Index Page whether viewed on a smartphone or tablet.
The lady is doing me a favor as I try to get my name and work known. She has a business she'd like to see grow and we thought the Internet the place to start.
The odd thing is that site's other pages render just fine with proper width and height.
This leads me to believe the problem is with the "#media screen" queries.
I believed the CSS "width" and other properites and values in the full width, non-mobile page's code, would "cascade" down into the smaller mobile queries but added the properties "head," "html, body" and "footer" sections to see if that would improve the situation.
It did not.
The site can be viewed here: www.notaryonwheelsshaver.com
The CSS can be read here: http://www.notaryonwheelsshaver.com/css/nows.css
Any help would be greatly appreciated.
Your first media query (780px) has a typo in html,body -> height: 100%x; That may be interfering with the min-width attribute under it.
I don't know if that will fix it, but it's what I noticed.
I think the issue is in your CSS file:
html, body {
font-family: Tahoma, Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 26px;
background-color: #FFF;
color: #555;
padding: 0;
margin: 0;
height: 100%;
/*width: 100%;*/
}
/*width: 100%;*/ is commented out which makes the browser skip the code try changing it to:
html, body {
font-family: Tahoma, Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 26px;
background-color: #FFF;
color: #555;
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
EDIT: You have the width also commented in:
.wrapper {
/*min-width: 100%;*/
min-height: 100%;
}
I want to change the font/font-color/font-size of an html page. I have converted the css file to a string using String(contentsOfFile). Can I use regEx or something similar to edit the css data. Here is a sample of the css file
.calibre {
color: #000;
display: block;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 1em;
margin-bottom: 0;
margin-left: 5pt;
margin-right: 5pt;
margin-top: 0;
padding-left: 0;
padding-right: 0;
text-align: justify
}
I have also tried converting this string(of Css file) to a Dictionary using ESCssParser. However, when I convert that dictionary(after changing the font size) to a string, the formatting is different. An example of a difference is that #idSelector would become "#idSelector". I am in the assumption that these changes will affect the css file. Am I wrong?
Is there any other approach I can take to edit the Css file?
Thanks!
It would be better if you changed a class in your html rather than try to change lots of entries in your css.
For example if you laid out your html like this:
<body>
<div id="wrapper" class="med">
<p class="calibre">Lorem Ipsum</p>
<!--rest of html-->
</div>
</body>
You could change the class in the #wrapperelement in your backend code and then use css to determine the style for the page, like this:
.calibre {
color: #000;
display: block;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 1em;
margin-bottom: 0;
margin-left: 5pt;
margin-right: 5pt;
margin-top: 0;
padding-left: 0;
padding-right: 0;
text-align: justify
}
#wrapper.small .calibre{
font-size: 0.8em;
}
#wrapper.large .calibre{
font-size: 1.4em;
}
In the above example there is no specific class for med, so the default will be used (1em). If you were to make the wrapper have the class small or large instead of med, calibre would still have all the same properties except the font-size would change to 0.8em in the case of small and 1.4em in the case of large.
Here's an example with jquery taking the place of your backend code.
I use smint 3.0 for my webpage and I want to put some background picture but it doesn't work with pictures only with colors. I've tried with different pictures.
body {
font-family: Helvetica, Arial, Verdana, sans-serif;
color: #e5e5e5;
font-size: 12px;
background-image: url("pictures/background.jpg");
}
This seems to be working, but you haven't supplied much detail of your problem.
I added your code to a fiddle and included the smint 3.0 and jquery, and a background image shows up okay.
body {
font-family: Helvetica, Arial, Verdana, sans-serif;
color: #e5e5e5;
font-size: 12px;
background-image: url("http://www.crystalxp.net/galerie/img/img-wallpapers-windows-vista-editions-bg-pack-vaca-13740.jpg");
}
https://jsfiddle.net/joshvito/0tk25trf/
I have built a landing page for an external client all is working fine, I have a background image which fits the hole screen, I modified the existing body tag within the bootstrap.css class as follows
body {
margin: 0;
background-image: url('/Content/Images/Danone-Background-New.png');
background-size: 1440px 800px;
background-repeat: no-repeat;
background-size: cover;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.428571429;
color: #333333;
background-color: #ffffff;
z-index: 9999;
}
Again this works perfectly when running locally, I then publish this site to the hosting environment, and when I navigate to the site all the content is displayed minus the background image, so I first assumed I have the wrong path so I checked the body style using firebug and this is what I see
body {
background-color: #fff;
color: #333;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
line-height: 1.42857;
}
So for first glance I assumed "Oh that's strange it hasn't copied over my body styles!" so I repeat the process again and low and behold the body style remains as above, So i login to the server navigate through the files to the bootstrap.css find the body tag and again it looks as I expected
body {
margin: 0;
background-image: url('/Content/Images/Danone-Background-New.png');
background-size: 1440px 800px;
background-repeat: no-repeat;
background-size: cover;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.428571429;
color: #333333;
background-color: #ffffff;
z-index: 9999;
}
Yet the image does not render.
What is wrong with this? I have tried ctrl f5, looked in the development tool bar checked for any 404 erros nothing displayed ? I'm baffled?!
Link to check www.danoneultimate.com.au
In the <head> section of your website, you load a different stylesheet.
<link href="/Content/css?v=WY2Ybti5pBJYm0QfqiFBL2b5U_cKoeAWQC9DALv4mnw1" rel="stylesheet">
Change it so that it loads bootstrap.css:
<link href="/Content/bootstrap.css" rel="stylesheet">
You have edited bootstrap.css but you're loading bootstrap.min.css.
Your code works just fine :)
I am trying to use a body background image which is center aligned, but it does not work in IE 6. The CSS for the body is
body{line-height: 160%;font-family: "Trebuchet MS", sans-serif; font-size: 80%;
/* background: #000a28 url('img/main_bg.png') no-repeat center top;*/
background-image:url('img/main_bg.png');
background-repeat:no-repeat;
background-attachment:scroll;
background-position:center top;
background-color: #000a28;
width: 100%;
margin: 0 auto;
color: #ffffff;
text-align: center!important}
For IE 6 I wrote the following CSS
body {
text-align:center;
}
#main-wrapper {
margin:0 auto;
width:960px;
text-align:left;
}
Please help me.
The reason why it's not working is because of the SuperSleight transparent png script you are using. Because the script runs only after everything's loaded, the background first centers, then jumps back to the left when the script runs. As far as I'm aware, AlphaImageLoader does not allow for background position to be changed.
Try using this script instead: http://www.dillerdesign.com/experiment/DD_belatedPNG/. It uses a different solution which should allow for background-position to be used.
Try my code instead of your body's properties
body{
background:url('img/main_bg.png') #000a28 no-repeat center top;
color: #ffffff;
font-family: "Trebuchet MS", sans-serif;
font-size: 80%;
line-height: 160%;
text-align: center;
}