I have included a php page(courses.php) into another php page (course.php).
After including courses.php in course.php I have written a div tag and want it to be displayed next to the div having COURSES as header.
//Courses.php
<html>
<head>
<style>
#top
{
height: 100px;
border :0.5px solid;
}
#left
{
height: 520px;
width: 250px;
border :0.5px solid;
}
</style>
</head>
<body>
<div id = "top"></div>
<div id = "left">
<center>
<h2><b> COURSES </h2></b>
<ul>
<li> HTML
</li>
<li> C++
</li>
</ul>
</center>
</div>
<body>
</html>
Page for Courses.php
//course.php
<html>
<head>
<style>
#center
{
height: 530px;
width: 900px;
border :0.5px solid;
}
</style>
</head>
<body>
<?php include("courses.php");?>
<div id = "center">
<h2>HEY</h2>
</div>
</body>
</html>
page for Course.php
I want the div showing HEY being displayed next to div showing COURSES.
Also advise how can I divide the div tag having HEY into two equal halves vertically.
Things which i tried for showing two divs next to each other:
including the include php tag in a div.
including the include php tag (in a div) as well as the next div tag both in
a parent div tag.
and then manipulating the float as well position property with different
combinations but it wasn't helpful.
You can simply write like this in Courses.php
<style>
#top
{
height: 100px;
border :0.5px solid;
}
#left
{
height: 520px;
width: 250px;
border :0.5px solid;
}
</style>
<div id = "top"></div>
<div id = "left">
<center>
<h2><b> COURSES </h2></b>
<ul>
<li> HTML
</li>
<li> C++
</li>
</ul>
</center>
</div>
body element is allowed to include style but this is not a good practice, you are encourage to split to two files, Courses.php and Courses_css.php and import them right place in Course.php
Related
I am creating a sample website which has three divisions horizontally.
I want the left most div to be 25% width, the middle one to be 50% width, and right to be 25% width so that the divisions fill all the 100% space horizontally.
<html>
<title>
Website Title
</title>
<div id="the whole thing" style="height:100%; width:100%" >
<div id="leftThing" style="position: relative; width:25%; background-color:blue;">
Left Side Menu
</div>
<div id="content" style="position: relative; width:50%; background-color:green;">
Random Content
</div>
<div id="rightThing" style="position: relative; width:25%; background-color:yellow;">
Right Side Menu
</div>
</div>
</html>
http://imgur.com/j4cJu
When I execute this code, the divs appear over each other. I want them to appear beside each other!
How can i do this?
I'd refrain from using floats for this sort of thing; I'd rather use inline-block.
Some more points to consider:
Inline styles are bad for maintainability
You shouldn't have spaces in selector names
You missed some important HTML tags, like <head> and <body>
You didn't include a doctype
Here's a better way to format your document:
<!DOCTYPE html>
<html>
<head>
<title>Website Title</title>
<style type="text/css">
* {margin: 0; padding: 0;}
#container {height: 100%; width:100%; font-size: 0;}
#left, #middle, #right {display: inline-block; *display: inline; zoom: 1; vertical-align: top; font-size: 12px;}
#left {width: 25%; background: blue;}
#middle {width: 50%; background: green;}
#right {width: 25%; background: yellow;}
</style>
</head>
<body>
<div id="container">
<div id="left">Left Side Menu</div>
<div id="middle">Random Content</div>
<div id="right">Right Side Menu</div>
</div>
</body>
</html>
Here's a jsFiddle for good measure.
I know this is a very old question. Just posting this here as I solved this problem using FlexBox. Here is the solution
#container {
height: 100%;
width: 100%;
display: flex;
}
#leftThing {
width: 25%;
background-color: blue;
}
#content {
width: 50%;
background-color: green;
}
#rightThing {
width: 25%;
background-color: yellow;
}
<div id="container">
<div id="leftThing">
Left Side Menu
</div>
<div id="content">
Random Content
</div>
<div id="rightThing">
Right Side Menu
</div>
</div>
Just had to add display:flex to the container! No floats required.
You can use floating elements like so:
<div id="the whole thing" style="height:100%; width:100%; overflow: hidden;">
<div id="leftThing" style="float: left; width:25%; background-color:blue;">Left Side Menu</div>
<div id="content" style="float: left; width:50%; background-color:green;">Random Content</div>
<div id="rightThing" style="float: left; width:25%; background-color:yellow;">Right Side Menu</div>
</div>
Note the overflow: hidden; on the parent container, this is to make the parent grow to have the same dimensions as the child elements (otherwise it will have a height of 0).
Easiest way
I can see the question is answered , I'm giving this answer for the ones who is having this question in future
It's not good practise to code inline css , and also ID for all inner div's , always try to use class for styling .Using inline css is a very bad practise if you are trying to be a professional web designer.
Here in your question
I have given a wrapper class for the parent div and all the inside div's are child div's in css you can call inner div's using nth-child selector.
I want to point few things here
Do not use inline css ( it is very bad practise )
Try to use classes instead of id's because if you give an id you can use it only once, but if you use a class you can use it many times and also you can style of them using that class so you write less code.
Codepen link for my answer
https://codepen.io/feizel/pen/JELGyB
.wrapper {
width: 100%;
}
.box {
float: left;
height: 100px;
}
.box:nth-child(1) {
width: 25%;
background-color: red;
}
.box:nth-child(2) {
width: 50%;
background-color: green;
}
.box:nth-child(3) {
width: 25%;
background-color: yellow;
}
<div class="wrapper">
<div class="box">
Left Side Menu
</div>
<div class="box">
Random Content
</div>
<div class="box">
Right Side Menu
</div>
</div>
You add a
float: left;
to the style of the 3 elements and make sure the parent container has
overflow: hidden; position: relative;
this makes sure the floats take up actual space.
<html>
<head>
<title>Website Title </title>
</head>
<body>
<div id="the-whole-thing" style="position: relative; overflow: hidden;">
<div id="leftThing" style="position: relative; width: 25%; background-color: blue; float: left;">
Left Side Menu
</div>
<div id="content" style="position: relative; width: 50%; background-color: green; float: left;">
Random Content
</div>
<div id="rightThing" style="position: relative; width: 25%; background-color: yellow; float: left;">
Right Side Menu
</div>
</div>
</body>
</html>
Also please note that the width: 100% and height: 100% need to be removed from the container, otherwise the 3rd block will wrap to a 2nd line.
Get rid of the position:relative; and replace it with float:left; and float:right;.
Example in jsfiddle: http://jsfiddle.net/d9fHP/1/
<html>
<title>
Website Title </title>
<div id="the whole thing" style="float:left; height:100%; width:100%">
<div id="leftThing" style="float:left; width:25%; background-color:blue;">
Left Side Menu
</div>
<div id="content" style="float:left; width:50%; background-color:green;">
Random Content
</div>
<div id="rightThing" style="float:right; width:25%; background-color:yellow;">
Right Side Menu
</div>
</div>
</html>
Alright, so this is my HTML right now.
<?php
session_start();
?>
<!DOCTYPE html>
<html>
<head>
<title>GeoVillage - A Community</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id=header>
<img id=logo src="/logo.png" alt="GeoVillage Community" style="width:500px;height:128px;">
<span id=logreg>
<?php
if(isset($_SESSION['loggedon']) && $_SESSION['loggedon'] == true){
echo '<a href=/logout>
<img id=logout src="/logout.png" alt="Logout">
</a>';
} else {
echo '<a href=/login>
<img id=login src="/login.png" alt="Login">
</a>';
echo '<a href=/login/register.php>
<img id=register src="/register.png" alt="Register">
</a>';
}
?>
</span>
</div>
<ul>
<li>FSX/X-P/P3D Vatsim Online Material</li>
<li>Development Page</li>
</ul>
<?php
echo($_SESSION["loggedon"]);
?>
</body>
</html>
And this is my CSS file.
body{
background-color: #33ccff;
margin: 0px;
}
#header{
display:inline;
Right now, the Login and Register buttons are at the top, but aligned essentialy with the bottom of the banner. How would i position it so it would be aligned with the top of the banner?
Try this
#logreg {vertical-align: top;display: inline-block;}
METHOD 1
This makes the width of your header wider, to allow the login / register buttons to fit within the header container. The #logoreg CSS then adds a margin to the top of the login / register button container, which centers it with the logo when the right px amount is specified.
CSS:
#header {
display: block;
width: 105%;
}
#logreg {
float: right;
margin-top: 15px;
}
METHOD 2
Change the width of your banner image.
<img id="logo" src="/logo.png" alt="GeoVillage Community" style="width: 700px;height:96px;">
Then put this in your CSS:
#logreg {
margin-top: 15px;
float: right;
display: inline-block;
}
I'm trying to work out how to dynamically layout DIV's so they form a grid effect layout.
My page is very simple. I have a DIV which is a wrapper and is made using :
#wrapper {
width: 80%;
margin: 50px auto;
padding: 20px;
border:1px solid #000000;
display: table;
}
Here is a FIDDLE of this page working.
Within that I want to layout 6 cells ( possibly 8 but for this 6 will be fine )
The cells are displayed using parent & child css.
The users permissions determins how many cells they may see. So some users will see 6, others 5, 4,3 etc..
The attached screen shot shows how I want the layout to look based on the number of cells shown. ( all centred correctly - unlike my image)
The text entry for the cells isn't important, some users will see 2 cells and this may be 'field 1' & 'field 6', another user it could be 'field 5' & 'field 2' etc.
A cell is created using
<div class="child">
<img src='http://www.emojibase.com/resources/img/emojis/gemoji/274c.png' />
<p>field 1</p>
</a>
</div>
php will be used to hide the above code for any cell that is not to be viewed.
Any idea how I can acheive this ?
Thanks
You can work around with CSS3 flex property and java script. In HTML file, you need to just place all the six child elements [div.child] inside the parent [div#parent]. The splitting of child elements can be done using JavaScript itself.
Check this following code:
<!doctype HTML>
<html>
<head>
<style>
#wrapper {
width: 80%;
margin: 50px auto;
padding: 20px;
border:1px solid #000000;
display:block;
}
#parent {
display: flex;
font-size: 1em;
height: auto;
justify-content: space-around;
line-height: 0.6em;
margin: 0 0 30px;
text-align:center;
}
.child {
width: 120px;
height: 75px;
border: solid 1px #000;
display: inline-block;
letter-spacing: normal;
font-size: normal;
white-space: normal;
text-align: center;
vertical-align: middle;
margin:5px 25px 20px 25px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="parent">
<div class="child">
<a href="">
<img src='http://www.emojibase.com/resources/img/emojis/gemoji/274c.png'/>
<p>field 1</p>
</a>
</div>
<div class="child">
<a href="">
<img src='http://www.emojibase.com/resources/img/emojis/gemoji/274c.png'/>
<p>field 2</p>
</a>
</div>
<div class="child">
<a href="">
<img src='http://www.emojibase.com/resources/img/emojis/gemoji/274c.png'/>
<p>field 3</p>
</a>
</div>
<div class="child">
<a href="">
<img src='http://www.emojibase.com/resources/img/emojis/gemoji/274c.png'/>
<p>field 4</p>
</a>
</div>
<div class="child">
<a href="">
<img src='http://www.emojibase.com/resources/img/emojis/gemoji/274c.png'/>
<p>field 5</p>
</a>
</div>
<div class="child">
<a href="">
<img src='http://www.emojibase.com/resources/img/emojis/gemoji/274c.png'/>
<p>field 6</p>
</a>
</div>
</div>
</div>
</body>
</html>
<script>
var wrapper= document.getElementById('wrapper');
var temp= document.getElementById('parent');
child= temp.childElementCount;
if(child == 3)
{
temp.style.flexFlow= "row nowrap";
}
if(child == 4)
{
temp.style.flexFlow="row nowrap";
var row2 = document.createElement("div");
row2.setAttribute('id','parent');
var child3= temp.childNodes[5];
var child4= temp.childNodes[7];
row2.appendChild(child3);
row2.appendChild(child4);
wrapper.appendChild(row2);
}
if(child == 5)
{
temp.style.flexFlow="row nowrap";
var row2 = document.createElement("div");
row2.setAttribute('id','parent');
var child4= temp.childNodes[7];
var child5= temp.childNodes[9];
row2.appendChild(child4);
row2.appendChild(child5);
wrapper.appendChild(row2);
}
if(child == 6)
{
temp.style.flexFlow="row nowrap";
var row2= document.createElement("div");
row2.setAttribute('id','parent');
var child4= temp.childNodes[7];
var child5= temp.childNodes[9];
var child6= temp.childNodes[11];
row2.appendChild(child4);
row2.appendChild(child5);
row2.appendChild(child6);
wrapper.appendChild(row2);
}
</script>
You said you generate the code with PHP so just add an if that decide which layout is needed. If you need only 4 divs generate only two child divs per parent div.
Your HTML and CSS seems to work just fine when I delete divs from the HTML code.
I don't see a reason to complicate your CSS if you can easily work this out via the PHP code. Simple and clean HTML and CSS will be loaded and rendered faster and also will be easier to maintain.
I'm currently working on a homepage using the Laravel PHP Framework and I'm running into CSS issues. I'm trying to accomplish a simple task of having two things in my 'header' tag,
1) An image of a logo on the left
2) A container to the right of the logo displaying a user's information
The logo is positioned fine on the left but when I try to position the container to the right of it, it is being positioned underneath the logo instead. I know my CSS is good unless I'm overlooking something entirely but I have a feeling that the Larevel Blade Templating is having an effect in how 'div' elements are being handled.
CSS(style.css):
body {
background:linear-gradient(#3C5D79, #2E4253) no-repeat;
color:white;
}
.container {
width:100%;
}
.header_container {
width:960px;
}
.main_logo_container {
width:313px;
margin:0 170px;
position:relative;
}
.admin_container {
display:inline-block;
float:left;
width:600px;
margin:5px 5px;
position:relative;
}
#extends ('layouts.default')
Admin View after user logs in (admin_index.blade.php):
#section('content')
<header>
<div class="header_container">
<div class="main_logo_container">
<img src="../images/logo.png" width="300" height="97" alt="Company Logo" />
<div class="admin_container">
<b> You have reach the admin page!</b>
</div>
</div>
</div>
</header>
#stop
layouts.default.blade.php(Main Blade Template):
<!doctype html>
<html>
<head>
<meta charset ="utf-8">
<link rel="stylesheet" href=" <?php echo asset('css/style.css')?>" type="text/css">
<style>.flash { padding: 1em; border: 1px dotted black; } </style>
</head>
<body>
#if (Session::get('flash_message'))
<div class="flash">
{{ Session::get('flash_message') }}
</div>
#endif
<div class="container">
#yield('content')
</div>
</body>
</html>
Any help is greatly appreciated since I'm trying to become more familiar with Laravel PHP.
Your logo container was too small because according to your DOM it also carries your text which is 600px wide for a 313px wide container hence the split on two separate lines.
I suggest you change your CSS to fix this and also remove the float: left directive. The display: inline-block here will be more efficient.
Therefore you will get this following CSS:
body {
background:linear-gradient(#3C5D79, #2E4253) no-repeat;
color:white;
}
.header_container {
width:960px;
}
.main_logo_container {
width: 100%;
}
.main_logo_container img {
display: inline-block;
}
.admin_container {
display: inline-block;
margin-left: 5px;
position:relative;
top: -40px;
}
And here is a demo to show you the working result:
http://jsfiddle.net/w7wqaw9L/
I would greatly appreciate any help I can get on this matter. I am using xampp on an Ubuntu Linux Server OS. I have a filed saved as template.php. I have defined a style on template.php which contains a div class "spcout". When I try and use "spcout", the text in the tags should spread themselves out evenly in a line over the width of the web page. Unfortunately, it's not happening. It appears my div class is somehow not being read. I tried using the same code in a .html file and it works when I open the file locally. If i upload the same html file onto the web server, that same html file will not display correctly. Any help is appreciated! Thanks.
<style type="text/css">
ul
{
list-style-type:none;
margin:0;
padding:0;
}
li
{
display:inline;
}
div.spcout
{
display: table;
width: 100%;
}
div.spcout span
{
display: table-cell;
text-align: center;
}
</style>
<div id="container">
<img src="images\baseimage.png">
<div class="spcout">
<span>code 1</span>
<span>code 1</span>
<span>code 1</span>
</div>
</div>
<style type="text/css">
div.spcout span
{
display: block;
text-align: center;
float:left;
width:100px;
height:100px;
margin-right:5px
}
</style>
<div id="container">
<img src="images\baseimage.png">
<div class="spcout">
<span>code 1</span>
<span>code 1</span>
<span>code 1</span>
</div>
</div>