http://jsfiddle.net/acz3hhsL/
Code:HTML
<div id="contact-info">
<div id="adresa">
<div id="addPadding" style="padding: 2em;">
<img src="http://avocat.dac-proiect.ro/wp/wp-content/themes/twentyfourteen/images/ADRESA.png" style="width:22px;height:31px;float:left;display: inline;">
<div style="float: right;display: inline;width: 80%;">
<p style="text-align:left;font-size:14px;color:black;">Calea Dorobantilor,nr.74,<br>bl.Y9,SC.2,Ap.25<br>Cluj-Napoca,400609<br>Romania</p>
</div>
</div>
</div>
<div id="telefon">
<div id="addPadding" style="padding: 60px 2em;">
<img src="http://avocat.dac-proiect.ro/wp/wp-content/themes/twentyfourteen/images/TELEFON.png" style="width:22px;height:31px;float:left;display: inline;">
<div style="float: right;display: inline;width: 80%;">
<p style="font-size:14px;color:black;text-align:left;">Tel./Fax (004) 0264 448 579<br>Tel.(004) 0744 490 776</p>
</div>
</div>
</div>
<div id="mail">
<div id="addPadding" style="padding: 20px 2em;">
<img src="http://avocat.dac-proiect.ro/wp/wp-content/themes/twentyfourteen/images/E-MAIL.png" style="width:26px;height:19px;float:left;display: inline;">
<div style="float: right;display: inline;width: 80%;">
<p style="font-size:14px;color:black;text-align:left;">office#codoban.com</p>
</div>
</div>
</div>
</div>
</div>
Code CSS:
#contact-info
{
width:268px;
height:270px;
background:url(http://avocat.dac-proiect.ro/wp/wp-content/themes/twentyfourteen/images/BODY-CONTACT.png);
position:absolute;
right:0;
}
This is the site:
http://avocat.dac-proiect.ro/wp
I changed the text font size and unfortunately not displayed inline with icon sites.
How can I get him back but font-size:14px;
Can you help me please to solve this problem?
Thanks in advance!
Add
p {margin: 0;}
to your CSS, that removes the gaps/offset of the text. http://jsfiddle.net/acz3hhsL/2/
Related
I want to make the footer look like this in Desktop:
In mobile it should look like this:
I tried the following, but the text seems to go out of bounds (note this is just one of my prototypes, you would get overwhelmed if I posted all of them here):
<div class="row">
<div class="footercol1" style="line-height:10px;display: flex;">
<div id="image" style="float: left; margin-left: 25px;">
<img src="https://picsum.photos/200/200" width="73" />
</div>
<div class="col-sm-6" style="word-wrap:normal;max-width:300px;width:50%;float: right; margin-left: 10px;">
<p style="font-size: 14px;">Text1 blablablablablablablabla</br>
</br>
blablablablablablablablablablablablablablabla</br>
</br>
blablablablablablalblalbblalblbalblbalblalblbabla<br /> <br /> blablablablabalbalblablalblalbbllabllbalblabla.
</p>
</div>
<div class="col-sm-6" style="max-width:300px;float: right; width:50%;margin-left: 50px;font-size: 14px;">
<strong style="color: #489523;">Text 2: </strong> blablablabalbalbalblbalblalblbalblablblalbalblblalblblalblabla <br /><br />
<p>blablablablablablabalbalbalbalblablbablalblablablablabla</p>
<br />
<img class="alignleft" src="https://picsum.photos/70/30" alt="">
</div>
</div>
</div>
FYI: footercol1 doesn't yet contain any CSS rules, hence it's not appended to the question.
UPDATE
Text out of bounds problem is also visible in your snippet as well:
UPDATE 2
Adding the following CSS rules to p:
word-break: normal;
white-space: normal;
partly solves the overflow problem, but it makes the text quite "crambed" as a side effect. Any clue how to fix that?
You're already using flex on your footercol1, so the easiest would probably be to just to use a media query to define the flex direction.
Something like:
.footercol1 {
display: flex;
}
p {
overflow-wrap: break-word;
}
#media only screen and (max-width: 600px) {
.footercol1 {
flex-direction: column;
}
}
<div class="row">
<div class="footercol1" style="line-height:10px;display: flex;">
<div id="image" style="float: left; margin-left: 25px;">
<img src="https://picsum.photos/200/200" width="73" />
</div>
<div class="col-sm-6" style="word-wrap:normal;max-width:300px;width:50%;float: right; margin-left: 10px;">
<p style="font-size: 14px;">Text1 blablablablablablablabla
<br>
<br> blablablablablablablablablablablablablablabla
<br>
<br> blablablablablablalblalbblalblbalblbalblalblbabla
<br>
<br> blablablablabalbalblablalblalbbllabllbalblabla.
</p>
</div>
<div class="col-sm-6" style="max-width:300px;float: right; width:50%;margin-left: 50px;font-size: 14px;">
<strong style="color: #489523;">Text 2: </strong> <p>blablablabalbalbalblbalblalblbalblablblalbalblblalblblalblabla</p>
<br>
<br>
<p>blablablablablablabalbalbalbalblablbablalblablablablabla</p>
<br>
<img class="alignleft" src="https://picsum.photos/70/30" alt="">
</div>
</div>
</div>
flex-direction: row; is default. You should probably read up on flexbox:
https://developer.mozilla.org/en-US/docs/Web/CSS/flex
How can I align img in center to the respective to the text below it? The wrapper div is aligned left.
<div class="wrapper">
<div class="com-icon">
<img src="images/IT.png" alt="laptop logo">
</div>
<div class="com-text">
<p>IT Solutions</p>
</div>
</div>
Add another wrapper around the com-icon and com-text. And then align that were you want it. Example below:
<div class="wrapper">
<div class="wrapper-inner">
<div class="com-icon">
<img src="images/IT.png" alt="laptop logo">
</div>
<div class="com-text">
<p>IT Solutions</p>
</div>
</div>
</div>
Add this to your css file:
.wrapper{
text-align: center;
}
or if you just want to check if it's working you can add the infamous inline style.
This not a recommended method other than just to see if it's OK!
<div class="wrapper" style="text-align:center;">
<div class="com-icon">
<img src="images/IT.png" alt="laptop logo">
</div>
<div class="com-text">
<p>IT Solutions</p>
</div>
</div>
make a table
table.center {
text-align: center;
margin-left: auto;
margin-right: auto;
}
.com-text,
.com-icon {
margin: auto;
}
<div class="wrraper">
<table class="center">
<tr>
<td>
<div class="com-icon">
<img src="image.jpg" alt="laptop logo">
</div>
</td>
</tr>
<tr>
<td>
<div class="com-text">
<p>IT Solutions</p>
</div>
</td>
</tr>
</table>
</div>
im trying to create this:
but the images are floating to the right and not stick at the center.
and the text floating to the left and not in the center.
and the "OR" is not in the middle.
here is my code:
<div class='container' >
<span style="float:left; margin-left:20px;">
<div class='textrtl' style="text-align: center;"><h5>WhatssApp</h5></div>
<div class='pickbuttonplatform' id='image0a' ><img alt="" src="http://placehold.it/90x70" style="width:100px; height:100px;"></div>
<div class='textrtl' style="text-align: center;">Recommended to Europe, India, Brazil and Israel</div>
</span >
OR
<span style="float:right; margin-left:20px;">
<div class='textrtl' style="text-align: center;"><h5>SMS</h5></div>
<div class='pickbuttonplatform' id='image0a' ><img alt="" src="http://placehold.it/90x70" style="width:100px ; height:100px;"></div>
<div class='textrtl' style="text-align: center;">Recommended to the United States</div>
</span>
</div>
what should i do??
Add the following CSS:
.pickbuttonplatform{
text-align:center;
}
Here is the JSFiddle demo
to align or in middle use inline-block see snippet below
img{display: block; margin: 0 auto;}
.txt-block{display: inline-block; vertical-align: middle; text-align: center;}
.img-block{display: inline-block; vertical-align: middle; width: 40%;}
<div class='container' >
<span class="img-block">
<div class='textrtl' style="text-align: center;"><h5>WhatssApp</h5></div>
<div class='pickbuttonplatform' id='image0a' ><img alt="" src="http://placehold.it/90x70" style="width:100px; height:100px;"></div>
<div class='textrtl' style="text-align: center;">Recommended to Europe, India, Brazil and Israel</div>
</span >
<span class="txt-block">
OR
</span >
<span class="img-block">
<div class='textrtl' style="text-align: center;"><h5>SMS</h5></div>
<div class='pickbuttonplatform' id='image0a' ><img alt="" src="http://placehold.it/90x70" style="width:100px ; height:100px;"></div>
<div class='textrtl' style="text-align: center;">Recommended to the United States</div>
</span>
</div>
By default everything is left aligned so you need to define it if you want to centre align the elements.
Here you can use text-align:center
<div class='container'>
<span style="float:left; margin-left:20px;">
<div class='textrtl' style="text-align: center;"><h5>WhatssApp</h5></div>
<div class='pickbuttonplatform' id='image0a' style="text-align:center;"><img alt="" src="http://placehold.it/90x70" style="width:100px; height:100px;"></div>
<div class='textrtl' style="text-align: center;">Recommended to Europe, India, Brazil and Israel</div>
</span >
<span style="float:right; margin-left:20px;">
<div class='textrtl' style="text-align: center;"><h5>SMS</h5></div>
<div class='pickbuttonplatform' id='image0a' style="text-align:center;"><img alt="" src="http://placehold.it/90x70" style="width:100px ; height:100px;"></div>
<div class='textrtl' style="text-align: center;">Recommended to the United States</div>
</span>
</div>
OR
use this css if you can
.pickbuttonplatform{
text-align:center;
}
Example : https://jsfiddle.net/g5emes1v/
In your structure you are using #image0a id twice which is not valid. You cannot use same id multiple times in one page
I am working on a simple homepage for my website but I want to get the well evenly spread out. I can align the left to the left and the right to the right but I cant seem to be able to get that middle well to always stay in the centre of the page. I have tried many things but they all don't work, have a look at my site to see what I want to do, the wells are under the image slider. This is the code I have done but and the CSS is the default bootstrap min css with a few tweaks for the colors.
<div class="container">
<div class="row">
<div class="col-lg-4 well" style="margin-left: 10px !important; width: 330px;
margin-right: 10px; padding: 4px !important; min-height: 330px; ">
<center>
<img style="height: 135px;" src="img/ts.png" />
<h3>TeamSpeak 3</h3>
<br />
<p>Chat with us on our TeamSpeak at: <br />
<b>ts.clustermc.net</b>
<br /> So, come have a wonderful conversation with us!</p>
</center>
</div>
<div class="col-lg-4 well" style="margin-left: 10px !important; width: 330px;
margin-right: 10px; padding: 4px !important; min-height: 330px; ">
<center>
<img style="height: 135px;" src="img/wool.png" />
<h3>Cluster MC</h3>
<div class="progress" style="margin-bottom: 7px; width: 200px;">
<div class="progress-bar progress-bar-success" style="width: 2.0%;">
</div>
<div class="progress-bar progress-bar-danger" style="width: 98.0%;">
</div>
</div>
<p style="margin-top: -27px; color: white; font-weight: bold;">
3 Online</p>
<br />
<p>Start collecting your ClusterCredits now at:<br />
<b>play.clustermc.net</b></p>
</center>
</div>
<div class="col-lg-4 well" style="margin-left: 10px !important; width: 330px;
margin-right: 10px; padding: 4px !important; min-height: 330px; ">
<center>
<img style="height: 135px;" src="img/forums.png" />
<h3>Community Forums</h3>
<br />
<p>Come and talk to some of our memers and staff at the forums! <br />
<b>www.clustermc.net/forums
</b>
<br />We dont bite, we promise!</p>
</center>
</div>
</div>
</div>
Sorry for the bad layout, im a beginner to coding and I want to learn :)
This is the Updated code.I have nested a div with class well as it was getting overlapped when used with col-lg-4. Please check the below code:
<div class="container">
<div class="row">
<div class="col-lg-4">
<div class="well" style="height: 330px; width: 330px;">
<center>
<img style="height: 135px;" src="img/ts.png"/>
<h3>TeamSpeak 3</h3>
<br/>
<p>Chat with us on our TeamSpeak at: <br/>
<b><a href="ts3server://ts.clustermc.net">
ts.clustermc.net</a></b>
<br/>
So, come have a wonderful conversation with us!
</p>
</center>
</div>
</div>
<div class="col-lg-4">
<div class="well" style="height: 330px; width: 330px;">
<center>
<img style="height: 135px;" src="img/wool.png"/>
<h3>Cluster MC</h3>
<div class="progress" style="margin-bottom: 7px; width: 200px;">
<div class="progress-bar progress-bar-success"
style="width: 2.0%;"></div>
<div class="progress-bar progress-bar-danger"
style="width: 98.0%;"></div>
</div>
<p style="margin-top: -27px; color: white; font-weight: bold;">
3 Online
</p>
<br/>
<p>Start collecting your ClusterCredits now at:<br/>
<b>play.clustermc.net</b></p>
</center>
</div>
</div>
<div class="col-lg-4">
<div class="well" style="height: 330px; width: 330px;">
<center>
<img style="height: 135px;" src="img/forums.png"/>
<h3>Community Forums</h3>
<br/>
<p>Come and talk to some of our memers and staff at the forums
<br/>
<b><a href="http://clustermc.net/forums">
www.clustermc.net/forums</a>
</b><br/>
We dont bite, we promise!</p>
</center>
</div>
</div>
</div>
</div>
It looks like your three 'well' divs are sitting in the middle of the page already?
As every thing is sitting in <div class="container"> that is the bootstrap class used to center things on a page. As per http://getbootstrap.com/2.3.2/scaffolding.html#layouts.
Note: It looks like you're missing a final ending </div> for the container class
I'm not 100% sure what issue you are having. Maybe provide a screenshot of what you want to achieve?
Floating left 'li' not working in ipod, android devices. But it works perfect in all major broswers in laptop / destops. Code is here:
<ul class="clsvideos clearfix">
<li>
<div class="home-thumb">
<div class="home-play-container">
<div class="play-button-hover">
<div class="movie-entry yt-uix-hovercard">
<div class="tooltip">
<img class="yt-uix-hovercard-target" src="http://img.youtube.com/vi/pF6Yq7DrJKA/1.jpg" border="0" width="140" height="83" title="">
<div class="Tooltipwindow clearfix">
<img src="http://video.muslimbackyard.com/templates/videoplus/images/tip.png" class="tipimage">
<div class="clearfix"><span class="clstoolleft">Category : </span><span class="clstoolright">Education & Travel</span></div>
<span class="clsdescription">Description : </span><p>Abdul Basit reciting Surah Infitar - amazing tajweed! mash'Allah!</p><div class="clearfix"> <span class="clstoolleft">Rating : </span> <div class="clstoolright ratingvalue ratethis1 fivepos1"></div>
<div class="clearfix"><span class="clstoolleft"> Views:</span> <span class="clstoolright">58 </span></div>
</div>
</div>
</div>
</div>
</div>
<div class="show-title-container">
Abdul Basit reciting Surah Infitar
</div>
<span class="video-info"> Education & Travel </span>
<div class="video-info clearfix">
<div class="clsratingvalue"><span class="ratethis1 fivepos1 "></span></div>
<div class="clsvideosviews">58 Views</div>
</div>
</div>
</div></li>
<li>
<div class="home-thumb">
<div class="home-play-container">
<div class="play-button-hover">
<div class="movie-entry yt-uix-hovercard">
<div class="tooltip">
<img class="yt-uix-hovercard-target" src="http://img.youtube.com/vi/IYMKQKSV0bY/1.jpg" border="0" width="140" height="83" title="">
<div class="Tooltipwindow clearfix">
<img src="http://video.muslimbackyard.com/templates/videoplus/images/tip.png" class="tipimage">
<div class="clearfix"><span class="clstoolleft">Category : </span><span class="clstoolright">Sports & Gaming</span></div>
<span class="clsdescription">Description : </span><p>How the Bible Led Me to Islam: The Story of a Former Christian Youth Minister - Joshua Evans</p><div class="clearfix"> <span class="clstoolleft">Rating : </span> <div class="clstoolright ratingvalue ratethis1 fourpos1"></div>
<div class="clearfix"><span class="clstoolleft"> Views:</span> <span class="clstoolright">41 </span></div>
</div>
</div>
</div>
</div>
</div>
<div class="show-title-container">
How the Bible Led Me to Islam: The ...
</div>
<span class="video-info"> Sports & Gaming </span>
<div class="video-info clearfix">
<div class="clsratingvalue"><span class="ratethis1 fourpos1 "></span></div>
<div class="clsvideosviews">41 Views</div>
</div>
</div>
</div></li>
Corresponding CSS is:
.clsvideos li:first-child {
width: 140px;
float: left;
padding: 14px 10px 0 0;
display: block;
}
.clsvideos li {
height: 155px;
width: 140px;
padding: 14px 10px 0 9px;
border-right: 1px dotted #CFCFCF;
border-bottom: 1px dotted #CFCFCF;
float: left;
}
Live URL: http://video.muslimbackyard.com/
Note: Open the site in a smartphone and destop. Note the disign issues at Popular Videos, Recent Videos section. You will know where the problem exists.
Awaiting for a solution at the earliest
Actually the problem was, the developer hadn't closed the last 'div' inside 'li' which led to this bug...
"So be careful with front-end code while writing core php". This is what the advise I have to my developer.