1

I'm having issues when trying to load some properties of my main.css file, loading the file from /user_create.html loads the main.css just fine, but when I try to do it from url.dev/user/create, it doesn't load all the properties, and the code is copy/pasted from html to my blade.php file.

HTML

<div class="container-fluid band-user-creation">
    <div class="container">
    <div class="row">
        <div class="col-lg-12">
          <div class="row">
               <div class="col-lg-4"></div>
               <div class="col-lg-4 raleway-regular"><table >
              <tbody>                   
                ...
                <tr>
                  <td><input name="UserName" type="name" class="input-user-creation" placeholder="Ingresa tu Nombre"></td>
                </tr>
                <tr>
                  <td><input name="UserLastName" type="lastname" class="input-user-creation" placeholder="Ingresa tu Apellido"></td>
                </tr>
                ...

CSS

.band-user-creation{
padding-top: 100px;
padding-bottom: 100px;
color: #212121;
text-align: center;
}

.input-user-creation{
background-color: #B2DD4C;
font-size: x-large;
border-radius: 10px;
padding-left: 10px;
border: transparent;
color: #F9F9F9;
margin-top: 5px;
min-width: 300px;
}

enter image description here

.HTML HEAD CONTENT

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>...</title>
<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="main.css" rel="stylesheet" type="text/css">

<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Raleway:300,400i,600,600i" rel="stylesheet">

...

...

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js">
</script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js">
</script>
  <![endif]-->
</head>

EDIT

.BLADE HEAD CONTENT

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>...</title>
<!-- Bootstrap -->
<link href="../../css/bootstrap.css" rel="stylesheet">
<link href="../../main.css" rel="stylesheet" type="text/css">

<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Raleway:300,400i,600,600i" rel="stylesheet">  

...

...

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js">
</script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
</head>
Improve this question
11
  • Did you see the .css file when you inspect the code? if you see, whats happens when you access to that file on the browser? Commented Apr 17, 2017 at 23:53
  • Can you post the <head> content of your html in both the user_create.html file and the .blade.php file? Commented Apr 17, 2017 at 23:59
  • @AgeValed I'm not seing .band-user-creation class nor .input-user-creation class :/ Commented Apr 17, 2017 at 23:59
  • Are there any 404 errors in the inspector console ? Commented Apr 18, 2017 at 0:00
  • 1
    Any improvement with changing the stylesheet locations in the blade file to /css/bootstrap.css and /main.css (basically, get rid of the ../.. in each)? Commented Apr 18, 2017 at 0:09

3 Answers 3

Reset to default
1

you need a layout blade blank.blade.php (folder resources\views\layouts) with

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Test</title>
        <link href="{{ asset("css/style.css") }}" rel="stylesheet">
    </head>
    <body 
        @yield('main_container')
    </body>
</html>

then you need your style .css with all the css on inside public folder then on your .blade.php

@extends('layouts.blank')
@section('main_container')
    <!-- ALL THE HTML -->
@endsection
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Thank you @AgeValed moving the main.css did the trick, I'm not quite sure why "kinda" work before, when it shouldn't work at all.
0

Moving ../main.css to ../css/main.css did the trick, I don't why still kinda work before when It shouldn't...

Improve this answer

5 Comments

Is your main.css file in the css folder in your public folder?
@stratedge main.css is now in the css folder, it was in the root folder before
Your problem looks to me like you were incorrectly relatively referencing the locations for your CSS files. I'll write up an answer to explain.
On second thought, maybe not - I'd need to see the full URL paths used and the directory structure, and if you have it all working, it's likely not worth the effort
Thank you a lot @stratedge as you said everything is working and that's what matter the most ! Thanks again
0

the main idea about loading CSS/js use asset() helper

for example

<link rel="stylesheet" href="{{ asset('assets/plugins/fontawesome- 
    free/css/all.min.css') }}">
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.