I don't know why I'm struggling with what seems to be such a simple thing. Right now I have a mobile page (which can also be viewed on desktop) which is using a full-width layout.
Inside it, I'd just like to center my text (of indeterminable size) and an icon that is 30x30 px.
<div id="contact-info">
<div class="email">
<div class="icon-left">
<img src="image/mobile/message-dark.png" />
</div>
<div class="info-right">
myverylongemailmyverylongemail#gmail.com
</div>
</div>
</div>
As the e-mail grows longer on the right, I'd like the to increase in width but the whole thing stays centered.
#contact-info {
padding: 15px 0;
color: #F7F8F8;
font-size: 20px;
}
#contact-info .email {
height: 48px;
width: 300px;
margin: 0 auto;
}
#contact-info .icon-left {
width: 50px;
height: 100%;
float: left;
}
#contact-info .icon-left img {
width: 30px;
height: 30px;
}
#contact-info .info-right {
min-width: 240px;
height: 50%;
padding-top: 10px;
font-size: 12px;
float: right;
}
The flexible box technique is best suited for your solution. Not need to define the fixed width for it using this method.
Check the browser compatibility table for Flexbox
#contact-info {
padding: 15px 0;
color: #F7F8F8;
font-size: 20px;
}
#contact-info .email {
height: 48px;
display: flex;
justify-content: center;
}
#contact-info .icon-left {
width: 50px;
height: 100%;
float: left;
}
#contact-info .icon-left img {
width: 30px;
height: 30px;
}
#contact-info .info-right {
min-width: 240px;
height: 50%;
padding-top: 10px;
font-size: 12px;
float: right;
color: black;
}
<div id="contact-info">
<div class="email">
<div class="icon-left">
<img src="http://placehold.it/30x30" />
</div>
<div class="info-right">
myverylongemailmyverylongemail#gmail.com another
email#gmail.com
</div>
</div>
</div>
Related
How do I center my .peachtext and my .whitetext paragraph tags text within the .headertext1 div? Please help! I'm pretty new to coding. I'd also like to increase the .peachtext size to 30px and the .whitetext to about 20px but it produces a space between the words an and extremely. It seems like my text-align property is not working.
header{
width: 100%;
height: 1229px;
}
div.headerblue{
width: 100%;
height: 505px;
background-color: #323841;
}
div.headerwhite{
width: 100%;
height: 594px;
background-color: #ffffff;
}
div.headerorange{
width: 100%;
height: 130px;
background-color: #f25c43;
}
div.headertext1 {
width: 940px;
margin: auto;
padding-top: 30px;
}
p.peachtext {
color: #f25c43;
font-size: 20px;
text-align: center;
}
p.whitetext {
color:white;
font-size: 10px;
text-align: center;
}
<header>
<div class="headerblue">
<div class="headertext1">
<p class="peachtext">WE PROVIDE AN EXTREMELY</p>
<p class="whitetext">LOW PRICE</p>
</div>
</div>
<div class="headerwhite"></div>
<div class="headerorange"></div>
</header>
if you want to center your .peachtext and, .whitetext inside your div.headertext1
you should set the width of your
.headertext1 from 940px to 100%
div.headertext1 {
width: 100%; //set this to 100%
margin: auto;
padding-top: 30px;
}
or you change the width to max-width if you want to keep 940px
div.headertext1 {
max-width: 940px; //set this to max-width
margin: auto;
padding-top: 30px;
}
and if you want to adjust the font size of your text you may use "VW" instead of "PX"
like this
p.peachtext {
color: #f25c43;
font-size: 4vw;
text-align: center;
}
p.whitetext {
color:white;
font-size: 2vw;
text-align: center;
}
Ran snippet on Firefox and the placements are exactly like you want them to be, both paragraphs nicely in the center of the div. Just increase your font-sizes to get the sizes you want. You sure your css file is correctly linked ?
header{
width: 100%;
height: 1229px;
}
div.headerblue{
width: 100%;
height: 505px;
background-color: #323841;
}
div.headerwhite{
width: 100%;
height: 594px;
background-color: #ffffff;
}
div.headerorange{
width: 100%;
height: 130px;
background-color: #f25c43;
}
div.headertext1 {
width: 100%;
margin: auto;
padding-top: 30px;
}
p.peachtext {
color: #f25c43;
font-size: 30px;
text-align: center;
}
p.whitetext {
color:white;
font-size: 20px;
text-align: center;
}
<header>
<div class="headerblue">
<div class="headertext1">
<p class="peachtext">WE PROVIDE AN EXTREMELY</p>
<p class="whitetext">LOW PRICE</p>
</div>
</div>
<div class="headerwhite"></div>
<div class="headerorange"></div>
</header>
Check the above code.
I imitate a website: https://open.weixin.qq.com/
You see the overlaps is my requirement, if I reduce the width of browser.
But in my project when I reduce the browser width, I will get the this irksome effect:
My code is bellow, the images can not shows up but this is not the point:
.header {
width: 100%;
height: 68px;
background-color: #363636;
}
.container {
margin-left: 40px;
margin-right: 40px;
}
.container > div {
display: inline-block;
}
.logo {
height: 100%;
width: 240px;
}
.logo img {
width: 100%;
height: 100%;
}
.nav {
display: inline-block;
}
.nav li {
width: 96px;
height: 100%;
color: #afafaf;
line-height: 68px;
float: left;
}
.nav li :hover {
color: #fff;
text-align: center;
}
.nav .selected {
color: #fff;
}
.right-buttons {
float: right;
}
.login-logout {
float: right;
display: inline-block;
height: 68px;
color: #ffffff;
line-height: 68px;
}
.qrcode {
float: right;
display: inline-block;
width: 68px;
height: 68px;
align-content: center;
line-height: 68px;
}
.qrcode img {
line-height: 68px;
width: 14px;
height: 14px;
}
<div class="header">
<div class="container">
<div class="logo">
<img src="../../assets/img/common/logo.png">
</div>
<ul class="nav">
<li class="nav-item selected">首页</li>
<li class="nav-item">数据中心</li>
</ul>
<div class="right-buttons">
<div class="login-logout">
<button>登录/注册</button>
</div>
<div class="qrcode">
<img src="../../assets/img/home/little-qrcode.png">
</div>
</div>
</div>
</div>
How can I get the upper effect?
As I understood, you need right-buttons div overlapped to nav ul instead of going to next line.
Apply "position:absolute" and "right: 0" to right-buttons instead of "float: right".
But in smaller widths, overlapping will confuse the user. So its better you make it responsive for all devices.
Content of two DIVs spills out of the bottom.
This problem arises not with all browsers. Chrome, IE, Edge - works fine but Firefox, Safari and Chrome for mobile (Android) reflects this problem.
Screenshot: chrome for Android (tablet device)
What's wrong with the code?
html {
height: 100%;
}
body {
background-image: url("background.jpg");
background-size: cover;
background-position: center center;
background-repeat: repeat;
height: 100%;
font-family: 'Times New Roman', Times, sans-serif;
font-size: 16px;
}
#open-hours {
float: left;
}
#contacts {
float: right;
}
.ins {
width: 4%;
height: 4%;
}
hr {
background-color: black;
}
#first-row-1 {
width: 362px;
height: 264px;
margin-right: -4px;
}
#first-row-1 img {
width: 100%;
height: 100%;
}
#first-row-2 {
width: 360px;
height: 262px;
border: 1px solid black;
vertical-align: top;
}
#first-row-2 h4 {
margin-top: 5px;
}
#first-row-1,
#first-row-2,
#second-row-1,
#second-row-2 {
display: inline-block;
}
#first,
#second,
h2 {
text-align: center;
}
#first-row-2 ul,
#second-row-1 ul {
text-align: left;
}
#logo {
width: 358px;
height: 34px;
}
#logo img {
width: 68px;
height: 34px;
}
#second-row-1 {
width: 360px;
height: 262px;
border: 1px solid black;
vertical-align: top;
margin-right: -4px;
}
#second-row-2 {
width: 362px;
height: 264px;
}
#second-row-2 img {
width: 100%;
height: 100%;
}
#second {
margin-top: -4px;
}
#media only screen and (max-width: 766px) {
#first-row-1,
#second-row-2,
#hide,
.ins,
.free-space {
display: none;
}
#open-hours,
#contacts {
float: none;
text-align: center;
}
#first-row-2,
#second-row-1 {
border: 1px solid black;
margin: 0 auto;
display: block;
width: 100%;
}
#second {
margin: 0px;
}
span {
display: block;
}
h2 {
font-size: 18px;
}
h4 {
margin: 5px 0px -10px 0px;
}
#logo {
margin: auto;
}
}
#media only screen and (max-width: 393px) {
#logo {
display: none;
}
#first-row-2,
#second-row-1 {
min-width: 285px;
}
}
<div>
<div id="open-hours">пн-пт 10.00-20.00</div>
<div id="contacts">
<img class="ins" src="phone_pic.png"> text
<img class="ins" src="envelope_pic.png"> <span>text</span>
</div>
<br class="free-space">
<hr>
<br class="free-space">
<h2>Успешный опыт продаж <span id="hide">кондиционеров и климатической техники</span> с 2007 года</h2>
<div id="first">
<div id="first-row-1">
<img src="photo_1.jpg">
</div>
<div id="first-row-2">
<h4>Мы предлагаем широкий спектр оборудования</h4>
<ul>
<li>бытовые кондиционеры</li>
<li>кондиционеры для коммерч. применения</li>
<li>тепловые насосы</li>
<li>осушители воздуха</li>
<li>мультизональные VRF системы</li>
<li>системы бытовой, полупромышленной и промышленной вентиляции</li>
<li>приточно-вытяжные агрегаты</li>
<li>тепловые завесы</li>
</ul>
<div id="logo">
<img src="logo.gif">
<img src="logo.png">
<img src="log.png">
<img src="logo.png">
<img src="logo.jpg">
</div>
</div>
</div>
<div id="second">
<div id="second-row-1">
<h4>Оплата</h4>
<ul>
<li>наличный расчет - в пункте выдачи или по факту доставки продукции</li>
<li>безналичный расчет - оплата физическими и юридическими лицами</li>
</ul>
<h4>Доставка</h4>
<ul>
<li>самовывоз</li>
<li>собственным транспортом компании</li>
<li>почтовыми, курьерскими службами Украины</li>
</ul>
</div>
<div id="second-row-2">
<img src="photo_2.jpg">
</div>
</div>
</div>
Try to replace height of first row and second row divs to min-height and height to auto
#first-row-1{
width: 362px;
height:auto;
min-height: 264px;
margin-right: -4px;
}
#first-row-2{
width: 360px;
height:auto;
min-height: 262px;
border: 1px solid black;
vertical-align: top;
}
I tried to fix your issue without making too many changes, but really the issue is, that you are setting fixed height to child elements and they overflows their parents. I'd suggest to make the layout responsive to save yourself headaches in the future when you'll want to write longer paragraphs.
Without changing the code too much, you could
do following changes to the first and second divs
display: flex;
Desired width, e.g. 2*362
margin: auto;
Following to first-row-1, first-row-2 and the same for second row
delete width and height attributes (or change height to min-height for design purposes)
flex: 1 0 0;
I am making website in html and css and I have a problem. In my css file I made id "full" which set wooden background after sidebar and it should continue on all page. In my class "picture" I made 80% width white panel - so there should be 80% white background in the middle and 10% edges should be wooden. It works correctly untill my article section, where I added some images of pizzeria. Immediately there is no wooden edges, only white. I don´t understand because my "full" id and "picture" class continue untill end of the body. Could somebody see where is error please?
Image showing error
* {
padding: 0;
margin: 0;
border: 0;
}
.container {
margin: auto;
overflow: hidden;
width: 100%;
}
#full {
background-image: url("http://newallpaper.com/wp-content/uploads/2014/01/Dark-Wood-620x387.jpg");
}
.picture {
margin: auto;
width: 80%;
background: white;
}
#pizzaObrazok {
background-image: url("img/pizzaCompleted.png");
width: 100%;
height: 210px;
margin: 0px;
}
nav {
float: left;
margin-left: 2px;
width: 100%;
height: 32px;
}
ul {
float: left
}
li {
display: inline;
border: 4px solid black;
font-size: 24px;
padding: 10px 64px;
background-color: #990000;
color: #ffffff;
}
li a {
color: #ffffff;
text-decoration: none;
padding-top: 8px;
padding-bottom: 5px;
vertical-align: middle;
}
#imgPizza {
width: 59%;
height: 270px;
padding-left: 190px;
padding-top: 30px;
padding-bottom: 30px;
}
article p {
font-size: 120%;
font-family: fantasy;
text-align: center;
margin-right: 160px;
}
#imgPizza2 {
width: 30%;
height: 270px;
position: absolute;
transform: rotate(345deg);
margin-top: 100px;
margin-left: 50px;
border: 6px solid red;
}
#imgPizza3 {
width: 30%;
height: 270px;
position: absolute;
margin-left: 390px;
margin-top: 100px;
transform: rotate(15deg);
border: 6px solid red;
}
#phone {
border: 2px solid black;
margin-top: 150px;
margin-right: 180px;
padding: 5px;
position: absolute;
display: inline;
text-align: center;
background: #ff4d4d;
}
<header>
<div id="pizzaObrazok">
</div>
</header>
<div id="full">
<section id="navigation">
<div class="container">
<nav>
<ul>
<li>ÚVOD</li>
<li>FOTO</li>
<li>JEDÁLNY LÍSTOK</li>
<li>KDE NÁS NÁJDETE</li>
<li>NÁZORY</li>
</ul>
</nav>
</div>
 
