problema: righe verticali

paperinik4 · 2015-08-03T12:43:50+0200

Salve a tutti,

Avrei bisogno di un aiutino con il css degli esempi su internet non sono riuscito a fare molto. Ho bisogno di suddividere il mio header in tre colonne quindi con tre righe verticali partendo non dall'alto ma attaccato alla riga orizzontale fino a giù dove c'è il footer. Questo è quanto ho combinato con un esempio ma non mi è stato di molto aiuto.

righe verticali:

PHP:

 <style type="text/css">
#intestazione{
 width:100%;
 height:100px;
 position:absolute;
 font-family: Comic Sans MS;
 top:0px;
 left:0px;
 text-align: center;
}
 #divhr {
    
position:absolute;
top: 85px;    
font-family:Comic Sans MS;
}


        #footer
{
    position: fixed;
    bottom: 0;
    left: 0;
    text-align: center;
    background: white;
    color: black;
    font-family: Comic Sans MS;
    font-size: 15px;
    width: 100%;
   /* padding: 5px 0;*/
    opacity: 0.9;
    -moz-opacity: 0.9;
    filter: alpha(opacity=90);
}

#div1 {
background:transparent;
border-left:2px solid #CC0033;       
padding: 150px;
width 200px;                           
height: 100px;        
margin-left:100px;                  
}


</style>


    </head>
    <header>
            
       <div id = "intestazione">
            <h1>Gestione iscrizione prova</h1>
            <hr>
            </div>
            
        <div id = "divhr">
            
    </header> 
    
    <body>
        <div id="div1">
</div>
        
        <footer>
            <div id ="footer">
                <hr>
                <h1>Questa è una prova del footer fondo pagina</h1>
                </hr>
            </div>
        </div>
        </footer>
        <?php
        require_once "connetti.php";
        require_once "data.php";
        echo "</hr>";
        ?>

    </body>
</html>

E questo è il risultato ottenuto. Data e stringa vanno bene allineati sulla stessa riga. La data viene spostata dalla riga verticale quello che non sono riuscito a fare è spostarla la riga verticale verso dx. Questo è solo un esempio della prima colonna. Poi ci sarebbe dammettere un'altra riga sempre verso dx dopo il titolo di "benvenuto". <qua l'immagine che dovrebbe rendere la situazione.

n1k4r0 · 2015-08-13T00:16:05+0200

ciao, mi pare di aver capito che devi suddividere l'area fra header e footer in tre colonne e non lo header stesso.

non è semplicissimo ma si può fare, la prima cosa che mi viene in mente e che sarebbe la meno bella ma la più semplice è inserire una tabella con tre colonne, a due metti il bordo con il css e hai finito.
le tabelle però non sono il massimo quindi dovresti suddividere l'area con tre div, ti posto il codice di una semplice pagina che poi puoi modificare come credi.

html:

HTML:

<! DOCTYPE html >
<html>
    <head>
        <title>Prova</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <header>Header</header>
        <div class="wrapper">
            <div class="colonna col col-1">primo</div>
            <div class="colonna col col-2">secondo</div>
            <div class="colonna">terzo</div>
        </div>
        <footer>footer</footer>
    </body>
</html>

css:

Codice:

header {
    border-bottom: 1px solid #000;
}

footer {
    border-top: 1px solid #000;
}

.wrapper {
    position: relative;
}
.wrapper:after,
.wrapper:before {
    content: '';
    display: table;
}
.wrapper:after {
    clear: both;
}
    

.colonna {
    float: left;
    width: 33.33%;
}

.col:after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    border-right: 1px solid #000;
    width: 0;
}

.col-1:after {
    left: 33.33%;
}

.col-2:after {
    left: 66.66%;
}

spero ti sia utile

paperinik4 · 2015-08-13T09:42:17+0200

Ciao n1k4r0,

Grazie di avermi risposto. Stamattina provo il tuo codice. Comunque avevi azzeccato il problema. Perdonami se mi sono espresso male. Appena provo ti faccio sapere.

n1k4r0 · 2015-08-13T11:30:32+0200

non preoccuparti, spero che ti funzioni

paperinik4 · 2015-08-13T13:21:47+0200

Ciao direi quasi perfetto è da modificare alcune cosette. Ti faccio uno screenshoots di come si presenta con la tua modifica.

n1k4r0 · 2015-08-13T13:35:25+0200

dovresti postarmi il codice perché solo con l'immagine non so cosa farti correggere

paperinik4 · 2015-08-13T13:57:23+0200

Perdonami,

Pensavo che c'è l'avessi sotto mano ehehehe. Ora posto.

style.css

PHP:

