Member Avatar for gentlemedia
gentlemedia 803 Master Poster
Re: Suggestion and ideas needed

I did the following with the browsers' developer tools and got the submenu centered.

Delete in your CSS position: relative on #main-nav .vnav__item and on .vnav__item.
The other thing to do is to change in the CSS on #main-nav .vnav--horizontal .vnav__subnav the property left: 370px to left: 0.

If you add width: 100% to #main-nav .vnav and delete the left & right padding of 15px on .navbar-collapse, then the submenu expands to the full width of the layout.

On a side note... why are you editing and changing stuff on a site that is live? Better to make a copy of the site and tweak stuff in there.

UI / UX Design web-design
Member Avatar for gentlemedia
gentlemedia 803 Master Poster
Re: Remove line space

You're juggeling a bit with html tags in 'units', but the spacing is caused by the browser default styling (margin-bottom) of the paragraph tag. To get rid of it, set it to '0'.

UI / UX Design web-design
Member Avatar for gentlemedia
gentlemedia 803 Master Poster
Re: I need some help to make a very basic page, may take 5 minutes of ur time

Sorry, but I can't help you with that. I don't know anything about WinForms.

Web Development social-media
Member Avatar for gentlemedia
gentlemedia 803 Master Poster
Re: I need some help to make a very basic page, may take 5 minutes of ur time

Not sure what you're really after, but here's a blank HTML page :)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Blank Page</title>
</head>
<body>
</body>
</html>
Web Development social-media
Member Avatar for gentlemedia
gentlemedia 803 Master Poster
Re: HTML/CSS - Perhaps if some has time they can look this over

As far as I can see some inputs that are still white has no class="field" and on others you have type="field" which should be then class="field". I also see that you have a type="grey" attribute on some labels, but that's also a mistake I asume. The label element has only two type attributes type="for" and type="form"

UI / UX Design html-css web-design
Member Avatar for gentlemedia
gentlemedia 803 Master Poster
Re: When Panel is Opened, It Jumps to the Left

It would be helpfull to mention in which browser you see this, because in Chrome on the Mac it looks okay.

UI / UX Design web-design
Member Avatar for gentlemedia
gentlemedia 803 Master Poster
Re: Display div in Center

Since you have all width and height values, it's easy to do some little math and position #box with some top and left margins in the middle of #main. No need for display: table, display: table-cell and vertical-align: middle

#main {
    margin: 0 auto;
    background-color: lightgreen;
    overflow: auto;
    height:400px;
    width:400px;
}

#box {
    height: 200px;
    width: 200px;
    background-color:#FFA500;
    margin: 100px auto 0;
}

See demo : http://cssdeck.com/labs/4w13hzhx

But setting all this fixed heights makes everything pretty inflexible, therefore the content in #box needs to fit perfectly and can't extend unless you change the height and the margins in your CSS of #main and #box. Too much maintanance.

UI / UX Design display web-design
Member Avatar for gentlemedia
gentlemedia 803 Master Poster
Re: CSS Desktop/Mobile

I was also not paying attention. It's the img that you have to select, so like this:

.picture-center img {
    max-width: 100%;
    height: auto;
}

If the div .picture-center is redundant, then leave it out and use article .panel as selector maybe.

UI / UX Design html-css seo web-design
Member Avatar for gentlemedia
gentlemedia 803 Master Poster
Re: CSS Desktop/Mobile

You should have not a = but a : in your .picture-center CSS block and the height should be auto. Perhaps width should be max-width as well, but I don't know your situation.

.picture-center
    {
    width:100%;
    height:auto;
    }
UI / UX Design html-css seo web-design
Member Avatar for gentlemedia
gentlemedia 803 Master Poster
Re: A Small Problem Involving a Label

Like JorgeM pointed out you will need wrappers around the City and State elements (label + input) together in order to line them up next to each other. But not a table > tr > td... just a div > div tag.

Demo: http://cssdeck.com/labs/full/4cznbjai

HTML:

<form>

  <div>

    <div>
      <label for="city">City:</label>
      <input type="text" name="city" id="city" />
    </div>

    <div>
      <label for="state">State:</label>
      <input type="text" name="state" id="state" />
    </div>

  </div>

</form>

CSS:

div { float: left }
div > div:first-child { margin-right: 20px }
label, input { display: block }
UI / UX Design email html-css web-design
Member Avatar for gentlemedia
gentlemedia 803 Master Poster
Re: Make submenu in tab menus hover over page content

In the CSS snippet here on line 19 there's a z-index set to '1'.
Change this to a higher value... for example 1000 to see if will stay on top of your other content.

UI / UX Design html-css web-design
Member Avatar for gentlemedia
gentlemedia 803 Master Poster
Re: Demo website images- Copyright
UI / UX Design web-design
Member Avatar for gentlemedia
gentlemedia 803 Master Poster
Re: Problem with pagination

Thanks, that made things much more clear to me.
Errr... that markup is a bit messy :)
div .list-footer or div .limit doesn't get closed properly.
There's only an opening ulbut for the rest there are no list items (li), but on your image I see them, so this is a mystery to me too and lastly at the end there's only an opening tbody.

No wonder you have display issues. Somewhere in a PHP function that builds up the HTML for that pagination it goes wrong. But also the table used for the layout has missing closing elements.

UI / UX Design html-css php ui-ux web-design
Member Avatar for gentlemedia
gentlemedia 803 Master Poster
Re: Problem with pagination

There are tools to share an URL from your local server.
https://ngrok.com/

