I work on small site, and have problem with FlexSlider position. I use the same template for 2 sites but with different language. Now when i copy the CSS from second site, it not apply the changes and gallery looks different on second site. To explain with image. Original Site :
New Site: (Login is user / password )
And this is link to affected page. (previous must be logged in)
I tryed to insert this CSS :
/* Gallery Center */
.col-lg-7 {width:100%;}
.flex-active-slide {
text-align: center;
}
But this just set in center of block , and not in center of page, as first site. Any help how to get at center like first linked site? Thanks
Try
/* Gallery Center */
.col-lg-7 {min-width:100%;}
.flex-active-slide {
text-align: center;
}
The browser may scale based on this or you can create a separate DIV the width of the page and then use margin: auto; for the contents and just place the slider inside it.
.centerslider {
min-width: 100%;
margin-left: auto;
margin-right: auto;
}
.slidercontents {
text-align: center;
}
<div class=centerslider>
<div class=slidercontents>
<h1>Place the slider here</h1>
</div>
</div>
Related
I'm working on a small project, and have one little problem that I don't know how to resolve myself. I have an image gallery with many images, but I want the active image to be centered, without changing the resolution or width/height ratio. Link for the issue here. Login is user / password. I tried to manipulate with this CSS:
.img {
margin-left: 200px;
}
However, it seems to ruin the bottom slider. What should I do to center the main image without changing the image ratio? This example image shows what I want to do.
Try this
.imgs {
margin-left: auto;
margin-right auto;
}
or you could do this
<div class="imgs" align="center">
<img src="https://source.unsplash.com/random/200x200" />
</div>
Try adding:
.flex-active-slide {
text-align: center;
}
I want to set permanently video icon on image, but i can't. When i do that, two image are showing: 1. video icon 2. my image, but not adjust 1 and 2 at once one image.
More Clearly: I wants to share a photo with video icon. I have image without video logo. I wants to add video logo on image using code. I don't wants to set logo using photoshop.
HTML:
<div class="video">
<img style="height:200px" src="http://i.imgur.com/GMjqTR7.jpg"/>
</div>
CSS:
.video {
position: relative;
}
.video a {
position: absolute;
display: block;
background: url(/images/play-btn.png);
height: 100%;
width: 100%;
top: 75px;
left: 150px;
background-size: 50px 50px;
background-repeat: no-repeat;
}
Please Help Me. Thanks.
JSFiddle - Live
This can be done on the client or server side. Based on the fact that your example only contains front-end code, I'll assume you want to this on the front-end.
Take a look at watermak js
http://brianium.github.io/watermarkjs/
For a server-side example, see this answer
Add 'Watermark' to images with php
Im building my first website and this is first time asking for help. I am unsure of how to position the sidebar widget area of my site in the position I want. Im working on making my the site fully responsive. What I am trying to accomplish is get the sidebar to "hug" the content area so they are always next to each other with a small 20-35px margin in-between them, and as screens get larger I want them to stick together. I came across this website http://uberhavoc.com, I am trying to model my sidebar and content in a similar way. Here is my site: http://peakworthy.com.
my site has the main site content area with two divs, the main content and the sidebar. I tried get the to position how i want using percentage margins, played with clears, clearfixs and everything else. I was wondering if I am approaching this wrong or if the DOM is causing issues with style hierarchy. If you have any ideas I would be greatful. been pulling hair out on this for a couple days now.
You need to place your main content area and your sidebar content inside a container element. Then use media queries to determine a breakpoint for when the sidebar should re-flow.
Below is the basic markup of my suggested approach. The main content and sidebar content are the two siblings of a container element. They are floated left and have a percentage width applied to each. A media query is used to determine when the two columns of content should be side-by-side or stacked.
<main class="cf">
<div class="content">Main Content</div>
<aside class="sidebar">Sidebar</div>
</main>
main {
background-color: #ddd;
min-height: 400px;
}
.content,
.sidebar {
float: left;
width: 100%;
}
.content {
background-color: #ccc;
}
.sidebar {
background-color: #bbb;
}
#media ( min-width: 480px ) {
.content {
width: 70%;
}
.sidebar {
width: 30%;
background-color: #bbb;
}
}
The clearfix and background colors used above are only in place for my demo and can be omitted.
jsFiddle: http://jsfiddle.net/vj9zq0oq/
Re-size the jsFiddle to see the content columns re-order.
I'd try to stay away from float if possible. Try this out instead. The display-block places them side by side and will help with the responsive feature because the sidebar will automatically jump down when space runs out, and text-align:center makes them stay in the middle of the page at larger sizes.
.site-content {
padding-bottom: 4em;
background: #f0f0f0;
text-align: center;
}
.content-area {
display: inline-block;
}
.site-content .widget-area {
width: 380px;
padding: .3em 0 .3em 4em;
background: #ffffff;
display: inline-block;
margin-left: 20px;
vertical-align:top;
}
I want my page's logo and articles to be in the center of the site. At the moment everything is on the left.
I just can't make it work.
For Example I tried to delete the wrapper and set margin-left:auto; margin-right:auto; in the logo's class. nothing works.
And for the posts i just don't know where to start. probably i would have to put everything in a container and make that central? (There should be three posts in a row, at the moment the theme stacks them up to the right screen border if you have a big screen)
Thank you so much.
EDIT: The Text align in the image class did the job. Thank you guys, question answered!
#logobild {
margin-left: auto;
margin-right: auto;
text-align: center;
}
That will do it for you :) Your header takes up 100% of the space, so the content inside has no fixed dimensions to center against. The text-align value assists with that.
Try:
#logobild {
margin-left: auto;
margin-right: auto;
text-align: center;
}
To center the logo you can do the following in CSS:
img {
display: block;
margin-left: auto;
margin-right: auto;
}
The img element is inline by default, which means your margin styles won't be applied to it. When it is set to block level the margin settings will work.
To center the articles I suggest you give a width to the container div like this:
#post-area {
width: 85%;
margin-left: auto;
margin-right: auto;
}
I'm not sure if that's the best way, but it seems to work.
Hello I have a header that I am trying to get working and I just got the menu working correctly, but now I can't get the size working properly.
The header is located at www.g-evo.com/header.php and what I want to do is shrink the grey a little bit so its more flush with the logo. I still want to keep those coloured boxes in the white however.
The CSS looks as such:
<style type="text/css">
#header-container {
/* centering for IE */
text-align: center;
}
#menu {
width: 950px;
/* centering for other browsers */
margin: auto;
}
#logo {
width: 950px;
/* undo text-align on container */
text-align: left;
/* centering for other browsers */
margin: auto;
border-style:hidden;
border-width: thick;
}
body {
width: 950px;
/* undo text-align on container */
text-align: center;
/* centering for other browsers */
margin: auto;
}
#headercolor {
background-color:#EEEEEE;
}
</style>
Thank you
I believe this is actually a matter of your HTML markup, rather than your CSS. You have two #logo divs (as a side note, you should only use each ID once per page), the second of which is causing the extra gray space you are referring to.
You should put /header_media/GTextured.png and /header_media/shapeimage.png in the same div, and align them next to one another, which should solve your problem.
For starters, you're using the "logo" id on two different items on the same page... that's not correct, since the ID attribute should be unique per element.
On the other hand, I don't really understand what you want, but if it's just to get the menu a bit closer to the logo, I'd add a class or change the id for the second div with the logo ID and set it a height of 20px, or so..