problema: righe verticali

P

paperinik4

Utente Attivo
29 Mag 2011
1.811
0
36
Roma
www.ricetteagogo.it
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.
 

Allegati

  • riga verticale.PNG
    riga verticale.PNG
    24,7 KB · Visite: 159
N

n1k4r0

Utente Attivo
15 Nov 2012
135
0
0
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 :)
 
Ultima modifica:
P

paperinik4

Utente Attivo
29 Mag 2011
1.811
0
36
Roma
www.ricetteagogo.it
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.
 
N

n1k4r0

Utente Attivo
15 Nov 2012
135
0
0
dovresti postarmi il codice perché solo con l'immagine non so cosa farti correggere :)
 
P

paperinik4

Utente Attivo
29 Mag 2011
1.811
0
36
Roma
www.ricetteagogo.it
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.

paperinikchefmod.png

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.
 
N

n1k4r0

Utente Attivo
15 Nov 2012
135
0
0
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 :)
 
P

paperinik4

Utente Attivo
29 Mag 2011
1.811
0
36
Roma
www.ricetteagogo.it
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

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.407
339
83
Io non ho ancora capito cosa sono le righe verticali e orizzontali? Le righe sono righe e le colonne sono colenne! Morta là!
 
P

paperinik4

Utente Attivo
29 Mag 2011
1.811
0
36
Roma
www.ricetteagogo.it
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.
 
Ultima modifica:
Devi accedere o registrarti per poter rispondere.
Discussioni simili
Autore Titolo Forum Risposte Data
M [Photoshop] problema di sfumatura a righe Photoshop 1
U Problema con eliminazione righe dalla tabella del database PHP 1
M Problema con Try Catch PHP 0
C problema seo + cerco esperto SEO e Posizionamento 1
Sergio Unia Problema con gli eventi del mouse su una data table: Javascript 2
T PROBLEMA CON SESSIONI PHP 3
A Problema, non so, di scale() o transform, oppure altro? HTML e CSS 0
T ALTRO PROBLEMA CON ARRAY PHP PHP 1
T PROBLEMA CON ARRAY PHP 8
L problema con query select PHP 2
R Problema query con ricerca id numerico PHP 2
F Problema con risposta PHP 0
S problema con recupero dati tabella mysql PHP 2
Z Problema con il mio tp-l i nk Reti LAN e Wireless 1
I PROBLEMA: Sostituzione sito XAMPP E-Commerce 0
T problema data 30/11/-1 PHP 0
L Problema RAM con Tomcat 8 Apache 0
napuleone problema con sort e asort PHP 4
Y Problema incolonnamento tabella PHP 7
S problema salvataggio immagini Photoshop 0
Z Problema con INT MySQL PHP 1
Z Problema database MySQL con XAMPP PHP 0
M Problema con controllo form in real time jQuery 6
D problema php mysql PHP 1
D problema php mysql PHP 1
M Problema Wi-Fi Linux Linux e Software 1
Z Problema di sincronizzazione PAYPAL con PHP PHP 1
Daniele_Carrara Problema Aperture Mailup Email Marketing 5
F PROBLEMA ACCESSO INSTAGRAM Discussioni Varie 2
R Problema connessione db PHP 7
M problema if PHP 2
G Problema con Get page PHP 4
N Problema passaggio variabili tra pagine PHP 4
P Problema con require once PHP 6
P Problema con i package Java 1
A Problema login con Safari PHP 14
F INDESIGN: problema esportazione esecutivo per la stampa con foto B/N Webdesign e Grafica 1
H problema carrello woocommerce PHP 2
S problema con css bootstrap3 HTML e CSS 4
M .load() problema con caricamenti dinamici di js Javascript 0
M Problema su query JOIN in tre tabelle PHP 0
S Problema esportazione tabelle Mysql in Excel PHP 0
G Problema ------- con Query PHP 1
G Problema con Query PHP 1
M Problema su update di 3 tabelle PHP 1
T problema con select dinamica con jquery Javascript 0
A Problema checkout carrello php PHP 2
R Problema al server Domini 0
A Problema nel passare la variabile PHP 0
G Problema update di un database PHP 0

Discussioni simili

Alto Basso