For some reason the images in the columns on this page are not centering while the <p>s are. They are both encased in the same divs (#event).
.event {
position:relative;
right:auto;
left:auto;
width: 315px;
height:100%;
margin:5px 0px 0px 0px;
}
img.event {
position:relative;
align:center;
width:315px;
height:auto;
margin:auto;
padding:10px 0px 0px 0px;
}
p.event {
position:relative;
right:auto;
left:auto;
width:315px;
height:auto;
padding:0px 0px 0px 0px;
font-family: helvetica, sans-serif, Arial;
font-size: 16px;
letter-spacing: 1.2pt;
border-bottom: 2px dotted #333333;
}
add the following to img.event:
right:auto;
left:auto;
I think you need to correct your markup first. You have p tags nested inside anchor tags. I think this is giving you the illusion that your p tags are centered when in fact they are not.
I'm not trying to be harsh, but it would probably be easier to debug your issue when you have correct markup.
Related
I have a small text in the footer. The text is aligned to right but i want the text to move up slightly? how can I do that? my code
#foot tag {
width:1000px;
height:30px;
padding:10px;
border:5px solid white;
margin:0px;
text-align:right;
padding-top: 10px;
}
#foot tag {
width:1000px;
height:30px;
padding:10px 10px 20px 10px;
/* You can adjust the above 4 values to add padding to top, right, bottom and left */
border:5px solid white;
margin:0px;
text-align:right;
}
You can do a couple things, it's tough to say without seeing the live site.
1) decrease the top padding by changing:
padding: 5px 10px 10px 10px;
2) use a negative top margin:
margin: -5px 0 0 0;
You can try this. Top and left css property will move you p in parent div
<div style="position: relative"><p style="position: absolute; top: 1px"></p></div>
I'm using Wordpress and their twentythirteen theme. With this theme I would like to position and align the site title and tagline text to the upper right of the header. When I try to do so it's always positioned under my logo for some reason. I played with the position CSS property with no luck, it's still positioned under the logo.
Sample of the CSS file
.site-title {
font-size: 30px;
line-height: 0.5;
padding: 5px 0 10px;
text-align:right;
position: relative;
}
.site-description {
font: 300 italic 18px "Source Sans Pro", Helvetica, sans-serif;
text-align:right;
}
.site-header {
margin:10px auto 0 auto;
max-width:980px;
padding:0;
background-color:#ffffff;
background-size: 980px auto;
border-top:2px solid #efefef;
border-bottom:1px solid #cdcdcd;
box-shadow: 0 3px 3px #dedede;
-moz-box-shadow: 0 3px 3px #dedede;
-webkit-box-shadow: 0 3px 3px #dedede;
-o-box-shadow: 0 3px 3px #dedede;
}
.site-header .site-title:hover {
text-decoration: none;
}
.site-header .home-link {
min-height: 50px;
}
.header-logo {
max-width:60%;
display:block;
padding-top:3px;
position:relative;
}
Here's my testing website so you can see exactly what I'm talking about:
mywptestsite.is-great.org
What am I missing here?
Thanks in advance,
Kim
The problem is that you are encapsulating your site title in an h1 tag, so it is positioning it in a new line.
You could fix the issue by putting both your logo and your site title in the same <div> element, and add float: left; to your header-logo class, and float: right; to your site-title class.
You can try this - add these few lines to title and tagline css classes:
.site-title {
position:absolute;
top:20px;
right:20px;
}
.site-description {
position:absolute;
top:50px;
right:110px;
}
You can change top and right values to get desired positions of course...
You can use float on the image, title, and description to get those two elements onto the right. You will also need to use a clearfix technique on .home-link to get the element to wrap around all floated elements.
CSS
.header-logo { float: left; }
.site-title{ float: right; clear: none; }
.site-description { clear: right; }
although my questions has been answered lots of times before, but all the proposed solution I have tried and nothing seems to work.
what am trying to do is a big div that contains li tags; the li tags will also contain anchor tag, 2 divs and p tag.
to understand the big picture.. am trying to make a posting wall (activity-board), the wall will have posts looks like a bubble (div post) and the bubble will point (post-arrow) to a thumbnail image (a thumb3), to make the bubble style I made the post div absolute positioned with z-index less than the arrow-post.
and here is my css:
.activity-board {
background:#fff;
width:600px;
min-height:652px;
height:auto;
border:solid 2px #e7d28d;
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-webkit-box-shadow: inset 0px 0px 0px 3px rgba(255, 255, 255, 1);
box-shadow: inset 0px 0px 0px 3px rgba(255, 255, 255, 1);
float:left;
margin-left:20px;
}
.post-body{
position:relative;
display:block;
list-style-type:none;
width:600px;
height:auto;
background:#f9f9f9;
border-bottom:1px solid #CBCBCB;
border-radius:4px 4px 0 0;
-moz-border-radius:4px 4px 0 0;
-webkit-border-radius:4px 4px 0 0;
background: #fff;
float:left;
overflow:visible;
clear:both;
z-index:9;
}
.post{
position:absolute;
width:500px;
line-height:20px;
height:auto;
background:#FFF;
display:block;
margin-top:22.5px;
margin-left:77px;
text-align:left;
float:left;
z-index:1;
}
.post-arrow{
position:relative;
margin-top:32px;
margin-left:6px;
width:12px;
height:18px;
background:url(images/post-arrow.png);
float:left;
z-index:5;
}
.post p{ color:#025373; padding:8px; word-wrap:break-word; }
a.thumb-3 {
margin-top:18px;
display:block;
margin-left:18px;
width:46px;
height:46px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
z-index:10;
float:left;
}
a.thumb-3 img{
padding:0;
margin:0 auto;
width:46px;
height:46px;
float:left;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
}
here is my html:
<ul>
<li class="post-body">
<a class="thumb-3"><img src="images/Alsheikh Center (177).jpg" /></a>
<div class="post-arrow"></div>
<div class="post">
<p>
Hi there!
</p>
</div>
</li>
</ul>
http://jsfiddle.net/r9YpX/
Everything worked fine but the li tag does not expand to the content.. it only expands if I change the position of the post div to relative not absolute, which I cant change because it must be absolutely positioned under the arrow image to give it the bubble look.
any help would be appreciated.
Thanks.
ok Thanks guys i figuered it out.. I made position:relative and changed margin for post div and it worked! I thought I did this but perhaps I did something wrong that make it not work
This is driving me crazy. I am building a new horizontal scrolling website in Wordpress. The header and footer are simple fixed elements, but the page content scrolls horizontally. I am not trying to do this within a post, but as a page. Everything works fine up until I hit a certain width and then a new line is created of my images, messing up the flow of the entire page. It also then hides the footer. I have looked at this in multiple browsers and am stuck as what to do. Shouldn't I be able to horizontally scroll for as long as I want? It seems like I hit some sort of maximum width on my website.
Here it is looking good and then if I add two more images in the same manner using divs it skips a line and screws everything up and looks bad.
Please help. Here is the relavent CSS:
/************************* GLOBAL STYLES ***************************/
body {color:#eee; background: #000000}
.container-inner {position:relative; overflow:auto}
.container {background:#111; position:relative; overflow:auto}
h1,h2,h3,h4,h5,h6 {color:#eee;}
h1 a,h2 a,h3 a,h4 a,h5 a,h6 a {color:#eee;}
h3.sub,h2.sub {margin: 0 0 10px 0;padding: 0 0 5px 0;font-size: 1.9em;font-weight: bold;line-height: 1em;text-transform: uppercase;letter-spacing: 2px;color: #515151;border-bottom: 1px solid #000;}
a {color:#428ce7;text-decoration:none;}
a:hover, a:focus {color:#fff;}
p {color:#eee;}
h6.top {color:#ccc;}
.login {float:left;}
/* Posts */
.content {font-size: 1.2em; position:relative; overflow:auto}
.content h2 {font-size:1.5em; border: 3px solid white; text-align: center; padding: 2px;}
.post {display:block;font-size: 1.2em;}
.post h4, .post h6 {font-size: 1.2em;}
.post h2 {font-size:1.5em; border: 3px solid white; text-align: center; padding: 2px;}
.postmetadata {background:#000;padding:1em;color:#999; font-size:10px;-moz-border-radius: 5px;-khtml-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;}
.postmetadata a {}
.postmetadata a:hover {color:#fff;}
.underlined {border-bottom:1px solid #eee;}
h6.underlined {margin:0 0 1em;}
.welcomebox {padding:1.5em;margin-bottom:1.5em;color:#eee;text-shadow: 1px 1px 1px #000}
.nav-image-left, .nav-image-up, .nav-image-right {text-align:center;float:left;width:25px;margin:0 10px 0 2px;}
.nav-image-left a, .nav-image-up a, .nav-image-right a {background:#eee;padding:2px 48% 2px 48%;text-decoration:none;color:#000;}
.nav-image-left a:hover, .nav-image-up a:hover, .nav-image-right a:hover {background:#000;color:#fff;}
.nav {background:#eee;margin:0 0 1em 0;-moz-border-radius: 5px;-khtml-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;}
.nav:hover {background:#ccc;}
.prev a, .next a {color:#222;text-decoration:none;padding:.2em 1em;}
.nav-interior {margin:0;padding:0;clear:both;display:inline;}
.nav-interior .next {color:#000;text-decoration:none;float:right;}
.nav-interior .prev {color:#000;text-decoration:none;float:left;}
/* Paragraph */
#paragraph {margin:0px 30px 0px 30px; text-align:justify;}
/* Horizontal Scroll */
#wrapper {
float:left;
margin:40px 20px 30px;
margin-right:-999em;
position:relative;
overflow:auto;
}
.floatbox {
float:left;
margin:0 20px 0 0;
white-space:nowrap;
}
.floatbox img {float:left;}
.floatboxtext {
width:480px;
float:left;
margin:20px 60px 0 40px;
font-family:"Courier New", Courier, monospace;
text-align:justify;
font-size:.8em;
overflow:hidden;
}
/* Footer */
#footer {padding:1.5em 0; margin:0 auto; color:#999; text-align:center; border-top:2px solid #333; position:fixed; width:100%}
#footer p {color:#999}
#footer h3 {margin:0;padding:0 0 .4em 0; border-bottom:none; color:#999}
I have no idea how this works, but it does for me, at least:
#wrapper {
margin-right:-999em;
}
To:
#wrapper {
margin-right: -99999em;
}
Your example stared working around -1080em, so I assume the margin-right determines it's maximum width. I put it as -99999em because that seemed sufficiently large, you can increase it.
This CSS creates a nice effect when applied against a single blockquote within the content its attached to.
However, when there is more than one blockquote, everything works except the generated content.
In other words, the quote symbol is only applied to the first instance of the blockquote.
blockquote{
border:1px solid #ccc;
border-width:1px 0;
margin:20px 0;
padding: 2px 10px;
padding-left:50px;
font-style:italic;
font-size:1.2em;
font-weight:bold;
quotes:'\201C';
clear:both;
}
blockquote:before{
content:open-quote;
font-size:5em;
position:absolute;
color:#ccc;
margin:0 0 0 -45px;
font-family:georgia,serif;
font-style:normal;
font-weight:normal
}
Update: Thanks to Alex Morales, the issue is resolved by adding:
blockquote:after{content:close-quote;position:absolute;visibility:hidden;}
Change your first statement to:
blockquote {
border:1px solid #ccc;
border-width:1px 0;
margin:20px 0;
padding: 2px 10px;
padding-left:50px;
font-style:italic;
font-size:1.2em;
font-weight:bold;
quotes:'\201C''\201C';
}
See jsFiddle demo
You need to apply the close-quote for the :after pseudo-element. This should take care of your issue.
Here's some sample code:
blockquote:after{
content:close-quote;
font-weight:bold;
font-size:5em;
position:absolute;
color:#ccc;
margin:0 0 0 45px;
font-family:georgia,serif;
font-style:normal;
font-weight:normal
}