I'm sure this question has been asked so many times its just not funny but having searched I can't find a solution that fixes my problem just right.
I have several fieldsets on a php page, the content of each one will be a block of text taken from a database. I want to align the text inside the fieldset both vertically and horizontally. The horizontal part is simple with text-align obviously but the vertical alignment is not so simple.
The resulting HTML markup:
<div class="s_container3">
<a href="custom.php?page=19">
<fieldset class="services_title2">
Some Short Text
</fieldset>
</a>
<a href="custom.php?page=18">
<fieldset class="services_title2">
More Short Text
</fieldset>
</a>
<a href="custom.php?page=20">
<fieldset class="services_title2">
Some long text that spills onto the second line
</fieldset>
</a>
<a href="custom.php?page=21">
<fieldset class="services_title2">
More short text again
</fieldset>
</a>
<span class="stretch"></span>
</div>
Below is a link to a jsfiddle I was playing with, it has all extra unrelated CSS stripped out to make sure I didn't have a conflict elsewhere.
jsfiddle example
You can see that the text just sticks to the top of the fieldset. I have tried putting an inner div container and everything else under the sun but I've been staring at this problem for so long it just isn't making sense to me anymore so I'm probably missing a simple solution.
Any help would be greatly appreciated, I'm open to any approach that'll move the text!
If anymore information is needed just ask!
Thanks in advance
You can set line height to your fieldset class, so:
html, body {
height:100%;
}
div {
margin-left:auto;
margin-right:auto;
margin-top:0px;
margin-bottom:0px;
}
div.s_container3 {
width:570px;
text-align:justify;
}
fieldset.services_title2 {
border:none;
font-size:1.3em;
width:215px;
min-height:45px;
vertical-align:middle;
text-align:center;
color:#ffffff;
background-color:#1c86b5;
margin-top:10px;
margin-left:auto;
margin-right:auto;
display:inline;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
line-height: 45px;
}
.stretch {
width:100%;
display:inline-block;
font-size:0;
line-height:0;
}
a {
text-decoration:none;
}
http://jsfiddle.net/5H6Lf/
Related
As I've been answering questions, I've noticed a lot of code examples that show tags like <span></span> with nothing between the tags. What's the point? If there isn't anything between the tags, wouldn't the tag be pointless? I realize that many of them are simply examples, but there also seem to be a number of people that think it's "okay" to writhe the code that way. Is this a "thing" now?
Tags provide the directions or recipes for the visual content that one sees on the Web, they can be stylished by CSS, targeted, modified, injected via Javascript so they can have a utility even if they are empty, it depends on the context.
As you did not provide any particular context, here is an example of text and colored shapes displayed with only empty <span> tags:
span{
display:block;
width:50px;
height:50px;
background-color:yellow;
border-radius: 100%;
}
span:first-child{
margin-top:20px;
background-color:red;
}
span:last-of-type{
background-color:green;
}
span:first-child::after{
content: "Dare to say to this cute traffic light that he is pointless 😦";
position:absolute;
top:0;
}
span:first-child::before{
position:absolute;
background-color:black;
height:150px;
width:50px;
z-index:-1;
content:"";
}
span:last-of-type::before{
position:absolute;
background-color:black;
height:150px;
width:20px;
z-index:-1;
left:22px;
top:150px;
content:"";
}
<span></span>
<span></span>
<span></span>
The main page I'm working with uses php and has a number of divs on it. I need to set up an external XML file that will contain "div1" "color1" through "div4 "color4" (then I'll need to use a button to read the xml data and "use it to change the colors" of those 4 divs on the main page). I've gone through the xml tutorials on w3schools with a fine tooth comb and can't for the life of me figure out how to write the xml code to define the colors for the divs. If I can get that first part(!) then I should be able to figure out how to write a function to do the rest. If anyone can help, I would be so extremely grateful.
Here is my HTML code:
<div id = "div1">
<p>This will be a mini sidebar </p>
</div>
<div id = "div2">
</div>
<div id = "div3">
</div>
<div id = "div4">
</div>
The initial background colors are set with a CSS external file:
#div1 {
line-height:30px;
background-color:#eeeeee;
height:300px;
width:100px;
float:left;
padding:5px;
}
#div2 {
background-color:pink;
height:30px;
width:50px;
float:right;
padding:5px;
}
#div3 {
background-color:orange;
height:200px;
width:70px;
float:left;
padding:5px;
}
#div4 {
background-color:blue;
height:100px;
width:200px;
float:right;
padding:5px;
}
thanks for assisting.
I'm having an issue in which my DIV class named box-2 is only applying itself to the title of the section, even though I closed it around the entire code. I'm very new to PHP, so I'm wondering if there is something I'm overlooking.
<div class="box-2 shadow">
<?php if (get_field('highlights')) { //Sub speciality ?>
<div itemprop="Restuarant Highlights">
<h3 class="content-title">Highlights</h3>
<ul>
<?php $terms = get_field('highlights'); ?>
<?php foreach ($terms as $term){ ?>
<li><div class="sl-highlights"><span class="icon-ok-circled"><?php echo $term->name; ?></span></div></li>
<?php } ?>
</ul>
</div>
</div>
<div class="clearboth"></div>
<?php } ?>
I need the box-2 class to be applied to everything, as it spaces out the entire section for me.
EDIT: This pulls the data from a taxonomy, and displays it like:
Bananas Apples Pears Lemons Grapes
Peaches Strawberrys
Here is the CSS:
.box-2 {
width: 100%;
border-top: 1px solid rgba(0,0,0,.05);
margin-bottom: 7px;
padding: 12px 0 3px 0;
}
.sl-highlights {
float: left;
margin-right: 4%;
font-size: 14px;
min-width: 135px;
line-height: 25px;
}
.content-title {
font-size: 18px;
color: #444;
padding-bottom: 9px;
font-weight: bold;
font-family: 'HelveticaNeue','Helvetica Neue',Helvetica,Arial,sans-serif;
}
Thank you very much for any and all help!
Anytime you apply a float style to an element, you remove it from the normal document flow; basically, the element doesn't reserve the space it normally would. Since that's what normally defines the height of it's container, the container tends to collapse to the height of the next element that is in the normal flow.
In your case, since all of the elements that have content are floated, box-2 collapses to a zero height. If you want it to still contain the floated elements, add an overflow: auto; rule to .box-2.
You can simplify your markup a bit by eliminating the <div> elements that currently have the sl-highlights class and instead apply the class to the <li> elements. I'd probably add a display: block rule too, since technically it's invalid to have a block-level element (the <h3> tags) inside an inline element (the <li> element).
I have two divs floated left so that they appear next to each other. They are both populated with dynamic content so that for some users the left div may have more items and height and for others the right div might be longer.
I want to put a border in between the two divs so that it is border-right on the left div if the left div is longer or border-left if the right div is longer.
My thought is to do this at run time so that the php code checks the # of items in each div first and then proceeds to add the appropriate in line style tags to the appropriate divs. It will probably work but I'm wondering if there's an easier way to do this through css?
What you can do is set the two divs to overlap by their border width, and set a border-right on the leftmost float, and a border-left and position: relative on the rightmost float. Then the line will appear to grow with the longest one, but in actuality it is 2 overlapping borders.
I set up two examples on jsfiddle so you can see them. But I am attaching the CSS here. I used horribly obvious colors just to make it clear what I am showing.
Links to JSfiddle complete code:
http://jsfiddle.net/8nU6K/1/
http://jsfiddle.net/8nU6K/2/
.container{
overflow:hidden;
background-color:red;
width:350px;
}
.left, .right{
padding: 3px;
float: left;
margin: 0;
background-color:white;
width: 150px;
}
.left{
border-right:10px solid green;
}
.right {
position:relative;
left:-10px;
border-left:10px solid blue;
}
Don't try guess how big things will be on the server, that'll just lead to frustration and bugs. An easy client side solution is to do this:
Put a left border on the right box and a right border on the left box.
Make the borders the same width and color.
Add a negative left margin on the right box that has the same width as the border.
Use padding inside boxes to simulate spacing between them.
Demo HTML:
<div class="a">
<ul>
<li>Where</li>
<li>Is</li>
<li>Pancakes</li>
<li>House</li>
</ul>
</div>
<div class="b">
<ul>
<li>No</li>
<li>One</li>
<li>Uses</li>
<li>The</li>
<li>Two</li>
<li>Cent</li>
<li>Stamps</li>
</ul>
</div>
<br style="clear: both;"><br>
<div class="a">
<ul>
<li>No</li>
<li>One</li>
<li>Uses</li>
<li>The</li>
<li>Two</li>
<li>Cent</li>
<li>Stamps</li>
</ul>
</div>
<div class="b">
<ul>
<li>Where</li>
<li>Is</li>
<li>Pancakes</li>
<li>House</li>
</ul>
</div>
And some CSS (the border colors are just for illustration):
.a {
float: left;
border-right: 1px solid red;
padding-right: 10px;
}
.b {
float: left;
border-left: 1px solid green;
padding-left: 10px;
margin-left: -1px;
}
And a live example: http://jsfiddle.net/ambiguous/X8J5p/
I have click-able images in my html page that call a javascript function... however nobody is clicking on them as they do not look click-able... how can I make them click-able without using an tag around it?
Here is an example of my code...
<div id="bvu11" style="margin: 0px 5px; float: left;">
<span id="bviu11">
<img src="/images/icons/favorites_add.png" onclick="favoritesAdd(2,11,'u')">
</span>
</div>
Using CSS
Add a class to your image (ex: clickable-image) and this in your CSS:
.clickable-image
{
cursor: pointer;
}
Have a look at the css cursor property
<span id="bviu11" style="cursor: pointer;">
As well as adding the cursor:pointer, perhaps some styling to your images/buttons would also make them appear to be links before the user even has to hover over them. Try a simple border, or dropshadow/glow on the images to give them a more 3D effect, making them look more "clickable"! Also, adding a hover state (a different styling to the image/button) really helps.
Change
<div id="bvu11" style="margin: 0px 5px; float: left;">
to
<div id="bvu11" class="spanLink">
and add
.spanLink {
margin: 0px 5px;
float: left;
cursor: pointer;
}
to your css.