due div allineati all'interno di un'altro div

J

Jakub Lemiszewski

Utente Attivo
5 Dic 2013
119
1
0
Salve,
Sto cercando di mettere due div allineati orrizontalmente all'interno di un altro. Il tutto poi deve essere centrato sullo schermo a ogni risoluzione e su questo anche vorrei un aiuto. Grazie e di seguito il codice:

HTML: 
<!doc html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
	<title>Welcome</title>
	<link rel="stylesheet" href="../css/entrypg.css"> 
	<!-- CSS FINISH -->
</head>  

<body>
	<div class="main-container">
		<div class="child">
		<a href=""><img src="" alt="child"></a> 
		</div>
		<div class="parent">
		<a href="experimentarium.html"><img src="" alt="parent"></a> 
		</div>
	</div>
</body> 
</html>

Codice: 
body{
margin: 0 auto;
padding:0;

}

.main-container {
	margin: 0 auto;	
	width: 80%;
	height: 80%;
	overflow: hidden;
	border: 2px black solid;
	margin-top: 5%;
	}

.child {
	clear: both;
	position: absolute;
	float: left;
	border: 2px yellow solid;
	width: 48%;
	height:auto;
}
.parent {
	position: absolute;
	float: left;
	border: 2px red solid;
	width: 48%;
	height: auto;
	top:0;	
}

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
}
 
F

frenkytribe

Utente Attivo
17 Gen 2013
87
0
0
HTML: 
<div id="main">
   <div class="affianca">
      box3
   </div>
   <div class="affianca">
      box2
   </div>
</div>

CSS
Codice: 
#main{
  position: absolute;
  width: 800px !important;
  height: 600px !important;
  top: 50%;
  margin-top: -300px; /* la metà dell' altezza */
  left: 50%;
  margin-left: -400px; /+ la metà della larghezza */
}

.affianca{
  float:left;
}
 
J

Jakub Lemiszewski

Utente Attivo
5 Dic 2013
119
1
0
frenkytribe ha scritto:
HTML: 
<div id="main">
   <div class="affianca">
      box3
   </div>
   <div class="affianca">
      box2
   </div>
</div>

CSS
Codice: 
#main{
  position: absolute;
  width: 800px !important;
  height: 600px !important;
  top: 50%;
  margin-top: -300px; /* la metà dell' altezza */
  left: 50%;
  margin-left: -400px; /+ la metà della larghezza */
}

.affianca{
  float:left;
}
Clicca per allargare...

Grazie ho provato ma me li mette uno sopra l'altro e io li voglio uno accanto all'altro in linea orizzontale.
 
cory

cory

Utente Attivo
31 Gen 2014
51
0
6
cory.altervista.org
a parte che è difficile aiutarti senza conoscere il "progetto"
non usare mai i posizionamenti assoluti se puoi evitare
HTML: 
<div id="main-container">
		<a href=""><img src="http://tellmewhy84.files.wordpress.com/2010/10/prova.jpg" alt="child"></a>
		<a href="experimentarium.html"><img src="http://tellmewhy84.files.wordpress.com/2010/10/prova.jpg" alt="parent"></a>
	</div>
e il css
HTML: 
#main-container {
    width:80%;
    margin: 0 auto
}
#main-container a {
  float:left;
    width:50%
}
#main-container a img {
	width: 100%
}
 
J

Jakub Lemiszewski

Utente Attivo
5 Dic 2013
119
1
0
cory ha scritto:
a parte che è difficile aiutarti senza conoscere il "progetto"
non usare mai i posizionamenti assoluti se puoi evitare
HTML: 
<div id="main-container">
		<a href=""><img src="http://tellmewhy84.files.wordpress.com/2010/10/prova.jpg" alt="child"></a>
		<a href="experimentarium.html"><img src="http://tellmewhy84.files.wordpress.com/2010/10/prova.jpg" alt="parent"></a>
	</div>
