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>
Related
I would like to limit the contents of the main navbar with a container, I saw it done in a video and I also read in a tutorial that can be done, but is it so? In both cases they did not use dropdowns. The content is correctly aligned to the right and left, but with desktop resolutions larger than the container the dropdown that I have all the way to the right, appears aligned to the page, not to the container.
The dropdown uses a class dropdown-menu-right, which setsleft: auto and right: 0, it makes sense that it is aligned to the page, obviously if I remove it it is completely aligned to the left of the page, there is a way with bootstrap classes, without strange hacks, to keep it aligned to the container?
I'm using svelte with sveltestrap, the generated html seems to me like a normal navbar, but I might have missed something, I've been banging my head for a while.
svelte repl
Add class position-relative to container. Menu will align according to container.
<div class="container position-relative"></div>
This page has a content area where all the posts are held and a side bar. The content and side bar menu are sized properly and fit where they're supposed to in Chrome with the actual posts area taking up the left and the sidebar sitting on the right.
In IE, the images are full-width and I'm not sure of a better way to fix this.
The same issue was occurring where the images were full-width and adding the width:100% attribute to the .htheme_post_image img element seemed to fix the issue. If you view in IE, the two areas are side-by-side. However, if you click on a post.
The side menu is underneath the post and the images/text are full width.
If it helps, I'm in IE 11.0.9600
It seems to be fixed if you remove display: table; from both the .htheme_container class and the .htheme_content class.
This seems to fix your IE issue and has no effect on Chrome, so maybe it's simply not needed. But I did not create this theme, so I have no idea of any side-effects this may cause.
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
Basically I've created a site, with image floated to the right.
Like this:
Everything works nice and clean, only issue comes when it comes to resizing/zooming.
I have modelled my site according to the standards and I don't have any overlapping elements or anything of similar sort.
Basically I've just set my main content to margin: auto; max-width: 85%; to generate the page content displaying in middle inside a class, while everything else is displaying on 100% width.
Everything works as expected, even at tablet sizes eg.
Everything is nicely centered in the middle while the rest of the site stretches out to the edges.
Now, however, when I start exceeding the width limits of the site/picture, issues occur.
Basically,
since my content width is set to 85% the picture begins to squish itself into the left side of my website, in order to mainstain the centering of the right site
Illustration below:
So I'm asking, is there any good method to prevent this from happening?
I presume the solution will be using #media port and resizing the image, or?
So I'm aware that this is a confusing question. Basically, I've got two divs at the top of the page that include navigation and a search bar.
I have a full container
#containPage
width:1000px;
margin:0 auto;
}
for the page that is fixed width. This doesn't end until the end, I think, and there are two smaller containers for a layout, both float right and left.
When I resize the page in a browser, the layout at the top moves and changes the positioning, which I don't want to happen.
Any ideas?
here is the link: it's being even screwier right now and has the navigation links way to the right, so maybe someone could help with that too.
http://www.sophisticatedmoose.com/nerdery/
Resizing horizontally in Chrome and Firefox for Mac. If you scroll to the right, I'm supposed to have a nav bar underneath the search page with home, about, news, and contact. Last I checked- and I'm clearing the cache - it was waaay off on the left along with the footer.
Working on an image. I need reputation 10 to put one in. I've got it though.
You have this odd construct in your CSS:
#containPage { /*page I am in you*/
width:223%;
margin:0 auto;
}
The margin setting is fine and sensible but the width is rather, um, strange. The #containPage element is, essentially, the entire page so it is naturally as wide as the browser window, then the 223% is applied and the page itself becomes more than twice as wide as the browser window. Then, all the block elements that are immediate children of #containPage will be over twice as wide as the window unless you specify or imply a width in some other way.
In particular, the #NavRRT element will be too wide and the menu inside #NavRRT will float to the right all the way out of the window and you'll have to scroll horizontally to see it. Similar positioning strangeness happens with #footer.
Start by getting rid of the width:223% on #containPage. The page looks fine in Safari and Chrome if I turn off just that single piece of CSS.
UPDATE: You might want to add another <div> inside #containPage, then add max-width, min-width, and margin: 0 auto to that to keep the main content centered and reasonably sized. Everything that is currently inside #containPage would go inside this new <div>. If you go with this approach then you probably won't need any CSS at all on #containPage, it would just need to be around to help center the "real" page.
You have to remove the margin-left from your nav LIs (it's inherited from li) and remove their widths.
#nav li { margin-left: 0; width: auto !important; }