Exactly the div tag should be place in right hand side but this is placed in left hand side only in firefox.
My page looks fine in any other browser but in firefox the page looks differnet my code is
<div style="width: 400px; height: 280px; float:left; margin-left: 15px;margin-top: 3px">
<div class="slider-wrap">
<div id="main-photo-slider" class="csw">
<div class="panelContainer">
<div class="panel" title="Panel 1">
<div class="wrapper">
<img src="image/forslider/slider1.jpg" alt="" style="border-style: solid; height: 266px; width: 392px;"/>
</div>
</div>
<div class="panel" title="Panel 2">
<div class="wrapper">
<img src="image/forslider/slider2.jpg" alt="" style="border-style: solid; height: 266px; width: 392px;"/>
</div>
</div>
<div class="panel" title="Panel 3">
<div class="wrapper">
<img src="image/forslider/slider3.jpg" alt="" style="border-style: solid; height: 266px; width: 392px;"/>
</div>
</div>
<div class="panel" title="Panel 4">
<div class="wrapper">
<img src="image/forslider/slider4.jpg" alt="" style="border-style: solid; height: 266px; width: 392px;"/>
</div>
</div>
<div class="panel" title="Panel 5">
<div class="wrapper">
<img src="image/forslider/slider5.jpg" alt="" style="border-style: solid; height: 266px; width: 392px;"/>
</div>
</div>
<div class="panel" title="Panel 6">
<div class="wrapper">
<img src="image/forslider/slider6.jpg" alt="" style="border-style: solid; height: 266px; width: 392px;"/>
</div>
</div>
</div>
</div>
</div>
</div>
the div tag must be placed in right hand side.
Try to change from float:left; to float:right; in the first div
Try something like this:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>align</title>
<style type="text/css">
body {
margin: 0px;
padding: 0px;
}
#right {
text-align: left;
width: 200px;
position:absolute;
right:1%;
background-color: blue;
}
</style>
</head>
<body>
<div id="right">Some Text</div>
</body>
</html>
Related
I have a simple div that simulates table with images that would look like and some styling,
I managed to use CSS to fit images into container width (container as browser or another div), but I am really having hard time with height, SO is it possible to make pictures fit width and height that way?
.cabinet {
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
min-height: 100vh;
}
.module {
display: table-cell;
}
.module button {
border-color: black;
border-style: solid;
border-width: thin;
}
.module img {
width: 100%;
}
<div class="cabinet">
<div class="rack">
<div class="module">
<button>
<img src="https://i.pinimg.com/236x/f0/8b/33/f08b339a1cfe789e5e5d725fee58f53d--futuristic-architecture-amazing-architecture.jpg" />
</button>
</div>
<div class="module">
<button>
<img src="https://i.pinimg.com/236x/f0/8b/33/f08b339a1cfe789e5e5d725fee58f53d--futuristic-architecture-amazing-architecture.jpg" />
</button>
</div>
<div class="module">
<button>
<img src="https://i.pinimg.com/236x/f0/8b/33/f08b339a1cfe789e5e5d725fee58f53d--futuristic-architecture-amazing-architecture.jpg" />
</button>
</div>
<div class="module">
<button>
<img src="https://i.pinimg.com/236x/f0/8b/33/f08b339a1cfe789e5e5d725fee58f53d--futuristic-architecture-amazing-architecture.jpg" />
</button>
</div>
</div>
<div class="rack">
<div class="module">
<button>
<img src="https://i.pinimg.com/236x/f0/8b/33/f08b339a1cfe789e5e5d725fee58f53d--futuristic-architecture-amazing-architecture.jpg" />
</button>
</div>
<div class="module">
<button>
<img src="https://i.pinimg.com/236x/f0/8b/33/f08b339a1cfe789e5e5d725fee58f53d--futuristic-architecture-amazing-architecture.jpg" />
</button>
</div>
<div class="module">
<button>
<img src="https://i.pinimg.com/236x/f0/8b/33/f08b339a1cfe789e5e5d725fee58f53d--futuristic-architecture-amazing-architecture.jpg" />
</button>
</div>
<div class="module">
<button>
<img src="https://i.pinimg.com/236x/f0/8b/33/f08b339a1cfe789e5e5d725fee58f53d--futuristic-architecture-amazing-architecture.jpg" />
</button>
</div>
</div>
</div>
I have refactored your code a bit. Removed unnecessary HTML and CSS . See if this is the result you want.
.cabinet {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 1px;
}
img {
width: 100%;
object-fit: cover;
border: 1px solid #000;
}
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<div class="cabinet">
<div class="module">
<img
src="https://i.pinimg.com/236x/f0/8b/33/f08b339a1cfe789e5e5d725fee58f53d--futuristic-architecture-amazing-architecture.jpg"
/>
</div>
<div class="module">
<img
src="https://i.pinimg.com/236x/f0/8b/33/f08b339a1cfe789e5e5d725fee58f53d--futuristic-architecture-amazing-architecture.jpg"
/>
</div>
<div class="module">
<img
src="https://i.pinimg.com/236x/f0/8b/33/f08b339a1cfe789e5e5d725fee58f53d--futuristic-architecture-amazing-architecture.jpg"
/>
</div>
<div class="module">
<img
src="https://i.pinimg.com/236x/f0/8b/33/f08b339a1cfe789e5e5d725fee58f53d--futuristic-architecture-amazing-architecture.jpg"
/>
</div>
<div class="module">
<img
src="https://i.pinimg.com/236x/f0/8b/33/f08b339a1cfe789e5e5d725fee58f53d--futuristic-architecture-amazing-architecture.jpg"
/>
</div>
<div class="module">
<img
src="https://i.pinimg.com/236x/f0/8b/33/f08b339a1cfe789e5e5d725fee58f53d--futuristic-architecture-amazing-architecture.jpg"
/>
</div>
<div class="module">
<img
src="https://i.pinimg.com/236x/f0/8b/33/f08b339a1cfe789e5e5d725fee58f53d--futuristic-architecture-amazing-architecture.jpg"
/>
</div>
<div class="module">
<img
src="https://i.pinimg.com/236x/f0/8b/33/f08b339a1cfe789e5e5d725fee58f53d--futuristic-architecture-amazing-architecture.jpg"
/>
</div>
</div>
</body>
</html>
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.
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>
I have dynamic div boxes created in a website, I want to have 4 boxes in each row using bootstrap, that's working, but each box has some text at the bottom, the problem is that when the text is too long and it creates a new line, the div expands but the box underneath this div moves to the right, instead of moving all the row underneath down.
This is the html:
<div class="row">
<div ng-repeat=""class="col-sm-3 album-art"> //loop to create the boxes
<div class="thumb">
<div class="box">
<span class="play" ng-click="">►</span>
<div class="overlay"></div>
</div>
<img src= height="200" width="200">
<p>text</p>
<p><i>text</i></p>
</div>
</div>
And this is the css I have:
.album-art{
padding-bottom: 20px;
padding-top: 20px;
margin-bottom: 10px;
}
.thumb {
position: relative;
}
.thumb .box {
position: absolute;
top: 0;
display: block;
width: 200px;
height: 200px;
text-align: center;
text-decoration: none;
cursor: pointer;
}
Basically what I'd need is that when the text overflows and creates a new line, the row below the current row moves down and not move every element to the right.The problem seems to be in the "album-art" class, since I removed all the other classes and the problem still there.
thanks
EDIT: I've added images for a better explanation
This is when everything is normal
But when the text is longer
EDIT2: I put an example here: jsfiddle.net/qgo7a701 you might have to expand the result area to the left in order to see 4 squares per row
I don't understand you question very well , but in bootstrap the row divided to 12 cell, and you can define divs in row with different sizes.and you can use col-[xl,lg,md,sm,xs]-[1 to 12] classes for that. you can look to this link :
http://getbootstrap.com/examples/grid/
for you example below i have tried to make two row with two boxes and i only break the text to prevent it to overflow to next div
.album-art{
padding-bottom: 20px;
padding-top: 20px;
margin-bottom: 10px;
}
p{
word-break: break-all;
}
.thumb {
position: relative;
}
.thumb .box {
position: absolute;
top: 0;
display: block;
width: 200px;
height: 200px;
text-align: center;
text-decoration: none;
cursor: pointer;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="row">
<div ng-repeat=""class="col-sm-3 album-art">
//loop to create the boxes
<div class="thumb">
<div class="box">
<span class="play" ng-click="">►</span>
<div class="overlay">
</div>
</div>
<img src= height="200" width="200"/>
<p style="">text helooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</p>
<p><i>text</i></p>
</div>
</div>
<div ng-repeat=""class="col-sm-3 album-art">
//loop to create the boxes
<div class="thumb">
<div class="box">
<span class="play" ng-click="">►</span>
<div class="overlay">
</div>
</div>
<img src= height="200" width="200"/>
<p style="">text heloooooooooooooooooooooooooooooooooooooooooo</p>
<p><i>text fffffffffffffffffffffffffffffffffffffffffffffffddddddddddddddsssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssdddddddddddddddddddddddddddddddddddd fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff</i></p>
</div>
</div>
</div>
<div class="row">
<div ng-repeat=""class="col-sm-3 album-art">
//loop to create the boxes
<div class="thumb">
<div class="box">
<span class="play" ng-click="">►</span>
<div class="overlay">
</div>
</div>
<img src= height="200" width="200"/>
<p style="">text helooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</p>
<p><i>text</i></p>
</div>
</div>
<div ng-repeat=""class="col-sm-3 album-art">
//loop to create the boxes
<div class="thumb">
<div class="box">
<span class="play" ng-click="">►</span>
<div class="overlay">
</div>
</div>
<img src= height="200" width="200"/>
<p style="">text helooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</p>
<p><i>text</i></p>
</div>
</div>
</div>
I tested what you did and it was working as intended. You used 1 row for the complete collection of cols, so they behaved as intended. To change that, you must force a grouping of cols and you can do it like this:
(Resume here:
- Add div class="col-sm-12" style="display: table" and close it after 4 of your "col-sm-3 divs". Add another one for the rest of the "col-sm-3 divs". Everything should be inside the div class="row". (I would have used two rows every 4 "col-sm-3 divs" but, is your code).
- Change the "style" into a css, include it in your stylesheet, add the class to the div. End.
.album-art {
padding-bottom: 20px;
padding-top: 20px;
margin-bottom: 10px;
}
.thumb {
position: relative;
}
.thumb .box {
position: absolute;
top: 0;
display: block;
width: 200px;
height: 200px;
text-align: center;
text-decoration: none;
cursor: pointer;
}
<!DOCTYPE html>
<html>
<head>
<title>Untitled Document</title>
<meta charset="UTF-8">
<meta name="description" content="">
<meta name="keywords" content="">
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" type="text/css" rel="stylesheet">
<style>
.album-art {
padding-bottom: 20px;
padding-top: 20px;
margin-bottom: 10px;
}
.thumb {
position: relative;
}
.thumb .box {
position: absolute;
top: 0;
display: block;
width: 200px;
height: 200px;
text-align: center;
text-decoration: none;
cursor: pointer;
}
</style>
</head>
<body>
<div class="row">
<div class="col-sm-12" style="display: table;">
<div class="col-sm-3" style="padding-bottom: 20px; padding-top: 20px">
<div class="thumb">
<div class="box">
<span class="play"></span>
<div class="overlay"></div>
</div>
<img src="#" height="50" width="50" />
<p style="color: black">tedddddddxxxx ewhuiofhew hfiuhiufw shidfshksdhxfffffffffffffxxxxxddddddxt</p>
</div>
</div>
<div class="col-sm-3" style="padding-bottom: 20px; padding-top: 20px">
<div class="thumb">
<div class="box">
<span class="play"></span>
<div class="overlay"></div>
</div>
<img src="#" height="50" width="50" />
<p style="color: black">text</p>
</div>
</div>
<div class="col-sm-3" style="padding-bottom: 20px; padding-top: 20px">
<div class="thumb">
<div class="box">
<span class="play"></span>
<div class="overlay"></div>
</div>
<img src="#" height="50" width="50" />
<p style="color: black">text</p>
</div>
</div>
<div class="col-sm-3" style="padding-bottom: 20px; padding-top: 20px">
<div class="thumb">
<div class="box">
<span class="play"></span>
<div class="overlay"></div>
</div>
<img src="#" height="50" width="50" />
<p style="color: black">text</p>
</div>
</div>
</div>
<div class="col-sm-12" style="display: table;">
<div class="col-sm-3" style="padding-bottom: 20px; padding-top: 20px">
<div class="thumb">
<div class="box">
<span class="play"></span>
<div class="overlay"></div>
</div>
<img src="#" height="50" width="50" />
<p style="color: black">text</p>
</div>
</div>
<div class="col-sm-3" style="padding-bottom: 20px; padding-top: 20px">
<div class="thumb">
<div class="box">
<span class="play"></span>
<div class="overlay"></div>
</div>
<img src="#" height="50" width="50" />
<p style="color: black">text</p>
</div>
</div>
<div class="col-sm-3" style="padding-bottom: 20px; padding-top: 20px">
<div class="thumb">
<div class="box">
<span class="play"></span>
<div class="overlay"></div>
</div>
<img src="#" height="50" width="50" />
<p style="color: black">text</p>
</div>
</div>
<div class="col-sm-3" style="padding-bottom: 20px; padding-top: 20px">
<div class="thumb">
<div class="box">
<span class="play"></span>
<div class="overlay"></div>
</div>
<img src="#" height="50" width="50" />
<p style="color: black">text</p>
</div>
</div>
</div>
</div>
</body>
</html>
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.