I have a word spacing issue which I cannot seem to resolve.
The web page is www.c5d.co.uk/captaintwo.php
The word spacing under the top images look ridiculous. Yet as far as I can see, the CSS is the same.
What am I missing ? If I put a /p tag after Wrigley it works fine but fails validation as there is no opening p tag
Relevant HTML and CSS is as follows:
.captain{word-spacing:185px;display:inline;}
.pres {display:inline; }
.ladycaptain{word-spacing:120px;display:inline; }
<img class="lewis" src="http://www.c5d.co.uk/captain.png" alt="The Captain">
<img class="socialtwo" src="http://www.c5d.co.uk/president.png" alt="President">
<p class="pres">
<br>Captain: John</p> <p class="captain">Lewis President:</p> Bill Wrigley
<img class="lewis" src="http://www.c5d.co.uk/ladycaptain.png" alt="Lady Captain">
<img class="socialtwo" src="http://www.c5d.co.uk/juniorcaptain.png" alt="Junior Captain">
<p class="pres">
<br>Lady Captain: Beryl</p> <p class="ladycaptain">Harrison Junior</p> Captain: Kieran Metcalf
Make the following changes:
.pres {
/* display: inline (remove) */
display: inline-block;
width: 270px;
text-align: center;
}
.captain {
/* display: inline (remove) */
display: inline-block;
width: 270px;
text-align: center;
}
<br> is outdated. Use the self-closing <br /> instead. The names should be wrapped in something (p, span, h3, something). There are 2 styles (one inline (inside the document) and one attached to #header) that are adding around 500px of space there. That's why there is a large gap.
Consider making it easier on yourself.. use 1 class to define each TYPE of object.
#people {
styles for container div
}
.box {
styles for the individual boxes
}
.photo {
styles for <img>
}
.title {
styles for names of people
}
Then just apply the classes to the appropriate item like so
<div id="people">
<div class="box">
<img src="path/image.jpg" class="photo" />
<h3 class="title">Position, name</h3>
</div>
<div class="box">
<img src="path/image.jpg" class="photo" />
<h3 class="title">Position, name</h3>
</div>
etc...
</div>
Related
In short.
I have something like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<html>
<head>
<style>
.vertical_panel > .fields > .item {
display: block;
background-color: #344;
}
.horizontal_panel > .fields > .item {
display: inline;
background-color: #FAE;
}
.item {
width: 100px;
height: 50px;
margin: 2px;
}
.fields {
margin: 0px;
padding: 0px;
}
#specialSpan {
display: table;
margin: 0px auto;
}
</style>
</head>
<body>
<div class="horizontal_panel" id = "specialSpan" style="width: 300px; height: auto;">
<fieldset class="fields">
<span class="vertical_panel item" style="width: 300px; height: auto;">
<fieldset class="fields">
<div class="item">
<span>text</span>
</div>
<div class="item">
<span>text</span>
</div>
</fieldset>
</span>
<div class="item">
<span>text</span>
</div>
<div class="item">
<span>text</span>
</div>
</fieldset>
</div>
</body>
</html>
It's an approximation to my code structure. There are more elements inside the fields. So, I have a javascript function which toggles class of panels.
The problem is: I have correct selectors, correct values of style are set(display), but Internet Explorer 8 does not apply it correctly. The items does not change their direction if I call that function. Under “does not change direction” I mean that items does no rendered as display: block or display: inline.
There is a key part: if I open debug tools and enter display: inline for instance manually for panels, almost everything looks fine. But if I have correct view before manual style changes and I have changed the style, I can't change view back to normal in ordinary way — with call of function.
The function is something like:
function SetPanelOrientation(panel) {
// this attribute doesn't exit in example but actually exist in project's code
// and always correct
var isVertical = panel.getAttribute("IsVertical");
if (isVertical == '0') {
$(panel)
.removeClass('vertical_panel')
.addClass('horizontal_panel');
} else {
$(panel)
.removeClass('horizontal_panel')
.addClass('vertical_panel');
}
};
I can see in debugger tools that class changed, but view doesn't change. I've tried many combinations with block and inline-block but have not found working combination.
Due to the doctype you are using, you are in quirks mode, and IE will perform as if it were 1998 all over again. New web pages should not be using that doctype since 1999.
The only way around this is to set the element's CSS properties to how you want them to be versus how other browsers are correctly displaying them.
There was nothing in doctype, nor in property values. Set styles with jquery instead of css file helps.
<article class="tweet-inner">
<div class="text-wrapper">
<div class="tweet">
<div class="text">
<p>Coming down! Time for Croation BBQ </p>
</div>
<p class="last">
<span class="pull-right">
<small> Hello this is first text </small>
<small> Hello this is second text </small>
</span>
</p>
</div>
</div>
</article>
I have the following repeating html structure.
As of now, I want to provide alternate rows with different background. The element which I want to color is class=text
I do the following in my css -
.tweet-inner .tweet .text-wrapper .text:nth-child(even) {
background-color: #FF0000;
}
This does not work, I also tried -
.text:nth-child(even) {
background-color: #FF0000;
}
This is what works -
article.text:nth-child(even) {
background-color: #FF0000;
}
But I want the .text to be alternately colored, not the entire article.
This also does not work.
The fiddle is http://jsfiddle.net/LKqvz/. Please let me know.
It should be:
article:nth-child(even) .text{
...
}
Because you have multiple article elements with a single .text DIV (your attempts select the nth .text child from article)
Try this
article:nth-child(even) .text {
background-color: red;
}
Js Fiddle
try this:
article:nth-child(even) .tweet .text {
background-color: #FF0000;
}
I have tried all sorts to find an answer to this, but what I want to do is have some text centered under two images.
I have tried using a turned into a line, but I cannot get the text to be under the centre of the image. Can any one help me ?
The web page is www.c5d.co.uk/captain.php
The HTML is:
<img class="social" src="http://www.c5d.co.uk/captain.png" alt="Captain">
<img class="socialtwo" src="http://www.c5d.co.uk/president.png" alt="President">
<div><ul class="captain"><li><p>John Lewis: Captain</p><p>Bill Wrigley: President</p> </li></ul></div>
<img class="social" src="http://www.c5d.co.uk/ladycaptain.png" alt="Lady Captain">
<img class="socialtwo" src="http://www.c5d.co.uk/juniorcaptain.png" alt="Junior Captain">
<div><ul class="ladycaptain"><li><p>Beryl Harrison: Lady Captain</p><p>Kieran Metcalf: Junior Captain</p></li></ul></div>
The relevant CSS is
.captain, .ladycaptain { /* ul - controls normal comp results& junior open*/
list-style-type:none;
display:table;
padding:0;
margin:0 auto;
}
.captain li, .ladycaptain li {
display:table-row;
text-align:left;/* ul - controls normal comp results& junior open*/
padding:0;
margin:0;
}
.ladycaptain p {
display:table-cell;/* ul - controls normal comp results & junior open*/
text-align:left;
padding:3px 10px 3px 0; /* padding-right visually separates "columns" */
}
.captain p {
display:table-cell;/* ul - controls normal comp results & junior open*/
text-align:left;
padding:3px 10px 3px 0; /* padding-right visually separates "columns" */
}
.ladycaptain p {
display:table-cell;/* ul - controls normal comp results & junior open*/
text-align:left;
padding:3px 20px 3px 0; /* padding-right visually separates "columns" */
}
.captain p + p {
padding-left:225px; /* padding-left visually separates "columns" */
}
.ladycaptain p + p {
padding-left:180px; /* padding-left visually separates "columns" */
}
Right now you have more HTML and CSS than you need, which is making your code harder to read and fix than it needs to be. Putting the text for each image in their own div will make it easier to center them, and be closer semantically to what you're trying to achieve. Then you can also use far less CSS to make it behave as you want.
Restructuring your HTML and CSS should do the trick:
<html>
<head>
<style>
#officers {
width:554px;
}
.officer {
width:267px;
position:relative;
float:left;
text-align:center;
margin:3px 10px 3px 0;
}
</style>
</head>
<body>
<div id="officers">
<div class="officer">
<img src="http://www.c5d.co.uk/captain.png" alt="Captain" />
<span class="caption">John Lewis: Captain</span>
</div>
<div class="officer">
<img src="http://www.c5d.co.uk/president.png" alt="President" />
<span class="caption">Bill Wrigley: President</span>
</div>
<div class="officer">
<img src="http://www.c5d.co.uk/ladycaptain.png" alt="Lady Captain" />
<span class="caption">Beryl Harrison: Lady Captain</span>
</div>
<div class="officer">
<img src="http://www.c5d.co.uk/juniorcaptain.png" alt="Junior Captain" />
<span class="caption">Kieran Metcalf: Junior Captain</span>
</div>
</div>
</body>
</html>
Remove the margin-bottom of the images.
Increase the height of the ul containing the text.
Set the line-height of that li ( or a group of 'em ) to that height. It will be perfectly centered. Well of course it will be centered vertically, if that's what you want to achieve. Otherwise just setting the text-align to center should do the trick.
Try something like this:
<ul>
<li>
<img class="img1" src="" alt="">
<div>image 1</div>
</li>
<li>
<img class="img2" src="" alt="">
<div>image 2</div>
</li>
<li>
<img class="img3" src="" alt="">
<div>image 3</div>
</li>
....
</ul>
with css
li
{
display: inline-block;
margin: 20px;
}
div
{
text-align: center;
}
Here's a LIVE DEMO
Suggested by #Rob Grzyb :
Try grouping the image and caption into a single container/div and centering the contents. It will be much easier to do if you can restructure the HTML.
Suggested by #Pow-Ian : jsfiddle.net/KV7zT
Edited by me : jsfiddle.net/KV7zT/1 or jsfiddle.net/KV7zT/2/
html
<div style='text-align:center;width:50%;float:left;'>
<img src="http://www.c5d.co.uk/president.png" alt="President" />
<div style="clear:both"> Text Goes Here</div>
</div>
css
.none-needed {css:not needed 'yet';}
I gave up ! and tried something different.
Just have a text spacing error now !
Thanks for all your suggestions
Antony
i have 2 images.My constraint is that I have to put a new div after the end of the 1st image.But they come on different lines.I googled a lot and found that float:left does the trick
I am already using it,but still they are coming in different lines.I dont know where I am going wrong.
Jsfiddle
span.tab {
padding: 0 50px; /* Or desired space*/
}
.span.tab {
display: inline-block;
float:left;
}
#div23 {
display: inline-block;
float: left;
}
#topdiv1 {
display: inline-block;
float: left;
}
#topdiv3 {
display: inline-block;
float:left;
}
html
<br />
<div id='topdiv1'><div id="widget1" class="sticky1">
<div id='topdiv3'>
<img src="https://lh3.googleusercontent.com/-TrGnsESMpDc/AAAAAAAAAAI/AAAAAAAAAAA/lcUg6MaCxmg/photo.jpg?sz=50" />
<div id='div23'>
<span class="tab"></span>
<img src='https://lh3.googleusercontent.com/-TrGnsESMpDc/AAAAAAAAAAI/AAAAAAAAAAA/lcUg6MaCxmg/photo.jpg?sz=50'/>
</div> </div>
Please help.
You don't apply the float to the parent container. You apply the float to the child elements:
#topdiv3 > * {
float:left;
}
http://jsfiddle.net/samliew/b9TWE/1/
If you want to remove the space between the images, remove the span.
http://jsfiddle.net/b9TWE/2/ this fixes it, you just need to have the <a> containing the first image to float
#topdiv3 > a{
float: left;
}
More on how floats work (great article)
By floating the first <a> containing the image you remove it from the regular document flow. the <div> containing the seconds image will resume the normal flow and position itself next to the <a>
Your topdiv3 must be closed before div div23.
<div id='topdiv1'>
<div id="widget1" class="sticky1">
<div id='topdiv3'>
<img src="https://lh3.googleusercontent.com/-TrGnsESMpDc/AAAAAAAAAAI/AAAAAAAAAAA/lcUg6MaCxmg/photo.jpg?sz=50" />
</div>
<div id='div23'>
<img src='https://lh3.googleusercontent.com/-TrGnsESMpDc/AAAAAAAAAAI/AAAAAAAAAAA/lcUg6MaCxmg/photo.jpg?sz=50'/>
</div>
</div>
</div>
http://jsfiddle.net/arunu/8gvvr/
I've tested it on firefox and it worked the way you did.
But anyway, your html markup is a little bit confuse, doesn´t it?
I need to set it with CSS, not jquery.
The selector is for
all labels which do not have a sibling that is a checkbox or radio component.
a sample is:
<span>
<input id="item" type="checkbox">
<label for="item">Data</label>
</span>
This is because i have CSS which sets label to 12px, BUT it affects asp:checkboxes and asp:radio..., but i do not want them to be affected.
There isn't a CSS selector for an element that doesn't have a sibling of a certain kind.
But if you can guarantee that your structure is always an input followed by a label, then you could use the next-sibling combinator with :not() like so to match the label:
input:not([type="checkbox"]):not([type="radio"]) + label
Otherwise you're going to have to add classes to those labels, or use jQuery.
Try adjacent sibling selector:
input[type='text'] + label { // your styles }
You need to apply it to all predecessors you need namely. But there are not many possibilities to use label for besides checkbox and radios you don't want ;)
DEMO
You can select elements based on what kinds of siblings they have, IF the siblings precede your target elements. You can do however much type/selector checking you want on preceding siblings of your target.
You can kind of go backwards using nth-last-of-type and nth-last-child, but you can't do any selector checking on elements which follow your target, and the only kind of type checking you can do on following elements is counting how many there are of the same type.
So in your case you could use:
label {
/* your styling here */
}
input[type="checkbox"] + label, input[type="radio"] + label {
/* remove the styling for labels preceded by a checkbox or radio button */
}
Use ~ instead of + if you expect other elements between your inputs and labels.
Depending on what other elements might be inside the spans that you're working with, any of the 'nth' pseudoclasses may be useful to you.
This would also work for your example, if all you care about is that the labels don't have a preceding sibling:
label:first-child {
/* awesome styles */
}
I submitted an answer to a question that I feel is extremely valuable and along the lines to what you're asking for in this question. Here is the permalink to that question/answer.
https://stackoverflow.com/a/43132408/6167697
The key thing that is missing that may not work for your case is I propose keeping the inputs a child only to what they need to be so that other content can be selector'd using generic sibling selectors. Hypothetically you could still keep them in the span, and then use the labels in various elements inside the span, and that would still allow you treat those labels separate from any others I would think. I'll copy in a code snippet for a working example that demonstrates label elements that are not siblings to their inputs that can still be styled.
* {
padding: 0;
margin: 0;
background-color: #262626;
color: white;
}
.radio-button {
display: none;
}
#filter {
padding: 5% 0;
display: flex;
justify-content: center;
}
.filter-label {
display: inline-block;
border: 4px solid green;
padding: 10px 20px;
font-size: 1.4em;
text-align: center;
cursor: pointer;
}
main {
clear: left;
}
.content {
padding: 3% 10%;
display: none;
}
h1 {
font-size: 2em;
}
.date {
padding: 5px 30px;
font-style: italic;
}
.filter-label:hover {
background-color: #505050;
}
#featured-radio:checked~#filter .featured,
#personal-radio:checked~#filter .personal,
#tech-radio:checked~#filter .tech {
background-color: green;
}
#featured-radio:checked~main .featured {
display: block;
}
#personal-radio:checked~main .personal {
display: block;
}
#tech-radio:checked~main .tech {
display: block;
}
<input type="radio" id="featured-radio" class="radio-button" name="content-filter" checked="checked">
<input type="radio" id="personal-radio" class="radio-button" name="content-filter" value="Personal">
<input type="radio" id="tech-radio" class="radio-button" name="content-filter" value="Tech">
<header id="filter">
<label for="featured-radio" class="filter-label featured" id="feature-label">Featured</label>
<label for="personal-radio" class="filter-label personal" id="personal-label">Personal</label>
<label for="tech-radio" class="filter-label tech" id="tech-label">Tech</label>
</header>
<main>
<article class="content featured tech">
<header>
<h1>Cool Stuff</h1>
<h3 class="date">Today</h3>
</header>
<p>
I'm showing cool stuff in this article!
</p>
</article>
<article class="content personal">
<header>
<h1>Not As Cool</h1>
<h3 class="date">Tuesday</h3>
</header>
<p>
This stuff isn't nearly as cool for some reason :(;
</p>
</article>
<article class="content tech">
<header>
<h1>Cool Tech Article</h1>
<h3 class="date">Last Monday</h3>
</header>
<p>
This article has awesome stuff all over it!
</p>
</article>
<article class="content featured personal">
<header>
<h1>Cool Personal Article</h1>
<h3 class="date">Two Fridays Ago</h3>
</header>
<p>
This article talks about how I got a job at a cool startup because I rock!
</p>
</article>
</main>
That has the added benefit of being pure CSS too! And as per the other post, here's the JSFIDDLE so you can play around with it yourselves.