How can I make a website look better? [closed]

Question

How can I make a website look better? [closed]

Navigation

#1 by (2 votes)

-3

I'm starting to create a website looking at different examples, but it does not look very good. The example I saw was made up of a central part with two lateral parts where links to other sites can be placed. What am I doing wrong, I wanted to use bootstrap? I show the code that I picked up from the community example.

body {
                min-width: 630px;
            }
    
            #container {
                padding-left: 200px;
                padding-right: 190px;
            }
            
            #container .column {
                position: relative;
                float: left;
            }
            
            #center {
                padding: 10px 20px;
                width: 100%;
            }
            
            #left {
                width: 180px;
                padding: 0 10px;
                right: 240px;
                margin-left: -100%;
            }
            
            #right {
                width: 130px;
                padding: 0 10px;
                margin-right: -100%;
            }
            
            #footer {
                clear: both;
            }
            
            /* IE hack */
            * html #left {
                left: 150px;
            }
    
            /* Make the columns the same height as each other */
            #container {
                overflow: hidden;
            }
    
            #container .column {
                padding-bottom: 1001em;
                margin-bottom: -1000em;
            }
    
            /* Fix for the footer */
            * html body {
                overflow: hidden;
            }
            
            * html #footer-wrapper {
                float: left;
                position: relative;
                width: 100%;
                padding-bottom: 10010px;
                margin-bottom: -10000px;
                background: #fff;
            }
    
            /* Aesthetics */
            body {
                margin: 0;
                padding: 0;
                font-family:Sans-serif;
                line-height: 1.5em;
            }
            
            p {
                color: #555;
            }
    
            nav ul {
                list-style-type: none;
                margin: 0;
                padding: 0;
            }
            
            nav ul a {
                color: darkgreen;
                text-decoration: none;
            }
    
            #header, #footer {
                font-size: large;
                padding: 0.3em;
                background: #BCCE98;
            }
    
            #left {
                background: #DAE9BC;
            }
            
            #right {
                background: #F7FDEB;
            }
    
            #center {
                background: #fff;
            }
    
            #container .column {
                padding-top: 1em;
            }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--<meta http-equiv="X-UA-Compatible" content="ie=edge">-->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <title>PROBANDO UNA WEB</title>
    </head>
    
    <body>
    
        <header id="header">
        <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
            <div class="container">
                <!-- Navbar links -->
                <div class="collapse navbar-collapse" id="navbar">
                    <ul class="nav navbar-nav">
                        <li class="active">
                            <a href="#">PRINCIPAL</a>
                        </li>
                        <li>
                            <a href="#">CASA</a>
                        </li>

                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Recursos <span class="caret"></span></a>
                            <ul class="dropdown-menu" aria-labelledby="about-us">
                                <li><a href="#">PRODUCTOS</a></li>
                                <li><a href="#">NOTICIAS</a></li>
                                <li><a href="#">RECURSOS</a></li>
                            </ul>
                        </li>
                    </ul>
    
                    <!-- Search -->
                    <form class="navbar-form navbar-right" role="search">
                        <div class="form-group">
                            <input type="text" class="form-control">
                        </div>
                        <button type="submit" class="btn btn-default">Search</button>
                    </form>
    
                </div>
                <!-- /.navbar-collapse -->
            </div>
            <!-- /.container -->
        </nav>
    </header>
        <div id="container">
    
            <main id="center" class="column">
                <article>
                
                    <h1>SEAN BIENVENIDOS A MI SITIO WEB...</h1>
                    <p>HOLA, ESTOY EMPEZANDO EN EL DESARROLLO WEB</p>
       
                    <h2>CURRICULUM</h2>

                    <h2>ESPEDIENTE ACADEMICO</h2>
                    <p>AQUI QUIERO PONER LOS ESTUDIOS REALIZADOS<a href="proyectos-4.html">humilde aplicacion.</a></p>
                    
                    <h2>EXPERIENCIA</h2>
                </article>								
            </main>
    
            <nav id="left" class="column">
                <h3>DATOS PERSONALES</h3>
                <ul>
                    <li><a target="_blank" href="#"TRABAJO</a></li><br>
                    <li><a target="_blank" href="#">DIPLOMATURAS</a></li><br>

                </ul>
                <br>
                <br>

            </nav>
    
            <div id="right" class="column">
                <h3>FOTO DE PERFIL</h3>
                
            </div>
    
        </div>
    
       <!-- <div id="footer-wrapper">
            <footer id="footer"><p>Footer...</p></footer>
        </div>-->
    
    </body>
    
    </html>

html css bootstrap

asked by Mari Cruz 22.12.2017 в 01:23

source

1 answer

Image in Scroll [closed] One question on c / c ++

score 2 · Accepted Answer

