CSS

42K

Solutions

16K

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

Hi Experts


Could you point how to configure this Bootstrap buttons to be correctly distributed accordingly with this layout?

img010

<div class='row'>

      <div class="panel panel-primary">
      
          <div class='row'>
          
            <div class='col-md-8 pull-right'>
              <div class="btn-group" role="group">
                <button type="button" class="btn btn-primary" onclick="hotsite.vitrine.novo();">
                  <i class="fas fa-video" aria-hidden="true"></i> Minhas Fotos
                </button>
              </div>
            </div>
            
            <div class='col-md-6 pull-right'>
              <div class="btn-group" role="group">
                <button type="button" class="btn btn-primary" onclick="hotsite.vitrine.novo();">
                  <i class="fas fa-video" aria-hidden="true"></i> Todas as Fotos
                </button>
              </div>
            </div>
              
            <div class='col-md-4 pull-right'>
              <div class="btn-group" role="group">
                <button type="button" class="btn btn-primary" onclick="hotsite.vitrine.novo();">
                  <i class="fas fa-video" aria-hidden="true"></i> Enviar Foto
                </button>
              </div>
            </div>
              
          </div>  
       
    </div>
</div>

Open in new window


Thanks in advance!
0
hi am having this error
doc
0
0
module cannot be found but i do have it
module
0
Hi Experts,

I have always had issues with this, but how do I vertically center inner elements, such as a div within div?
0
Hello, I've found a behaviour of the ::after pseudo-element which I find strange and I'd like to ask you guys if there's an explanation and, most of all, a work-around.

Take a look here:
http://vetrina.ilgufoblu.net/test/

The two buttons are almost identical with completely identical css, but they behave differently on hover because the button on the left has an invisible span tag inside it which somehow makes the ::after pseudo-element position itself below the text instead of right after the text.

I don't understand how this is possible. The span has a "display: none;" attribute set and should not influence the layout in any way, as I understand it.

But it does, and the question I'm asking myself (and you) is why, and is there a way to avoid this?
I need that span (and more, actually) to be there to use some JS code which needs said spans to be right there (not included here because the problem is only with css).

I'll add the relevant code below, you can also check it out via your browser's dev tools.

Thanks.

HTML:
<body>
<div style="clear:both;padding:20px 0px 0px 200px;">
	<a title="Aggiungi al calendario" class="addeventatc" data-styling="none">
	    Sul Calendario
	    <span class="timezone">Europe/Rome</span>
	</a>
	<a title="Aggiungi al calendario" class="addeventatc" data-styling="none">
	    Sul Calendario
	</a>
</div>
</body>

Open in new window


