Jump to content

SUBIECTE NOI
« 1 / 5 »
RSS
Identificare font

Samsung Galaxy A35

Sfat pentru aprinderea automata a...

Masina de copt paine - pareri
 Cum reactivez Google Maps?

Conectare tableta X220la Tv

Femeile tinere nu mai vor sa munc...

La mulți ani @un_dac!
 La multi ani de Sfantul Gheorghe&...

Job - Facultate sau certificare

Deadpool & Wolverine (2023)

sistem hibrid eoliana + panouri +...
 Outlook e muta pe Android

Constructie Mun. Iasi. Casa P+1.

Cum mai rezolvati cu chiriasii ra...

Tastatura si mouse cu baterie int...
 

Pagina Web Auto-Center

- - - - -
Last Updated: Mar 20 2013 22:19, Started by adrianhbk , Mar 20 2013 12:04  
  ·  
  • Please log in to reply
7 replies to this topic

#1
adrianhbk
Posted 20 March 2013 - 12:04

adrianhbk

    Junior Member

  • Grup: Members
  • Posts: 46
  • Înscris: 25.09.2012
Salutare ! Am o problema.In momentul de fata creez o pagina web si nu reusesc sa centrez pagina web atunci cand este accesata.Am cautat pe net si am gasit cateva solutii pentru ca pagina web sa se auto-centreze infunctie de monitor , dar cand aplic ele se autocentreza dar nu isi mai pastreaza pozitiile care le-am declarat fiecarui element in parte , gen left:300px; . Cum fac ca atunci cand pagina web se auto-centreaza si fiecare element centrat sa pastreze pozitia initiala de 300 px de margine care am declarat-o ?

HTML CODE - Inceputul doar

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
	<meta charset="utf-8" />
	<meta http-equiv="Content-Type" content="text/html; utf-8">
	<meta http-equiv="Content-Language" content="ro">
	<meta name="description" content="blablablablabla" />
	<meta name="keywords" content="blablablablabla" />
	<meta name="abstract" content="blablablablabla">
   
<title>blablablablabla</title>
<script type="text/javascript" src="javascript/jquery-1.9.1.js"></script>
<script type="text/javascript" src="javascript/jquery-1.6.js"></script>
<script type="text/javascript" src="javascript/javascript.js"></script>
<script type="text/javascript" src="javascript/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="javascript/mouse-over.js"></script>
<link href="css/css.css" rel="stylesheet" type="text/css" />
<link href="css/fonts.css" rel="stylesheet" type="text/css" />
<link href="css/sigle.css" rel="stylesheet" type="text/css" />

</head>

<body class="wrapper">
<!--Header-->
<div id="container">
<div id="mainContent">

<div id="cine-suntem"><span class="orange">CINE</span><br /><center>SUNTEM</center></div>
<div id="ce-facem"><span class="orange">CE</span><br /><center>FACEM</center></div>
<div id="telefon"><a class='popup' href='#'><img src="img/telefon.png"><span>blablablablabla</span></a></div>


<!--End of Header-->

CSS - doar inceputul 

body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
text-align: center;

}
.wrapper #container {
width: 1024px;
margin: 0 auto;
text-align: left;
}
.wrapper #mainContent {
padding: 0 20px;
}

#cine-suntem {
font-family: "Proxima Nova Lt";
font-size: 15px;
position: absolute;
left: 300px;
top: 115px;
}

#ce-facem {
font-family:"Proxima Nova Lt";
font-size:15px;
position:absolute;
left:450px;
top:115px;
}

#telefon {
position:absolute;
		width:44px;
height:43px;
left:1000px;
top:115px;
}

#2
bibi
Posted 20 March 2013 - 12:52

bibi

    Active Member

  • Grup: Members
  • Posts: 1,183
  • Înscris: 05.02.2003
Ai incercat sa pui tot in <center>.................</center> ?

#3
onlyone
Posted 20 March 2013 - 15:03

onlyone

    - - - GAME MASTER - - -

  • Grup: Senior Members
  • Posts: 12,845
  • Înscris: 08.10.2005
#container {
width: 1024px;
margin: 0 auto;
text-align: left;
position:relative;
}

scoate .wrapper din fata container - ului

Edited by onlyone, 20 March 2013 - 15:06.

