I m making a site with Bootstrap in French and i have a section called Services Francophones it is like a portfolio with different pictures of services. Now i did reduce the size of the 8 first pictures so they are smaller and have a padding between each other. But the padding is to big in my css
.metier-item img {
margin-bottom: 10px;
/*margin-right: 10px;*/
}
I added a margin-bottom of 10 px that work perfectly. Now i was trying to reduce the margin between the pictures..so i added margin-right of 10px but the space between the pictures stay the same but the title form each image get push away. how do i get to have the same margin between each picture i want them closer from each other. link to website in the navbar click on services francophones.
if I understand you right. You want see images which looks like the same width.
// Stretch the picture
.metier-item img {
min-width: 100%;
min-height: 100%;
}
// play with indentation by padding
.metier-item .metier-link {
display: block;
position: relative;
padding: 5px;
}
.metier-item .metier-link:hover {} //delete
.metier-item:hover {
transform: scale(1.04);
padding: 0;
margin: 0;
z-index: 4;
}
Related
I'm having issues with some padding/margin issues on a site. It's a WP site that I am building for a client - not my original code. I am using a child theme to customize styles.
My staging site is here http://7a9.007.myftpupload.com/
If you scroll to the bottom there is a white margin between the teal section and the gray/blue footer. Additionally there is excessive top padding on the footer that does not exist on the other pages (for example: http://7a9.007.myftpupload.com/services/)
I want both the white margin and the extra top padding on the footer area removed but checking in chrome developer mode shows nothing to target. What am I missing?
Remove the following: margin-bottom: -89px; and top: -149px; it's commented out below, but should give you an idea where to look.
style.css
.home #main-content.trans-header, .page #main-content.trans-header {
/* margin-bottom: -89px; */
}
layout.css
.home #main-content.trans-header, .page #main-content.trans-header, #archive #main-content.trans-header {
position: relative;
/* top: -149px; */
}
#header-wrap {
position: absolute;
background: #29333d;
width: 100%;
}
To reduce the white-space for the both pages, pull the footer up using negative top margin like this:
#footer-widgets {
margin-top: -100px;
}
And then fix the little bit of white-space between the blue tweets div and the footer on this(http://7a9.007.myftpupload.com/) page, left using the above code:
.vc_custom_1492563370829 {
margin-bottom: -50px !important; /*add this*/
border-bottom-width: 0px !important;
background-color: #1c89ab !important;
}
please see link below
as you can see there's a text on header (header is an image)
the text is:
mail#yahoo.com (this text is a part of image)
I convert that part of header image to link with below code
<div id="hw"><div id="header"><img src="test.jpg" /></div></div>
and this is #link
#ResponsiveLink {
width: 267px;
height:29px;
display:block;
position:absolute;
top:100px;
margin-left:413px;
}
how can we make that link be responsive in other devices? for example when browser is narrow position of the a tag with #ResponsiveLink id changes but i want it be fixed over my text.
The best way I know, is not to put a big part of your screen as an image. On the other hand you probably don't want to cut the image into several separate images. So, I suggest using CSS Sprit.
After separating the image, you can put the parts beside each other using float, clear, and percentage widths, or use a framework like bootstrap.
If you still want to use the image as a whole header, in a single HTML tag which don't recommend at all, using percentage top for your #ResponsiveLink would work. You should just add width: 100% to all its parents: header, hw, and wrapper.
Following the comments:
#ResponsiveLink {
background: none repeat scroll 0 0 #FF0000;
display: block;
height: 0;
left: 58%;
margin-left: 0;
margin-top: 7%;
padding-bottom: 3%;
position: absolute;
top: 0;
width: 25%;
}
This will fix the problem because of the difference between percentages of position and margin, top percentage is calculated using first absolute parent's height but margin and padding percentages are calculated using parent's width. There's still a problem caused by the max width which you can fix adding a wrapper inside your #head with a width of 100% and no max width.
The other try of using floats and separated images have too many problems to write here, sorry.
What you're currently building isn't a sustainable solution and you should definitely see other replies on how to improve your site layout.
However, if you need a temporary solution, the following CSS changes will work on your current page:
#header {
margin: 0 auto;
max-width: 980px;
position: relative;
}
#ResponsiveLink {
background: none repeat scroll 0 0 #FF0000;
display: block;
height: 30%;
left: 60%;
position: absolute;
right: 12%;
top: 37%;
}
I have an issue on this page when I open it on iPad. Crimson colored top identification header goes to left and then on the right side you can see a blank space. All other major browsers including Safari shows the page as it should be except iPad. Here's the screen shot from iPad view. Any ideas whats wrong with it?
First off, it looks like you have the university logo in the upper left set as both a background image and a regular image within the <a>. Removing the regular image fixes the problem seen in both your iPad screenshot and in my desktop browser where the logo is cut off on the left and "ity" repeats in "University".
I don't have an ipad in front of me, but it's possible that might fix the problem with the right space as well. You might want to consider adding a margin-right to the form in the header so the "Go" button isn't right up against the edge of the window at 1024px resolution.
The content in your #signature div is bigger than your #signature div, so the background isn't stretching to fit the content (you can get the same reaction by shrinking the size of your window and scrolling to the left or right).
Fixes:
Remove left: -5px; from #signature a.iu
Add background: #7D110C to #signature
Change right: 0 on #signature form to right: 5px.
That should straighten things up.
EDIT
Here's what your updated styles should look like.
#identity #signature {
height: 44px;
margin: 0 auto;
position: relative;
text-align: left;
width: 990px;
background: #7D110C;
}
#identity #signature a.iu {
background: url(pw_files/img/iu_crimson.gif) no-repeat 20px 0;
display: block;
height: 44px;
position: relative;
top: 0;
width: 250px;
}
#identity form {
height: 44px;
position: absolute;
right: 5px;
top: 0;
}
I pulled these styles out of screen.css
I have a main container DIV for the content of my page, that is horizontally centered:
HTML:
<div id="master_container">
.. my content here ...
</div>
CSS:
#master_container {width: 960px; margin: 0 auto;}
Client wants to have adverts at both sides of the page, outside of the master_container. I tried various CSS to try and position those divs but when window is resized, they overlap with the master_container. Also, I am asked to have them float when the page is scrolled.
Can anyone please direct me to the correct solution? Thanks in advance...
>> DEMO <<
[Note that I used a 700px width for #master_container]
1. Positioning
Most important CSS is the styling and positioning of the adverts, which I have given the class .advertis:
.advertis {
position: fixed; /*creates floating effect */
top: 20px; /* divs will always stay 20px from top */
width: 220px;
padding: 10px;
background: white;
border: #ccc 1px solid;
border-radius: 4px;
}
#left {
margin-left: -613px; left: 50%; /* positioning of left ads */
}
#right {
margin-right: -613px; right: 50%; /* positioning of right ads */
}
I can hear you wonder: how do I calculate the margin that I need? Simple:
Get width of #master_container (including padding) = 720px. Divide it by 2 = 360px. Add the width of the ad (including padding and border) = 242px. 240px + 360px = 600px. Add the space that you want to have between the container and the ad = 11px (in my case).
242px (full width of ad) + 360px (half of container) + 11px (space between ad and container) = 613px (margin needed)
2. Hiding when window too small
Now you want to hide the ads when they don't fit in the window any more. You have options for that:
Media Queries
jQuery (or JavaScript or another of its libraries)
In the first jsFiddle I have used media queries (not supported by all browsers). In this Fiddle, I have used jQuery to get the same effect.
function widthCheck() {
var ads = $(".advertis");
if ($(window).width() < 1225) {
ads.hide();
}
else {
ads.show();
}
}
widthCheck(); // Execute onLoad
$(window).resize(function(){
widthCheck(); // Execute whenever a user resizes the window
});
It's up to you to choose which one you want to use. I'll list a few pros and cons, so you can choose for yourself.
Pros media queries:
modern, progressive
works, even when JS is disabled
Cons:
not supported by all browsers
Pros jQuery:
supported by (as good as) all browsers
Cons:
does not work when JS is disabled
not as progressive as media queries
How about that:
Demo: http://jsfiddle.net/insertusernamehere/Ct5BM/
HTML
<div id="master_container">
<div class="ad left">Advertising</div>
<div class="ad right">Advertising</div>
The real content …
</div>
CSS
<style>
body {
width: 100%;
}
#master_container {
position: relative;
width: 960px;
height: 500px;
margin: 0 auto;
border: 1px solid red;
}
div.ad {
position: absolute;
top: 0px;
width: 200px;
height: 400px;
margin: 0px 0px 0px 0px;
border: 1px solid blue;
}
div.ad.left {
left: -220px;
}
div.ad.right {
right: -220px;
}
</style>
Edit: How it works
When you position the main element relative it's not taken out of its flow within its content but it opens a new space for positioning, z-indexes etc. So a child element within this container which has an absolute position is related to the position of its parent. So in this example the "ad" element has a width if 200px and with left -220px it's moved outside the container on the left side with a little "margin" added.
I have just finish that site, but there is a silly bug that remain...
if you check tu horizontal position of the WHOLE page there is a slight shift... nothing to cry about but WHY
here is the 2 pages
http://jlecologia.com/index.php
http://jlecologia.com/entreprise.php
any idea, the horizontal css is:
#wrapper {
position:relative; /* center, not in IE5 */
width:856px;
top: 38px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
display: block;
padding: 0px;
}
i dont like my page to do the cha-cha-cha !
The viewport of the browser is expanded when there is no need for the vertical scrollbar. Since your design is horizontally centered, the centering will shift when the viewport expands. That's the cause of the cha-cha-cha (and don't let your dance instructor tell you differently).
If you feel strongly about it, you can force the vertical scrollbar to always be displayed like this:
html { min-height: 100%; margin-bottom: 1px; }
* html { height: 100%; } /* for ie 6 */
The page with more content has the scrollbar on the right.
Because you have a horizontally centered page, the width of the page with the scrollbar is a few pixels narrower causing the centered portion to shift left.