How can I avoid line breaks in a div when I use a php funcion. My code is HTML is
<div class="toolbar">
<div style="float:left; ">
Profile <?php get_search_form(); ?>
</div>
</div>
and my code in css is
.toolbar {
background: #F2F2D7;
width: inherit;
font-family: "Palatino";
padding-top: 5px;
padding-bottom: 5px;
position: fixed;
top: 0;
box-shadow: 0px 4px 9px 2px #888888;
z-index:2;
white-space: nowrap;
}
with that I obtain something like:
<p> Profile </p> <p> Buscador </p>
<p> and what I want is </p>
Profile Buscador
It depends on what get_search_form() is returning. If it is returning a string, then you may need to look at the applied styling for the containing div.
If it is returning an an HTML fragment (e.g., <span>your result</span>), you may need to adjust the results to not include any embbed div tags.
It sounds like your looking for the <span> tag. Its used to divide segments of HTML for styling.
Yes, as user197092 said, this is a php problem, and if it is a predifined function it could be hard to adjust the result to not include embbed div tags. I solved it using flex, my code is:
<div id="toolbar">
<div id="toolbar1">
Profile
</div>
<div id="toolbar2">
<?php echo get_search_form(); ?>
</div>
</div>
and for CSS
#toolbar {
display: flex;}
#toolbar1 {
flex: 1;}
#toolbar2 {
flex: 2;
margin-left: 10px; }
this worked for me
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>
apologies for my bad title explanation. I've got a code which I'm trying to restyle, part of which is below. The PHP document I'm using does a (JSON) query to get active "boxes" to show up on screen, and automatically orders them as a list. I want the queried boxes in 2 columns, it doesn't have to be an ordered list.
Problem is, there is no li class in my .php file so I'm thinking I'll have to edit one of the classes below to achieve this?
<div class="x-container max width agent-container" style="margin: 0px auto;padding: 0px;">'
<div class="x-column x-sm x-2-3";>
Is there a way to "add" li to the CSS or is there another way around it?
I know I can use a code like
display: block;
width: 50%;
float: left;
to add to my li class.. but I'd still need a li class right? Any help is greatly appreciated!
<div class="entry-content content homepage-agents">
<?php while(have_posts()): the_post();?>
<?php the_content();?>
<?php endwhile;?>
<div class="x-container max width agent-container" style="margin: 0px auto;padding: 0px;">
<div class="x-column x-sm x-2-3";>
<div class="agent-data">
<?php
/**
* Detect plugin. For use on Front End only.
*/
require_once(ABSPATH . 'wp-admin/includes/plugin.php');
if(is_plugin_active('consulenten-plugin-business/consulenten-plugin-business.php')): $jm_cplb = new ConsulentenpluginBusiness(); endif;
if(is_plugin_active('consulenten-plugin-lite/consulenten-plugin-lite.php')): $jm_cplb = new ConsulentenpluginLite(); endif;
$array_boxes = (array)$jm_cplb->jm_cplb_loadjson();
This is some css..
}
.agent-container {
margin-top: 60px !important;
margin-bottom: 60px !important;
}
.agent-item {
width: 100% !important;
margin-bottom: 60px;
}
I have a problem with some HTML elements. I have an image and a title in a <header> tag - they should both move independently to each other, however when I move the img element down 40px with the margin-top attribute - the title seems to move down 40px with it. So I add margin-top: -20px; to move it back up and it seems to stay put.
Here's my code:
The header file:
<div class="page">
<header>
<div class="titlesec">
<img class="circular" src="themes/default/image.jpg" />
<a class="logo" href="<?php echo base_url(); ?>">
<?php echo site_name(); ?>
</a>
</div>
<div class="split"></div>
</header>
The footer file:
<footer>
<p>© Copyright <?php date("Y"); ?> Duncan Hill</p>
</footer>
</div>
</body>
</html>
and my css:
.page {
width: 80%;
margin-left: 10%;
margin-right: 10%;
}
.logo {
font-family: 'Helvetica Neue';
font-weight: 100;
font-size: 56px;
text-decoration: none;
color: #555555;
margin-top: -20px;
}
.split {
height: 1px;
background-color: #CCCCCC;
}
.circular {
margin-top: 40px;
width: 80px;
height: 80px;
border-radius: 150px;
-webkit-border-radius: 150px;
-moz-border-radius: 150px;
}
.titlesec {
height: 150px;
}
Any help is appreciated immensely!
img and a are inline tags. Which means they are in the same line. Adding margin-top manipulates this line, and affects therefore both of them.
Depending on what you want to do, you could solve this with surounding both elements with their own div. Then you can style the divs independently. Maybe a float on those divs comes in handy, too.
Close your "page" DIV. It seems that your not properly closing your html tags.
I am retrieving a list of products from a database and want to display them all in a rows of 3 columns not using a table though. So I want 3 divs to be displayed side by side. then below.
<div class="productindividualdisplay">
<div class="productphoto">
<img src="http://3.bp.blogspot.com/-_xP-UUa4D0c/UfAo1eYxURI/AAAAAAAAAT4/xsibNtxZceQ/s320/Books.jpg" alt="Smiley face" width="250" height="250"></p>
</div>
<div class="producttitle">
<?php echo $row['title'] ?>
</div>
<div class="productprice">
<?php echo "<div id='productrrp'> €" . $row['rrp'] . "</div>";
if(is_null($offeringprice)) {
echo "Not Available";
} else {
echo "€" . $offeringprice['price'];
}
?>
</div>
That is my code but it is just displaying the divs below each other. Is it possible so it fills up the row before starting another one?
Try using display: inline-block; on the divs's css.
A <div> is a block-level element. Block-level elements, like <h1>, <p>, <table> etc. will (by default) span the entire width of their parent elements, so they can't be positioned next to eachother.
You can change this behavior, however, using the following CSS rule:
div.column {
display: inline-block;
}
This will render the <div>s as inline blocks.
Now you can give it a certain width so that three divs fit into a row. Do note that, when you leave whitespace between two <div> elements, there will be some visual whitespace. If you give all div's a width of 33.333333333%, the extra whitespace will cause their combined width to exceed 100%, so the third div will move to the next line.
You can simply prevent this by making sure there is no whitespace between the HTML elements:
<div class="column">
<p>Some contents here</p>
</div><div class="column">
<p>As you can see, no whitespace between the two div elements.</p>
</div>
Of course you can then use margins to control whitespace manually:
div.column {
display: inline-block;
width: 30%;
margin-right: 3.33333333%;
margin-bottom: 10px;
}
You might wanna take a look at this article: Using inline-block to Display a Product Grid View (it uses <li>s instead of <div>s, but the idea is essentially the same)
Here's a FIDDLE
<div class="product-wrapper">
<div class="productindividualdisplay">
<div class="productphoto">
<img src="http://3.bp.blogspot.com/-_xP-UUa4D0c/UfAo1eYxURI/AAAAAAAAAT4/xsibNtxZceQ/s320/Books.jpg" alt="Smiley face" width="250" height="250">
</div>
<div class="producttitle">
Product Title
</div>
<div class="productprice">
<span>$100</span>
</div>
</div>
...more products...
</div>
.product-wrapper {
width: 960px;
padding: 10px;
}
.productindividualdisplay {
background: #fff;
display: inline-block;
width: 260px;
margin: 5px 5px 15px 5px;
padding: 10px;
text-align: center;
border: 1px solid #999;
box-shadow: 0 5px 6px -3px #333;
}
.productphoto {
width: 95%;
margin: 10px auto;
border-bottom: 1px solid #999;
}
.producttitle a {
font-size: 18px;
text-decoration: none;
}
.productprice {
font-size: 18px;
font-weight: 600;
}
i am new to css .. i can easily fetch the suggestions from the back end to the suggestion div.
Height of suggestion div is set to height:auto as it is adjusted automatically depending on the suggestion as shown
<div class="suggestBox">
<div class="suggestionsBox" style="margin-left:16px">
<div class="suggestions bordered" style="height: auto; max-height: none; width:100%; overflow: hidden; padding: 0px; ">
<div class="jspContainer" style="width: 100%; height: 0px; ">
<div class="jspPane" style="padding: 0px; top: 0px; width: 100%; ">
<div class="items_block"></div>
<div class="users_block"></div>
</div>
</div>
</div>
</div>
but as it's height is altered i.e grown .. the elements under the suggestion box or div are scattered or something like that ... do i have to change something in CSS ..
//THANX
For maintaining depth of layers in CSS there is z-index property.
Try giving it position:absolute; to remove it from the document layout.
See this tutorial: http://www.barelyfitz.com/screencast/html-training/css/positioning/