when I resize the browser window the particular div goes out of the main container
how to fix the issue
http://jsfiddle.net/48y2Q/1
http://jsfiddle.net/48y2Q/1/embedded/result/
<section id="main" style="background-color: #646464; padding: 0px;">
<div class="inner clearfix" style="background-color: white;">
<span style="color: #06546a; font-weight: bold; font-size: 14px; background-color: white;">Defie Cloud Buisness Solutions</span>helps companies of all sizes to enhance business operation, to refine the process and optimize technology, to reduce company expenses on IT maintenance, Hardware upgrade. And more importantly, to change the way buisness operate.
<div id="primary">
<section class="primary">
<ul style="width: 800px;">
<li style="padding-bottom: 5px; list-style: none; font-size: 14px;">
<img alt="squareList" style="margin-right: 10px;" id="logo" src="http://www.defie.co/designerImages/square_list.png">
All-in-One Business Management Solutions
</li>
<li style="padding-bottom: 5px; list-style: none; font-size: 14px;">
<img alt="squareList" style="margin-right: 10px;" id="logo" src="http://www.defie.co/designerImages/square_list.png">
Cloud-based File Management
</li>
<li style="padding-bottom: 5px; list-style: none; font-size: 14px;">
<img alt="squareList" style="margin-right: 10px;" id="logo" src="http://www.defie.co/designerImages/square_list.png">
Real-Time Access from any where, any time and on any devices
</li>
</ul>
</section>
</div>
</div>
</section>
</div>
</div>
The issue is coming from 2 separate places:
//Reduce width from 100% (line 815, bootstrap) because you need left margin so this can't be 100%.
.row-fluid {
width: 90%;
}
also reduce margin-left from 100px
<div class="row-fluid marketing" style="margin-top: 27px; margin-bottom: 0px; margin-left: 100px;">
to
<div class="row-fluid marketing" style="margin-top: 27px; margin-bottom: 0px; margin-left: 20px;">
Related
I'm creating a messenging website that look like Facebook Messenger as follow. The problem is that when user send a message that is shorter than 13 characters then the message box wrapped around will become longer than the message due to the sender's name above it.
Image of the problem
Here is the code:
<img src="/images/phatdeptrai.jpg" style="width: 28px;border-radius: 50%;float: left;clear: both;margin-left: 7px;margin-right: 7px;position: relative;top: 38px;">
<div style="float: left;max-width: 45%;">
<div style="font-size: .6875rem;color: #65676b;margin-left: 13px;margin-top: 10px;">Hoàng Phát đẹp trai</div>
<div style="background-color: #e4e6eb;border-radius: 20px;padding: 7px 10px 7px 10px;margin-top: 2px;">
<div style="color: black;">'.$row['body'].'</div>
</div>
</div>
Change the inner div into a span that is display: inline-block;. And move the styles of the outer div to the span. You can leave the margin.
<img src="/images/phatdeptrai.jpg" style="width: 28px;border-radius: 50%;float: left;clear: both;margin-left: 7px;margin-right: 7px;position: relative;top: 38px;">
<div style="float: left;max-width: 45%;">
<div style="font-size: .6875rem;color: #65676b;margin-left: 13px;margin-top: 10px;">Hoàng Phát đẹp trai</div>
<div style="margin-top: 2px;">
<span style="display: inline-block; padding: 7px 10px 7px 10px; color: black; background-color: #e4e6eb;border-radius: 20px;"> sas</span>
</div>
I have this code
<h1 class="Welcome" style="background-color: #F0E68C;" style="margin-left: 20px;" style="margin-right: 20px;" style="margin-top: 100%;">Welcome To The National </h1>
<h1 class="Welcome" style="background-color: #F0E68C;" style="margin-left: 20px;" style="margin-right: 20px;" style="margin-top: 100%;">Honor Society Website!</h1>
It should add a background just behind the text but instead it looks like this how can I make it so that both texts have the same background but not take up the entire page and have no white space between the lines.
Use display:table; and have no top & bottom margin and add padding to the first h1.
h1
{
display:table;
background-color: #F0E68C;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 0px;
margin-top: 0px;
}
<h1 class="Welcome" style="padding-bottom: 10px">Welcome To The National </h1>
<h1 class="Welcome">Honor Society Website!</h1>
I am trying to build my first portfolio page here . This is my second ever thing I have coded. Just started 3 days ago.
I tried to build the page with minimal code copying. Used as much stuff as I could remember from the courses I have taken so far this week.
So I can seem to make this page fit on all screen resolutions. Everything distorts and moves around.
Help is much appreciated thank you.
https://codepen.io/Grumpusjiujitsu/pen/YQeZyo
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/4.7.0/css/font-awesome.min.css">
<div style="clear: both;">
<div class="header">
<h class="name" style="color: white; font-weight: bold; font-size: 50px">
Aaron Jabs
<a src="#" href="https://cdn.pixabay.com/photo/2014/11/30/14/11/kitty-
551554_960_720.jpg" class="fa fa-facebook" target="_blank;"></a>
<a href="https://cdn.pixabay.com/photo/2014/11/30/14/11/kitty-
551554_960_720.jpg" class="fa fa-twitter" target="_blank;"></a>
<a href="https://cdn.pixabay.com/photo/2014/11/30/14/11/kitty-
551554_960_720.jpg" class="fa fa-youtube" target="_blank;"></a>
</h>
<h1 class="alignleft" style="font-size: 40px;"> Software Developer </h1>
<h1 class="alignright" style="font-size: 20px; word-spacing: 13px">About Portfolio Contact</h1>
</div>
</div>
<p class="portfoliotitle" style="text-align: center;"> Portfolio </p>
<div class="firstrow">
<div class="puppyport">
<a href="https://cdn.pixabay.com/photo/2015/03/26/09/54/pug-
690566_960_720.jpg" target=" _blank"><img
src="https://cdn.pixabay.com/photo/2015/03/26/09/54/pug-690566_960_720.jpg"
alt="a puppy" style="width:300px;height:300px;">
<p style="text-align: center;">A puppy App for Android </p>
</a>
</div>
<div class="kittyport">
<a href="https://cdn.pixabay.com/photo/2015/01/31/12/36/cat-
618470_960_720.jpg" target=" _blank"><img
src="https://cdn.pixabay.com/photo/2015/01/31/12/36/cat-618470_960_720.jpg"
alt="a kitty" style="width:300px;height:300px;">
<p style="text-align: center;">A kitty App for iOS</p>
</a>
</div>
<div class="secondrow">
<div class="bunnyport">
<a href="https://cdn.pixabay.com/photo/2013/09/18/02/01/bunny-
183301_960_720.jpg" target=" _blank"><img
src="https://cdn.pixabay.com/photo/2013/09/18/02/01/bunny-
183301_960_720.jpg" alt="a puppy" style="width:300px;height:300px;">
<p style="text-align: center;">A bunny App for WP</p>
</a>
</div>
<div class="duckport">
<a href="https://cdn.pixabay.com/photo/2014/06/29/13/08/goose-
379393_960_720.jpg" target=" _blank"><img
src="https://cdn.pixabay.com/photo/2014/06/29/13/08/goose-
379393_960_720.jpg" alt="a kitty" style="width:300px;height:300px;">
<p style="text-align: center;">Ducky App available on iOS and
Android</p>
</a>
</div>
<div class="thirdrow">
<div class="war">
<a href="https://cdn.pixabay.com/photo/2014/10/02/06/34/war-
469503_960_720.jpg" target=" _blank"><img
src="https://cdn.pixabay.com/photo/2014/10/02/06/34/war-469503_960_720.jpg"
alt="a puppy" style="width:300px;height:300px;">
<p style="text-align: center;">An App that simulates War</p>
</a>
</div>
<div class="cancer">
<a href="https://cdn.pixabay.com/photo/2014/12/10/20/48/medic-
563425_960_720.jpg" target=" _blank"><img
src="https://cdn.pixabay.com/photo/2014/12/10/20/48/medic-
563425_960_720.jpg" alt="a kitty" style="width:300px;height:300px;">
<p style="text-align: center;">An App that cures Cancer</p>
</a>
</div>
</div>
</div>
.header {
padding: 25px;
width: 100%;
background-color: #669999;
}
.alignright {
float: right;
}
.fa-facebook {
color: #3b5998;
}
.fa-twitter {
color: #0084b4;
}
.fa-youtube {
color: #cc2900;
}
.portfoliotitle {
padding-top: 50px;
padding-right: 50%;
padding-left: 50%;
}
.puppyport {
padding-left: 245px;
float: left;
}
.kittyport {
padding-right: 245px;
float: right;
}
.firstrow {
padding-top: 30px;
}
.bunnyport {
padding-left: 245px;
float: left;
}
.duckport {
padding-right: 245px;
float: right;
}
.secondrow {
padding-top: 30px;
}
.war {
padding-left: 245px;
float: left;
}
.cancer {
padding-right: 245px;
float: right;
}
.thirdrow {
padding-top: 30px;
}
first of all, responsive webdesign is tricky and takes some practice. But there are a few things to understand before writing responsive CSS-code.
Percent values
As I see, you already started using percent values in your CSS. While values with % are relative to their parent, you can use vw (viewport width) and vh (viewport height) to specify values relative to the browser window's size.
Media queries
Sometimes percent values are not enough, for example in the "images-section" on your example page. You should try to use media-queries to define a break-point and change the CSS specification whenever the browser size is less or more than that breakpoint. In your special case around 1100px would be a could break point to change the float-direction of your images and to center them. Or simply reduce the left- or right-padding value at this breakpoint to keep them longer in one line.
Taking courses and reading books is always a good start to get comfortable with the technology, but you should always try to build little things, in many cases you will despair at first, but you should always try to find a solution, even if it is not the most elegant one.
how to move the defie div left and the sales order div right......
i gave float property but not working.....
i wanted one div to touch extremely left and another div to move to the right....
providing my code below.....
http://jsfiddle.net/zbyLy/3/embedded/result/
<div style="padding-left: 41px; padding-top: 10px; float:left;">
<a class="" href="#">
<img alt="change" class="defieLogo" src="http://www.defie.co/designerImages/defie_logo_only.png">
</a>
<p style="margin-top: 5px; margin-bottom: 0px;">47657 Lakeview Blvd, Fremont CA 94538</p>
<p>Tel: 510-657-8981 <span style="padding-left: 18px;">wwww.abcdfg.com</span></p>
</div>
<div style="border: 1px solid red; width: 300px; float:left;">
<p style="color: #14486b; font-size: 18px; font-family: arial; font-wieght: bold; ">Sales Order</p>
<p style=>Customer No. ABC01</p>
<p style=>sales Order No. 100001</p>
<p style=>Est. Ship Date 2/24/2013</p>
</div>
<div style="border: 1px solid red; width: 300px; float:right;">
demo :http://jsfiddle.net/zbyLy/
how to make the lists to display inline........
now it is in vertical alignment can i make it into horizontal alignment....
providing my fiddle link below....
http://jsfiddle.net/JNyQU/1/
<ul class="homePageLists" style="">
<li style="padding-bottom: 5px; list-style: none; ">
<img alt="squareList" style="margin-right: 10px;" id="logo" src="http://www.defie.co/designerImages/square_list.png">
Menu
</li>
<li style="padding-bottom: 5px; list-style: none; ">
<img alt="squareList" style="margin-right: 10px;" id="logo" src="http://www.defie.co/designerImages/square_list.png">
Search
</li>
<li style="padding-bottom: 5px; list-style: none; ">
<img alt="squareList" style="margin-right: 10px;" id="logo" src="http://www.defie.co/designerImages/square_list.png">
Create PN
</li>
<li style="padding-bottom: 5px; list-style: none; ">
<img alt="squareList" style="margin-right: 10px;" id="logo" src="http://www.defie.co/designerImages/square_list.png">
Product List
</li>
<li style="padding-bottom: 5px; list-style: none; ">
<img alt="squareList" style="margin-right: 10px;" id="logo" src="http://www.defie.co/designerImages/square_list.png">
Create PN
</li>
<li style="padding-bottom: 5px; list-style: none; ">
<img alt="squareList" style="margin-right: 10px;" id="logo" src="http://www.defie.co/designerImages/square_list.png">
Create PN
</li>
</ul>
Use float:left;:
ul { clear: left; } // clear logo img
li { float: left; }
E.g. http://jsfiddle.net/JNyQU/4/
I have included a jFiddle for you.
http://jsfiddle.net/persianturtle/JNyQU/6/
The solution was to add a class to the container of the unordered menu list, which I called "inline."
The CSS was:
.inline ul {
float:left;
display:inline;
}
.inline ul li {
float:left;
display:inline;
}
The only HTML I changed was:
<div class="inline">
Hope this helps you! If it does, please don't forget the check mark!
Also, I added some margin to the left so it looks better! You can change that however you like.