</section>
<div class="picture">
<img id="imgPizza" src="img/pizzacheese.jpg">
<aside id="phone">
<h2>Telefónne číslo:</h2>
<h2> 0905 741 963</h2>
</aside>
</div>
 
<div class="picture">
<article>
<p>U nás dostanete najchutnejšiu pizzu z výlučne kvalitných surovín</p>
<img id="imgPizza2" src="https://cdn.vox-cdn.com/uploads/chorus_image/image/50289897/pizzeria_otto.0.0.jpg">
<img id="imgPizza3" src="https://media-cdn.tripadvisor.com/media/photo-s/09/bc/74/79/pizzeria-du-drugstore.jpg">
</article>
</div>
</div>
You have your elements "#imgPizza2" and "#imgPizza3" whit position absolute outside your "#full" wrapper. You can do various things to achive the effect you are looking for but depends of many others things.
I think the simpliest way is to put your background image in to the body and not in the warpper "#full" or change the postion of your images among others.
body {
background-image: url("http://newallpaper.com/wp-content/uploads/2014/01/Dark-Wood-620x387.jpg");
}
It looks like the wood background is 620 x 387, so my first thought is that it is big enough to cover the first section but not the articles. Maybe add background-repeat: repeat-y; to your #full class and see if the wood border spreads further down the page.
I'm trying to center a text between two floating divs. The problem is, that the text does not center properly, even though I followed every step I could find online.
Here's the code I used to try to accomplish my goal:
.EditingApp-head {
background-color: #222;
width: 100%;
overflow: auto;
}
.EditingApp-head-logo {
float: left;
overflow: auto;
width: 10%;
}
.EditingApp-head-logo-image {
height: 40px;
margin-top: 4px;
float: left;
clear: none;
}
.EditingApp-head-logo-text {
float: left;
margin-left: 5px;
color: white;
}
.EditingApp-head-title {
text-align: center;
color: white;
margin-left: auto;
margin-right: auto;
}
.EditingApp-head-end {
float: right;
width: 10%;
}
<div className="EditingApp">
<div className="EditingApp-head">
<div className="EditingApp-head-logo">
<img src={logo} className="EditingApp-head-logo-image" alt="logo" />
<p className="EditingApp-head-logo-text">SyncPad</p>
</div>
<div className="EditingApp-head-end" />
<p className="EditingApp-head-title">Title</p>
</div>
<div>
<p style={{textAlign: "center"}}>center</p>
</div>
</div>
The text 'Title' centers slightly to the right, so it somehow ignores the right div.
Does anyone see the problem?
Put <center></center> around your paragraph and if i understand well it will help.
After some playing around, I got it to work. Thanks to all who tried to help me. Here's the final CSS:
.EditingApp-head {
background-color: #222;
width: 100%;
display: flex;
flex-flow: row wrap;
}
.EditingApp-head-logo {
float: left;
overflow: auto;
width: 10%;
}
.EditingApp-head-logo-image {
height: 40px;
margin-top: 4px;
float: left;
}
.EditingApp-head-logo-text {
margin-left: 5px;
color: white;
}
.EditingApp-head-title {
text-align: center;
color: white;
margin-left: auto;
margin-right: auto;
}
.EditingApp-head-end {
float: right;
width: 10%;
}
It's because of the floated content. The inline content in your p is going to wrap around the floated content, which will offset it depending on the width of the floated content. To center the title p, apply margin: 0 10% so that the inline content in the p isn't affected by the surrounding floated content.
.EditingApp-head {
background-color: #222;
width: 100%;
overflow: auto;
}
.EditingApp-head-logo {
float: left;
overflow: auto;
width: 10%;
}
.EditingApp-head-logo-image {
height: 40px;
margin-top: 4px;
float: left;
clear: none;
}
.EditingApp-head-logo-text {
float: left;
margin-left: 5px;
color: white;
}
.EditingApp-head-title {
text-align: center;
color: white;
width: 80%;
float: left;
}
<div class="EditingApp">
<div class="EditingApp-head">
<div class="EditingApp-head-logo">
<img src={logo} class="EditingApp-head-logo-image" alt="logo" />
<p class="EditingApp-head-logo-text">SyncPad</p>
</div>
<p class="EditingApp-head-title">Title</p>
</div>
</div>