[Webinar] Streamline your web hosting managementRegister Today

x

CSS

41K

Solutions

15K

Contributors

Cascading Style Sheets (CSS) is a language used for describing the look and formatting of a document written in a markup language. Usually used to change web pages and user interfaces written in HTML, it can also be applied to any kind of XML document. CSS is designed primarily to distinguish the content of a document from its presentation.

Share tech news, updates, or what's on your mind.

Sign up to Post

Hello, I have decided to build a website with Bootstrap 4, just to test it out.

I am having trouble with as simple a task as centering an image, though.

This is the full code:

<!doctype html>
<html class="no-js" lang="it">

<head>
    <title>Prova</title>

    <!-- BOOTSTRAP 4 -->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <script src="js/vendor/modernizr-3.5.0.min.js"></script>
    <script src="js/vendor/jquery-3.2.1.min.js"></script>
    <script src="js/vendor/popper.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>

</head>

<body>

        <div class="container">
            <div class="row">
                <div class="col-xs-12">
                    <div class="text-center logo">
                        <img class="img-fluid" src="img/logo/logo800.png">
                    </div>
                </div>
            </div>
        </div>

</body>

</html>

Open in new window


And this is the test page on my server:
http://test.ilgufoblu.net/ferrari/prova.html

I haven't been able to find a single reason why this image shouldn't be centered, with the text-center class assigned to its containing div.

Can somebody help me understand this?
0
[Webinar] Kill tickets & tabs using PowerShell
LVL 11
[Webinar] Kill tickets & tabs using PowerShell

Are you tired of cycling through the same browser tabs everyday to close the same repetitive tickets? In this webinar JumpCloud will show how you can leverage RESTful APIs to build your own PowerShell modules to kill tickets & tabs using the PowerShell command Invoke-RestMethod.

I'm trying to figure out why foreign fonts aren't showing up on my site. I have checked that UTF-8 is in the meta and that the font (Open Sans) is capable of displaying the correct font. I even tried adding the below code into the .htacess file with no luck. Anyone know what could be wrong?

AddType 'text/html; charset=utf-8' .html

Open in new window


This is the page with the issue and a screenshot is attached: https://www.herecomestheguide.com/real-wedding/tag/Indian
This is  the page where it's showing correctly (see title):  https://www.herecomestheguide.com/northern-california/wedding-services/anais-event-planning-design/real-weddings

Title under the image doesn't display foreign character
0
I am making a modal windows,
However, I found that determine width,height of an object by using percentage is not suitable.
So, is there any guideline for making a true responsive modal windows?
I attached my work for your reference.
gg.html
0
Hi,
I am using Angular2 form. Mostly all validated using html pattern and some are form validated. For html validation, I am getting generic tooltip "Please enter a valid format" for phone without saying the format. How can I change it to "Please enter 10 numeric values."

HTML Code

   <div class="row form-group">
             <div class="col-xs-12">
                <div class="float-label active">
                      <input type="text" class="input-underline-blue" id="phone" formControlName="phone"
                       placeholder="(123) 345-2222"
                        (keydown)="numOnlyDown($event)"
                         (keyup)="numOnlyUp($event)"
                             (blur)="phoneUSFormat($event)"
                            [maxlength]="14"
                         pattern="(?:\([1-9]\d{2}\)|\d{3})[- ]?\d{3}[- ]?\d{4}"              
                         required />
     <label for="phone">@Html.Sitecore().Field("Phone Label", profileItem)</label>
    <div *ngIf="!editInfoForm.get('phone').valid" class="alert alert-danger alert-small">
     <span *ngIf="editInfoForm.get('phone').hasError('required')">
                                                        @Html.Sitecore().Field("Phone Required", profileItem)
      </span>
      <span *ngIf="!editInfoForm.get('phone').hasError('required') && !editInfoForm.get('phone').valid">
      Enter a valid phone number.
         </span>
         </div>
   </div>
      </div>
   …
0
Hello,

I bought a theme but did not realize it doesn't have support. I am a novice with WordPress and need help with a couple items (#3 is my main concern):

1. How can I make the logo large?

