Here is my layout,
Summary view http://img689.imageshack.us/img689/2500/yuidtsum.jpg
I am using one div and many spans for getting the above view... Look at all the rows ther are not properly aligned...
<div class="resultsdiv"><br />
<span style="width:200px;" class="resultName">' + employee.Emp_Name + '</span>
<span class="resultfields" style="padding-left:100px;">Category :</span>
<span class="resultfieldvalues">' + employee.Desig_Name + '</span><br /><br />
<span id="SalaryBasis" class="resultfields">Salary Basis :</span> <span class="resultfieldvalues">' + employee.SalaryBasis + '</span>
<span class="resultfields" style="padding-left:25px;">Salary :</span> <span class="resultfieldvalues">' + employee.FixedSalary + '</span>
<span style="font-size:110%;font-weight:bolder;padding-left:25px;">Address :</span>
<span class="resultfieldvalues">' + employee.Address + '</span>
</div>
and my css are
.resultsdiv
{
background-color: #FFF;border-top:solid 1px #ddd; height:50px; border-bottom:solid 1px #ddd; padding-bottom:15px; width:450px;
}
.resultseven { background-color: #EFF1f1; }
.resultshover { background-color: #F4F2F2; cursor:pointer; }
.resultName
{
font-size:125%;font-weight:bolder;color:#476275;font-family:Arial,Liberation Sans,DejaVu Sans,sans-serif;
}
.resultfields
{
font-size:110%;font-weight:bolder;font-family:Arial,Liberation Sans,DejaVu Sans,sans-serif;
}
.resultfieldvalues
{
color:#476275;font-size:110%;font-weight:bold;font-family:Arial,Liberation Sans,DejaVu Sans,sans-serif;
}
Any suggestion to get it aligned properly.... Should i use divs insted of spans to get this
properly aligned...
In my opinion, that is the type of data that should be in a table. It's not layout, it's tabular, repeating data.
Here is a rough cut of some rewritten HTML and CSS. I have not tested this, but it should get you close. Post a screenshot if it doesn't work.
HTML
<div class="resultsdiv">
<div class="name">' + employee.Emp_Name + '</div>
<div class="category"><span>Category :</span> ' + employee.Desig_Name + '</div>
<div class="salary_basis"><span>Salary Basis :</span> ' + employee.SalaryBasis + '</div>
<div class="salary"><span>Salary :</span> ' + employee.FixedSalary + '</div>
<div class="address"><span>Address :</span> ' + employee.Address + '</div>
</div>
CSS
.resultsdiv { color: black }
.resultsdiv span { color: #666 }
.resultsdiv { width: 600px}
.resultsdiv div { float: left }
.resultsdiv .name { width: 230px; padding-right 20px; }
.resultsdiv .category { width: 350px }
.resultsdiv .salary_basis { clear: left; width: 180px; padding-right: 20px }
.resultsdiv .salary { width: 180px; padding-right: 20px }
.resultsdiv .address { width: 200px; }
Related
I am making something with ace editor. As part of this, I have a dropdown menu that allows theme selection. This is on a bar at the top, (which will eventually have more options). I know that, in order to position the bar at the very top, I need to use position:absolute in the CSS code. However, this breaks the dropdown, and it no longer actually drops down. To see what I mean, here is a fiddle. (To compare, removing position: absolute in the CSS for #navbar makes it work fine, but is not at the very top [most visible in a full window].)
Note: In the fiddle, I have removed everything not related to the navbar, such as the ace code.
Seems to work fine if you remove the max-height from .dropChoices, the bottom and overflow on #navbar
// The function changeTheme() is defined in the full code
function toggle(button) {
var dropList = button.nextElementSibling;
function isDropdown() {
return (" " + dropList.className + " ").indexOf(" dropChoices ") > -1;
}
while (!isDropdown) {
dropList = dropList.nextElementSibling;
}
dropList.classList.toggle("hidden");
window.onclick = function(e) {
if (!e.target.matches('.dropButton') && !e.target.matches('.dropChoices')) {
if (!dropList.classList.contains('hidden')) {
dropList.classList.add('hidden');
}
}
}
}
#navbar {
position: absolute;
top: 0;
left: 0;
right: 0;
background-color: dimgray;
}
.navOption {
font-size: 12px;
color: white;
padding: 1px 13px;
}
.dropButton {
box-sizing: border-box;
cursor: pointer;
font-size: 16px;
border: none;
color: white;
padding: 13px 16px;
background-color: inherit;
}
.navOption:hover, .navOption:active, .navOption:focus {
background-color: gray;
outline: none;
}
.dropChoices {
font-size: 16px;
overflow: auto;
display: block;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
z-index: 5;
max-height: calc(100vh - 50px);
}
.dropChoices p {
color: black;
outline: none;
padding: 12px 16px;
cursor: pointer;
margin: 0;
text-align: left;
}
.dropChoices p:hover, .dropChoices p:focus {
background-color: lightgray;
}
p.dropTitle {
cursor: initial;
}
p.dropTitle:hover {
background-color: #f9f9f9;
}
.hidden {
display: none;
}
<!-- This code is slightly shortened, and only contains the relevant things -->
<div id="navbar">
<button onclick="toggle(this)" class="dropButton navOption">Themes</button>
<div id="themesList" class="dropChoices hidden">
<p class="dropTitle"><b>Light</b></p>
<p tabindex="0" id="chrome" onclick="changeTheme(this.id)">Chrome</p>
<p tabindex="0" id="clouds" onclick="changeTheme(this.id)">Clouds</p>
<p tabindex="0" id="crimson_editor" onclick="changeTheme(this.id)">Crimson Editor</p>
<p tabindex="0" id="dawn" onclick="changeTheme(this.id)">Dawn</p>
<p tabindex="0" id="dreamweaver" onclick="changeTheme(this.id)">Dreamweaver</p>
<p tabindex="0" id="eclipse" onclick="changeTheme(this.id)">Eclipse</p>
<p tabindex="0" id="gitHub" onclick="changeTheme(this.id)">GitHub</p>
<p tabindex="0" id="iplastic" onclick="changeTheme(this.id)">IPlastic</p>
<p tabindex="0" id="solarized_light" onclick="changeTheme(this.id)">Solarized Light</p>
<p tabindex="0" id="textmate" onclick="changeTheme(this.id)">TextMate</p>
<p tabindex="0" id="tomorrow" onclick="changeTheme(this.id)">Tomorrow</p>
<p tabindex="0" id="xcode" onclick="changeTheme(this.id)">XCode</p>
<p tabindex="0" id="kuroir" onclick="changeTheme(this.id)">Kuroir</p>
<p tabindex="0" id="katzenmilch" onclick="changeTheme(this.id)">KatzenMilch</p>
<p tabindex="0" id="sqlserver" onclick="changeTheme(this.id)">SQL Server</p>
<p class="dropTitle"><b>Dark</b></p>
<p tabindex="0" id="ambiance" onclick="changeTheme(this.id)">Ambiance</p>
<p tabindex="0" id="chaos" onclick="changeTheme(this.id)">Chaos</p>
<p tabindex="0" id="clouds_midnight" onclick="changeTheme(this.id)">Clouds Midnight</p>
<p tabindex="0" id="cobalt" onclick="changeTheme(this.id)">Cobalt</p>
<p tabindex="0" id="gruvbox" onclick="changeTheme(this.id)">Gruvbox</p>
<p tabindex="0" id="idle_fingers" onclick="changeTheme(this.id)">idle Fingers</p>
<p tabindex="0" id="kr_theme" onclick="changeTheme(this.id)">krTheme</p>
<p tabindex="0" id="merbivore" onclick="changeTheme(this.id)">Merbivore</p>
<p tabindex="0" id="merbivore_soft" onclick="changeTheme(this.id)">Merbivore Soft</p>
<p tabindex="0" id="mono_industrial" onclick="changeTheme(this.id)">Mono Industrial</p>
<p tabindex="0" id="monokai" onclick="changeTheme(this.id)">Monokai</p>
<p tabindex="0" id="pastel_on_dark" onclick="changeTheme(this.id)">Pastel on dark</p>
<p tabindex="0" id="solarized_dark" onclick="changeTheme(this.id)">Solarized Dark</p>
<p tabindex="0" id="terminal" onclick="changeTheme(this.id)">Terminal</p>
<p tabindex="0" id="tomorrow_night" onclick="changeTheme(this.id)">Tomorrow Night</p>
<p tabindex="0" id="tomorrow_night_blue" onclick="changeTheme(this.id)">Tomorrow Night Blue</p>
<p tabindex="0" id="tomorrow_night_bright" onclick="changeTheme(this.id)">Tomorrow Night Bright</p>
<p tabindex="0" id="tomorrow_night_eighties" onclick="changeTheme(this.id)">Tomorrow Night 80s</p>
<p tabindex="0" id="twilight" onclick="changeTheme(this.id)">Twilight</p>
<p tabindex="0" id="vibrant_ink" onclick="changeTheme(this.id)">Vibrant Ink</p>
</div>
</div>
You have to make the drop down relative to the parent if its going to be in absolute position.
Set the parent position to relative, and then the dropdown will be positioned inside or within the parent tag.
Like Example:
<div style="position:relative;">
<div class="dropdown" style="position:absolute; top:0; left:0;">...</div>
</div>
I've got the following markup. It's being delivered dynamically, I'm limited in what changes can be made to it.
Markup:
<div id="container">
<div class="stage">
<span class="stageText">Hello World</span>
<span class="icon">|</span>
</div>
<div class="stage">
<span class="stageText">Hello</span>
<span class="icon">|</span>
</div>
<div class="stage">
<span class="stageText">Hi There</span>
<span class="icon">|</span>
</div>
</div>
CSS (not quite doing as required/described)
#container {
border-top:1px solid #ccc;
border-bottom:1px solid #ccc;
display:table;
width:445px;
}
.stage {
display:table-cell;
width:33.33333%;
}
.icon {
width:3px;
margin-left:auto;
margin-right:auto;
}
I need to position the <span class="icon">|</span>'s midway between the end of the <span class="stageText">'s and the right boundary of the parent element. Here's a jsfiddle demonstrating the situation: http://jsfiddle.net/jralston/vc6pzawk/
Any help or pointers very much appreciated.
Thank You
John
I create this solution using pseudo-element :after:
#container {
border-top:1px solid #ccc;
border-bottom:1px solid #ccc;
display:table;
width:445px;
}
.stage {
display:table-cell;
width:33.33333%;
}
.stage:after {
content: "|";
position: relative;
left: 25%;
}
<div id="container">
<div class="stage">
<span class="stageText">Hello World</span>
</div>
<div class="stage">
<span class="stageText">Hello</span>
</div>
<div class="stage">
<span class="stageText">Hi There</span>
</div>
</div>
Read the comments for changes. Advantage of this technique is that you do not need to use javascript or change the html, just css.
JSFiddle
#container {
border-top:1px solid #ccc;
border-bottom:1px solid #ccc;
display:table;
width:445px;
}
.stage {
display:inline-block;/*instead of table-cell*/
text-align: center;/*centers text*/
float: left;/*float */
width:33.33333%;
}
.icon {
float: right;/*put icons left or right from text*/
width:3px;
}
I'm not sure if there's an easy to do this in CSS but you can do it relatively easy through JS & jQuery:
$('.icon').each(function () {
var $el = $(this),
containerWidth = $el.parent().width(),
contentWidth = $el.prev().width();
$el.css('left', (contentWidth) + ((containerWidth - contentWidth) / 2));
});
http://jsfiddle.net/vc6pzawk/3/
I'm working on a searchbar that has a js dropdown for categories. The searchbar needs to be responsive to width changes and at the moment the general layout is fine. I'm having one problem of positioning the dropdown menu relative to the category button. As it is now, the dropdown pushes the searchbar content down.
I have applied z-index, but no joy.
I have put the category dropdown within the new-sb-container, but still no joy. Any help greatly appreciated.
<div id="new-sb-container">
<div id="search">
<form id="search-form" method="post" action="">
<input type="text" name="q" id="query" placeholder="Search..."/>
<div id="search-category" title='Select a search category'>All Categories</div>
<div id="search-category-menu">
<label id='search-options'>Search Options:</label><br/>
<input type="radio" name="search_category" id='all_categories' value="all" checked><label for='all_categories'>All Categories</label><br/>
<input type="radio" name="search_category" id='antiques' value="antiques"><label for='antiques'>Antiques</label><br/>
</div> <!--end category menu-->
</form>
</div> <!--end search container-->
<div id="search-submit"><form><input type="submit" id='search-submit' value="Search"></form> </div>
</div><!--end sb container-->
#new-sb-container{
clear:both;
overflow:hidden;
width: 60%;
margin-top: 20px;
}
div#search
{
overflow:hidden;
width: 70%;
background-color: #FFFFFF;
border: 1px solid #CCCCCC;
border-top-left-radius: 7px;
border-bottom-left-radius: 7px;
padding-left: 10px;
float:left;
z-index: 1;
position:relative;
}
#search-form{
position: relative;
float:left;
width: 100%;
z-index: 0;
}
input#query{
position:relative;
float:left;
width: 60%;
height: 27px;
border: 1px solid #FFFFFF;
overflow:hidden;
}
div#search-category /*grey category box*/
{
border-radius: 7px;
font-family: Verdana,Arial,sans-serif;
font-size: 11px;
display:inline;
background-color: #CCCCCC;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 7px;
padding-right: 7px;
cursor: default;
margin-right:5px;
float:right;
}
div#search-category-menu
{
float:right;
position:relative;
width: 150px;
background-color: #FFFFFF;
border: 1px solid #000000;
padding: 8px;
margin-top: 10px;
z-index:99;
float:right;
}
div#search-submit{
position:relative;
float:left;
width:20px;
}
As the code stands the search-category-menu is relative to search-form > search > sb-new container.
and the jq form if this help...
$(document).ready(function()
{
function search_autocomplete(selector, tags, default_value)
{
$('#' + selector).focus(function()
{
if($('#' + selector).val() == default_value)
{
$('#' + selector).val('');
}
});
$('#' + selector).blur(function()
{
if($('#' + selector).val() == '')
{
$('#' + selector).val(default_value);
}
});
var search = $('#' + selector).autocomplete(
{
source: tags,
timeout: 0,
select: function(event, ui)
{
var selected_object = ui.item;
var search = selected_object.value;
search = search.replace(/\s+/g, '-').toLowerCase();
var category = $('input[name="search_category"]:checked').val();
$("#search-form").attr("action", "/search/" + search + "/category/" + category);
$("#search-form").submit();
}
});
$('#' + selector).data('ui-autocomplete')._renderItem = function (ul, item)
{
var re = new RegExp('^' + this.term, "i");
var t = item.label.replace(re, "<span id='dropdown-item-highlight'>" + "$&" + "</span>");
return $('<li></li>')
.data("item.autocomplete", item)
.append('<a> ' + t + '<span id="dropdown-category"> in ' + item.type + '</span></a>')
.addClass( 'dropdown-item' )
.appendTo(ul);
$('<li></li>').append('<a>Hide suggestion</a>').appendTo(ul);
};
$('#' + selector).data('ui-autocomplete')._renderMenu = function (ul, items)
{
var that = this;
$.each( items, function( index, item )
{
that._renderItemData( ul, item );
});
$(ul)
.attr( 'tabindex', -1 )
.addClass('dropdown-menu');
$('<li></li>')
.append('<a>Hide Suggestion</a>')
.addClass( 'dropdown-suggestion' )
.appendTo(ul);
};
}
$('#search-category-menu').hide();
$('#search-category-menu input[type="radio"]').click(function()
{
var category = $(this).next("label").text();
$('#search-category').text(category);
$('#search-category-menu').hide();
//not focusing by selector
$('#query').focus();
});
$('#search-category').click(function()
{
if ($('#search-category-menu').is(":visible"))
{
$('#search-category-menu').hide("fast");
}
else
{
$('#search-category-menu').show("fast");
}
});
var availableTags = [{"label" : "XBOX 360", "type":"Electronics"},
{"label":"XBOX One", "type":"Electronics"},
{"label":"Nike", "type":"Clothing & Footwear"}];
search_autocomplete('query', availableTags, 'Search...');
});
Fixed with the folowing
take category drop down out of container.
place a span element with width at similar percentage as category button movement.
make drop down relative to absolute span
apply z indexes to span and drop down.
code below
<div id="new-sb-container">
<div id="search">
<form id="search-form" method="post" action="">
<input type="text" name="q" id="query" placeholder="Search..."/>
<div id="search-category" title='Select a search category'>All Categories</div>
</form>
</div> <!--end search container-->
<div id="search-submit"><form><input type="submit" id='search-submit' value="Search"></form></div>
</div><!--end sb container-->
<span id = "menuplacer">
<div id="search-category-menu">
<label id='search-options'>Search Options:</label><br/>
<input type="radio" name="search_category" id='all_categories' value="all" checked><label for='all_categories'>All Categories</label><br/>
<input type="radio" name="search_category" id='antiques' value="antiques"><label for='antiques'>Antiques</label><br/>
</div> <!--end category menu-->
</span>
#menuplacer{
clear:both;
width:41%;
position: absolute;
}
div#search-category-menu
{
width: 150px;
background-color: #FFFFFF;
border: 1px solid #000000;
padding: 8px;
margin-top: 10px;
z-index:1000;
position:relative;
float:right;
}
http://jsfiddle.net/BD8j2/
I am trying to put a radio button to the right of the arrow picture, but it always keeps going someplace else for some reason. I want it between the arrow and the word Masculino.
I also don't want this button to really record anything, it's just there for aesthetic purposes. But I want when someone click on this box for the radio button to fill and then to link to another page.
Is this possible to do? For the whole box to be the link? I was thinking of wrappign the whole div in a <a href> which I think would work.
Try this: http://jsfiddle.net/BD8j2/8/.
(The HTML in the first version of this post is invalid (input inside a), and it is not cross-browser compatible, so I have replaced it with a JavaScript example.)
HTML:
<div class="answers">
<form>
<label class="links">
<input type="radio" name="sex" value="male" />
Masculino
</label>
</form>
</div>
<div class="answers">
<form>
<label class="links">
<input type="radio" name="sex" value="female" />
Femenino
</label>
</form>
</div>
JavaScript:
function init() {
var link_elems = getElementsByClass('links');
for(var i = 0; i < link_elems.length; i++) {
addEvent(link_elems[i], 'click', goToLink);
}
}
function goToLink(e) {
if(e.stopPropagation) {
e.stopPropagation();
} else if(typeof e.cancelBubble != 'undefined') {
e.cancelBubble();
}
e.currentTarget.children[0].checked = true;
window.location = e.currentTarget.children[1].href;
}
function addEvent(elem, event, handler) {
if(elem.addEventListener) {
elem.addEventListener(event, handler, false);
} else if(elem.attachEvent) {
elem.attachEvent('on' + event, handler);
} else {
elem['on' + event] = handler;
}
}
function getElementsByClass(className) {
if(document.getElementsByClassName) {
return document.getElementsByClassName(className);
} else if(document.all) {
var everything = document.all;
var all_length = everything.length;
var matches = [];
for (var i = 0; i < all_length; i++) {
if(everything[i].className == className) {
matches[matches.length] = everything[i];
}
}
return matches;
}
return false;
}
addEvent(window, 'load', init);
CSS:
.answers {
width: 220px;
height: 50px;
margin-top: 20px;
border-top: 1px solid black;
border-bottom: 1px solid black;
background-color: #ddd;
background-image: url('http://fortmovies.com/brazil/arrow.png');
background-repeat: no-repeat;
background-position: 0 50%;
}
.answers label {
float: left;
margin-left: 75px;
padding-top: 15px;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bold
}
.answers input {
margin-right: 5px
}
In the previous version, the JavaScript required putting the link names and targets in two arrays, now I have made it automatic.
Something like http://jsfiddle.net/XEk5d/2/, the clicking part to go to another page would require JavaScript.
CSS
#answers {
width:220px;
height:50px;
background-color:#DDDDDD;
border-top:1px solid black;
border-bottom:1px solid black;
margin-top:20px;
}
#arrowcenter {
width:71px;
height:31px;
background-image:url('http://fortmovies.com/brazil/arrow.png');
background-position:0 50%;
background-repeat:no-repeat;
height:100%;
display:inline-block;
vertical-align:middle;
}
#answerstext {
background-position:0 50%;
display:inline-block;
vertical-align:middle;
}
form{
display:inline-block;
}
input{
vertical-align:middle;
}
HTML
<div id="answers">
<div id="arrowcenter"></div>
<form>
<input type="radio" name="sex" value="male" />
<div id="answerstext">Masculino</div>
</form>
</div><!-- end grayAnswer -->?
I really dont know what to do.
I made a really simple guestbook, its ok and all, but when showing the comments
the text spills out from the div
I was trying with pre but didnt work
here is the css
.guestbook_content {
width: 100%;
height: 100%;
background: #FFE4E1;
padding: 5px;
font-size: 12px;
margin-bottom: 10px;
}
#box {
width: 628px;
height: 438px;
background: #fefefd ;
overflow-y: scroll;
overflow-x: hidden;
}
the html and php
<div id='box'>
<div id='box_title'></div>
<div id="box_text">
<?php
if(isset($_POST['mehet'])) {
$message= '';
$the_name= mysql_real_escape_string(strip_tags($_POST['nev']));
$comment = mysql_real_escape_string(strip_tags($_POST['comment']));
$date = date('Y.m.d H:i:s');
if(!empty($comment) && !empty($the_name)) {
//mysql_query("INSERT INTO vendeg (name, comment, date) VALUES ('$the_name', $comment', '$date')") or die(mysql_error());
mysql_query(" INSERT INTO guesstb(the_name, comment, date) VALUES ('$the_name', '$comment', '$date') ");
}else {
$message= '<b><font color="darkred">Pleasse fill out all inputs</b></font>';
}
}
?>
<?php echo $message; ?>
<form action='<?php echo the_permalink();?>' method='POST'>
<label for='nev' class='gbl'>Name:</label>
<input type='text' name='the_name' id='the_name' class='gbi'>
<label for='comm' class='gbl'>Comment:</label>
<textarea name='comment' id='comm' rows='5' cols='60' class='gbt'></textarea>
<input type='submit' class='submit' value='Beküld' name='mehet'>
</form>
<?php
$result = mysql_query("SELECT * FROM guesstbORDER BY date DESC");
while($row = mysql_fetch_array($result))
{
?><div class='guestbook_head'><span>sent by:</span> <b><?php echo $row['nev']; ?></b> <span> - date:</span> <?php echo $row['date']; ?> </div><?
?>
<div class='guestbook_content'><?echo $row['comment'];?></div>
<?
}
?>
could please someone could give me hint
.guestbook_content {
width: 100%; <-- drop this rule
height: 100%;
padding: 5px;
}
#box {
width: 628px;
}
You gave child div width: 100% + padding 5px, which makes = 100% of parent div :628px + 5px left padding + 5px right padding so child div is 638px wide. Just drop 100% width on child. All you need is padding.
Here is jsfiddle with your situation: http://jsfiddle.net/crg2U/2/
And here is with droped 100% width on child : http://jsfiddle.net/crg2U/3/