I have this html code:
<div id="social">
<div class="barra_gris"></div>
<div class="caixa_social"><a class="twitter" href="#" target="_blank"><img src="img/twitter.png" alt="twitter" /></a>
<a class="facebook" href="http://www.facebook.com/pages/grup-abs/329596937580" target="_blank"><img src="img/facebook.png" /></a>
</div>
<div class="idiomes">català | castellano</div>
</div>
<div id="logo"><img src="img/logo.png" alt="logo" /></div>
</div>
And barra_gris has this css:
.barra_gris{
position:relative;
width:905px;
height:15px;
background-color:#6b6b6b;
display: block;
}
The problem is that Chrome and Opera doesn't show the barra gris class with this background?
The url of site is: http://abs.marcmorales.es/
What could the problem be?
Add between the div and it will work like following
<div class="barra_gris"> </div>
In Google, Opera and IE I can see the grey bar on top with twitter and facebook logos plus the language options for Catala and Castellano. Plus the grey bar on top of the page... http://imageshack.us/photo/my-images/267/barragris.png/
Since this Div does not contain any data so by default its height becomes 0. So either put some height to this div or use
Related
I've been trying to solve this for almost 6 hours just to get this to be responsive on mobile. Will someone please help me? It's really difficult and I really want to finish this homework.
I wanted it to look like this, but mobile responsive: https://imgur.com/kRcHUDJ
I only use HTML and inline CSS, hopefully, there is a solution to this.
<center>
<div id="home-secondary" style ="display: inline-block";>
<ul id="homepageGuide">
<a href="/blog/"><img class="img-responsive" data-original="/uploads/button-1.png" />
<p><img src="https://cdn.theatlantic.com/assets/media/img/mt/2019/07/GettyImages_138965532/lead_720_405.jpg?mod=1563813032" width="500px" alt="example one"></p>
<span class="color-overlay"></span>
</a></ul>
</div>
<div id="home-secondary" style ="display: inline-block";>
<ul id="homepageGuide">
<a href="/testimonials.php">
<img class="img-responsive" data-original="/uploads/button-2.png" />
<p><img src="https://cdn.theatlantic.com/assets/media/img/mt/2018/11/shutterstock_552503470/lead_720_405.jpg?mod=1541605820" width="500px" alt="example two"></p>
<span class="color-overlay"></span>
</a></ul>
</div>
</center>
Demo here: https://codepen.io/anon/pen/WVpwwX
It does appear to be working great on desktop, what I wanted to achieve is given; but when it comes to mobile, the results aren't great. I had to scroll to the right just to see the full image.
My expected output is to have the images stacked up together when viewed on mobile. Thanks guys.
Almost there. The images need to have a max-width set for mobile devices so they will resize automatically instead of flowing off the screen because of their 500px width setting. Set display to inline-block as well:
https://codepen.io/ZorlacMeister/pen/PMpNRK
You can test easily in Chrome. Hit F12, then click on the little icon that looks like two mobile devices standing upright next to each other, then RELOAD the page to see the mobile layout.
HTML
<center>
<div id="home-secondary" style ="display: inline-block">
<ul id="homepageGuide">
<a href="/blog/"><img data-original="/uploads/button-1.png" />
<p><img class='img-responsive' src="https://cdn.theatlantic.com/assets/media/img/mt/2019/07/GettyImages_138965532/lead_720_405.jpg?mod=1563813032" width="500px" alt="example one"></p>
<span class="color-overlay"></span>
</a></ul>
</div>
<div id="home-secondary" style ="display: inline-block">
<ul id="homepageGuide">
<a href="/testimonials.php">
<img data-original="/uploads/button-2.png" />
<p><img class='img-responsive' src="https://cdn.theatlantic.com/assets/media/img/mt/2018/11/shutterstock_552503470/lead_720_405.jpg?mod=1541605820" width="500px" alt="example two"></p>
<span class="color-overlay"></span>
</a></ul>
</div>
</center>
CSS
.img-responsive {
max-width:75%;
display: inline-block;
}
You can use a grid layout to achieve this.
grid-gap: 1em; specifies your padding between elements
center {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 1em;
}
img {
max-width: 100%;
}
<center>
<div id="home-secondary" style="display: inline-block" ;>
<ul id="homepageGuide">
<a href="/blog/"><img class="img-responsive" data-original="/uploads/button-1.png" />
<p><img src="https://cdn.theatlantic.com/assets/media/img/mt/2019/07/GettyImages_138965532/lead_720_405.jpg?mod=1563813032" width="500px" alt="example one"></p>
<span class="color-overlay"></span>
</a>
</ul>
</div>
<div id="home-secondary" style="display: inline-block" ;>
<ul id="homepageGuide">
<a href="/testimonials.php">
<img class="img-responsive" data-original="/uploads/button-2.png" />
<p><img src="https://cdn.theatlantic.com/assets/media/img/mt/2018/11/shutterstock_552503470/lead_720_405.jpg?mod=1541605820" width="500px" alt="example two"></p>
<span class="color-overlay"></span>
</a>
</ul>
</div>
</center>
I set the image width to 100% and used a class named column on the <ul> to set the box-sizing, float a relative width and display.
I also set the <ul> paddings to 2.5%.
Check it on Codepen or below
.column {
box-sizing: border-box;
float: left;
width: 50%;
display: inline-block;
}
ul{
padding-left: 2.5%;
padding-right: 2.5%;
}
<center>
<ul class="homepageGuide column">
<a href="/blog/"><img class="img-responsive" data-original="/uploads/button-1.png" />
<p>
<img src="https://cdn.theatlantic.com/assets/media/img/mt/2019/07/GettyImages_138965532/lead_720_405.jpg?mod=1563813032" width="100%" alt="example one">
</p>
<span class="color-overlay"></span>
</a>
</ul>
<ul class="homepageGuide column">
<a href="/testimonials.php">
<img class="img-responsive" data-original="/uploads/button-2.png" />
<p>
<img src="https://cdn.theatlantic.com/assets/media/img/mt/2018/11/shutterstock_552503470/lead_720_405.jpg?mod=1541605820" width="100%" alt="example two">
</p>
<span class="color-overlay"></span>
</a>
</ul>
</center>
I'm using bootstrap grid as shown below and I'm trying to centralize some divs. ( pic). I've tried everything {margin:0 auto; width:50% } etc etc but I can't work it out. It can't be that difficult to centralize some divs. What's the problem here? Please don't mark it as a duplicate. I've been researching the whole day, I just can't work it out.
Thank you
<header data-spy="affix" id="myHeader" class="container row">
<div class="col-sm-4 ">
<div class="centralize">
<a href="http://www.facebook.com" target="_blank">
<img class="logos" src="images/facebook.png" onmouseover="zoomin(this.id)" onmouseout="zoomout(this.id)">
</a>
<a href="http://www.twitter.com" target="_blank">
<img class="logos" src="images/twitter.png" onmouseover="zoomin(this.id)" onmouseout="zoomout(this.id)">
</a>
<a href="http://www.instagram.com" target="_blank">
<img class="logos" src="images/instagram.png" onmouseover="zoomin(this.id)" onmouseout="zoomout(this.id)">
</a>
</div>
</div>
<div class="col-sm-4">
<div class="centralize">
//Other Stuff to be centralized
</div>
</div>
<div class="col-sm-4">
<div class="centralize">
//Other Stuff to be centralized
</div>
</div>
</header>
Actually with {margin:0 auto; width:50%} it should work.
But in your code I see that you are using the .col-sm-4 class on the parent div that only takes 1/3 of the width. It might work with .col-sm-12 instead that takes 100%
To center align the content within the class="centralize" divs, use:
.centralize {
text-align: center;
}
I have put social media icons on the right side of my html, but I can't center my title anymore, how can I fix this?
I've tried text-align: center already, and it doesn't work.
#socialm{
float:right;
}
#socialm ul li{display: inline;}
<header>
<div id="socialm">
<img src="facebook.png" width= "45px" height="45px"/>
<img src="instragram.png" width= "45px" height="45px"/>
<img src="youtube.png" width= "45px" height="45px"/>
</div>
<h1>Photography and visual arts</h1>
</header>
You can't do this without absolutely positioning one of the elements.
Absolute positioning takes the element out of the flow so it ignores the other elements around it.
Here I positioned the 'social' div on the right instead of floating it. As you can see the heading is now centered.
You can also see the downside of positioning..without careful sizing, you get overlap. Media queries can address this.
#socialm {
position: absolute;
right: 0;
}
#socialm ul li {
display: inline;
}
header {
text-align: center;
}
<header>
<div id="socialm">
<a href="https://www.facebook.com" target="_blank">
<img src="http://placekitten.com.s3.amazonaws.com/homepage-samples/96/140.jpg" width="45px" height="45px" />
</a>
<a href="https://www.instagram.com" target="_blank">
<img src="http://placekitten.com.s3.amazonaws.com/homepage-samples/96/140.jpg" width="45px" height="45px" />
</a>
<a href="https://www.youtube.com/channel/..." target="_blank">
<img src="http://placekitten.com.s3.amazonaws.com/homepage-samples/96/140.jpg" width="45px" height="45px" />
</a>
</div>
<h1>Photography and visual arts</h1>
</header>
JSFiddle Demo
I'm not sure if this is what you are looking for, but I simply just added text-align:center; to your h1 tag.
Here is the solution:
http://codepen.io/Glenvig/pen/dMeaQm
I have a three column layout and one of them is like -
<div class="column one-second product_image_wrapper">
<div class="images">
<div class="image_frame scale-with-grid" ontouchstart="this.classList.toggle('hover');">
<div class="image_wrapper">
<a href="#" itemprop="image" class="woocommerce-main-image zoom" title="Sumanji Kamphy" data-rel="prettyPhoto">
<div class="mask">
</div>
<img width="250" height="250" src="#" class="scale-with-grid wp-post-image" alt="Sumanji Kamphy" title="Sumanji Kamphy">
</a>
<div class="image_links">
<a href="#" itemprop="image" class="woocommerce-main-image zoom" title="Sumanji Kamphy">
<i class="icon-search">
</i>
</a>
</div>
</div>
</div>
</div>
</div>
I want to center this image both vertically and horizontally currently it looks something like this -
Can someone tell how to do this ?
Assuming that you want to put it in center with relative to the div with class image_frame , the following code will work.
.image_frame{
position:relative;//makes the outer div as relative, thus you can use which if you want some other div
}
.image_frame img{
position:absolute;
top:50%;
left:50%;//brings the edge of image to exact center both horizontally and vertically
margin-top:-125px;
margin-left:-125px;//Now pushing it half of images width and height in your case it is 250px so -125px is good for pushing the image to exact center.
}
I want to display several images next to each other and each image has a date below it. The date is wider than the image and I would like to center the image on top of the date. Here's a code snippet
<div style="float:left">
<div class="newsfeed_photo">
<a href="...">
<img alt="Small" class="photo_thumb_frame" src="..." />
</a></div>
<div class="newsfeed_date">
(08/17/11 03:29pm)
</div>
</div>
<div style="float:left">
<div class="newsfeed_photo">
<a href="...">
<img alt="Small" class="photo_thumb_frame" src="..." />
</a></div>
<div class="newsfeed_date">
(08/22/11 02:16pm)
</div>
</div>
If I'm understanding you right, you should just be able to use text-align: center:
http://jsfiddle.net/rahjU/
To shift your image Before other content (visually)
.img {
order: -1;
}
W3