2. In sidebar instagram is not working. It just displays words, please advise.

3. On the Video and Audio Template pages, I want just a specific category to show up on that page, it its showing all categories even though I have the specific category selected:
The Following Announcement should only show category (TFA)
Recipes should only show category (Recipes)
BYB should only show category (BYB)
*Also the same issue under the home page banners (using the widgets)

4. On the default template page can it be full screen without a side bar?

Thank you so much. There is a stationary page so you have to login to my WordPress below to see the site, this is the info to do so:
http://wise-eats.com/wp-admin/
N: Testing
P: thisisatest1234
0
Hello,
i have a php that have a base url config  $config['base_url'] = '';
when i request the url from server ip its work put when i make it by domain name it's redirect to ip again.
i trye to change base url to $config['base_url'] = '/'; the site is opening but the css and images is not working.
i run my web application under wamp
so where is the problem ?
0
have a HTML table with 2 columns (Store name and Location).

There are few stores in Store name which are located in different locations.

I need to set the location of each store to be a hyperlink. So for example if I click on London in Locations all the stores in London appear in a new page.

Hope that explains my question.

Would appreciate any feedback.
0
Looking to have 100% height on two divs side by side. I want to keep each div independent in scrolling content in each but in the blue div/column, I would like to have a smooth scroll feature. It works now but you will see the red column does not retain its 100% column height.

Thanks for any insight...

https://jsfiddle.net/o1grxdw5/12/
0
How inheritance works in CSS.

.my_font{
font-family:Arial;
font-variant:700;
font-color:red;
}
.font_red{
font-color:red;
}
.font_green{
font-color:green;
}

Open in new window


.my_font is my parent class which holds the main information,now there is need wherein the color of font needs to be overrideen keeping the size and variant of parent (.my_font)
How can i achieve the same.
0
Hello CSS experts,  

It's been awhile since I did css on my own, and for some reason I can't wrap my mind around this very simple formatting for a div...

My html is  <div temprop="articleBody">

and I want to use my external  css stylesheet to create a transparent body color for that div.

And while I'm at it,I also want to create a transparent body color for the following div:

<class="home_fir col-md-12">

So my question is, what is the CSS to make the above happen -- compatible with most modern browsers.

Thanks
Rowby
0
Free Tool: Port Scanner
LVL 11
Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

I have developed a modal image on this page. It is the color diagram showing a hot water circulator installation in a home. However, it will not function properly. When you click on the image, it opens for a second or so, is not the correct set width and after a second or two it zooms top right and disappears. Tested on Chrome and Safari Mac. Can you identify the problem? All the code is in the page. It uses CSS in the head and javascript in the page.

https://www.dallasplumbing.com/hot-water-circulator.html

Thanks for your time.
0
Hello, I  have a Wordpress theme, on this theme I would like to reorder the some front page Widgets.  For a visual representation of the Widgets please see Webpage.jpg.  I would like to swap A with B.

The code below shows my home-template.php (I have also attached this page).

I have numbered the Hooks from 1 - 6.  I would like to reorder number 4 with number 6.   I can reorder all of the Hooks using priority, apart from number 4 (why is this?).
* Template Name: Home Page
*/
do_action( 'genesis_home' );
//* Force full-width-content layout setting
add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_full_width_content' );

**// Execute Home Top - Slider image  1**

add_action( 'genesis_after_header', 'wsm_home_top');
function wsm_home_top() {
	genesis_widget_area( 'slider', array( 'before' => '<div class="home-slider widget-area">', 'after' => '</div>') );
}

**// Execute Home Top - Additional News Banner 2**

add_action( 'genesis_after_header', 'wsm_home_featured', 15 );
function wsm_home_featured() {
	genesis_widget_area( 'home-top-featured', array( 'before' => '<div class="home-top-featured widget-area"><div class="wrap">', 'after' => '</div></div>') );
}

**// Remove the standard loop 3**
remove_action( 'genesis_loop', 'genesis_do_loop' );

**// Execute Home Mid Section - Three layer widget section 4**