#4
adrianhbk
Posted 20 March 2013 - 15:18

adrianhbk

    Junior Member

  • Grup: Members
  • Posts: 46
  • Înscris: 25.09.2012

View Postonlyone, on 20 martie 2013 - 15:03, said:

#container {
width: 1024px;
margin: 0 auto;
text-align: left;
position:relative;
}

scoate .wrapper din fata container - ului


multumesc frumos ! Functioneaza asa !

#5
Dorin_78
Posted 20 March 2013 - 15:21

Dorin_78

    Member

  • Grup: Members
  • Posts: 323
  • Înscris: 09.02.2013
margin: 0 auto; centrează elementele

pune ăsta la body

si incearca sa folosesti cat mai putin pozitionarea absolută

Edited by Dorin_78, 20 March 2013 - 15:21.

#6
poadol
Posted 20 March 2013 - 15:36

poadol

    Guru Member

  • Grup: Senior Members
  • Posts: 14,104
  • Înscris: 13.12.2010
Cod HTML:
<!DOCTYPE html>
<html>
<head>
	 <meta charset="utf-8" />
	 <meta http-equiv="Content-Type" content="text/html; utf-8">

<title>blablablablabla</title>
<link href="css/css.css" rel="stylesheet" type="text/css" />
<link href="css/fonts.css" rel="stylesheet" type="text/css" />
<link href="css/sigle.css" rel="stylesheet" type="text/css" />

</head>

<body class="wrapper">
<!--Header-->
<div id="container">
<div id="mainContent">

<div id="cine-suntem"><span class="orange" title="Proxima Nova Lt">CINE<br />SUNTEM</span></div>
<div id="ce-facem"><span class="orange" title="Proxima Nova Lt">CE<br />FACEM</span></div>
<div id="telefon"><a class='popup' href='#'><img src="img/telefon.png"><span>blablablablabla</span></a></div>
</div>
</div>
</body>
</html>
Cod CSS:
body {
background:#ffffdd;
margin: 0;
padding: 0;
}
.wrapper #container {
width: 1024px;
height:100px;
margin: 0 auto;
border:1px solid black;
}
.wrapper #mainContent {
width: 924px;
height:80px;
margin: 9px 49px;
border:1px solid black;
font-family: Verdana, Arial, Helvetica;
}

#cine-suntem {
font-size: 15px;
position: absolute;
margin-left: 200px;
margin-top: 25px;
border:1px solid black;
padding-left:10px;
text-align: left;
}

#ce-facem {
font-size:15px;
position: absolute;
margin-left:350px;
margin-top:25px;
border:1px solid black;
padding-left:10px;
text-align: left;
}

#telefon {
position: absolute;
width:44px;
height:43px;
margin-left:550px;
margin-top:25px;
}

.orange {
text-align:center;
padding: 10px 20px;
}
Am scos
/*
din body
font: 100% Verdana, Arial, Helvetica, sans-serif;
text-align: center;
din #cine-suntem
font-family: "Proxima Nova Lt";
din #ce-facem
font-family:"Proxima Nova Lt";
*/

Sau cum aveai inainte:
Cod HTML:
<!DOCTYPE html>
<html>
<head>
	 <meta charset="utf-8" />
	 <meta http-equiv="Content-Type" content="text/html; utf-8">


<title>blablablablabla</title>
<link href="css/css.css" rel="stylesheet" type="text/css" />
<link href="css/fonts.css" rel="stylesheet" type="text/css" />
<link href="css/sigle.css" rel="stylesheet" type="text/css" />

</head>

<body class="wrapper">
<!--Header-->
<div id="container">
<div id="mainContent">
</div>
</div>
<div id="cine-suntem"><span class="orange" title="Proxima Nova Lt">CINE<br />SUNTEM</span></div>
<div id="ce-facem"><span class="orange" title="Proxima Nova Lt">CE<br />FACEM</span></div>
<div id="telefon"><a class='popup' href='#'><img src="img/telefon.png" alt="telefon.png"><span>blablablablabla</span></a></div>

</body>
</html>
Cod CSS:
body {
background:#ffffdd;
margin: 0;
padding: 0;
}
.wrapper #container {
width: 1024px;
height:100px;
margin: 0 auto;
border:1px solid black;
}
.wrapper #mainContent {
width: 924px;
height:80px;
margin: 9px 49px;
border:1px solid black;
font-family: Verdana, Arial, Helvetica;
}

