I'm writing a mobile website and I've looked for hours at a centering problem I'm having.
The website is http://peatarian.com and you can emulate the iphone browser using transmog.
The CSS can be found at this page, but the most important parts are the following :
html, body {height:100%;float:center;text-align:center;}
body {background-url:url(raypeat.gif) no-repeat left top;margin:0; padding:0; text- align:center;color:black;}
body,td,input,textarea {font-size:100%; font-family:Verdana, Arial, Helvetica, sans-serif;}
a:link,a:active,a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
p {margin-top:0;}
table {background: none repeat scroll 0 0 white;}
and
.qa-nav-main {float:center;clear:both;border-top:1px solid black;border-bottom:1px solid black;background-color:#B7E3DA;margin:auto;margin-top:10px;padding:10px 0px;display:block;margin-left:auto;margin-right:auto;}
.qa-nav-main-list {font-size:125%; list-style:none;margin:auto;display:block;margin-left:auto;margin-right:auto;}
.qa-nav-main-item,.qa-nav-main-item-opp {margin:auto;display:block;float:left;margin-left:auto;margin-right:auto;}
.qa-nav-main-item {display:block;margin-left:auto;margin-right:auto;}
.qa-nav-main-item-opp {margin:auto;display:block;margin-left:auto;margin-right:auto;}
.qa-nav-main-link {color:#fff; display:block; padding:6px 10px; background-color:none;}
.qa-nav-main-selected {background-color:none; text-decoration:none;}
.qa-nav-main-hot .qa-nav-main-link {background:none;}
.qa-nav-main-hot .qa-nav-main-link:hover, .qa-nav-main-hot .qa-nav-main-selected {background:#396E63;}
The images are the (main) menu. If you'd turn the iphone on its side, you'd see that they aren't centered.... I've tried editing so many things in .qa-nav-main and also .qa-nav-mean-item but if I set float:center in the latter the menu items are all on a new line (though they are centered).
If you want to keep your code structure like you have it now, then just add a class to the <span> which contains your <center> which contains your buttons. The class would have the following rules:
display: block;
width: 200px; /* this should be the width you need, please assign your own */
margin: 0 auto;
To your .qa-nav-main class add the following rule:
text-align:center;
This should give you the desired effekt of your spans floating in the middle. But I would suggest that you rework your markup a bit and get rid of all the spans and center tags.
The above gives you the result depiced on the following image:
Related
There ARE other questions regarding this issue. However, each one seems to have an individual answer, because the answers found do not work.
Just scroll right on my site and see the white space all through the site: http://highcatering.wpengine.com/
NOT nice!
Any ideas? I have tried the following:
body{width:100%;}
body{margins:0 0 0 0;}
Thanks!
The offending line is in style.css:
.post ol, .post ul { margin:0 0 30px 20px; padding:0;}
It is adding a margin to all ol and ul within your main body section. If you remove it, the white space will disappear. I'm not sure if it is needed somewhere else on your site.
it should be like:
body
{
width:100%;
margin:0;
}
That large white bar down there, is a place to insert some widgets, if you do not want to use this section, add this on your CSS file:
.footerWrap.footerStyleLight {
display: none;
}
If you want to have something on this section later but with a different background color, just change the background color like this for example:
.footerWrap.footerStyleLight {
background: #2c2c2c;
}
Although you probably have this class in your CSS file, search for it delete what's inside and add this display: none; or for changing background color background: #2c2c2c;
I am attempting to display an image behind the day of the week of each paragraph, but only part of the background image is displaying. I've tried padding previously but could use some assistance as I am a novice with aspects of css.
The html is:
<section id="top">
...
<p><span>Mon</span><span>Open</span></p>
<p><span>Tues</span><span>6:30 pm</span>Bible Study</p>...
The css is:
#top p span:nth-child(1){
font-family: 'Quintessential', cursive;
font-size:25px;
font-weight:normal;
color:#fff;
line-height: 59px;
background-image:url('img/ribbon.png');
background-repeat:no-repeat;
}
The SPAN is being displayed DISPLAY: INLINE; by default.
Try setting to DISPLAY: INLINE-BLOCK;
Here is some more info on why they work this way:
http://www.webdesignfromscratch.com/html-css/css-block-and-inline/
So... I created this weird solution to a weird problem: I needed shadows with straight sides, like a gradient with clean sides instead of a box-shadow.
I used an :after element to attach a gradient to the bottom of the elements that needed it (in the sample, this is commented out). I then tried an inset shadow with negative size and this works the same way. These work perfectly except for one minor detail: I can't use it like a shadow because the elements it covers sometimes aren't clickable.
Sample: http://codepen.io/syren/pen/jlcym
Some things I've ruled out already:
1) Using inset-shadows on the elements underneath: It needs to be applied to the original element or else it won't function like it's shadow when things move. If I could figure out
2) Using a box-shadow with negative spread or size: This works, and I would use this except it doesn't look like how the designer wants it to.
3) Z-index: It's messy because it's a very dynamic page, so I can use it in some places but not in others because seeing as its a shadow, it should be over everything visually at least.
So, to recap, I want it to look exactly the way it does with the clean edges, and I need it to be attached to the element not the surrounding elements and I'd really like it to be a pure CSS solution, like with pseudo-elements.
Any ideas?
http://codepen.io/anon/pen/cuJqG
html:
<nav>
<h1>I'm an Example Header</h1>
</nav>
<section>
<h3>You can't click me because the shadow above is covering me!</h3>
css:
nav{
border-bottom:3px solid #000;
position:relative;
}
h1{
font-family: "Helvetica";
text-transform:uppercase;
margin: 20px 10px 10px;
}
h3{
font-family: Helvetica, sans-serif;
font-weight: 600;
padding:10px;
margin:0;
cursor: pointer;
width: 98.75%;
color: white;
background: #ff0000;
box-shadow: inset 0 20px 40px -20px #000;
}
Kindly see this page:
http://www.technodoze.com
See the Button in the Categories on the right side of the page.
See the word Tips and Tricks.
Problem 1:
It is expanded in whole the column .
The problem is: I want my cell to be expanded just according to the text string but it is looking awkward.
Problem 2:
See the link Web Designing half of which is lying on one line half on other, i want it to be on same line. (One <a> link, one line.)
My Code:
<style type="text/css">
.cat_link a, .cat_link a:hover, .cat_link a:focus{
padding: 0.25em;
color:#3B5998;
font-family: Verdana;
text-decoration: none;
border:1px solid #DADADA;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
background: #EDEFF4;
margin-left: 0;
margin-right: 0;
line-height:2;
margin-top: 1em;
margin-bottom: 1em;
}
.cat_link {
line-height:2;
}
</style>
HTML CODE:
<p class="cat_link">
Cell Phones
Android
Tips and Tricks
Amazing
Web Designing
Windows Tips
Physics
CSS
CSS 3
Communication
Facebook Tips
Dajjal
Bermuda Triangle
</p>
Please give me solution if you can.
add this to css classes
.cat_link{
text-align: left ; /* gets rid of wierd white space */
}
.cat_link a{
white-space: nowrap; /*stops buttons from taking up two lines */
}
You have text-align: justify set on the page body; reset it with text-align: left for those category tags and it will fix that strange spacing.
To ensure that the text doesn't wrap as you describe in Problem #2, set white-space: nowrap on each of the category tags (selector .cat_link a).
Problem 1: with a text-align:left is solved-
Problem 2: you can put a display:block; in the a element to force the new line, but if the text is larger than the container with it will break into a new line.
I am having some trouble with a font size with CSS. Below you see I have .post I have < pre > tags that are nested inside of the post class so should the css I have for the pre tags work below? It is not working but I can't figure out why? The text inside my pre tags end up being 15px instead of 12px
.post {
width: 100%;
clear: both;
padding: 10px 0;
border-bottom: #CBCBCB 1px solid;
background: url(images/post_element.gif) no-repeat 126px 21px;
font-family: arial;
font-size: 15px;
}
.post pre{
font-size: 12px;
}
http://monc.se/kitchen/38/cascading-order-and-inheritance-in-css
.post pre{
font-size: 12px !important;
}
Should work, but to answer your questing we need to view all html + css because it really depends...
In a vacuum, that code should work. However, base tag styling can vary browser-to-browser and <pre> tends to be a bit of an odd one. My first thought is that some other style is overriding it.
Have you used Firebug (or some other developer console) to take a look at the styles being applied and the computed style for the element? That should put you on the right track.
This was a weird issue, I had to end up changing the class and font size for all the other text, everything except the pre tags to get it to finally quit resizing after page load from my JS syntax highlighter