add_action( 'genesis_loop', 'wsm_home_loop_helper' );
function wsm_home_loop_helper() {
	echo'<div class="home-mid widget-area">';
	

Open in new window

0
I want the textbox that I've got on my page to shrink in size relative to the size of the browser so it's truly mobile friendly. Right now it's correct-ish. It gets to a certain width, and then it ceases to get any smaller.

In addition, I want the text within the div to be nowrap and there to be a scroll bar at the bottom so the user can scroll over to the side to see the code rather than it getting all bunched up,

The page is http://brucegust.com/eResume.

What do I need to change?

Thanks!screenshot
0
I have hard time to google HTML form that have CSS style look like ms excel. Actually, I have PDF form with have a lot of box like those common medical or auto insurance form that usually ask for applicant info. Like address and ssn and etc. at the bottom is usually signature part.

Now. I want to write HTML and CSS code on HTML webpage and use it to replace the PDF. Because we have over 50 PDF so  I really hope to see some sample work and get the project start.

If you know any, please share with me.

Regards
0
I have a mega menu opening on desktop, on hover over a parent nav strip. The parent nav items are links on click.

The same menu is to be used on landscape tablet. Without on hover, click is used to launch the mega menu. So we lose the click to launch the parent nav linked page.

1. What is the best pattern for this? (I've seen a tap and hold open the menu on some sites, with quick tap to launch link).

2. For keyboard only navigation what is the best alternative to Enter, after tabbing to the parent nav item, to launch the menu? Down cursor?
0
We want to change the responsive menu on our boostrap site such that the menu text is displayed to the right instead of the left:

Screenshot
0
We have a page on a Bootstrap site which features a menu on the left.  Currently the menu is fixed in that it scrolls up and off the screen as the user scrolls down the page.  We want the menu to instead "float" and stay visible as the user scrolls up and down the page.

Screenshot
0
I have an email that keeps showing the background color above the text.  I want to only highlight the text.  Here is a screenshot.

https://gyazo.com/b90b972039cecb1546e319b60167a5bc

Here is the code I am using:

<table align="center" border="0" cellpadding="0" cellspacing="0" class="outer" style="-webkit-text-stroke-width: 0px; background-color: whiteFsmoke; border-spacing: 0px; color: #6e6f74; font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: 400; letter-spacing: normal; margin: 0px auto; max-width: 600px; orphans: 2; text-decoration-color: initial; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; width: 600px; word-spacing: 0px;">
	<tbody>
		<tr>
			<td bgcolor="#ffffff" style="border-bottom: 1px solid rgb(213, 213, 213); color: #6e6f74; font-family: Arial, Helvetica, sans-serif; font-size: 14px; padding: 10px 0px 10px 20px;"><span style="color: #cc0000;">&nbsp;</span><br />
			<span style="color: #cc0000;">Blog Sponsored by&nbsp;</span><a href="http://www.theherbsplace.com/" rel="nofollow"><b>The Herbs Place</b></a>&nbsp;- <span style="background-color: yellow;">Wholesale Prices Always - Up to 33% Off</span></td>
		</tr>
		<tr>
			<td bgcolor="#ffffff" style="border-bottom: 1px solid rgb(213, 213, 213); color: #6e6f74; font-family: Arial, Helvetica, sans-serif; font-size: 14px; padding: 10px 0px 10px 

Open in new window

0
I see a lot of Admin Dashboard HTML themes on the likes of themeforest.

A lot of these are great, however I have never come across a 'Front End Web App' based theme... that has several widgets and UI kits, including all form UI.

Has anyone ever come across anything like this?
0
Keep up with what's happening at Experts Exchange!
LVL 11
Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Hi there:

I have set up a printable page using css which renders well in chrome. However, in Firefox, the header is printing on every page. I tried to switch the tag to div with a class "header" and I got the same issue.  Is there any way to keep the header from printing on page 2 and beyond in firefox?

here is my code:

<!DOCTYPE html>

<html>
<head>
<meta http-equiv="content-type" content="text/html"; charset=utf-8" />
<meta name="keywords" content="los angeles, hollywood" />
<meta name="description" content="talent and literary management in Hollywood" /> 

<title>XXXXXXXXXXXXXX </title>

<link rel="stylesheet" type="text/css" href="newreelresumecss.css" />
<link rel="stylesheet" type="text/css" href="newreelresumeprint.css" media="print" />

<link rel="shortcut icon" type="image/x-icon" href="archetypeico.ico" />

<link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>


</head>

<body>
<header>
<a href="http://www.archetypela.com"><img src="largelogo1.svg" width="325" height="69"/></a>
<!-- CHANGE THE NAME -->
<div id="wrapper"><div id="clientname">XXXXXXX</div>
<!-- ADD THE UNION STATUS -->
<nav id="union">XXXXXX</nav>
<nav id="mainbar">
<a href="#reel" >REEL</a>
<a href="#headshot" >HEADSHOTS</a>
<a href="#resume" >RESUME</a>
</nav></div>
</header>
<div>
<span class="anchor" id="reel"></span>
<section id="reels"><div id="reeltitle">REEL</div>
<!-- DON'T FORGET TO PLACE VIDEO FILE NAME -->
<iframe id="resumeframe" 

Open in new window

0
Hi Experts,

I have a site with a lot of images that get loaded on a page with infinite scroll..trouble is...everytime page loads they is a delay before the images start to load... https://www.stockimagesafrica.com/downloads/category/southern-africa/ please check the link and see how images are loading..need to add some kind of preloading icon as images begin to load to save time.  Need help with getting this done..
0
Hi,
When you look at this siten
http://amandawatson,com.au you can see that the html code is showing, instead of content only
I am using Visual Composer, has anyone had an experience like this?
0
I am trying to create a simple HTML table and for some reason the columns in the header are not the same width has in the body. My code looks like:
	<table class="table AdTableStyle1 ManageSched" id="UserSchedule" border="1" cellpadding="4" cellspacing="0">
		<thead>
			<tr>
				<th >Day</th>
				<th >Date <span style="font-size:10px">(mm/dd/yyyy)</span></th>
				<th >Start Time</th>
				<th >End Time</th>
			</tr>
		</thead>
		<tbody>
			<cfloop index="thisRow" from="1" to="#arrayLen(sched.data)#">
				<cfoutput><tr>
					<td>#sched.data[thisRow].day#</td>
					<td>#sched.data[thisRow].date#</td>
					<td>#sched.data[thisRow].starttime#</td>
					<td>#sched.data[thisRow].endtime#</td>
				</tr></cfoutput>
			</cfloop>
		</tbody>

	</table>

Open in new window

Capture.PNG
0
i have my code as below:

 <style>
    body {
    background-color:black;
}
#paddle{
    position:absolute;
    background-color:white;
    width:20vw;
    height:5vw;
    top:96vw;
#ball{
   top:116vw;
   left:38vw;
   position:absolute;
   width:4vw;
   background-color:white;
   height:4vw;
   border-radius:50%;
   min-height:4vw;
   max-height:4vw;
   min-width:4vw;
   max-width:4vw;
}
#container{
   left:10vw;
   right:10vw;
   width:80vw;
   height:120vw;
   position:relative;
   background-color:grey;
   
}
    </style>
    <div id="container">
    <div id="ball"></div>
    <div id="paddle"></div>
    </div>

however, only paddle appear on the viewport.
I need to have container with position relative, and ball and paddle with position absolute, because it is nessary in order for my other codes to work, Can anyone please tell me how can i get all of them displayed properly without modifying the position attribute of those divs?

thx a lot!
0
ttip.docxHi All:

I had a really simple question. How do you combine options and tooltip to have this effect as you see in modern travel portal. I have included a document displaying a above mentioned effect. A small example would be really helpful. I guess it is a combination of option and tooltip.

Look forward to your responses.

Best Regards,

Sunnybrad
0

CSS

41K

Solutions

15K

Contributors

Cascading Style Sheets (CSS) is a language used for describing the look and formatting of a document written in a markup language. Usually used to change web pages and user interfaces written in HTML, it can also be applied to any kind of XML document. CSS is designed primarily to distinguish the content of a document from its presentation.