#cine-suntem {
font-size: 15px;
position: absolute;
margin-left: 400px;
margin-top: 25px;
border:1px solid black;
padding-left:10px;
text-align: left;
}

#ce-facem {
font-size:15px;
position: absolute;
margin-left:550px;
margin-top:25px;
border:1px solid black;
padding-left:10px;
text-align: left;
}

#telefon {
position: absolute;
width:44px;
height:43px;
margin-left:750px;
margin-top:25px;
}

.orange {
text-align:center;
padding: 10px 20px;
}
/*
body
font: 100% Verdana, Arial, Helvetica, sans-serif;
text-align: center;
#cine-suntem
font-family: "Proxima Nova Lt";
#ce-facem
font-family:"Proxima Nova Lt";
*/

In HTML am mai scos din ele dar le adaugi tu pe cele care lipsesc gen:

<?xml version="1.0" encoding="UTF-8" ?>

<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>

<meta http-equiv="Content-Language" content="ro">
<meta name="description" content="blablablablabla" />
<meta name="keywords" content="blablablablabla" />
<meta name="abstract" content="blablablablabla">


<script type="text/javascript" src="javascript/jquery-1.9.1.js"></script>
<script type="text/javascript" src="javascript/jquery-1.6.js"></script>
<script type="text/javascript" src="javascript/javascript.js"></script>
<script type="text/javascript" src="javascript/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="javascript/mouse-over.js"></script>
sa nu uiti sa stergi </body> si </html> de la finalul codului HTML scris pe forum, cand il introduci langa restul codului tau.

In CSS am adaugat in 4 locuri: border:1px solid black; doar ca sa realizezi ce si cum, cand nu mai ai nevoie de ele le stergi, in rest sper sa te descurci. Posted Image

Edited by poadol, 20 March 2013 - 15:58.

#7
adrianhbk
Posted 20 March 2013 - 17:07

adrianhbk

    Junior Member

  • Grup: Members
  • Posts: 46
  • Înscris: 25.09.2012

View Postpoadol, on 20 martie 2013 - 15:36, said:

Cod HTML:
<!DOCTYPE html>
<html>
<head>
	 <meta charset="utf-8" />
	 <meta http-equiv="Content-Type" content="text/html; utf-8">

<title>blablablablabla</title>
<link href="css/css.css" rel="stylesheet" type="text/css" />
<link href="css/fonts.css" rel="stylesheet" type="text/css" />
<link href="css/sigle.css" rel="stylesheet" type="text/css" />

</head>

<body class="wrapper">
<!--Header-->
<div id="container">
<div id="mainContent">

<div id="cine-suntem"><span class="orange" title="Proxima Nova Lt">CINE<br />SUNTEM</span></div>
<div id="ce-facem"><span class="orange" title="Proxima Nova Lt">CE<br />FACEM</span></div>
<div id="telefon"><a class='popup' href='#'><img src="img/telefon.png"><span>blablablablabla</span></a></div>
</div>
</div>
</body>
</html>
Cod CSS:
body {
background:#ffffdd;
margin: 0;
padding: 0;
}
.wrapper #container {
width: 1024px;
height:100px;
margin: 0 auto;
border:1px solid black;
}
.wrapper #mainContent {
width: 924px;
height:80px;
margin: 9px 49px;
border:1px solid black;
font-family: Verdana, Arial, Helvetica;
}

#cine-suntem {
font-size: 15px;
position: absolute;
margin-left: 200px;
margin-top: 25px;
border:1px solid black;
padding-left:10px;
text-align: left;
}

#ce-facem {
font-size:15px;
position: absolute;
margin-left:350px;
margin-top:25px;
border:1px solid black;
padding-left:10px;
text-align: left;
}

#telefon {
position: absolute;
width:44px;
height:43px;
margin-left:550px;
margin-top:25px;
}

.orange {
text-align:center;
padding: 10px 20px;
}
Am scos
/*
din body
font: 100% Verdana, Arial, Helvetica, sans-serif;
text-align: center;
din #cine-suntem
font-family: "Proxima Nova Lt";
din #ce-facem
font-family:"Proxima Nova Lt";
*/

