I'm trying to layout field labels and values like this:
Name: Bob
Age: 25
Occupation: Code Monkey
The relevant HTML is
<div class="field">
<span class="reset">End Time:</span>
<span>05:00pm</span>
</div>
<div class="field">
<span class="reset">Items:</span>
<span></span>
</div>
<div class="field">
<span class="reset">Repeats:</span>
<span>Never</span>
</div>
And the relevant CSS is:
div.field {
margin-bottom:10px;
}
span.reset {
display: block;
float: left;
margin-right: 0.5em;
text-align: right;
}
Unfortunately, the "Repeats" field is being shown on the same line as the "Items" field. I verified that this only happens when the value of the "Items" field is empty <span></span>.
I tried added clear: left to span.reset, and while this stops two fields appearing on the same line, it totally messes up the alignment of the labels and fields.
Is there any way I can fix this problem without drastically changing the XHTML?
Thanks,
Don
Add this to your CSS clear: left;:
div.field {
clear:left;
margin-bottom:10px;
}
This will force it to the next line below.
If you want all these to line up you're going to have to give the label (reset?) a fixed width either directly or indirectly. Try this:
div.field { overflow: hidden; }
div.field span { margin-left: 150px; display: block; }
span.reset { float: right; width: 150px; margin-left: 0; text-align: right; }
Related
I am designing a simple two-column layout with CSS Grid; the grid areas are named Cell1 and Cell2. In the left column (Cell1) I want a list of hyperlinks; when a hyperlink is clicked, I want the content to open in the right column (Cell2).
I think I could use bookmarks to content already loaded into Cell2, but I prefer a way to display content in the right cell when a link is clicked, without using bookmarks.
Using a CSS Grid layout, is there any way to designate a cell where content should go when a hyperlink is clicked, other than the cell that contains the hyperlinks -- using bookmarks or anything else?
Thanks very much for any info.
Yes, this is possible, but is much easier to do if you are permitted to use JavaScript/jQuery. Here is an example of using HTML and CSS only to accomplish what you need:
a {
text-decoration: none;
color: #333;
}
.tabs {
position: relative;
clear: both;
}
.tabs .tab {
float: left;
margin-right: 10px;
}
.content {
position: absolute;
background-color: white;
width: 100%;
left: 0px;
}
.tabs .tab:nth-of-type(1) .content {
z-index: 1;
}
.tab:target a {
font-weight: bold;
}
.tab:target .content {
z-index: 1;
}
<div class="tabs">
<div class="tab" id="tab1">
Tab 1
<div class="content">Content of Tab1</div>
</div>
<div class="tab" id="tab2">
Tab 2
<div class="content">Content of Tab2</div>
</div>
<div class="tab" id="tab3">
Tab 3
<div class="content">Content of Tab3</div>
</div>
</div>
This is the example:
I want to align the image along side with the name but somehow the image just floats up a little higher. Any help?
UPDATE:
#profile_name_header {
background-color: #006400;
font-family: Century Gothic;
color: #FFFFFF;
font-size: 20px;
padding-bottom: 12px;
padding-top: 12px;
padding-left: 10px;
}
<div id="profile_name_header">
<img src=< ?php echo "./img/".$genderprofile. ""; ?> style = "height:30px; margin-bottom:0px;" >
<?php echo $fullname; ?>'s Profile
</div>
Thank you.
Use vertical-align on the img since it's adjacent inline content.
img {
vertical-align: middle;
}
<img src="https://lh4.googleusercontent.com/-EK1g7sBpX74/AAAAAAAAAAI/AAAAAAAAABU/AzsjRnL3mKk/photo.jpg?sz=32"> #Dranreb
A fancier way is to use flexbox, but it's overkill for your use case. If you wanted to do that, just give them a parent, and use align-items to affect vertical alignment.
div {
display: flex;
align-items: center;
}
<div>
<img src="https://lh4.googleusercontent.com/-EK1g7sBpX74/AAAAAAAAAAI/AAAAAAAAABU/AzsjRnL3mKk/photo.jpg?sz=32"> #Dranreb
</div>
There is a CSS Property called vertical align, which can be used to align several html elements in respecr to the text baseline. I'd suggest you set it to center, but try and see what fits best.
(Some further reading about the conflicts among devs.)
Assign one class name to the image. For e.g.
<img class="backgroundImg" src="images/bg.jpg" />
Then use these css properties:
.backgroundImg {
position: relative;
top: 5px; // or 10px
}
Based on your text leveling, just adjust the "top" value.
Note:You can also use "id" and assign the same css properties.
Try this code with proper HTML Markup......
*{
margin: 0;
padding: 0;
}
figure{
width:620px;
display: block;
margin:0 auto;
}
figure img{
display: block;
width: 100%;
height: auto;
}
figcaption{
text-align:center;
}
<figure>
<img src="https://unsplash.it/600/280" alt="">
<figcaption>
<small>Image Caption goes here</small>
</figcaption>
</figure>
I m having problem with css of a tooltip. Tooltip belongs to an input field and if an other checkbox is checked, this tooltip needs to be placed correctly on the input field. so the check box is :
<input type="checkbox" id="telefonBox" />
and the input field which tooltip needs to be placed :
<input type="text" class="form-control tooltip-berater" id="agentName"/>
What i tried is
input[id=telefonBox]:checked + .tooltip-berater + .tooltip > .tooltip-inner {top: 875px !important; left: 30px; max-width:300px;}
(Basically i m trying to write: if a checkbox with this id checked, then do some stuff in this css classes)
But doesnt function at all. What am i missing?
If both inputs are children of the same div, but not directly next to each other (in the HTML markup) then you need to use ~ operator instead of +.
+ works like:
<div class="parent">
<div class="first"></div>
<div class="second></div>
</div
.first + .second {
// do stuff with second
}
~ works like:
<div class="parent">
<div class="first"></div>
<div class="inbetween"></div>
<div class="second"></div>
</div
.first ~ .second {
// you can still do stuff with second
}
There is no selector which would help you in other cases possible in your HTML markup, especially:
When .second div is placed earlier than .first
When .second div has different parent from .first
In those cases you will need to use JavaScript to select and change your element's CSS.
Heres a fiddle i made that changes colour of input box: https://jsfiddle.net/8we5u1vs/
Is that the kind of thing you want? Obviously its much simpler than what you're talking about. You havnt added much code so hard to tell, could you show code or fiddle for an example of the tooltip?
input[id=telefonBox]:checked + .tooltip-berater {
background-color:red;
}
You can try this way, but text input is still available via tab key.
div {
display: inline-block;
position: relative;
line-height: 1.25em;
border: 1px solid;
background: white;
}
input[type=text] {
border: 1px solid white;
line-height: inherit;
}
span {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
text-align: center;
display: none;
border: 1px solid white;
background: white;
}
input[type=checkbox]:checked + div span {
display: block;
}
<input type=checkbox>
<div>
<input type=text>
<span>N/A</span>
</div>
I'm looking for the simplest way to break up a collection of inline-blocked divs without resorting to extra markup (such as br).
I started off naively thinking that the following would do the trick except that 'four' ends up on a line of its own as well which I don't really understand.
.inline {
display:inline-block;
}
.newline {
display:block;
}
<div class="inline">one</div>
<div class="inline">two</div>
<div class="inline newline">three</div>
<div class="inline">four</div>
I have tried solutions using :after/:before found here on Stackoverflow but these only work for me if my elements are inline instead of inline-block.
Regrettably I also need to support IE6!
Attempt with floats
This example below does not display properly in IE 6
.inline {
float: left;
width: 50px;
height: 50px;
background: #F00;
}
.newline {
clear: left;
}
<div class="inline">one</div>
<div class="inline">two</div>
<div class="inline newline">three</div>
<div class="inline">four</div>
The result in IE 6
For IE6 and other old browsers you need to add a clear line for example using this code:
<div class="inline">one</div>
<div class="inline">two</div>
<div class="visualClear"></div>
<div class="inline">three</div>
<div class="inline">four</div>
.inline {
float: left;
width: 50px;
height: 50px;
background: #F00;
}
.visualClear {
clear: both;
display: block;
}
I know that it isn´t very pretty but it will work for you.
I have a problem with my web form fields not lining up properly.
see screenshot: http://awesomescreenshot.com/00cw0c80e
The label is longer than normal BUT I need it to be that long. If I shorten the label, it lines up find as expected.
Anyone can help?
Thanks! :)
ps. I've looked at various samples in the net but no go.
my css
input.issu {
margin-bottom: 8px;
width: 220px;
}
label.issu {
display: block;
float: left;
margin-bottom: 8px;
padding-left: 10px;
padding-right: 10px;
width: 270px;
text-align: left;
vertical-align: top;
}
select.issu {
margin-bottom: 8px;
width: 240px;
}
br.issu {
float: clear;
}
my html code (I've tried with and without div tags)
<div>
<label for="departingFrom" class="issu">Direct flight into Singapore from (please name city)<span class="red">* required</span></label>
<input id="departingFrom" name="departingFrom" class="issu" value="" type="text">
<br class="issu">
</div>
<div>
<label for="additionalInfo" class="issu">Additional info(e.g. accompanying family members)<span class="red">* required</span></label>
<input id="additionalInfo" name="additionalInfo" class="issu" value="" type="text">
<br class="issu">
</div>
add overflow:hidden property to container div of label and input as follow. It will work fine.
css:
div{
overflow:hidden
}
Use a table, putting the labels in one column, input fields in another. Then set vertical-align on the cells as desires (there are different interpretations on what “lining up” means in a case like this).