Iam using Ionic framework to develop mobile application. I want to achieve
the result shown in the picture below, where the text under each title should be in a box (using ng-hide and ng-show).
But what I got is this mess:
I could not fix it.
Here is my code so far:
<div class="contenu">
<div class="card-left">
<div class="box1">
MyRhoom:
<div class="boxed" ng-show="collapsed" >I am description</div>
</div>
<div class="box2">
Talent:
<div class="boxed" ng-show="collapsed2" >I am description</div>
</div>
</div>
<div align="center">
<img src="img/Image2.jpg" class="im">
<div class="box3">
WTR:
<div class="boxed" ng-show="collapsed3" >I am description</div>
</div>
</div>
<div class="card-right">
<div class="box4">
Skype:
<div class="boxed" ng-show="collapsed4">I am description</div>
</div>
<div class="box5">
Ulysse:
<div class="boxed" ng-show="collapsed5">I am description</div>
</div>
<div class="box6">
Egencia:
<div class="boxed" ng-show="collapsed6" >I am description</div>
</div>
</div>
</div>
</div>
CSS
#media only screen and (max-width: 720px) {
.text1 {
position: absolute;
display: inline-block;
left: 5%;
top: 60%;
font-size: 14pt;
}
.text2 {
position: absolute;
display: inline-block;
left:80%;
top: 60%;
font-size: 14pt;
}
.text3 {
position: absolute;
display: inline-block;
left: 5%;
top: 80%;
font-size: 14pt;
}
.text4 {
position: absolute;
display: inline-block;
left: 38%;
top: 60%;
font-size: 14pt;
}
.text5{
position: absolute;
display: inline-block;
left: 80%;
top: 80%;
font-size: 14pt;
}
.text6 {
position: absolute;
display: inline-block;
left: 38%;
top: 98%;
font-size: 14pt;
}
}
I put each box and its description in a div together. What am I missing?
Thank you for your help.
**I believe it will work for you.....**
Note: i have used image as a background so do not forget to remove text from image.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Solution provided by Areraj.in</title>
<style>
/*#media only screen and (max-width: 720px) {*/
.box1{position: absolute;top: 65px;left: 47px;}
.box2{position: absolute;top: 250px;left: 57px;}
.box3{position: absolute;top: 18px;left: 177px;}
.box4{position: absolute;top: 46px;left: 316px;}
.box5{position: absolute;top: 134px;left: 353px;}
.box6{position: absolute;top: 241px;left: 336px;}
.contenu{position:relative; width:435px; height:292px; overflow:hidden; background:url("http://i.stack.imgur.com/YNuI9.png");}
/*}*/
</style>
</head>
<body>
<div class="contenu">
<div class="box1">
MyRhoom:
<div class="boxed" ng-show="collapsed" >I am description</div>
</div>
<div class="box2">
Talent:
<div class="boxed" ng-show="collapsed2" >I am description</div>
</div>
<div class="box3">
WTR:
<div class="boxed" ng-show="collapsed3" >I am description</div>
</div>
<div class="box4">
Skype:
<div class="boxed" ng-show="collapsed4">I am description</div>
</div>
<div class="box5">
Ulysse:
<div class="boxed" ng-show="collapsed5">I am description</div>
</div>
<div class="box6">
Egencia:
<div class="boxed" ng-show="collapsed6" >I am description</div>
</div>
</div>
</body>
</html>
Related
I want to create progress bar as in below image.
I do not know how to create this. Any help would be appreciated.
Here's a way to do it with Bootstrap:
.bar-step {
position: absolute;
margin-top: -20px;
z-index: 1;
font-size: 12px;
}
.label-txt {
float: left;
}
.label-line {
float: right;
background: #000;
height: 50px;
width: 1px;
margin-left: 5px;
}
.label-percent {
float: right;
margin-left: 5px;
}
<head>
<link href="https:////maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
</head>
<body>
<div class="container">
<div class="row"><br>
<div class="col-xs-12">
<div class="progress">
<div class="bar-step" style="left: 100%">
<div class="label-txt">Level 3</div>
<div class="label-percent"></div>
<div class="label-line"></div>
</div>
<div class="bar-step" style="left: 33%">
<div class="label-txt">Level 1</div>
<div class="label-percent"></div>
<div class="label-line"></div>
</div>
<div class="bar-step" style="left: 33%">
<div class="label-txt">Testing 123</div>
<div class="label-percent"></div>
<div class="label-line"></div>
</div>
<div class="progress-bar progress-bar-success" style="width: 46%;"></div>
</div>
</div>
</div>
</div>
</body>
Credit goes to timgomm https://bootsnipp.com/snippets/1KnKq
NOTE: I am just guessing the percentages - you will need to edit the percentages in the inline styles to suit you.
I have this simple HTML template, I have added height instead of having content.
What I am after is to align "Delivery" and "Contact Us" div below "About Us" div and "Returns Policy" on the right as it is.
#import url(https://fonts.googleapis.com/css?family=News+Cycle);
body {
font-family: 'News Cycle', sans-serif;
color: #666;
line-height: 1.3;
}
strong,
b {
font-weight: 900;
}
h3 {
font-weight: bold;
border-bottom: 1px solid #e2e2e2;
}
p,
ul li {
font-size: 14px;
font-weight: lighter;
}
#logo,
#product {
float: left;
width: 100%;
}
#title,
#logo {
padding: 0 1% 0 1%;
margin: 1%;
}
#product_description,
#about_us,
#delivery,
#returns_policy,
#contact_us {
float: left;
width: 45%;
padding: 0 1% 0 1%;
margin: 1%;
border-radius: 5px;
border: 1px #e2e2e2 solid;
background-color: #f5fafa;
}
#product_image {
text-align: center;
}
<div id="logo">
</div>
<div id="product">
<div id="title">
<h1>XYZ</h1>
</div>
<div id="product_image">
</div>
<div id="product_description">
<h3>Product Description</h3>
</div>
</div>
<div id="about_us" style="height:600px;">
<h3>About Us</h3>
<div class="content">
</div>
</div>
<div id="delivery" style="height:200px;">
<h3>Delivery</h3>
<div class="content">
</div>
</div>
<div id="returns_policy" style="height:800px;">
<h3>Returns Policy</h3>
<div class="content">
</div>
</div>
<div id="contact_us" style="height:100px;">
<h3>Contact Us</h3>
<div class="content">
</div>
</div>
html:
<div id="logo">
</div>
<div id="product">
<div id="title">
<h1>XYZ</h1>
</div>
<div id="product_image">
</div>
<div id="product_description">
<h3>Product Description</h3>
</div>
</div>
<div class="leftCol">
<div id="about_us" style="height:600px;">
<h3>About Us</h3>
<div class="content">
</div>
</div>
<div id="delivery" style="height:200px;">
<h3>Delivery</h3>
<div class="content">
</div>
</div>
</div>
<div class="rightCol">
<div id="returns_policy" style="height:800px;">
<h3>Returns Policy</h3>
<div class="content">
</div>
</div>
<div id="contact_us" style="height:100px;">
<h3>Contact Us</h3>
<div class="content">
</div>
</div>
</div>
add to css
.leftCol { width: 50%; float: left; }
.rightCol { width: 50%; float: right; }
This might seem rather easy to solve, but I couldn't find an answer on stackoverflow nor anywhere on the internet to solve my little problem..
I need these http://prntscr.com/a0y8jm words to be more in the middle of the screen, and I need to be able to put the words more appart from eachother, I first used Padding, but I don't really think that works out so well, and the words aren't responding on padding anymore eighter (because I made the layout different)
anyone got any tips on how to make this work, and if you have some tips for the other parts of my code, those are always welcome too. I am not in programming that long yet, so I could use all the information I can get :)
This is my code,
body, html {
margin-left: 10%;
margin-right: 10%;
padding: 0px;
height: 100%;
font-family: georgia, "Comic Sans MS";
background-color: #f0f0f0;
}
header {
height: 5%;
border-bottom: thick solid grey;
}
.img {
width: 25%;
height: 30%;
background-color:#f0f0f0;
float: left;
}
.antwoord {
float: left;
width: 95%;
height: 25px;
background-color: white;
border-style: solid;
border-color: #000000;
border-width: 4px;
}
.move1 {
}
.move2 {
margin-top: 12.5%
}
.move4 {
margin-top: 19%
}
.move5 {
margin-top: 33.5%
}
.move6 {
margin-top: 20.8%
}
.move7 {
margin-top: 37.5%
}
.word, .word .tekst, .word p {
display: inline;
}
.my-row{
clear: both;
}
.answers .word, .answers .word2{
float: left;
padding: 3px;
width: 100px;
}
footer {
border-top: thick solid grey;
height: 5%;
display : table-row;
vertical-align : bottom;
}
.points {
float: right;
}
.container {
height:100%;
border-collapse:collapse;
display : table;
}
.igen {
font-size: 25px;
font-weight: bold;
}
.sprint {
float: right;
}
.copyright {
position: relative;
bottom: 20px;
left: 65px;
font-size: 10px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Words</title>
<link rel="stylesheet" href="css/style.css" media="screen" title="no title" charset="utf-8">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<script>
</script>
</head>
<body>
<header>
<span class="fa fa-refresh" style="font-size:25px;"></span><span class="igen"> igen</span>
<span class="points"><i class="fa fa-thumbs-o-up" style="font-size:24px"></i>Rigtige: 0 <i class="fa fa-thumbs-o-down" style="font-size:24px"></i>Forkerte: 0</span>
</header>
<div class="container">
<div class="img" id="img1">
<div class="plaatje" id="plaatje1"><center><img src="img/cat.jpg" alt="cat" width="50%;"></div>
<div class="move1"><div class="antwoord" id="antwoord1"></div></div>
</div>
<div class="img" id="img2">
<div class="plaatje" id="plaatje1"><center><img src="img/beak.jpg" alt="beak" width="50%;"></div>
<div class="move2"><div class="antwoord" id="antwoord2"></div></div>
</div>
<div class="img" id="img3">
<div class="plaatje" id="plaatje3"><center><img src="img/spoon.jpg" alt="spoon" width="50%;"></div>
<div class="move3"><div class="antwoord" id="antwoord3"></div></div>
</div>
<div class="img" id="img4">
<div class="plaatje" id="plaatje4"><center><img src="img/milk.jpg" alt="milk" width="50%;"></div>
<div class="move4"><div class="antwoord" id="antwoord4"></div></div>
</div>
<div class="img" id="img5">
<div class="plaatje" id="plaatje5"><center><img src="img/egg.jpg" alt="egg" width="50%;"></div>
<div class="move5"><div class="antwoord" id="antwoord5"></div></div>
</div>
<div class="img" id="img6">
<div class="plaatje" id="plaatje6"><center><img src="img/thee.jpg" alt="tea" width="50%;"></div>
<div class="move6"><div class="antwoord" id="antwoord6"></div></div>
</div>
<div class="img" id="img7">
<div class="plaatje" id="plaatje7"><center><img src="img/meel.jpg" alt="meel" width="50%;"></div>
<div class="move7"><div class="antwoord" id="antwoord7"></div></div>
</div>
<div class="img" id="img8">
<div class="plaatje" id="plaatje8"><center><img src="img/passport.jpg" alt="passport" width="50%;"></div>
<div class="move8"><div class="antwoord" id="antwoord8"></div></div>
</div>
<div class="answers">
<div class="my-row">
<div class="word" id="word1">
<div class="tekst" id="tekst1"> <p>Cat</p> </div>
</div>
<div class="word" id="word2">
<div class="tekst" id="tekst2"> <p>spoon</p> </div>
</div>
<div class="word" id="word3">
<div class="tekst" id="tekst3"> <p>meal</p> </div>
</div>
<div class="word" id="word4">
<div class="tekst" id="tekst4"> <p>passport</p> </div>
</div>
</div>
<div class="my-row">
<div class="word2" id="word5">
<div class="tekst" id="tekst5"> <p>egg</p> </div>
</div>
<div class="word2" id="word6">
<div class="tekst" id="tekst6"> <p>beak</p> </div>
</div>
<div class="word2" id="word7">
<div class="tekst" id="tekst7"> <p>tea</p> </div>
</div>
<div class="word2" id="word8">
<div class="tekst" id="tekst8"> <p>milk</p> </div>
</div>
</div>
</div>
<footer>
<img class="dansk" id="dansk" src="img/dansk2.jpg" alt="dansk" />
<img class="sprint" id="sprint" src="img/sprint2.png" alt="sprint" />
<center><span class="copyright"> ©2013 laerdansk / FC-Sprint² Leerbedrijf bronnen </span></center>
</footer>
</body>
</html>
So I'd like my footer to adjust and stay on the bottom of the page no matter the height of the content which is dynamic
Below is the CSS for the body, wrapper and footer .. the footer doesn't not stay in the bottom when the content is too long and gets display in the middle of the page when you have to scroll
body, html{
margin:0px;
padding:0px;
width:100%;
height:100%;
background:#FFFFFF;
}
#wrapper{
position:relative;
top:0px;
left:0px;
width:100%;
padding:0px;
min-height:100%;
overflow-x:hidden;
}
#footer{
position:absolute;
bottom:0px;
left:150px;
width:1600px;
height:500px;
background:blue;
}
...
<div id="wrapper">
<div id="header"></div>
<div id="logo"><img src="images/u176.png" class="logo_pic" style="outline: none;"></div>
<div id="search_bar"><input type="text" name="search_bar" class="search" /></div>
<div id="search_icon"><img src="images/u205.png" width="28px" height="28px" /></div>
<div id="become_a_chef"><span id="become_title">Become </span></div>
<div id="login">Log in</div>
<div id="sign_up">Sign up</div>
<div id="tap-container"><img id="tap-pic" class="food_container_pic" src="images/today_menu/u35.png" /></div>
<div id="tap-content"></div>
<div class="column1">
<div class="tap-links">Become a member</div>
<div class="tap-links">Sign up</div>
<div class="tap-links">Log in</div>
<div class="tap-links">Home</div>
</div>
<div class="column2">
<div class="tap-links">Search</div>
<div class="tap-links">Download the App</div>
<div class="tap-links">How it works</div>
<div class="tap-links">Help</div>
</div>
<div id="chef-rating-responsive">
<div class="subinfo_container3"><img class="food_container_pic" src="images/fusion/u1837.jpg" /></div>
<div class="subinfo_container4">A</div>
<div class="subinfo_container5">Open Now</div>
<div class="subinfo_container6">More...</div>
</div>
<div id="cover_picture_container"><img class="food_container_pic" src="images/u4.jpg" /></div>
<div id="profile_picture_container"><img id="profile_picture" class="img" src="<?php echo $picture;?>"></div>
<div id="chef_description_container">
<div id="kitchen_name"><span id="kitchen_title"><?php echo $name;?></span></div>
<div id="chef_description_summary"><?php echo description;?></div>
<div id="schedule_info_container">
<div class="subinfo_container">
<img id="chef_rating" src="images/fusion/u1837.jpg" width="186px" height="35px">
<span id="number_reviews">64 reviews</span>
</div>
<div class="subinfo_container"><span id="open_now">Open Now</span></div>
<div class="subinfo_container"><span id="chef_location">Chef Location</span></div>
<div class="subinfo_container2"><span id="letter_grade">A</span><span id="chef_grade">since Nov.2016</span></div>
<div class="subinfo_container2">
<div id="clock"><img id="u1341_img" src="images/u1341.png" class="full" ></div>
<span id="schedule_hours"></span>
</div>
<div class="subinfo_container2"><span id="chef_contact">Chef contact</span></div>
</div>
</div>
<div class="today_menu">
<div class="space"></div>
</div>
<div id="footer">
<div class="company_footer">
<div class="title">Company</div>
<div class="column_content_footer">About</div>
<div class="column_content_footer">Careers</div>
<div class="column_content_footer">Press</div>
<div class="column_content_footer">Blog</div>
<div class="column_content_footer">About</div>
<div class="column_content_footer">Help</div>
<div class="column_content_footer">Policies</div>
<div class="column_content_footer">Disaster</div>
<div class="column_content_footer">Terms & Privacy</div>
</div>
<div class="discover_footer">
<div class="title">Discover</div>
<div class="column_content_footer">Trust & Safety</div>
<div class="column_content_footer">Invite friends</div>
<div class="column_content_footer">Gift card</div>
<div class="column_content_footer">pricks</div>
<div class="column_content_footer">Mobile</div>
<div class="column_content_footer">Events support</div>
<div class="column_content_footer">Travel</div>
<div class="column_content_footer">Nearby</div>
</div>
<div class="kitchening_footer">
<div class="title"></div>
<div class="column_content_footer"></div>
<div class="column_content_footer">Serving</div>
<div class="column_content_footer">Responsible</
</div>
<div class="social_media_buttons">Hey</div>
</div>
</div>
</div>
html, body {
padding: 0;
margin: 0;
background: #fff;
}
#wrapper {
position: relative;
width: 100%;
height: 100%;
padding-bottom: 400px;
box-sizing: border-box;
}
#footer {
z-index: 50;
position: fixed;
bottom: 0;
width: 100%;
height: 400px;
background: blue;
}
<div id="wrapper">
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<div id="footer">
</div>
</div>
This works perfectly fine for me (tweaked it a little bit). I'd advice you not to use fixed widths like 1600px, but to work with percentages and max-widths. Hope this helps
If your footer has a fixed height you could do something like this:
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
.force-min-height {
min-height: 100%;
position: relative;
}
.header {
background: grey;
}
.content {
/* padding being the same as footer height */
padding-bottom: 4em;
}
.footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 4em;
background: grey;
}
<div class="force-min-height">
<div class="header">Header</div>
<div class="content">
line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line
</div>
<div class="footer">Footer</div>
</div>
This is HTLM code. We click ctrl+P for we print we can view it on one page. But when we view it on Webview controller of Xcode. It shows on 2 pages. Any ideas help us. The html Content on below
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>StoryLeather</title>
<style>
body {
width: 100%;
/*background-color:green;*/
margin: 0px;
}
#top-div {
width: 100%;
}
#bottom-div {
width: 100%;
/*margin-top:40px;*/
}
.left-div {
float: left;
width: 45%;
/*background-color:pink;*/
margin-left: 5%;
}
.right-div {
float: right;
width: 45%;
/*background-color:blue;*/
margin-right: 5%;
text-align: center;
}
.text {
font-family: '微軟正黑體';
}
.number {
font-size: 35px;
margin-top: 20px;
}
.big-div {
width: 100%;
/*margin-top:30px;*/
}
.button {
width: 100%;
height: 40px;
margin-top: 10px;
}
.title-1 {
background-color: black;
width: 35%;
float: left;
border: none;
height: 29px;
color: white;
padding-top: 15px;
font-size: 13px;
}
#text-6 {
background-color: white;
width: 50%;
float: right;
height: 30px;
}
.line2 {
background-color: #a1a1a1;
height: 1px;
width: 100%;
margin-top: 10px;
}
.label {
margin-top: 30px;
font-size: 13px;
text-align: left;
}
.txt {
margin-top: 20px;
}
.img-f {
width: 50%;
float: left;
text-align: left;
margin-top: 15px;
}
.sign-r {
width: 50%;
float: right;
margin-top: 15px;
}
.line3 {
margin-top: 25px;
width: 100%;
height: 1px;
background-color: black;
}
.copy-text {
float: right;
/*margin-top:50px;*/
margin-right: 5%;
font-family: 'Microsoft JhengHei';
width: 45%;
text-align: right;
font-size: 5px;
}
.sizefont10 {
font-size: 10px;
}
.txt-right {
text-align: center;
font-weight: bold;
}
.footer {
font-size: 10px;
width: 100%;
margin-top: 30px;
}
.left-footer {
float: left;
/*margin-top:50px;*/
margin-left: 5%;
font-family: 'Microsoft JhengHei';
width: 45%;
}
.text-7 {
font-size: 13px;
}
.line {
height: 2px;
width: 100%;
background-color: black;
}
.img-Phone {
margin-top: 15px;
}
</style>
</head>
<body>
<div id="top-div">
<div class="left-div">
<div id="div-logo">
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSIkkJlwgDZDonmGAYOJgB0_895j4ocX-9gCxgLc90rLgOJHaNA" class="img-logo" style="max-height:50px;" />
</div>
<div class="text" style="font-weight:bold; /*margin-top:40px;*/ margin-top:10px; font-size:20px;">
STYLE 5C2
</div>
<div style="font-family:微軟正黑體; /*margin-top:20px;*/margin-top:10px; font-size:15px;">
IPhone 5C 硬殼式下蓋 客製化皮套
</div>
<div id="text-4" class="text" style="margin-top:10px;font-size:11px; width:100%;">
<div id="text-4-left" style="width:20%; float:left;">
- 外部皮料
<br/>- 備註
<br/>- 烙印選項
</div>
<div id="text-4-right" style="width:80%;float:left;">
十字紋 / A37-十字紋淺米白
<br/>[無填寫]
<br/>無需
</div>
</div>
<div style="clear:both;"></div>
<div class="img-Phone" style="width:100%;">
<img style="max-width:30%; float:left;" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSIkkJlwgDZDonmGAYOJgB0_895j4ocX-9gCxgLc90rLgOJHaNA" />
<img style="max-width:30%; float:right; margin-right:20%;" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSIkkJlwgDZDonmGAYOJgB0_895j4ocX-9gCxgLc90rLgOJHaNA" />
</div>
</div>
<div class="right-div">
<div id="div1">
<div class="text" style="margin-top:10px;font-size:15px;">
CUSTOM ORDERS
</div>
<div class="number" style="/*margin-top:30px;*/">
<div id="text-2" class="text" style="font-family:'Microsoft JhengHei';">
20140912
</div>
<div class="line">
</div>
<div id="text-3" class="text" style="font-family:'Microsoft JhengHei';">
A140912001
</div>
<div class="big-div">
<div class="button">
<div class="title-1">
客戶資訊
</div>
</div>
<div class="label">
<div class="label1">
<div class="txt">
姓名
</div>
<div class="line2">
</div>
</div>
<div class="label2">
<div class="txt">
電話
</div>
<div class="line2">
</div>
</div>
<div class="label3">
<div class="txt">
地址
</div>
<div class="line2">
</div>
</div>
</div>
<div class="sign">
<div class="img-f">
<img src="img2.png" style="width:40%;" />
</div>
<div class="sign-r">
<div class="text-7">訂購人確認 \/</div>
<div class="line3"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div style="clear:both;"></div>
<div class="footer">
<div class="left-footer">
- 經銷存聯 - 訂做商品下單後約30 天交件
</div>
<div class="copy-text">
COPYRIGHT 2014 PTOW KING CO. LTD ALL RIGHTS RESEARVED
</div>
</div>
<div style="clear:both;background-color:black; height:1px;"></div>
<div id="bottom-div">
<div class="left-div">
<div id="div-logo-2">
<img src="logo.png" class="img-logo" style="max-height:50px;" />
</div>
<div class="text" style="font-weight:bold;/* margin-top:40px;*/ margin-top:10px; font-size:20px;">
STYLE 5C2
</div>
<div style="font-family:微軟正黑體;/* margin-top:20px;*/margin-top:10px; font-size:15px;">
IPhone 5C 硬殼式下蓋 客製化皮套
</div>
<div id="text-4-2" class="text" style="margin-top:10px; font-size:11px;">
<div id="text-left-4-2" style="width:20%; float:left;">
- 外部皮料
<br/>- 備註
<br/>- 烙印選項
</div>
<div id="text-right-4-2" style="width:80%;float:left;">
十字紋 / A37-十字紋淺米白
<br/>[無填寫]
<br/>無需
</div>
</div>
<div style="clear:both;"></div>
<div class="img-Phone" style="width:100%;background-color:yellow;">
<img style="max-width:30%; float:left;" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSIkkJlwgDZDonmGAYOJgB0_895j4ocX-9gCxgLc90rLgOJHaNA" />
<img style="max-width:30%; float:right; margin-right:20%;" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSIkkJlwgDZDonmGAYOJgB0_895j4ocX-9gCxgLc90rLgOJHaNA" />
</div>
</div>
<div class="right-div">
<div id="div9">
<div class="text" style="/*margin-top:20px;*/ font-size:15px;">
CUSTOM ORDERS
</div>
<div class="number" style="/*margin-top:30px;*/">
<div id="text-2-2" class="text" style="font-family:'Microsoft JhengHei';">
20140912
</div>
<div class="line">
</div>
<div id="text-3-2" class="text" style="font-family:'Microsoft JhengHei';">
A140912001
</div>
<div class="big-div">
<div class="button">
<div class="title-1">
經銷商資訊
</div>
</div>
<div class="label">
<div class="label1">
<div id="big-text" style="width:100%; margin-top:25px;">
<div class="txt-left" style="float:left;">
門市名稱
</div>
<div class="txt-right">
神腦西門武昌店
</div>
</div>
<div style="clear:both;"></div>
<div class="line2">
</div>
</div>
<div class="label2">
<div id="big-text-2" style="width:100%; margin-top:25px;">
<div class="txt-left" style="float:left;">
聯絡電話
</div>
<div class="txt-right">
02-23610707
</div>
</div>
<div style="clear:both;"></div>
<div class="line2">
</div>
</div>
<div class="label3">
<div id="big-text-3" style="width:100%; margin-top:25px;">
<div class="txt-left" style="float:left;">
聯絡地址
</div>
<div class="txt-right">
台北市萬華區武昌街2段58號
</div>
</div>
<div style="clear:both;"></div>
<div class="line2">
</div>
</div>
</div>
<div class="sign">
<div class="img-f">
<img src="img2.png" style="width:40%;" />
</div>
<div class="sign-r">
<div class="text-7">經辦人確認 \/</div>
<div class="line3"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div style="clear:both;"></div>
<div class="footer">
<div class="left-footer">
- 客戶存聯 - 訂做商品下單後約30 天交件
</div>
<div class="copy-text">
COPYRIGHT 2014 PTOW KING CO. LTD ALL RIGHTS RESEARVED
</div>
</div>
</body>
</html>
Please check all
it is displaying like that because a web view of x-code is much smaller than a computers screen so to substitute it formats and registers it and makes it into 2-pages, there is nothing weird about it its just the way it is.