Sau cum aveai inainte:
Cod HTML:
<!DOCTYPE html>
<html>
<head>
	 <meta charset="utf-8" />
	 <meta http-equiv="Content-Type" content="text/html; utf-8">


<title>blablablablabla</title>
<link href="css/css.css" rel="stylesheet" type="text/css" />
<link href="css/fonts.css" rel="stylesheet" type="text/css" />
<link href="css/sigle.css" rel="stylesheet" type="text/css" />

</head>

<body class="wrapper">
<!--Header-->
<div id="container">
<div id="mainContent">
</div>
</div>
<div id="cine-suntem"><span class="orange" title="Proxima Nova Lt">CINE<br />SUNTEM</span></div>
<div id="ce-facem"><span class="orange" title="Proxima Nova Lt">CE<br />FACEM</span></div>
<div id="telefon"><a class='popup' href='#'><img src="img/telefon.png" alt="telefon.png"><span>blablablablabla</span></a></div>

</body>
</html>
Cod CSS:
body {
background:#ffffdd;
margin: 0;
padding: 0;
}
.wrapper #container {
width: 1024px;
height:100px;
margin: 0 auto;
border:1px solid black;
}
.wrapper #mainContent {
width: 924px;
height:80px;
margin: 9px 49px;
border:1px solid black;
font-family: Verdana, Arial, Helvetica;
}

#cine-suntem {
font-size: 15px;
position: absolute;
margin-left: 400px;
margin-top: 25px;
border:1px solid black;
padding-left:10px;
text-align: left;
}

#ce-facem {
font-size:15px;
position: absolute;
margin-left:550px;
margin-top:25px;
border:1px solid black;
padding-left:10px;
text-align: left;
}

#telefon {
position: absolute;
width:44px;
height:43px;
margin-left:750px;
margin-top:25px;
}

.orange {
text-align:center;
padding: 10px 20px;
}
/*
body
font: 100% Verdana, Arial, Helvetica, sans-serif;
text-align: center;
#cine-suntem
font-family: "Proxima Nova Lt";
#ce-facem
font-family:"Proxima Nova Lt";
*/

In HTML am mai scos din ele dar le adaugi tu pe cele care lipsesc gen:

<?xml version="1.0" encoding="UTF-8" ?>

<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>

<meta http-equiv="Content-Language" content="ro">
<meta name="description" content="blablablablabla" />
<meta name="keywords" content="blablablablabla" />
<meta name="abstract" content="blablablablabla">


<script type="text/javascript" src="javascript/jquery-1.9.1.js"></script>
<script type="text/javascript" src="javascript/jquery-1.6.js"></script>
<script type="text/javascript" src="javascript/javascript.js"></script>
<script type="text/javascript" src="javascript/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="javascript/mouse-over.js"></script>
sa nu uiti sa stergi </body> si </html> de la finalul codului HTML scris pe forum, cand il introduci langa restul codului tau.

In CSS am adaugat in 4 locuri: border:1px solid black; doar ca sa realizezi ce si cum, cand nu mai ai nevoie de ele le stergi, in rest sper sa te descurci. Posted Image


Multumesc !

#8
poadol
Posted 20 March 2013 - 22:19

poadol

    Guru Member

  • Grup: Senior Members
  • Posts: 14,104
  • Înscris: 13.12.2010
Cu placere.

Anunturi

Second Opinion Second Opinion

Folosind serviciul second opinion ne puteți trimite RMN-uri, CT -uri, angiografii, fișiere .pdf, documente medicale.

Astfel vă vom putea da o opinie neurochirurgicală, fără ca aceasta să poată înlocui un consult de specialitate. Răspunsurile vor fi date prin e-mail în cel mai scurt timp posibil (de obicei în mai putin de 24 de ore, dar nu mai mult de 48 de ore). Second opinion – Neurohope este un serviciu gratuit.

www.neurohope.ro
Back to Markup Languages

▶ 0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

  1. Forumul Softpedia
  2. → Professional Zone
  3. → Programming
  4. → Markup Languages
Forumul Softpedia foloseste "cookies" pentru a imbunatati experienta utilizatorilor Accept
Pentru detalii si optiuni legate de cookies si datele personale, consultati Politica de utilizare cookies si Politica de confidentialitate