I am embedding a free Bravenet Guestbook (http://pub20.bravenet.com)onto a page of a site I am currently building.
You can see it here: http://portabledogpotty.com/customer-reviews.html.
As you can see if you go the site, the guestbook is aligned to the left. I want it to be centered. I have tried various ways of trying to move it over with using the site css, to no avail. I am not sure what I'm doing wrong, or if I actually need to be editing the Bravenet specific css file, which if that is the case, how do I access it? Any help is appreciated.
You can horizontally align something like that by defining a width and setting margin left and right to auto.
Since #bn-guestbook-1-1-1641477518 already has width: 700px; all you have to do is add this
#bn-guestbook-1-1-1641477518 {
margin: auto;
}
Related
I am currently experimenting in WordPress an am using the theme Encounter Lite. I have an image within the header that was Center aligned and now for some reason it isn't. I have tried different code in the style.css sheet like float: center; but that hasn't made any difference.
I am using the current WordPress application (4.7.5).
Does anyone have a solution or suggestion to this?
center is not a valid attribute of the float property.
I'm not familiar with the Encounter Lite theme, but text-align: center applied to the header element may work.
Specifying the width of the image and setting the left- and right- margins to auto is another option. In this case, make sure the image is a block-level element: display:block
Sorry if this has been asked before. I'm very inexperienced with CSS. I tried looking through previous threads to see if I could solve this problem myself, but I've had no luck so far.
The website is http://greenemusiceducation.com/
The container right underneath the site's header is forcing all content (in this case a slider) to align to the right. In the 'site-inner' and 'wrap' classes (the classes that are listed right underneath the header in the sites source-code), I've tried editing the parameters but the changes don't seem to have any effect whatsoever. This container alignment issue is consistent across different pages for the site.
On mobile devices, the site loads fine and operates as expected. On Chrome, everything is right-aligned. On IE 11, the slider doesn't show up at all.
I would be grateful for any help!
.content has float: right;. If you want to center it, remove the float, and use margin-left: auto; margin-right: auto; to center it horizontally. Since the element has a defined width, that will center it horizontally. Here's a good resource on how to center things - https://www.w3.org/Style/Examples/007/center.en.html
You can nest the style that is sliding to the right within a paragraph html heading with an inline style that sets the text for that to center. Even though there are other things beside text, it will still center the content of the container nested within it.
<p style="text-align:center;"><div="container></div></p>
I'm editing an existing Wordpress theme (created child theme) and I'm having formatting issues. Both on mobile and desktop versions of the website.
My first issue is that the first post loads under the header-logo container sometimes depending on browser size, I notice this happens a lot in mobile devices. The "PROMO" post goes missing.
I've increased both the margin-top & padding-top properties but it doesn't seem to resolve the issue. Do I perhaps have to update the positioning of the container div? If so, what would be the appropriate way? Been reading a few articles and trying a lot of css edits but I feel like I'm just going in circles.
Affected site: http://posteshare.com
Mobile view: http://www.responsinator.com/?url=http%3A%2F%2Fposteshare.com%2F
The other problem I'm encountering is that media embedded on posts are floating on top of my "fixed" header instead of the other way around. I've modified the "position" property to absolute but it seems to break the formatting of the whole page? Been at this for a couple of hours and it's driving me nuts. Any new insight is appreciated. I've ran out of ideas to try.
]3
To make the header appear on top of the other comment, there is a z-index property, as said in the comments by #Milan. Basically, what you have to do is...
#header-container {
z-index: 999;
}
/*all the other elements on page except body*/ {
z-index: /*less than 999*/;
}
With this, the header should appear on top of every element on the page.
If your navigation is 110px height, maybe try adding height + about 20px margin offset to the container like so:
.container {
margin-top: 130px;
}
Add clear: both to .container on grid.css line 3
I have read all the SO questions I can find already and have been at this for 4 days now (sadly). Please do not think that I am trying to shortcut some work by posting it here. I would be happy to read about a solution and apply it myself but chances are I've already tried it...
Please view this page in IE8
As you can see, the left side menu drops below the page content. This is the only page on the site that does this. I thought it was something in the CSS that I added specific to that page, but in removing the custom CSS entirely, not only did the page look like crap, but it didn't fix the left side menu.
If anyone could advise me on how to get the left menu actually on the left side, I would be very appreciative.
UPDATE (incredibly embarrassing)
I had a div in the right side of page that didn't have a closing tag. It caused the left menu to be a child of the right content which explained the display behavior.
I sincerely apologize for wasting the time of those who have read this question and especially those who took their time to view the page and offer advice.
it seems that float: right isn't set on your right div
also right div has left margins, which prevents left div to be where it is supposed to be
#content {
float: right !important;
margin-left: 0 !important;
}
I don't have IE8 but have you tried adding
display: inline;
or
display: inline-block;
to #primary and #secondary?
Let me know if this doesn't work, I'll have access to a computer with IE8 later today.
First, a warning, I have come back from a years break of html/css and have pretty much forgotten everything, so I'm at newbie level again.
I have been trying to add background images - one at top left and one at bottom right. What I have at the moment can be seen here: http://test.nihongohub.com/Mainsite/firstsite.php as you can see if you change the width of the browser the div containing the img will hit my main part and ruin it.
I have tried a few fixes suggested on stack overflow but none of them worked. Does anybody have any suggestions how to fix this. A friend suggested that I add the img to the footer and squeeze it out, but I don't like this idea.
2 things I want this image to do, move with the browser window, and be able to go behind my main page.
Thanks for any help offered
You could try using fixed positioning and the use z-index to move it to the back, ie.
#bottom_leaf_holder {
position: fixed;
bottom: 50px;
right: 0;
z-index: -1;
}
edit: I ment fixed, changed the answer.
You could put all your content in a div, and add a css rule to that div. Something like
#main_holder {
background: transparent url('img.jpg') no-repeat bottom right;
}
The best solution for this would be to have a wrapper div just inside the body tag that contains only the background image. This will act similar to the body tag allowing you to place an image that does not interfere with the layout and will go underneath your content if the viewport is small.