CSS:
.addeventatc {
	background-attachment: scroll;
	background-clip: border-box;
	

Open in new window

0
I find that the following code doesn't work in IE. It works perfect in chrome or firebox. Any idea ?

div.map {
   margin: 20px auto;
   animation-name:rollmap;
   animation-duration: 3s;
   animation-iteration-count:infinite;
}

@keyframes rollmap {
      0% {background:url("../images/Map.png") no-repeat; }
      50% {background:url("../images/Maphover.png") no-repeat; }
      100% {background:url("../images/Map.png") no-repeat; }
}
0
Webform link

Hello,  Trying to get a ::after pseudoclass image to appear on my button.

so would be Next >.  I have the code as .lp-arrow and .lp-arrow:after but cannot get the arrow to show?

.lp-arrow {
    position: relative;
    padding-right: 18px;
    display: inline-block;
    color: #003a57;
    font-family: Avenir Medium,sans-serif;
    line-height: 1.1;
	white-space: nowrap;
	background: url(https://buildertrend.com/wp-content/uploads/2020/01/right-arrow-white.png) no-repeat 50%/100%;
}
.lp-arrow:after {
    content: "";
    transition: transform .3s;
    background: url(https://buildertrend.com/wp-content/uploads/2020/01/right-arrow-white.png) no-repeat 50%/100%;
    width: 9px;
    height: 11px;
    display: inline-block;
    margin-left: 5px;
}

Open in new window

0
Wordpress Theme Avada - trying to overwrite default behavior of main menu -

On this site I am working on the design called for ribbons on hover of the menu item which I was able to pull off with css - however when you get close to the edges of the menu item - The default behavior of the theme kicks in and the ribbons become squares

This is a link to preview the issue: http://carrolldistrib.wpengine.com/


This is my css I am currently using

/* Ribbon CSS  */

/* NOTE: Set Menu item Padding to 0 in Avada Theme Options  */

.fusion-background-highlight:hover, .current_page_item  .fusion-background-highlight {
    background: #a9252a;
    position: relative;
    height: 40px;
    margin:0 20px; /* Half of height */
}

.fusion-background-highlight:hover:before, .current_page_item .fusion-background-highlight:before,


.fusion-background-highlight:after, .current_page_item .fusion-background-highlight:after {
    border: 20px solid transparent; /* Half of height */
}


.fusion-background-highlight:hover:after, .current_page_item .fusion-background-highlight:after {
    content: '';
    position: absolute;
    height: 0;
    width: 0;
    top: 0;
    border: 20px solid transparent; /* Half of height */
    border-top-color: #a9252a;
    border-bottom-color: #a9252a;
    z-index: -1; /* Place triangles behind div  */
}
.fusion-background-highlight:hover:before {
    left: -20px; /* Half of height */
}
0
hi am having error in my angular component
todos
import { Component, OnInit } from '@angular/core';
import { TodoDataService } from '../service/data/service/data/todo-data.service';


export class Todo {
  constructor(
    public id: number,
    public description: string,
    public done: boolean,
    public targetDate: Date
  ){

  }
}


@Component({
  selector: 'app-list-todos',
  templateUrl: './list-todos.component.html',
  styleUrls: ['./list-todos.component.css']
})
export class ListTodosComponent implements OnInit {

   todos = Todo
  //   new Todo(1,'Learn to Dance',false,new Date()),
  //   new Todo(2,'Become Expert in angualr',false,new Date()),
  //   new Todo(3,'Visit South Africa',false,new Date())

    //  {id : 1,description :'Learn to Dance'},
    //  {id : 2,description :'Become an Expert in Angular'},
    //  {id : 3,description :''},
  
//  ]
    
  // todo = {
  //      id : 1,
  //      description: 'Learn to dance'

  // }

  constructor(private todoservice:TodoDataService ) { }

  ngOnInit() {
    this.todoservice.retriveAllTodos('tshifhiwa')
    .subscribe( 
        response => 
            { 
                console.log(response); 
                this.todos = response; 
            } 
    )
}
}
   

Open in new window

0
Hi
In the ASP.net web app http://office2web.com.au/
I am trying to move a GIF that is currently to the left more to the right and higher up
so that I can put text on the left and the GIF on the right of the grey area. The image shows how I want to move it

The markup for my page is shown further down

1
<%@ Page Title="Home Page" Language="VB" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.vb" Inherits="Office2Web._Default" %>

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">

   

        <div class="jumbotron">
              <h1 style="color:#003399;">Microsoft Office and Web Experts</h1>      
              <p class="lead">Microsoft Access, Excel, SQL and Web Development. Based in Australia, Consulting Internationally</p>
              <h2 style="color:darkcyan;">Call 1300 049 0499 for a free consultation</h2>
            <asp:Image ID="Image2" runat="server" Height="169px" ImageUrl="~/Resources/Web Animation GIF.gif" Width="323px" />
        </div>

    <div class="row">
        <div class="col-md-4">
            <h2 style="color:#003399;">Microsoft Office Solutions</h2>
            <p>
                We build custom solutions into your existing  Microsoft Office. Use the familiar Excel, Word, Outlook or Access environment to evolve your business.
                Get up and running quickly with database applications in Microsoft Access or SQL. Automate and …
0
If I change my style sheet (.css file) I want to force a reload of the file. What is the best way to do this? Is it by adding a query string? Ie:
<link href="style.css?ver=2" rel="stylesheet">

and then changing ver= each time my style sheet changes?

Should I do the same thing for js files?
0
I need to add a spinner to this button. I've been given som CSS to do it but I'm not sure what is going on since its not working. How do I attach this spinner css to my button to make it work? I'm also open to any other options for attaching a spinner . Thanks in advance.

                                        <div class="col-md-1 checkinItem">
                                            <button
                                                id="btnBarcodeLookup"
                                                class="SearchButtonV2"
                                                runat="server"
                                                onserverclick="btnBarcodeLookup_OnClick"
                                                validationgroup="barcodestatus">
                                            </button>
                                        </div>

Open in new window


.Spinner {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: absolute;
  border: 5px solid #eee;
  display: inline-block;
  
  // Positioning
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  
  &:after, &:before {
    content: '';
    display: block;
    width: 100px;
    height: 100px;
    border-radius: 50%;
  }
  
  &:after {
    position: absolute;
    top: -5px;
    left: -5px;
    border: 5px solid transparent;
    border-top-color: #928a8a;
    animation: spin 1s linear infinite;
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  
  100% {
    transform: rotate(360deg);
  }
}

Open in new window

0
Hi, I'm looking for a Css/Bootstrap (Web Responsive) skeleton for my page.
Please  see the following diagram with explanations:
A diagram describing what I need
0
I have this datatable but it goes under my footer. Does anyone have a fix? margin or padding dont seem to work.
table-mobile.PNG
0
popup that is currently renderedI have the following popup that needs to be changed to better align with UI standards.

This is the AngularJS that makes this page:

I need to put some padding , alighn the buttons properly.  Can someone help me refactor?




<script type="text/ng-template" id="ApproveArRequestTemplate.html">
    <form>
        @*<div class="modal-header">
            <h3 class="modal-title">Add attachment</h3>
        </div>*@
        <div class="modal-body">
            <div class="control-group">
                <label class="control-lable">Approval Comment</label>
                <div class="controls">
                    <textarea id="approvereason" name="approvereason" class="form-control" ng-model="ApproveReason"></textarea>
                </div>
            </div>
            <div class="checkbox" ng-show="item.IsRoleEvpCfoCoo">
                <label><input type="checkbox" id="IsRouteToCEO" ng-disabled="IsRouteToCEO" ng-model="IsRouteToCEO" />  Route to CEO for approval</label>
            </div>
            <div class="checkbox" ng-show="item.IsRoleCreditDeptFPnACommOp">
                <label><input type="checkbox" id="IsRouteToDirectorOfTax" ng-model="IsRouteToDirectorOfTax" />  Route to Corporate Tax</label>
            </div>
            <label class="control-label" ng-show="item.IsRoleLocalFinance">Are Pre-Approved Business Metrics Met</label>
            <div class="col-md-6">

                <div class="btn-group" 

Open in new window

0
I am trying to increase the width of an Html.TextBoxFor control in an ASP.NET MVC 5 View page using razor syntax. I am using Visual Studio 2017. I created a css style (textboxfor) to increase the control's width as shown below but it is not working.

Below is the MVC View:


@using rgmsite.Models
@model LoginTestViewModel
@{
    ViewBag.Title = "Log in";
}

<style type="text/css">
    .textboxfor-width {
        width: 700px;
    }
</style>

<h2>SimpleTest</h2>
        <section id="loginForm">
            @using (Html.BeginForm("Login", "Account",
              new { ReturnUrl = ViewBag.ReturnUrl }, FormMethod.Post,
              new { @class = "form-horizontal", role = "form" }))
            {
                @Html.AntiForgeryToken()
                <div class="form-group">
                    @Html.TextBoxFor(m => m.Email,
                   new {  @class = "form-control textboxfor-width",
                       placeholder = "Enter email address to be used as your user name"
                   })
                </div>
            }
        </section>

Below is the View Model being used:


  public class LoginTestViewModel
  {
    public string Name { get; set; }
    public string Email { get; set; }
  }

Using a smaller width value such as 40px in the css .textboxforworks.  But there seems to be some limit imposed on the control preventing it from being wider (such as 400px) than the default. What needs to be done to make the …
0
I wanna use a bootstrap data table but i cant get it to work.
this it the code in my header:
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
    <script type="text/javascript"  src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>>

Open in new window


What line do i need to add to get bootstarp datatable since the one i have been using does not seem to work.
0
Hey i want to use datatables for the first time but it is not working:
THis code is in my header:
        <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css/">

        <script type="text/javascript" src="//cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>

Open in new window

And this is the table:
    <table id = "myTable">
        <thead>
            <th>Username</th>
            <th>Result</th>
            <th>Quiz name</th>
            <th>Category</th>
            <th>Date</th>
        </thead>
        <tbody>
            {% for res in result_sql %}
            <tr>
                <td>{{res.username}}</td>
                <td>{{res.result}}</td>
                <td>{{res.quiz_name}}</td>
                <td>{{res.category}}</td>
                <td>{{res.date}}</td>
            </tr>
            {% endfor %}

        </tbody>


    </table>
<script>
$(document).ready( function () {
    $('#myTable').DataTable();
} );
</script>

Open in new window


Can anyone find the problem?
0
Hey i have this table in html which is scrollable vertically. This works but there is an issue the headers do not allign with the text in the table. Does anyone know how i can fix this?
this is the code:
table {
  display: inline-grid;
  grid-template-areas:
  "scrollable";
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}


tbody {
  overflow: auto;
  height: 400px; /* define height depending on your needs */
  width: 100%;
}

Open in new window


And the table is:
   <table>
        <thead>
            <th>Username</th>
            <th>Result</th>
            <th>Quiz name</th>
            <th>Category</th>
            <th>Date</th>
        </thead>
        <tbody>
            {% for res in result_sql %}
            <tr>
                <td>{{res.username}}</td>
                <td>{{res.result}}</td>
                <td>{{res.quiz_name}}</td>
                <td>{{res.category}}</td>
                <td>{{res.date}}</td>
            </tr>
            {% endfor %}

        </tbody>


    </table>

Open in new window


I will also attach a photo of the table if anyone could help that would be great!
table.PNG
0
Hello CSS Experts

I need to align 4 columns on a page. Its a shopify site (just a demo) and I have access to the html

Here's the link to the page   https://bit.ly/3aP1w1u

You'll see 4 blue buttons on the page.  They need to be centered and the text under each button should be aligned to the left.

I have attached a mockup of what I am looking for,. Hopefully it helps explain things.  SImple mockup of what I''m looking for
It's a Shopify site (demo) and I have access to the HTML on this page (and of course any necessary CSS that needs to be added.
Thanks
Rowby
0
Can't figure out why the page is loading and defaulting to the form down the page and not just the default top of the screen. I think it's focusing on an input field, but I don't know why, since I'm just adding the TABINDEX capability like all my forms do.

https://wildernessclubmontana.com/events-and-meetings/
0
I have this site with a navigation bar with a dropdown. On the other site i have a select with two values.
This is the dropdown:
         <button class="dropbtn">Login</button>
                    <div class="dropdown-content">
                        <a class = "teacher" href="login">Teacher Login</a>
                        <a class = "student" href="login">Student Login</a>
                    </div>

Open in new window

And this is the select i am using:
    <form class = "login" action="/login" method="post">
        <div class="form-group">
            <select class="form-control" name="role">
                <option disabled selected value="role">Role</option>
                        <option value="teacher">Teacher</option>
                        <option value="student">Student</option>
            </select>

Open in new window

So my question is : how can i  make it that if the user clicks on student login the select will stand on value "student" and the other way around?
The select is on a different page then the login dropdown so that makes it hard for me.
0
Can you please help me in that error.
screenshot.JPGscreenshot2.JPG
<?php
error_reporting(E_ALL);
ini_set('display_errors', 1);
require_once 'Credentials/credentials.php';
require_once ("Entities/CoffeeEntity.php");
$coffee = new CoffeeModel($db);

var_dump( $coffee->GetCoffeeTypes() );
var_dump( $coffee->GetCoffeeByType('sometype') );
require_once ("Entities/CoffeeEntity.php");

//Contains database related code for the Coffee page.
class CoffeeModel {

    private $db;

    public function __construct(\PDO $db) {
        $this->db = $db;
    }

    public function GetCoffeeTypes() {
        $stmt = $this->db->query("SELECT DISTINCT type FROM coffee");
		
        return $stmt->fetchAll();
    }

    public function GetCoffeeByType($type) {
        $stmt = $this->db->prepare("SELECT name, type, price, roast, country, image, review FROM coffee WHERE type LIKE :type");
        $stmt->execute(['%' . $type . '%']);
		
        return $stmt->fetchAll(PDO::FETCH_CLASS, 'CoffeeEntity');
    }

}
?>

Open in new window


<?php

require_once 'Controller/CoffeeController.php';
$coffeeController = new CoffeeController();

if(isset($_POST['types']))
{
    //Fill page with coffees of the selected type
    $coffeeTables = $coffeeController->CreateCoffeeTables($_POST['types']);
}
else 
{
    //Page is loaded for the first time, no type selected -> Fetch all types
    $coffeeTables = $coffeeController->CreateCoffeeTables('%');
}

//Output page data
$title = 'Coffee overview';
$content = $coffeeController->CreateCoffeeDropdownList(). $coffeeTables;

include 'Template.php';
?>

Open in new window



Open in new window

0
Can you please help me in that error.
screenshot2.JPGscreenshot.JPG
<?php
error_reporting(E_ALL);
ini_set('display_errors', 1);
class CoffeeEntity
{
    public $id;
    public $name;
    public $type;
    public $price;
    public $roast;
    public $country;
    public $image;
    public $review;
    
    function __construct($id, $name, $type, $price, $roast, $country, $image, $review) {
        $this->id = $id;
        $this->name = $name;
        $this->type = $type;
        $this->price = $price;
        $this->roast = $roast;
        $this->country = $country;
        $this->image = $image;
        $this->review = $review;
    }

}


?>

Open in new window

0

CSS

42K

Solutions

16K

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.