Anyways... It's hard to debug with the information you posted. You have to look which class gets added to the unordered list and use that as CSS hook to align the items (either by using float, display: inline or display: inline-block).

The table cell which is holding the navigation spans 8 columns so it shoud be wide enough, but by using tables for layout might give you more layout issues along the way.

UI / UX Design html-css php ui-ux web-design
Member Avatar for gentlemedia
gentlemedia 803 Master Poster
Re: Problem with pagination

It's hard to say from an image why it doesn't line up next to each other, but as far as I can see what happens is that the page nav is marked-up with an unordered list, but is unstyled (or has still the default styling... hence the vertical alignment and the bullets).

Also the PHP echo says 'get pagenav out of function getListFooter()', but you post the PHP here of function getJobList().

Can you share a link with us to that page, because it's a CSS issue anyway and we need to see what eventually the HTML output is in order to track the problem and solve it.

UI / UX Design html-css php ui-ux web-design
Member Avatar for gentlemedia
gentlemedia 803 Master Poster
Re: fullPage.js only showing first section

Awesome! Glad it's sorted.

Web Development javascript
Member Avatar for gentlemedia
gentlemedia 803 Master Poster
Re: fullPage.js only showing first section

Are these sections in the element with the class 'wrapper'? Do you load all the files that are needed?
https://github.com/alvarotrigo/fullPage.js#including-files

Can't tell much with only those pieces of HTML and jQuery you've posted here. Can you put the page online somewhere?

Web Development javascript
Member Avatar for gentlemedia
gentlemedia 803 Master Poster
Re: CSS: How do you style a group of tags

If you want to nest CSS blocks, you will need to write your CSS with a CSS preprocessor like SASS or LESS.

UI / UX Design web-design
Member Avatar for gentlemedia
gentlemedia 803 Master Poster
Re: CSS: How do you style a group of tags

Not sure what you want to make orange, but you have on line 18 a CSS block in another CSS block. That is not going to work.
Take it out of that CSS block.

.nstyle {
    backgroud-color: black;
    color: orange;
    margin:20px;
    padding:20px;
}

.nstyle nav a:link { color: orange; }
UI / UX Design web-design
Member Avatar for gentlemedia
gentlemedia 803 Master Poster
Re: Highlight combination of cells with onclick of radio button

A click handler would highlight them once and forever and that's what you mean with point 2, right?. These are radio buttons which gets a checked state if checked, so you should use that to select your elements. With this if you check another radio button, the one that's checked gets unchecked, because you can only select one radio button at the time.
I would also add a class 'selected' and use that as a hook for your CSS in the stylesheet instead of adding it inline dynamically.

if($('#btnHSB').is(':checked')) {
    $('.group2').addClass('selected');
});

CSS:

td.selected {
    background-color: yellow;
    color: black;
    font-weight: bold;
}

Wiil look into the other points of you when I have time.

Web Development javascript
Member Avatar for gentlemedia
gentlemedia 803 Master Poster
Re: How to Bypass CAPTCHA/Spam filters (and Stop it!)

Have you tried the new reCaptcha from Google yet?
https://www.google.com/recaptcha/intro/index.html

Web Development javascript
Member Avatar for gentlemedia
gentlemedia 803 Master Poster
Re: Family Tree - Horizontal Display Using CSS

Have to agree with @diafol. You have to think of more situations when there is not enough space for a horizontal family tree.

And although a dl is better for semantics, but with the recommended structure of it together with CSS alone, it is not doable to get it the way you want... well as far as I can tell up untill now :)

UI / UX Design html-css web-design
Member Avatar for gentlemedia
gentlemedia 803 Master Poster
Re: Family Tree - Horizontal Display Using CSS

I'm doing this in between things for you, so have a bit patient.
I have the HTML mark-up in place and will do the CSS, but it is more challenging then I thought in the first place. :)

http://cssdeck.com/labs/b48uyhyo

UI / UX Design html-css web-design
Member Avatar for gentlemedia
gentlemedia 803 Master Poster
Re: Family Tree - Horizontal Display Using CSS

Using a definition list would be in my opinion sematically more correct then using an unordered list (ul).

UI / UX Design html-css web-design
Member Avatar for gentlemedia
gentlemedia 803 Master Poster
Re: Family Tree - Horizontal Display Using CSS

Well... I can use a little challenge, so I'll see if I can pull it off. My goal is to use no fixed widths or heights. Content should dictate these. Also I might use a nested definition list (dl) for this.

UI / UX Design html-css web-design
Member Avatar for gentlemedia
gentlemedia 803 Master Poster
Re: PHP code not being interpreted by DW and appearing as text on webpage

No sorry... it's been ages for me since I have used DW and perhaps this thread is better off in the PHP forum.

UI / UX Design php web-design
Member Avatar for gentlemedia
gentlemedia 803 Master Poster
Re: PHP code not being interpreted by DW and appearing as text on webpage

You mean as text on the page in DW design view and/or live view, or just in the browser on your local machine? You will need to have a server environment on your local machine installed in order to execute PHP files. Look into WAMP for Windows or MAMP for Mac.

UI / UX Design php web-design
Member Avatar for gentlemedia
gentlemedia 803 Master Poster
Re: How to detect mobile being sideways?

There are specific CSS media queries to handle these situations.

@media all and (orientation:landscape) {

    /* landscape styles in here */

}


@media all and (orientation:potrait) {

    /* portrait styles in here */

}
UI / UX Design web-design