So I am trying to make a two divs that share the same name (bcontainer) be on the same line just margined 10px from eachother. Display: inline (inline-block) flex etc doesn't seem to work and I am feeling lost. Here is my code atm since I keep back tracking. Reading other peoples solutions or fixes which doesn't fix mine.
Css code
.bcontainer {
border: 1px solid #CCC;
display: inline-block;
}
PHP code
echo '<div class="bcontainer">'.$pos['office_name'].'</div><br />';
I tried Display: inline, inline-block, flex, inline-flex. Float: left. Also tried to do column-count: 2 and 3, problem is each officer has a different amount of members (Comand officer, Exec officer, a different office might have only 2 another one could have 3-4)
As stated I am lost on what else to try. I just want my text so what .$pos['officer_name'] will show is different offices in the same order. So lets say two offices share order 2 these will show up
(1.| Commanding Officer, 2.| Execitive Officer) I want them both to be on the same line and not have Commading officer above Execitive officer.
Related
I have been looking into table for a while, and I am thinking about creating something. The data will be stored in a database (profile image, name, description, date and thumbs up).
I am trying to create something like this: https://i.ibb.co/k2LM4ch/Untitled.png So each row from the database table has it's own card view(or list view, not sure what its named).
Can someone help to me the right path here, as I have no idea how I get do this, is even table the correct way?
This is a simple example with information you have provide:
$query=$mysqli->prepare('select * from table');
$query->execute();
$result=$query->get_result();
echo '<table>';
while($res=$result->fetch_array()){
$name=$res['name'];
$thumb=$res['thumbsup'];
echo "<tr><td><img src='$thumb'>$name <br> Hello <br> <button>test</button></td></tr>"
}
echo '</table>'
of course you will have to change the code according to your needs.
So for example how #Ludovit Mydla said use flex/grid for the two column
Right so your first question: should i use a table to make a card? No! absolutely not!
What you want to do first though is create a simple html page layout with your card design I tend to use Codepen for finding out card designs since the community is nice and you can use there designs if you follow the terms and agreement and credit people for there amazing work! Write this up in a php file
After youve created your page layout you'll need to create a registration form: the registration form will allow the person to fill out the information fields of profile image, name, description etc w3schools has a basic tutorial on that
You'll Then need to create a database which will then store the information from your w3schools form, and you'll be able to pull that information back into the fields your cards need in your simple html page layout design with MySQL code
If your coding skills are not the best! that is all good you might prefer to watch this
tutorial to get you started before trying to do the above 3 tasks! This youtube series should help you learn before trying something a little more complex
This answer takes care only of HTML + CSS part of the question and it's very simplistic. More styling will be needed probably. See other answers for SQL/PHP solutions. You can design the "card" in many ways (positioning, float, flex or grid layout) The example given is done with flex (just personal preference at the moment):
.card {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
align-items: flex-start;
border: 1px solid black;
}
.card_img {
flex: 0 1 100px;
padding: 5px;
}
.card_content {
flex: 1 0 70%;
}
.card_content > h3 {
margin: 0;
font-size: 1.5rem;
font-weight: bold;
}
.card_content > footer {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
}
<div class="card">
<div class="card_img"><img src="https://picsum.photos/100/100"></div>
<div class="card_content">
<h3>Joe Schmoe</h3>
<p>Lorem ipsum dolor sit amet ... </p>
<footer>
<button>Button</button>
<span>some text here</span>
</footer>
</div>
</div>
This problem is actually on a populated website as well, www.godaddy.com. When you zoom in or if you're on a mobile device, the right of the banner is cut off. If you're on a computer and you're viewing the page full sized, there is no problem. My website is: www.clinkstr.tk
Here's the CSS code:
#pageTop {
background:#006DD9;
background-repeat: repeat-x;
background-size: 100% 100%;
background-position: 0 0;
width: 100%;
height: 50px;
border: 0;
}
Some f the code is probably unnecessary because of me repeatedly trying different things to fix it.
Also, when you zoom in, the website seems to get a little bit messed up and things start to go out of place like the light gray background (which is suppose to be centered). Is there a way to fix this?
Well, for starters #pageTopWrap is gonna need max-width: 100% or that width: 1100px; declaration is gonna make it overflow every time.
In fact, you've got widths declared in inflexible pixels for a ton of things. width is very heavy-handed. You'll have to override each with max-width declarations. That iframe is gonna cause some headaches too. If you don't mind dealing with things getting cut off, you could put overflow:hidden; on #pageMiddle, which will force that element to hide anything that overflows it (pretty straight-forward).
I have a fairly simplistic website that I have setup for a phone, tablet, and desktop. Using media queries to format the CSS accordingly. Challenge is the site is PHP based, dynamic, and doesn't use the full width of the screen. Page has two tables, side by side, left justified, each 500px in width. So my desktop for instance is 1388px wide. Centering the title makes it off center from the middle of the two tables. So I added:
.centering {width:1020px; padding-top:5px; border:0; margin-top:2px; text-align: center; font-size: 1.6em; font-family: Sans-serif; font-weight:bold;}
to the paragraph tag for the title on the top of the page. OK great, I just hard coded the placement. Have a .centering for each media query with various widths as the table widths vary per device. So it works, have one for desktop, one for the iPad landscape, one for iPad portrait (portrait tables adjust one on top, one underneath), various iPhone versions and some general ones. On the iPad landscape and desktop there is one problem.
I mentioned it was PHP and dynamic. A user can pass along in the PHP URL, that they do not want to see the second table. (ex. http://www.myurl.com/test.php?showsecond=0). Well that's great, however now I have one table of 500 pixels, and a title centered based on a width of 1020px. But the width is now only 500px. I tried loading various styles dynamically based on what was set, but for some reason when I load a style from file, as opposed to being in the physical page, it had some weirdness. Like extra space between two lines of text. Anyway, is there any suggestions how to deal with this title? Is there an element like a div or something I can place around the entire page, that will determine the current page width (based on content), and the title centered will automatically fit into it correctly without having to hard code width information for it? Especially with the dynamic changing width of a page even in the same orientation on the same device?
Here's some addition imagery as I guess I'm being told I write to much. On the desktop I have a webpagge with two pictures:
IF THE WEBSITE LET ME POST PICTURES, YOU WOULD SEE A LEFT JUSTIFIED TWO TABLES WITH A LOT OF WHITE SPACE ON THE RIGHT OF THE BROWSER WINDOW.
When the PHP is set thru the URL to not display the second table I get:
IF THE WEBSITE LET ME POST PICTURES, YOU WOULD SEE A LEFT JUSTIFIED SINGLE TABLES WITH A LOT MORE WHITE SPACE ON THE RIGHT OF THE BROWSER WINDOW.
As you would have seen, the title doesn't recenter based on the smaller content and the page doesn't use the full screen with so don't want it to center by "page width".
Here is my media query to do the initial center
<code><pre>
#media only screen and (min-width : 1224px)
{
th { font-size: 1.6em; font-family:Sans-serif; }
td { font-size: 1.65em; line-height: 1em; font-family:Sans-serif;}
h1 { font-size: 1.75em; line-height: 1.5em; }
h2 { font-size: 1.25em; }
table { width: 500px; align: left; }
.centering {width:1020px; padding-top:5px;
border:0; margin-top:2px; text-align: center;
font-size: 1.6em; font-family: Sans-serif;
font-weight:bold;}
}
</code></pre>
And my PHP to output the title:
echo "<p class='centering'>Pool Mining: " . strtoupper($obj['multiport']['mining']) . "</center></p>";
ThoughTs?
Thanks.
Set the style as:
<h1 style="text-align: center;">You title</h1>
If you think that browser fails to center your text then check your tables to be centered, if not check you glasses ;)
This is somewhat a very peculiar situation to me. Am not sure yet as to why this is happening but here goes. I have a particular div tag with class="sidehead" This class has some style attached as shown below
<style>
.sidehead {
background: none scroll 0 0 #105289;
//border-radius: 15px 15px 15px 15px;
color: #FFFFFF;
font-weight: 700;
padding: 3px 15px;
margin: 5px;
text-shadow: 0 0 2px #000000;
}
</style>
Now the purpose of this div is style the header of every item in the sidebar. however when I add 2 back to div's the blue color gets smeared over the previous div also. I am not sure as to why this is happening.
You can check the flawed effect on http://mashup2.sunnydsouza.com. Just check the sidebar and you will realize what i am talking about. The 2 items I am talking about are fetched using include() statements in php. They are the same scripts called twice.
echo '<div class="sidehead">Most Popular articles</div>';
include('widget_2.php');
echo '<br>';
echo '<div class="sidehead">Random articles</div>';
include('widget_2.php');
Can someone please help me solve this problem. Dunno why the blue color spreads over the first div also :(
It appears the problem is related to the floated items under the headings.
Try making that br one that clears, eg. <br style="clear:both">.
echo '<div class="sidehead">Most Popular articles</div>';
include('widget_2.php');
echo '<br style="clear:both">'; //CHANGE HERE
echo '<div class="sidehead">Random articles</div>';
include('widget_2.php');
This works for me when I change it in the inspect element console with Chrome.
Each of the elements brought in by your include statements have a style of 'float: left'. Removing them, (under 'Most Activities' and 'Recent') does the trick.
I examined it quickly, though I did not pin-point the exact error, I notice a lot of things you can do in order to improve code quality and ease debugging your error.
Firstly, <center> is, I believe, deprecated. Use <p align="center"> or use CSS instead.
Secondly, <br> is wrong, it should have been <br></br> , or alternatively <br />, although this is likely to be ignored by most browsers, it is not W3C compliant, and it is important to create a good habit.
Thirdly, your CSS is everywhere, this is bad. You see, there are three ways to do CSS,
(1) inline
<div style="some css here" >
(2) external file
<head> <link ...."yourCss.css" > </head>
(3) document-wide
<head> <style>some css here </style></head>
Avoid using all three methods, all mixed up, in different locations. Generally the best way is to use class and id to identify all elements you want to style, then have their css properties defined in an external CSS.
The problem seems to be CSS scope, the above methods each has different "scoping priority", so having them mixed up really complicate the priority of which style is applied to an element. Hope this helps.
//border-radius: 15px 15px 15px 15px;
above css style ignore
Use below
/*border-radius: 15px 15px 15px 15px;*/
Not sure but only css problem, its working
Removing float:left; from the Most Popular Articles container worked for me in Firefox.
Ok so this might be very basic but I'm struggling here.
I've got limited space but I need a comments board so I need to be able to scroll through messages. I've got my database and php setup and the messaging works fine. I've done the layout with div's so that all the comments are within the master comments div with is set to overflow: hidden, hiding the messages that don't fit. Every message is then formed as a div (which has 2 div's inside for subject/sender and comment sections). Each of the message div's is automatically given an id by the script so I have something to target here.
What I would like to do is to have the messages scroll so that when you click 'down', the topmost message will disappear and the messages will move in line so that the next one is now topmost. Is this possible? I tried to play around with childNodes but couldn't get it to work.
Also, does my layout solution make any sense? Should I change it to lists?
CSS is
#kommentit { // <- all comments
position: absolute;
margin-top: 50px;
margin-left: 475px;
width: 400px;
height: 400px;
overflow: hidden;}
.sitoja { // <- this is the single comment binder
position: relative;
width: 400px;
background: #fff;
border-radius: 10px;
padding: 0;}
I assign id for every message so I get
<div class="sitoja" id="[i]">
in php
echo '<div class="sitoja" id="'.stripslashes($info2->id).'">';
You can view the dummy of the message board here: http://pohjis.site40.net/testi.php
There are many ways to do it.
The simplest is changing overflow: hidden; to overflow: scroll;.
You can also display: none; the topmost comment to make the lower ones move up.
And you can scroll the div with javascript.
BTW, with some adjustment of the css you don't need position: absolute; - not using that will make designing things easier.