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>
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>
Despite of other people having the same issues I still couldn't get it to work, so I'll really need your help.
I'm currently writing a guestbook in php with a html-template but I have the issue that my divs don't use the min-height properties that I set if they are a percentage. I wanted to make the whole page responsive for all resolutions and window-sizes so that's why I'm trying to avoid fixed heights.
The following is my html-markup:
<!DOCTYPE html>
<html>
<head>
<link href="<?=$dir_stylesheetFile?>" type="text/css" rel="stylesheet">
<title><?=$GuestbookTitle ?></title>
</head>
<body>
<div id="wrap_main">
<div class="menubar">
<ul class="menubar_list">
<a href="http://wikitest.gutknecht-informatik.com"> <!-- Home should always exist,
other menubar-items can be added in MenubarHandler.php > InternLink or ExternLink -->
<li class="menubar_item" id="int"><span id="menubar_text">Home</span></li>
</a>
<?=$MenuPagesString ?>
</ul>
<?=$MenuPagesStringExt ?>
</div> <!-- menubar -->
<div id="wrap_header">
<div id="logoplacer">
<a href="http://wikitest.gutknecht-informatik.com">
<img id="img_logo" src="/../data/images/Logo_Guestbook.png" alt="Guestsbook Home"/>
</a>
</div> <!-- logoplacer -->
<div id="profileplacer">
<?= $ProfilePlacer ?>
</div> <!-- profileplacer -->
</div> <!-- wrap_header -->
<div id="wrap_content">
<div id="content">
<div id="content_title">
<h2><?=$CurrContentTitle ?></h2>
</div> <!-- content_title -->
<div id="content_text">
<?=$CurrContentText ?>
</div> <!-- content_text -->
</div> <!-- content -->
</div> <!-- wrap_content -->
<div id="wrap_footer">
© by Kathara
</div> <!-- wrap_footer -->
</div> <!-- wrap_main -->
</body>
</html>
As my CSS-file is quite big I will only give you the important parts:
*{
font-family:sans-serif;
font-size:12pt;
color:white; /*003300*/
padding: 0;
margin: 0;
list-style: none;
}
html {
position: absolute;
background-image: url('/../data/images/03.jpg');
background-attachment: fixed;
min-height:100%;
width:100%;
}
body {
height:100%;
width:calc(70% - 2px);
margin-left: calc((30% - 2px) / 2);
position: absolute;
}
#wrap_main {
background: rgba(255,255,255,0.7);
width: 100%;
min-height: 100%;
}
#wrap_content {
display: inline-block;
position: relative;
left: 190px;
margin-top: calc(1% + 4px);
width: calc(100% - 200px);
background: #1e1e1e;
min-height: 100%;
margin-bottom: 10px;
}
#content{
position: relative;
color: white;
margin: 5px auto 10px;
height: 100%;
min-height: 550px;
width: 95%;
}
If you need more parts, please write so in the comment. I'm sorry if the code is a little messy but I haven't yet cleaned it up...
My problem is, that the #wrap_content and #content can't have a percentage height and I don't know why but it just won't work.
Did I make a mistake somewhere along the way and just don't see it?
What do I need to change, so that the #wrap_main is always as big as it's content? How can I get my #content (or #wrap_content) to adapt to the height of the content (including text and images)?
Do I need to change something in the html-markup?
If you see anything else that I could do better, please advise. I'm still very new to php, html and css but I'll welcome every help I can get. Thanks in advance.
If you want to check out what the page looks like at the moment click here. Be aware that not everything is working correctly yet, but if you want to register yourself, you're highly welcome to test it out.
EDIT:
I had to change the html-markup a little and adapted the css quite a bit thanks to the idea of William, thanks again:
<!DOCTYPE html>
<html>
<head>
<link href="<?=$dir_stylesheetFile?>" type="text/css" rel="stylesheet">
<title><?=$GuestbookTitle ?></title>
</head>
<body>
<div id="whity_layer">
<div id="wrap_main">
<div class="menubar">
<ul class="menubar_list">
<a href="http://wikitest.gutknecht-informatik.com"> <!-- Home should always exist,
other menubar-items can be added in MenubarHandler.php > InternLink or ExternLink -->
<li class="menubar_item" id="int"><span id="menubar_text">Home</span></li>
</a>
<?=$MenuPagesString ?>
</ul>
<?=$MenuPagesStringExt ?>
</div> <!-- menubar -->
<div id="wrap_header">
<div id="logoplacer">
<a href="http://wikitest.gutknecht-informatik.com">
<img id="img_logo" src="/../data/images/Logo_Guestbook.png" alt="Guestsbook Home"/>
</a>
</div> <!-- logoplacer -->
<div id="profileplacer">
<?= $ProfilePlacer ?>
</div> <!-- profileplacer -->
</div> <!-- wrap_header -->
<div id="wrap_content">
<div id="content">
<div id="content_title">
<h2><?=$CurrContentTitle ?></h2>
</div> <!-- content_title -->
<div id="content_text">
<?=$CurrContentText ?>
</div> <!-- content_text -->
</div> <!-- content -->
</div> <!-- wrap_content -->
<div id="wrap_footer">
© by Kathara
</div> <!-- wrap_footer -->
</div> <!-- wrap_main -->
</div> <!-- whity_layer -->
</body>
</html>
And CSS:
*{
font-family:sans-serif;
font-size:12pt;
color:white; /*003300*/
padding: 0;
margin: 0;
list-style: none;
}
html {
position: absolute;
background-image: url('/../data/images/03.jpg');
background-attachment: fixed;
min-height:100%;
width:100%;
z-index: -1;
}
body {
height: 100%;
max-height:auto;
width:100%;
position: relative;
z-index: 0;
}
#whity_layer {
background: rgba(255,255,255,0.7);
margin-left: calc((30% - 2px) / 2);
width: calc(70% - 2px);
height: 100%;
position: fixed;
overflow: auto;
z-index: 1;
}
#wrap_main {
width: 100%;
min-height: 100%;
}
#wrap_content {
display: inline-block;
position: relative;
left: 190px;
top: 45px;
width: calc(100% - 200px);
background: #1e1e1e;
min-height: 100%;
margin-bottom: 10px;
}
#content{
position: relative;
color: white;
margin: 5px auto 10px;
height: 100%;
min-height: 100%;
width: 95%;
}
I'll have yet to decide the min-height of the content-wrapper, but I'll figure it out.
EDIT 2
I have to add that at the moment I have a scrollbar on the whity_layer if the content overflows (overflow: auto) which I can't get rid of for the time being... every homebrew attempt I found wouldn't work with my markup... Nowadays it should be easier to hide scrollbars with css in my opinion...
What do I need to change, so that the #wrap_main is always as big as it's content?
You don't need to use height or min-height to have the #wrap_main always as big as it's content.
How can I get my #content (or #wrap_content) to adapt to the height of the content (including text and images)?
Just take the height and min-height out of the CSS
Do I need to change something in the html-markup?
Not really, just change the CSS.
Here is a jsfiddle without the height and min-height on CSS that will adjust it's height according the content.
EDIT:
If you just need a whity background, you might consider this:
Create a new div #whity_layer and make it absolute before all the other divs:
<body>
<div id="whity_layer"></div>
<div id="wrap-main"></div>
.........
Change the CSS to:
body {
position: relative;
}
#whity_layer {
background: rgba(255,255,255,0.7);
position: absolute;
width: 100%;
height: 100%;
}
#wrap_main {
// Remove background
}
A time ago i tried to find a css alternative to make my div always as big as it's content, but as long as i remember that was horrible/hard, i'am sorry that i can't really answer you, but if you want to try with another method you can use AngularJs with, for exemple, ng-style so you can give your divs a "dynamic" size.
The rest is all about algorithm :).
Good luck mate :3
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.
Morning all,
I'm having an alignment issue.
I am using a MYSQL array to create a sports profile page.
I want it to display the image, then to the right, show their name, position and number below each other.
Then i want it to dynamically display 3 or 4 of these next to each other before swapping down to the next line.
I have managed to get it to work with just the pictures, not with the text in between. they all just show on new lines currently.
<style>
#container .profile{
display: inline-block;
vertical-align:top;
}
</style>
<div class="profile">
<img src="wp-content/uploads/profile/jh7.jpg" alt="" /><br />
<h3 class="widget-title">Player 1</h3>
<p>Defence</br>#7</br></br>
<img src="wp-content/uploads/profile/dw21.jpg" alt="" /><br />
<h3 class="widget-title">Player 2</h3>
<p>Defence</br>#21</br></br>
<img src="wp-content/uploads/profile/pn22.jpg" alt="" /><br />
<h3 class="widget-title">Player 3</h3>
<p>Defence</br>#22</br></br>
</div>
</div><!-- .entry-content -->
</div>
Thanks guys
You can use float left for the image:
<style>
.profile img{
float: left;
margin-right: 5px;
}
</style>
Checkout this DEMO: http://jsbin.com/jigotamamu/1/
Quick example : float the images and clear the float with a block element having a clear: both property :
http://jsfiddle.net/L8jtwkw1/2/
You can wrap each profile in a container and use inline block to list them horizontally then.
It still didn't do exactly what I was after, However I managed to sort it by putting a column in:
<style>
.profile img{
float: left;
margin-right: 10px;
margin-top: 2px; }
.profile h3 { display: inline-block; }
.profile pos{ }
.column-left{ float: left; width: 33%; }
</style>
I think that thie problem is in <h3> tag - you need either replace it with <span> or override styles for it.
For example:
echo '<img src="wp-content/uploads/profile/'.$row['Id'].'.jpg" alt="" />',
'<span class="widget-title">'.$row['FirstName'].' '.$row['Surname'].'</span>',
$row['PositionLong'].'</br>',
'#'.$row['Number'].'</br>';
If you show the css styles for widget-title, we can help you.
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/