problema: righe verticali

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: 242

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:

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.
 

n1k4r0

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

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.
 

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 :)
 

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

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

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:
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
I Sto progettando nuovi siti utilizzando bootstrap e devo dire funziona bene, l'unico problema e la maschera -moz- HTML e CSS 0
K Problema form update PHP 2
O problema con dvr dahua xvr5116 IP Cam e Videosorveglianza 0
S Problema nel ciclare un json Javascript 0
G Problema con Xampp Web Server 1
andrea barletta Problema con miniature comandi Photoshop 0
I problema con alice Posta Elettronica 0
K Problema Inner join PHP 1
F firefox problema http Linux e Software 0
N Problema con position absolute e overflow HTML e CSS 4
E Problema jquery Success jQuery 2
L Problema con inner join PHP 11
K [php] Problema con inner join PHP 4
E problema selezione sfumata Photoshop 2
K [PHP] Problema con variabili concatenate. PHP 1
A Problema filtro fluidifica Photoshop Photoshop 1
H Problema Bordi Scontorno Photoshop 1
O problema con query PHP 4
R Problema installazione Realtek WiFi USB rtl8821 Reti LAN e Wireless 0
I problema con 2 account Posta Elettronica 1
L problema collegamento file css con html HTML e CSS 1
Y Problema percorso file in rete PHP 1
N Problema SEO "L'URL non si trova su Google" SEO e Posizionamento 4
E Problema accesso a file con app sviluppata con MIT APP INVENTOR 2 Sviluppo app per Android 0
P Problema acquisizione clienti Webdesign e Grafica 1
F NetBeans problema creazione progetto Java Windows e Software 0
M Problema con Try Catch PHP 0
C problema seo + cerco esperto SEO e Posizionamento 11
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
R problema con else PHP 0
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

Discussioni simili