e il css
HTML: 
#main-container {
    width:80%;
    margin: 0 auto
}
#main-container a {
  float:left;
    width:50%
}
#main-container a img {
	width: 100%
}
Clicca per allargare...

Grazie, questo link http://s14module8in03.keaweb.dk/experimentarium/html/welcome.html ti porta al progetto che sto lavorando a scuola cosi puoi farti un'idea
 
Devi accedere o registrarti per poter rispondere.
Discussioni simili
Autore Titolo Forum Risposte Data
felino Bootstrap alert: usare lo stesso div per due messaggi consecutivi jQuery 1
paloppa Div che appare appena due form sono compilati jQuery 16
S [HTML] Distanza esatta tra due div HTML e CSS 7
P [HTML] Sfondo colorato di un div contenitore di altri due div HTML e CSS 9
S [Javascript] Nascondere e rendere visibile un Div cliccando su due link Javascript 2
K div a due colonne e div annidati HTML e CSS 17
M allineare due box(div) affiancati HTML e CSS 19
A Spazio tra due div HTML e CSS 4
F toggle con testo al toggle tra due div jQuery 3
C Dividere un div in due colonne Javascript 2
N Scrivere in un DIV in base alle scelte fatte in due select Javascript 5
T ajax con due div Ajax 14
P riuscire a porre due div sulla stessa orizzontale senza che vadano a capo HTML e CSS 1
max75 query su due tabelle e dati doppioni MS Access 2
T come ordinare dei record recuperati da due tabelle MySQL 0
K Mettere insieme due funzioni Javascript 2
C Autenticazione a due fattori FB Social Media Marketing 0
A Visualizzazione due tabelle PHP 1
T Query su due tabelle con totali Database 4
MarcoGrazia Calcolo fra due date con esclusione delle feste PHP 7
P inserire due voci in un titolo post wp WordPress 1
J Scrivere in due JPanel Java 1
F confrontare due stringhe "numeriche" PHP 7
M Aggiornare stesso campo in due tabelle PHP 0
M Collegare due segmenti di rete diversi Reti LAN e Wireless 0
M Aggiornare simultaneamente i campi di due tabelle collegate con id PHP 4
Tommy03 Unire dati da due tabelle MySQL 5
A Cercare un carattere uguale in due stringhe Java 5
elpirata [MySQL] Sincronizzare dati tra due tabelle sullo stesso host MySQL 0
S [PHP] Confrontare due array con valori quasi uguali PHP 2
G Mi hanno fatto due preventivi per telecamere abitazione IP Cam e Videosorveglianza 8
MarcoGrazia [PHP] Unioni di due array con somma di valori PHP 6
MarcoGrazia jquery validate, necessità di validare almeno un elemento select su due jQuery 1
Tommy03 Due menù nella stessa app Sviluppo app per Android 0
I [PHP] generazione url "uguale" che punta a due immagini diverse PHP 0
G Condividere 1 cartella in rete due computer windows 10 Reti LAN e Wireless 0
Domenico_Falco1 Associare una stessa funzione get a due eventi a.click con classi differenti Ajax 6
M PHP Arrotondamento minuti in differenza tra due Orari PHP 9
N due siti web sullo stesso spazio hosting Hosting 0
S [PHP] come esportare due tabelle in file excel su due fogli distinti PHP 8
maxnegri Conoscere giorni della settimana fra due date con php PHP 2
felino EXCEL: verifica dati mancanti tra due sheet Windows e Software 2
I Allineare due righe di testo in photoshop Photoshop 2
Monital funzione php si ripete due volte PHP 6
A [Javascript] Multi input su due tabelle correlate Javascript 1
felino Windows 8.1: installare sistema operativo e programmi in due hard disk diversi Windows e Software 4
M [PHP] Sommare due campi calcolati PHP 3
K [PHP] Controllare dati database tra due valori PHP 18
F [Photoshop] sovrapporre due immagini usando funzione batch Photoshop 0
A Php mail non invia due mail di seguito PHP 3

Discussioni simili

Alto Basso