header {
    border-bottom: 1px solid #000;
}

footer {
    border-top: 1px solid #000;
}

.wrapper {
    position: relative;
}
.wrapper:after,
.wrapper:before {
    content: '';
    display: table;
}
.wrapper:after {
    clear: both;
}
    

.colonna {
    float: left;
    width: 33.33%;
}

.col:after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    border-right: 1px solid #000;
    width: 0;
}

.col-1:after {
    left: 33.33%;
}

.col-2:after {
    left: 66.66%;
}

provapagina.php

PHP:

<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
                <link rel="stylesheet" href="style.css">
      <style type="text/css">
#intestazione{
 width:100%;
 height:100px;
 position:absolute;
 font-family: Comic Sans MS;
 top:0px;
 left:0px;
 text-align: center;
}
 #divhr {
    
position:absolute;
top: 85px;    
font-family:Comic Sans MS;
}


        #footer
{
    position: fixed;
    bottom: 0;
    left: 0;
    text-align: center;
    background: white;
    color: black;
    font-family: Comic Sans MS;
    font-size: 15px;
    width: 100%;
   /* padding: 5px 0;*/
    opacity: 0.9;
    -moz-opacity: 0.9;
    filter: alpha(opacity=90);
}

</style>


    </head>
    <header>
            
       <div id = "intestazione">
            <h1>Gestione iscrizione prova</h1>
            <hr>
            </div>
            
        <div id = "divhr">
            
    </header> 
    
    <body>
<div class="wrapper">
            <div class="colonna col col-1">primo</div>
            <div class="colonna col col-2">secondo</div>
            <div class="colonna">terzo</div>
        </div></div>
        
        <footer>
            <div id ="footer">
                <hr>
                <h1>Questa è una prova del footer fondo pagina</h1>
                </hr>
            </div>
        </div>
        </footer>
        <?php
        require_once "connetti.php";
        require_once "data.php";
        echo "</hr>";
        ?>

    </body>
</html>

Come noterai ci sono due style uno è il tuo l'altro è il mo che mette sullo stesso rigo data e il messaggio di benvenuto. Un ultima cortesia, a sx del monitor dove c'è esattamente la data ci dovrei mettere anche un logo.

Quello che ti ho inviato è il logo in questione di quelle dimensioni. Grazie. Immagino che i due stili si possano unificare in un unico style.

n1k4r0 · 2015-08-13T14:55:50+0200

alcune domande tanto per capirmi meglio

perché lo header è in posizione assoluta?

cosa ci va dentro le tre colonne che vorresti?

cosa contengono i file connetti.php e data.php che chiami nella pagina?

perché il footer è fixed?

riesci ad allegare un disegno del risultato che vorresti?

scusa ma per aiutarti devo capire bene cosa vorresti e cosa sta succedendo nel codice

paperinik4 · 2015-08-13T16:19:12+0200

Ciao,

Inizialmente era nata come pagina di prova. In teoria esattamente non saprei cosa metterci nelle tre colonne. La prima un avatar e l'ultima connessione avvenuta. La terza colonna dovrebbe contenete una lista di utenti che sono connessi e il numero degli iscritti in alto a dx. In quella centrale non saprei ancora.

Connetti.php contiene la connessione al db
Data.php contiene lo script per visualizzare la data odierna.

Le righe dovrebbero iniziare dalla riga orizzontale. Spero che ti sia sufficiente cosa ci vorrei fare.

Max 1 · 2015-08-13T16:44:34+0200

Io non ho ancora capito cosa sono le righe verticali e orizzontali? Le righe sono righe e le colonne sono colenne! Morta là!

paperinik4 · 2015-08-13T16:56:06+0200

Be' ci sei andato vicino quelle che tu chiami colonne io le chiamo righe verticali. Visto che le righe orizzontali hanno il proprio tag <hr> </hr> Inoltre ti vorrei invitare ad un post dove non trov o soluzione finale ed è il seguente:

http://forum.mrwebmaster.it/php/43696-problema-memorizzare-contenuto-visualizzato-dvd.html

Pensi di potermi aiutare a risolvere la questione ??? Se leggi è tutto spiegato quello che vorrei realizzare. Grazie.

Cerca

Cerca

problema: righe verticali

paperinik4

Utente Attivo

Allegati

n1k4r0

Utente Attivo

paperinik4

Utente Attivo

n1k4r0

Utente Attivo

paperinik4

Utente Attivo

Allegati

n1k4r0

Utente Attivo

paperinik4

Utente Attivo

n1k4r0

Utente Attivo

paperinik4

Utente Attivo

Max 1

Super Moderatore

paperinik4

Utente Attivo

Discussioni simili