Maybe the problem is that you do not call the boostrap functions. Let's see if you have this:

      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <head>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <title>PROBANDO UNA WEB</title>
    </head>
    
    <body>
    
        <header id="header">
        <nav class="navbar navbar-inverse" role="navigation">
            <div class="container">
        

                <!-- Navbar links -->
                <div class="collapse navbar-collapse" id="navbar">
                    <ul class="nav navbar-nav">
                        <li class="active">
                            <a href="#">PRINCIPAL</a>
                        </li>
                        <li>
                            <a href="#">CASA</a>
                        </li>
                        <li class="dropdown">
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">Recursos<span class="caret"></span></a>
                              <ul class="dropdown-menu">
                                  <li><a href="#">PRODUCTOS</a></li>
                                  <li><a href="#">NOTICIAS</a></li>
                                  <li><a href="#">RECURSOS</a></li>
                             </ul>
                        </li>
                    </ul>
                    <!-- Search -->
                    <form class="navbar-form navbar-right" role="search">
                        <div class="form-group">
                            <input type="text" class="form-control">
                        </div>
                        <button type="submit" class="btn btn-default">Buscar</button>
                    </form>
    
                </div>
                <!-- /.navbar-collapse -->
            </div>
            <!-- /.container -->
        </nav>
    </header>
        <div id="container">
    
            <main id="center" class="column">
                <article>
                
                    <h1>SEAN BIENVENIDOS A MI SITIO WEB...</h1>
                    <p>HOLA, ESTOY EMPEZANDO EN EL DESARROLLO WEB </p>

                    <h2>ESPEDIENTE ACADEMICO</h2>
              <p>AQUI QUIERO PONER LOS ESTUDIOS REALIZADOS<a href="#">DIPLOMATURAS.</a></p>
                    
                    <h2>EXPERIENCIA</h2>            
                
                </article>								
            </main>
    
            <nav id="left" class="column">
                <h3>DATOS PERSONALES</h3>
                <ul>
                    <li><a target="_blank" href="#"TRABAJO</a></li><br>
                    <li><a target="_blank" href="#">DIPLOMATURAS</a></li><br>

                </ul>
                <br>
                <br>
                <br>
              
            </nav>
    
            <div id="right" class="column">
                <h3>FOTO DE PERFIL</h3>
                
            </div>
    
        </div>
    
       <!-- <div id="footer-wrapper">
            <footer id="footer"><p>Footer...</p></footer>
        </div>-->
    
    </body>
    </html>

body {
                min-width: 630px;
            }
    
            #container {
                padding-left: 200px;
                padding-right: 190px;
            }
            
            #container .column {
                position: relative;
                float: left;
            }
            
            #center {
                padding: 10px 20px;
                width: 100%;
            }
            
            #left {
                width: 180px;
                padding: 0 10px;
                right: 240px;
                margin-left: -100%;
            }
            
            #right {
                width: 130px;
                padding: 0 10px;
                margin-right: -100%;
            }
            
            #footer {
                clear: both;
            }
            
            /* IE hack */
            * html #left {
                left: 150px;
            }
    
            /* Make the columns the same height as each other */
            #container {
                overflow: hidden;
            }
    
            #container .column {
                padding-bottom: 1001em;
                margin-bottom: -1000em;
            }
    
            /* Fix for the footer */
            * html body {
                overflow: hidden;
            }
            
            * html #footer-wrapper {
                float: left;
                position: relative;
                width: 100%;
                padding-bottom: 10010px;
                margin-bottom: -10000px;
                background: #fff;
            }
    
            /* Aesthetics */
            body {
                margin: 0;
                padding: 0;
                font-family:Sans-serif;
                line-height: 1.5em;
            }
            
            p {
                color: #555;
            }
    
            nav ul {
                list-style-type: none;
                margin: 0;
                padding: 0;
            }
            
            nav ul a {
                color: darkgreen;
                text-decoration: none;
            }
    
            #header, #footer {
                font-size: large;
                padding: 0.3em;
                background: #BCCE98;
            }
    
            #left {
                background: #DAE9BC;
            }
            
            #right {
                background: #F7FDEB;
            }
    
            #center {
                background: #fff;
            }
    
            #container .column {
                padding-top: 1em;
            }

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <head>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <title>PROBANDO UNA WEB</title>
    </head>
    
    <body>
    
        <header id="header">
        <nav class="navbar navbar-inverse" role="navigation">
            <div class="container">
        

                <!-- Navbar links -->
                <div class="collapse navbar-collapse" id="navbar">
                    <ul class="nav navbar-nav">
                        <li class="active">
                            <a href="#">PRINCIPAL</a>
                        </li>
                        <li>
                            <a href="#">CASA</a>
                        </li>
                        <li class="dropdown">
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">Recursos<span class="caret"></span></a>
                              <ul class="dropdown-menu">
                                  <li><a href="#">PRODUCTOS</a></li>
                                  <li><a href="#">NOTICIAS</a></li>
                                  <li><a href="#">RECURSOS</a></li>
                             </ul>
                        </li>
                    </ul>
                    <!-- Search -->
                    <form class="navbar-form navbar-right" role="search">
                        <div class="form-group">
                            <input type="text" class="form-control">
                        </div>
                        <button type="submit" class="btn btn-default">Buscar</button>
                    </form>
    
                </div>
                <!-- /.navbar-collapse -->
            </div>
            <!-- /.container -->
        </nav>
    </header>
        <div id="container">
    
            <main id="center" class="column">
                <article>
                
                    <h1>SEAN BIENVENIDOS A MI SITIO WEB...</h1>
                    <p>HOLA, ESTOY EMPEZANDO EN EL DESARROLLO WEB </p>

                    <h2>ESPEDIENTE ACADEMICO</h2>
              <p>AQUI QUIERO PONER LOS ESTUDIOS REALIZADOS<a href="#">DIPLOMATURAS</a></p>
                    
                    <h2>EXPERIENCIA</h2>            
                
                </article>								
            </main>
    
            <nav id="left" class="column">
                <h3>DATOS PERSONALES</h3>
                <ul>
                    <li><a target="_blank" href="#"TRABAJO</a></li><br>
                    <li><a target="_blank" href="#">DIPLOMATURAS</a></li><br>

                </ul>
                <br>
                <br>
                <br>
              
            </nav>
    
            <div id="right" class="column">
                <h3>FOTO DE PERFIL</h3>
                
            </div>
    
        </div>
    
       <!-- <div id="footer-wrapper">
            <footer id="footer"><p>Footer...</p></footer>
        </div>-->
    
    </body>
    </html>