Profiles

Forums

Calendar

Everything posted by webtrickshome

The first issue with your site even on larger screen view is the divs with id #banner-container and content-container. Remove the width value from their css. The html div tag automatically possesses a property display:block which means 100% width inclusive of paddings and margins.
#content-container {
background-color: #FFF;
margin: 0 auto;
padding: 25px;
overflow: auto;
}
Once you do that your box1, box2 and box3 also need to be redefined. Define them as show below.
.box1{
width: 30%;
float: left;
}
.box2{
width: 30%;
float: left;
margin-left: 5%;
}
.box1{
width: 30%;
float: right;
}
For device responsive first of all, add this line inside your <head> tag.
<meta name="viewport" content="width=device-width, initial-scale=1">
Then redefine your div's widths as 100% wherever needed inside the media query.
You can use @media(max-width: 767px){} for smaller screens at once.
You can use @media(min-width: 768px) and (max-width: 991px){} for tablets.
You can use @media(min-width: 992px) and (max-width: 1024px){} for desktops.

public function importExcel()
{
$file = $_FILES[&#39;uploads&#39;][&#39;tmp_name&#39;];
$handle = fopen($file, &quot;r&quot;);
while($filesop = fgetcsv($handle, 1000, &quot;,&quot;)){
$name = $filesop[0];
$gender = $filesop[1];
$address = $filesop[2];
$age = $filesop[3];
$education = $filesop[4];
$contact = $filesop[5];
DB::table(&#39;visitors&#39;)-&gt;insert([
&#39;name&#39;=&gt;$name,
&#39;age&#39;=&gt;$age,
&#39;gender&#39;=&gt;$gender,
&#39;address&#39;=&gt;$address,
&#39;education&#39;=&gt;$education,
&#39;contact&#39;=&gt;$contact,
]);
}
}
At first, we retrieved the file from the temporary location and we opened it in reading mode.
Using the while loop, we stored the values from the excelsheet rows as indexed arrays to some variables.
Finally, we added those variables in the insert query and executed while remaining inside the loop. That makes the function run until the last row of excelsheet and insert each of those rows individually in database.
Once completed, you can store a success message in session and display it to the user while redirecting the user.

You are forcing the id dots to be inline at any case.
if dot's style is none make it inline else change it to display none. What does that mean? It's again forcing the div to go inline.
Workout on this if else condition and all will work fine.

The best option to give equal width to your buttons is to give the width itself in pixel value with text-align center property. You can add little padding on each side for vertical spacing.
.your-button{
width: 100px;
text-align: center;
padding: 5px 10px;
}
You can also add hover effects to make them look more appealing.

Greetings to all the users and administrators of w3scools invisionzone forum.
I would love to get some constructive criticism on this web development tutorial site namely webtrickshome. It's been around for slightly more than a year but I redesigned it recently.
Any feedback regarding the design and contents would be highly appreciated.
Thankyou

seems like you are planning a large container in the middle leaving equal spaces on each side. Do this.
<div class="main-container">
</div>
<style>
.main-container{
width: 80%;
margin: auto;
}
</style>
This will give you a div with 80% width of the screen size automatically placed in the middle. Now, you can create three separate divs inside that main-container to place contents on different sides which looks like:
<div class="main-container">
<div class="box"></div>
<div class="box box-middle"></div>
<div class="box box-last"></div>
</div>
Now, add some styles to these divs.
<style>
.box{
width: 30%; //this will make all three boxes of equal width
float: left; // this will make all three boxes float to the left leaving the rest 10% space empty on the right end
}
.box-last{
float: right; // this will make the last box float to the right overriding the earlier float property and shift the 10% empty space between the second and last box.
}
.box-middle{
margin-left: 5%; // this will shift the middle box to the right leaving 5% of the empty space on the left which will make the other 5% empty space remain on the right and give a view of equal spacing among those boxes.
text-align: center; I added this as it seems like you want the objects in the middle div to be centered.
}
</style>

That's not exactly possible with css. The only thing you can do is make the background a bit transparent with background: rgba(0,0,0,0.1) which defines the background color and opacity of the body. The screenshot you've posted is an image file in png format not the screenshot of a page loaded in browser.

Generally, the header section is wrapped inside a html tag named <header></header>. If it's the parent div use it in your css file as
header{
background: your-color;
}
If the header tag is wrapped inside some div then find the top level div and use it's id or class name to add the same.
.divname or #idname{
background: your-color;
}

You are missing the # symbol in ahead of the id name followed by the data-toggle attribute.
it should be <a href="#myModal" data-toggle="modal>Your Link Text Here</a>.
data-toggle="modal" opens the modal window.
data-target or href="#myModal" points to the id of the modal i.e. the id of the parent <div> of the model.

Within the paragraph, its only line height that works. In case its between multiple maragraphs then you can use either margin or padding. The best value for line-height is 1.6 em which means the height of the line is 1.6 times larger than the font size. So, you change the font size then the line height also adjusts itself.
p.your-class{
line-height: 1.6em;
}

Use html tag <center></center> as shown below to get it done easily or you can redefine its css property as display block and then margin auto.
<center><a class="button" href="#"><span>GO! </span></a></center>

First of all, create the div on the top.
<div class="red-div"></div>
It'll take up the entire width automatically so you only need to add the background and height.
.red-div{
background: red;
height: 200px;
}
Then,you can divide the remaining blocks into two main sections. One on the left and one on the right.
<div class="left-section"></div>
<div class="right-section"></div>
Add css property width around 30% and float left for the left div as shown below.
.left-div{
width: 30%;
float: left;
height: 600px;
border: 1px solid grey;
}
Add the remaining width 70% and float property for the right div as shown below. Here, you can use either float left or right as both will produce the same result as there's no spacing between them.
.right-div{
width: 70%;
float: left;
background: blue;
height: 600px;
border: 1px solid grey;
}
Now, create multiple divs inside the left div with height, background and border defined and you'll get the desired result.
<div class="left-div">
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
</div>
.content{
height: 100px;
background: green;
border-bottom: 1px solid grey;
}

First of all you need to know where exactly is the image located on your server.
Generally, it's placed in public_html/images and in your case it's public_html/img.
So, you can use the image path as http://you-domain-name/img/your-file-name.
It's always better to use the full path while embedding objects or files.

You can create your own custom javascript for collapsibles that appear on the right with a bit of css or modify the css of the existing one to display it on the right. Here's a tutorial on jquery basics from webtrickshome from where you can copy the code for slideToggle which hides the collapsible divs by default. Then you can add your own css to diplay them on the right.